html,
body {
  scroll-behavior: auto;
}

html {
  height: 100%;
}

body {
  min-height: 100vh;
  overscroll-behavior: none;
}
/* ==========================================================
   FOOTER — SAFARI MIX-BLEND FIX
   ========================================================== */

/* Keep Elementor child containers from creating their own
   stacking contexts */
/* ==========================================================
   FOOTER — SAFARI MIX-BLEND
   ========================================================== */

/* Remove Elementor child stacking contexts */
#footer-cont .e-con.e-child,
#footer-cont .e-con.e-child * {
  z-index: auto;
}

/* Prevent footer elements from becoming isolated layers */
#footer-cont,
#footer-cont .e-con,
#footer-cont .elementor-element {
  isolation: auto;
}

/* Force footer links into their own compositing layer */
#footer-cont a {
  position: relative;
  z-index: 1;
  mix-blend-mode: difference;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Disable blend on hover */
#footer-cont a:hover,
#footer-cont a.grad-line-hover {
  mix-blend-mode: normal;
}

/* Elementor widgets themselves must not blend */
#footer-cont .elementor-widget,
#footer-cont .elementor-widget-nav-menu,
#footer-cont .elementor-widget-text-editor {
  mix-blend-mode: normal;
}

/* Keep the parent difference-text wrapper from
   interfering with individual links */

#footer-cont .difference-text {
  mix-blend-mode: difference;
}

/* Safari: prevent Elementor transforms from creating
   separate compositing layers on the footer links */
@supports (-webkit-hyphens: none) {
  #footer-cont a {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}


header {
  mix-blend-mode: difference;
}

.main-nav .elementor-item::after {
  width: 100%;
  opacity: 1 !important;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s ease;
	
	border-radius: 12px;
}

.main-nav .elementor-item:hover::after, .main-nav .elementor-item.elementor-item-active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.main-nav .elementor-nav-menu--main > ul > li {
  opacity: 0;
  visibility: hidden;
}

.main-nav-toggle-btn {
  /* Reset native button styles */
  appearance: none;
  background: none !important;
  border: 0;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;

  /* Big hit area, icon centered inside */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 48px;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.main-nav-toggle-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* The actual icon (was the old .main-nav-toggle-btn) */
.main-nav-toggle-icon {
  position: relative;
  display: block;
  width: 48px;
  height: 4px;
  transform: rotate(0deg);
  transition: transform 0.6s ease;
  pointer-events: none; /* clicks always land on the button */
}

.main-nav-toggle-icon::before,
.main-nav-toggle-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 4px;
  background: currentColor;
  transform: translate(-50%, -50%);
	border-radius: 12px;
}

.main-nav-toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* .closed is still added to the outer .main-nav-toggle-btn by JS */
.main-nav-toggle-btn.closed .main-nav-toggle-icon {
  transform: rotate(90deg);
}

.main-nav-toggle-btn.closed .main-nav-toggle-icon::after {
  opacity: 1;
}

/* ------------------------------------------------------------------
   Gradient text (looping left to right)
------------------------------------------------------------------ */
.grad-text,
.grad-text .word,
.grad-text-list a:hover,
.grad-text-list a.elementor-item-active {
  background: linear-gradient(
    90deg,
    #b90034 0%,
    #f15641 22%,
    #ff7f57 38%,
    #ff9757 50%,
    #ff7f57 62%,
    #f15641 78%,
    #b90034 100%
  );

  background-size: 200% 100%;
  background-repeat: repeat-x;
  background-position: 200% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: wordGradient 3s linear infinite;
}

@keyframes wordGradient {
  from {
    background-position: 200% 50%;
  }
  to {
    background-position: 0% 50%;
  }
}

/* ------------------------------------------------------------------
   Gradient underline
------------------------------------------------------------------ */
.grad-line-hover {
  position: relative;
  text-decoration: none;
}

.grad-line-hover::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
	border-radius: 14px;

  background: linear-gradient(
    90deg,
    #b90034 0%,
    #f15641 22%,
    #ff7f57 38%,
    #ff9757 50%,
    #ff7f57 62%,
    #f15641 78%,
    #b90034 100%
  );

  background-size: 200% 100%;
  background-repeat: repeat-x;
  background-position: 200% 50%;

  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease;
}

.grad-line-hover:hover::after {
  transform: scaleX(1);
  transform-origin: left;
  animation: wordGradient 3s linear infinite;
}

.project-transition-cont {
  height: 100vh;
  overflow: hidden;
  /* remove position: sticky and top entirely */
  transition: none !important;
}

.difference-text {
  mix-blend-mode: difference;
}

.grad-text {
  mix-blend-mode: normal;
}




















.gradient-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 26px;
  color: #fff;
  text-decoration: none;
}

/* Line */
.gradient-link::before {
  content: "";
  width: 62px;
  height: 4px;
  flex: 0 0 62px;
  border-radius: 12px;
  background: #fff;

  mix-blend-mode: difference;

  transform-origin: left center;
  transform: scaleX(var(--gradient-line-scale, 0));
  -webkit-transform: scaleX(var(--gradient-line-scale, 0));
}

/* Text clipping */
.gradient-link-text-wrap {
  display: inline-block;
  overflow: hidden;
}

/* Word */


.gradient-link-text-gs {
  display: inline-block;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);

  will-change: transform;
	mix-blend-mode: difference;
}


.gradient-link-text {
  position: relative;
  display: inline-block;

  color: #fff;

  font-family: "Neue Haas Display Medium", Sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: default;
  line-height: normal;
  text-transform: capitalize;

  mix-blend-mode: difference;

  transform: translateY(100%);
  -webkit-transform: translateY(100%);

  animation: gradientLinkTextIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;

  will-change: transform;

  transition: color 0.3s ease;
}


/* Line animation */
@keyframes gradientLinkLineIn {
  from {
    transform: scaleX(0);
    -webkit-transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
  }
}


/* Text animation */
@keyframes gradientLinkTextIn {
  from {
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
  }

  to {
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }
}


/* Hover */
.gradient-link:hover .gradient-link-text-gs {
	mix-blend-mode: normal;
}
.gradient-link:hover .gradient-link-text {
  mix-blend-mode: normal;
  color: transparent;

  background: linear-gradient(
    90deg,
    #b90034 0%,
    #f15641 22%,
    #ff7f57 38%,
    #ff9757 50%,
    #ff7f57 62%,
    #f15641 78%,
    #b90034 100%
  );

  background-size: 200% 100%;
  background-repeat: repeat-x;
  background-position: 200% 50%;

  -webkit-background-clip: text;
  background-clip: text;

  animation:
    gradientLinkTextIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    wordGradient 3s linear infinite;
}
















.hiber-cont {
    position: relative;
    --glow-x: 50%;
    --glow-y: 50%;
}

.hiber-cont img {
    display: block;
}

.hiber-cont::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: radial-gradient(
        circle at var(--glow-x) var(--glow-y),
        rgba(255, 255, 255, 0.8) 0%,
        rgba(255, 255, 255, 0.3) 20%,
        transparent 45%
    );

    -webkit-mask-image: url("https://black.inkers.cloud/wp-content/uploads/2026/10/hiber.svg");
    mask-image: url("https://black.inkers.cloud/wp-content/uploads/2026/10/hiber.svg");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.hiber-cont:hover::after {
    opacity: 1;
}





.main-logo a svg {
    transition: filter 0.4s ease !important;
    filter: drop-shadow(0 0 0 transparent);
}
.main-logo a:hover svg {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}






.bg-transition {
  background-color: transparent;
}

.anim-words-load {
  visibility: hidden;
}

.anim-word-line {
  display: block;
  overflow: hidden;
}

.anim-word-line .word {
  display: inline-block;
}

.scroll-reveal-line {
  display: block;
  overflow: hidden;
}

.blur-text-words .scroll-reveal-line {
  display: inline-block;
	line-height: 105% !important;
}

.scroll-reveal-line .word {
  display: inline-block;
	line-height: 105% !important;
}

.hover-gradient-logo {
  width: 100%;
  height: auto;
  display: block;
  transition: 0.3s ease;
}

.hover-gradient-logo path {
  fill: #ffffff;
  transition: 0.3s ease;
}

.hover-gradient-logo:hover path {
  fill: url(#paint0_linear_4049_1025);
  transition: 0.3s ease;
}







/* Projects section: scroll-driven transforms must follow the scroll exactly.
   Elementor's .e-con has a CSS transition on transform that makes them glide. */
.projects-transition-cont .project-transition-cont {
  transition: none !important;
  will-change: transform;
}

/* Stops the browser's scroll anchoring from nudging the page by a few px
   when pin spacers are added or removed. */
.projects-transition-cont {
  overflow-anchor: none;
}























/* Kill tap highlight on interactive elements only */
a,
button,
input,
textarea,
select,
label,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Prevent iOS long-press callout + selection on buttons/controls (not links) */
button,
select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Remove native outline only when :focus-visible isn't the active match */
:focus:not(:focus-visible) {
  outline: none;
}
/*
:focus-visible {
  outline: 2px solid #F15641;
  outline-offset: 2px;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(161, 0, 219, 0.4); /* #F15641 at 40% opacity
}
*/

#smooth-content {
  padding-top: 0.1px; /* forces a new block formatting context, contains the margin */
}

.header-vid-link-wrap {
  display: flex;
  position: relative;
}

.header-vid-link-wrap::before {
  content: "";
  border: 3px solid #f200ff;
  border-radius: 50%;
  box-shadow: inset 0 0 18px #f200ff;
  opacity: 0;
  transition: opacity 0.8s ease;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.header-vid-link-wrap:hover::before {
  opacity: 1; /* show on hover */
}

.header-vid {
  background: transparent !important;
  width: 66px !important;
  height: 66px !important;
}

@supports (-webkit-touch-callout: none) {
  body {
    -webkit-overflow-scrolling: touch;
  }
}

#fluid {
  touch-action: none;
  pointer-events: none;
}

#fluid-stack {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1; /* behind all page content */
  pointer-events: none;
}

#fluid-stack .fluid-bg,
#fluid-stack .fluid-bg-white,
#fluid-stack #fluid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

#fluid-stack .fluid-bg {
  background: #000;
  z-index: 0;
}

#fluid-stack .fluid-bg-white {
  background: #fff;
  opacity: 0;
  will-change: opacity;
}

#fluid-stack #fluid {
  display: block;
  background: transparent;
  z-index: 1; /* above the black/white layers */
}

/* ------------------------------------------------------------------
   Respect reduced motion
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .grad-text,
  .grad-text .word,
  .grad-text-list a:hover,
  .grad-text-list a.elementor-item-active,
  .gradient-link:hover .gradient-link-gradient,
  .grad-line-hover:hover::after {
    animation: none;
  }
}













#site-loader {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 999999999;
  pointer-events: none;
}

#site-loader .page-transition-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#site-loader .page-transition-path {
  fill: #ffffff;
}

/* Keep the Lottie centered */
#site-loader #lottie-cont {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

#lottie-cont {
  mix-blend-mode: difference;
}

#lottie-cont svg {
  width: 160px !important;
  height: auto !important;
}

#hero-spline {
  width: 100%;
  height: 270px;
}

.entrance-anim {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.8s ease,
    visibility 0s linear 0.8s;
}

.entrance-anim.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease;
}


.entrance-anim2 {
 display: none;
}

.entrance-anim2.show {
  display: block;
}

.entrance-delay {
  display: none;
}

.entrance-delay.show {
  display: flex;
}

.anim-chars {
  white-space: nowrap;
  display: inline-flex;
}

#areal,
#whatsapp-btn {
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}

#areal.show,
#whatsapp-btn.show {
  opacity: 1;
  pointer-events: auto;
}

.wcc-consent-container {
  font-family: "Poppins", Sans-serif !important;
  width: auto !important;
}

.wcc-box-bottom-left {
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

.wcc-consent-container .wcc-consent-bar {
  background: #000000E5 !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 14px !important;
  padding: 30px 30px 30px 60px !important;
	
	font-family: "Neue Haas Display Medium", Sans-serif !important;
}

.wcc-notice .wcc-title {
  display: none !important;
}

.wcc-notice-des, .wcc-notice-des p {
	font-family: "Neue Haas Display Roman", Sans-serif !important;
	    line-height: 18px !important;
	font-size: 16px !important;
}

.wcc-notice-group {
  font-size: 16px !important;
  line-height: normal !important;
  text-align: right !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
}

.wcc-notice-donotsell-wrapper {
	display: none !important;
}

.wcc-notice-btn-wrapper {
  justify-content: center !important;
  flex-wrap: nowrap !important;
  margin-top: 0 !important;
  padding-left: 26px;
  gap: 0 20px;
}

.page-header {
  display: none;
}

.blur-text-words,
.blur-text-lines p,
.anim-chars,
.blur-text-a a {
  font-kerning: none;
}

.single-project-cont {
  transform: translateY(26px);
  opacity: 0;
  transition: none;
}

.mob-tog-wrap input[type="checkbox"] {
  display: none;
}
.mob-tog-wrap .plus-btn {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  text-align: left;
  cursor: pointer;
}
.mob-tog-wrap .plus-btn:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;

  background-position: top, bottom, left, right;
  background-repeat: no-repeat;
}
.mob-tog-wrap .plus-btn span {
  position: absolute;
  margin: 45% 10%;
  width: 32px;
  height: 3px;
	border-radius: 12px;
  background: #f2f2f2;
  pointer-events: inherit;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s, opacity 1s;
}
.mob-tog-wrap .plus-btn span:first-child {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
	opacity: 1;
}
.mob-tog-wrap .plus-btn span:last-child {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.mob-tog-wrap .check-label:checked + .btn-container .plus-btn span:first-child,
.mob-tog-wrap .parent.active .plus-btn span:first-child {
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
	opacity: 0;
}
.mob-tog-wrap .check-label:checked + .btn-container .plus-btn span:last-child,
.mob-tog-wrap .parent.active .plus-btn span:last-child {
  -webkit-transform: rotate(0);
  transform: rotate(0);
}

/* the hover animation for the border */
.mob-tog-wrap .plus-btn:hover:before {
  -webkit-animation: bigSmall 1s linear infinite;
  animation: bigSmall 1s linear infinite;
}
@-webkit-keyframes bigSmall {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
@keyframes bigSmall {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* Hide default cursor everywhere */
body,
a,
button {
  cursor: none;
}

/* Circle cursor */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ffffff91;
  pointer-events: none; /* So it doesn’t block clicks */
  transform: translate(-50%, -50%);
  transition:
    width 0.2s ease,
    height 0.2s ease,
    background-color 0.2s ease,
    border-radius 0.2s ease;
  z-index: 99999999999; /* Always on top */

  mix-blend-mode: difference;
}

/* Hover effect for links/buttons */
.cursor.hovered {
  width: 28px;
  height: 28px;
}

.cursor.drag {
  width: 120px;
  height: 60px;
  border-radius: 40px;
}

.cursor.drag::before {
  content: "Drag";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;

  color: #04040c;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
}

.cursor.view-prj {
  border-radius: 0;
  background-color: transparent;
  mix-blend-mode: difference;
}

.cursor.view-prj::before {
  content: "View\A Project";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: pre;

  color: #ffffff;
  text-align: center;
  font-family: "Neue Haas Display Medium", Sans-serif;
  font-size: 48px;
  font-style: normal;
  font-weight: default;
  line-height: 46px;
  letter-spacing: -0.96px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999999;
}

header.disabled {
  pointer-events: none;
}

.header-scroll {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.3s ease;
}

.header-hidden {
  transform: translateY(-100%);
}
.header-visible {
  transform: translateY(0);
}

header.mbm {
	mix-blend-mode: difference;
}

.cpel-switcher--layout-dropdown .cpel-switcher__lang a {
  background: transparent !important;
  text-align: center;
  transition: 1s;
}

.mob-langswitcher-cont .cpel-switcher__nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(
    to right,
    #b90034 0%,
    #f15641 45.19%,
    #ff7f57 75%,
    #ff9757 100%
  );

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  transition: background-position 0.4s ease;
  background-position: 100% 0;
}

.mob-langswitcher-cont .cpel-switcher__lang:not(:last-child)::after {
  content: " /";
}

.mob-langswitcher-cont .cpel-switcher__lang:not(:last-child) {
  margin-right: 0 !important;
}

.cpel-switcher--layout-dropdown .cpel-switcher__nav {
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);

  /* Transition only what matters */
  transition:
    max-height 1s ease,
    border-radius 1s ease;

  /* Collapsed */
  max-height: 60px;
  overflow: hidden;
  position: absolute !important;
  right: 0;
  bottom: 0;

  padding: 10px 0;
}

.cpel-switcher--layout-dropdown .cpel-switcher__nav.opened {
  border-radius: 12px;
  max-height: 288px; /* must be bigger than content */
}

/* Gradient border effect */
.cpel-switcher--layout-dropdown .cpel-switcher__nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(
    to right,
    #b90034 0%,
    #f15641 45.19%,
    #ff7f57 75%,
    #ff9757 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
}

.cpel-switcher--layout-dropdown .cpel-switcher__list {
  max-height: max-content !important;
  position: static !important;
  transition: none !important;
}

.cpel-switcher--layout-dropdown
  .cpel-switcher__list
  li.cpel-switcher__lang
  a[lang="ar"],
.elementor-11
  .elementor-element.elementor-element-eac9649.cpel-switcher--layout-dropdown
  .cpel-switcher__lang
  a[lang="ar"] {
  font-family: "GE Flow", Sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.elementor-11
  .elementor-element.elementor-element-eac9649.cpel-switcher--layout-dropdown
  .cpel-switcher__lang
  a[lang="ar"] {
  transform: translateY(-3px);
}

.cpel-switcher--layout-dropdown
  .cpel-switcher__toggle.cpel-switcher__toggle--on:after {
  cursor: none !important;
}

.cpel-switcher--layout-dropdown .cpel-switcher__toggle:after {
  cursor: none !important;
}

.fluid-container {
  overflow: hidden;
  background: transparent;
  margin: 0;
  padding: 0;
}



.plottie svg,
.plottie g,
.plottie path,
#areal svg,
#areal g,
#areal path,
#muteBtn svg,
#muteBtn g,
#muteBtn path {
  color: #ffffff;
  fill: #ffffff;
  stroke: #ffffff;

  transition:
    color 0.3s ease,
    fill 0.3s ease,
    stroke 0.3s ease !important;
}

.plottie:hover svg,
.plottie:hover g,
.plottie:hover path,
#areal:hover svg,
#areal:hover g,
#areal:hover path,
#muteBtn:hover svg,
#muteBtn:hover g,
#muteBtn:hover path {
  color: #f15641;
  fill: #f15641;
  stroke: #f15641;

  transition:
    color 0.3s ease,
    fill 0.3s ease,
    stroke 0.3s ease !important;
}

#areal,
#whatsapp-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 80px;
  min-height: 48px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 0 17px;
  line-height: 10px;
  cursor: pointer;
}

.ar-player-cont,
.ar-player-mob-rotate {
  display: none;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999999;
}

.ar-player-cont {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999999;
  border-radius: 40px;
  width: 640px;
  height: 640px;
}

.ar-player-cont-close {
  cursor: pointer;
}

.ar-player-cont-close svg path {
  transition: 0.4s;
  color: #ffffff;
  fill: #ffffff;
}

.ar-player-cont-close:hover svg path {
  color: #f15641;
  fill: #f15641;
}

.mar-inner {
  display: inline-flex;
  white-space: nowrap;
  gap: 0 18px;
}

.video-cont {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0 60px;
}

/* ==========================================================
   VIDEO TEASER
   ========================================================== */

.video-cont .teaser-wrap {
  position: relative;
  width: 100%;

  height: auto;
  aspect-ratio: 16 / 9;

  overflow: hidden;
  background: #000;

  display: flex;
  align-items: center;
  justify-content: center;

  user-select: none;

  border-radius: 12px;
}

/* ==========================================================
   TEASER / MODAL <video> ELEMENTS
   ========================================================== */

/*
 * Native <video>, no iframe, no Vimeo Player SDK — so there is no
 * native player chrome to fight. pointer-events: none keeps the
 * elements non-interactive so .teaser-wrap and your custom modal
 * controls remain the only things handling clicks.
 */

.video-cont .teaser-video,
.video-cont .modal-video {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  min-height: 100px;

  object-fit: cover;

  display: block;

  pointer-events: none;
}

.video-cont .teaser-video {
  position: static;
}

/* ==========================================================
   FLOATING PLAY FOLLOWER
   ========================================================== */

.video-cont .play-follower {
  font-family: "Neue Haas Display Medium", Sans-serif;

  position: absolute;

  top: -49px;
  left: -146px;

  pointer-events: none;

  z-index: 10;

  transform: translate(0, 0);

  color: #ffffff;

  font-size: 48px;

  font-style: normal;

  font-weight: default;
	
	letter-spacing: -1px;

  transition: transform 0.05s linear;
}

/* ==========================================================
   HIDE CURSOR ON TEASER
   ========================================================== */

.video-cont .teaser-wrap.hide-cursor {
  cursor: none;
}

.video-cont .teaser-wrap.hide-cursor .play-follower {
  opacity: 1;
}

/* ==========================================================
   MODAL OVERLAY
   ========================================================== */

/*
 * IMPORTANT:
 *
 * The modal stays inside .video-cont, positioned absolute rather
 * than fixed, because ScrollSmoother transforms #smooth-content (a
 * transform on any ancestor creates a new containing block, which
 * breaks position: fixed regardless of where the element sits in
 * the DOM).
 *
 * Rather than track position continuously, the JS pauses
 * ScrollSmoother the moment the modal opens (so the page behind it
 * literally cannot move) and takes a single GSAP position snapshot
 * at that moment. ScrollSmoother resumes on close. Position is only
 * recalculated on resize/orientation change, not on every frame.
 */

.video-cont .modal-overlay {
  position: absolute;

  left: 0;
  top: 0;

  width: 100vw;

  height: 100vh;
  height: 100svh;

  align-items: center;
  justify-content: center;

  background: #000000;

  z-index: 9999999999;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.video-cont .modal-overlay.open {
  display: flex;

  opacity: 1;
  visibility: visible;
}

/* ==========================================================
   MODAL PLAYER
   ========================================================== */

.video-cont .modal-player {
  width: 100vw;

  height: 100vh;
  height: 100svh;

  max-height: 100vh;

  background: #000;

  border-radius: 0;

  overflow: hidden;

  display: flex;
  flex-direction: column;

  position: relative;
}

/* ==========================================================
   VIMEO MODAL CONTAINER
   ========================================================== */

.video-cont .modal-video {
  /*
   * Overrides the shared top/left/width/height:100% from the rule
   * above — the modal video sits within the flex layout (leaving
   * room for .controls below it) rather than absolutely filling
   * .modal-player.
   */
  position: relative;
  top: auto;
  left: auto;

  width: 100%;

  flex: 1 1 auto;

  min-height: 0;

  background: #000;
}

/* ==========================================================
   CUSTOM CONTROLS
   ========================================================== */

.video-cont .controls {
  position: relative;

  z-index: 20;

  flex: 0 0 auto;
}

@media (max-width: 700px) {
  .modal-player {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

/* The actual fullscreen video inside modal */
.video-cont .modal-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* Controls container (bottom center) */
.video-cont .controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 0 44px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.video-cont .controls-inner {
  padding: 18px 28px 12px;
  background: rgba(0, 0, 0, 0.84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 14px;
}

.video-cont .controls-row {
  display: flex;
  gap: 32px;
  align-items: center;
}
.video-cont .controls-row.top {
  justify-content: center;
}
.video-cont .controls-row.bottom {
  width: 100%;
  padding: 11px 7px 0;
}

.video-cont .controls-row.top button svg {
  max-height: 40px;
}

.video-cont .controls-row.top button svg path {
  transition: 0.4s;
  color: #ffffff;
  fill: #ffffff;
}

.video-cont .controls-row.top button:hover svg path {
  color: #f15641;
  fill: #f15641;
}

.video-cont #muteBtn svg path {
  transition: none;
}

.video-cont .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  border: none;
  cursor: pointer;
  user-select: none;
  width: 40px;
}
.video-cont .btn:active {
  transform: scale(0.98);
}

/* Progress bar */
.video-cont .progress {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 8px;
  background: #181818;
  overflow: visible;
  cursor: none;
}
.video-cont .progress .bar {
  height: 100%;
  width: 0%;
  background: #F15641;
  border-radius: 8px;
  position: relative;
}

.video-cont .progress .bar::before {
  content: "";
  position: absolute;
  inset: -10px;
}

/* Timestamp markers container (clickable timestamps) */
.video-cont .timestamps {
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  padding: 0 6px;
  pointer-events: none;
  display: none;
}
.video-cont .timestamp-btn {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* small time label on left */
.video-cont .time-left {
  color: #fff;
  font-size: 13px;
  margin-left: 8px;
  display: none;
}

/* Accessibility and hints */
.video-cont .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Close button absolute top-right */
.video-cont .close-abs {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 120;
  display: none;
}

/* Nice shadow for controls */
.video-cont .controls .btn {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.video-cont #muteBtn img {
  display: none !important;
}

.play-video-text-cont {
  display: block;
}

.play-video-text-cont.project {
  text-align: center;
  font-size: 48px;
  line-height: 46px;
  font-style: normal;
  font-weight: 600;
}

.play-video-button-cont {
  display: none;
}

.marquee {
  overflow: hidden;
  display: flex;
}

.marquee h3 {
  white-space: nowrap;
  margin: 0;
}

.marquee-hover-cont a {
  display: flex;
  background: transparent;
  transition: 0.5s;
  overflow-wrap: break-word;
  white-space: nowrap;
}

.marquee-hover-cont a .elementor-button-content-wrapper {
  display: inline-block;
  width: 100%;
  text-align: left;
  overflow: hidden;
}

.marquee-hover-cont a .elementor-button-icon {
  transition: none;
  position: absolute;
  right: 0;
  height: 100%;
  top: 0;
  padding: 0 60px;
  background: transparent;
  z-index: 2;
}

.marquee-hover-cont a svg {
  width: 60px;
}

#projects-filters-wrap {
  transition-duration: 0s !important;
}

.projects-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  border-radius: 20px;
}

.marquee-hover-cont a i {
  font-family: "Neue Haas Display Roman", sans-serif !important;
    font-weight: default !important;
}

.inner-cont-bg {
  background: rgba(0, 0, 0, 0.75);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: rgba(0, 0, 0, 0.75);
}

.project-cont {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.project-prev,
.project-next {
  display: none !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5em 1em;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.project-prev {
  left: 10px;
}
.project-next {
  right: 10px;
}
.project-prev.disabled,
.project-next.disabled {
  pointer-events: none;
  opacity: 0.5;
}

.projects-video-cont {
  position: relative;
  width: 100%;
  height: 90vh;
  z-index: 0; /* keep videos in the background but visible */
}

.projects-video-cont video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* all videos behind by default */
}

.projects-video-cont video.active {
  z-index: 0; /* only the active one comes up */
}

.project-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex; /* always flex for centering */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
  z-index: 1;

  opacity: 0;
  pointer-events: none;
  transition: opacity 2s ease-in-out; /* smooth fade */
}

.project-content-inner {
  height: 100%;
}

.project-content.active {
  opacity: 1;
  pointer-events: auto;
}

.project-bullets-cont {
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.project-bullets {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
  padding: 18px;
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.project-bullet {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 10px;
  background: #ffffff;
  cursor: none;
  transition:
    width 4s ease-in-out,
    background 4s;
}
/* invisible larger click area */
.project-bullet::before {
  content: "";
  position: absolute;
  inset: -10px; /* increases clickable zone */
}
.project-bullet.disabled {
  cursor: none;
}
.project-bullet.active {
  background: #f200ff;
  width: 62px;
  border-radius: 10px;
}
.project-next.disabled,
.project-prev.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.mob-nav-list-cont li {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* when parent has .opened, we will add .animate class on li via JS */
.mob-nav-list-cont li.animate {
  opacity: 1;
}

.gradient-border-btn,
.wcc-btn {
  font-family: "Poppins", Sans-serif;
  position: relative;
  display: inline-block;
  padding: 18px 46px;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff !important;
  text-decoration: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  z-index: 0;
  overflow: hidden;

  background: rgba(0, 0, 0, 0.84);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.wcc-btn {
  border-radius: 12px !important;
  min-width: 140px;
  padding: 10px !important;
  border: none !important;
  margin: 0 !important;
}

/* Gradient border using pseudo-element */
.gradient-border-btn::before,
.wcc-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;

  background: linear-gradient(
    90deg,
    #b90034 0%,
    #f15641 35.19%,
    #ff7f57 55%,
    #ff9757 100%
  );

  background-size: 200% 100%;
  background-position: 0% 50%;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  z-index: -1;
  transition: background-position 1.2s ease;
}

/* Hover */
.gradient-border-btn:hover::before,
.wcc-btn:hover::before {
  background-position: 100% 50%;
}

.mobile-nav-cont {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 40px;
  background: rgb(0 0 0 / 0%);

  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: all 0.5s ease-in;
  transform-origin: top left;
  overflow: hidden;
  opacity: 0;
  margin: 0;
  padding: 0;
}

.mobile-nav-cont.opened {
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  opacity: 1;
  background: rgb(0 0 0 / 90%);
}

.orb-link-wrap {
  display: block;
  width: 60px;
  height: 60px;
  overflow: hidden;
}

.no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
}

.anim-chars {
  transition: 0.4s;
  color: #f15641;
}

.marquee h3 {
  font-size: 48px;
  font-style: italic;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.48px;
}

.obsidion-cont a {
  transition: 0.4s;
  display: flex;
  width: 90px;
}

.obsidion-cont a svg {
  width: 100%;
  height: auto;
}

.obsidion-cont a svh,
.obsidion-cont a path,
.obsidion-cont a g {
  transition: 0.4s;
}

.obsidion-cont a:hover svg,
.obsidion-cont a:hover path,
.obsidion-cont a:hover g {
  color: #f15641;
  fill: #f15641;
}

.cform-cont {
}

.cform-cont .elementor-field-group {
  padding: 0 !important;
}

/* Placeholder color setup */
.cform-cont ::placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}
.cform-cont ::-webkit-input-placeholder {
  color: #ffffff !important;
}
.cform-cont ::-moz-placeholder {
  color: #ffffff !important;
  opacity: 1 !important;
}
.cform-cont :-ms-input-placeholder {
  color: #ffffff !important;
}
.cform-cont ::-ms-input-placeholder {
  color: #ffffff !important;
}

.cform-cont input,
.cform-cont textarea {
  padding: 30px 52px;
}

.cform-cont textarea {
  border-radius: 14px !important;
  min-height: 248px;
}

/* Gradient border button */
/*
.cform-cont button[type="submit"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 2px;
  z-index: -1;

  background: linear-gradient(
    to right,
    #B90034 0%,
    #F15641 45.19%,
    #FF7F57 75%,
    #FF9757 99.99%
  );

  opacity: 1;
  transition: opacity 1.2s ease;
}

.cform-cont button[type="submit"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 2px;
  z-index: -1;

  background: linear-gradient(
    to left,
    #B90034 0%,
    #F15641 45.19%,
    #FF7F57 75%,
    #FF9757 99.99%
  );

  opacity: 0;
  transition: opacity 1.2s ease;
}

.cform-cont button[type="submit"]:hover::before {
  opacity: 0;
}

.cform-cont button[type="submit"]:hover::after {
  opacity: 1;
}
*/

/* Gradient border button */
@property --x { syntax: "<length-percentage>"; inherits: true; initial-value: 0%; }

.cform-cont button[type="submit"] {
  position: relative;
  isolation: isolate;
  transition: --x 0.25s ease-out;
}

.cform-cont button[type="submit"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 2px;
  z-index: -1;

  background: radial-gradient(
    circle at var(--x) 50%,
    #B90034 0%,
    #F15641 35%,
    #FF7F57 65%,
    #FF9757 100%
  );
}

.cform-cont .e-form__buttons {
	margin-top: 54px;
}

.cform-cont .elementor-field-type-text,
.cform-cont .elementor-field-type-email,
.cform-cont .elementor-field-type-tel,
.cform-cont .elementor-field-type-textarea {
  position: relative;
  border: 1px solid #FFFFFF;
  border-radius: 14px;
  z-index: 0;
  transition:
    border-color 0.3s ease,
    opacity 0.3s ease;
}

/* gradient border hidden by default */
.cform-cont .elementor-field-type-text::before,
.cform-cont .elementor-field-type-email::before,
.cform-cont .elementor-field-type-tel::before,
.cform-cont .elementor-field-type-textarea::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 14px;
  padding: 2px;
	
  background: linear-gradient(to right, #B90034 0%, #F15641 45.19%, #FF7F57 75%, #FF9757 99.99%);
  background-size: 200% 100%;
  background-position: 0% 0;
  opacity: 0;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  transition:
    background-position 0.5s ease,
    opacity 0.4s ease;
}

/* when focused — show gradient, hide normal border */
.cform-cont .elementor-field-type-text:focus-within,
.cform-cont .elementor-field-type-email:focus-within,
.cform-cont .elementor-field-type-tel:focus-within,
.cform-cont .elementor-field-type-textarea:focus-within {
  border-color: transparent; /* hide static border */
}

.cform-cont .elementor-field-type-text:focus-within::before,
.cform-cont .elementor-field-type-email:focus-within::before,
.cform-cont .elementor-field-type-tel:focus-within::before,
.cform-cont .elementor-field-type-textarea:focus-within::before {
  opacity: 1;
  background-position: 50% 0;
}

.cform-cont .elementor-field-type-textarea {
  border-radius: 14px;
}

.cform-cont .elementor-field-type-textarea::before {
  border-radius: 14px;
}

/* Checkbox container setup */
.cform-cont .elementor-field-subgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 14px;
  justify-content: flex-start;
  width: 100%;
}

/* Four per row */
.cform-cont .elementor-field-subgroup .elementor-field-option {
  flex: 1 1 calc(25% - 12px);
  display: flex;
  justify-content: center;
}

/* Hide native checkbox */
.cform-cont .elementor-field-subgroup input[type="checkbox"],
.cform-cont .elementor-field-subgroup input[type="radio"] {
  display: none;
}

/* Styled label pill */
.cform-cont .elementor-field-subgroup .elementor-field-option label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  padding: 23px 29px;
  border: 1px solid #FFFFFF;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  color: #ffffff;
  font-weight: 500;
  transition: all 0.3s ease;
  user-select: none;
  width: 100%;
  text-align: center;
  font-size: 16px;
  position: relative;
  line-height: 22px;
}

/* Plus symbol */

.cform-cont .elementor-field-subgroup .elementor-field-option label::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;

  background-image: url("https://xraven.studio/wp-content/uploads/2026/04/plus.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  transition: transform 0.3s ease;
}

/* Rotate + into × */
.cform-cont
  .elementor-field-subgroup
  input[type="checkbox"]:checked
  + label::after,
.cform-cont
  .elementor-field-subgroup
  input[type="radio"]:checked
  + label::after {
  transform: translateY(-50%) rotate(45deg);
	  filter: invert(100%);
}

.cform-cont
  .elementor-field-subgroup
  input[type="radio"]:checked
  + label::after,
.cform-cont .elementor-field-subgroup input[type="radio"]:hover + label::after {
  filter: invert(100%);
}

/* Default checked style */
.cform-cont .elementor-field-subgroup input[type="checkbox"]:checked + label {
  color: #fff;
}



/* ---------- HOVER + ACTIVE COLORS BY POSITION ---------- */


.cform-cont
  .elementor-field-subgroup
  .elementor-field-option
  label:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
	  color: #000000;
}
.cform-cont
  .elementor-field-subgroup
  .elementor-field-option
  input[type="checkbox"]:checked
  + label {
  background: #FFFFFF;
  border-color: #FFFFFF;
	  color: #000000;
}

.cform-cont
  .elementor-field-subgroup
  .elementor-field-option
  label:hover::after, .cform-cont
  .elementor-field-subgroup
  .elementor-field-option
  input[type="checkbox"]:checked
  + label::after {
	filter: invert(100%);
}


/* Hover effect for the second checkbox group labels */
.cform-cont
  .elementor-field-group-field_68a4d63
  .elementor-field-option
  label:hover {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #000000 !important;
}

/* Checked (active) effect */
.cform-cont
  .elementor-field-group-field_68a4d63
  .elementor-field-option
  input[type="radio"]:checked
  + label {
  background: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #000000 !important;
}

/* Target the top label of the second checkbox group */
.cform-cont
  .elementor-field-group-field_68a4d63
  > .elementor-field-label.elementor-screen-only {
  display: flex !important;
  position: static !important;
  width: 100%;
  height: auto;
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 32px;
  padding: 50px 20px 24px;
  align-items: center;
  justify-content: center;
}

.cform-cont .elementor-message {
  text-align: center;
  margin: 16px 0 0 !important;
}

.elementor-turnstile-field.cf-turnstile {
  margin: 0 !important;
  padding: 0 !important;
}

.spline-robot {
  width: 100vw;
  height: 500px;
}

.spline-notfound {
  width: 100vw;
  height: 390px;
}

.ai-input-cont {
  position: relative;
  display: flex;
  border-radius: 14px;
  transition: box-shadow 0.4s ease;

  align-items: center;
  justify-content: center;

  transition:
    box-shadow 0.4s ease,
    height 0.25s ease;
  padding: 36px 0;

  max-width: 820px;
  margin: 0 auto;
}

.ai-input-cont:focus-within {
  box-shadow: 0 0 16px 2px rgba(241, 86, 65, 0.8);
}

.ai-input-cont .ai-btn {
  position: absolute;
	display: flex;
  right: 40px;
  bottom: 28px;
  border: none;
  outline: none;
  cursor: pointer;
  background: none;
  padding: 0;
  width: 60px;
}

.ai-input-cont .ai-btn svg {
  width: 100%;
  height: auto;
}

.ai-input-cont .ai-btn svg path {
  transition: 0.3s;
}

.ai-input-cont .ai-btn:hover svg path {
  color: #f15641;
  fill: #f15641;
}

.ai-input-cont {
  position: relative;
}

.ai-input-cont::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(
    to right,
    rgb(185, 0, 52) 0%,
    rgb(241, 86, 65) 25%,
    rgb(255, 127, 87) 50%,
    rgb(255, 151, 87) 75%
  );
  background-size: 200% 100%;
  background-position: 0% 0;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box exclude,
    linear-gradient(#fff 0 0);

  z-index: -1;
  transition: background-position 0.4s ease;
}

.ai-input-cont:focus-within::before {
  background-position: 100% 0;
}

.ai-input {
  border-radius: 14px;
  background: transparent;
  color: #ffffff;
  padding: 0 134px 0 56px;
  width: 100%;
  min-height: 60px; /* starting height */
  line-height: 26px;
  font-size: 18px;
  font-weight: 400;
  outline: none;
  white-space: pre-wrap; /* allow line breaks */
  word-break: break-word;
  height: auto;
  min-height: 28px;
  font-family: "Neue Haas Display Roman", Sans-serif;
}

/* Placeholder simulation */
.ai-input:empty:before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

.ai-response-cont {
  color: #ffffff;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  line-height: 24px;
  max-height: 480px;
  overflow-y: scroll;

  word-wrap: break-word;
  font-family: "Neue Haas Display Roman", sans-serif;

  max-width: 820px;
  margin: 0 auto;
  padding-right: 20px;
}

.ai-response-cont .ai-msg .msg-text strong {
  font-weight: bold;
}

.ai-response-cont .ai-msg .msg-text a {
  color: #f15641;
  transition: 0.4s;
}

.ai-response-cont .ai-msg .msg-text a:hover {
  color: #FF7B52;
}

.ai-response-cont .ai-msg .msg-text p {
  margin-block-end: 0;
}

/* WebKit browsers (Chrome, Edge, Safari) */
.ai-response-cont::-webkit-scrollbar {
  width: 10px;
}

.ai-response-cont::-webkit-scrollbar-track {
  background: transparent;
}

.ai-response-cont::-webkit-scrollbar-thumb {
  background-color: #f15641;
  border-radius: 5px;
  border: 2px solid transparent; /* or remove this line entirely */
}

/* Firefox */
.ai-response-cont {
  scrollbar-width: thin;
  scrollbar-color: #f15641 transparent;
}

.ai-response-cont::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.ai-response-cont::-webkit-scrollbar-button:single-button {
  display: none;
  width: 0;
  height: 0;
}

.ai-response-cont .user-msg,
.ai-response-cont .ai-msg {
  margin-bottom: 10px;
}

.ai-response-cont .msg-label {
  color: #f15641;
  font-weight: 500;
}

.xg-btns-list-cont a svg {
  margin: 0 !important;
}

.xg-btns-list-cont a svg path {
  transition: 0.4s;
}

.xg-btns-list-cont a:hover svg path {
  color: #f15641;
  fill: #f15641;
}

/* Base hover effect (already in your CSS) */
.xg-btns-list-cont a {
  position: relative;
  height: 60px;
  width: 60px !important;
  border: 1px solid #ffffff;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: border 0.3s ease;
}

.xg-btns-list-cont a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100%;
  padding: 2px;
  background: linear-gradient(to right, #B90034 0%, #F15641 45%, #FF7F57 75%, #FF9757 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  opacity: 0;
  background-position: 0% 0;
  transition:
    opacity 0.4s ease,
    background-position 0.6s ease;
}

.xg-btns-list-cont a:hover {
  border-color: transparent;
}

.xg-btns-list-cont a:hover::before {
  opacity: 1;
  background-position: 105% 0;
}

/* Remove hover for last button */
.xg-btns-list-cont li:last-child a {
  border: none !important;
}

.xg-btns-list-cont li:last-child a::before {
  display: none !important;
}

/* ✅ Active states (simulate hover) */
.xg-btns-list-cont.a-active1 li:nth-child(1) a,
.xg-btns-list-cont.a-active2 li:nth-child(2) a,
.xg-btns-list-cont.a-active3 li:nth-child(3) a {
  border-color: transparent;
}

.xg-btns-list-cont.a-active1 li:nth-child(1) a::before,
.xg-btns-list-cont.a-active2 li:nth-child(2) a::before,
.xg-btns-list-cont.a-active3 li:nth-child(3) a::before {
  opacity: 1;
  background-position: 105% 0;
}

.projects-filters-cont {
  position: relative;
  width: fit-content;
  max-width: 100% !important;
  background: rgba(10, 10, 18, 0.75);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 12px;
  overflow: hidden;
}

/* Gradient border using pseudo-element */
.projects-filters-cont::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  padding: 2px; /* border thickness */
  background: linear-gradient(90deg, #B90034 0%, #F15641 45%, #FF7F57 75%, #FF9757 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 0;
  transition: background-position 0.4s ease;
  background-position: 105% 0;
}

.projects-filters {
  width: 0;
}

.elementor-4218 .elementor-element.elementor-element-013bd8b .elementor-button {
	font-family: "Montserrat", Sans-serif !important;
	
font-style: normal !important;
font-weight: 500 !important;
line-height: normal !important;
letter-spacing: 1.92px !important;
}

.projects-filters-cont .projects-filters {
  transition: none !important;
}

.projects-filters search.e-filter {
  flex-direction: row;
  flex-wrap: nowrap;
}

.rv-marquee-wrapper {
  height: 712px;
  overflow: hidden;
  margin: 4px 0;
}

.rv-marquee {
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform: translateZ(0);
  animation: rv-marquee-scroll linear infinite;
  animation-duration: var(--duration, 15s);
  font-family: "Poppins", Sans-serif;
}

.rv-marquee-block {
  display: flex;
  flex-direction: column;
}

.rv-marquee-item {
  font-size: 20px;
  font-weight: 500;
  padding: 5px 0;
  color: #fff;
}

.rv-marquee-item span {
  font-style: italic;
  font-weight: 400;
}

/* animation */
@keyframes rv-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, var(--distance), 0);
  }
}

.mar-inner {
  will-change: transform;
}

/* fade overlays */
.rv-marquee-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 160px;
  pointer-events: none;
  z-index: 5;
}

.rv-marquee-fade-top {
  top: 0;
  background: linear-gradient(to bottom, #0a0a12 50%, transparent 100%);
}

.rv-marquee-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, #0a0a12 50%, transparent 100%);
}

.ar-player-mob-content:active a span,
.ar-player-mob-content:active a svg path {
  fill: #f15641;
  color: #f15641;
  stroke: #f15641;
}

.xr-slider {
  overflow: hidden !important;
  white-space: nowrap !important;
  width: 100%;
}

.xr-track {
  white-space: nowrap !important;
  animation: scrollxr 15s linear infinite;
  flex-wrap: nowrap !important;
  will-change: transform !important;
  width: fit-content !important;
}

.xr-slider.xr4 .xr-track {
  animation: scrollxr 25s linear infinite;
}

.xr-slide {
  width: 33.34vw; /* instead of 33.333vw */
  min-width: 33.34vw;
  max-width: 33.34vw;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  flex-wrap: nowrap !important;
}

@keyframes scrollxr {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  } /* adjust if slides duplicated */
}

.xr-slider.xr4 .xr-slide {
  width: 25vw;
  min-width: 25vw;
  max-width: 25vw;
}

.cform-cont .elementor-message.elementor-message-danger:before {
  content: "";
}

.cform-cont .elementor-help-inline {
  position: absolute;
  right: 49px;
  top: 27px;
  pointer-events: none;
  margin: 0 !important;
}

/* Show * on all radios initially */
.elementor-field-subgroup
  input[type="radio"][aria-invalid="false"]
  + label::before {
  content: "*";
  color: #f15641;
  position: absolute;
  left: 8px;
  top: 58%;
  transform: translateY(-50%);
  font-size: 34px;
  height: 23px;
  opacity: 1;
  transition: opacity 1s;
}

/* Hide * when any radio is checked */
.elementor-field-subgroup:has(input[type="radio"]:checked) label::before {
  opacity: 0;
}

/* Infinite border animation on error */
@keyframes borderPulse {
  0% {
    border-color: white;
  }
  50% {
    border-color: #f15641;
  }
  100% {
    border-color: white;
  }
}
.elementor-field-subgroup input[type="radio"][aria-invalid="false"] + label {
  animation: borderPulse 2s ease-in-out 1;
}

.elementor-field-subgroup:has(input[type="radio"]:checked) label {
  animation: none;
}

.cform-cont .elementor-form-spinner {
  display: none !important;
}

/* Tablet devices (768px to 1024px wide) */
@media (max-width: 1024px) {
  .cursor {
    display: none !important;
  }
	
	
	
	
	
	.main-nav-toggle-icon {
  width: 44px;
}

.main-nav-toggle-icon::before,
.main-nav-toggle-icon::after {
  width: 44px;
}
	
	
	
	
	
	
	
	
	
	
	
	
	
	

  .gradient-link {
    gap: 20px;
  }
	
	.gradient-link-text {
		font-size: 28px;
	}

  .gradient-link::before {
    width: 48px;
    height: 3px;
    flex: 0 0 48px;
  }

  .gradient-link-gradient {
    left: 68px;
  }

  .gradient-link-base,
  .gradient-link-gradient {
    font-size: 28px;
  }

  #hero-spline {
    height: 235px;
  }

  .cpel-switcher--layout-dropdown .cpel-switcher__nav {
    max-height: 48px;
  }

  .header-vid {
    background: transparent !important;
    width: 48px !important;
    height: 48px !important;
  }

  .orb-link-wrap {
    width: 48px;
    height: 48px;
  }

  .video-cont {
    padding: 0 30px !important;
  }

  .marquee h3 {
    font-size: 36px;
  }

  .marquee-hover-cont a .elementor-button-icon {
    padding: 0 30px;
  }

  .marquee-hover-cont a svg {
    width: 48px;
  }

  .cform-cont .elementor-help-inline {
    right: 38px;
    top: 15px;
  }

  .elementor-field-subgroup input[type="radio"][aria-invalid="false"] + label {
    padding: 12px 8px 12px 30px;
  }

  .elementor-field-subgroup:has(input[type="radio"]:checked) label {
    padding: 12px 8px 12px 12px;
  }

  .play-video-text-cont {
    display: none;
  }

  .video-cont .controls {
    padding: 0 0 120px;
  }

  .video-cont .play-follower {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    transform: none !important;
    justify-content: center;
    align-items: center;
  }

  .video-cont .teaser-wrap {
    height: auto;
  }

  .play-video-button-cont {
    display: flex;
  }

  .play-video-button-cont img {
    width: 64px;
  }

  .xr-slider.xr4 .xr-slide {
    width: 33.3vw;
    min-width: 33.3vw;
    max-width: 33.3vw;
  }

  .spline-robot {
    height: 300px;
  }

  .cform-cont .elementor-field-subgroup {
    gap: 16px 10px;
  }

  .cform-cont .elementor-field-subgroup .elementor-field-option label {
    padding: 12px 8px 12px 12px;
    font-size: 11px !important;
  }

  .cform-cont .elementor-field-subgroup .elementor-field-option label::after {
    font-size: 32px;
    right: 8px;
  }

  .cform-cont input,
  .cform-cont textarea {
    padding: 18px 38px;
  }

  .cform-cont .elementor-field-type-textarea {
    border-radius: 30px;
  }

  .cform-cont .elementor-field-type-textarea::before {
    border-radius: 30px;
  }

  .cform-cont
    .elementor-field-group-field_68a4d63
    > .elementor-field-label.elementor-screen-only {
    font-size: 16px;
    padding: 30px 20px 16px;
  }

  .cform-cont button[type="submit"] {
    padding: 19px !important;
  }

  .cform-cont .elementor-field-group {
    margin-bottom: 16px !important;
  }

  .cform-cont textarea {
    min-height: 164px;
  }

  .spline-notfound {
    height: 340px;
  }

  .ai-input-cont {
    padding: 27px 0;
  }

  .ai-input {
    min-height: 26px;
    font-size: 16px;
	  line-height: 24px;
    padding: 0 108px 0 56px;
  }

  .ai-input-cont .ai-btn {
    bottom: 24px;
    right: 32px;
    width: 48px;
  }

  .xg-btns-list-cont a {
    height: 48px;
    width: 48px !important;
  }

  .rv-marquee-wrapper {
    height: 417px;
  }

  .rv-marquee-fade {
    height: 120px;
  }

  .rv-marquee-item {
    font-size: 16px;
    padding: 4px 0;
  }

  .studio-fc-cont svg {
    transform: scale(0.85);
  }

  .ai-input-cont::before {
    padding: 2px;
  }

  /* ---------- HOVER + ACTIVE COLORS BY POSITION ---------- */

.cform-cont .e-form__buttons {
    margin-top: 18px;
}
  .elementor-3419
    .elementor-element.elementor-element-aac20a1
    .elementor-field-group
    .elementor-field,
  .elementor-3419
    .elementor-element.elementor-element-aac20a1
    .elementor-field-subgroup
    label {
    text-align: left;
    line-height: 22px;
  }
}

/* Mobile devices (up to 767px wide) */
@media (max-width: 767px) {
  header {
    mix-blend-mode: unset;
  }
  .orb-link-wrap {
    width: 40px;
    height: 40px;
  }

  #hero-spline {
    height: 150px;
  }

  .gradient-link {
    gap: 14px;
  }
	
	.gradient-link-text {
		font-size: 20px;
	}

  .gradient-link::before {
    width: 32px;
    flex: 0 0 32px;
  }

  .gradient-link-gradient {
    left: 46px;
  }

  .gradient-link-base,
  .gradient-link-gradient {
    font-size: 20px;
  }

  .wcc-consent-container {
    padding: 0 20px !important;
  }

  .wcc-consent-container .wcc-consent-bar {
    padding: 30px 20px !important;
    border-radius: 40px !important;
  }

  .wcc-notice-des *,
  .wcc-preference-content-wrapper *,
  .wcc-accordion-header-des *,
  .wcc-gpc-wrapper .wcc-gpc-desc *, .wcc-notice-des p {
    font-size: 12px !important;
    line-height: 16px !important;
  }

  .wcc-custom-brand-logo-wrapper,
  .wcc-notice .wcc-title,
  .wcc-notice-des,
  .wcc-notice-btn-wrapper {
    padding: 0 !important;
  }

  .wcc-notice-btn-wrapper {
    gap: 12px 0 !important;
    padding-left: 20px !important;
  }

  .wcc-notice-group {
    flex-direction: column;
  }

  .wcc-notice-btn-wrapper {
    flex-direction: row !important;
    margin-top: 20px !important;
    padding: 0 !important;
    direction: rtl;
  }

  .wcc-btn.wcc-btn-accept {
    margin-left: 12px !important;
  }

  .wcc-notice-des {
    overflow-y: hidden !important;
  }

  .wcc-notice-des p {
    text-align: center;
  }

  .header-vid {
    background: transparent !important;
    width: 40px !important;
    height: 40px !important;
  }
  .video-cont {
    padding: 0 20px !important;
  }

  .marquee h3 {
    font-size: 24px;
  }

  .marquee-hover-cont a .elementor-button-icon {
    padding: 0 20px;
  }

  .marquee-hover-cont a svg {
    width: 40px;
  }

  #areal,
  #whatsapp-btn {
    padding: 0 12px;
    min-width: 60px;
  }

  .play-video-button-cont img {
    width: 60px;
  }

  .ar-player-cont {
    top: 0;
    left: 0;
    transform: none;

    width: 100%;
    height: 100vh;
    border-radius: 0;
  }

  .spline-robot {
    height: 240px;
  }

  .cform-cont .elementor-field-subgroup {
    gap: 14px 10px;
  }

  .cform-cont input,
  .cform-cont textarea {
    padding: 10px 16px;
  }

  .cform-cont .elementor-field-type-textarea {
    border-radius: 20px;
  }

  .cform-cont .elementor-field-type-textarea::before {
    border-radius: 20px;
  }

  .cform-cont
    .elementor-field-group-field_68a4d63
    > .elementor-field-label.elementor-screen-only {
    padding: 22px 6px 12px;
  }

  .cform-cont .elementor-field-subgroup .elementor-field-option {
    flex: 1 1 calc(50% - 12px);
  }

  .cform-cont .elementor-field-subgroup .elementor-field-option label {
    padding: 12px 6px 12px 16px;
    font-size: 10px !important;
  }

  .cform-cont button[type="submit"] {
    padding: 13px !important;
  }

  .cform-cont .elementor-field-group {
    margin-bottom: 14px !important;
  }

  .cform-cont textarea {
    min-height: 100px;
  }

  .spline-notfound {
    height: 210px;
  }

  .ai-input-cont {
    padding: 19px 0;
  }

  .ai-input {
    min-height: 18px;
    font-size: 12px;
	      line-height: 16px;
    padding: 0 74px 0 30px;
  }

  .ai-input-cont .ai-btn {
    right: 23px;
    bottom: 16px;
    width: 34px;
  }

  .xg-btns-list-cont a {
    height: 40px;
    width: 40px !important;
  }

  .projects-filters {
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */

    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  .projects-filters::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }

  .projects-filters search.e-filter {
    width: fit-content;
    flex-shrink: 0;
  }

  .rv-marquee-item {
    font-size: 14px;
    padding: 3px 0;
  }

  .carousel-mod-wid .swiper {
    width: 140%;
  }

  .xr-slide {
    width: 57vw; /* instead of 33.333vw */
    min-width: 57vw;
    max-width: 57vw;
  }

  .xr-slider.xr4 .xr-track {
    animation: scrollxr 15s linear infinite;
  }

  .xr-slider.xr4 .xr-slide {
    width: 65vw;
    min-width: 65vw;
    max-width: 65vw;
  }

  .cform-cont .elementor-help-inline {
    right: 16px;
    top: 9px;
    font-size: 10px;
  }

  .elementor-field-subgroup:has(input[type="radio"]:checked) label {
    padding: 12px 6px 12px 16px;
  }

  .elementor-3419
    .elementor-element.elementor-element-aac20a1
    .elementor-field-group
    .elementor-field,
  .elementor-3419
    .elementor-element.elementor-element-aac20a1
    .elementor-field-subgroup
    label {
    line-height: 10px;
  }

  .elementor-field-subgroup
    input[type="radio"][aria-invalid="false"]
    + label::before {
    top: 87%;
  }
}

@media (max-width: 400px) {
  .elementor-34 .elementor-element.elementor-element-1f2b12e {
    padding-top: 70px;
  }
}

@media (min-width: 1440px) {
  #lottie-cont svg {
    width: 176px !important;
  }
	
	.main-nav .elementor-item::after {
		bottom: -2px;
	}

  .to-scale-up {
    transform: scale(1.1);
    transform-origin: top center;
  }

  .to-scale-up.left {
    transform-origin: top left;
  }

  .to-scale-up.right {
    transform-origin: top right;
  }

  #hero-spline {
    height: 297px;
  }

  .gradient-border-btn {
    padding: 20px 51px;
    font-size: 18px;
  }

  .video-cont .play-follower {
    top: -50px;
    left: -152px;
    font-size: 71px;
  }
  .obsidion-cont a {
    width: 99px;
  }

  .rv-marquee-item {
    font-size: 22px;
    padding: 5px 0;
  }

  .studio-fc-cont svg {
    transform: scale(1.1);
  }
	
	.gradient-link-text {
		font-size: 40px;
	}

  .gradient-link::before {
    width: 72px;
    flex: 0 0 72px;
  }

  .gradient-link-gradient {
    left: 98px;
  }

  .gradient-link-base,
  .gradient-link-gradient {
    font-size: 40px;
  }
}

@media (min-width: 1920px) {
  #lottie-cont svg {
    width: 240px !important;
  }
	
	
	.cursor.view-prj::before {
  font-size: 64px;
  line-height: 60px;
}
	

  .to-scale-up {
    transform: scale(1.2);
  }

  #hero-spline {
    height: 324px;
  }

  .gradient-border-btn {
    padding: 22px 56px;
    font-size: 20px;
  }

  .video-cont .play-follower {
    top: -52px;
    left: -154px;
    font-size: 77px;
  }

  .obsidion-cont a {
    width: 108px;
  }

  .rv-marquee-item {
    font-size: 24px;
    padding: 6px 0;
  }

  .studio-fc-cont svg {
    transform: scale(1.2);
  }
	
	.gradient-link-text {
		font-size: 44px;
	}

  .gradient-link::before {
    width: 78px;
    flex: 0 0 78px;
  }

  .gradient-link-gradient {
    left: 104px;
  }

  .gradient-link-base,
  .gradient-link-gradient {
    font-size: 42px;
  }
}

/*
html, body, .elementor-kit-7,
h1, h2, h4, h5, h6,
p, span, a, li, label, input, button,
strong, em, small, blockquote,
.title, .nav-link, .text, .subtitle,
.mob-tog-wrap .plus-btn span,
.gradient-border-btn {
    transition: color 3s ease, 
                background-color 3s ease, 
                fill 3s ease, 
                stroke 3s ease;
}
*/

/* In main style.css (dark mode colors) */
html,
body,
.elementor-kit-7,
h1,
h2,
h4,
h5,
h6 {
  transition:
    color 3s ease,
    background-color 3s ease,
    fill 3s ease,
    stroke 3s ease;
}

@media (min-width: 768px) {
  html::-webkit-scrollbar {
    width: 6px;
  }

  html::-webkit-scrollbar-track {
    background: #04040c;
    box-shadow: none;
  }

  html::-webkit-scrollbar-thumb {
    width: 5px;
    min-height: 100px;
    border-radius: 4px;
    background: #1c1c1c;
  }

  html::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
  }

  html::-webkit-scrollbar-corner {
    background: #04040c;
  }

  /* Firefox */
  html {
    scrollbar-width: thin;
    scrollbar-color: #1c1c1c #04040c;
  }
}