/* Custom styles for OctaDoor Modern Design */

html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide scrollbar for horizontal scroll areas */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Glassmorphism Utilities */
.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Blob Animations for Hero */
@keyframes float {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(30px, -50px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

.animate-blob {
  animation: float 10s infinite ease-in-out;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

/* Text Gradient */
.text-gradient-red {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, #d32f2f, #b71c1c);
}

.text-gradient-green {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(to right, #3ef769, #24c953);
}

/* Card Hover Glow */
.hover-glow {
  transition: all 0.3s ease;
}
.hover-glow:hover {
  box-shadow:
    0 20px 25px -5px rgba(211, 47, 47, 0.1),
    0 10px 10px -5px rgba(211, 47, 47, 0.04);
  transform: translateY(-4px);
  border-color: rgba(211, 47, 47, 0.2);
}

/* Connector Line for Technology Section - Fixed Alignment */
.step-connector {
  position: relative;
  padding-bottom: 2.5rem; /* Space for the line */
}

/* The line itself */
.step-connector::after {
  content: "";
  position: absolute;
  /* Center the line horizontally relative to the icon's container (4rem / 2 = 2rem) */
  left: 2rem;
  top: 4rem; /* Start just below the icon */
  bottom: -0.5rem; /* Extend to the next icon */
  width: 2px;
  background: #334155; /* Neutral-700 for visibility on dark bg */
  transform: translateX(-50%);
  z-index: 0;
}

/* Remove line from the last item */
.step-connector:last-child::after {
  display: none;
}

/* Ensure the icon sits on top of the line */
.step-icon-wrapper {
  position: relative;
  z-index: 10;
}