/* استایل بخش اصلی */
.main-section {
    padding: 20px 0; /* فاصله از بالا و پایین بخش اصلی */
    background-color: #f9f9f9; /* رنگ پس‌زمینه ملایم (قابل تغییر) */
    font-family: "tanha", sans-serif;
}

/* کانتینر باکس‌ها */
.boxes-container {
    display: flex;
    justify-content: center; /* وسط‌چین کردن باکس‌ها در محور افقی */
    gap: 50px; /* فاصله بین باکس‌ها */
    max-width: 1200px; /* حداکثر عرض بخش */
    margin: 0 auto; /* وسط‌چین شدن در صفحه */
    flex-wrap: wrap; /* در صورت کم بودن عرض صفحه، باکس‌ها به خط بعد می‌روند */
}

/* هر باکس اطلاعات */
.info-box {
    background-color: #f3e1e1;
    border-radius: 8px; /* گرد کردن گوشه‌ها */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* سایه سبک */
    width: 350px; /* عرض ثابت برای هر باکس */
    padding: 20px;
    text-align: center; /* متن‌ها وسط‌چین شوند */
}

/* تیتر باکس */
.info-box h3 {
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: #333;
    font-weight: bold;
}

/* تصویر داخل باکس */
.info-box img {
    max-width: 300px;
    height: 250px;
    margin-bottom: 10px;
    border-radius: 4px; /* دلخواه */

}

/* متن توضیحات باکس */
.info-box p {
    font-size: 1rem;
    color: #000000;
    line-height: 1.5;
}

.otp-result {
    color: red;
    font-size: 0.8rem;
    display: inline-block; /* یا inline */
    margin-right: 10px; /* فاصله اندکی از دکمه */
    vertical-align: middle; /* برای تراز عمودی مناسب */
}

@media (max-width: 768px) {
    .boxes-container {
        display: flex;
        flex-direction: column; /* قرار دادن باکس‌ها به صورت عمودی */
        gap: 20px;            /* کاهش فاصله بین باکس‌ها */
        align-items: center;   /* وسط‌چین کردن باکس‌ها */
        justify-content: center;
    }

    .info-box {
        width: 100%;         /* عرض بیشتر نسبت به دسکتاپ */
        max-width: 400px;    /* می‌توانید این مقدار را برای بزرگ‌تر شدن باکس‌ها تغییر دهید */
        margin: 0 auto;     /* مرکز قرار گرفتن در صفحه */
        padding: 20px;      /* در صورت نیاز مقدار padding را هم افزایش دهید */
    }

    .info-box img {
        max-width: 100%;    /* افزایش عرض تصویر نسبت به باکس */
        height: auto;       /* حفظ نسبت تصویر */
    }
}