@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

:root {
    --sec-main-color: #607eff;
    --dark-blue: #1a2844;
}

* {
    font-family: unset;
}

@media (max-width: 767.98px) {
    .section-padding {
        padding: 50px 0;
    }
}

body {
    font-family: 'El Messiri', sans-serif !important;
}

.navbar {
    top: 0;
    background-color: #0000003e;
}

/* General Typography Matching the Design */
.new-hero-section {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Precise Dark Tint and Gradient Overlay */
.hero-overlay {
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(180deg, rgba(23, 34, 51, 0.9) 0%, rgba(0, 0, 0, 0.65) 100%);
    background: linear-gradient(140deg, rgb(23 34 51 / 4%) 0%, rgb(0 0 0 / 63%) 100%);
    padding-top: 80px;
}

/* Subtle Gold Accent Components */
.gold-line {
    width: 35px;
    height: 1.5px;
    background-color: var(--sec-main-color);
    display: inline-block;
}

.hero-subtitle {
    color: var(--sec-main-color);
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.hero-title {
    font-size: 3rem;
    line-height: 1.4;
    color: #ffffff;
    width: 700px;
    max-width: 100%;
    text-align: center;
    margin: auto;
}

.text-gold {
    color: var(--sec-main-color);
}

.hero-description {
    max-width: 800px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #ffffff;
    font-weight: 300;
}

/* Main Golden Button Styles */
.btn-gold {
    background: linear-gradient(135deg, var(--main-color) 0%, var(--main-hover-color) 100%);
    border: none;
    color: #ffffff;
    border-radius: 30px;
    padding: 10px 32px;
    box-shadow: 0 4px 15px rgb(108 171 223 / 20%);
    transition: all 0.3s ease;
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgb(108 162 223 / 35%);
}

/* Transparent Dark Secondary Button */
.btn-outline-light-custom {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff !important;
    border-radius: 30px;
    padding: 10px 32px !important;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.btn-outline-light-custom:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Frosted Glass Floating Service Cards */
.service-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-height: 130px;
}

.service-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--sec-main-color);
}

.card-icon i {
    font-size: 1.6rem;
    color: var(--sec-main-color);
}

.service-card .card-title {
    color: #ffffff;
    font-size: 0.95rem;
}

.service-card .card-subtitle {
    color: #8a99ad !important;
    font-size: 0.75rem;
}

/* Screen Size Adaptations */
@media (max-width: 768px) {
    .hero-title {
        font-size: 1.95rem;
    }

    .hero-description {
        font-size: 0.85rem;
    }

    .service-card {
        padding: 1rem !important;
        min-height: 110px;
    }
}


/* /////////////////////////////////////////////// why choose us /////////////////////////////////////////////// */
.why-choose-us {
    background-color: #fafafa;
    /* padding: 80px 0; */
}

/* Upper Left Circle Badge Design Styles */
.gavel-badge-container {
    width: 140px;
    height: 140px;
    border: 1px dashed #dfb76c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.gavel-badge-inner {
    width: 120px;
    height: 120px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.gavel-badge-inner i {
    font-size: 2rem;
    color: #1a2844;
    transform: scaleX(-1);
    /* Flips the gavel to match the precise orientation */
}

/* Typography Accent Lines & Text */
.gold-subtitle-line {
    width: 24px;
    height: 2px;
    background-color: #dfb76c;
    display: inline-block;
}

.section-subtitle {
    color: #dfb76c;
    font-size: 0.9rem;
    font-weight: 600;
}

.section-title {
    color: #1a2844;
    font-size: 2.2rem;
}

.section-desc {
    font-size: 0.95rem;
    line-height: 1.8;
    max-width: 800px;
}

/* Dark Main Banner Styles */
.main-feature-card {
    background: radial-gradient(circle at top left, rgba(79, 95, 170, .4), transparent 30%), radial-gradient(circle at bottom right, rgba(79, 95, 170, .25), transparent 35%), #172443;
    border-radius: 24px;
    box-shadow: 0 15px 40px rgba(31, 45, 74, 0.15);
}

.feature-icon-box {
    width: 54px;
    height: 54px;
    border: 1px solid rgba(248, 247, 247, 0.4);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-heading {
    color: #dfb76c;
    font-size: 1.3rem;
}

.feature-desc {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #cbd5e1 !important;
    font-weight: 300;
}

/* Twin Grid Cards Styling Structure */
.sub-feature-card {
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.03);
    border-right: 3px solid var(--main-color);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sub-feature-card:hover {
    transform: translateY(-5px);
}

.sub-icon-box {
    width: 48px;
    height: 48px;
    background-color: #f8fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
}

.sub-icon-box i {
    font-size: 1.25rem;
    color: #1f2d4a;
}

.sub-card-title {
    color: #1f2d4a;
    font-size: 1.2rem;
}

.sub-card-desc {
    font-size: 1rem;
    line-height: 1.8;
    color: #64748b !important;
}

/* Responsive Structural Breakpoints */
@media (max-width: 768px) {
    .section-title {
        font-size: 1.7rem;
    }

    .main-feature-card,
    .sub-feature-card {
        padding: 1.5rem !important;
    }

    .main-feature-card {
        flex-direction: column !important;
        /* align-items: flex-end !important; */
    }

    .feature-icon-box {
        order: -1 !important;
        /* Forces icon to top position on small viewports */
    }
}


/* /////////////////////////////////////////////// company services /////////////////////////////////////////////// */
.company-services {
    background-color: #ffffff;
    /* padding: 80px 0; */
}

/* Subtitle Line Accents */
.gold-subtitle-line {
    width: 20px;
    height: 1.5px;
    background-color: var(--main-color);
    display: inline-block;
}

.stats-modern .gold-subtitle-line {
    background-color: #fff;
}

.section-subtitle {
    color: var(--main-color);
    font-size: 0.9rem;
    font-weight: 600;
}

.stats-modern .section-subtitle {
    color: #fff;
}

.sec-title {
    color: #1a2844;
    font-size: 2.2rem;
    text-align: center;
    letter-spacing: -0.5px;
}

.stats-modern .sec-title {
    color: #ffffff;
    font-size: 1.5rem;
}

@media (max-width: 767px) {
    .stats-modern .sec-title {
        font-size: 1rem;
    }
}

.section-desc {
    max-width: 680px;
    font-size: 0.95rem;
    line-height: 1.8;
    text-align: center;
    color: #64748b !important;
}

/* Service Card Components styling */
.service-box {
    background-color: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 24px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Replicating the highlighted card/hover states */
.service-box.active,
.service-box:hover {
    border-color: var(--main-color);
    box-shadow: 0 15px 40px rgba(223, 183, 108, 0.08);
    transform: translateY(-4px);
}

/* Circular Icon Containers */
.service-icon-wrapper {
    width: 56px;
    height: 56px;
    background-color: #eeeffa;
    /* Soft gold-tint cream background */
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon-wrapper i {
    font-size: 1.35rem;
    color: var(--main-color);
}

/* Inner Text Formatting */
.service-box-title {
    color: #1a2844;
    font-size: 1.3rem;
    line-height: 1.4;
}

.service-box-desc {
    font-size: .85rem;
    line-height: 1.8;
    color: #64748b !important;
    text-align: justify;
}

/* Adjustments for Responsive Screen Containers */
@media (max-width: 992px) {
    .service-box-title {
        min-height: auto;
    }

    .section-title {
        font-size: 1.8rem;
    }
}

/* /////////////////////////////////////////////// about principles /////////////////////////////////////////////// */
.about-principles {
    border-bottom: 1px solid #fff;
}

.g-1px,
.gy-1px {
    --bs-gutter-y: 1px;
}

.g-1px,
.gx-1px {
    --bs-gutter-x: 1px;
}

/* Main Top Header */
.section-main-title {
    color: #1a2844;
    font-size: 2.4rem;
    position: relative;
}

/* Dark Green Structural Cards */
.principle-card {
    background-color: var(--main-color);
    height: 100%;
    border: none;
    box-shadow: 0 12px 35px rgba(52, 64, 46, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Vector/Icon Outlines */
.principle-icon i {
    font-size: 2.5rem;
    color: #fff;
    opacity: 0.95;
}

/* Primary Card Titles */
.principle-title {
    color: #ffffff;
    font-size: 1.6rem;
    letter-spacing: -0.3px;
}

/* Descriptive Text Styling */
.principle-desc {
    color: #f1f5f9;
    /* Off-white highly readable tone */
    font-size: 0.92rem;
    line-height: 1.8;
    font-weight: 300;
    max-width: 320px;
}

/* Clean Responsiveness Scaling Breakpoints */
@media (max-width: 992px) {
    .section-main-title {
        font-size: 1.95rem;
    }

    .principle-card {
        padding: 2rem 1.5rem !important;
    }

    .principle-title {
        font-size: 1.4rem;
    }
}

/* /////////////////////////////////////////////// work fields /////////////////////////////////////////////// */
/* تنسيق قسم مجالات العمل الأساسي */
.work-fields {
    background-color: #ffffff;
    /* padding: 80px 0; */
}

/* عنوان القسم العلوي باللون البرتقالي/الذهبي المشرق المطابق للصورة */
.work-fields .section-main-title {
    color: #e59524;
    font-size: 2.3rem;
}

/* وصف القسم العلوي */
.work-fields .section-desc {
    max-width: 850px;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #64748b !important;
}

/* تصميم كروت المجالات المطابقة للصورة 100% */
.field-card {
    background-color: #34402e;
    /* الخلفية الخضراء الداكنة المميزة */
    border-radius: 12px;
    /* زوايا دائرية متوسطة الانحناء */
    height: 100%;
    min-height: 250px;
    /* يعطي مساحة متناسقة لجميع الكروت لتصبح بنفس الطول */
    border: none;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

/* تأثير بسيط عند تمرير الماوس فوق الكارت */
.field-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(52, 64, 46, 0.2);
}

/* الأيقونة الذهبية الرفيعة بداخل الكارت */
.field-icon i {
    font-size: 3.5rem;
    color: #dfb76c;
    /* اللون الذهبي الخاص بالهوية */
    font-weight: 200;
    /* لجعل الخطوط رفيعة وأنيقة كالتصميم */
}

/* نصوص العناوين الموحدة داخل الكروت باللون الأبيض */
.field-title {
    color: #ffffff;
    font-size: 0.92rem !important;
    line-height: 1.6;
    text-align: center;
    font-weight: 600;
}

/* تهيئة التجاوب مع مختلف شاشات الهواتف والأجهزة اللوحية */
@media (max-width: 992px) {
    .field-card {
        min-height: 220px;
        padding: 1.5rem !important;
    }

    .work-fields .section-main-title {
        font-size: 1.8rem;
    }
}

/* /////////////////////////////////////////////// our journey /////////////////////////////////////////////// */
.our-journey-section {
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    min-height: 450px;
    background-color: #1e1a26;
    /* لون احتياطي زيتي داكن متطابق في حال عدم تحميل الصورة */
}

/* طبقة الفلتر واللون الزيتي الزجاجي الداكن فوق الخلفية */
.journey-overlay {
    background: linear-gradient(180deg, rgb(49 57 83 / 92%) 0%, rgb(0 0 0 / 96%) 100%);
    height: 100%;
    width: 100%;
}

/* نصوص الواجهة وعناوينها */
.journey-main-title {
    color: #ffffff;
    font-size: 2.5rem;
    letter-spacing: -0.5px;
}

.journey-desc {
    max-width: 650px;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #cbd5e1 !important;
    font-weight: 300;
}

/* تصميم الدوائر الخارجية لـ خطوات العمل */
.step-icon-container {
    width: 130px;
    height: 130px;
    background-color: transparent;
    border: 10px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.step-icon-inner {
    width: 100%;
    height: 100%;
    background-color: #37468750;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-icon-inner i {
    font-size: 2.5rem;
    color: #ffffff;
}

.step-number {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 40px;
    height: 40px;
    background-color: var(--main-color, #0d6efd);
    /* تأكد من وجود المتغير أو ضع لون افتراضي */
    border: 1px dashed #fff;
    color: #ffffff;
    border-radius: 50%;
    font-size: 0.9rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* نصوص الخطوات */
.step-title {
    font-size: 1.1rem;
}

.step-subtitle {
    color: #94a3b8 !important;
    font-weight: 300;
}

/* تنسيق الخطوط المموجة بين الخطوات للشاشات الكبيرة */
@media (min-width: 768px) {
    .step-number {
        top: -15px;
        left: -15px;
    }

    .step-item {
        position: relative;
        z-index: 1;
    }

    /* رسم مسار SVG مموج من 1 إلى 2 وإلى 3 وإلى 4 */
    .col-6:not(:last-child) .step-item::after {
        content: "";
        position: absolute;
        top: 65px;
        /* منتصف الدائرة ذات الـ 130 بكسل */
        right: calc(50% + 95px);
        /* 65 بكسل نصف القطر + 15 بكسل مسافة فراغ */
        width: calc(100% - 160px);
        /* التمدد عبر المسافة المتبقية */
        height: 35px;
        transform: translateY(-50%);
        /* رسم الخط المموج بشكل حرف S مع سهم الاتجاه */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='white' stop-opacity='0.2'/%3E%3Cstop offset='50%25' stop-color='white' stop-opacity='0.8'/%3E%3Cstop offset='100%25' stop-color='white' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 200,20 C 150,0 50,40 0,20' fill='none' stroke='url(%23g)' stroke-width='3' stroke-linecap='round'/%3E%3Cpolyline points='15,12 5,20 15,28' fill='none' stroke='white' stroke-opacity='0.8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: -1;
    }
}

/* ضبط التجاوب والخطوط في الشاشات الصغيرة للهواتف */
@media (max-width: 767px) {
    .journey-main-title {
        font-size: 1.9rem;
        text-align: center;
    }

    .journey-desc {
        text-align: center;
        font-size: 0.88rem;
    }

    .step-icon-container {
        width: 95px;
        height: 95px;
    }

    .step-title {
        font-size: 0.95rem;
    }

    .step-item {
        position: relative;
        z-index: 1;
    }

    /* رسم الخط فقط بين العناصر الفردية للزوجية (من 1 لـ 2) و (من 3 لـ 4) */
    .col-6:nth-child(odd) .step-item::after {
        content: "";
        position: absolute;
        top: 47.5px;
        right: calc(50% + 60px);
        width: calc(100% - 95px);
        height: 20px;
        transform: translateY(-50%);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='white' stop-opacity='0.2'/%3E%3Cstop offset='50%25' stop-color='white' stop-opacity='0.8'/%3E%3Cstop offset='100%25' stop-color='white' stop-opacity='0.2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M 200,20 C 150,0 50,40 0,20' fill='none' stroke='url(%23g)' stroke-width='3' stroke-linecap='round'/%3E%3Cpolyline points='15,12 5,20 15,28' fill='none' stroke='white' stroke-opacity='0.8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        z-index: -1;
    }
}


/* /////////////////////////////////////////////// FAQ Section /////////////////////////////////////////////// */
.faq-section {
    /* background-color: #f9f9f9; */
    /* padding: 80px 0; */
}

/* تنسيق العنوان الرئيسي العلوي */
.faq-main-title {
    color: #1a2844;
    /* اللون الأزرق الداكن المطابق لكلمات الموقع */
    font-size: 2.3rem;
    letter-spacing: -0.5px;
}

/* تصميم الكروت البيضاء ذات الحواف الناعمة وظلال خفيفة جداً */
.faq-card {
    background-color: #ffffff;
    border: 2px solid #ddd;
    /* إطار خفيف جداً مطابق للصورة */
    border-radius: 24px;
    /* زوايا دائرية عريضة وناعمة */
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.015);
    /* ظلال ناعمة غير حادة */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* تأثير سلس عند تمرير المؤشر فوق الكروت */
.faq-card:hover {
    transform: translateY(-4px);
    border-color: var(--main-color);
    /* تلميح ذهبي خفيف عند الهوفر يتناسق مع الهوية */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04);
}

/* نصوص عناوين الأسئلة باللون الأزرق الداكن */
.faq-card-title {
    color: #1a2844;
    font-size: 1.25rem;
    line-height: 1.5;
}

/* نصوص الإجابات والشرح */
.faq-card-desc {
    font-size: 0.9rem;
    line-height: 1.8;
    color: #64748b !important;
    /* رمادي مريح للقراءة */
    text-align: justify;
    text-align-last: right;
}

/* تهيئة وتناسق العرض على شاشات الموبايل والتابلت */
@media (max-width: 992px) {
    .faq-main-title {
        font-size: 1.8rem;
    }

    .faq-card {
        padding: 1.5rem !important;
    }

    .faq-card-title {
        font-size: 1.15rem;
    }
}

/* /////////////////////////////////////////////// Breadcrumb Section /////////////////////////////////////////////// */

.breadcrumb-text {
    max-width: 900px;
    text-align: center;
    margin: 40px auto 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.8;
    font-family: 'cairo', sans-serif;
}

.breadcrumb-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.breadcrumb-wrapper .container {
    position: relative;
    z-index: 1;
}


/* /////////////////////////////////////////////// Personal Status Services Section /////////////////////////////////////////////// */

/* التنسيق الأساسي للقسم */
.personal-status-services {
    background-color: #fbfbfb;
}

/* الخط العمودي الجانبي بجوار العنوان الرئيسي */
.vertical-accent-line {
    width: 5px;
    height: 55px;
    background-color: var(--main-color);
    display: inline-block;
}

/* تنسيق العناوين والوصف */
.personal-status-services .section-main-title {
    color: #1a2844;
    font-size: 2rem;
    line-height: 1.2;
    padding: 20px 0;
}

.personal-status-services .section-desc {
    max-width: 950px;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #4d4d4d;
    text-align: right;
    font-family: 'cairo', sans-serif;
}

.cat-services {
    padding-bottom: 50px;
}

.cat-services:last-child {
    padding-bottom: 0;
}

/* تصميم الكروت البيضاء */
.service-item-card {
    background-color: #ffffff;
    border: 1px solid #f1f5f9;
    border: 1px solid #ddd;
    border-radius: 12px;
    height: 100%;
    min-height: 240px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* تأثير بسيط عند تمرير الماوس فوق الكارت لزيادة تفاعل المستخدم */
.service-item-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border-color: var(--main-color);
}

/* حاوية الأيقونة الدائرية الصغيرة الملونة بـ --main-color */
.service-icon-box {
    width: 36px;
    height: 36px;
    background-color: var(--main-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    /* يجعل الدائرة تطفو في أعلى اليسار/اليمين حسب المحاذاة */
}

/* أيقونة Font Awesome الداخلية باللون الأبيض لتباين ممتاز */
.service-icon-box i {
    font-size: 1rem;
    color: #ffffff;
}

/* عناوين الخدمات الفرعية بداخل الكروت */
.service-title {
    color: #1a2844;
    color: var(--main-color);
    font-size: 1.15rem;
    margin-top: 10px;
}

/* نصوص الشرح داخل الكروت */
.service-text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: #59595b;
}

/* زر "التفاصيل" مع السهم */
.details-link {
    color: #1a2844;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.details-link i {
    transition: transform 0.2s ease;
    margin-right: 5px;
}

/* تأثير حركة السهم عند تمرير الماوس */
.service-item-card:hover .details-link {
    color: var(--main-color);
}

.service-item-card:hover .details-link i {
    transform: translateX(-3px);
}

/* تهيئة التجاوب للشاشات الصغيرة */
@media (max-width: 768px) {
    .personal-status-services .section-main-title {
        font-size: 1.6rem;
    }

    .service-item-card {
        min-height: auto;
        padding: 1.5rem !important;
    }
}


/* /////////////////////////////////////////////// why choose us - new site ///////////////////////////////////////////// */
.why-choose-us-new {
    background-color: #ffffff;
    overflow: hidden;
}

.why-choose-us-new .feature-icon-box i {
    color: var(--main-color);
}

/* تنسيق النصوص والعناوين */
.why-choose-us-new .section-main-title {
    color: #1a2844;
    font-size: 2.1rem;
}

.why-choose-us-new .section-desc {
    font-size: 0.95rem;
    line-height: 2;
    color: #4a5568 !important;
    text-align: justify;
}

/* تنسيق قائمة المزايا النقطية */
.features-list li {
    transition: transform 0.2s ease;
}

.features-list li:hover {
    transform: translateX(-3px);
    /* حركة تفاعلية ناعمة لجهة اليمين */
}

/* أيقونات المزايا بلون الـ --main-color وخلفية شفافة دائرية دقيقة */
.feature-icon-box {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon-box i {
    font-size: 1.35rem;
    color: var(--main-color);
    color: #fff;
}

.feature-text {
    color: #1a2844;
    font-size: 0.98rem;
}

/* الحاوية الكلية للصورة والكارت المتداخل */
.why-choose-image-wrapper {
    padding: 20px;
    padding-top: 0;
    z-index: 1;
}

/* تصميم حاوية الصورة بزوايا دائرية ناعمة تطابق الصورة الأصلية */
.why-choose-image-wrapper .image-container {
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

.team-photo {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* كارت تداخل سنوات الخبرة الذهبي الحاد والبارز لأسفل اليمين */
.experience-badge {
    position: absolute;
    bottom: -15px;
    right: 40px;
    /* تموضعه بالجهة اليمنى السفلية متداخلاً مع حواف الصورة */
    width: 160px;
    height: 110px;
    background-color: var(--main-color);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(223, 183, 108, 0.3);
    z-index: 2;
}

.exp-number {
    font-size: 2.3rem;
    color: #ffffff;
    /* لون داكن متباين وقوي */
    line-height: 1.1;
}

.exp-text {
    font-size: 0.85rem;
    color: #dfdfdf;
}

/* الأشكال الهندسية الخلفية الرمادية الفاتحة على اليسار */
.geo-bg-pattern {
    position: absolute;
    top: -40px;
    left: -40px;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #f7fafc 25%, transparent 25%),
        linear-gradient(225deg, #f7fafc 25%, transparent 25%);
    background-size: 40px 40px;
    z-index: -1;
    opacity: 0.7;
}

/* ضبط مرونة الأبعاد والتجاوب التام للشاشات الصغيرة والموبايل */
@media (max-width: 991.98px) {
    .why-choose-us-new {
        padding: 60px 0;
    }

    .why-choose-image-wrapper {
        margin-bottom: 30px;
    }

    .experience-badge {
        right: 20px;
        bottom: -10px;
        width: 130px;
        height: 95px;
    }

    .exp-number {
        font-size: 1.8rem;
    }

    .why-choose-us-new .section-main-title {
        font-size: 1.7rem;
    }
}

/* /////////////////////////////////////////////// how we start /////////////////////////////////////////////// */

.how-we-start {
    background-color: #fbfbfb;
    padding: 50px 0;
}

/* تنسيق العنوان الرئيسي */
.how-we-start .section-main-title {
    color: var(--dark-blue);
    font-size: 2.4rem;
    letter-spacing: -0.5px;
}

/* الخط الأفقي الممتد أسفل العنوان */
.title-bottom-line {
    display: block;
    width: 80px;
    height: 3px;
    background-color: var(--main-color);
    border-radius: 2px;
}

/* الكروت المطورة ذات الطابع الفخم الخفيف */
.step-card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 20px;
    height: 100%;
    min-height: 260px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-icon-wrapper {
    width: 70px;
    height: 70px;
    background-color: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.step-icon-wrapper i {
    font-size: 2rem;
    color: var(--dark-blue);
    transition: all 0.4s ease;
}

.step-title {
    color: var(--dark-blue);
    font-size: 1.15rem;
    margin-top: 5px;
}

/* نصوص الشرح داخل الخطوات */
.step-card-text {
    font-size: 0.88rem;
    line-height: 1.8;
    color: #718096 !important;
}

/* مربع رقم الخطوة الصغير (Badge) المطور */
.step-badge-number {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #a0aec0;
    letter-spacing: 0.5px;
    transition: all 0.4s ease;
}

/* تأثيرات التحويم الإحترافية عند مرور الماوس فوق الكروت */
.step-card:hover {
    transform: translateY(-8px);
    border-color: var(--main-color);
    box-shadow: 0 20px 40px rgba(27, 40, 68, 0.05);
}

.step-card:hover .step-icon-wrapper {
    background-color: var(--main-color);
}

.step-card .step-icon-wrapper i {
    color: var(--main-color);
}

.step-card:hover .step-icon-wrapper i {
    color: #ffffff;
    transform: scale(1.1);
}

.step-card:hover .step-badge-number {
    color: var(--main-color);
}

/* زر Call to Action المطور */
.cta-banner-btn {
    background-color: var(--main-color);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-size: 1.05rem;
    box-shadow: 0 10px 28px rgba(223, 183, 108, 0.2);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cta-banner-btn:hover {
    background-color: var(--dark-blue);
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(26, 40, 68, 0.2);
}

.transition-arrow {
    transition: .3s;
}

.cta-banner-btn:hover .transition-arrow {
    transform: translateX(-5px);
    color: #fff;
}

/* التجاوب السلس مع الشاشات المتعددة */
@media (max-width: 991.98px) {
    .how-we-start .section-main-title {
        font-size: 2rem;
    }

    .step-card {
        min-height: auto;
        padding: 2.5rem 1.5rem !important;
    }
}


/* /////////////////////////////////////////////// faq - new site ///////////////////////////////////////////// */

.faq-accordion-section {
    background-color: #fff;
    padding: 50px 0;

}

/* تنسيق عنوان القسم */
.faq-accordion-section .section-main-title {
    color: var(--dark-blue);
    font-size: 2.3rem;
}

.faq-accordion-section .title-bottom-line {
    display: block;
    width: 70px;
    height: 3px;
    background-color: var(--main-color);
    border-radius: 2px;
}

/* حاوية الأكورديون */
.accordion-custom-wrapper {
    max-width: 850px;
}

/* كارت عنصر الأكورديون */
.accordion-item-custom {
    background-color: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* هيدر السؤال */
.accordion-header-custom {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.accordion-title-text {
    color: var(--dark-blue);
    font-size: 1.05rem;
    transition: color 0.3s ease;
}

/* حاوية الأيقونة الدائرية الناعمة */
.accordion-icon-box {
    width: 32px;
    height: 32px;
    background-color: #f8fafc;
    color: var(--dark-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-right: 15px;
    transition: all 0.3s ease;
}

/* الإجابة مخفية افتراضياً بشكل نظيف للـ jQuery */
.accordion-content-custom {
    display: none;
}

.content-inner p {
    font-size: 0.92rem;
    line-height: 1.8;
    color: #5a6a85;
    text-align: justify;
}

/* النمط المطور والنشط عند الفتح للـ Item */
.accordion-item-custom.active {
    border-color: var(--main-color);
    box-shadow: 0 10px 25px rgba(27, 40, 68, 0.03);
}

.accordion-item-custom.active .accordion-title-text {
    color: var(--main-color);
}

.accordion-item-custom.active .accordion-icon-box {
    background-color: var(--main-color);
    color: #ffffff;
    transform: rotate(180deg);
}

/* التجاوب مع الجوال */
@media (max-width: 768px) {
    .faq-accordion-section .section-main-title {
        font-size: 1.8rem;
    }

    .accordion-title-text {
        font-size: 0.95rem;
    }
}


/* /////////////////////////////////////////////// consultation - new site ///////////////////////////////////////////// */
.cta-consultation-section {
    background-color: #fff;
    padding-bottom: 80px;
}

/* الكارت الأساسي المرتفع عن الخلفية */
.cta-premium-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

.cta-main-title {
    font-size: 1.8rem;
    color: var(--dark-blue) !important;
    line-height: 1.4;
}

.cta-description {
    font-size: 0.98rem;
    color: #475569 !important;
    max-width: 520px;
    text-align: justify;
}

/* زر الواتساب الذهبي المتطابق مع التصميم */
.btn-cta-gold {
    background-color: var(--main-color);
    color: #fff;
    border-radius: 10px;
    font-size: 0.95rem;
    box-shadow: 0 4px 14px rgba(223, 183, 108, 0.25);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-cta-gold:hover {
    background-color: var(--dark-blue);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(175, 108, 223, 0.4);
}

/* التحكم بالصورة الجانبية وتغطيتها للمساحة بالكامل */
.cta-image-cover {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 100%;
}

/* معالجة شاشات الجوال والأجهزة اللوحية (Responsive) */
@media (max-width: 767.98px) {

    .cta-main-title {
        font-size: 1.45rem;
    }

    .cta-description {
        font-size: 0.9rem;
        margin-bottom: 2rem !important;
    }

    .btn-cta-gold {
        width: 100%;
    }

    .cta-image-cover {
        min-height: 300px;
    }
}

.consultation-cta {
    background: radial-gradient(circle at top left,
            rgba(79, 95, 170, .4),
            transparent 30%),

        radial-gradient(circle at bottom right,
            rgba(79, 95, 170, .25),
            transparent 35%),

        #172443;
    border-radius: 20px;
    padding: 60px 30px;
    margin: 50px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.consultation-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .05;
    pointer-events: none;
}

.consultation-cta-content {
    position: relative;
    z-index: 2;
}

.consultation-cta h3 {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.consultation-cta .btn-theme {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    display: inline-block;
}

@media (max-width: 768px) {
    .consultation-cta {
        padding: 45px 20px;
    }

    .consultation-cta h3 {
        font-size: 1.5rem;
    }
}