/* ========================================
   GLOBAL STYLES & RESET
   ======================================== */

@property --one {
  syntax: "<color>";
  inherits: true;
  initial-value: #000000;
}

@property --two {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

:root {
  --one: #000000;
  --two: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Outfit", sans-serif;
  font-optical-sizing: auto;
  cursor: none;

  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--two);
  font-weight: 500;
}

p {
  color: var(--two);
  font-weight: 300;
}

html {
  cursor: none;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--one); /* Use the smooth-swapping variable */
  transition:
    --one 0.5s ease,
    --two 0.5s ease;
  cursor: none;
  padding-top: 60px;
  /* Navbar */
}

body.light-mode {
  /* background: rgb(255, 255, 255);  <-- Removed to allow var(--one) transition to work */
  --one: #ffffff;
  --two: #000000;
}

/* Hide scrollbars but keep scrolling */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

html,
body {
  scrollbar-width: none;
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  overflow: auto;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar for Chrome, Safari, and Edge */
}

/* ========================================
   PRELOADER
   ======================================== */

html.no-preloader .loading-page {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ========================================
   FOUC SHIELD (Solid background to hide unstyled content)
   ======================================== */
html::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--one);
  z-index: 999999;
  pointer-events: none;
  transition:
    opacity 0.4s ease-out,
    visibility 0.4s ease-out;
}

/* Remove the shield once Javascript has initialized the elements */
html.fouc-loaded::before {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Hide the background layer on repeat visits before JS loads */
html.no-preloader #bgLayer {
  opacity: 0;
  visibility: hidden;
}

/* Hide content and match background to grid color during transition wait */
html.transitioning-state,
html.transitioning-state body {
  background-color: white !important;
  cursor: none !important;
}

html.light-mode.transitioning-state,
html.light-mode.transitioning-state body {
  background-color: black !important;
  cursor: none !important;
}

/* 
   IMPORTANT: Any new fixed/overlay elements added to the site (e.g., mascots, popups, badges) 
   must be added to this list to ensure they are hidden during the page transition. 
   Otherwise, they will 'flash' while the grid is loading.
*/
html.transitioning-state .navbar,
html.transitioning-state .scroll,
html.transitioning-state #app,
html.transitioning-state .main-wrapper,
html.transitioning-state .controls,
html.transitioning-state #bgLayer,
html.transitioning-state .camera-logo,
html.transitioning-state .mode-toggle-logo {
  opacity: 0 !important;
  pointer-events: none !important;
}

#svg {
  height: 150px;
  width: 150px;
  animation: draw 8s ease;
}

@keyframes draw {
  0% {
    fill: #000000;
  }

  50% {
    fill: #ffffff;
  }

  100% {
    fill: #ffffff;
  }
}

.name-container {
  height: 30px;
}

/* ========================================
   CUSTOM CURSOR
   ======================================== */

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  /* Prevents interference */
  z-index: 10000000;
  opacity: 0; /* Hidden by default to prevent top-left flash */
  transition: opacity 0.25s ease-in-out;
  /* Only fade, no transform delay */
}

.site-wide {
  width: 30px;
  height: 30px;
  background-color: transparent;
  /* Rotation container */
  display: flex;
  align-items: center;
  justify-content: center;
  --cursor-border-color: var(--two);
  /* Default color variable */
}

/* The simple round ring */
.site-wide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--cursor-border-color);
  box-sizing: border-box;
}

.site-wide .pointer {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 0.1s ease-in-out,
    height 0.1s ease-in-out;
  background-size: contain;
}

.site-wide.active .pointer {
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
}

/* ========================================
   APP & OVERLAY
   ======================================== */

#app,
.overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 994;
  background: transparent;
}

#app {
  overflow: visible;
  z-index: 994;
}

/* ========================================
   SPARKLE ANIMATIONS
   ======================================== */

.sparkle {
  width: 16px;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.sparkle1 {
  animation: anim1 1s ease-in forwards;
}

.sparkle2 {
  animation: anim1 1s ease-in forwards;
}

.sparkle3 {
  animation: anim1 1s ease-in forwards;
}

@keyframes anim1 {
  to {
    transform: translateY(100px) scale(0.2) translate(-50%, -50%);
    opacity: 0;
  }
}

@keyframes anim2 {
  to {
    transform: translateY(100px) scale(0.2) translate(-50%, -50%);
    opacity: 0;
  }
}

@keyframes anim3 {
  to {
    transform: translateY(100px) scale(0.5) translate(-50%, -50%);
    opacity: 0;
  }
}

/* ========================================
   NAVIGATION BAR
   ======================================== */

.navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 996;
  width: fit-content;
  max-width: 90vw;
  background: var(--one);
  border: 3px solid var(--two);
  border-radius: 30px;
  max-height: 60px; /* Initial max-height */
  height: 60px; /* Explicit height for transition */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 30px;
  gap: 30px;
  flex-wrap: wrap; /* Allow wrapping */
  align-content: flex-start;
  /* Transition height and max-height for robustness */
  transition:
    max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    border-radius 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: 0.5s; /* Delay closing so items can fade out */
  overflow: visible; /* Allow mode icon to pop out */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

/* Expanded State */
.navbar.expanded {
  max-height: 90vh; /* Go till bottom (essentially) */
  height: 85vh; /* target height */
  border-radius: 50px;
  padding-bottom: 20px;
  transition-delay: 0s; /* Open instantly */
}

/* Force the main navbar items to stay on the top row */
.camera-logo,
.navbar-text-logo,
.navbar-right {
  height: 60px; /* Match initial navbar height */
  display: flex;
  align-items: center;
}

.camera-logo {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  top: 20px;
  left: 20px;
  width: 55px;
  height: 55px;
  z-index: 995;
  background-color: black;
  border: 2.9px solid white;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  border-radius: 27.5px;
  scale: 1.05;
  transform-origin: left center; /* Anchors the 1.05 scale to the left edge so it doesn't shift when expanding */
}

.camera-logo.expanded {
  width: 235px; /* Beautiful fit for "Try AR on your browser" */
  border-radius: 27.5px;
}

.camera-toggle-text {
  position: absolute;
  left: 56px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  color: white;
  transition: opacity 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}

body.light-mode .camera-toggle-text {
  color: black;
}

.camera-logo.expanded .camera-toggle-text {
  opacity: 1;
  transition-delay: 0.15s;
}

body.light-mode .camera-logo {
  background-color: white;
  border-color: black;
}

.mode-toggle-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: fixed;
  top: 20px;
  right: 20px;
  width: 55px;
  height: 55px;
  z-index: 995;
  background-color: black;
  border: 2.9px solid white;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  transition:
    background-color 0.5s ease,
    border-color 0.5s ease,
    width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  border-radius: 27.5px; /* Constants instead of 50% to prevent stretching oval shape */
  scale: 1.05;
  transform-origin: right center; /* Anchors the 1.05 scale to the right edge so it doesn't shift when expanding */
  cursor: pointer;
}

.mode-toggle-logo.expanded {
  width: 210px; /* Reduced to pull text and icon closer together */
  border-radius: 27.5px;
}

.mode-toggle-text {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  color: white;
  transition: opacity 0.2s ease;
  pointer-events: none;
  white-space: nowrap;
}

body.light-mode .mode-toggle-text {
  color: black;
}

.mode-toggle-logo.expanded .mode-toggle-text {
  opacity: 1;
  transition-delay: 0.15s;
}

body.light-mode .mode-toggle-logo {
  background-color: white;
  border-color: black;
}

#mode-icon {
  transition: filter 0.5s ease;
  /* Default (Dark Mode): Force White */
  filter: brightness(0) invert(1);
  position: absolute !important;
  right: 0px !important;
  top: 0px !important;
  width: 49px !important;
  height: 49px !important;
}

body.light-mode #mode-icon {
  filter: brightness(0) invert(0);
}

.sparkle-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.sparkle-nav img {
  width: 36px !important;
  height: 36px !important;
  opacity: 1 !important;
  transform: none !important;
  transition: filter 0.5s ease;
}

/* Target the camera image (first child) specifically */
.camera-logo img:first-child {
  width: 32px !important; /* Override inline 120% */
  height: auto;
  position: relative; /* Keep it in flow or centered via flex */
  display: block;
}

.camera-logo img {
  position: absolute !important;
  top: 50% !important;
  left: 24.6px !important;
  transform: translate(-50%, -50%) !important;
  width: 32px !important;
  height: 32px !important;
  /* Sparkle styling & theming */
  transition:
    transform 0.4s cubic-bezier(0.5, 1, 0.5, 0),
    filter 0.5s ease;
  /* Default (Dark Mode): Force White */
  filter: brightness(0) invert(1);
}

.camera-logo:hover img {
  transform: translate(-50%, -50%) scale(0) !important;
}

/* Lottie Container Theming */
#camera-lottie {
  transition: filter 0.5s ease;
  /* Default (Dark Mode): Force White */
  filter: brightness(0) invert(1);
  position: absolute !important;
  left: 0px !important;
  top: 0px !important;
  width: 49.2px !important;
  height: 49.2px !important;
}

/* --- LIGHT MODE OVERRIDES --- */

/* Make Sparkle Black in Light Mode */
body.light-mode .camera-logo img {
  filter: brightness(0) invert(0) !important;
}

body.light-mode .sparkle {
  filter: brightness(0);
}

/* Make Cursor Sparkle Black in Light Mode */
body.light-mode .site-wide .pointer {
  filter: brightness(0);
}

/* Make Lottie Black in Light Mode */
body.light-mode #camera-lottie {
  filter: brightness(0) invert(0);
}

.navbar-text-logo {
  position: relative;
  left: auto;
  transform: none;
  z-index: 997;
  display: flex;
  align-items: center;
}

.navbar-text-logo img {
  height: 24px;
  width: auto;
  display: block;
  transition: filter 0.5s ease;
}

body.light-mode .navbar-text-logo img {
  filter: invert(1);
}

/* Adjust vertical alignment to center visually */
.navbar > div,
.navbar-right {
  margin-top: -3px;
}

/* Hamburger Button */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  position: relative;
  z-index: 997;
}

.bar {
  width: 100%;
  height: 2px;
  background-color: var(--two);
  transition:
    transform 0.3s ease-in-out,
    opacity 0.3s ease-in-out;
  transform-origin: center;
}

/* Hamburger Animation */
.hamburger.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
  opacity: 0;
  transform: scale(0); /* Add scale for nicer disappearance */
}

.hamburger.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Navbar Right Section */
.navbar-right {
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 997;
  cursor: none;
}

.mode-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  scale: 3.3;
  justify-content: center;
  filter: brightness(0) invert(1);
  position: relative;
  z-index: 10003; /* Ensure it's on top */
  transition: filter 0.5s ease;
}

body.light-mode .mode-icon {
  filter: brightness(0) invert(0);
}

/* ========================================
   MOBILE MENU (Inside Expanded Capsule)
   ======================================== */

.mobile-menu {
  width: 100%;
  height: 80vh; /* Fixed height large enough for content */
  position: absolute; /* Anchor relative to navbar */
  top: 70px; /* Start below the header row */
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  /* Transition opacity matches the navbar close */
  transition:
    opacity 0.3s ease 0.4s,
    visibility 0s linear 0.8s;
  background: transparent;
  overflow: hidden;
  z-index: 996;
}

.navbar.expanded .mobile-menu {
  visibility: visible;
  opacity: 1;
  /* Fade in slightly faster */
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0s;
}

.mobile-menu ul {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0;
  margin: 0;
  width: 100%;
  justify-content: center; /* Safe to center now as container is fixed height */
  flex-grow: 1;
}

.mobile-menu ul li {
  margin: 0;
  opacity: 0;
  transform: translateY(30px);
  /* Default state (Closing): Reverse delays */
  transition:
    opacity 0.4s ease,
    transform 0.4s ease;
  flex-shrink: 0; /* Prevent squashing */
  min-height: max-content; /* Ensure height is preserved */
}

/* Closing Delays (Reverse Order: Bottom to Top) - Tightened for stability */
.mobile-menu ul li:nth-child(7) {
  transition-delay: 0s;
}
.mobile-menu ul li:nth-child(6) {
  transition-delay: 0.05s;
}
.mobile-menu ul li:nth-child(5) {
  transition-delay: 0.1s;
}
.mobile-menu ul li:nth-child(4) {
  transition-delay: 0.15s;
}
.mobile-menu ul li:nth-child(3) {
  transition-delay: 0.2s;
}
.mobile-menu ul li:nth-child(2) {
  transition-delay: 0.25s;
}
.mobile-menu ul li:nth-child(1) {
  transition-delay: 0.3s;
}

/* Staggered text entrance (Opening: Top to Bottom) */
.navbar.expanded .mobile-menu ul li {
  opacity: 1;
  transform: translateY(0);
}

.navbar.expanded .mobile-menu ul li:nth-child(1) {
  transition-delay: 0.1s;
}
.navbar.expanded .mobile-menu ul li:nth-child(2) {
  transition-delay: 0.15s;
}
.navbar.expanded .mobile-menu ul li:nth-child(3) {
  transition-delay: 0.2s;
}
.navbar.expanded .mobile-menu ul li:nth-child(4) {
  transition-delay: 0.25s;
}
.navbar.expanded .mobile-menu ul li:nth-child(5) {
  transition-delay: 0.3s;
}
.navbar.expanded .mobile-menu ul li:nth-child(6) {
  transition-delay: 0.35s;
}
.navbar.expanded .mobile-menu ul li:nth-child(7) {
  transition-delay: 0.4s;
}

.mobile-menu ul li a {
  color: var(--two);
  font-weight: 300;
  font-size: 24px; /* Larger font size */
  text-decoration: none;
  transition: color 0.2s ease;
  cursor: none;
  display: inline-block;
  padding: 10px 25px;
  border-radius: 30px;
  position: relative;
  z-index: 2; /* Text above highlight */
}

/* Hover state handled by JS .menu-highlight now */

/* Active state for current page */
.mobile-menu ul li.active a {
  color: var(--one); /* Text color contrast against bubble */
  font-weight: 500;
  position: relative;
  background-color: var(--two); /* Bubble color */
  /* Border removed as it's separate now */
}

.menu-highlight {
  position: fixed; /* Fixed relative to viewport */
  top: 0;
  left: 0;
  border: 2px solid var(--two);
  border-radius: 30px;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 0;
  box-sizing: border-box;
  z-index: 10005; /* High z-index to sit above navbar mechanics */
}

/* ========================================
   MAIN CONTENT & LAYOUT
   ======================================== */

.scroll {
  position: relative;
  height: auto;
  /* Allow full height of content */
  min-height: 100vh;
  /* Ensures it covers the screen initially */
  width: 100%;
  /* Ensures it covers the screen initially */
  width: 100%;
  z-index: 994;
}

.cards-carousel-section {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.cards-carousel-section.visible {
  opacity: 1;
  pointer-events: auto;
}

.cards-carousel-section h2 {
  text-align: center;
  font-size: 2.5rem;
  font-family: "Outfit", sans-serif;
  font-weight: 300;
}

.main-content {
  z-index: 993;
}

/* ========================================
   CONTENT SECTIONS
   ======================================== */

.content {
  text-align: center;
  /* Center-align text */
  display: flex;
  flex-direction: column;
  /* Stack elements vertically */
  align-items: center;
  /* Center-align child elements horizontally */
  justify-content: center;
  /* Center-align child elements vertically */
  min-height: 100vh;
  /* Optional: Make the content take full viewport height */
  padding: 20px;
  /* Optional: Add some padding */
  color: var(--two);
}

.content img {
  margin: 20px auto;
  /* Center-align images with some spacing */
}

.content h1 {
  font-size: 2.5rem;
  color: var(--two);
  margin: 20px auto;
  /* Center-align headings with some spacing */
  font-weight: 300;
}

/* ========================================
   LINKS & TYPOGRAPHY
   ======================================== */

a,
strong {
  color: rgb(143, 143, 143);
  /* Set the text color of hyperlinks to red */
  text-decoration: none;
  /* Remove underline */
}

a:hover {
  text-decoration: underline;
  /* Optional: Add underline on hover */
}

/* ========================================
   SCROLL PROMPT
   ======================================== */

.scroll-prompt {
  width: 300px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
  border-radius: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  transition: transform 0.3s ease;
  overflow: hidden;
  z-index: 10;
}

.scroll-prompt::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.scroll-prompt:hover::before {
  left: 100%;
}

.scroll-prompt:hover {
  transform: translateY(-5px) translateX(-50%);
}

.scroll-prompt p {
  color: white;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin: 0;
  padding: 0 20px;
  z-index: 1;
  position: relative;
}

/* ========================================
   SIDE POPUP
   ======================================== */

.side-popup {
  position: fixed;
  top: 100px;
  left: -300px;
  width: 300px;
  background: var(--two);
  border-radius: 0 40px 40px 0;
  z-index: 995;
  transition: left 0.5s ease-in-out;
}

.side-popup.show {
  left: 0;
}

.side-popup.closed {
  left: -300px;
}

.popup-content {
  padding: 20px;
  position: relative;
}

.popup-content p {
  color: var(--one);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  padding-right: 30px;
  line-height: 1.4;
}

.close-btn {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 24px;
  color: var(--one);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.close-btn:hover {
  background: #666666;
  color: #ffffff;
}

/* ========================================
   ANIMATED ELEMENTS
   ======================================== */

.animated-finger {
  display: inline-block;
  width: 24px;
  height: auto;
  animation: fingerClick 3s ease-in-out 3;
  animation-delay: 10.5s;
  transform-origin: center bottom;
}

@keyframes fingerClick {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  50% {
    transform: translateY(-50px) scale(1.5) rotate(15deg);
  }
}

/* ========================================
   CONTACT SECTION
   ======================================== */

/* Contact Section Outer Container */
.contact-section-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 20px;
  text-align: center;
  font-size: 1.25rem;
}

/* Contact Form Section */
.contact-section {
  max-width: 1200px;
  margin: 40px auto 80px auto;
  padding: 50px 50px;
  text-align: left;
  position: relative;
  border-radius: 60px;
  border: 3px solid var(--two);
}

.contact-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

.contact-illustration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 320px;
  padding: 20px;
  position: relative;
  z-index: 3;
}

.contact-illustration h2 {
  color: var(--two);
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 24px;
  text-align: center;
}

.contact-illustration p {
  text-align: center;
  width: 100%;
  display: block;
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--two);
  margin-top: 16px;
}

.contact-form-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--two);
  background: var(--one);
  border-radius: 30px;
  padding: 30px;
}

body[data-page="contact"] .contact-form-wrapper {
  background: transparent;
  box-shadow: none;
  z-index: auto; /* Allow children to interleave */
  position: relative;
  border-radius: 30px;
  padding: 30px;
}

/* The Shadow Layer - Sits behind Wrapper Border but covers Global Background */
body[data-page="contact"] .contact-form-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  box-shadow: 0 0 0 100vmax var(--one);
  border-radius: 30px; /* Slightly smaller to hide behind border or match? 30px is fine */
  border-radius: 30px;
  pointer-events: none;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  /* Lift form content above the globe (z:1) */
  z-index: 2;
  padding: 20px;
}

.contact-form label {
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--two);
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 8px;
}

.contact-form input,
.contact-form textarea {
  margin-top: 8px;
  padding: 20px 28px;
  border: 3px solid var(--two);
  border-radius: 30px;
  background: var(--one);
  color: var(--two);
  font-size: 1.25rem;
  font-family: "Outfit", sans-serif;
  transition: transform 0.3s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  transform: translateY(-2px);
}

.contact-form textarea {
  min-height: 160px;
  resize: vertical;
}

.glow-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
  color: white;
  border: none;
  padding: 18px 48px;
  border-radius: 50px;
  font-size: 1.4rem;
  font-weight: 500;
  font-family: "Outfit", sans-serif;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.1);
  margin-top: 16px;
  position: relative;
  overflow: hidden;
}

.glow-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.glow-button:hover::before {
  left: 100%;
}

.glow-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 50%, #5a6fd8 100%);
}

.glow-button:active {
  transform: translateY(-2px);
}

/* Contact Information Sections */
.contact-info-sections {
  max-width: 1400px;
  margin: -30px auto 30px auto;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.contact-info-item {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 60px 40px;
  background: var(--one);
  border-radius: 30px;
  border: 3px solid var(--two);
  transition: transform 0.3s ease;
  box-sizing: border-box;
}

.contact-info-item:hover {
  transform: translateY(-8px);
}

.contact-info-image {
  width: 200px;
  height: auto;
  flex-shrink: 0;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.contact-info-item:hover .contact-info-image {
  transform: scale(1.05);
}

.contact-info-text {
  color: var(--two);
  font-size: 1.2rem;
  line-height: 1.6;
  margin: 0;
  width: fit-content;
  text-align: center;
}

.contact-info-item-reverse {
  flex-direction: row-reverse;
}

.contact-info-item-reverse .contact-info-text {
  text-align: center !important;
}

/* Responsive styles for contact info sections */
@media (max-width: 768px) {
  .contact-info-sections {
    padding: 24px 20px;
    gap: 30px;
    margin: -60px auto 60px auto;
  }

  .contact-info-item {
    flex-direction: column;
    padding: 30px 20px;
    gap: 24px;
    text-align: center;
  }

  .contact-info-image {
    width: 150px;
  }

  .contact-info-text {
    font-size: 1.1rem;
    text-align: center;
  }

  .contact-info-item-reverse .contact-info-text {
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .contact-info-sections {
    padding: 24px 20px;
    gap: 24px;
    margin: -60px auto 60px auto;
  }

  .contact-info-item {
    padding: 20px 15px;
  }

  .contact-info-image {
    width: 120px;
  }

  .contact-info-text {
    font-size: 1rem;
    text-align: center;
  }

  .contact-info-item-reverse .contact-info-text {
    text-align: center !important;
  }
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
  position: relative;
  width: 100%;
  font-weight: 400;
  color: white;
  text-align: center;
  padding: 20px 0;
  bottom: 0;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Hide about title on desktop */
.about-title {
  display: none;
}

/* Show about title on mobile */
@media (max-width: 768px) {
  .about-title {
    display: block !important;
  }
}

/* Add space between unicorn element and page descriptions on desktop */
@media (min-width: 768px) {
  .about-header-section {
    margin-top: 4rem;
  }
}

/* ========================================
   RESOURCE CONTAINERS
   ======================================== */

.resources-container-section {
  max-width: 1400px;
  margin: 80px auto;
  padding: 0 40px;
}

.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  margin-top: 60px;
}

.resource-card {
  display: flex;
  flex-direction: column;
  background: var(--one);
  border-radius: 30px;
  border: 3px solid var(--two);
  padding: 30px;
  text-decoration: none;
  transition: transform 0.5s ease;
  overflow: hidden;
  position: relative;
}

.resource-card:hover {
  transform: translateY(-8px);
  text-decoration: none;
}

.resource-illustration {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  overflow: hidden;
}

.resource-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.resource-card:hover .resource-illustration img {
  transform: scale(1.05);
}

.resource-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.resource-title {
  color: var(--two);
  font-size: 1.75rem;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.3;
  text-decoration: none;
}

.resource-description {
  color: var(--two);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  text-decoration: none;
}

/* Responsive styles for resource containers */
@media (max-width: 900px) {
  .resources-container-section {
    padding: 0 20px;
    margin: 60px auto;
  }

  .resources-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
  }

  .resource-card {
    padding: 24px;
  }

  .resource-illustration {
    height: 180px;
    margin-bottom: 20px;
  }

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

@media (max-width: 768px) {
  .resources-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .resource-card {
    padding: 20px;
  }

  .resource-illustration {
    height: 160px;
  }

  .resource-title {
    font-size: 1.4rem;
  }

  .resource-description {
    font-size: 0.95rem;
  }
}

/* Hide Unicorn Studio watermark */
a[href*="unicorn.studio"] {
  display: none !important;
}

/* Alternative method to hide the watermark */
a[target="_blank"][style*="position: absolute"][style*="bottom: 30px"] {
  display: none !important;
}

/* Hide the watermark image specifically */
img[src*="assets.unicorn.studio/media/made_in_us_small_web.svg"] {
  display: none !important;
}

/* Hide any element with unicorn studio branding */
[style*="unicorn.studio"] {
  display: none !important;
}

/* ========================================
   MODEL VIEWER BUBBLES
   ======================================== */
.model-bubbles-container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 10;
}

.model-bubble-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Center the pill perfectly around its coordinate */
.model-bubble-wrapper .bubble-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  margin: 0;
  
  /* Initial state: circle icon only */
  min-width: 64px;
  height: 64px;
  padding: 0;
  border-radius: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Hide overflowing text */
  transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.model-bubble-wrapper .icon-wrapper {
  position: absolute; /* Take out of flow to prevent shifting */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  width: 28px; /* Base icon size */
  height: 28px;
  margin: 0;
  display: flex !important;
  justify-content: center;
  align-items: center;
  transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.model-bubble-wrapper .bubble-icon {
  width: 26px;
  height: 26px;
}

.model-bubble-wrapper .bubble-text {
  opacity: 0;
  white-space: nowrap;
  transform: scale(0.5); /* Scale up effect */
  max-width: 0;
  margin-left: 0;
  transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  /* Ensure display block instead of none from mobile max-width overrides */
  display: inline-block !important;
}

.model-bubble-wrapper .bubble-link:hover {
  /* When bubble-link scales to 1.1 on hover, we must keep the -50% translation so it scales from center */
  transform: translate(-50%, -50%) scale(1.1);
  /* Hover state: pill shape with text only */
  padding: 0 24px;
}

.model-bubble-wrapper .bubble-link:hover .icon-wrapper {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

.model-bubble-wrapper .bubble-link:hover .bubble-text {
  max-width: 150px;
  opacity: 1;
  transform: scale(1);
}

/* 
   Calculate 7 positions around a circle. 
   Radius: ~280px 
*/
.model-bubble-wrapper.mb-1 { transform: rotate(270deg) translate(280px) rotate(-270deg); }
.model-bubble-wrapper.mb-2 { transform: rotate(321.4deg) translate(280px) rotate(-321.4deg); }
.model-bubble-wrapper.mb-3 { transform: rotate(12.8deg) translate(280px) rotate(-12.8deg); }
.model-bubble-wrapper.mb-4 { transform: rotate(64.2deg) translate(280px) rotate(-64.2deg); }
.model-bubble-wrapper.mb-5 { transform: rotate(115.7deg) translate(280px) rotate(-115.7deg); }
.model-bubble-wrapper.mb-6 { transform: rotate(167.1deg) translate(280px) rotate(-167.1deg); }
.model-bubble-wrapper.mb-7 { transform: rotate(218.5deg) translate(280px) rotate(-218.5deg); }

/* Responsive radius adjustment */
@media (max-width: 900px) {
  .model-bubble-wrapper.mb-1 { transform: rotate(270deg) translate(220px) rotate(-270deg); }
  .model-bubble-wrapper.mb-2 { transform: rotate(321.4deg) translate(220px) rotate(-321.4deg); }
  .model-bubble-wrapper.mb-3 { transform: rotate(12.8deg) translate(220px) rotate(-12.8deg); }
  .model-bubble-wrapper.mb-4 { transform: rotate(64.2deg) translate(220px) rotate(-64.2deg); }
  .model-bubble-wrapper.mb-5 { transform: rotate(115.7deg) translate(220px) rotate(-115.7deg); }
  .model-bubble-wrapper.mb-6 { transform: rotate(167.1deg) translate(220px) rotate(-167.1deg); }
  .model-bubble-wrapper.mb-7 { transform: rotate(218.5deg) translate(220px) rotate(-218.5deg); }
}

.contact-model-viewer {
  transform: scale(0.6);
}

.contact-model-viewer::part(default-progress-bar) {
  display: none;
}

@media (max-width: 600px) {
  .contact-model-viewer {
    transform: scale(0.5);
  }

  .model-bubble-wrapper.mb-1 { transform: rotate(270deg) translate(150px) rotate(-270deg); }
  .model-bubble-wrapper.mb-2 { transform: rotate(321.4deg) translate(150px) rotate(-321.4deg); }
  .model-bubble-wrapper.mb-3 { transform: rotate(12.8deg) translate(150px) rotate(-12.8deg); }
  .model-bubble-wrapper.mb-4 { transform: rotate(64.2deg) translate(150px) rotate(-64.2deg); }
  .model-bubble-wrapper.mb-5 { transform: rotate(115.7deg) translate(150px) rotate(-115.7deg); }
  .model-bubble-wrapper.mb-6 { transform: rotate(167.1deg) translate(150px) rotate(-167.1deg); }
  .model-bubble-wrapper.mb-7 { transform: rotate(218.5deg) translate(150px) rotate(-218.5deg); }
}

/* ========================================
   MOBILE CARD STACK (CONTACT PAGE)
   ======================================== */

.show-on-mobile {
  display: none; /* Hidden by default on Desktop */
}

/* Container playing card size */
.show-on-mobile .card-container {
  position: relative;
  width: 300px;
  height: 450px;
  margin: 10px auto;
}

/* Base Card Styling */
.show-on-mobile .mobile-contact-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--one);
  border: 3px solid var(--two);
  border-radius: 16px;
  box-sizing: border-box;
  color: var(--two);

  /* Internal layout */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px 15px;
  text-align: center;

  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform-origin: bottom center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  outline: 3px solid transparent;
}

/* Scaled down image to fit playing card footprint */
.show-on-mobile .card-contact-info-image {
  max-width: 100%;
  height: 140px;
  object-fit: contain;
  margin-bottom: 25px;
  pointer-events: none; /* Prevents dragging the image by accident */
}

/* Scaled down text to prevent overflow */
.show-on-mobile .card-contact-info-text {
  font-size: 1.1rem; /* ~18px */
  line-height: 1.45;
  margin: 0;
  pointer-events: none;
}

/* --- STACK POSITIONS --- */
.show-on-mobile .pos-0 {
  z-index: 4;
  transform: rotate(-4deg) translateZ(0);
}
.show-on-mobile .pos-1 {
  z-index: 3;
  transform: rotate(-1deg) translateZ(0);
}
.show-on-mobile .pos-2 {
  z-index: 2;
  transform: rotate(2deg) translateZ(0);
}
.show-on-mobile .pos-3 {
  z-index: 1;
  transform: rotate(5deg) translateZ(0);
}

/* --- HOVER SPREAD EFFECT --- (Removed) */

/* --- AUTO CAROUSEL ANIMATION CLASS (Slides Right) --- */
.show-on-mobile .mobile-contact-card.slide-out {
  transform: translate(320px, -30px) rotate(25deg) translateZ(0) !important;
  z-index: 5 !important;
}

/* --- AUTO CAROUSEL ANIMATION CLASS (Slides Left for Previous) --- */
.show-on-mobile .mobile-contact-card.slide-out-left {
  transform: translate(-320px, -30px) rotate(-25deg) translateZ(0) !important;
  z-index: 5 !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Founder image sizing */
.founder-image img {
  max-width: 80%;
  /* Reduce by 20% on desktop */
  height: auto;
  border-radius: 10px;
}

/* Tablet and smaller desktop */
@media (max-width: 900px) {
  .contact-container {
    flex-direction: column;
    gap: 16px;
  }

  .contact-illustration {
    min-width: 0;
  }
}

/* Mobile devices */
@media (max-width: 768px) {
  /* Hide unicorn element on mobile for all pages except index */
  body[data-page="about"] #unicornElement,
  body[data-page="resources"] #unicornElement,
  body[data-page="services"] #unicornElement,
  body[data-page="portfolio"] #unicornElement,
  body[data-page="blogs"] #unicornElement,
  body[data-page="contact"] #unicornElement,
  body[data-page="3D-Converter"] #unicornElement {
    display: none !important;
  }

  /* Utility to hide elements on mobile */
  .hide-on-mobile {
    display: none !important;
  }

  /* Utility to show elements on mobile */
  .show-on-mobile {
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin: 0 0 40px 0;
  }

  /* Founder section mobile styles */
  .founder-content {
    flex-direction: column !important;
    gap: 2rem !important;
    text-align: center !important;
  }

  .founder-image {
    order: -1 !important;
    flex: none !important;
    margin-bottom: 1rem;
  }

  .founder-image img {
    max-width: 90% !important;
    /* Reduce by 10% on mobile */
    height: auto !important;
  }

  .founder-text {
    flex: none !important;
    text-align: center !important;
  }

  .founder-title {
    font-size: 2rem !important;
  }

  .about-title {
    font-size: 3rem !important;
  }

  .about-description {
    font-size: 1rem !important;
    padding: 0 1rem;
  }

  .contact-section {
    margin: 40px auto;
    padding: 30px 20px;
    border-radius: 30px;
  }

  body[data-page="contact"] .contact-section-container {
    padding-bottom: 0;
  }

  body[data-page="contact"] .contact-section {
    border: none;
    border-radius: 0;
    padding-top: 0;
  }

  .contact-section h2 {
    font-size: 2rem;
  }

  .contact-form {
    gap: 20px;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 16px 20px;
    font-size: 1.1rem;
  }

  .contact-form button {
    padding: 15px 30px;
    font-size: 1.2rem;
  }

  .contact-form .btn-3d {
    padding: 0;
  }

  .contact-illustration {
    min-width: 280px;
    display: none;
  }

  .contact-form-wrapper {
    padding: 0 !important;
    margin: 0 -15px;
    background: transparent;
    border: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  body[data-page="contact"] .contact-form-wrapper::before {
    display: none;
  }

  .contact-container {
    gap: 30px;
  }

  .logo-item {
    width: 90px;
    height: 90px;
    margin: 0 10px;
  }

  #logo-wall {
    gap: 15px;
  }

  body::before,
  body::after {
    width: 10%;
  }

  #row-1 .logo-track,
  #row-3 .logo-track,
  #row-2 .logo-track,
  #row-4 .logo-track {
    animation-duration: 60s;
  }
}

/* Small mobile devices */
@media (max-width: 600px) {
  /* Smaller styling for Contact form card stack on mobile view */
  .show-on-mobile .card-container {
    width: 240px;
    height: 360px;
  }
  .show-on-mobile .mobile-contact-card {
    padding: 15px 12px;
  }
  .show-on-mobile .card-contact-info-image {
    height: 110px;
    margin-bottom: 15px;
  }
  .show-on-mobile .card-contact-info-text {
    font-size: 0.95rem; /* ~15px */
    line-height: 1.4;
  }

  /* Tighter animation ranges to fit screen */
  .show-on-mobile .mobile-contact-card.slide-out {
    transform: translate(260px, -25px) rotate(20deg) translateZ(0) !important;
  }
}

/* ========================================
   LOGO CAROUSEL STYLES
   ======================================== */

:root {
  --base-speed: 60s;
  --animation-speed: 0.25s;
}

.logo-section {
  background-color: #00000000;
  color: #ffffff;
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}

.logo-section::before,
.logo-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 15%;
  z-index: 15;
  pointer-events: none;
}

.logo-section h2 {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 40px;
  font-family: "Outfit", sans-serif;
  font-weight: 300;
}

#logo-wall {
  width: 100%;
  max-width: 1800px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.logo-row {
  display: flex;
  width: 100%;
  overflow: visible;
  position: relative;
  transition: z-index 0.3s;
}

.logo-row:hover {
  z-index: 20;
}

.logo-track {
  display: flex;
  flex-shrink: 0;
}

#row-1 .logo-track,
#row-3 .logo-track {
  animation: scroll-right var(--base-speed) linear infinite;
}

#row-2 .logo-track,
#row-4 .logo-track {
  animation: scroll-left var(--base-speed) linear infinite;
}

.logo-row:hover .logo-track {
  animation-play-state: paused;
}

.logo-item {
  flex: 0 0 auto;
  width: 150px;
  height: 150px;
  margin: 0 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform var(--animation-speed) ease-in-out;
}

.logo-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter var(--animation-speed) ease-in-out;
}

.logo-item.is-hovering {
  transform: scale(1.15);
  z-index: 10;
}

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

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

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

  100% {
    transform: translateX(0);
  }
}

/* Logo carousel mobile optimization */
@media (max-width: 768px) {
  .logo-section h2 {
    font-size: 2.2rem;
  }

  .logo-item {
    width: 90px;
    height: 90px;
    margin: 0 10px;
  }

  #logo-wall {
    gap: 15px;
  }

  .logo-section::before,
  .logo-section::after {
    width: 10%;
  }

  #row-1 .logo-track,
  #row-3 .logo-track,
  #row-2 .logo-track,
  #row-4 .logo-track {
    animation-duration: 60s;
  }
}

/* ========================================
   AWARDS SECTION STYLES
   ======================================== */

.awards-section,
.stats-section {
  margin: 4rem 0;
  text-align: center;
}

.awards-title,
.stats-title {
  color: var(--two);
  font-size: 2.5rem;
  margin-bottom: 4rem;
}

.awards-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 4rem 3rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  justify-items: center;
}

.award-item,
.stat-item {
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 300px;
  transition: transform 0.3s ease;
}

.award-item:hover,
.stat-item:hover {
  transform: translateY(-5px);
}

.award-item:hover .award-image,
.stat-item:hover .stat-image {
  transform: scale(1.05);
}

.award-item:hover .curved-text text,
.stat-item:hover .curved-text text {
  fill: #8a2be2;
}

.curved-text {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.curved-text svg {
  width: 100%;
  height: 100%;
}

.curved-text text {
  font-size: 18px;
  font-weight: 600 !important;
  fill: var(--two);
  text-anchor: middle;
  transition: fill 0.3s ease;
}

.award-image,
.stat-image {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.award-image:hover,
.stat-image:hover {
  transform: scale(1.05);
}

.stat-number {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--one);
  border: 3px solid var(--two);
  color: var(--two);
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 auto;
  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.stat-item:hover .stat-number {
  transform: scale(1.05);
  color: #8a2be2;
}

.award-description,
.stat-description {
  margin-top: 1rem;
  width: 100%;
}

.award-description p,
.stat-description p {
  color: var(--two);
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
  margin: 0;
}

/* Awards section mobile optimization */
@media (max-width: 768px) {
  .awards-section,
  .stats-section {
    margin: 1rem 0;
  }

  .awards-title,
  .stats-title {
    font-size: 2rem;
  }

  .awards-grid,
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem 2rem;
    padding: 0 1rem;
  }

  .award-item,
  .stat-item {
    max-width: 250px;
  }

  .award-item:hover,
  .stat-item:hover {
    transform: translateY(-3px);
  }

  .award-item:hover .award-image,
  .stat-item:hover .stat-image {
    transform: scale(1.03);
  }

  .award-item:hover .curved-text text,
  .stat-item:hover .curved-text text {
    fill: #8a2be2;
  }

  .curved-text {
    width: 180px;
    height: 140px;
    top: -35px;
  }

  .curved-text text {
    font-size: 18px;
  }

  .award-image,
  .stat-image {
    width: 150px;
    height: 150px;
  }

  .stat-number {
    width: 150px;
    height: 150px;
    font-size: 2rem;
  }

  .award-description p,
  .stat-description p {
    font-size: 0.9rem;
  }
}

/* ========================================
   SERVICES CAROUSEL STYLES
   ======================================== */

.services-carousel-section {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.motion-path-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.logo-container {
  position: relative;
  z-index: 300;
}

.logo-container img {
  width: clamp(80px, 10vw, 120px);
  height: auto;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
  animation: pulse 4s infinite ease-in-out;
}

.text-placeholder {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(1.2rem, 3vw, 2rem);
  line-height: 1.4;
  width: 25%;
  z-index: 200;
  text-shadow: 0 0 10px #000;
  pointer-events: none;
  color: white;
}

.text-group-1 {
  left: 15%;
  text-align: left;
}

.text-group-2 {
  right: 15%;
  text-align: right;
}

.image-group {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-group img {
  position: absolute;
  width: clamp(70px, 12vw, 100px);
  height: clamp(70px, 12vw, 100px);
  border-radius: 16px;
  object-fit: cover;
  transition: transform 0.3s ease;
  visibility: hidden;
}

/* Create the alternating z-index "weave" effect */
.group-1 img:nth-of-type(odd) {
  z-index: 10;
  /* Odd images from group 1 are on top */
}

.group-1 img:nth-of-type(even) {
  z-index: 6;
  /* Even images from group 1 are at the bottom */
}

.group-2 img {
  z-index: 8;
  /* All group 2 images are in the middle layer */
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

/* Services carousel mobile optimization */
@media (max-width: 768px) {
  .services-carousel-section {
    height: 80vh;
  }

  .text-placeholder {
    display: none;
  }

  .logo-container img {
    width: clamp(60px, 8vw, 80px);
  }

  .image-group img {
    width: clamp(50px, 10vw, 80px);
    height: clamp(50px, 10vw, 80px);
  }
}

/* About Company Section Layout */
.company-content {
  display: flex;
  align-items: center;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  flex-direction: row-reverse;
}

.company-visual {
  flex: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 20px;
  position: relative;
  /* Needed for absolute positioning of child */
}

.company-visual > div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  /* Match container height for 1:1 ratio */
}

.company-text {
  flex: 1;
  text-align: left;
}

.company-description {
  color: var(--two);
  font-size: 1.1rem;
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.company-description:last-child {
  margin-bottom: 0;
}

.founder-title {
  color: var(--two);
  font-size: 2.5rem;
  margin-bottom: 4rem;
  text-align: center;
}

@media (max-width: 768px) {
  .company-content {
    flex-direction: column;
  }

  .company-visual,
  .company-text {
    width: 100%;
  }

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

/* ========================================
   CARDS CAROUSEL STYLES
   ======================================== */

.cards-carousel-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px 0px;
}

.carousel-container {
  position: relative;
  width: 100%;
  max-width: 90vw;
  height: 600px;
  perspective: 1000px;
  display: flex;
  align-items: center;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.carousel-container.no-transition .carousel-track,
.carousel-container.no-transition .card {
  transition: none !important;
}

.carousel-track {
  display: flex;
  gap: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(0);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.card {
  width: 280px;
  height: 460px;
  background: var(--one);
  border-radius: 30px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  text-align: center;
  opacity: 0.5;
  transform: scale(0.9);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  border: 1px solid var(--two);
}

.card.active {
  opacity: 1;
  transform: scale(1.1);
  background: var(--one);
  border: 3px solid var(--two);

  z-index: 10;
}

.card h3 {
  margin-bottom: 15px;
  font-size: 1.2rem;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-illustration {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Gradient background when no image is provided */
.card-illustration:not(img) {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
}

/* Image styling */
.card-illustration[src] {
  object-fit: cover;
  display: block;
}

/* Fallback for img tag */
img.card-illustration {
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2;
}

/* Glow effect for active card image */
.card.active img.card-illustration {
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
}

/* Glow background behind active card image */
.card.active .card-illustration::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  border-radius: 16px;
  z-index: 1;
}

.card p {
  font-size: 0.9rem;
  line-height: 1.4;
}

@media (max-width: 768px) {
  .carousel-container {
    height: 500px;
  }

  .card {
    width: 240px;
    height: 380px;
  }

  .card h3 {
    font-size: 1rem;
  }

  .card-illustration {
    font-size: 2.5rem;
  }

  .card p {
    font-size: 0.85rem;
  }
}

/* ========================================
   PORTFOLIO PROJECTS SECTIONS
   ======================================== */

.portfolio-projects-container {
  max-width: 1200px;
  margin: 100px auto 40px auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px 40px;
}

.portfolio-project {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
  padding: 30px;
  background: var(--one);
  border-radius: 30px;
  border: 3px solid var(--two);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-project:hover {
  transform: translateY(-10px);
}

.portfolio-project h2 {
  color: var(--two);
  font-size: 2.22rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0;
}

.project-image-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition:
    box-shadow 0.5s ease,
    background 0.5s ease;
}

.project-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1);
  /* Resetting to 1.0 to use full container space */
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-project:hover .project-image-container img {
  transform: scale(0.98);
}

.project-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}

.project-description {
  color: var(--two);
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.4;
  max-width: 700px;
}

.know-more-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #667eea 100%);
  color: var(--two);
  border: none;
  padding: 18px 56px;
  border-radius: 100px;
  font-size: 1.3rem;
  font-weight: 500;
  font-family: "Outfit", sans-serif;
  text-decoration: none;
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    background 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    color 0.3s ease;
  border: 2px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.know-more-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.know-more-btn:hover::before {
  left: 100%;
}

.know-more-btn:hover {
  transform: translateY(-5px);
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 50%, #5a6fd8 100%);
  text-decoration: none;
}

@media (max-width: 1024px) {
  .portfolio-projects-container {
    grid-template-columns: 1fr;
    max-width: 800px;
    gap: 80px;
    padding: 0 20px;
  }

  .portfolio-project h2 {
    font-size: 2rem;
  }

  .project-description {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .portfolio-project {
    padding: 24px;
    gap: 24px;
  }

  .portfolio-project h2 {
    font-size: 1.6rem;
    letter-spacing: 2px;
  }

  .project-description {
    font-size: 1rem;
  }

  .know-more-btn {
    padding: 14px 40px;
    font-size: 1.1rem;
  }
}
/* Mascot / Preloader Styles */

#bgLayer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 998;
  pointer-events: none;
}

#bgSVG {
  width: 100%;
  height: 100%;
}

.svg-container {
  width: 80vmin;
  height: 80vmin;
  max-width: 600px;
  max-height: 600px;
  position: relative;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  z-index: 1;
  pointer-events: auto; /* Enable interaction */
  opacity: 0;
  visibility: hidden;
}

svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

#lottieHeart,
#lottieConfetti {
  will-change: opacity;
}

.main-wrapper {
  display: flex;
  align-items: center;
  gap: 120px;
  z-index: 999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* Let clicks pass through empty space */
}

/* Ensure children are interactive */
.main-wrapper > * {
  pointer-events: auto;
}

.side-container {
  display: none;
  flex-direction: column;
  gap: 30px;
}

body.dev-mode .side-container {
  display: flex;
}

.box {
  width: 120px;
  height: 120px;
  border-radius: 16px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  will-change: transform;
}

.box:hover {
  transform: scale(1.1);
}

.controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 20px;
  background: rgba(255, 255, 255, 0.25);
  padding: 15px 30px;
  border-radius: 30px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 1001;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  pointer-events: auto;
}

body.dev-mode .controls {
  display: flex;
}

.control-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: "Segoe UI", sans-serif;
  color: white;
}

.controls button {
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: white;
  font-size: 14px;

  color: #444;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease;
  min-width: 80px;
}

.controls button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.controls button.active {
  background: #4facfe;
  color: white;
}

#btnAngry:hover {
  background: #ff9966;
  color: white;
}
#btnLove:hover {
  background: #ff758c;
  color: white;
}
#btnHappy:hover {
  background: #ffd700;
  color: black;
}

input[type="range"] {
  accent-color: #4facfe;
}

/* ========================================
   MOBILE TWEAKS
   ======================================== */
@media (max-width: 768px) {
  /* Fix navbar width and positioning */
  .navbar {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    /* Adjust padding for mobile if needed, but 30px is likely okay */
  }

  /* Ensure logo is on top and properly spaced */
  .camera-logo {
    z-index: 1002 !important; /* Above navbar (1001) */
    top: 5px !important; /* Center vertically in 60px navbar */
    left: 20px !important; /* Match original left spacing or align with padding */
    border: none !important; /* Remove border on mobile */
  }

  .mode-toggle-logo {
    z-index: 1002 !important; /* Above navbar (1001) */
    top: 5px !important; /* Center vertically in 60px navbar */
    right: 20px !important; /* Match original right spacing or align with padding */
    border: none !important; /* Remove border on mobile */
  }

  /* Adjust expanded state for mobile if needed */
  .navbar.expanded {
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }

  /* Hide custom cursor on mobile */
  .custom-cursor {
    display: none !important;
  }
}

/* ========================================
   3D BUTTON COMPONENT
   ======================================== */

.btn-3d {
  width: 100%;
  height: 55px;
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  cursor: none; /* Changed to pointer for button */
  pointer-events: auto; /* Ensure it's clickable */
}

.btn-3d-top {
  width: 100%;
  height: 100%;
  background: var(--two);
  color: var(--one);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100mm;
  outline: 3px solid var(--one);
  transition: transform 0.2s;
  position: relative;
  overflow: hidden;
}

.btn-3d-bottom {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--two);
  top: 10px;
  left: 0;
  border-radius: 100px;
  outline: 3px solid var(--one);
  z-index: -1;
}

.btn-3d-bottom::before {
  position: absolute;
  content: "";
  width: 3px;
  height: 10px;
  background: var(--one);
  bottom: 0;
  left: 10%;
}

.btn-3d-bottom::after {
  position: absolute;
  content: "";
  width: 3px;
  height: 10px;
  background: var(--one);
  bottom: 0;
  left: 90%;
}

.btn-3d:active .btn-3d-top {
  transform: translateY(10px);
}

.btn-3d::before {
  position: absolute;
  content: "";
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  background: var(--one);
  top: 7px;
  left: -3px;
  border-radius: 100px;
  outline: 3px solid var(--two);
  z-index: -1;
}

.btn-3d-top::before {
  position: absolute;
  content: "";
  width: 15px;
  height: 100%;
  background: var(--one);
  transform: skewX(30deg);
  left: -20px;
  transition: left 0.5s;
}

.btn-3d:hover .btn-3d-top::before {
  left: calc(100% + 20px);
}
.lw-text-panel {
  width: 920px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--two);
  font-family: "Outfit", sans-serif;
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  border-radius: 200px;
  background: var(--one);
  border: 3px solid var(--two);
  text-transform: none;
  transition: opacity 0.2s ease;
  pointer-events: none; /* Text shouldn't block clicks */
}

/* ========================================
   3D FILTER BUTTON
   ======================================== */

.filter-btn-3d {
  height: 40px;
  width: auto;
  padding: 0;
  min-width: 100px;
  margin: 5px;
}

.filter-btn-3d .btn-3d-top {
  font-size: 0.9rem;
  padding: 0 20px;
}

.filter-btn-3d.active .btn-3d-top {
  transform: translateY(10px);
}

.filter-btn-3d .btn-3d-bottom::before {
  height: 9px;
  left: 20px;
}

.filter-btn-3d .btn-3d-bottom::after {
  height: 9px;
  left: auto;
  right: 20px;
}

/* ========================================
   PAGINATION STYLES
   ======================================== */
.pagination-container {
  display: flex;
  flex-wrap: wrap;
}
.pagination-btn {
  background: transparent;
  color: var(--two);
  border: 2px solid var(--two);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 1rem;
  cursor: none;
  transition: all 0.3s ease;
  font-family: "Outfit", sans-serif;
}
.pagination-btn:hover:not(.disabled) {
  background: var(--two);
  color: var(--one);
}
.pagination-btn.active {
  background: var(--two);
  color: var(--one);
  font-weight: 600;
}
.pagination-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pagination-dots {
  color: var(--two);
  font-size: 1.2rem;
  padding: 0 5px;
}

/* ========================================
   CONNECTED BUBBLES SECTION
   ======================================== */
.connected-bubbles-section {
  width: 100%;
  padding-bottom: 2.5rem; /* Space between links and footer */
  margin-top: -1.5rem; /* Visually move links up towards contact form */
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
}

.bubbles-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 15px;
  max-width: 1200px; /* Increased to allow all 7 elements to fit inline */
}

.bubble-item {
  display: flex;
  align-items: center;
}

.bubble-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background-color: var(--one);
  border: 2px solid var(--two);
  color: var(--two);
  border-radius: 40px; /* Make it more circular */
  padding: 12px 24px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  cursor: none;
  overflow: hidden; /* Hide icon when scaled out */
  min-height: 48px;
}

.icon-wrapper {
  width: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--one); /* Ensure white circle internally */
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin-right: 0;
  overflow: hidden; /* Ensure zoomed icon stays within circle */
}

.bubble-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: invert(1); /* Invert to black on white background */
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); /* Animate the scale */
  transform: scale(1);
}

body.light-mode .bubble-icon {
  filter: invert(0);
}

.bubble-text {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bubble-link:hover {
  background-color: var(--two);
  color: var(--one);
  transform: scale(1.1);
  text-decoration: none;
}

.bubble-link:hover .icon-wrapper {
  width: 32px;
  opacity: 1;
  transform: scale(1);
  margin-right: 10px; /* Add gap when hovered */
}

.bubble-link:hover .bubble-icon {
  transform: scale(1.4); /* Zoom in on hover */
}

/* Connecting lines between bubbles */
@media (min-width: 768px) {
  .bubbles-container {
    gap: 0;
  }
  .bubble-item:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 40px;
    height: 2px;
    background-color: var(--two);
  }
}
@media (max-width: 768px) {
  .bubbles-container {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    max-width: 280px; /* Forces wrap exactly after 4 elements */
  }
  .bubble-item {
    flex-direction: row;
  }
  .bubble-item:not(:last-child)::after {
    display: none;
  }
  .bubble-text {
    display: none;
  }
  .icon-wrapper {
    width: 32px;
    opacity: 1;
    transform: scale(1.5);
    margin-right: 0 !important;
  }
  .bubble-link {
    padding: 10px;
    border-radius: 50%;
    min-height: auto;
  }
  .bubble-link:hover .icon-wrapper {
    margin-right: 0;
  }
}