/* Design Nurds - Custom Styles */
/* Supplements Tailwind CDN utility classes */

body {
  font-family: 'Inter', sans-serif;
  background-color: #fcf8f8;
  color: #1c1b1b;
}

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Glass Navigation */
.glass-nav {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Mobile menu */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
  opacity: 0;
}

.mobile-menu.open {
  max-height: 400px;
  opacity: 1;
}

/* Portfolio hover overlay */
.portfolio-overlay {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

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

/* Active nav link */
.nav-link-active {
  color: #0058bd;
  font-weight: 700;
  border-bottom: 2px solid #0058bd;
}

/* Blog post card hover */
.blog-card:hover {
  transform: translateY(-4px);
  transition: transform 0.3s ease;
}

/* Form focus styles */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #0058bd;
  box-shadow: 0 0 0 3px rgba(0, 88, 189, 0.04);
}

/* Pricing card recommended glow */
.pricing-recommended {
  box-shadow: 0 25px 50px -12px rgba(0, 88, 189, 0.08);
}

/* Page transition fade-in */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-fade-in-delay {
  animation: fadeInUp 0.6s ease-out 0.2s forwards;
  opacity: 0;
}

/* Contact form styling */
.form-input {
  background-color: #f6f3f2;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #1c1b1b;
  transition: all 0.3s ease;
}

.form-input:focus {
  background-color: #ffffff;
  border-color: #0058bd;
  box-shadow: 0 0 0 3px rgba(0, 88, 189, 0.04);
}

.form-input::placeholder {
  color: #727786;
}