/* الحاوية الرئيسية للقسمين */
.info-guarantees-section {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-md) * 4);
    direction: rtl;

    max-width: 1200px;
    margin-inline: auto;
    /* لتوسيط القسم في منتصف الشاشة */
    width: 100%;
}

@media (max-width: 1440px) {
    .info-guarantees-section {
        width: 95%;
    }
}

/* تنسيق العناوين الرئيسية باستخدام clamp */
.section-title {
    color: var(--clr-dark);
    font-size: clamp(calc(var(--space-md) * 1.5), 4vw, calc(var(--space-md) * 2.5));
    font-weight: 800;
    text-align: center;
}

/* =========================================
   قسم المستندات المطلوبة
   ========================================= */
.documents-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-md) * 2.5);
    padding: calc(var(--space-md) * 3) calc(var(--space-md) * 2);
    background-color: var(--clr-semi-light2);
    border: 1px solid var(--clr-semi-light);
    border-radius: var(--space-md);
}

/* شبكة المستندات (عمودين) */
.documents-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--space-md) * 2);
}

/* استجابة الشاشات الصغيرة للمستندات */

@media (max-width: 480px) {
    .documents-grid {
        grid-template-columns: 1fr;
    }

}

/* العمود الواحد داخل شبكة المستندات */
.docs-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* عنصر المستند الفردي (النص والأيقونة) */
.doc-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm);
    color: var(--clr-dark);
    font-size: calc(var(--space-md) * 0.9);
    font-weight: 600;
}

.doc-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--space-md) * 1.2);
    color: var(--clr-dark);
}

/* التذييل السفلي للمستندات */
.docs-footer {
    display: flex;
    justify-content: flex-end;
    color: var(--clr-text);
    font-size: calc(var(--space-md) * 0.75);
}

/* =========================================
   قسم ضماناتنا لك
   ========================================= */
.guarantees-container {
    display: flex;
    flex-direction: column;
    gap: calc(var(--space-md) * 2.5);

    max-width: 1200px;
    margin-inline: auto;
    /* لتوسيط القسم في منتصف الشاشة */
    width: 100%;
}

/* شبكة الضمانات (3 أعمدة كما في الصورة) */
.guarantees-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(var(--space-md) * 1.5);
}

/* استجابة الشاشات المتوسطة والصغيرة للضمانات */
@media (max-width: 992px) {
    .guarantees-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .guarantees-grid {
        grid-template-columns: 1fr;
    }

    .guarantees-container {
        width: 95%;
    }
}

/* بطاقة الضمان الفردية */
.guarantee-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: calc(var(--space-md) * 1.2);
    padding: calc(var(--space-md) * 2);
    background-color: var(--clr-light);
    /* استخدام لون مدمج لعمل إطار خفيف جداً يميل للون البرتقالي */
    border: 1px solid color-mix(in srgb, var(--clr-primary) 15%, var(--clr-semi-light));
    border-radius: var(--space-md);
}

/* أيقونة الضمان */
.guarantee-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-primary);
    font-size: calc(var(--space-md) * 2.5);
}

/* حاوية نصوص الضمان */
.guarantee-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.guarantee-title {
    color: var(--clr-dark);
    font-size: calc(var(--space-md) * 1.1);
    font-weight: 800;
}

.guarantee-desc {
    color: var(--clr-text);
    font-size: calc(var(--space-md) * 0.85);
}