.ajax-loading {
    position: relative;
}

    .ajax-loading::after {
        content: "";
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.7) url('/images/loader.gif') center center no-repeat;
        z-index: 999;
    }

    .ajax-loading.loading::after {
        display: block;
    }


/* site.css */

.page-section {
    opacity: 0; /* در ابتدا شفاف */
    transform: translateY(30px); /* کمی پایین‌تر از موقعیت نهایی */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* انیمیشن نرم */
    will-change: opacity, transform; /* بهینه‌سازی برای مرورگر */
   
}

    .page-section.visible {
        opacity: 1; /* کاملاً نمایان */
        transform: translateY(0); /* در موقعیت نهایی */
    }

/* برای سکشن اول که از ابتدا قابل مشاهده است، می‌توان کلاس visible را مستقیماً داد */
.fade-in-section.visible {
    animation: fadeIn 1s ease-out forwards;
}

    /* اگر می‌خواهید انیمیشن‌ها کمی تاخیر داشته باشند */
    .fade-in-section.visible.delay-1 {
        animation-delay: 0.2s;
    }

    .fade-in-section.visible.delay-2 {
        animation-delay: 0.4s;
    }

    .fade-in-section.visible.delay-3 {
        animation-delay: 0.6s;
    }


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* استایل‌های دیگر برای عناصر داخلی سکشن‌ها */
#hero-section {
    /* استایل‌های خاص سکشن اول */
    background-color: #f0f0f0;
    padding: 60px 20px;
    text-align: center;
}

#about-section {
    background-color: #ffffff;
    padding: 60px 20px;
}

#features-section {
    background-color: #f9f9f9;
    padding: 60px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.feature-item {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 250px;
    text-align: center;
}