.elementor-5832 .elementor-element.elementor-element-098a178{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5832 .elementor-element.elementor-element-2eb5db7 > .elementor-widget-container{margin:0px 0px 0px 0px;}:root{--page-title-display:none;}/* Start custom CSS */<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.0.0/Vazirmatn-font-face.css" rel="stylesheet" type="text/css" />
<style>
    .workshop-wrapper {
        --navy: #0a1128;
        --yellow: #fca311;
        --glass-bg: rgba(255, 255, 255, 0.05);
        --glass-border: rgba(255, 255, 255, 0.1);
        
        /* برای تنظیم بک‌گراند اختصاصی خود، آدرس عکس را در خط زیر وارد کنید */
        background-color: var(--navy);
        background-image: radial-gradient(circle at top right, #1a295c, transparent);
        
        color: #fff;
        min-height: 100vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        font-family: 'Vazirmatn', sans-serif;
        direction: rtl;
    }

    .workshop-wrapper * {
        box-sizing: border-box;
    }

    .workshop-catalog {
        width: 100%;
        max-width: 800px;
        background: var(--glass-bg);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        padding: 40px;
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
        animation: slideUp 0.8s ease-out;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .workshop-catalog .pre-title {
        color: var(--yellow);
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    .workshop-catalog h1 {
        font-size: 32px;
        margin-bottom: 20px;
        color: #fff;
    }

    .workshop-catalog .description {
        font-size: 15px;
        line-height: 1.8;
        color: #d1d5db;
        margin-bottom: 30px;
        text-align: justify;
    }

    .workshop-catalog .features-list {
        list-style: none;
        margin-bottom: 30px;
        padding: 0;
    }

    .workshop-catalog .features-list li {
        margin-bottom: 10px;
        padding-right: 20px;
        position: relative;
        color: #e5e7eb;
    }

    .workshop-catalog .features-list li::before {
        content: '•';
        color: var(--yellow);
        position: absolute;
        right: 0;
        font-size: 20px;
        line-height: 1;
    }

    .workshop-catalog .pricing {
        background: rgba(252, 163, 17, 0.1);
        border: 1px dashed var(--yellow);
        padding: 20px;
        border-radius: 12px;
        margin-bottom: 30px;
    }

    .workshop-catalog .pricing strong {
        color: var(--yellow);
        display: block;
        margin-bottom: 10px;
        font-size: 18px;
    }

    .workshop-catalog .actions {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        margin-top: auto;
    }

    .workshop-catalog button {
        flex: 1;
        padding: 24px 30px;
        border: none;
        border-radius: 12px;
        font-size: 22px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        font-family: inherit;
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .workshop-catalog button:active,
    .workshop-catalog button:focus {
        outline: none;
        box-shadow: 0 0 0 4px var(--yellow), 0 6px 15px rgba(0, 0, 0, 0.7);
        transform: scale(0.98);
    }

    .workshop-catalog .btn-primary {
        background-color: var(--yellow);
        color: var(--navy);
    }

    .workshop-catalog .btn-primary:hover {
        box-shadow: 0 0 15px var(--yellow), 0 6px 15px rgba(0, 0, 0, 0.7);
        transform: translateY(-2px);
    }

    .workshop-catalog .btn-secondary {
        background-color: transparent;
        color: #fff;
        border: 1px solid #fff;
    }

    .workshop-catalog .btn-secondary:hover {
        background-color: rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
    }

    /* Modal Styles */
    .workshop-modal {
        display: none;
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(10, 17, 40, 0.8);
        backdrop-filter: blur(8px);
        z-index: 9999;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s;
        font-family: 'Vazirmatn', sans-serif;
        direction: rtl;
    }

    .workshop-modal.active {
        display: flex;
        opacity: 1;
    }

    .workshop-modal-content {
        background: var(--navy);
        border: 1px solid var(--yellow);
        padding: 30px;
        border-radius: 15px;
        width: 90%;
        max-width: 400px;
        text-align: center;
        position: relative;
        transform: translateY(20px);
        transition: transform 0.3s;
        color: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    }

    .workshop-modal.active .workshop-modal-content {
        transform: translateY(0);
    }

    .workshop-close-btn {
        position: absolute;
        top: 15px;
        left: 15px;
        background: none;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
        padding: 0;
    }

    .workshop-modal-content p {
        margin-bottom: 15px;
        font-size: 16px;
        line-height: 1.6;
    }

    .workshop-modal-content a {
        color: var(--yellow);
        text-decoration: none;
        font-weight: bold;
        font-size: 18px;
        display: inline-block;
        margin: 5px 0;
        direction: ltr;
    }

    @keyframes slideUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* تنظیمات رسپانسیو و حالت موبایل تمام‌صفحه */
    @media (max-width: 768px) {
        .workshop-wrapper {
            padding: 0; /* حذف فاصله از لبه‌ها در موبایل */
        }
        
        .workshop-catalog {
            min-height: 100vh; /* گرفتن کل ارتفاع صفحه در موبایل */
            border-radius: 0; /* حذف گردی گوشه‌ها برای حالت تمام‌صفحه */
            border-left: none;
            border-right: none;
            border-top: none;
            border-bottom: none;
            padding: 30px 20px;
        }

        .workshop-catalog h1 {
            font-size: 26px;
        }

        .workshop-catalog .description {
            font-size: 14px;
        }

        .workshop-catalog .actions { 
            flex-direction: column; 
        }
        
        .workshop-catalog button { 
            width: 100%; 
            padding: 18px 20px; /* تنظیم مجدد سایز دکمه برای جلوگیری از بیرون زدن */
            font-size: 20px;
        }
    }
</style>

<div class="workshop-wrapper">
    <div class="workshop-catalog">
        <p class="pre-title">بازیگری با حمیدرضا آذرنگ در مشهد</p>
        <h1>لذت دیگری شدن</h1>
        
        <p class="description">
            آموزش جامع بازیگری با حمیدرضا آذرنگ در مشهد. مباحث این دوره برای بازیگران تازه‌کار و همچنین افرادی که سابقه فعالیت تئاتری دارند مناسب است. پس از پایان جلسات، اجرای پایان دوره زیر نظر آقای آذرنگ روی صحنه خواهد رفت و بازیگران مستعد به پروژه‌های سینمایی و تئاتری معرفی خواهند شد. این دوره برای اولین بار در مشهد برگزار می‌شود.
        </p>

        <ul class="features-list">
            <li>20 ساعت آموزش تخصصی بازیگری</li>
            <li>اجرای پایان دوره</li>
            <li>معرفی هنرجویان برتر به پروژه‌های سینمایی</li>
            <li>ارائه مدرک پایان دوره</li>
        </ul>

        <div class="pricing">
            <strong>هزینه این دوره چقدر است؟</strong>
            <p>مبلغ دوره، 20 میلیون تومان است. شما می‌توانید نیمی از این مبلغ را هنگام ثبت‌نام و نیم دیگر را پیش از جلسه پایانی واریز نمایید.</p>
        </div>

        <div class="actions">
            <button class="btn-primary" onclick="openWorkshopModal('wsRegisterModal')">ثبت‌نام در دوره</button>
            <button class="btn-secondary" onclick="openWorkshopModal('wsConsultModal')">دریافت مشاوره</button>
        </div>
    </div>
</div>

<!-- Modal ثبت نام -->
<div class="workshop-modal" id="wsRegisterModal" onclick="closeWorkshopModal(event)">
    <div class="workshop-modal-content" onclick="event.stopPropagation()">
        <button class="workshop-close-btn" onclick="closeWorkshopModal('wsRegisterModal', true)">&times;</button>
        <p>برای ثبت‌نام به آیدی زیر در تلگرام پیام دهید:</p>
        <p>آیدی تلگرام:<br><a href="https://t.me/Tahorarohamifar" target="_blank">@Tahorarohamifar</a></p>
        <p>شماره تماس:<br><a href="tel:09016743750">09016743750</a></p>
    </div>
</div>

<!-- Modal مشاوره -->
<div class="workshop-modal" id="wsConsultModal" onclick="closeWorkshopModal(event)">
    <div class="workshop-modal-content" onclick="event.stopPropagation()">
        <button class="workshop-close-btn" onclick="closeWorkshopModal('wsConsultModal', true)">&times;</button>
        <p>به صورت 24/7 کنار شما هستیم<br>تا با خیال راحت در این دوره شرکت کنین.</p>
        <p>روابط عمومی:<br><a href="tel:09016743750">09016743750</a></p>
    </div>
</div>

<script>
    function openWorkshopModal(id) {
        document.getElementById(id).classList.add('active');
    }

    function closeWorkshopModal(e, isButton = false) {
        if (isButton) {
            document.getElementById(e).classList.remove('active');
        } else if (e.target.classList.contains('workshop-modal')) {
            e.target.classList.remove('active');
        }
    }
</script>/* End custom CSS */