/* تنظیمات عمومی */
html{
    overflow-x: hidden;
}
body {
    background-color: #000000; /* پس زمینه مشکی */
    color: #ffffff; /* رنگ متن سفید برای کنتراست */
    font-family: Vazirmatn, sans-serif;/
    margin: 0;
    padding: 0;
    min-height: 100vh; /* حداقل ارتفاع تمام صفحه */
    display: flex;
    flex-direction: column; /* چیدمان ستونی برای هدر، محتوا و فوتر */
    align-items: center; /* تراز میانی در محور افقی */
    overflow-x: hidden;
}

/* بخش هدر (نام‌ها) */
.header-section {
    text-align: center;
    width: 100%;
}

.header-section h1 {
    margin-bottom: 5px;
    font-size: 3.5em; /* سایز بزرگتر برای h1 */
}

.header-section h2 {
    margin-top: 5px;
    font-size: 1.5em;
    color: #cccccc; /* رنگ کمی روشن‌تر برای h2 */
}

/* محتوای اصلی (شامل لوگو) */
.main-content {
    flex-grow: 1; /* این بخش بیشترین فضا را اشغال می‌کند */
    display: flex;
    justify-content: center; /* تراز میانی افقی برای لوگو */
    align-items: center; /* تراز میانی عمودی برای لوگو */
    width: 100%;
    padding: 20px;
}

/* ظرف لوگو */
.logo-container {
    /* می‌توانید اگر خواستید یک سایه یا border دور لوگو بگذارید */
}

/* تصویر لوگو (رسپانسیو) */
.logo-img {
    /* سایز اصلی تصویر */
    width: 360px;
    display: block;
    
    /* تنظیمات رسپانسیو */
    max-width: 100%; /* از عرض والد خود تجاوز نکند */
    height: auto; /* ارتفاع به صورت خودکار متناسب با عرض تنظیم شود تا تصویر دفرمه نشود */
    object-fit: contain; /* تضمین می‌کند که کل تصویر در کادر جای گیرد */
}

/* بخش فوتر (نمونه کارها) */
.portfolio-section {
    text-align: center;
    width: 100%;
    max-width: 600px; /* حداکثر عرض برای خوانایی بهتر لیست */
    margin-bottom: 20px;
}

.portfolio-section h3 {
    border-bottom: 1px solid #444444;
    padding-bottom: 10px;
}

.portfolio-list {
    list-style: none;
    padding: 0;
}

.portfolio-list li {
    margin: 10px 0;
    display: flex;
    justify-content: space-between; /* جدا کردن نام سایت و آدرس */
}

.portfolio-list a {
    color: #4CAF50; /* رنگ سبز برای لینک‌ها */
    text-decoration: none;
}

.portfolio-list a:hover {
    text-decoration: underline;
}

.site-name {
    font-weight: bold;
    margin-left: 10px;
}



.call{
    direction: ltr;
    padding-top: 30px;
}
.call a{
    color: orange;
    font-size: 14px;
}



/* برای نمایش بهتر در صفحات کوچک (مثل موبایل) */
@media (max-width: 600px) {
    .header-section h1 {
        font-size: 3em;
    }

    .header-section h2 {
        font-size: 1.2em;
    }

    .portfolio-list li {
        flex-direction: column; /* چیدمان ستونی در موبایل */
        align-items: flex-start;
        text-align: right;
    }
    
    .portfolio-list a {
        margin-top: 5px;
        word-break: break-all; /* شکستن کلمه طولانی مثل آدرس سایت */
    }
}