[ طلب ] طلب فوتر بسيط

    <div class="p-footer-inner">
        <nav class="p-footer-block">
            <ul class="p-footer-blockColumns">
                <li class="p-footer-logoColumn">
                    <div class="p-footer-logoContent">
                        <div class="p-footer-logo">
                            <a href="https://maanaa.net/">
                                <img src="https://i.imgur.com/xhJv7a2.png" alt="منتديات معنا" width="200" height="72">
                            </a>
                        </div>

                        <div class="p-footer-buttons">
                            <a href="https://maanaa.net/login/" class="p-footer-button">تسجيل الدخول</a>
                            <a href="https://maanaa.net/register/" class="p-footer-button">إنشاء حساب</a>
                        </div>

                        <div class="p-footer-social">
                            <a href="#"><span class="p-footer-social-icon"><i class="fab fa-twitter-square"></i></span> تويتر</a>
                            <a href="#"><span class="p-footer-social-icon"><i class="fab fa-facebook-square"></i></span> فيسبوك</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">منتجات</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">المبيعات</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">العُملاء</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">المساعدة</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>

.p-footer {
    font-size: 13px;
    color: #edf6fd;
    background: #0f3652;
    padding: 20px 0;
    background: linear-gradient(0deg, #0f3652, #185886)
}

.p-footer a {
    color: #bcdef5
}

.p-footer-blockColumns {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between
}

.p-footer-blockColumns>li {
    min-width: 90px;
    margin-right: 50px
}

.p-footer-blockColumns>li:first-child {
    margin-right: 0
}

.p-footer-linkGroup .p-footer-linkGroup-header {
    font-weight: bold;
    margin-bottom: .5em
}

.p-footer-linkGroup ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.p-footer-linkGroup ul li {
    margin-bottom: .5em
}

.p-footer-logoColumn {
    flex: 1
}

.p-footer-logoContent:last-child {
    margin-bottom: 0
}

.p-footer-buttons {
    margin: 10px 0
}

.p-footer-buttons .p-footer-button+.p-footer-button {
    margin-right: 10px
}

.p-footer-button {
    display: inline-block;
    border: 1px solid currentColor;
    border-radius: 5px;
    padding: 6px 10px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.p-footer-button:hover {
    text-decoration: none;
    color: #79bdeb
}

.p-footer-social a {
    display: inline-block;
    margin-right: 20px;
    -webkit-transition: all .25s ease;
    transition: all .25s ease
}

.p-footer-social a:first-child {
    margin-right: 0
}

.p-footer-social a:hover {
    text-decoration: none;
    color: #79bdeb
}

.p-footer-social-icon {
    display: inline-block;
    font-size: 1.75em;
    min-width: 1.1em;
    text-align: center;
    vertical-align: -.16em
}

.p-footer-extra {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 12px
}


.p-footer-extra-links {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-right: 10px
}

.p-footer-extra-links>li {
    display: inline-block;
    margin-right: 20px
}

.p-footer-extra-links>li:first-child {
    margin: 0
}

.p-footer-debug {
    margin-top: 20px;
    font-size: 11px;
    text-align: center
}

.p-footer-debug .pairs>dt {
    color: inherit
}

@media (max-width:850px) {
    .p-footer-inner {
        max-width: 600px
    }
    .p-footer-blockColumns {
        flex-wrap: wrap;
        margin-bottom: -20px
    }
    .p-footer-blockColumns>li {
        width: 50%;
        margin-left: 0;
        margin-bottom: 20px
    }
    .p-footer-blockColumns>li.p-footer-logoColumn {
        width: 100%;
        min-width: 100%;
        border-bottom: 1px solid rgba(188, 222, 245, 0.15);
        text-align: center;
        padding-bottom: 20px
    }
    .p-footer-extra {
        flex-wrap: wrap
    }
    .p-footer-extra>* {
        width: 100%
    }

    .p-footer-extra-links {
        order: 1;
        padding-left: 0;
        text-align: center
    }
}

@media (max-width:300px) {
    .p-footer-blockColumns>li {
        width: 100%;
        text-align: center
    }
}

<div class="p-extra-footer">
        <nav class="p-footer-block">
            <ul class="p-footer-blockColumns">
                <li class="p-footer-logoColumn">
                    <div class="p-footer-logoContent">
                        <div class="p-footer-logo">
                            <a href="https://maanaa.net/">
                                <img src="https://i.imgur.com/xhJv7a2.png" alt="منتديات معنا" width="200" height="72">
                            </a>
                        </div>

                        <div class="p-footer-buttons">
                            <a href="https://maanaa.net/login/" class="p-footer-button">تسجيل الدخول</a>
                            <a href="https://maanaa.net/register/" class="p-footer-button">إنشاء حساب</a>
                        </div>

                        <div class="p-footer-social">
                            <a href="#"><span class="p-footer-social-icon"><i class="fab fa-twitter-square"></i></span> تويتر</a>
                            <a href="#"><span class="p-footer-social-icon"><i class="fab fa-facebook-square"></i></span> فيسبوك</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">منتجات</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">المبيعات</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">العُملاء</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <div class="p-footer-linkGroup">
                        <div class="p-footer-linkGroup-header">المساعدة</div>
                        <ul>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                            <li><a href="#">رابط نصي</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>
    </div>

<footer class="p-footer" id="footer">

<xf:include template="extra_footer" />

.p-extra-footer{
    color: @xf-pageBg;
    background: #0f3652;
    padding: 20px 0;
    background-image: linear-gradient(to bottom, #185886, #154f79, #13476b, #113e5f, #0f3652);
    
    .p-footer-block{
        width: @xf-pageWidthMax;
        margin: 0px auto;
        
        ul{
            list-style: none;
            li{
                flex: 1;
                &:first-child{
                    flex: 2;
                }// end first-child
                
            }// end li
            
        }// end ul
        
        .p-footer-blockColumns{
            display: flex;
            justify-content: space-between;
            
                .p-footer-button{
                    color: @xf-chromeTextColor !important;
                }// end p-footer-button
                
                .p-footer-social a{
                    color: @xf-chromeTextColor !important;
                }// end p-footer-social
                
            
            .p-footer-linkGroup{
                display: flex;
                flex-direction: column;
                
                ul{
                    margin: 0;
                    padding: 0;
                    
                    li{
                        
                        a{
                            color: @xf-chromeTextColor;
                        }// end a
                        
                    }// end li
                    
                }// end ul
                
            }// end p-footer-linkGroup
            
        }// end p-footer-blockColumns
    }
}

@media (max-width: @xf-responsiveNarrow){
    .p-extra-footer .p-footer-block{
        width: 100%;
    }
    .p-extra-footer .p-footer-block .p-footer-blockColumns{
        flex-direction: column;
        li{
            align-self: center;
        }
    }
}

@media (max-width: @xf-responsiveMedium){
    .p-extra-footer .p-footer-block{
        width: 100%;
    }
    .p-extra-footer .p-footer-block .p-footer-blockColumns{
        flex-direction: column;
        li{
            align-self: center;
        }
    }
}

<footer class="p-footer" id="footer">

<footer class="p-footer" id="footer">
<xf:include template="extra_footer" />

 &:first-child{
                    flex: 2; // غيري الرقم هذا
                }// end first-child