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

body {
    font-family: 'Vazirmatn', sans-serif;
    margin: 0;
    padding: 0;
    direction: rtl;
}

.font-vazir {
    font-family: 'Vazirmatn', sans-serif;
}

/* Navbar Styles */
custom-navbar {
    display: block;
}

/* Footer Styles */
custom-footer {
    display: block;
}
/* Hero Section */
#hero {
    background: linear-gradient(135deg, #1e40af 0%, #3730a3 100%);
}

/* Animations */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

@keyframes fade-in-down {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

.animation-delay-1000 {
    animation-delay: 1s;
}

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

.animate-slide-in-left {
    animation: slide-in-left 1s ease-out;
}

.animate-slide-in-right {
    animation: slide-in-right 1s ease-out;
}

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

/* Services Section */
#services {
    background-color: #f9fafb;
}

/* Contact Section */
#contact {
    background-color: #f9fafb;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    #hero {
        padding: 3rem 0;
    }
    
    .grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    .grid-cols-1.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Form Styles */
#contactForm input,
#contactForm select,
#contactForm textarea {
    transition: all 0.3s ease;
}

#contactForm input:focus,
#contactForm select:focus,
#contactForm textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}