* {
    box-sizing: border-box; /* <-- این خط برای ریسپانسیو حیاتی است */
}


body {
    direction: rtl;
    margin: 0; /* Added reset */
    background-color: #ffffff; /* from .bg-white */
    color: #111827; /* from .text-gray-900 */
}

:root {
    --autism-purple: #622d91;
    --auto-teal-start: #3DC1CE;
    --auto-teal-end: #098794;
}

.gradient-autism {
    background: linear-gradient(135deg, #622d91, #8b4cb8);
}

.gradient-auto {
    background: linear-gradient(135deg, #3DC1CE, #098794);
}

.gradient-hero {
    background: linear-gradient(135deg, #622d91 0%, #3DC1CE 100%);
}

.text-gradient-autism {
    background: linear-gradient(135deg, #622d91, #8b4cb8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-auto {
    background: linear-gradient(135deg, #3DC1CE, #098794);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* === Animations (From your <style> block) === */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.4s ease-out forwards;
}

html {
    scroll-behavior: smooth;
}

.header-blur {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* === Utility: Container (Recreated from Tailwind) === */
.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem; /* 16px */
    padding-right: 1rem; /* 16px */
}
/* Responsive container widths */
@media (min-width: 640px) { .container { max-width: 640px; } }
@media (min-width: 768px) { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1280px; } }
@media (min-width: 1536px) { .container { max-width: 1536px; } }

/* === Component: Main Header === */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid #e5e7eb; /* .border-b .border-gray-200 */
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* .gap-3 */
}

.header-brand-icon {
    width: 2.5rem; /* .w-10 */
    height: 2.5rem; /* .h-10 */
    border-radius: 9999px; /* .rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-brand-icon i {
    width: 1.25rem; /* .w-5 */
    height: 1.25rem; /* .h-5 */
    color: #ffffff; /* .text-white */
}

.header-brand-title {
    font-size: 1.125rem; /* .text-lg */
    line-height: 1.75rem;
    font-weight: 700; /* .font-bold */
}

.header-brand-subtitle {
    font-size: 0.75rem; /* .text-xs */
    line-height: 1rem;
    color: #4b5563; /* .text-gray-600 */
}

.header-nav {
    display: none; /* .hidden */
}
@media (min-width: 768px) {
    .header-nav {
        display: flex; /* .md:flex */
        align-items: center;
        gap: 1.5rem; /* .gap-6 */
    }
}

.header-nav-link {
    font-size: 0.875rem; /* .text-sm */
    line-height: 1.25rem;
    font-weight: 500; /* .font-medium */
    text-decoration: none;
    color: #111827;
    transition-property: color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.header-nav-link.link-auto:hover {
    color: #3DC1CE; /* .hover:text-[#3DC1CE] */
}
.header-nav-link.link-autism:hover {
    color: #622d91; /* .hover:text-[#622d91] */
}

/* === Component: Hero Section === */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 5rem; /* .pt-20 (80px) */
        margin-top: -117px;
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.1;
}

.hero-content-grid {
    padding-top: 5rem; /* .py-20 */
    padding-bottom: 5rem;
    display: grid;
    gap: 3rem; /* .gap-12 */
    align-items: center;
}
@media (min-width: 1024px) {
    .hero-content-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* .lg:grid-cols-2 */
    }
}

.hero-text-content {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* .space-y-8 */
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* .gap-2 */
    padding: 0.5rem 1rem; /* .px-4 .py-2 */
    border-radius: 9999px; /* .rounded-full */
    background-color: #f5f3ff; /* .bg-purple-50 */
    color: #5b21b6; /* .text-purple-900 (approx) */
    font-size: 0.875rem; /* .text-sm */
    font-weight: 500; /* .font-medium */
    width: fit-content;
}
.hero-badge i {
    width: 1rem; /* .w-4 */
    height: 1rem; /* .h-4 */
    color: #622d91; /* .text-[#622d91] */
}

.hero-headline {
    font-size: 2.25rem; /* .text-4xl */
    line-height: 1.25; /* .leading-tight */
    font-weight: 700; /* .font-bold */
}
@media (min-width: 768px) {
    .hero-headline {
        font-size: 3rem; /* .md:text-5xl */
    }
}
@media (min-width: 1024px) {
    .hero-headline {
        font-size: 3.75rem; /* .lg:text-6xl */
    }
}

.hero-description {
    font-size: 1.125rem; /* .text-lg */
    line-height: 1.75; /* .leading-relaxed */
    color: #4b5563; /* .text-gray-600 */
}
@media (min-width: 768px) {
    .hero-description {
        font-size: 1.25rem; /* .md:text-xl */
    }
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* .gap-4 */
}
@media (min-width: 640px) {
    .hero-buttons {
        flex-direction: row; /* .sm:flex-row */
    }
}

.hero-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* .gap-2 */
    padding: 0.75rem 1.5rem; /* .px-6 .py-3 */
    border-radius: 0.5rem; /* .rounded-lg */
    font-weight: 600; /* .font-semibold */
    text-decoration: none;
    transition-property: opacity, color, background-color;
    transition-duration: 150ms;
}
.hero-button i {
    width: 1rem; /* .w-4 */
    height: 1rem; /* .h-4 */
}

.hero-button-autism {
    color: #ffffff; /* .text-white */
    /* .gradient-autism is applied */
}
.hero-button-autism:hover {
    opacity: 0.9; /* .hover:opacity-90 */
}

.hero-button-auto {
    border: 2px solid #3DC1CE; /* .border-2 .border-[#3DC1CE] */
    color: #3DC1CE; /* .text-[#3DC1CE] */
}
.hero-button-auto:hover {
    background-color: #3DC1CE; /* .hover:bg-[#3DC1CE] */
    color: #ffffff; /* .hover:text-white */
}

.hero-image-wrapper {
    position: relative;
}
.hero-image-blur {
    position: absolute;
    inset: -1rem; /* .-inset-4 */
    opacity: 0.2; /* .opacity-20 */
    filter: blur(24px); /* .blur-3xl */
    border-radius: 1.5rem; /* .rounded-3xl */
}
.hero-image {
    position: relative;
    border-radius: 1.5rem; /* .rounded-3xl */
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* .shadow-2xl */
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* === Component: ZigZag Section === */
.zigzag-section {
    padding-top: 5rem; /* .py-20 */
    padding-bottom: 5rem;
    position: relative;
    overflow: hidden;
}

.zigzag-grid {
    display: grid;
    gap: 3rem; /* .gap-12 */
    align-items: center;
}
@media (min-width: 1024px) {
    .zigzag-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); /* .lg:grid-cols-2 */
    }
}

.zigzag-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* .space-y-6 */
}
@media (min-width: 1024px) {
    .zigzag-content.order-2 {
        order: 2; /* .lg:order-2 */
    }
}

.zigzag-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem; /* .gap-3 */
    padding: 0.75rem 1.25rem; /* .px-5 .py-3 */
    border-radius: 1rem; /* .rounded-2xl */
    color: #ffffff; /* .text-white */
    font-weight: 600; /* .font-semibold */
    font-size: 1.125rem; /* .text-lg */
    width: fit-content;
}
.zigzag-title-badge i {
    width: 1.25rem; /* .w-5 */
    height: 1.25rem; /* .h-5 */
}

.zigzag-text-content {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* .space-y-4 */
    color: #1f2937; /* .text-gray-800 */
    line-height: 1.75; /* .leading-relaxed */
    font-size: 1.125rem; /* .text-lg */
}
.zigzag-text-content p, 
.zigzag-text-content ul,
.zigzag-text-content blockquote {
    margin: 0;
}
.zigzag-text-content strong { font-weight: 700; }

.zigzag-link {
    font-size: 0.875rem; /* .text-sm */
}
.zigzag-link a {
    color: #622d91;
    font-weight: 600;
    text-decoration: none;
}
.zigzag-link a:hover {
    text-decoration: underline;
}

.zigzag-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* .space-y-2 */
    margin-right: 1.5rem; /* .mr-6 */
    padding-right: 0.5rem; /* Added for alignment */
    list-style-type: disc;
}

.zigzag-quote {
    border-right: 4px solid #3DC1CE; /* .border-r-4 .border-[#3DC1CE] */
    padding-right: 1rem; /* .pr-4 */
    font-style: italic;
    color: #4b5563; /* .text-gray-600 */
}

.zigzag-image-wrapper {
    position: relative;
}
@media (min-width: 1024px) {
    .zigzag-image-wrapper.order-1 {
        order: 1; /* .lg:order-1 */
    }
}

.zigzag-image-blur {
    position: absolute;
    inset: -1rem; /* .-inset-4 */
    opacity: 0.2; /* .opacity-20 */
    filter: blur(24px); /* .blur-3xl */
    border-radius: 1.5rem; /* .rounded-3xl */
}

.zigzag-image {
    position: relative;
    border-radius: 1.5rem; /* .rounded-3xl */
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* .shadow-2xl */
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* === Component: Partnership Section === */
.partnership-section {
    padding-top: 5rem; /* .py-20 */
    padding-bottom: 5rem;
    /* .bg-gradient-to-b .from-white .to-purple-50 */
    background-image: linear-gradient(to bottom, #ffffff, #f5f3ff);
}

.partnership-content {
    max-width: 56rem; /* .max-w-4xl */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2rem; /* .space-y-8 */
}

.partnership-title-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Added */
    gap: 0.75rem; /* .gap-3 */
    padding: 0.75rem 1.5rem; /* .px-6 .py-3 */
    border-radius: 1rem; /* .rounded-2xl */
    color: #ffffff; /* .text-white */
    font-weight: 600; /* .font-semibold */
    font-size: 1.25rem; /* .text-xl */
    width: fit-content; /* Added */
    margin: auto; /* Added */
}
.partnership-title-badge i {
    width: 1.5rem; /* .w-6 */
    height: 1.5rem; /* .h-6 */
}

.partnership-text {
        font-size: 1.125rem;
    line-height: 30px;
    margin-bottom: 20px;
}
.partnership-text strong { font-weight: 700; }
.partnership-text .highlight { color: #622d91; font-weight: 700; }

.partnership-subtext {
    font-size: 1rem; /* .text-base */
    color: #4b5563; /* .text-gray-600 */
    margin: 0;
}

.partnership-quote-wrapper {
    padding-top: 2rem; /* .pt-8 */
}

.partnership-quote {
    font-size: 1.5rem; /* .text-2xl */
    line-height: 1.75; /* .leading-relaxed */
    font-weight: 600; /* .font-semibold */
    margin: 0;
}

.partnership-quote-subtext {
    margin-top: 1.5rem; /* .mt-6 */
    font-size: 1.125rem; /* .text-lg */
    color: #4b5563; /* .text-gray-600 */
    margin: 0;
}
.partnership-quote-subtext strong {
    color: #111827; /* .text-gray-900 */
    font-weight: 700;
}

/* === Component: Main Footer === */
.main-footer {
    background-color: #f5f3ff; /* .bg-purple-50 */
    border-top: 1px solid #ede9fe; /* .border-purple-100 */
    padding-top: 3rem; /* .py-12 */
    padding-bottom: 3rem;
}

.footer-grid {
    display: grid;
    gap: 2rem; /* .gap-8 */
    margin-bottom: 2rem; /* .mb-8 */
}
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)); /* .md:grid-cols-3 */
    }
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* .space-y-4 */
        align-items: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* .gap-2 */
}

.footer-brand-icon {
    width: 2rem; /* .w-8 */
    height: 2rem; /* .h-8 */
    border-radius: 9999px; /* .rounded-full */
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-brand-icon i {
    width: 1rem; /* .w-4 */
    height: 1rem; /* .h-4 */
    color: #ffffff; /* .text-white */
}

.footer-title {
    font-weight: 700; /* .font-bold */
    font-size: 1.125rem; /* .text-lg */
    margin: 0;
}

.footer-description {
    font-size: 0.875rem; /* .text-sm */
    color: #4b5563; /* .text-gray-600 */
    line-height: 1.75; /* .leading-relaxed */
    margin: 0;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* .space-y-2 */
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* .gap-2 */
    font-size: 0.875rem; /* .text-sm */
    color: #4b5563; /* .text-gray-600 */
    text-decoration: none;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-link i {
    width: 1rem; /* .w-4 */
    height: 1rem; /* .h-4 */
}
.footer-link.link-auto:hover {
    color: #3DC1CE; /* .hover:text-[#3DC1CE] */
}
.footer-link.link-autism:hover {
    color: #622d91; /* .hover:text-[#622d91] */
}

.footer-bottom {
    padding-top: 2rem; /* .pt-8 */
    border-top: 1px solid #ddd6fe; /* .border-purple-200 */
    text-align: center;
}

.footer-bottom-quote {
    font-size: 0.875rem; /* .text-sm */
    color: #4b5563; /* .text-gray-600 */
    margin: 0;
}
.footer-bottom-quote span {
    color: #622d91;
    font-weight: 600; /* .font-semibold */
}

.footer-copyright {
    font-size: 0.75rem; /* .text-xs */
    color: #6b7280; /* .text-gray-500 */
    margin-top: 1rem; /* .mt-4 */
    margin-bottom: 0;
}


/* gw class */
.gw-box-fit img{
    margin: 0 auto;
    margin-top: 20px;
}

#footer{
    margin-top: 0 !important;

}

/* === استایل نهایی اسلایدر (افکت Slide) === */

/* 1. کانتینر والد (فقط برای افکت blur) */
.zigzag-image-wrapper {
    position: relative;
    /* تمام استایل‌های overflow، shadow و radius از اینجا پاک شد */
}

/* 2. خود اسلایدر (جایگزین .zigzag-image) */
.zigzag-image-slider.my-cards-slider {
    position: relative; /* ضروری برای فلش‌ها و نقطه‌ها */
    width: 100%;
    aspect-ratio: 600 / 400; /* حفظ نسبت تصویر */
    
    /* * استایل‌های اصلی .zigzag-image را به خود اسلایدر می‌دهیم
    */
    border-radius: 1.5rem; /* .rounded-3xl */
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); /* .shadow-2xl */
    
    /* * این خط جادویی، هم اسلایدها و هم فلش‌ها را 
     * درون کادر گرد نگه می‌دارد و همه‌چیز را ریسپانسیو می‌کند.
    */
    overflow: hidden; 
}

/* 3. خود اسلایدها */
.zigzag-image-slider .swiper-slide {
    /* * اسلایدها دیگر نیازی به استایل خاصی (مثل سایه یا گوشه گرد) ندارند
     * چون کانتینر اصلی آن‌ها را مدیریت می‌کند.
    */
    box-shadow: none;
    border-radius: 0;
}

/* 4. استایل فلش‌های ناوبری (سفید با پس‌زمینه بنفش) */
.zigzag-image-slider .swiper-button-next,
.zigzag-image-slider .swiper-button-prev {
    color: var(--autism-purple, #622d91);
    background-color: rgba(255, 255, 255, 0.7); /* پس‌زمینه نیمه‌شفاف */
    
    width: 36px;
    height: 36px;
    border-radius: 9999px; /* گرد کامل */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    
    top: 50%; /* وسط‌چین عمودی */
    transform: translateY(-50%);
}

/* تنظیم اندازه آیکون داخل فلش‌ها */
.zigzag-image-slider .swiper-button-next::after,
.zigzag-image-slider .swiper-button-prev::after {
    font-size: 1rem; /* 16px */
    font-weight: 900;
}

/* 5. استایل نقطه‌های صفحه‌بندی (پایین اسلایدر) */
.zigzag-image-slider .swiper-pagination {
    position: absolute;
    bottom: 10px; /* فاصله از پایین */
}
.zigzag-image-slider .swiper-pagination-bullet {
    background-color: #ffffff; /* رنگ نقطه غیرفعال */
    opacity: 0.7;
    width: 10px;
    height: 10px;
}
.zigzag-image-slider .swiper-pagination-bullet-active {
    background-color: var(--autism-purple, #622d91); /* رنگ نقطه فعال */
    opacity: 1;
}


/* === اصلاحات ریسپانسیو اسلایدر === */
@media (max-width: 640px) { /* نقطه شکست موبایل */

    /* 1. کوچک کردن فلش‌های ناوبری */
    .zigzag-image-slider .swiper-button-next,
    .zigzag-image-slider .swiper-button-prev {
        width: 30px;  /* کوچکتر از 36px */
        height: 30px; /* کوچکتر از 36px */
    }

    /* 2. کوچک کردن آیکون داخل فلش‌ها */
    .zigzag-image-slider .swiper-button-next::after,
    .zigzag-image-slider .swiper-button-prev::after {
        font-size: 0.875rem; /* 14px */
    }

    /* 3. کوچک کردن نقطه‌های صفحه‌بندی */
    .zigzag-image-slider .swiper-pagination-bullet {
        width: 8px; /* کوچکتر از 10px */
        height: 8px; /* کوچکتر از 10px */
    }

    /* 4. نزدیک‌تر کردن نقطه‌ها به لبه */
    .zigzag-image-slider .swiper-pagination {
        bottom: 8px; /* کوچکتر از 10px */
    }
}























































/* 2. خود اسلایدر (جایگزین .zigzag-image) */
.zigzag-image-slider.my-cards-slider {
    position: relative;
    width: 100%;
    height: 230px; /* ارتفاع ثابت برای موبایل */
    
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    overflow: hidden;
}

/* ارتفاع متناسب برای تبلت و دسکتاپ */
@media (min-width: 640px) {
    .zigzag-image-slider.my-cards-slider {
        height: 400px;
    }
}

@media (min-width: 1024px) {
    .zigzag-image-slider.my-cards-slider {
        height: 500px;
    }
}