/* ------------------ استایل‌های بخش معرفی (Hero) ------------------ */
        .hero-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1200px;
            margin: 60px auto;
            padding: 40px;
            background-color: #ffffff;
            border-radius: 24px;
            box-shadow: 0 10px 30px rgba(49, 27, 94, 0.06);
            gap: 50px;
        }

        /* ستون راست: متن و محتوا */
        .hero-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .hero-content h2 {
            font-size: 32px;
            color: #311b5e;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .hero-content p {
            font-size: 16px;
            color: #555;
            line-height: 1.8;
            margin-bottom: 30px;
            text-align: justify;
        }

        /* دکمه شروع آموزش */
        .start-learning-btn {
            background-color: #ffb703;
            color: #311b5e;
            padding: 14px 40px;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 6px 18px rgba(255, 183, 3, 0.3);
            margin-bottom: 40px;
        }

        .start-learning-btn:hover {
            background-color: #ffb703;
            transform: translateY(-3px);
            /* حرکت جزیی به بالا */
            box-shadow: 0 8px 22px rgba(255, 183, 3, 0.4);
        }

        /* آیکون‌های شبکه‌های اجتماعی */
        .social-media {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .social-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background-color: #f0edf6;
            fill: #311b5e;
            /* رنگ آیکون‌های SVG */
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            /* افکت حرکتی نرم و فنری */
        }

        /* افکت هوور اختصاصی برای هر شبکه اجتماعی */
        .social-icon.telegram:hover {
            background-color: #0088cc;
            fill: white;
            transform: translateY(-5px) scale(1.1);
        }

        .social-icon.instagram:hover {
            background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
            fill: white;
            transform: translateY(-5px) scale(1.1);
        }

        .social-icon.youtube:hover {
            background-color: #ff0000;
            fill: white;
            transform: translateY(-5px) scale(1.1);
        }
        /* ------------------ تنظیمات اختصاصی آیکون بله ------------------ */
        
        /* تبدیل عکس PNG به آیکون تغییر رنگ‌دهنده با استفاده از ماسک */
       /* ------------------ تنظیمات اختصاصی آیکون بله (حل مشکل تیک سفید) ------------------ */
        
        /* ------------------ تنظیمات اختصاصی آیکون بله (وکتور) ------------------ */
        
        .social-icon.bale:hover {
            background: linear-gradient(135deg, #2b326c, #3cd2a5); /* رنگ برند بله */
            fill: white; /* سفید شدن لوگو و تیک در زمان هاور */
            transform: translateY(-5px) scale(1.1); /* انیمیشن پرش هماهنگ با بقیه */
        }

        /* ستون چپ: باکس تصویر مربعی */
        .hero-image-box {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .hero-image-box img {
            width: 380px;
            height: 380px;
            /* ابعاد کاملا مربعی */
            object-fit: cover;
            border-radius: 20px;
            border: 6px solid #f0edf6;
            box-shadow: 0 15px 35px rgba(49, 27, 94, 0.12);
            transition: transform 0.4s ease;
        }

        /* زنده کردن تصویر با حرکت ماوس */
        .hero-image-box img:hover {
            transform: scale(1.02) rotate(-1deg);
        }



        /* =========================================
   تنظیمات ریسپانسیو برای بخش معرفی (Hero)
   ========================================= */

/* تبلت‌ها و لپ‌تاپ‌های کوچک (عرض کمتر از ۱۰۲۴ پیکسل) */
@media screen and (max-width: 1024px) {
    .hero-container {
        flex-direction: column; /* زیر هم قرار گرفتن محتوا و عکس */
        text-align: center; /* وسط‌چین کردن کل بخش */
        padding: 40px 30px;
        margin: 40px 20px;
        gap: 30px;
    }

    .hero-content {
        align-items: center; /* دکمه و شبکه‌های اجتماعی رو میاره وسط */
    }

    .hero-content p {
        text-align: center; /* متن از حالت راست‌چین درمیاد تا تو گوشی زیباتر بشه */
        margin-bottom: 25px;
    }

    .hero-image-box img {
        width: 320px;
        height: 320px;
    }
}

/* گوشی‌های موبایل (عرض کمتر از ۷۶۸ پیکسل) */
@media screen and (max-width: 768px) {
    .hero-container {
        margin: 20px 15px;
        padding: 25px 20px;
        border-radius: 16px; /* شعاع انحنای کمتر برای صفحه کوچیک */
    }

    .hero-content h2 {
        font-size: 24px; /* تیتر کوچکتر برای موبایل */
        margin-bottom: 15px;
    }

    .hero-content p {
        font-size: 14px; /* سایز فونت مناسب برای خواندن تو گوشی */
    }

    .start-learning-btn {
        padding: 12px 30px;
        font-size: 15px;
    }

    .hero-image-box img {
        width: 260px;
        height: 260px;
        border-width: 4px; /* ضخامت کمتر حاشیه عکس */
    }
}