/* Enhanced service card styles */
.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before {
    left: 100%;
}

/* Enhanced text background overlay for better readability */
.text-bg-overlay {
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

.dark .text-bg-overlay {
    background: rgba(0, 0, 0, 0.6);
}

/* Service-specific button styles */
.btn-ui_ux {
    background: white;
    color: #3b82f6;
}

.btn-ui_ux:hover {
    background: #dbeafe;
}

.btn-web_dev {
    background: white;
    color: #ef4444;
}

.btn-web_dev:hover {
    background: #fee2e2;
}

.btn-app_dev {
    background: white;
    color: #22c55e;
}

.btn-app_dev:hover {
    background: #dcfce7;
}

.btn-branding {
    background: white;
    color: #a855f7;
}

.btn-branding:hover {
    background: #f3e8ff;
}

.btn-graphics {
    background: white;
    color: #ec4899;
}

.btn-graphics:hover {
    background: #fce7f3;
}

.btn-wordpress {
    background: white;
    color: #06b6d4;
}

.btn-wordpress:hover {
    background: #cffafe;
}

.btn-seo {
    background: white;
    color: #f59e0b;
}

.btn-seo:hover {
    background: #fef3c7;
}

/* Dark mode button styles */
.dark .btn-ui_ux {
    background: #1e293b;
    color: #60a5fa;
    border: 1px solid #334155;
}

.dark .btn-ui_ux:hover {
    background: #334155;
}

.dark .btn-web_dev {
    background: #1e293b;
    color: #f87171;
    border: 1px solid #334155;
}

.dark .btn-web_dev:hover {
    background: #334155;
}

.dark .btn-app_dev {
    background: #1e293b;
    color: #4ade80;
    border: 1px solid #334155;
}

.dark .btn-app_dev:hover {
    background: #334155;
}

.dark .btn-branding {
    background: #1e293b;
    color: #c084fc;
    border: 1px solid #334155;
}

.dark .btn-branding:hover {
    background: #334155;
}

.dark .btn-graphics {
    background: #1e293b;
    color: #f472b6;
    border: 1px solid #334155;
}

.dark .btn-graphics:hover {
    background: #334155;
}

.dark .btn-wordpress {
    background: #1e293b;
    color: #22d3ee;
    border: 1px solid #334155;
}

.dark .btn-wordpress:hover {
    background: #334155;
}

.dark .btn-seo {
    background: #1e293b;
    color: #fbbf24;
    border: 1px solid #334155;
}

.dark .btn-seo:hover {
    background: #334155;
}

/* Service card glow effects */
.service-card.ui_ux.active {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.service-card.web_dev.active {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
}

.service-card.app_dev.active {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

.service-card.branding.active {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

.service-card.graphics.active {
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.5);
}

.service-card.wordpress.active {
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5);
}

.service-card.seo.active {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}