/* Thazen Website Styles */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0a0a0a;
    color: #e5e5e5;
}

/* Hero Section */
.hero-gradient {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.97) 0%, rgba(0, 0, 0, 0.95) 100%),
                url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop') center/cover;
    position: relative;
    border-bottom: 1px solid rgba(30, 119, 189, 0.3);
}

.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(30, 119, 189, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(81, 166, 101, 0.1) 0%, transparent 50%);
    z-index: 0;
}

.hero-gradient > * {
    position: relative;
    z-index: 1;
}

/* Navigation */
.nav-blur {
    background-color: #0a0a0a;
    border-bottom: 1px solid rgba(30, 119, 189, 0.2);
}

/* Card Hover Effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Section Divider */
.section-divider {
    position: relative;
    overflow: hidden;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    right: -10%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(30, 119, 189, 0.1), transparent);
    transform: skewY(-2deg);
}

/* Animations */
.animate-fade-in {
    animation: fadeIn 0.8s ease-in;
}

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

/* Tech Pattern Background */
.tech-pattern {
    background-color: #0f0f0f;
    background-image:
        linear-gradient(rgba(30, 119, 189, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 119, 189, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* Service Icon Background */
.service-icon-bg {
    background: linear-gradient(135deg, rgba(30, 119, 189, 0.15), rgba(81, 166, 101, 0.15));
}

/* Dark Card Styles */
.dark-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    border: 1px solid rgba(30, 119, 189, 0.2);
}

.dark-card:hover {
    border-color: rgba(81, 166, 101, 0.5);
    box-shadow: 0 20px 40px rgba(30, 119, 189, 0.1);
}

/* CTA Section Background */
.cta-section-bg {
    background: linear-gradient(135deg, rgba(10, 10, 10, 0.97) 0%, rgba(0, 0, 0, 0.95) 100%),
                url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop') center/cover;
    position: relative;
    border-top: 1px solid rgba(30, 119, 189, 0.3);
    border-bottom: 1px solid rgba(30, 119, 189, 0.3);
}

.cta-section-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(30, 119, 189, 0.15) 0%, transparent 70%);
    z-index: 0;
}

.cta-section-bg > * {
    position: relative;
    z-index: 1;
}

/* Gradient Card Backgrounds */
.gradient-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gradient-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Service Card Styles (for services.html) */
.service-card {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
}

.service-card:hover {
    border-left-color: #51A665;
    transform: translateX(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}