/* General Body Styles */
        body {
            font-family: 'Vazirmatn', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        
        /* Gradient Background for CTA */
        .gradient-bg {
            background: linear-gradient(135deg, #1d202a 0%, #764ba2 100%);
        }
        .dark .gradient-bg {
            background: linear-gradient(135deg, #1e3a8a 0%, #581c87 100%);
        }
        
        /* Card Hover Effect */
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .dark .card-hover:hover {
            box-shadow: 0 10px 25px rgba(255,255,255,0.08);
        }
        
        /* Form Input Styles */
        .form-input {
            width: 100%;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
            background-color: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #1f2937; /* dark:text-gray-100 */
        }
        .dark .form-input {
            background-color: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.2);
            color: #f9fafb;
        }
        .form-input::placeholder {
            color: #6b7280; /* dark:placeholder-gray-400 */
        }
        .dark .form-input::placeholder {
            color: #9ca3af;
        }
        .form-input:focus {
            outline: none;
            ring: 2px;
            ring-color: #8b5cf6;
            border-color: transparent;
        }
        
        
        /* Keyframe Animations */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fadeInUp {
            animation: fadeInUp 0.6s ease-out forwards;
        }
        
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(-30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .animate-slideInRight {
            animation: slideInRight 0.7s ease-out forwards;
        }
        
        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }
        .animate-slideInLeft {
            animation: slideInLeft 0.7s ease-out forwards;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

          /* استایل‌های سفارشی برای انیمیشن و جلوه‌های بهتر */
        .modal { transition: opacity 0.3s ease, visibility 0.3s ease; }
        .modal-content { transition: transform 0.3s ease; }
        .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }


        /* استایل برای نظرات */
.comment {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: #f3f4f6; /* bg-gray-100 */
    border-radius: 0.5rem;
}

/* استایل برای پاسخ‌ها */
.comment.reply {
    margin-right: 1.5rem; /* indent برای پاسخ‌ها */
    background-color: #e5e7eb; /* bg-gray-200 برای تمایز */
    border-right: 3px solid #8b5cf6; /* خط بنفش برای پاسخ‌ها */
}

.comment.reply::before {
    content: "پاسخ به";
    display: inline-block;
    font-size: 0.8rem;
    color: #6b7280; /* text-gray-500 */
    margin-bottom: 0.5rem;
}

/* حالت تاریک */
.dark .comment {
    background-color: #374151; /* bg-gray-700 */
}

.dark .comment.reply {
    background-color: #4b5563; /* bg-gray-600 */
    border-right-color: #a78bfa; /* purple-400 */
}

.dark .comment.reply::before {
    color: #9ca3af; /* text-gray-400 */
}

/* استایل برای پیام‌های فرم */
#form-messages p {
    margin: 0;
    padding: 0.5rem;
    font-size: 0.9rem;
}

.portfolio-card {
  /* حالت پیش‌فرض را JS کنترل می‌کند؛ اینجا فقط تضمین smooth بودن */
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
    background-color: red;
}