/* ==========================================================
   MOHAMED SALEH V2
   GLOBAL FOOTER — FINAL
   ========================================================== */


/* ==========================================================
   01. HIDE ASTRA FOOTER
   ========================================================== */

body.ms-v2-footer-enabled #colophon,
body.ms-v2-footer-enabled footer.site-footer {
    display: none !important;
}


/* ==========================================================
   02. FOOTER DESIGN TOKENS
   ========================================================== */

.ms-site-footer {

    --ms-blue: #4A7CC6;
    --ms-orange: #F79A10;
    --ms-orange-hover: #E68900;

    --ms-footer-top: #1E2E43;
    --ms-footer-bottom: #1A283A;
    --ms-footer-bar: #142233;

    --ms-white: #FFFFFF;
    --ms-text: #EAF1F8;
    --ms-muted: #AEBBC9;

    --ms-border:
        rgba(255, 255, 255, 0.10);

    width: 100%;

    margin: 0;

    color: var(--ms-text);

    font-family:
        "Tajawal",
        sans-serif;

    direction: rtl;
}


.ms-site-footer *,
.ms-site-footer *::before,
.ms-site-footer *::after {
    box-sizing: border-box;
}


/* ==========================================================
   03. MAIN FOOTER BACKGROUND
   ========================================================== */

.ms-site-footer__main {

    width: 100%;

    padding:
        60px 0 54px;

    background:
        linear-gradient(
            180deg,
            var(--ms-footer-top) 0%,
            var(--ms-footer-bottom) 100%
        );

    color:
        var(--ms-text);
}


/* ==========================================================
   04. CONTAINER
   ========================================================== */

.ms-site-footer__container {

    width:
        min(
            1240px,
            calc(100% - 48px)
        );

    margin-inline:
        auto;
}


/* ==========================================================
   05. GRID
   ========================================================== */

.ms-site-footer__grid {

    display: grid;

    grid-template-columns:
        1.25fr
        1fr
        1fr
        1fr;

    align-items:
        start;

    gap:
        42px;
}


/* ==========================================================
   06. CENTER ALL COLUMNS
   ========================================================== */

.ms-site-footer__brand,
.ms-site-footer__column {

    text-align:
        center;
}


.ms-site-footer__brand,
.ms-site-footer__column {

    display: flex;

    flex-direction:
        column;

    align-items:
        center;
}


/* ==========================================================
   07. BRAND
   ========================================================== */

.ms-site-footer__brand {

    min-width: 0;
}


.ms-site-footer__logo {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        18px;

    text-decoration:
        none !important;
}


.ms-site-footer__logo-image {

    display:
        block;

    width:
        auto;

    max-width:
        235px;

    max-height:
        76px;

    object-fit:
        contain;
}


.ms-site-footer__site-name {

    color:
        var(--ms-white);

    font-size:
        24px;

    font-weight:
        800;
}


/* ==========================================================
   08. BRAND INTRO
   ========================================================== */

.ms-site-footer__intro {

    max-width:
        410px;

    margin:
        0 auto !important;

    color:
        rgba(234, 241, 248, 0.90) !important;

    font-size:
        15px !important;

    font-weight:
        400;

    line-height:
        1.9 !important;

    text-align:
        center;
}


/* ==========================================================
   09. SOCIAL ICONS
   ========================================================== */

.ms-site-footer__social {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        20px;
}


.ms-site-footer__social-link {

    display:
        grid;

    width:
        38px;

    height:
        38px;

    place-items:
        center;

    border:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-radius:
        9px;

    background:
        rgba(255, 255, 255, 0.035);

    color:
        var(--ms-text) !important;

    text-decoration:
        none !important;

    transition:
        color .2s ease,
        border-color .2s ease,
        background-color .2s ease,
        transform .2s ease;
}


.ms-site-footer__social-link svg {

    width:
        18px;

    height:
        18px;
}


.ms-site-footer__social-link:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(247, 154, 16, 0.55);

    background:
        rgba(247, 154, 16, 0.10);

    color:
        var(--ms-orange) !important;
}


/* ==========================================================
   10. COLUMN HEADINGS
   ========================================================== */

.ms-site-footer__heading {

    position:
        relative;

    margin:
        3px 0 18px !important;

    padding-bottom:
        11px;

    color:
        var(--ms-white) !important;

    font-size:
        18px !important;

    font-weight:
        800 !important;

    line-height:
        1.4 !important;

    text-align:
        center;
}


/* Orange line centered under heading */

.ms-site-footer__heading::after {

    content:
        "";

    position:
        absolute;

    right:
        50%;

    bottom:
        0;

    width:
        34px;

    height:
        2px;

    border-radius:
        10px;

    background:
        var(--ms-orange);

    transform:
        translateX(50%);
}


/* ==========================================================
   11. FOOTER MENUS
   ========================================================== */

.ms-site-footer__menu {

    display:
        grid;

    justify-items:
        center;

    gap:
        4px;

    width:
        100%;

    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;

    text-align:
        center;
}


.ms-site-footer__menu li {

    width:
        100%;

    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;

    text-align:
        center;
}


/* Remove any default list bullets */

.ms-site-footer__menu li::marker {
    content: "";
}


.ms-site-footer__menu a {

    display:
        inline-flex;

    min-height:
        34px;

    align-items:
        center;

    justify-content:
        center;

    padding:
        5px 0;

    color:
        var(--ms-text) !important;

    font-size:
        15px;

    font-weight:
        500;

    line-height:
        1.6;

    text-align:
        center;

    text-decoration:
        none !important;

    transition:
        color .2s ease;
}


/* Remove custom circles completely */

.ms-site-footer__menu a::before {

    display:
        none !important;

    content:
        none !important;

    width:
        0 !important;

    height:
        0 !important;

    margin:
        0 !important;
}


.ms-site-footer__menu a:hover {

    color:
        var(--ms-orange) !important;

    transform:
        none;
}


/* ==========================================================
   12. TRAINING CTA
   ========================================================== */

.ms-site-footer__cta {

    display:
        inline-flex;

    min-height:
        44px;

    align-items:
        center;

    justify-content:
        center;

    margin:
        18px auto 0;

    padding:
        10px 20px;

    border:
        1px solid
        var(--ms-orange);

    border-radius:
        8px;

    background:
        var(--ms-orange);

    color:
        #FFFFFF !important;

    font-size:
        14px;

    font-weight:
        800;

    line-height:
        1.4;

    text-align:
        center;

    text-decoration:
        none !important;

    box-shadow:
        0 8px 18px
        rgba(247, 154, 16, 0.15);

    transition:
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.ms-site-footer__cta:hover {

    transform:
        translateY(-1px);

    border-color:
        var(--ms-orange-hover);

    background:
        var(--ms-orange-hover);

    color:
        #FFFFFF !important;
}


/* ==========================================================
   13. BOTTOM BAR
   ========================================================== */

.ms-site-footer__bottom {

    width:
        100%;

    border-top:
        1px solid
        var(--ms-border);

    background:
        var(--ms-footer-bar);
}


.ms-site-footer__bottom-inner {

    display:
        flex;

    width:
        min(
            1240px,
            calc(100% - 48px)
        );

    min-height:
        68px;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        14px 28px;

    margin-inline:
        auto;

    padding:
        15px 0;

    text-align:
        center;
}


/* ==========================================================
   14. COPYRIGHT
   ========================================================== */

.ms-site-footer__copyright {

    margin:
        0 !important;

    color:
        rgba(234, 241, 248, 0.82) !important;

    font-size:
        13px !important;

    line-height:
        1.7 !important;

    text-align:
        center;
}


/* ==========================================================
   15. LEGAL LINKS
   ========================================================== */

.ms-site-footer__legal {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    gap:
        18px;
}


.ms-site-footer__legal a {

    color:
        rgba(234, 241, 248, 0.88) !important;

    font-size:
        13px;

    font-weight:
        500;

    text-decoration:
        none !important;

    transition:
        color .2s ease;
}


.ms-site-footer__legal a:hover {

    color:
        var(--ms-orange) !important;
}


/* ==========================================================
   16. GLOBAL FOOTER TEXT PROTECTION
   Prevent theme styles from overriding footer colors
   ========================================================== */

.ms-site-footer p,
.ms-site-footer li {

    color:
        var(--ms-text);
}


.ms-site-footer a {

    text-decoration:
        none;
}


/* ==========================================================
   17. TABLET
   ========================================================== */

@media (max-width: 921px) {

    .ms-site-footer__main {

        padding:
            48px 0 44px;
    }


    .ms-site-footer__container,
    .ms-site-footer__bottom-inner {

        width:
            calc(100% - 40px);
    }


    .ms-site-footer__grid {

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            38px 30px;
    }


    .ms-site-footer__intro {

        max-width:
            460px;
    }

}


/* ==========================================================
   18. MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .ms-site-footer__main {

        padding:
            38px 0 34px;
    }


    .ms-site-footer__container,
    .ms-site-footer__bottom-inner {

        width:
            calc(100% - 28px);
    }


    .ms-site-footer__grid {

        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    .ms-site-footer__logo-image {

        max-width:
            205px;
    }


    .ms-site-footer__intro {

        max-width:
            440px;

        font-size:
            15px !important;
    }


    .ms-site-footer__heading {

        margin-bottom:
            14px !important;
    }


    .ms-site-footer__social {

        margin-top:
            18px;
    }


    .ms-site-footer__bottom-inner {

        flex-direction:
            column;

        min-height:
            90px;

        gap:
            8px;

        padding:
            16px 0;
    }


    .ms-site-footer__legal {

        gap:
            12px;
    }

}


/* ==========================================================
   19. SMALL MOBILE — 390PX
   ========================================================== */

@media (max-width: 390px) {

    .ms-site-footer__container,
    .ms-site-footer__bottom-inner {

        width:
            calc(100% - 24px);
    }


    .ms-site-footer__main {

        padding-top:
            34px;
    }


    .ms-site-footer__grid {

        gap:
            27px;
    }


    .ms-site-footer__logo-image {

        max-width:
            185px;
    }


    .ms-site-footer__intro {

        font-size:
            14px !important;

        line-height:
            1.85 !important;
    }


    .ms-site-footer__menu a {

        min-height:
            32px;

        font-size:
            14px;
    }


    .ms-site-footer__heading {

        font-size:
            17px !important;
    }


    .ms-site-footer__social-link {

        width:
            36px;

        height:
            36px;
    }


    .ms-site-footer__copyright,
    .ms-site-footer__legal a {

        font-size:
            12px !important;
    }

}