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

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

.hidden {
    display: none;
}

.skeleton-card {
    background-color: #e5e7eb;
    border-radius: 1rem;
    height: 16rem;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}


.service-card { 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.service-card:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1); 
}

.nav-tab.active {
    background-color: #FBBF24;
    color: #1F2937;
    font-weight: 600;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Skeleton Loader for better perceived performance */
.skeleton-card::before {
    content: '';
    display: block;
    height: 12rem; /* 192px */
    background-color: #e5e7eb;
    border-radius: 0.75rem;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.skeleton-card::after {
    content: '';
    display: block;
    height: 1.5rem; /* 24px */
    width: 80%;
    margin-top: 1rem;
    background-color: #e5e7eb;
    border-radius: 0.5rem;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    50% {
        opacity: .5;
    }
}