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

:root {
    --primary-blue: #0052cc;
    --primary-blue-dark: #0041a3;
    --primary-blue-light: #e6f0ff;
    --gray-900: #1a202c;
    --gray-800: #2d3748;
    --gray-600: #718096;
    --gray-100: #f7fafc;
    --white: #ffffff;
}

body {
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header & Footer */
.header {
    @apply bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50 transition-all duration-300;
}
.footer {
    @apply bg-gray-900 text-gray-400;
}

/* Navigation */
.nav-link {
    @apply text-gray-600 hover:text-primary-blue transition-colors duration-300 relative py-2;
}

.header .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-blue);
    transition: width 0.3s ease-in-out;
}

.header .nav-link.active::after,
.header .nav-link:hover::after {
    width: 100%;
}
.nav-link.active {
    @apply text-primary-blue font-semibold;
}

/* Buttons */
.primary-btn {
    @apply inline-block bg-primary-blue text-white font-semibold px-8 py-3 rounded-lg shadow-md hover:bg-primary-blue-dark transition-all duration-300 transform hover:scale-105;
}
.secondary-btn {
    @apply inline-block bg-white text-primary-blue font-semibold px-8 py-3 rounded-lg shadow-md hover:bg-blue-50 transition-all duration-300 transform hover:scale-105;
}
.contact-btn {
    @apply inline-block border-2 border-primary-blue text-primary-blue font-semibold px-6 py-2 rounded-lg hover:bg-primary-blue hover:text-white transition-colors duration-300;
}

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

.icon-wrapper {
    @apply w-16 h-16 bg-primary-blue-light text-primary-blue rounded-full flex items-center justify-center mx-auto;
}

.learn-more-link {
    @apply mt-6 inline-flex items-center font-semibold text-primary-blue hover:text-primary-blue-dark transition-colors duration-300;
}

.stat-item {
    @apply bg-white p-6 rounded-lg shadow-md flex flex-col justify-center items-center relative;
}

.stat-number {
    @apply text-4xl md:text-5xl font-bold text-primary-blue;
}
.stat-number-text {
     @apply text-4xl md:text-5xl font-bold text-primary-blue;
}
.stat-unit {
    @apply text-2xl font-bold text-primary-blue absolute top-6 right-6;
}

.stat-label {
    @apply mt-2 text-sm md:text-base text-gray-600;
}

/* Services Page */
.service-list-item {
    @apply flex flex-col md:flex-row items-center bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-xl hover:bg-white transition-all duration-300 transform hover:-translate-y-1 cursor-pointer group;
}

/* Service Detail Page */
.service-detail-page h2 {
    @apply text-3xl font-bold text-gray-900 border-l-4 border-primary-blue pl-4 mb-6;
}

.service-content-section {
    @apply mb-12;
}

.feature-list {
    @apply list-none pl-0 grid sm:grid-cols-2 gap-x-6 gap-y-4;
}
.feature-list li {
    @apply flex items-center text-lg;
}
.feature-list i {
    @apply w-6 h-6 text-primary-blue mr-3 flex-shrink-0;
}

.impact-item {
    @apply flex items-start;
}
.impact-icon {
    @apply w-10 h-10 text-primary-blue mr-4 mt-1 flex-shrink-0;
}
.use-case-card {
    @apply bg-blue-50 text-blue-800 p-4 rounded-lg text-center font-medium;
}

/* Contact Page */
.contact-info-item {
    @apply flex items-start text-lg text-gray-800 hover:text-primary-blue transition-colors duration-300 gap-4;
}
.form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
}
.form-input {
    @apply block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary-blue focus:border-primary-blue transition-all duration-200;
}

/* Mobile Menu */
.mobile-menu {
    @apply hidden absolute top-full left-0 w-full bg-white shadow-lg md:hidden;
}

.mobile-menu.open {
    @apply block;
}