/* فونت‌های سفارشی */
@font-face {
    font-family: 'B Titr Bold';
    src: url('./fonts/B Titr Bold_0.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'B Lotus';
    src: url('./fonts/B Lotus_0.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'B Lotus';
    src: url('./fonts/B Lotus Bold_0.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* تعریف رنگ‌های اصلی */
:root {
    --primary-color: #A6232C; /* قرمز زوترو برای هدر و فوتر */
    --secondary-color: #F28C38; /* نارنجی زوترو برای دکمه‌ها و لینک‌ها */
    --secondary-hover: #D97706; /* نارنجی تیره‌تر برای hover */
    --accent-color: #8B1E26; /* قرمز کم‌روشن برای عناوین و حاشیه‌ها */
    --accent-light: #FEE2E2; /* قرمز روشن برای حاشیه کارت‌ها */
}

/* استایل‌های پایه */
body {
    font-family: 'B Lotus', sans-serif;
    direction: rtl;
    text-align: right;
    font-size: 1.25rem; /* معادل 20px برای خوانایی بهتر */
    background-color: #FFF5F0; /* کرم مایل به قرمز-نارنجی لطیف برای تم زوترو */
}

/* استایل‌های راست به چپ برای لیست‌ها */
ol {
    direction: rtl;
}
ol > li {
    direction: rtl;
    text-align: right;
}
.list-inside {
    padding-right: 1.5rem;
    padding-left: 0;
}

/* استایل عنوان اصلی */
.custom-title-font {
    font-family: 'B Titr Bold', sans-serif;
    text-align: center;
    color: #FFFFFF; /* سفید برای کنتراست با هدر */
}

/* استایل عناوین */
h2 {
    font-family: 'B Lotus', sans-serif;
    font-weight: bold;
    color: var(--accent-color); /* قرمز کم‌روشن */
}

/* استایل پاراگراف‌ها و لینک‌ها */
p, li, a {
    font-family: 'B Lotus', sans-serif;
}
a {
    color: var(--secondary-color); /* نارنجی زوترو */
    transition: color 0.3s ease;
}
a:hover {
    color: var(--secondary-hover); /* نارنجی تیره‌تر */
}

/* استایل دکمه */
.bg-secondary {
    background-color: var(--secondary-color); /* نارنجی زوترو */
    color: #FFFFFF; /* سفید برای متن */
}
.bg-secondary:hover {
    background-color: var(--secondary-hover); /* نارنجی تیره‌تر */
    color: #FFFFFF; /* سفید برای متن در حالت hover */
}

/* افکت‌های کارت‌ها */
section {
    background-color: #FFF7F5; /* پس‌زمینه سفید مایل به قرمز */
    border: 1px solid var(--accent-light); /* حاشیه قرمز روشن */
}

/* استایل فوتر */
footer p {
    font-family: 'B Lotus', sans-serif;
    font-size: 1rem;
}

/* استایل هدر و فوتر */
.bg-primary {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color), var(--primary-color)); /* گرادیان قرمز-نارنجی */
}

/* استایل‌های اضافی برای خوانایی */
.font-semibold {
    font-weight: bold;
}