@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Typewriter animation */
.typewriter::after {
    content: "|";
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}

/* Scroll animations */
[data-scroll] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s, transform 0.6s;
}

[data-scroll].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Service card hover */
.service-card:hover .service-icon {
    transform: rotate(15deg) scale(1.1);
}

/* Portfolio overlay */
.portfolio-item .portfolio-overlay {
    opacity: 0;
    transition: opacity 0.3s;
}

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

/* FAQ transition */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-answer.active {
    max-height: 500px;
}

.faq-icon.active {
    transform: rotate(180deg);
}

/* Form validation */
.error-message.active {
    display: block;
}

input.error, textarea.error, select.error {
    border-color: #ef4444;
    @apply ring-2 ring-red-200;
}

/* Modal transition */
#successModal.active {
    opacity: 1;
    visibility: visible;
}

#successModal.active > div {
    transform: translateY(0);
}

/* Back to top button */
#backToTop.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #3b82f6;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2563eb;
}

/* Animation delays */
.process-step:nth-child(1) { transition-delay: 0.1s; }
.process-step:nth-child(2) { transition-delay: 0.2s; }
.process-step:nth-child(3) { transition-delay: 0.3s; }
.process-step:nth-child(4) { transition-delay: 0.4s; }
.process-step:nth-child(5) { transition-delay: 0.5s; }

.service-card:nth-child(1) { transition-delay: 0.1s; }
.service-card:nth-child(2) { transition-delay: 0.2s; }
.service-card:nth-child(3) { transition-delay: 0.3s; }
.service-card:nth-child(4) { transition-delay: 0.4s; }

.portfolio-item:nth-child(1) { transition-delay: 0.1s; }
.portfolio-item:nth-child(2) { transition-delay: 0.2s; }
.portfolio-item:nth-child(3) { transition-delay: 0.3s; }

.pricing-card:nth-child(1) { transition-delay: 0.1s; }
.pricing-card:nth-child(2) { transition-delay: 0.2s; }
.pricing-card:nth-child(3) { transition-delay: 0.3s; }

.faq-item:nth-child(1) { transition-delay: 0.1s; }
.faq-item:nth-child(2) { transition-delay: 0.2s; }
.faq-item:nth-child(3) { transition-delay: 0.3s; }
.faq-item:nth-child(4) { transition-delay: 0.4s; }
.faq-item:nth-child(5) { transition-delay: 0.5s; }
.faq-item:nth-child(6) { transition-delay: 0.6s; }

/* --- Project color palette (user provided) --- */
:root {
    --color-dark: #1B211A; /* deep dark */
    --color-olive: #628141; /* primary */
    --color-light: #8BAE66; /* secondary */
    --color-pale: #EBD5AB; /* accent / highlights */
    --color-text: var(--color-dark);
}

/* Ensure smooth scrolling is applied */
html { scroll-behavior: smooth; }

/* Brand / UI overrides to apply the palette across the site */
.logo, .logo a {
    color: var(--color-olive) !important;
}

.nav-links a:hover,
.mobile-menu a:hover {
    color: var(--color-olive) !important;
}

/* CTA and button colors */
.cta-button,
.cta-button:link,
.cta-button:visited {
    background-color: var(--color-olive) !important;
    color: white !important;
}
.cta-button:hover {
    background-color: var(--color-dark) !important;
}

/* Hero background override to use palette instead of Tailwind blue */
#home {
    background: linear-gradient(135deg, var(--color-pale) 0%, #ffffff 100%) !important;
}

/* Replace common Tailwind blue utility colors with palette (after Tailwind load) */
.bg-blue-600 { background-color: var(--color-olive) !important; }
.hover\:bg-blue-700:hover { background-color: var(--color-dark) !important; }
.text-blue-600 { color: var(--color-olive) !important; }
.from-blue-50 { --tw-gradient-from: var(--color-pale) !important; }

/* Scrollbar colors */
::-webkit-scrollbar-thumb {
    background: var(--color-olive);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-dark);
}

/* Modal accent */
#successModal .w-16.h-16 { background-color: var(--color-pale) !important; }
#successModal .text-green-600 { color: var(--color-olive) !important; }

/* small utility for subtle borders/accents */
.accent-border { border-color: var(--color-olive) !important; }

/* Keep link underline accent consistent */
.nav-links a::after { background-color: var(--color-olive) !important; }

/* Make sure feather icons (inline SVGs) pick up primary color when used in nav */
custom-navigation .logo-icon svg, .logo-icon { color: var(--color-olive) !important; }

/* Accessibility: ensure body text uses palette dark color */
body { color: var(--color-text); }

/* Map Tailwind light-blue utilities to the site palette (pale/soft greens)
    - Use rgba fallbacks for subtle background shades where needed */
.bg-blue-50 { background-color: var(--color-pale) !important; }
.bg-blue-100 { background-color: rgba(235,213,171,0.6) !important; }
.bg-blue-200 { background-color: rgba(139,174,102,0.12) !important; }
.from-blue-50 { --tw-gradient-from: var(--color-pale) !important; }
.to-blue-50 { --tw-gradient-to: var(--color-pale) !important; }

/* Decorative circle opacities (if classes applied via HTML) */
.hero-decor-1 { background-color: rgba(235,213,171,0.2) !important; }
.hero-decor-2 { background-color: rgba(139,174,102,0.08) !important; }