/* base.css - Reset, variables, typography */

:root {
  --primary: #1F2937;
  --primary-dark: #1c2a3d;
  --secondary: #F3B33D80;
  --accent: #F3B33D;
  --text-primary: #FFFF;
  --text-secondary: #FFFFFFE5;
   --bounce-color-1: #FBBF24; /* Gold */
        --bounce-color-2: #991B1B; /* Dark Red */
        --bounce-color-3: #059669; /* Green */
        --loader-bg: #151b2b;  
  --bg-light: #f8fafc;
  --border: #e2e8f0;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
  --font-sans: 'neon';
  --font-mono: 'Monaco', 'Courier New', monospace;
  --radius: 8px;
  --h1:56px;
  --h1-small:48px;
  --h2:32px;
  --h2-small:24px;
  --p1:16px;
  --p2:12px;


}

  /* Fade-in animation for hero */
  .fade-in-hero {
    opacity: 0;
    animation: fadeInHero 1.2s ease-out forwards;
  }

  @keyframes fadeInHero {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Slide-up and fade-in for components */
  .slide-up-fade-in {
    opacity: 0;
    transform: translateY(40px);
    animation: slideUpFadeIn 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  }

  /* Animation delays for lazy loading effect */
  .navbar.slide-up-fade-in {
    animation-delay: 0s; /* Navbar appears instantly */
  }
  .fade-in-hero {
    animation-delay: 0.5s; /* Hero animates after navbar */
  }
  .footer.slide-up-fade-in {
    animation-delay: 1.5s; /* Footer animates last */
  }
  /* Staggered delays for main content components only (not navbar/footer) */
  .main-content .slide-up-fade-in,
  .main-content .card.slide-up-fade-in,
  .main-content .service-card.slide-up-fade-in {
    animation-delay: 1s; /* Main content animates after hero */
  }
  /* Add more selectors and delays as needed for other main content components */

  @keyframes slideUpFadeIn {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothin:antialiased;
-moz-osx-font-smoothing:grayscale;
}

html, body {
  height: 100%;
  font-family: "Tilt Neon", sans-serif;
  line-height: 1.6;
  color: var(--gray-900);
  background-color: var(--primary);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.2;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h2-small); }

p {
  margin-bottom: 1rem;
  color: var(--gray-700);
  font-size: var(--p2);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.3s ease;
}


button {
  cursor: pointer;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
  font-family: inherit;
}

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

button:active {
  transform: translateY(0);
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: var(--primary-color);
  color: var(--white);
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: var(--secondary-color);
  color: var(--white);
}

.btn-secondary:hover {
  background-color: #5a6268;
}