/* =========================================
   1. تنظیمات کلی بدنه (Body)
   ========================================= */
body {
    padding-top: 130px !important; /* فاصله برای هدر ثابت */
    padding-bottom: 70px;          /* فاصله برای فوتر ثابت */
    margin: 0;
    font-family: 'B Nazanin', 'Yekan', Tahoma, sans-serif;
    background-color: #f4f4f4;
    direction: rtl; /* راست‌چین کلی */
}

/* =========================================
   2. هدر ثابت (Header)
   ========================================= */
.site-header {
    background-color: #001F3F; /* سرمه‌ای یکدست */
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
}

.header-inner {
    width: 95%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* بخش لوگو و عنوان */
.brand-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.brand-section img {
    height: 70px;
    width: auto;
    background: #fff;
    padding: 5px;
    border-radius: 8px;
}

.brand-section h1 {
    font-size: 1.8rem;
    color: #fff;
    margin: 0;
    font-weight: bold;
    white-space: nowrap;
}

/* استایل نام انگلیسی شرکت زیر لوگو */
.brand-titles {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-en {
    font-size: 0.95rem;
    color: #FFD700;
    margin: 5px 0 0 0;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 1.5px;
    font-weight: normal;
    direction: ltr; /* حل مشکل جابجا شدن نقطه */
    display: block; /* فرستادن قطعی متن به خط پایین */
}


/* منوی ناوبری */
.nav-links ul {
    list-style: none;
    display: flex;
    gap: 40px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: bold;
    padding-bottom: 5px;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

/* افکت هاور منو (طلایی شدن) */
.nav-links a:hover {
    color: #FFD700;
    border-bottom: 3px solid #FFD700;
    background-color: transparent;
}

/* =========================================
   3. بخش Hero (باکس آبی صفحه اصلی)
   ========================================= */
.hero {
    background-color: #001F3F;
    color: white;
    padding-top: 10px; 
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom-left-radius: 40px; 
    border-bottom-right-radius: 40px;
    min-height: 50vh;
    display: flex;
    align-items: flex-start !important; /* چسباندن محتوا به بالا */
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
    width: 90%;
    margin: auto;
}

.hero-text {
    flex: 2;
    text-align: justify;
    line-height: 2.2;
    font-size: 1.2rem;
}

.hero-text h1 {
    color: #FFD700;
    font-size: 2rem;
    margin-bottom: 20px;
    border-bottom: 1px solid #FFD700;
    display: inline-block;
}

.hero-image {
    flex: 1;
    text-align: center;
}

.hero-image img {
    max-width: 100%;
    border-radius: 15px;
    border: 4px solid rgba(255,255,255,0.2);
}

/* =========================================
   4. استایل صفحه لیست پروژه‌ها
   ========================================= */
.page-title {
    text-align: center;
    color: #001F3F;
    font-size: 2.2rem;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
}

.page-title::after {
    content: "";
    display: block;
    width: 500px; /* طول خط زیر عنوان */
    height: 4px;
    background-color: #FFD700;
    margin: 10px auto 0;
    border-radius: 2px;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding-bottom: 50px;
    width: 90%;
    margin: 0 auto;
}

/* استایل کارت‌های پروژه (جهت زیبایی بیشتر) */
.project-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    overflow: hidden;
    
}
.project-card:hover {
    transform: translateY(-5px);
     border-color: #ffbf00;      /* کمی تغییر رنگ هنگام هاور */
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4); /* سایه طلایی دور کادر */
}
.project-card a {
    text-decoration: none;
    color: inherit;
}
.card-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.card-content {
    padding: 15px;
    text-align: center;
}
.card-content h3 {
    color: #001F3F;
    margin: 0 0 10px 0;
}
.read-more {
    color: #FFD700;
    font-weight: bold;
}

/* =========================================
   5. استایل صفحه جزئیات پروژه (توضیحات)
   ========================================= */
.project-description {
    font-size: 1.6rem !important;   
    line-height: 2.4 !important;    
    text-align: justify;            
    color: #333;                    
    margin-top: 20px;
    margin-bottom: 40px;
    font-weight: 500;               
}

/* =========================================
   6. فوتر (Footer)
   ========================================= */
.site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: #001F3F;
    color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    z-index: 900;
    border-top: 2px solid #FFD700;
}

/* =========================================
   7. ریسپانسیو / موبایل (Mobile)
   ========================================= */
@media (max-width: 768px) {
    /* اصلاح فاصله بادی در موبایل */
    body {
        padding-top: 110px !important;
    }

    .brand-section h1 { font-size: 1.1rem; white-space: normal; }
    .brand-section img { height: 45px; }
    
    /* تنظیم منو در موبایل */
    .header-inner { flex-direction: column; gap: 10px; }
    .nav-links ul { gap: 15px; font-size: 0.9rem; justify-content: center; }
    .site-header { height: auto; padding: 10px 0; }
    
    /* تنظیم Hero در موبایل */
    .hero-container { flex-direction: column; text-align: center; }
    .hero-text { padding: 0 15px; }
    .page-title::after { width: 150px; }
}
/* --------------------------- */
/*      صفحه تماس با ما        */
/* --------------------------- */

.contact-page-wrapper {
    display: flex;
    justify-content: center;
    padding: 60px 20px; /* فاصله از بالا و پایین و کناره‌ها */
    background-color: #f4f4f4; /* رنگ پس‌زمینه ملایم کل صفحه */
    min-height: 80vh;
}

.contact-card {
    background: white;
    width: 100%;
    max-width: 1000px;
    padding: 50px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* سایه نرم */
    direction: rtl;
    border-top: 5px solid #FFD700; /* خط طلایی بالای کارت */
}

.contact-title {
    color: #001F3F;
    text-align: center;
    font-size: 2rem;
    margin-bottom: 10px;
    font-weight: bold;
}

.contact-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 50px;
    font-size: 1.1rem;
}

.contact-content {
    display: flex;
    gap: 50px;
    flex-wrap: wrap;
}

/* استایل بخش اطلاعات (راست) */
.contact-info {
    flex: 1;
    min-width: 300px;
    background-color: #001F3F; /* سرمه‌ای */
    color: white;
    padding: 30px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
}

.info-item:last-child {
    border-bottom: none;
}

.info-item .icon {
    font-size: 1.8rem;
    background: rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #FFD700;
}

.info-item strong {
    display: block;
    color: #FFD700;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.info-item p {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* استایل فرم (چپ) */
.contact-form-section {
    flex: 1.5;
    min-width: 300px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: bold;
    font-size: 1.1rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: 0.3s;
    background-color: #f9f9f9;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #001F3F;
    outline: none;
    background-color: white;
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background-color: #FFD700;
    color: #001F3F;
    font-size: 1.2rem;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
}

.submit-btn:hover {
    background-color: #e6c200;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

/* ریسپانسیو برای موبایل */
@media (max-width: 768px) {
    .contact-content {
        flex-direction: column;
    }
    .contact-card {
        padding: 20px;
    }
}
/* --------------------------- */
/*   استایل جدید صفحه درباره ما */
/* --------------------------- */

.about-page-wrapper {
    display: flex;
    justify-content: center;
    padding: 60px 20px;
    background-color: #f4f4f4; /* پس زمینه خاکستری روشن کل صفحه */
    min-height: 100vh;
}

.about-card {
    background: white;
    width: 100%;
    max-width: 1100px; /* عرض مناسب برای خوانایی */
    padding: 60px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    direction: rtl;
    border-top: 6px solid #001F3F; /* نوار سرمه‌ای بالای کارت */
}

/* هدر و تیتر اصلی */
.about-header {
    text-align: center;
    margin-bottom: 50px;
}

.main-title {
    color: #001F3F;
    font-size: 2.2rem;
    margin-bottom: 15px;
    font-weight: 800;
}

.title-underline {
    width: 350px;
    height: 4px;
    background-color: #FFD700;
    margin: 0 auto;
    border-radius: 2px;
}

/* استایل بخش‌ها */
.content-section {
    margin-bottom: 50px;
}

.content-section p {
    font-size: 1.2rem; /* فونت خواناتر */
    line-height: 2.2; /* فاصله خطوط بیشتر برای راحتی چشم */
    color: #444;
    text-align: justify;
    margin-bottom: 20px;
}

/* تیترهای داخلی (۱، ۲، ۳) */
.section-title {
    color: #001F3F;
    font-size: 1.6rem;
    margin-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title span {
    background-color: #FFD700;
    color: #001F3F;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: bold;
}

/* استایل خاص بخش خط مشی */
.policy-box {
    background-color: #f9fbfd; /* پس زمینه خیلی محو آبی */
    padding: 30px;
    border-radius: 10px;
    border-right: 4px solid #FFD700;
}

.custom-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.custom-list li {
    position: relative;
    padding-right: 30px;
    margin-bottom: 15px;
    font-size: 1.15rem;
    line-height: 1.8;
    color: #333;
}

.custom-list li::before {
    content: '✔'; /* تیک */
    position: absolute;
    right: 0;
    top: 5px;
    color: #FFD700; /* تیک طلایی */
    font-weight: bold;
    font-size: 1.2rem;
}

/* اصلاح گالری برای قرارگیری در کارت */
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.cert-grid img {
    width: 100%;
    height: 280px;
    object-fit: cover; /* پر کردن کادر */
    border: 2px solid #eee;
    border-radius: 8px;
    transition: transform 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.cert-grid img:hover {
    transform: scale(1.05);
    border-color: #FFD700;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* موبایل */
@media (max-width: 768px) {
    .about-card {
        padding: 25px;
    }
    .main-title {
        font-size: 1.6rem;
    }
    .cert-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* --------------------------- */
/*   صفحه نمایش تکی گواهینامه */
/* --------------------------- */

.cert-view-container {
    background-color: #001F3F; /* پس زمینه تیره برای تمرکز روی عکس */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

.cert-view-header {
    width: 100%;
    max-width: 1000px;
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end; /* دکمه سمت چپ قرار بگیرد */
}

.back-btn {
    background-color: #FFD700;
    color: #001F3F;
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    transition: 0.3s;
    display: inline-block;
}

.back-btn:hover {
    background-color: white;
    transform: translateX(-5px); /* حرکت انیمیشنی کوچک */
}

.cert-image-box {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    max-width: 90%;
}

.cert-image-box img {
    max-width: 100%;
    max-height: 80vh; /* ارتفاع عکس از صفحه بیرون نزند */
    display: block;
    object-fit: contain; /* عکس کامل دیده شود و برش نخورد */
}
/* استایل بخش ویدیو */
.video-container {
    text-align: center;
    margin: 40px 0 60px 0;
    display: flex;
    flex-direction: column; /* برای اینکه تیتر بالا و ویدیو پایین باشد */
    align-items: center;    /* وسط چین کردن */
}

.homepage-video {
    width: 50%;           /* عرض ۵۰ درصد */
    max-width: 600px;     
    border: 4px solid #FFD700; 
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .homepage-video {
        width: 90%; /* در موبایل بزرگتر شود */
    }
}
/* --------------------------------- */
/*    استایل مودال (پنجره بزرگنمایی)  */
/* --------------------------------- */
.modal {
    display: none; 
    position: fixed; 
    z-index: 99999 !important; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.96); /* پس‌زمینه تیره */
    justify-content: center;
    align-items: center;
    flex-direction: column;
    backdrop-filter: blur(5px);
}

.modal-content {
    max-width: 90%;
    max-height: 75vh;
    border: 4px solid #FFD700; /* کادر طلایی */
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(255, 215, 0, 0.3);
    object-fit: contain;
}

/* دکمه ضربدر بالا */
.close {
    position: absolute;
    top: 25px;
    right: 40px;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 100000;
}

.close:hover {
    color: #FFD700;
    transform: scale(1.1);
}

/* دکمه بستن پایین تصویر (شبیه پروژه‌ها) */
.modal-back-btn {
    margin-top: 20px;
    background-color: #001F3F; /* سرمه‌ای */
    color: #fff;
    border: 2px solid #FFD700; /* طلایی */
    padding: 10px 40px;
    font-size: 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    font-family: inherit; /* ارث‌بری فونت فارسی */
}

.modal-back-btn:hover {
    background-color: #FFD700;
    color: #001F3F;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

/* افکت هاور روی تصاویر کوچک گواهینامه */
.cert-img {
    cursor: pointer;
    transition: transform 0.3s ease;
    border: 2px solid #FFD700; /* کادر طلایی دور عکس کوچک */
    border-radius: 8px;
}

.cert-img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}
/* --------------------------- */
/*   استایل‌های منوی آبشاری    */
/* --------------------------- */

/* تنظیم آیتم لیست برای نگه داشتن زیرمنو */
li.dropdown {
    display: inline-block;
    position: relative;
}

/* دکمه اصلی منو */
li.dropdown .dropbtn {
    display: inline-block;
    color: white;
    text-decoration: none;
    cursor: pointer;
}

/* باکس محتوای زیرمنو (مخفی در حالت عادی) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9; /* پس‌زمینه سفید/طوسی روشن */
    min-width: 180px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10001; /* بالاتر از همه چیز */
    top: 100%; /* دقیقا زیر دکمه */
    right: -20px;  /* تنظیم موقعیت افقی */
    border-radius: 5px;
    overflow: hidden;
    text-align: right;
    border-top: 3px solid #FFD700; /* نوار طلایی بالای منو */
}

/* لینک‌های داخل زیرمنو */
.dropdown-content a {
    color: #333 !important; /* رنگ متن تیره */
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 1rem;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
}

/* حذف خط زیرین آخرین آیتم */
.dropdown-content a:last-child {
    border-bottom: none;
}

/* هاور روی لینک‌های زیرمنو */
.dropdown-content a:hover {
    background-color: #FFD700; /* رنگ طلایی هنگام هاور */
    color: #001F3F !important; /* متن سرمه‌ای */
    padding-right: 20px; /* حرکت جزئی به چپ برای زیبایی */
}

/* نمایش زیرمنو وقتی موس روی دکمه می‌رود */
li.dropdown:hover .dropdown-content {
    display: block;
}
/* --------------------------- */
/*   استایل‌های صفحه هیئت مدیره (نسخه نهایی عمودی)  */
/* --------------------------- */

.board-section {
    padding: 3px 20px;
    background-color: #f4f6f9;
    min-height: 80vh;
}

.board-container {
    max-width: 800px;
    margin: 0 auto;
}

.center-title {
    text-align: center;
    margin-bottom: 50px;
}

.center-title h1 {
    color: #003b3f;
    margin-bottom: 15px;
    font-size: 2.2rem;
}



/* چیدمان عمودی */
.board-grid.vertical-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* طراحی کارت */
.member-card {
    background: #ebeaee;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    text-align: center;
    width: 100%;
    max-width: 450px; /* کمی عریض‌تر برای جا شدن توضیحات */
    transition: transform 0.3s ease;
    border-bottom: 3px solid transparent;
}

.member-card:hover {
    transform: translateY(-5px);
    border-bottom: 3px solid #FFD700;
}

/* عکس */
.member-img-box {
    margin-bottom: 15px;
    display: flex;
    justify-content: center;
}

.avatar-placeholder {
    width: 120px;
    height: 120px;
    background-color: #eee;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    color: #fff;
    border: 4px solid #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.member-info h3 {
    margin: 10px 0 5px 0;
    font-size: 1.6rem;
    color: #0e0c0c;
    font-weight: bold;
}

.member-info .position {
    color: #e00d0d;
    font-size: 1rem;
    display: block;
    margin-bottom: 20px; /* فاصله بیشتر تا جزئیات */
    font-weight: bold;
}

/* --- استایل بخش جزئیات فردی (نسخه برجسته و زیبا) --- */
.member-details {
    border-top: 2px solid #f0f0f0; /* خط جداکننده محکم‌تر */
    padding-top: 20px;
    margin-top: 15px;
    text-align: right;
    width: 100%;
}

/* استایل هر سطر اطلاعات */
.member-details p {
    margin-bottom: 12px;
    color: #333; /* رنگ متن تیره‌تر برای خوانایی بهتر */
    font-size: 1.05rem; /* کمی بزرگتر */
    font-weight: 530; /* ضخامت متوسط */
    background-color: #f9fbfd; /* پس‌زمینه بسیار ملایم آبی-خاکستری */
    padding: 10px 15px; /* فضای داخلی برای زیبایی */
    border-radius: 8px; /* گوشه‌های گرد */
    border-right: 4px solid #001F3F; /* خط رنگی سمت راست برای تاکید */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03); /* سایه خیلی ریزی */
}

/* استایل عنوان‌ها (مثل مدرک تحصیلی:) */
.member-details strong {
    color: #eb9c09;
    font-weight: 800; /* کاملاً ضخیم */
    margin-left: 8px; /* فاصله از متن اصلی */
    font-size: 1.1rem;
}

/* استایل مخصوص وضعیت پروانه */
.license-status {
    background-color: #e6fffa !important; /* پس‌زمینه سبز خیلی روشن */
    border-right: 4px solid #00b894 !important; /* خط سبز سمت راست */
    color: #006b54 !important; /* متن سبز تیره */
    font-weight: 700 !important; /* ضخیم */
    margin-top: 15px; /* فاصله بیشتر از بالا */
}
/* --- استایل اصلاح شده برای تصاویر اعضا --- */

/* قاب دور عکس */
.member-img-box {
    width: 160px;           /* عرض ثابت و کوچک */
    height: 160px;          /* ارتفاع ثابت و برابر با عرض */
    margin: 0 auto 15px;    /* وسط‌چین کردن عکس و فاصله از پایین */
    border-radius: 15px;    /* گرد کردن گوشه‌های عکس */
    overflow: hidden;       /* مخفی کردن قسمت‌های اضافی عکس بزرگ */
    border: 3px solid #e0e0e0; /* یک حاشیه طوسی کمرنگ و شیک */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* سایه ملایم */
    background-color: #fff;
}

/* خود عکس */
.real-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* بسیار مهم: عکس را دفرمه نمی‌کند، بلکه فیت می‌کند */
    object-position: center; /* مرکز عکس را نشان می‌دهد */
    transition: transform 0.3s ease; /* انیمیشن نرم برای هاور */
}

/* افکت وقتی موس روی عکس می‌رود */
.member-card:hover .real-avatar {
    transform: scale(1.1); /* کمی زوم شدن عکس هنگام هاور */
}