:root { --primary-gold: #c9ad60; --bg-color: #f7f3ec; --card-bg: #ffffff; --text-dark: #2c2c2c; --text-muted: #666666; --border-color: #e8dfd1; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: inherit; } body { background-color: var(--bg-color); color: var(--text-dark); line-height: 1.8; background-image: radial-gradient(#e6dac7 1px, transparent 1px); background-size: 25px 25px; } .about-container { max-width: 900px; margin: 0 auto; background: var(--card-bg); border-radius: 24px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06); overflow: hidden; border: 1px solid var(--border-color); } .about-header { text-align: center !important; align-items: center !important; padding: 50px 30px 40px; background: linear-gradient(180deg, #fdfbf7 0%, #ffffff 100%); border-bottom: 2px solid var(--border-color); } .about-header h1 { text-align: center !important; font-size: 32px; color: var(--primary-gold); margin-bottom: 10px; font-weight: 800; } .about-header h2 { text-align: center !important; font-size: 18px; color: var(--text-muted); font-weight: 500; margin-bottom: 25px; } .tagline-box { display: inline-block; padding: 12px 30px; background-color: var(--bg-color); border: 1px dashed var(--primary-gold); border-radius: 50px; color: var(--text-dark); font-weight: 600; font-size: 15px; } /* محتوای اصلی */ .about-content { padding: 40px; } .intro-text { font-size: 16px; color: var(--text-dark); margin-bottom: 25px; text-align: justify; } .intro-text strong { color: var(--primary-gold); } .section-title { font-size: 22px; color: var(--text-dark); margin: 40px 0 20px; position: relative; padding-right: 15px; } .section-title::before { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 24px; background-color: var(--primary-gold); border-radius: 5px; } /* کارت‌های استاندارد */ .pillars-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 25px; } .pillar-card { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 16px; padding: 25px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .pillar-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(201, 173, 96, 0.15); border-color: var(--primary-gold); } .pillar-title { font-size: 17px; font-weight: 700; color: var(--text-dark); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .pillar-title span { display: inline-block; width: 10px; height: 10px; background-color: var(--primary-gold); border-radius: 50%; } .pillar-text { font-size: 14px; color: var(--text-muted); text-align: justify; } /* بخش چرا متفاوت است */ .differentiation { background: linear-gradient(90deg, #fdfbf7 0%, #f4eee1 100%); border-radius: 16px; padding: 30px; margin-top: 40px; border-right: 5px solid var(--primary-gold); } .differentiation p { font-size: 15px; color: var(--text-dark); text-align: justify; } /* بخش نقل قول مدیریت */ .ceo-quote { margin-top: 50px; padding: 40px; background-color: #2c2c2c; color: #ffffff; border-radius: 20px; position: relative; overflow: hidden; } .ceo-quote::before { content: "”"; position: absolute; top: -10px; right: 20px; font-size: 150px; color: rgba(201, 173, 96, 0.2); font-family: serif; line-height: 1; } .quote-text { font-size: 16px; line-height: 2; text-align: justify; font-style: italic; position: relative; z-index: 1; margin-bottom: 20px; } .quote-author { font-size: 15px; font-weight: 700; color: var(--primary-gold); text-align: left; } /* دکمه بازگشت */ .back-action { text-align: center; margin-top: 40px; } .btn-back { display: inline-block; padding: 14px 40px; background-color: var(--primary-gold); color: #fff; text-decoration: none; border-radius: 50px; font-weight: 700; transition: background 0.3s; } .btn-back:hover { background-color: #b08a3a; } /* واکنش‌گرایی برای موبایل */ @media (max-width: 768px) { .about-content { padding: 25px 20px; } .about-header h1 { font-size: 26px; } .tagline-box { font-size: 13px; padding: 10px 20px; } .ceo-quote { padding: 30px 20px; } .section-title { font-size: 19px; } }