أريد أن أجعل صورة الخلفية أكثر غمقا

الأمر بسيط عليك حذف خاصية filter من التنسيق التالي لديك:

.home .slide {
    min-height: 100vh;
    background-position: center !important;
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* filter: brightness(50%); */
}

والسبب هو أنه يتم تقليل الإضاءة للمحتوى بالكامل داخل العنصر الأب.

وبدلاً منها استخدام خاصية opacity على الخلفية التي قمت بإنشائها كالتالي في العنصر الزائف before:

.home .slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--dark-bg);
    z-index: -1;
    opacity: .7; /*هنا*/
}

يمكنك أيضا اضافة طبقة سوداء بحيث تتموضع بشكل نسبي داخل حاوية الصورة، فيكون:

<div class="img-container">
    <img src="path/to/your-image.png" />
    <div class="overlay"></div>
</div>

و لتعطها التنسيقات التالية:

.overlay{
    position: absolute;
    top:0;
    right:0;
    height:100%;
    width:100%;
}

أيضا لا تنسى إعطاء الحاوية الوضعية relative

.img-container{
    position: relative;
}

بهذا الشكل سوف يمكن للحاوية أن تحتوي طبقة سوداء تجعل الخلفية أو الصورة أكثر تعتيما. 

طبعا يمكنك التحكم في موضع الصورة على المحور z باستخدام الخاصية z-index.

شكرا جزيلا