/* style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Liquid Background Shapes */
.liquid-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
  animation: liquidFlow 25s infinite ease-in-out;
}

.shape1 {
  width: 600px;
  height: 600px;
  background: linear-gradient(135deg, #f97316, #eab308);
  top: -10%;
  left: -15%;
  animation-delay: 0s;
}

.shape2 {
  width: 800px;
  height: 800px;
  background: linear-gradient(135deg, #84cc16, #eab308);
  bottom: -20%;
  right: -20%;
  animation-delay: -8s;
}

.shape3 {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #f59e0b, #22c55e);
  top: 30%;
  right: 10%;
  animation-delay: -15s;
}

@keyframes liquidFlow {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(80px, 60px) rotate(15deg);
  }
}

/* Navbar */
#navbar {
  background: rgba(23, 23, 23, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-link {
  position: relative;
}

.nav-link:after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background: linear-gradient(to right, #f97316, #eab308);
  transition: width 0.3s ease;
}

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

/* Mobile Menu */
#mobile-menu {
  animation: slideDown 0.4s ease forwards;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-nav-link {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.mobile-nav-link:hover {
  color: #f97316;
  padding-left: 16px;
}

/* Button Hover Effects */
a {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Fix for Services Heading Visibility */
#services .text-neutral-600 {
  color: #4b5563; /* Darker gray for better readability on cream background */
}

#services h2 {
  color: #171717; /* Solid dark color for the main heading */
}

/* Feature Card Hover Glows */
#why-us .group:hover {
  box-shadow: 0 20px 40px -15px rgba(249, 115, 22, 0.1);
  transform: translateY(-5px);
}

/* Custom Scrollbar for long content sections */
#why-us {
  scrollbar-width: thin;
  scrollbar-color: #f97316 transparent;
}
/* Contact Card Hover Elevation */
#contact .group {
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform, box-shadow;
}

/* Subtle glow for the center dark card */
#contact .bg-neutral-950:hover {
  box-shadow: 0 30px 60px -15px rgba(249, 115, 22, 0.3);
}

/* Smooth icons */
#contact i {
  transition: transform 0.4s ease;
}

#contact .group:hover i {
  transform: rotate(-10deg);
}
footer {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

footer::before {
  content: "";
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(249, 115, 22, 0.05) 0%,
    transparent 70%
  );
  pointer-events: none;
}

footer a {
  position: relative;
  display: inline-block;
}

footer a:hover {
  transform: translateX(3px);
}