/* Brand Color Palette */
:root {
  --color-brand-primary: #8b5cf6;
  --color-brand-secondary: #ec4899;
  --color-pitch-dark: #000103;
  --brand-gradient: linear-gradient(135deg, var(--color-brand-primary), var(--color-brand-secondary));
  --brand-gradient-hover: linear-gradient(135deg, var(--color-brand-secondary), var(--color-brand-primary));

  /* UI/UX Enhancement Variables */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.text-brand-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.bg-brand-gradient {
  background: var(--brand-gradient);
  transition: var(--transition-smooth);
  will-change: transform;
}

.bg-brand-gradient:hover {
  background: var(--brand-gradient-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.4), var(--shadow-glow);
}

.bg-brand-gradient:active {
  transform: translateY(0) scale(0.98);
  transition: var(--transition-smooth);
}


/* Custom scrollbar for a more modern feel */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-pitch-dark);
}

::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.5);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.8);
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: #000000;
  color: #f0f0f0;
  overflow-x: hidden;
  cursor: auto;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.enable-custom-cursor {
  cursor: none;
  /* Hide the default cursor */
}

/* The custom cursor */
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(192, 132, 252, 0.7);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width 0.3s, height 0.3s, border-color 0.3s, opacity 0.3s;
  z-index: 9999;
}

.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: #c084fc;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.2s;
  z-index: 9999;
}

/* Cursor interaction effect */
.cursor-ring.active {
  width: 50px;
  height: 50px;
  border-color: #fff;
  opacity: 0.5;
}

/* Glass morphism effect utility class */
.glass-morphic {
  text-align: center;
  position: relative;
  padding: 20px;
  border-radius: 12px;
  transition: var(--transition-smooth);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  will-change: transform;
}

.glass-morphic:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.15);
}

/* Animated background blobs */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(150px);
  /* Increased blur for a much softer blend */
  opacity: 0.12;
  /* Further reduced opacity for subtlety */
  will-change: transform;
}

.blob-1 {
  width: 400px;
  height: 400px;
  background: var(--color-brand-primary);
  top: -5%;
  left: -10%;
  animation: float 30s infinite alternate;
}

.blob-2 {
  width: 350px;
  height: 350px;
  background: var(--color-brand-secondary);
  bottom: -5%;
  right: -10%;
  animation: float 35s infinite alternate-reverse;
}

.blob-3 {
  width: 300px;
  height: 300px;
  background: var(--color-brand-secondary);
  top: 50%;
  left: 40%;
  animation: float 25s infinite alternate;
}

.blob-4 {
  width: 200px;
  height: 200px;
  background: var(--color-brand-primary);
  top: 110%;
  left: 15%;
  animation: float 28s infinite alternate;
}

.blob-5 {
  width: 220px;
  height: 220px;
  background: var(--color-brand-secondary);
  top: 105%;
  right: 15%;
  animation: float 32s infinite alternate-reverse;
}


/* Keyframe animations */
@keyframes float {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
  }

  100% {
    transform: translateY(-80px) translateX(50px) rotate(180deg) scale(1.1);
  }
}

@keyframes subtle-pulse {

  0%,
  100% {
    box-shadow: 0 0 15px rgba(192, 132, 252, 0.3);
  }

  50% {
    box-shadow: 0 0 25px rgba(192, 132, 252, 0.6);
  }
}

@keyframes rotate-3d {
  0% {
    transform: rotateY(0deg) rotateX(10deg);
  }

  100% {
    transform: rotateY(360deg) rotateX(10deg);
  }
}

.card-enter {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.card-enter-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.nav-link-hover {
  position: relative;
}

.nav-link-hover.active {
  color: #c084fc !important;
}

.nav-link-hover::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 50%;
  background-color: #c084fc;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

.nav-link-hover:hover::after {
  width: 100%;
}

.nav-link-hover:hover {
  color: #c084fc !important;
  transition: color 0.2s ease;
}

.btn-glow-hover {
  transition: var(--transition-smooth);
  will-change: transform, box-shadow;
}

.btn-glow-hover:hover {
  box-shadow: 0 0 20px rgba(192, 132, 252, 0.5), var(--shadow-md);
  transform: translateY(-1px);
}

.btn-glow-hover:active {
  transform: translateY(0);
  transition: all 0.1s ease;
}

/* Style for the sticky nav on scroll */
#main-header.scrolled-nav {
  background: rgba(224, 163, 255, 0.12);
  backdrop-filter: blur(30px);
  border-color: rgba(224, 163, 255, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(224, 163, 255, 0.1);
}

/* Hides nav on scroll down */
#main-header.nav-hidden {
  transform: translateY(-110%);
  /* Use >100% to ensure it's fully hidden */
}

/* Mobile Nav Links */
.mobile-nav-link {
  position: relative;
  display: inline-block;
  width: fit-content;
}

.mobile-nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--brand-gradient);
  transition: width 0.3s ease;
}

.mobile-nav-link:hover::after {
  width: 100%;
}



@keyframes drift {
  from {
    transform: translateX(-20%) rotate(-15deg);
  }

  to {
    transform: translateX(20%) rotate(15deg);
  }
}


/* Product Section Styles */
.product-card {
  overflow: hidden;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s ease;
  will-change: transform;
  border-radius: 12px;
}

.product-card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(139, 92, 246, 0.2);
}

.product-card img {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.product-card:hover img {
  transform: scale(1.15);
}

.product-card-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

.product-enter-top {
  opacity: 0;
  transform: translateY(-100px);
  /* Make animation more pronounced */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.product-enter-bottom {
  opacity: 0;
  transform: translateY(100px);
  /* Make animation more pronounced */
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.product-enter-active {
  opacity: 1;
  transform: translateY(0);
}

/* fearture animation */
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* :root {
  --font-text: "Open Sans", sans-serif;
  --color-light: #fff;
  --color-dark: #202330;
  --color-brand: #ffeba7;
  --info-size: 35vh;
} */

/* body {
  font-family: var(--font-text);
  line-height: 1.6;
  background-color: var(--color-dark);
} */

/* .section-2 {
  width: min(1200px, 90%);
  margin: 40px auto 0;
  padding: 20px 0;
  line-height: 2;
  color: var(--color-light);
} */

#scramble-text {
  display: inline-block;
  letter-spacing: 2px;
  color: #fff;
  /* visible while scrambling */
}

/* Apply this when the final text should show the gradient */
#scramble-text.gradient {
  background: var(--brand-gradient);
  /* violet -> pink */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  /* gradient visible via bg-clip */
}




.c-hotels {
  width: min(1200px, 100%);
  margin: 0 auto;
}

.c-hotels__list {
  display: grid;
  grid-gap: -10px;
}

.c-hotels__item {
  position: sticky;
  top: 50px;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 3fr;
  border: 1px solid var(--color-dark);
  text-align: end;
  border-radius: 12px;
  background: rgba(224, 163, 255, 0.12);
  backdrop-filter: blur(25px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 0 1px rgba(224, 163, 255, 0.1);
  align-items: center;
  align-content: end;
  animation-name: in-n-out;
  margin: 0;
  padding: 0;



  @media (min-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(400px, 70vh);
  }

  &:not(&:last-child) {
    view-timeline-name: --card;
    view-timeline-axis: block;
    animation-timeline: --card;
    animation-name: in-n-out;
    /* animation-range: entry 90% cover 50%; */
    /* animation-fill-mode: both; */
  }


  &-figure {
    grid-column: 1 / -1;
    grid-row: 1 / 2;

    @media (min-width: 768px) {
      grid-column: 1 / 2;
      grid-row: 1 / -1;
    }

    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &-info {
    grid-column: 1 / -1;
    grid-row: 2 / -1;
    height: 100%;
    display: grid;
    align-content: center;
    padding: 40px;
    background-color: var(--color-light);

    @media (min-width: 768px) {
      grid-column: 2 / -1;
      grid-row: 1 / -1;
    }
  }

  &-excerpt {
    margin-bottom: 24px;
  }

  &-link {
    width: max-content;
    padding: 12px 24px;
    text-decoration: none;
    border: 1px solid var(--color-dark);
    background-color: var(--color-light);
    color: var(--color-dark);
    transition: all .5s ease-in-out;

    &:hover {
      background-color: var(--color-dark);
      color: var(--color-light);
    }
  }
}

@keyframes in-n-out {

  0%,
  90% {
    scale: 100%;
  }

  100% {
    scale: 25%;
  }
}

/* Add this to your CSS section */

/* Disable animations for featured products on small and tablet screens */
@media (max-width: 767px) {
  .c-hotels__item {
    position: relative !important;
    animation: none !important;
    view-timeline-name: none !important;
    view-timeline-axis: none !important;
    animation-timeline: none !important;
    animation-name: none !important;
    animation-range: none !important;
    animation-fill-mode: none !important;
  }
}

/* Alternative approach if the above doesn't work */
@media (max-width: 767px) {
  .c-hotels__item {
    position: relative !important;
    transform: none !important;
    transition: none !important;
  }

  .c-hotels__item-figure img {
    transform: none !important;
  }

  .c-hotels__item-info {
    transform: none !important;
  }
}

/* Styles for the hover image box */
.group:hover .hover-image-box {
  opacity: 1;
  transform: translate(-50%, -70%) scale(1);
  /* Adjust Y to position it above the card */
  /* Add a subtle animation specific to the hover box if desired */
  animation: bounce-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Optional: Keyframe for a subtle bounce effect on the image box */
@keyframes bounce-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    /* End position */
  }
}

/* Override the glass-morphic background for individual links to make them more subtle by default */
.space-y-4 a {
  background: transparent;
  /* Make links transparent by default */
  border-color: rgba(255, 255, 255, 0.1);
  /* Subtle border */
  backdrop-filter: none;
  /* No blur by default */
  box-shadow: none;
  /* No shadow by default */
}

/* Apply glass-morphic effect to link on hover */
.space-y-4 a:hover {
  background: rgba(224, 163, 255, 0.05);
  /* Lighter glass on hover */
  backdrop-filter: blur(15px);
  /* Add blur on hover */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* Subtle shadow on hover */
}

.c-hotels__item-title {
  text-align: center;
}

.elevator-transition {
  animation: repeat 0.5s forwards;
  animation-delay: 0.3s;

}

.elevator {
  margin-top: 1em;
  /* reduced top space */
  margin-bottom: 5em;
  /* keep original bottom space */
  color: #fff;
  font-family: AvenirNextLTPro-Bold;
  font-size: 3em;
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 10px;
}

.elevatorL {
  text-align: right;
  left: 5em;
  transition-delay: 10s;
  transition: all 0.5s ease-in-out;
}

.elevatorR {
  left: 10em;
  transition-delay: 10s;
  transition: all 0.5s ease-in-out;
}

@keyframes repeat {
  100% {
    filter: drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff) drop-shadow(0 1em 0 #fff);
  }

}

.elevatorL-transition {
  transform: translateX(-100px);
  /* example animation */
  opacity: 1;
}

.elevatorR-transition {
  transform: translateX(100px);
  opacity: 1;
}

#service-modal.active {
  display: flex !important;
}

#service-modal.active .relative {
  transform: scale(1) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@keyframes moveLeft {
  0% {
    transform: translateX(0px) rotate(0);
  }

  100% {
    transform: translateX(-10em);
  }
}

@keyframes moveRight {
  0% {
    transform: translateX(0px) rotate(0);
  }

  100% {
    transform: translateX(10em);
  }
}

/* glass card */

/* Glassmorphic Card */
.glass-card {
  position: relative;
  width: 100%;
  max-width: -webkit-fill-available;
  height: 100px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  overflow: hidden;
  mask-image: linear-gradient(to right,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 20%,
      rgba(0, 0, 0, 1) 80%,
      rgba(0, 0, 0, 0));
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  align-items: center;
  align-content: center;
}

/* Scroll Container */
.scroll-track {
  display: flex;
  width: max-content;
  animation: scroll 20s linear infinite;
}

/* Duplicate track container for seamless loop */
.scroll-track__inner {
  display: flex;
}

/* Images */
.scroll-track img {
  height: 100px;
  width: 100px;
  margin: 0 30px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease;
}

.scroll-track img:hover {
  transform: scale(1.1);
}

/* Infinite Scroll Keyframes */
@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
    /* move by half since we duplicate images */
  }
}

/* Optional: container */
.glass-card {
  overflow: hidden;
  width: 100%;
}

/* Optional glow effect */
.glass-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;

  transform: rotate(25deg);
  pointer-events: none;
}


/* --- Watermark Styling (Fixed to Footer Area) --- */

/* Adjust size for smaller screens (mobile) */
@media (max-width: 768px) {
  #watermark {
    font-size: clamp(2rem, 10vw, 5rem);
  }
}

/* end of new blub */

.goog-logo-link,
.goog-te-gadget span,
.goog-te-banner-frame,
.goog-te-gadget img {
  display: none !important;
}

.goog-te-gadget {
  color: transparent !important;
  font-size: 0 !important;
}

.custom-translate-select {
  background-color: #030014 !important;
}

.newblob6 {
  position: absolute;
  width: 150px;
  height: 150px;
  background: linear-gradient(180deg,
      var(--color-blue) 31.77%,
      var(--color-violet) 100%);
  mix-blend-mode: color-dodge;
  -webkit-animation: moveR 25s infinite alternate;
  animation: moveR 25s infinite alternate;
  transition: 1s cubic-bezier(0.07, 0.8, 0.16, 1);
}



@-webkit-keyframes moveR {
  from {
    transform: translate(-100px, -50px) rotate(-90deg);
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
  }

  to {
    transform: translate(700px, 100px) rotate(-10deg);
    border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
  }
}

@keyframes moveR {
  from {
    transform: translate(-100px, -50px) rotate(-90deg);
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
  }

  to {
    transform: translate(700px, 100px) rotate(-10deg);
    border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
  }
}

/* new blob 9 — moves RIGHT ➡ LEFT */
.newblob9 {
  position: absolute;
  width: 150px;
  height: 150px;
  background: linear-gradient(180deg, var(--color-blue) 31.77%, var(--color-pink) 100%);
  mix-blend-mode: color-dodge;
  -webkit-animation: moveL 25s infinite alternate;
  animation: moveL 25s infinite alternate;
  transition: 1s cubic-bezier(0.07, 0.8, 0.16, 1);
}

.newblob9:hover {
  width: 200px;
  height: 220px;
  -webkit-filter: blur(30px);
  filter: blur(30px);
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.6),
    inset 100px 100px 0 0px #fa709a,
    inset 200px 200px 0 0px #784ba8,
    inset 300px 300px 0 0px #2b86c5;
}

@-webkit-keyframes moveL {
  from {
    transform: translate(700px, 100px) rotate(-10deg);
    border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
  }

  to {
    transform: translate(-100px, -50px) rotate(-90deg);
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
  }
}

@keyframes moveL {
  from {
    transform: translate(700px, 100px) rotate(-10deg);
    border-radius: 76% 24% 33% 67% / 68% 55% 45% 32%;
  }

  to {
    transform: translate(-100px, -50px) rotate(-90deg);
    border-radius: 24% 76% 35% 65% / 27% 36% 64% 73%;
  }
}

/* Different random-ish movement paths */
@keyframes move1 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  25% {
    transform: translate(60px, -40px) rotate(10deg) scale(1.05);
  }

  50% {
    transform: translate(120px, 0px) rotate(20deg) scale(1);
  }

  75% {
    transform: translate(60px, 40px) rotate(10deg) scale(0.95);
  }

  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes move2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(-40px, 50px) scale(1.1);
  }

  50% {
    transform: translate(60px, 20px) scale(1.15);
  }

  75% {
    transform: translate(-60px, -40px) scale(1.05);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes move3 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(80px, -30px) scale(1.05);
  }

  50% {
    transform: translate(150px, 0px) scale(1.1);
  }

  75% {
    transform: translate(80px, 40px) scale(1.05);
  }

  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes move4 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  25% {
    transform: translate(-80px, 30px) rotate(8deg) scale(1.05);
  }

  50% {
    transform: translate(80px, -40px) rotate(15deg) scale(1.1);
  }

  75% {
    transform: translate(-100px, 20px) rotate(5deg) scale(1.05);
  }

  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/* end of new blub */

/* --- Cinematic Storytelling Component --- */
:root {
  --cinematic-bg: #010103;
  --cinematic-text: #ffffff;
}

.sticky-wrapper {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #000;
}

.cinematic-canvas {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

.text-block {
  position: absolute;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease-out;
  max-width: 450px;
  text-align: center;
  width: 90%;
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
  padding: 30px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  z-index: 30;
}

.text-block.active {
  opacity: 1;
  transform: translateY(0);
}

.text-block h2 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin: 0 0 10px 0;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.text-block p {
  font-size: 1.1rem;
  font-weight: 300;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.5;
  margin: 0;
}

.full-screen-track {
  position: relative;
  height: 300vh;
  width: 100%;
  z-index: 10;
}

#seq2-text-1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(20px);
}

#seq2-text-1.active {
  transform: translate(-50%, -50%) translateY(0);
}

#seq2-text-2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(20px);
}

#seq2-text-2.active {
  transform: translate(-50%, -50%) translateY(0);
}

@media (max-width: 992px) {
  .full-screen-track .sticky-wrapper {
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .full-screen-track {
    height: 300vh;
  }

  .text-block {
    left: 10% !important;
    right: 10% !important;
    width: 80% !important;
    text-align: center !important;
    transform: translateY(20px) !important;
  }

  #seq2-text-1,
  #seq2-text-2 {
    left: 50% !important;
    transform: translate(-50%, -50%) translateY(20px) !important;
  }

  #seq2-text-1.active,
  #seq2-text-2.active {
    transform: translate(-50%, -50%) translateY(0) !important;
  }
}

/* --- Building Showcase (Skyline View) --- */
#building-showcase {
  position: relative;
  overflow: visible;
  /* Allow pop-ups to extend outside the section if needed */
  background: var(--color-pitch-dark);
  padding: 120px 0 60px;
  /* More top padding for pop-up headroom */
}

.marquee-wrapper {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  /* Hide horizontal scrollbar, handled by JS/Drag */
  overflow-y: visible;
  /* CRITICAL: Show pop-ups above buildings */
  /* Limit mask to horizontal only, avoid clipping top pop-ups */
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  scrollbar-width: none;
  min-height: 550px;
  /* Room for 400px building + pop-up */
  display: flex;
  align-items: flex-end;
}

.skyline-horizon {
  position: absolute;
  bottom: 120px;
  /* Position of the ground relative to showcase container */
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 10;
}

.horizon-label {
  position: absolute;
  right: 5%;
  top: 10px;
  font-family: 'Syne', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 700;
  text-transform: uppercase;
}

.marquee-content {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: scroll-horizontal 40s linear infinite;
  padding-bottom: 80px;
  /* Matches .skyline-horizon bottom */
  align-items: flex-end;
  /* CRITICAL: Bottom align buildings */
  position: relative;
  z-index: 10;
}

@keyframes scroll-horizontal {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-33.333%);
  }
}

.building-card {
  list-style: none;
  width: auto;
  /* Width based on image */
  height: auto;
  position: relative;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  flex-shrink: 0;
  filter: grayscale(100%) brightness(0.8);
}

.building-img {
  max-height: 400px;
  /* Varying heights look better for skyline */
  width: auto;
  display: block;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.building-card:hover {
  filter: grayscale(0%) brightness(1);
  transform: translateY(-10px) scale(1.05);
}

.building-skyline-info {
  position: fixed;
  /* Follow mouse globally */
  transform: translate(-50%, -120%);
  /* Centered above cursor */
  padding: 12px 20px;
  background: rgba(15, 23, 42, 0.9);
  /* Deeper glass background */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  /* Crucial for move following */
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 9999;
  /* Top layer */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.building-skyline-info.active {
  opacity: 1;
}

.skyline-name {
  font-family: 'Syne', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
}

.skyline-worth {
  font-family: 'Syncopate', sans-serif;
  font-size: 0.7rem;
  color: var(--color-brand-primary);
  font-weight: 700;
  letter-spacing: 0.1em;
}

/* About Us Image Specifics */
#about .glass-morphic {
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

#about .card-enter {
  will-change: transform, opacity;
}


.building-card:hover .building-info {
  opacity: 1;
  transform: translateY(0);
}

.building-name {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* --- Services Donut Chart Section --- */
#services-section {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

#services-section.visible {
  opacity: 1;
  transform: translateY(0);
}

.donut-chart {
  display: block;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(139, 92, 246, 0.3));
  overflow: visible;
}

#services-donut {
  overflow: visible;
  padding: 20px;
}

.donut-segment {
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

.donut-segment .segment-path {
  filter: grayscale(100%) brightness(0.6);
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}

.donut-segment:hover,
.donut-segment.active {
  transform: scale(1.15);
  z-index: 10;
}

.donut-segment:hover .segment-path,
.donut-segment.active .segment-path {
  filter: grayscale(0%) brightness(1.1) drop-shadow(0 0 20px rgba(139, 92, 246, 0.8));
}


.service-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-align: center;
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.service-title {
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  width: 100%;
  text-align: center;
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
  /* Helps with centering if text-align is center */
  text-align: left;
  /* Keep list text left-aligned for readability while container is centered */
}

.service-list li {
  color: #d1d5db;
  padding: 0.5rem 0;
  padding-left: 1.5rem;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.5;
  border-left: 2px solid rgba(139, 92, 246, 0.3);
  margin-bottom: 0.5rem;
}

.service-list li::before {
  content: "→";
  position: absolute;
  left: 0.5rem;
  color: #8b5cf6;
  font-weight: bold;
}

/* Modal Open State for Scroll Locking */
body.modal-open {
  overflow: hidden;
}

/* Modal Navigation Buttons */
#prev-service,
#next-service {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

#prev-service:active,
#next-service:active {
  transform: translateY(-50%) scale(0.95);
}

@media (max-width: 1024px) {
  .donut-chart {
    width: 300px;
    height: 300px;
  }

  .service-title {
    font-size: 1.5rem;
  }

  .service-list li {
    font-size: 0.875rem;
  }
}


.building-value {
  color: var(--color-brand-primary);
  font-weight: 600;
  font-size: 1rem;
}

/* --- Stylish Vision Typography --- */
.vision-hero-title {
  font-family: 'Syncopate', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  font-size: clamp(1.8rem, 4.5vw, 3.8rem);
  line-height: 1.2;
  padding-left: 0.4em;
  /* Balances trailing letter-spacing for perfect centering */
  margin-right: 0;
  display: inline-block;
  width: 100%;
  overflow: visible;

  background: linear-gradient(to right, #fff 20%, #8b5cf6 40%, #ec4899 60%, #fff 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 5s linear infinite;
  text-shadow: 0 0 30px rgba(139, 92, 246, 0.2);
}

.vision-hero-sub {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  letter-spacing: 0.1em;
  opacity: 0.8;
  max-width: 800px;
  margin: 0 auto;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

/* --- Enhanced Reveal Animations --- */
.reveal-text,
.reveal-subtitle {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(10px);
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-text.active,
.reveal-subtitle.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.reveal-subtitle {
  transition-delay: 0.4s;
}


/* --- Vision Dubai Section Sticky Background --- */
.bg-vision-fixed {
  background-image: url('../images/dubai.png') !important;
  background-attachment: fixed !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  position: relative;
  background-color: #030014;
}

@media (max-width: 1024px) {
  .bg-vision-fixed {
    background-attachment: scroll !important;
    /* Mobile fallback */
  }
}

/* --- About Us Background Gradient --- */
.bg-about-gradient {
  background: linear-gradient(to bottom, #000000, #090218, #060319) !important;
}

/* --- Premium Glass Panel for Interactive Grid --- */
.service-glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 40px;
  padding: 60px 40px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.service-glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

/* --- Service Description Panel Refinements --- */
#service-description {
  min-height: 450px;
  /* Fixed height to prevent jumps */
  max-height: 450px;
  overflow: hidden;
  /* Hide scrollbars, JS will handle fitting */
  position: relative;
  transition: all 0.5s ease;
  background-size: cover !important;
  background-position: center !important;
  z-index: 1;
  display: flex;
  align-items: center;
  /* Center content vertically if small */
  justify-content: center;
}

/* Black overlay for better readability */
#service-description::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  /* Darker overlay for better text visibility */
  z-index: 1;
  border-radius: inherit;
}

.service-content-wrapper {
  width: 100%;
  padding: 20px;
  position: relative;
  z-index: 2;
}

#service-description .service-title {
  font-size: 1.5rem;
  /* Slightly smaller title */
  font-weight: 700;
  color: #fff;
  margin-bottom: 1.25rem;
  position: relative;
}

#service-description .service-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

#service-description .service-list li {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 0.6rem;
  padding-left: 1.25rem;
  position: relative;
  font-size: 0.9rem;
  /* Smaller detail font */
  line-height: 1.4;
}

#service-description .service-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-brand-primary);
  font-weight: bold;
}

/* Client Stories Marquee */
.marquee-wrapper-client {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  padding: 40px 0;
}

.marquee-content-client {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: scroll-client 40s linear infinite;
}

.marquee-wrapper-client:hover .marquee-content-client {
  animation-play-state: paused;
}

@keyframes scroll-client {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.client-story-card {
  transition: all 0.4s ease;
  height: auto;
  display: flex;
  flex-direction: column;
}

.client-story-card:hover {
  transform: translateY(-5px) scale(1.02);
  background: rgba(255, 255, 255, 0.08);
}

/* --- Interaction Hints & Neon Interface --- */
@keyframes pulse-subtle {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

#donut-hint {
  animation: pulse-subtle 3s infinite ease-in-out;
}

/* --- Vision & Mission: Dark Blue Holographic --- */
@keyframes float-hologram {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

@keyframes holographic-ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

.holographic-card {
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  animation: float-hologram 10s infinite ease-in-out;
  background: rgba(3, 7, 18, 0.4) !important;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(59, 130, 246, 0.1) !important;
}

.holographic-card:hover {
  border-color: rgba(30, 64, 175, 0.8) !important;
  background: rgba(30, 64, 175, 0.1) !important;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 1),
    0 0 50px rgba(59, 130, 246, 0.15);
}

.holographic-grid {
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
  background-size: 25px 25px;
  mask-image: radial-gradient(circle at center, black, transparent 90%);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.holographic-ripple {
  position: absolute;
  width: 250px;
  height: 250px;
  border: 1px solid rgba(59, 130, 246, 0.6);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: holographic-ripple 1s cubic-bezier(0, 0.55, 0.45, 1) forwards;
}

/* Custom Cursor - Holographic Blue Mode */
.custom-cursor.cursor-magnified {
  width: 130px !important;
  height: 130px !important;
  background: rgba(30, 64, 175, 0.05) !important;
  border: 1px solid rgba(39, 75, 255, 0.8) !important;
  box-shadow: 0 0 80px rgba(59, 130, 246, 0.5),
    inset 0 0 20px rgba(59, 130, 246, 0.2) !important;
}

.custom-cursor.cursor-magnified::after {
  width: 4px !important;
  height: 4px !important;
  background: #60a5fa !important;
  box-shadow: 0 0 15px #3b82f6 !important;
}

@keyframes float-slowly {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }
}

.magnetic-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  animation: float-slowly 8s infinite ease-in-out;
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.magnetic-card-container:nth-child(2) .magnetic-card {
  animation-delay: -4s;
}

.magnetic-card:hover {
  animation-play-state: paused;
  border-color: rgba(139, 92, 246, 0.5) !important;
  background: rgba(139, 92, 246, 0.05);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.9),
    inset 0 0 20px rgba(139, 92, 246, 0.1);
}

/* Neon Spotlight - Bright and High Impact */
.card-spotlight {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle at 50% 50%,
      rgba(139, 92, 246, 0.8) 0%,
      rgba(139, 92, 246, 0.4) 25%,
      rgba(139, 92, 246, 0.1) 50%,
      transparent 80%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  mix-blend-mode: screen;
}

.magnetic-card-inner {
  position: relative;
  z-index: 2;
}

/* Custom Cursor - Neon Mode */
.custom-cursor.cursor-magnified {
  width: 140px !important;
  height: 140px !important;
  background: rgba(139, 92, 246, 0.05) !important;
  border: 1px solid rgba(139, 92, 246, 0.8) !important;
  box-shadow: 0 0 60px rgba(139, 92, 246, 0.6),
    inset 0 0 20px rgba(139, 92, 246, 0.3) !important;
}

#donut-hint {
  animation: pulse-subtle 3s infinite ease-in-out;
}

/* Services Dropdown Scrollbar Styling */
.services-dropdown::-webkit-scrollbar {
  width: 6px;
}

.services-dropdown::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.services-dropdown::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.5);
  border-radius: 10px;
}

.services-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.8);
}

/* Services Donut Enhancements */
.donut-chart {
  filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.2));
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.donut-segment {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

.donut-segment path {
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  filter: saturate(0.8) brightness(0.8);
}

.donut-segment:hover {
  filter: drop-shadow(0 0 20px rgba(139, 92, 246, 0.4));
}

.donut-segment:hover path,
.donut-segment.active path {
  filter: saturate(1.2) brightness(1.1);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1px;
}

.donut-segment.active {
  transform: scale(1.05);
}

#service-info-panel {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#panel-list li {
  animation: fadeInRight 0.5s ease-out forwards;
  opacity: 0;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Stagger animation for list items */
#panel-list li:nth-child(1) {
  animation-delay: 0.1s;
}

#panel-list li:nth-child(2) {
  animation-delay: 0.2s;
}

#panel-list li:nth-child(3) {
  animation-delay: 0.3s;
}

#panel-list li:nth-child(4) {
  animation-delay: 0.4s;
}

#panel-list li:nth-child(5) {
  animation-delay: 0.5s;
}