/*
|--------------------------------------------------------------------------
| FACEVALY FULL FOOTER — DESKTOP + MOBILE
|--------------------------------------------------------------------------
*/

.fv-footer {
    display:
        block;

    width:
        100%;

    background:
        #ffffff;

    color:
        #172255;
}


.fv-footer-container {
    width:
        min(
            1190px,
            calc(
                100% - 32px
            )
        );

    margin-inline:
        auto;
}


.fv-footer h3,
.fv-footer h4,
.fv-footer p {
    margin-top:
        0;
}


.fv-footer a {
    color:
        inherit;

    text-decoration:
        none;
}


.fv-footer a:hover {
    color:
        #ff5a00;
}


/*
|--------------------------------------------------------------------------
| SECTION 1
|--------------------------------------------------------------------------
*/

.fv-footer-top {
    padding:
        53px
        0
        35px;

    background:
        #f3f3f5;
}


.fv-footer-top-grid {
    display:
        grid;

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

    gap:
        78px;
}


.fv-footer-link-column h3 {
    margin-bottom:
        14px;

    color:
        #172255;

    font-size:
        16px;

    font-weight:
        600;
}


.fv-footer-link-column nav {
    display:
        flex;

    flex-direction:
        column;

    gap:
        6px;
}


.fv-footer-link-column nav a {
    width:
        fit-content;

    color:
        #152060;

    font-size:
        12px;

    line-height:
        1.25;
}


/*
|--------------------------------------------------------------------------
| APP
|--------------------------------------------------------------------------
*/

.fv-footer-app-column {
    padding-top:
        3px;
}


.fv-footer-app-brand {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.fv-footer-app-brand img {
    width:
        38px;

    height:
        38px;

    object-fit:
        contain;
}


.fv-footer-app-brand > div {
    display:
        flex;

    flex-direction:
        column;

    gap:
        2px;
}


.fv-footer-app-brand strong {
    color:
        #ff5a00;

    font-size:
        15px;

    font-weight:
        700;
}


.fv-footer-app-brand span {
    color:
        #172255;

    font-size:
        12px;
}


.fv-footer-app-badges {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        9px;

    margin-top:
        12px;
}


.fv-footer-app-badges a {
    min-width:
        122px;

    min-height:
        40px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        5px
        10px;

    border-radius:
        5px;

    background:
        #050505;

    color:
        #ffffff;
}


.fv-footer-app-badges a:hover {
    color:
        #ffffff;

    opacity:
        .92;
}


.fv-footer-app-badges a > i {
    font-size:
        20px;
}


.fv-footer-app-badges a > span {
    display:
        flex;

    flex-direction:
        column;
}


.fv-footer-app-badges small {
    font-size:
        6px;
}


.fv-footer-app-badges strong {
    font-size:
        12px;
}


/*
|--------------------------------------------------------------------------
| SECTION 2
|--------------------------------------------------------------------------
*/

.fv-footer-payments {
    padding:
        28px
        0
        34px;

    background:
        #ffffff;
}


.fv-footer-payment-grid {
    display:
        grid;

    grid-template-columns:
        1.45fr
        .72fr
        1fr;

    align-items:
        start;

    gap:
        70px;
}


.fv-footer-payments h3 {
    margin-bottom:
        14px;

    color:
        #172255;

    font-size:
        16px;

    font-weight:
        500;
}


.fv-footer-payment-list {
    max-width:
        360px;

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;
}


.fv-footer-payment-list span {
    min-width:
        64px;

    height:
        34px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    padding:
        0
        8px;

    border:
        1px solid
        #e3e5e8;

    border-radius:
        4px;

    background:
        #ffffff;
}


.fv-footer-payment-list i {
    color:
        #ff5a00;

    font-size:
        17px;
}


.fv-footer-payment-list b {
    color:
        #172255;

    font-size:
        9px;
}


.fv-footer-verified > div {
    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #3a6563;
}


.fv-footer-verified > div i {
    color:
        #2ea862;

    font-size:
        22px;
}


.fv-footer-verified > div strong {
    font-size:
        22px;
}


.fv-footer-dbid p {
    color:
        #9ba0a7;

    font-size:
        11px;

    line-height:
        1.35;
}


/*
|--------------------------------------------------------------------------
| SECTION 3
|--------------------------------------------------------------------------
*/

.fv-footer-discovery {
    padding:
        44px
        0
        48px;

    background:
        #f4f4f6;
}


.fv-footer-discovery-grid {
    display:
        grid;

    grid-template-columns:
        1.05fr
        1fr
        1fr
        .92fr;

    align-items:
        start;

    gap:
        42px;
}


.fv-footer-big-heading {
    margin-bottom:
        13px;

    color:
        #3b4050;

    font-size:
        16px;

    line-height:
        1.28;

    font-weight:
        500;
}


.fv-footer-discovery p {
    margin-bottom:
        13px;

    color:
        #81858f;

    font-size:
        10px;

    line-height:
        1.45;
}


.fv-footer-trending-title {
    margin:
        17px
        0
        7px;

    color:
        #494d58;

    font-size:
        16px;

    font-weight:
        500;
}


.fv-footer-trending-links a {
    color:
        #777d88;
}


.fv-footer-dynamic-column {
    min-width:
        0;
}


.fv-footer-dynamic-category {
    margin-bottom:
        13px;
}


.fv-footer-dynamic-category h4,
.fv-footer-popular-brands h4,
.fv-footer-best-title {
    margin-bottom:
        4px;

    color:
        #676c77;

    font-size:
        9px;

    font-weight:
        500;

    text-transform:
        uppercase;
}


.fv-footer-dynamic-category p {
    margin:
        0;

    color:
        #80858f;

    font-size:
        10px;

    line-height:
        1.4;
}


.fv-footer-popular-brands {
    margin-top:
        18px;
}


.fv-footer-popular-brands p {
    margin:
        0;
}


.fv-footer-best-title {
    margin-top:
        13px;

    margin-bottom:
        6px;
}


.fv-footer-best-products {
    margin:
        0;

    color:
        #81858f;

    font-size:
        10px;

    line-height:
        1.48;
}


.fv-footer-empty-copy {
    min-height:
        55px;

    color:
        #a0a5ad !important;

    font-size:
        9px !important;
}


.fv-footer-loading {
    min-height:
        80px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    color:
        #ff5a00;

    font-size:
        9px;
}


/*
|--------------------------------------------------------------------------
| SECTION 4
|--------------------------------------------------------------------------
*/

.fv-footer-bottom {
    padding:
        24px
        0
        29px;

    background:
        #ffffff;
}


.fv-footer-bottom-grid {
    display:
        grid;

    grid-template-columns:
        1.3fr
        1fr
        .8fr;

    align-items:
        center;

    gap:
        45px;
}


.fv-footer-bottom h3 {
    margin-bottom:
        12px;

    color:
        #172255;

    font-size:
        16px;

    font-weight:
        500;
}


.fv-footer-country-list {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;
}


.fv-footer-country-list span {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    color:
        #888d96;

    font-size:
        10px;
}


.fv-footer-country-list b {
    color:
        #a5a9af;

    font-size:
        7px;
}


.fv-footer-social-list {
    display:
        flex;

    gap:
        9px;
}


.fv-footer-social-list a {
    width:
        29px;

    height:
        29px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        #ffffff;

    font-size:
        12px;
}


.fv-footer-social-list a:nth-child(1) {
    background:
        #2879d3;
}


.fv-footer-social-list a:nth-child(2) {
    background:
        #ed2317;
}


.fv-footer-social-list a:nth-child(3) {
    background:
        #2b9ce4;
}


.fv-footer-social-list a:nth-child(4) {
    background:
        linear-gradient(
            135deg,
            #6646e8,
            #f54188,
            #ff9b2f
        );
}


.fv-footer-copy {
    color:
        #454b55;

    font-size:
        13px;

    text-align:
        right;
}


/*
|--------------------------------------------------------------------------
| TABLET
|--------------------------------------------------------------------------
*/

@media (
    max-width: 1050px
)
and (
    min-width: 768px
) {

    .fv-footer-top-grid {
        gap:
            35px;
    }


    .fv-footer-payment-grid {
        gap:
            35px;
    }


    .fv-footer-discovery-grid {
        grid-template-columns:
            1fr
            1fr;

        gap:
            30px;
    }

}


/*
|--------------------------------------------------------------------------
| MOBILE — FULL FOOTER IS NOW VISIBLE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 767px
) {

    /*
     * IMPORTANT FIX:
     *
     * The old CSS had:
     *
     * .fv-footer { display:none; }
     *
     * which is why the whole footer disappeared on mobile.
     */
    .fv-footer {
        display:
            block !important;

        padding-bottom:
            72px;
    }


    .fv-footer-container {
        width:
            100%;

        padding-inline:
            14px;
    }


    /*
    |--------------------------------------------------------------------------
    | TOP
    |--------------------------------------------------------------------------
    */

    .fv-footer-top {
        padding:
            27px
            0
            24px;
    }


    .fv-footer-top-grid {
        grid-template-columns:
            1fr
            1fr;

        gap:
            25px
            17px;
    }


    .fv-footer-link-column h3 {
        margin-bottom:
            10px;

        font-size:
            13px;
    }


    .fv-footer-link-column nav {
        gap:
            6px;
    }


    .fv-footer-link-column nav a {
        font-size:
            9px;

        line-height:
            1.25;
    }


    .fv-footer-app-column {
        grid-column:
            1
            /
            -1;

        padding-top:
            5px;

        border-top:
            1px solid
            #e4e5e8;
    }


    .fv-footer-app-brand {
        margin-top:
            15px;
    }


    .fv-footer-app-brand img {
        width:
            34px;

        height:
            34px;
    }


    .fv-footer-app-brand strong {
        font-size:
            13px;
    }


    .fv-footer-app-brand span {
        font-size:
            9px;
    }


    .fv-footer-app-badges {
        gap:
            6px;
    }


    .fv-footer-app-badges a {
        min-width:
            0;

        flex:
            1
            1
            30%;

        min-height:
            37px;

        padding:
            4px
            7px;
    }


    .fv-footer-app-badges a > i {
        font-size:
            16px;
    }


    .fv-footer-app-badges small {
        font-size:
            5px;
    }


    .fv-footer-app-badges strong {
        font-size:
            9px;
    }


    /*
    |--------------------------------------------------------------------------
    | PAYMENT
    |--------------------------------------------------------------------------
    */

    .fv-footer-payments {
        padding:
            22px
            0;
    }


    .fv-footer-payment-grid {
        grid-template-columns:
            1fr
            1fr;

        gap:
            24px
            18px;
    }


    .fv-footer-payment-grid > div:first-child {
        grid-column:
            1
            /
            -1;
    }


    .fv-footer-payments h3 {
        margin-bottom:
            10px;

        font-size:
            13px;
    }


    .fv-footer-payment-list {
        max-width:
            none;
    }


    .fv-footer-payment-list span {
        min-width:
            60px;

        height:
            31px;
    }


    .fv-footer-payment-list i {
        font-size:
            14px;
    }


    .fv-footer-payment-list b {
        font-size:
            8px;
    }


    .fv-footer-verified > div i {
        font-size:
            18px;
    }


    .fv-footer-verified > div strong {
        font-size:
            17px;
    }


    .fv-footer-dbid p {
        font-size:
            9px;
    }


    /*
    |--------------------------------------------------------------------------
    | DISCOVERY
    |--------------------------------------------------------------------------
    */

    .fv-footer-discovery {
        padding:
            26px
            0
            28px;
    }


    .fv-footer-discovery-grid {
        grid-template-columns:
            1fr;

        gap:
            23px;
    }


    .fv-footer-big-heading {
        margin-bottom:
            10px;

        font-size:
            14px;
    }


    .fv-footer-discovery p {
        font-size:
            9px;

        line-height:
            1.5;
    }


    .fv-footer-trending-title {
        margin-top:
            13px;

        font-size:
            14px;
    }


    /*
     * Make dynamic categories visibly distinct on mobile.
     */
    .fv-footer-dynamic-column {
        padding-top:
            3px;
    }


    .fv-footer-dynamic-category {
        margin-bottom:
            11px;

        padding-bottom:
            10px;

        border-bottom:
            1px dashed
            #dbdde1;
    }


    .fv-footer-dynamic-category:last-of-type {
        border-bottom:
            0;
    }


    .fv-footer-dynamic-category h4,
    .fv-footer-popular-brands h4,
    .fv-footer-best-title {
        font-size:
            8px;
    }


    .fv-footer-dynamic-category p,
    .fv-footer-best-products {
        font-size:
            9px;

        line-height:
            1.5;
    }


    .fv-footer-best-products a {
        display:
            inline;
    }


    /*
    |--------------------------------------------------------------------------
    | BOTTOM
    |--------------------------------------------------------------------------
    */

    .fv-footer-bottom {
        padding:
            23px
            0
            25px;
    }


    .fv-footer-bottom-grid {
        grid-template-columns:
            1fr;

        gap:
            20px;
    }


    .fv-footer-bottom h3 {
        margin-bottom:
            9px;

        font-size:
            13px;
    }


    .fv-footer-country-list {
        gap:
            9px;
    }


    .fv-footer-country-list span {
        font-size:
            9px;
    }


    .fv-footer-copy {
        padding-top:
            14px;

        border-top:
            1px solid
            #ededed;

        font-size:
            10px;

        text-align:
            left;
    }

}


/*
|--------------------------------------------------------------------------
| VERY SMALL MOBILE
|--------------------------------------------------------------------------
*/

@media (
    max-width: 360px
) {

    .fv-footer-top-grid {
        grid-template-columns:
            1fr;
    }


    .fv-footer-app-column {
        grid-column:
            auto;
    }


    .fv-footer-payment-grid {
        grid-template-columns:
            1fr;
    }


    .fv-footer-payment-grid > div:first-child {
        grid-column:
            auto;
    }


    .fv-footer-app-badges a {
        flex-basis:
            100%;
    }

}


/*
|--------------------------------------------------------------------------
| REAL PAYMENT LOGOS
|--------------------------------------------------------------------------
*/

.fv-footer-payment-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}


.fv-footer-payment-badge {
    width: 72px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    border: 1px solid #e5e7eb;
    border-radius: 6px;

    background: #ffffff;

    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}


.fv-footer-payment-badge:hover {
    transform: translateY(-2px);

    border-color: #ff587d;

    box-shadow:
        0 5px 14px
        rgba(15, 23, 42, 0.08);
}


/*
|--------------------------------------------------------------------------
| ONLINE LOGO
|--------------------------------------------------------------------------
*/

.fv-footer-payment-image img {
    width: 100%;
    height: 100%;

    display: block;

    padding: 5px 7px;

    object-fit: contain;
    object-position: center;

    background: #ffffff;

    user-select: none;
    -webkit-user-drag: none;
}


/*
|--------------------------------------------------------------------------
| VISA
|--------------------------------------------------------------------------
*/

.fv-footer-payment-image.is-visa img {
    padding: 2px;

    object-fit: cover;
}


/*
|--------------------------------------------------------------------------
| MASTERCARD
|--------------------------------------------------------------------------
*/

.fv-footer-payment-image.is-mastercard img {
    padding: 8px 12px;

    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| AMEX
|--------------------------------------------------------------------------
*/

.fv-footer-payment-image.is-amex img {
    padding: 5px 8px;

    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| BKASH
|--------------------------------------------------------------------------
*/

.fv-footer-payment-image.is-bkash img {
    padding: 5px 7px;

    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| NAGAD
|--------------------------------------------------------------------------
*/

.fv-footer-payment-image.is-nagad img {
    width: 29px;
    height: 29px;

    padding: 0;

    object-fit: contain;
}


/*
|--------------------------------------------------------------------------
| ROCKET
|--------------------------------------------------------------------------
|
| Rocket official artwork is a wide banner.
|--------------------------------------------------------------------------
*/

.fv-footer-payment-image.is-rocket {
    width: 92px;
}


.fv-footer-payment-image.is-rocket img {
    padding: 0;

    object-fit: cover;

    object-position: left center;
}


/*
|--------------------------------------------------------------------------
| COD / EMI
|--------------------------------------------------------------------------
*/

.fv-footer-payment-generic {
    gap: 5px;

    padding: 0 6px;

    color: #323943;
}


.fv-footer-payment-generic i {
    color: #ff587d;

    font-size: 15px;
}


.fv-footer-payment-generic b {
    font-size: 10px;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| FAILED REMOTE IMAGE FALLBACK
|--------------------------------------------------------------------------
*/

.fv-footer-payment-fallback {
    padding: 0 5px;

    color: #313844;

    font-size: 10px;
    font-weight: 700;

    text-align: center;
}


/*
|--------------------------------------------------------------------------
| COPYRIGHT + DEVELOPER
|--------------------------------------------------------------------------
*/

.fv-footer-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 5px;
}


.fv-footer-developed-by {
    color: #8b919a;

    font-size: 11px;
}


.fv-footer-developed-by strong {
    color: #ff587d;

    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width: 720px) {

    .fv-footer-payment-badge {
        width: 64px;
        height: 39px;
    }


    .fv-footer-payment-image.is-rocket {
        width: 82px;
    }


    .fv-footer-copy {
        align-items: flex-start;
    }

}