كيفية إضافة طبقة سوداء overlay بشكل شبه منحرف في css + مشكلة في إنزلاق النصوص

السلام عليكم 

كنت اتدرب عل تصميم صفحه ولكن تظهر معي مشاكل حاولت حلها باكثر من طريقه ولمن ينتج مشكله اخري 

قمت بارقاق صوره النموذج الاصليه ضمن الصور 

1-المشكله هو نص الفقره قمت بزياده العرض له ولكن عند تصغير حجم الاشه تحدث مشكله حيث تظهر كانها تاكل النص .

2- اللوجو في اليسار اريده ان يظهر بجانب الكتابه

3- ايضا" اللون المائل الذي له شفافيه كيف اقوم به.

تركيبة الـ HTML : 

<section class="phara">
        <div class="container">
            <div class="row ">
                <div class="col-md-12 ml-auto">
                    <h5>
                        Diagoona HTML Template
                    </h5>
                    <p class="aa">
                        Diagoona is provided by TemplateMo website. You are allowed to use this template for your
                        websites.
                        You are NOT allowed to redistribute this template ZIP file for a
                        download purpose on any
                        template
                        collection website.
                    </p>
                    <p class="bb">
                        Diagoona is Bootstrap v4.4.1 layout. This BG is 50% transparent. You can set the background
                        images auto play settings (true or false in line number 33) in templatemo-script.js file in js
                        folder.
                    </p>
                    <button type="button" name="button"> Continue... </button>
                </div>
            </div>
        </div>
    </section>

التنسيقات الخاصة بالعنصر : 

section.phara .container {
    width: auto;
    padding: 0 0px;
    margin: 0 0px;
}

section.phara .container .row {
    margin-left: 72%;
    color: #fff;
}

section.phara .container .row h5 {
    padding-bottom: 40px;
    font-size: 25px;
    line-height: 30px;
    font-weight: 400;
}

section.phara .container .row p.aa {
    font-size: 18px;
    font-weight: 300;
    line-height: 35px;
    padding-bottom: 50px;
    border-bottom: 1px solid #fff;
    width: auto;
}

section.phara .container .row p.bb {
    font-size: 18px;
    font-weight: 300;
    line-height: 35px;
    padding-top: 50px;
    width: auto;
}

section.phara .container .row button {
    background-color: #fff;
    outline-style: none;
    border-radius: 5px;
    border: none;
    width: 110px;
    height: 45px;
    margin-top: 35px;
}

section.phara .container .row button:hover {
    background-color: rgb(50, 204, 255);
    transition: all 1.5s ease;
}

مرفق ملف المشروع : templete 1.zip . 

بعض الصور الموضحة للمشاكل : 

 مثال عن الطبقة السوداء المطلوبة :