/* @font-face برای تعریف فونت های محلی */

/* تعریف وزن Normal/Regular فونت */
@font-face {
    font-family: 'MyCustomFont'; /* نام دلخواه برای فونت شما */
    src: url('./fonts/Bavan-Bold.woff') format('woff'); /* مسیر صحیح به فایل فونت و نام فایل شما */
    font-weight: normal; /* یا 400 */
    font-style: normal;
    font-display: swap; /* برای بهبود تجربه بارگذاری فونت */
}

/* تعریف وزن Bold/Semibold فونت */
@font-face {
    font-family: 'MyCustomFont'; /* نام فونت باید یکسان باشد */
    src: url('./fonts/Bavan-Bold.woff') format('woff'); /* مسیر صحیح به فایل فونت پررنگ شما */
    font-weight: bold; /* یا 700 */
    font-style: normal;
    font-display: swap;
}

/* اگر وزن‌های دیگری از فونت دارید (مثلاً Light, Thin)، هر کدام را به همین صورت تعریف کنید */

@font-face {
    font-family: 'MyCustomFont';
    src: url('./fonts/Bavan-Thin.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* تنظیمات پایه */
body {
    margin: 0;
    font-family: 'MyCustomFont', sans-serif; /* استفاده از نام فونت تعریف شده */
    
    /* اضافه کردن عکس پس‌زمینه */
    background-image: url('Background.jpg'); /* مسیر به فایل عکس پس‌زمینه شما (اگر کنار Load.css است) */
    background-size: cover; /* عکس را به گونه‌ای تنظیم می‌کند که تمام صفحه را پوشش دهد */
    background-position: center center; /* عکس را در مرکز پس‌زمینه قرار می‌دهد */
    background-repeat: no-repeat; /* از تکرار عکس جلوگیری می‌کند */
    background-attachment: fixed; /* پس‌زمینه هنگام اسکرول ثابت می‌ماند (اختیاری) */

    color: #e0f2f1; /* رنگ متن اصلی برای خوانایی */
    display: flex;
    justify-content: center; /* محتویات را در مرکز افقی قرار می‌دهد */
    align-items: center; /* محتویات را در مرکز عمودی قرار می‌دهد */
    min-height: 100vh; /* حداقل ارتفاع صفحه به اندازه ارتفاع viewport */
    overflow: hidden; /* جلوگیری از اسکرول اضافی اگر محتوا از صفحه بیرون بزند */
}

/* کانتینر اصلی که شامل سه بخش چپ، وسط و راست است */
.container {
    display: flex; /* استفاده از فلکس‌باکس برای چیدمان افقی */
    flex-direction: row-reverse; /* این باعث می‌شود آیتم‌ها (left, center, right) از راست به چپ چیده شوند */
    justify-content: space-between; /* پخش شدن محتویات (بخش‌ها) در عرض با فاصله مساوی بین آنها */
    align-items: center; /* تراز عمودی آیتم‌ها در وسط کانتینر */
    width: 90%; /* عرض کلی کانتینر در صفحات بزرگ */
    max-width: 1200px; /* حداکثر عرض برای دسکتاپ‌های خیلی بزرگ */
    padding: 20px;
    box-sizing: border-box; /* padding را داخل width و height المنت حساب می‌کند */
}

/* بخش سمت چپ - شامل لوگو و متن DIAF */
.left-section {
    display: flex;
    flex-direction: column; /* لوگو و متن زیر هم قرار می‌گیرند */
    align-items: center; /* تراز افقی لوگو و متن در مرکز این بخش */
    padding-left: 50px; /* کمی فاصله از بخش مرکزی به سمت چپ */
    padding-right: 0; /* اطمینان از عدم وجود padding-right اضافی */
}

.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo {
    width: 150px; /* اندازه لوگو */
    height: auto; /* حفظ نسبت ابعاد */
    filter: brightness(1.2); /* کمی روشن‌تر کردن لوگو برای مطابقت با تصویر */
}

.logo-text {
    font-size: 2.2em; /* اندازه متن DIAF زیر لوگو */
    font-weight: 700; /* پررنگ‌تر */
    color: #a7ffeb; /* رنگ سبزآبی روشن برای متن DIAF */
    margin-top: 10px; /* فاصله از لوگو */
}

/* بخش میانی - متن‌های "تو راهیم..." و "دیاف" */
.center-section {
    flex-grow: 1; /* اجازه رشد به این بخش برای پر کردن فضای خالی و ایجاد فاصله */
    text-align: center; /* تراز متن در مرکز این بخش */
    padding-left: 20px; /* کمی فاصله از بخش راست */
    padding-right: 20px; /* کمی فاصله از بخش چپ */
}

.tagline {
    font-size: 2.8em; /* اندازه متن "تو راهیم..." */
    color: #e0f2f1; /* رنگ مشابه متن اصلی */
    margin-bottom: 30px; /* فاصله از متن "دیاف" */
    font-weight: 300; /* نازک‌تر */
}

.main-title {
    font-size: 8em; /* اندازه بزرگ برای "دیاف" */
    color: #a7ffeb; /* رنگ سبزآبی روشن برای "دیاف" */
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1; /* ارتفاع خط برای چسبیدن نزدیک‌تر متن‌ها به هم */
    font-weight: 700; /* پررنگ‌تر */
}

/* بخش سمت راست - اطلاعات تماس (Youtube, Mail, Website) */
.right-section {
    display: flex;
    flex-direction: column; /* آیتم‌ها زیر هم قرار می‌گیرند */
    align-items: flex-end; /* تراز آیتم‌ها به سمت راست */
    padding-right: 50px; /* کمی فاصله از بخش مرکزی به سمت راست */
    padding-left: 0; /* اطمینان از عدم وجود padding-left اضافی */
}

.contact-item {
    margin-bottom: 15px; /* فاصله بین آیتم‌های تماس */
    white-space: nowrap; /* جلوگیری از شکستن خط در آدرس‌ها */
}

.contact-item:last-child {
    margin-bottom: 0; /* آخرین آیتم فاصله پایینی نداشته باشد */
}

.label {
    font-size: 1.1em; /* اندازه متن "Youtube", "Mail", "Website" */
    color: #a7ffeb; /* رنگ سبزآبی روشن */
    font-weight: 700; /* پررنگ */
    margin-left: 10px; /* فاصله از value */
}

.value {
    font-size: 1.1em; /* اندازه متن آدرس‌ها/نام کاربری */
    color: #e0f2f1; /* رنگ اصلی متن */
    font-weight: 300; /* نازک تر */
}

/* استایل برای لینک‌های تماس (ایمیل، یوتیوب، وبسایت) */
.mail-link,
.youtube-link,
.website-link {
    text-decoration: none; /* حذف خط زیر لینک */
    color: inherit; /* رنگ متن را از عنصر والد (contact-item یا body) به ارث می‌برد */
}

.mail-link:hover,
.youtube-link:hover,
.website-link:hover {
    opacity: 0.8; /* کمی شفافیت برای نمایش قابل کلیک بودن هنگام هاور */
}


/* واکنش‌گرایی (Responsive Design) برای صفحات کوچکتر (موبایل و تبلت) */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* آیتم‌ها (بخش‌ها) زیر هم قرار بگیرند */
        text-align: center; /* تراز متن در مرکز */
        padding: 20px; /* پدینگ کلی کمتر شود */
    }

    .left-section, .center-section, .right-section {
        padding: 0; /* حذف padding اضافی برای بهتر جا شدن */
        margin-bottom: 40px; /* ایجاد فاصله بین بخش‌ها در حالت عمودی */
    }

    .left-section {
        order: 1; /* ترتیب نمایش: لوگو و متن DIAF ابتدا */
        align-items: center; /* تراز در مرکز برای موبایل */
    }

    .center-section {
        order: 2; /* "تو راهیم..." و "دیاف" بعد از لوگو */
    }

    .right-section {
        order: 3; /* اطلاعات تماس آخر */
        align-items: center; /* تراز در مرکز برای موبایل */
    }

    .logo {
        width: 100px; /* کوچکتر کردن لوگو در موبایل */
    }

    .logo-text {
        font-size: 1.8em;
    }

    .tagline {
        font-size: 2em;
    }

    .main-title {
        font-size: 5em;
    }

    .contact-item {
        margin-bottom: 10px;
    }

    .label, .value {
        font-size: 1em;
    }
}

/* واکنش‌گرایی بیشتر برای موبایل‌های خیلی کوچک */
@media (max-width: 480px) {
    .main-title {
        font-size: 3.5em; /* باز هم کوچکتر برای موبایل‌های خیلی کوچک */
    }
    .tagline {
        font-size: 1.5em;
    }
}