/* ==========================================
   FOOTER START
========================================== */

.footer {

    background: #06101C;

    padding: 80px 0 30px;

    border-top: 1px solid rgba(255, 255, 255, .06);

}


/* ==========================================
   FOOTER GRID
========================================== */

/*
   Desktop structure:

   Brand | Trading | Resources | Company | Support & Legal
*/

.footer-grid {

    display: grid;

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

    gap: 40px;

    align-items: start;

}


/* ==========================================
   LOGO
========================================== */

.footer-logo {

    color: #FFFFFF;

    font-size: 32px;

    font-weight: 700;

    margin-bottom: 20px;

}

.footer-about {

    color: #9CB0CC;

    line-height: 1.8;

    margin-bottom: 30px;

    max-width: 360px;

}


/* ==========================================
   PAYMENT METHODS
========================================== */

.payment-methods {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}

.payment-methods span {

    display: inline-block;

    padding: 10px 15px;

    background: #13233D;

    color: #FFFFFF;

    border-radius: 8px;

    font-size: 14px;

}


/* ==========================================
   FOOTER HEADINGS
========================================== */

.footer-col h3 {

    color: #FFFFFF;

    margin-bottom: 18px;

    font-size: 20px;

}


/* ==========================================
   FOOTER LINKS
========================================== */

.footer-col ul {

    list-style: none;

    margin: 0;

    padding: 0;

}

.footer-col li {

    margin-bottom: 14px;

}

.footer-col a {

    color: #9CB0CC;

    text-decoration: none;

    transition:

        color .3s ease,

        transform .3s ease;

}

.footer-col a:hover {

    color: #39A8FF;

}


/* ==========================================
   SOCIAL MEDIA
========================================== */

.footer-social {

    margin-top: 25px;

}

.footer-social h3 {

    margin-bottom: 12px;

}

.social-icons {

    display: flex;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

}

.social-icons a {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    transition:

        transform .2s ease,

        opacity .2s ease;

}

.social-icons a img {

    width: 40px;

    height: 40px;

    min-width: 40px;

    min-height: 40px;

    max-width: 40px;

    max-height: 40px;

    object-fit: contain;

    display: block;

}


/* ==========================================
   SOCIAL HOVER
========================================== */

.social-icons a:hover {

    transform:

        translateY(-6px) scale(1.08);

    filter: brightness(1.08);

    box-shadow:

        0 10px 25px rgba(0, 0, 0, .22),

        0 0 18px rgba(255, 255, 255, .08);

}

.social-icons a:hover img {

    transform: scale(1.05);

}


/* ==========================================
   SOCIAL CLICK
========================================== */

.social-icons a:active {

    transform:

        translateY(-2px) scale(.96);

}




/* =========================================================
   SOCIAL + DOWNLOAD APP ROW
========================================================= */

.footer-social-app-row {

    display: flex;

    align-items: flex-start;

    gap: 45px;

    margin-top: 25px;

}


/* =========================================================
   FOLLOW US
========================================================= */

.footer-social {

    margin-top: 0;

    flex-shrink: 0;

}

.footer-social h3 {

    margin-bottom: 12px;

}


/* =========================================================
   DOWNLOAD APP
========================================================= */

.footer-download-app {

    min-width: 0;

}

.footer-download-app h3 {

    color: #FFFFFF;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.3;

    margin: 0 0 10px;

}

.footer-download-app>p {

    color: #9CB0CC;

    font-size: 13px;

    line-height: 1.6;

    margin: 0 0 14px;

    max-width: 230px;

}


/* =========================================================
   APP BUTTONS — DESKTOP
========================================================= */

.footer-app-buttons {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 10px;

}


/* =========================================================
   APP BUTTON
========================================================= */

.footer-app-button {

    width: 145px;

    min-height: 54px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 8px 11px;

    background: #101F35;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 9px;

    color: #FFFFFF;

    text-decoration: none;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


/* =========================================================
   APP ICON
========================================================= */

.footer-app-button>i {

    width: 26px;

    flex-shrink: 0;

    text-align: center;

    color: #39A8FF;

    font-size: 25px;

}


/* =========================================================
   APP TEXT
========================================================= */

.footer-app-button span {

    min-width: 0;

    display: flex;

    flex-direction: column;

    line-height: 1.1;

}

.footer-app-button small {

    color: #9CB0CC;

    font-size: 7px;

    font-weight: 500;

    letter-spacing: .35px;

    margin-bottom: 4px;

    white-space: nowrap;

}

.footer-app-button strong {

    color: #FFFFFF;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

}


/* =========================================================
   HOVER
========================================================= */

.footer-app-button:hover {

    transform: translateY(-3px);

    background: #132943;

    border-color: rgba(57, 168, 255, .45);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .22);

}


/* =========================================================
   CLICK
========================================================= */

.footer-app-button:active {

    transform:
        translateY(-1px) scale(.98);

}


/* ==========================================
   FOOTER BOTTOM
========================================== */

.footer-bottom {

    margin-top: 60px;

    padding-top: 25px;

    border-top: 1px solid rgba(255, 255, 255, .08);

    text-align: center;

}

.footer-bottom p {

    color: #8092AD;

    font-size: 14px;

}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 992px) {

    .footer {

        padding: 70px 0 30px;

    }


    /*
       Tablet:

       Brand
       Trading

       Resources
       Company

       Support & Legal
    */

    .footer-grid {

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

        gap: 35px;

    }


    /*
       Brand section stays full width
       so navigation starts cleanly below it.
    */

    .footer-grid .footer-col:first-child {

        grid-column: 1 / -1;

    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 576px) {

    .footer {

        padding: 55px 0 25px;

    }


    /*
       Mobile structure:

       BRAND
       ----------------

       Trading       Resources
       Company       Support & Legal
    */

    .footer-grid {

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

        gap: 25px;

    }


    /* ======================================
       BRAND FULL WIDTH
    ====================================== */

    .footer-grid .footer-col:first-child {

        grid-column: 1 / -1;

    }


    /* ======================================
       MOBILE CENTER ALIGNMENT
    ====================================== */

    .footer-grid .footer-col {

        text-align: center;

    }


    .footer-grid .footer-col:first-child {

        text-align: center;

    }


    /* ======================================
       LOGO
    ====================================== */

    .footer-logo {

        font-size: 28px;

        text-align: center;

    }


    /* ======================================
       ABOUT
    ====================================== */

    .footer-about {

        max-width: 100%;

        margin-left: auto;

        margin-right: auto;

        font-size: 15px;

        text-align: center;

    }


    /* ======================================
       PAYMENT METHODS
    ====================================== */

    .payment-methods {

        justify-content: center;

        gap: 8px;

    }

    .payment-methods span {

        font-size: 12px;

        padding: 8px 12px;

    }


    /* ======================================
       SOCIAL
    ====================================== */

    .footer-social {

        text-align: center;

    }

    .footer-social h3 {

        margin-bottom: 12px;

        text-align: center;

    }

    .social-icons {

        justify-content: center;

        align-items: center;

    }


    /* ======================================
       FOOTER HEADINGS
    ====================================== */

    .footer-col h3 {

        font-size: 18px;

        text-align: center;

    }


    /* ======================================
       FOOTER LIST
    ====================================== */

    .footer-col ul {

        text-align: center;

    }

    .footer-col li {

        margin-bottom: 10px;

        text-align: center;

    }

    .footer-col a {

        display: inline-block;

        font-size: 14px;

        text-align: center;

    }


    /* ======================================
       FOOTER BOTTOM
    ====================================== */

    .footer-bottom {

        margin-top: 40px;

        text-align: center;

    }

    .footer-bottom p {

        text-align: center;

    }

    /* ======================================
   DOWNLOAD APP — MOBILE
====================================== */

    .footer-download-app {

        width: 100%;

        max-width: 230px;

        text-align: center;

    }

    .footer-download-app h3 {

        text-align: center;

    }

    .footer-download-app>p {

        max-width: 230px;

        margin-left: auto;

        margin-right: auto;

        text-align: center;

    }


    .footer-app-buttons {

        flex-direction: column;

        align-items: center;

        gap: 10px;

    }


    .footer-app-button {

        width: 190px;

        margin-left: auto;

        margin-right: auto;

    }

    /* ======================================
   SOCIAL + DOWNLOAD APP
====================================== */

    .footer-social-app-row {

        flex-direction: column;

        align-items: center;

        gap: 30px;

        width: 100%;

    }

    .footer-social {

        width: 100%;

        text-align: center;

    }

    .footer-download-app {

        width: 100%;

        max-width: 220px;

        text-align: center;

    }

    .footer-download-app h3 {

        text-align: center;

    }

    .footer-download-app>p {

        max-width: 220px;

        margin-left: auto;

        margin-right: auto;

        text-align: center;

    }

    .footer-app-button {

        width: 190px;

        margin-left: auto;

        margin-right: auto;

    }

}


/* ==========================================
   FOOTER END
========================================== */