/* ==========================================================
   ۱. تنظیمات پایه و ایزوله سازی
   ========================================================== */
.pardis-about-main {
    font-family: inherit;
    background-color: #fcfcfc;
    color: #333;
    line-height: 1.8;
}

.pardis-about-main h1, .pardis-about-main h2, .pardis-about-main h3, .pardis-about-main p, .pardis-about-main ul {
    margin: 0 !important;
    padding: 0 !important;
}

.pardis-about-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================
   ۲. هدر (Hero Section) داینامیک
   ========================================================== */
.about-hero {
    width: 100%;
    height: 60vh;
    min-height: 400px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* افکت پارالاکس */
    position: relative;
    margin-bottom: -60px;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}

.about-badge {
    display: inline-block;
    background: rgba(204, 178, 0, 0.2);
    border: 1px solid #ccb200;
    color: #ccb200;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.about-title {
    color: #ffffff !important;
    font-size: 42px !important;
    font-weight: 900 !important;
    margin-bottom: 20px !important;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.about-subtitle {
    color: #e2e8f0 !important;
    font-size: 18px !important;
    max-width: 700px;
    margin: 0 auto !important;
    line-height: 1.8 !important;
}

/* ==========================================================
   ۳. چشم‌انداز و مأموریت
   ========================================================== */
.about-vm-section {
    display: flex;
    gap: 30px;
    position: relative;
    z-index: 10;
    margin-bottom: 80px;
}

.vm-card {
    flex: 1;
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border: 1px solid #e2e8f0;
    border-top: 5px solid #ccb200;
    transition: transform 0.3s ease;
}

.vm-card:hover { transform: translateY(-5px); }
.vm-icon { font-size: 40px; margin-bottom: 20px; }
.vm-card h2 { font-size: 24px !important; font-weight: 800 !important; color: #222 !important; margin-bottom: 20px !important; }
.vm-card h2 span { font-size: 14px; color: #ccb200; font-weight: normal; }
.vm-card p { color: #555 !important; text-align: justify; line-height: 2 !important; }

/* ==========================================================
   ۴. استایل عمومی سکشن‌ها
   ========================================================== */
.about-section { margin-bottom: 100px; }
.section-header-center { text-align: center; margin-bottom: 50px; }
.section-header-center h2 { font-size: 32px !important; font-weight: 900 !important; color: #111 !important; margin-bottom: 15px !important; }
.section-header-center p { color: #666 !important; font-size: 16px !important; }

.dark-section { background: #111111; padding: 80px 40px; box-shadow: 0 30px 60px rgba(0,0,0,0.1); }
.rounded-section { border-radius: 30px; }
.light-text h2 { color: #ffffff !important; }
.light-text p { color: #aaaaaa !important; }

/* ==========================================================
   ۵. ارزش‌های محوری (نسخه ۲ ستونه)
   ========================================================== */
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* تغییر به ۲ ستون */
    gap: 30px;
}

.value-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    padding: 35px 30px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.value-card:hover { border-color: #ccb200; box-shadow: 0 10px 25px rgba(204, 178, 0, 0.1); }
.value-number { font-size: 48px; font-weight: 900; color: rgba(204, 178, 0, 0.2); margin-bottom: 15px; line-height: 1; }
.value-card h3 { font-size: 20px !important; font-weight: 800 !important; color: #222 !important; margin-bottom: 15px !important; }
.value-card p { font-size: 15px !important; color: #666 !important; text-align: justify; line-height: 1.9 !important; }

/* ==========================================================
   ۶. زنجیره ارزش کامل (Timeline)
   ========================================================== */
.chain-timeline { position: relative; max-width: 800px; margin: 0 auto; }
.chain-timeline::before { content: ''; position: absolute; top: 0; bottom: 0; right: 24px; width: 2px; background: rgba(204, 178, 0, 0.3); }
.timeline-item { position: relative; padding-right: 70px; margin-bottom: 40px; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-dot { position: absolute; top: 0; right: 0; width: 50px; height: 50px; background: #ccb200; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 20px; box-shadow: 0 0 0 6px #111111; z-index: 2; }
.timeline-content { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 25px; border-radius: 16px; transition: 0.3s; }
.timeline-item:hover .timeline-content { background: rgba(204, 178, 0, 0.1); border-color: rgba(204, 178, 0, 0.3); }
.timeline-content h3 { color: #ffffff !important; font-size: 20px !important; margin-bottom: 10px !important; }
.timeline-content .highlight-text { color: #ccb200 !important; }
.timeline-content p { color: #d1d1d1 !important; font-size: 15px !important; }

/* ==========================================================
   ۷. شفافیت در سرمایه‌پذیری
   ========================================================== */
.transparency-box { display: flex; background: #ffffff; border-radius: 24px; overflow: hidden; border: 1px solid #e2e8f0; box-shadow: 0 20px 50px rgba(0,0,0,0.05); }
.transparency-text { flex: 1.5; padding: 50px; }
.transparency-text h2 { font-size: 32px !important; font-weight: 900 !important; color: #111 !important; margin-bottom: 20px !important; }
.transparency-text .lead { font-size: 18px !important; color: #ccb200 !important; font-weight: bold; margin-bottom: 30px !important; }
.transparency-list { list-style: none !important; }
.transparency-list li { position: relative; padding-right: 30px !important; margin-bottom: 20px !important; color: #555 !important; font-size: 15px !important; text-align: justify; }
.transparency-list li::before { content: '✔'; position: absolute; right: 0; top: 2px; color: #ccb200; font-weight: bold; font-size: 18px; }
.transparency-list li strong { color: #222; }
.transparency-image { flex: 1; }
.transparency-image img { width: 100%; height: 100%; object-fit: cover; min-height: 400px; }

/* ==========================================================
   ۸. واکنش‌گرایی (Mobile)
   ========================================================== */
@media (max-width: 992px) {
    .transparency-box { flex-direction: column; }
    .transparency-image { height: 350px; }
}

@media (max-width: 768px) {
    .about-hero { margin-bottom: 30px; }
    .about-title { font-size: 32px !important; }
    .about-vm-section { flex-direction: column; }
    .values-grid { grid-template-columns: 1fr; } /* در موبایل ۱ ستونه می‌شود */
    .dark-section { padding: 40px 20px; }
    .transparency-text { padding: 30px 20px; }
}