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

:root {
    --color-primary: #1e3a8a; /* A deep, trustworthy blue */
    --color-primary-dark: #1e40af;
    --color-secondary: #f3f4f6; /* A light grey for backgrounds */
    --color-text: #374151;
    --color-text-light: #6b7280;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1200px;
}

/* Tailwind CSS Apply for custom classes */
.nav-link {
    @apply text-gray-600 font-medium relative transition-colors duration-300;
}
.nav-link:hover {
    @apply text-primary;
}
.nav-link::after {
    @apply content-[''] absolute bottom-[-4px] left-0 w-0 h-[2px] bg-primary transition-all duration-300;
}
.nav-link:hover::after {
    @apply w-full;
}

.section-title {
    @apply text-3xl md:text-4xl font-bold text-primary;
}

.section-subtitle {
    @apply mt-2 text-lg text-gray-500;
}

.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-dark focus:border-transparent outline-none transition duration-300 text-gray-800;
}

.service-card {
    @apply bg-white p-8 rounded-lg shadow-lg text-center transition-all duration-300 transform hover:-translate-y-2 hover:shadow-2xl;
}

.portfolio-item {
    @apply relative overflow-hidden rounded-lg shadow-md cursor-pointer h-64;
}

.portfolio-item img {
    @apply w-full h-full object-cover transition-transform duration-500 ease-in-out;
}

.portfolio-item:hover img {
    @apply transform scale-110;
}

#header.scrolled {
    @apply shadow-lg;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 1s ease-out forwards;
}

/* Custom Theme Colors for Tailwind */
.bg-primary { background-color: var(--color-primary); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.text-primary { color: var(--color-primary); }
.text-primary-dark { color: var(--color-primary-dark); }
.border-primary { border-color: var(--color-primary); }