/* حذف مارجین و پدینگ پیش‌فرض مرورگر و تنظیم box-sizing */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* تنظیمات کلی بدنه‌ی صفحه */
body {
    font-family: Arial, sans-serif; /* فونت ساده و خوانا */
    line-height: 1.6; /* افزایش فاصله‌ی بین خطوط */
    background-color: #f4f4f4; /* پس‌زمینه‌ی خاکستری روشن */
    color: #333; /* رنگ متن */
}

/* استایل هدر (نوار ناوبری) */
header {
    background: rgba(0, 0, 0, 0.8); /* پس‌زمینه‌ی مشکی نیمه‌شفاف */
    padding: 15px; /* ایجاد فضای داخلی */
    position: sticky; /* ثابت ماندن در بالای صفحه هنگام اسکرول */
    top: 0; /* چسباندن به بالا */
    width: 100%; /* عرض کامل */
    z-index: 1000; /* اطمینان از اینکه بالاتر از سایر بخش‌ها قرار می‌گیرد */
    box-shadow: 0 4px 10px rgba(85, 84, 84, 0.5); /* سایه‌ی زیبا */
}

/* استایل نام شما در نوار ناوبری */
header h1 {
    color: #ffffff; /* تغییر رنگ به سفید */
    padding: 5px 10px; /* فاصله‌ی داخلی */
}

/* تنظیمات نمایش آیتم‌های ناوبری */
header .nav {
    display: flex; /* نمایش به‌صورت افقی */
    justify-content: space-between; /* فاصله‌ی یکسان بین آیتم‌ها */
    align-items: center; /* هم‌تراز کردن آیتم‌ها */
    max-width: 1200px; /* محدود کردن عرض */
    margin: 0 auto; /* وسط‌چین کردن */
    padding: 0 20px; /* فضای داخلی کناره‌ها */
}

/* استایل لیست منو */
header ul {
    list-style: none; /* حذف نقاط لیست */
    display: flex; /* نمایش افقی */
}

/* فاصله بین آیتم‌های منو */
header ul li {
    margin-left: 20px;
}

/* استایل لینک‌های منو */
header ul li a {
    color: #fff; /* رنگ سفید */
    text-decoration: none; /* حذف خط زیر متن */
    padding: 8px 12px; /* افزایش فضای کلیک */
    transition: background 0.3s ease-in-out; /* ایجاد افکت تغییر رنگ */
}

/* افکت تغییر رنگ هنگام هاور روی لینک‌ها */
header ul li a:hover {
    background: rgba(255, 255, 255, 0.2); /* پس‌زمینه‌ی نیمه‌شفاف هنگام هاور */
    border-radius: 5px; /* گرد کردن گوشه‌ها */
}



.profile-pic {
    width: 150px; /* Adjust size */
    height: 150px; /* Make it a perfect circle */
    border-radius: 50%; /* Make it round */
    object-fit: cover; /* Ensure the image fits well */
    display: block; /* Align properly */
    margin: left auto 15px; /* Center the image and add space below */
    border: 3px solid #065158; /* Add a nice border */
}




/* بخش معرفی (Hero Section) */
/* تنظیمات کلی برای بخش hero */
.hero {
    display: flex; /* استفاده از Flexbox */
    justify-content: space-between; /* فاصله بین متن و کارت‌ها */
    align-items: flex-start; /* تراز عمودی به بالاترین نقطه */
    padding: 50px 20px; /* ایجاد فاصله داخلی */
    max-width: 1000px; /* محدود کردن عرض */
    margin: 0 auto; /* وسط‌چین کردن */
}

/* تنظیمات مربوط به متن */
.hero-text {
    max-width: 600px; /* محدود کردن عرض متن */
    text-align: left; /* چپ‌چین کردن متن */
}

/* تنظیمات مربوط به کارت‌ها */
.hero-cards {
    display: flex; /* استفاده از Flexbox */
    flex-direction: column; /* چیدمان کارت‌ها به‌صورت ستونی */
    gap: 20px; /* فاصله بین کارت‌ها */
}

/* استایل هر کارت */
.hero-card {
    background: #065158; /* رنگ پس‌زمینه‌ی کارت */
    padding: 15px 20px; /* ایجاد فاصله داخلی */
    border-radius: 8px; /* گرد کردن گوشه‌ها */
    width: 250px; /* عرض کارت */
    text-align: center; /* وسط‌چین کردن متن */
    color: white; /* رنگ متن */
    font-weight: bold;
    transition: 0.3s; /* افکت تغییر رنگ */
}
/* تغییر رنگ کارت هنگام هاور */
.hero-card:hover {
    background: #ffffff; /* رنگ تیره‌تر هنگام هاور */
}
.hero-card a {
    color: white; /* تغییر رنگ به سفید */
    text-decoration: none; /* حذف خط زیر لینک */
    display: block; /* کل کارت را قابل کلیک کردن می‌کند */
}
/* دکمه‌های داخل کارت */
.hero-card button {
    background-color: #ffffff00; /* دکمه سفید */
    border: none; /* بدون حاشیه */
    padding: 10px;
    cursor: pointer;
    font-size: 1rem;
}






/* افکت هاور روی دکمه‌ها */
.btn:hover {
    background-color: #ccc; /* خاکستری روشن هنگام هاور */
}

/* تنظیم فوتر */
footer {
    background: #333; /* پس‌زمینه‌ی تیره */
    color: #fff; /* متن سفید */
    text-align: center; /* وسط‌چین کردن */
    padding: 10px 0; /* فضای داخلی */
    position: fixed; /* چسباندن به پایین صفحه */
    bottom: 0; /* چسباندن دقیق */
    width: 100%; /* عرض کامل */
}


/* تنظیمات واکنش‌گرایی برای موبایل */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* چیدمان عمودی در صفحات کوچک */
        align-items: flex-start; /* چپ‌چین کردن */
    }

    .hero h2 {
        font-size: 2rem; /* کوچک‌تر کردن عنوان در موبایل */
    }

    .hero p {
        font-size: 1rem; /* کوچک‌تر کردن متن در موبایل */
    }

    header .nav {
        flex-direction: column; /* نمایش عمودی در صفحات کوچک */
        text-align: center;
    }

    header ul {
        flex-direction: column; /* لیست منو عمودی شود */
        padding-top: 10px;
    }

    header ul li {
        margin: 10px 0;
    }
}