:root {

    /* BG COLOR */

    --body-bg-color: #F6F5FE;
    --footer-bg-color: #E9E7FE;
    --primary-button-bgcolor: #5645F5;
    --nav-button-bgcolor: #5645F5;
    --secondary-button-bgcolor: #2A0079;
    --responsive-nav-bgcolor: #2A0079;
    --nav-bgcolor: background: linear-gradient(188.03deg, #FFFFFF -77.67%, rgba(255, 255, 255, 0.52) 153.4%);


    /* Text Color */

    --slider-text-color: #d3cffc;
    --text-grey-primary: #838197;
    --text-grey-secondary: #5A5775;
    --text-purple: #2A0079;
    --text-white: #FFFFFF;
    --text-paragraph-color: #302D53;
    --text-link-color: #5645F5;
    --text-link-section5-color: #2A0079;
    --text-footer-color: #5A5775;
    --text-darkblue: #302D53;
    --text-gradient: linear-gradient(125.8deg, #9666FF 6.28%, #5645F5 99.52%);

    /* FONT WEIGHT */

    --fw-700: 700;
    --fw-500: 500;
    --fw-400: 400;

    /* FONT SIZES*/

    --fs-12px: 12px;
    --fs-14px: 14px;
    --fs-16px: 1rem;
    --fs-20px: 20px;
    --fs-24px: 1.5rem;
    --fs-72px: 72px;
    --fs-50px: 50px;
    --fs-45px: 45px;
    --fs-40px: 40px;



    /* FONT FAMILY */

    --ff-space-grotesk: "Space Grotesk", sans-serif;
    --ff-Karla: "Karla", sans-serif;
    --ff-Dmsans: "DM Sans", serif;


    /* SPACING */

    --spacing-2px: 2px;
    --spacing-4px: 4px;
    --spacing-5px: 5px;
    --spacing-8px: 0.5rem;
    --spacing-12px: 12px;
    --spacing-10px: 10px;
    --spacing-16px: 1rem;
    --spacing-20px: 20px;
    --spacing-24px: 1.5rem;
    --spacing-28px: 28px;
    --spacing-32px: 2rem;
    --spacing-40px: 40px;
    --spacing-48px: 48px;
    --spacing-50px: 50px;
    --spacing-55px: 55px;
    --spacing-72px: 72px;
    --spacing-147px: 147px;



    /* MAX-WIDTH */

    --standard-width: 1130px;

}


/* LAYOUT STYLES */


.standard-width {

    width: 100%;
    max-width: var(--standard-width);
    /* outline: 2px solid blue; */
    margin: 0 auto;
    padding: 0 var(--spacing-16px);
}

.nav-link .header-link {

    color: var(--text-grey-primary);
    font-weight: var(--fw-500);
    font-size: var(--fs-16px);
    line-height: var(--spacing-24px);
    list-style: none;
    text-decoration: none;


}


h1 {

    font-weight: var(--fw-700);
    font-size: var(--fs-72px);
    line-height: var(--spacing-72px);
    color: var(--text-purple);
    font-family: var(--ff-space-grotesk);

}

h2 {

    font-weight: var(--fw-700);
    font-size: var(--fs-40px);
    line-height: var(--spacing-48px);
    font-family: var(--ff-space-grotesk);
    color: var(--text-purple);

}

h5 {

    font-weight: var(--fw-700);
    font-size: var(--fs-24px);
    line-height: var(--spacing-32px);
    font-family: var(--ff-space-grotesk);
    color: var(--text-purple);

}

h6 {

    font-weight: var(--fw-700);
    font-size: var(--fs-20px);
    line-height: var(--spacing-28px);
    font-family: var(--ff-space-grotesk);
    color: var(--text-purple);

}

p {

    font-family: var(--ff-Karla);
    color: var(--text-darkblue);
    font-weight: var(--fw-400);


}


.primary-button {

    padding: var(--spacing-12px) var(--spacing-24px);
    border-radius: var(--spacing-4px);
    background-color: var(--primary-button-bgcolor);
    color: var(--text-white);
    border: none;

}

.with-icon {

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

}

.secondary-button {

    padding: var(--spacing-8px);
    gap: var(--spacing-5px);
    background-color: var(--secondary-button-bgcolor);
    color: var(--text-white);
    border: none;
    white-space: nowrap;
    border-radius: var(--spacing-4px);

}

.section2 p {

    font-family: var(--ff-Karla);
    font-size: var(--fs-20px);
    line-height: var(--spacing-32px);
    font-weight: var(--fw-400);
    color: var(--text-paragraph-color);

}

.section3 p {
    font-size: var(--fs-16px);
    line-height: var(--spacing-24px);
}


footer p {

    color: var(--text-footer-color);
    font-size: var(--fs-14px);
    line-height: var(--spacing-20px);
    font-family: var(--ff-Karla);
    font-weight: var(--fw-400);

}

.footer-box4 a {

    color: var(--text-footer-color);
    font-size: var(--fs-14px);
    line-height: var(--spacing-20px);
    font-family: var(--ff-Karla);
    font-weight: var(--fw-400);
    text-decoration: none;

}


footer h5 {

    font-size: var(--fs-16px);
    line-height: var(--spacing-24px);
}


/* UNIVERSAL STYLING */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {

    background-color: var(--body-bg-color);

}

html,
body {
    width: 100%;
    position: relative;
    overflow-x: hidden;
}


/* HEADER STYLES */

header {

    .header-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-16px) 0;


        .menu {
            display: none;
        }

        .nav-link {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--spacing-32px);

            li:first-of-type {
                display: flex;
                align-items: center;
                gap: var(--spacing-2px);

            }

            li {
                list-style: none;
            }

        }

        .button-container button:first-of-type {
            background-color: var(--body-bg-color);
            color: #2A0079;
            font-family: var(--ff-Karla);
            font-weight: var(--fw-500);
            font-size: var(--fs-12px);
            line-height: var(--spacing-20px);

        }
    }

}

/* SLIDE NAV */
.slider-nav {
    display: none;
}






/* HERO SECTION */

.hero-section {
    background-image: url("images/BG@2x.png");
    background: linear-gradient(0.19deg, #FFFFFF -235.02%, rgba(255, 255, 255, 0.989583) -234.98%,
            rgba(255, 255, 255, 0) 131.71%);
    position: relative;
    padding: var(--spacing-32px) 0;
    overflow: hidden;

    /* LEFT POSITIONING */
    .americaflag {

        position: absolute;
        top: -20%;
        left: -5%;
        width: 199px;
        height: 199px;
        filter: blur(14px);
    }


    .dollarcash {
        position: absolute;
        top: 35%;
        left: -10%;
        width: 164px;
        height: 164px;
        filter: blur(10px);
    }

    .frenchflag {
        position: absolute;
        bottom: -15%;
        left: -5%;
        width: 199px;
        height: 199px;
        filter: blur(20px);
    }

    /* RIGHT POSITIONING */

    .nigerianflag {
        position: absolute;
        top: -15%;
        right: -5%;
        width: 168px;
        height: 168px;
        filter: blur(20px);

    }

    .eurocash {
        position: absolute;
        top: 35%;
        right: -10%;
        width: 164px;
        height: 164px;
        filter: blur(20px);
    }

    .ghanaflag {
        position: absolute;
        bottom: -15%;
        right: -5%;
        width: 162px;
        height: 162px;
        filter: blur(20px);

    }

    .hero-section-title {
        display: flex;
        margin: 0 auto;

        .illustration1-div {
            max-width: 20%;

            .illustration1 {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: right;
            }
        }

        .illustration2-div {
            max-width: 20%;

            .illustration2 {
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: left;

            }
        }

        .hero-section-title-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            align-content: center;
            gap: var(--spacing-32px);
            text-align: center;
            max-width: 712px;
            min-width: 296px;
            margin: 0 auto;

            h1 {
                text-align: center;
            }


            p:first-of-type {

                font-size: var(--fs-16px);
                line-height: var(--spacing-24px);

            }

            p:last-of-type {
                display: none;
            }

        }

        .app-store-container {
            display: grid;
            place-items: center;
            grid-row: 1rem;
            background: linear-gradient(0.19deg, #FFFFFF -235.02%, rgba(255, 255, 255, 0.989583) -234.98%, rgba(255, 255, 255, 0) 131.71%);


            .available {
                font-size: var(--fs-12px);
                line-height: var(--spacing-16px);
                white-space: nowrap;
            }

            .iconlogo-div {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: var(--spacing-16px);

            }
        }
    }

}

/* PRODUCTS SECTION*/


.section2 {

    padding: var(--spacing-32px) 0;

    .products-info-section2-container {

        text-align: center;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-8px);
        align-items: center;
        width: 100%;
        max-width: 614px;
        margin: 0 auto;



        h2 {
            position: relative;
            max-width: 512px;

            .starimage {
                position: absolute;
                top: 0;
                right: 0;
            }

        }

        p:first-of-type {

            line-height: var(--spacing-24px);
            font-size: var(--fs-16px);

        }

        p:last-of-type {
            display: none;
        }
    }


    .products-section-section2-container {

        --borderradius: 50px;
        --opacity: 40%;
        display: grid;
        grid-template-columns: repeat(2, minmax(320px, 100%));
        grid-template-rows: repeat(3, minmax(376px, auto));
        grid-template-areas: " a a"
            " b b"
            "c c";
        row-gap: var(--spacing-32px);
        margin-top: var(--spacing-32px);
        width: 100%;


        .box1 {
            width: 100%;
            border-radius: var(--borderradius);
            position: relative;
            background-color: #CAC5FC;
            grid-area: a;
            padding-top: var(--spacing-32px);
            padding-left: var(--spacing-32px);


            .box1::after {

                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: var(--borderradius);
                background-image: url("images/topographicbackgroundimage.png");
            }

            .box1-container {
                width: 100%;
                display: flex;
                gap: var(--spacing-147px);

                .multiple-currency-div {
                    z-index: 10;
                    width: 60%;
                    align-self: center;
                    display: flex;
                    flex-direction: column;
                    gap: var(--spacing-16px);

                }



                .images-illustration-section2-box1 {
                    z-index: 10;
                    --borderradius-images-illustration: 4.5px;
                    width: 40%;
                    display: grid;
                    row-gap: var(--spacing-16px);
                    grid-template-columns: repeat(5, 1fr);


                    .ngwallet1 {
                        grid-column: 4 /6;
                        position: relative;
                        border-radius: var(--borderradius-images-illustration);

                        .wallet1 {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                            object-position: right;
                        }

                        .section2-box1-nigeria-cash1-flag {
                            position: absolute;
                            top: -40%;
                            left: -35%;
                            z-index: -1;
                        }
                    }

                    .ngwallet2 {
                        grid-column: 2 / 5;
                        grid-row: 2 / 3;
                        position: relative;

                        .wallet1 {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }

                        .section2-box1-euro-cash2-flag {
                            position: absolute;
                            top: -40%;
                            left: -15%;
                            z-index: -1;
                        }
                    }

                    .ngwallet3 {
                        grid-column: 1 / 4;
                        grid-row: 3 / 4;
                        border-radius: var(--borderradius-images-illustration);
                        position: relative;

                        .wallet1 {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                            object-position: left;
                        }

                        .section2-box1-ghana-cash3-flag {
                            position: absolute;
                            top: -40%;
                            left: -15%;
                            z-index: -1;
                        }
                    }

                }
            }


        }



        .box2-box5-container {

            grid-area: b;
            display: flex;
            gap: var(--spacing-32px);

            .box2-box4-container {

                display: flex;
                flex-direction: column;
                height: 100%;
                gap: var(--spacing-32px);
                width: 50%;

                .box2::after {


                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: var(--borderradius);
                    background-image: url("images/graintexture.png");
                    filter: opacity(var(--opacity));
                }


                .box2 {

                    background-color: #95DBC4;
                    width: 100%;
                    height: 52%;
                    border-radius: var(--borderradius);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    gap: var(--spacing-40px);
                    overflow: hidden;
                    position: relative;



                    .header-explainer-section2-div {

                        padding-top: var(--spacing-40px);
                        padding-left: var(--spacing-32px);
                        padding-right: var(--spacing-16px);

                        h2 {
                            margin-bottom: var(--spacing-16px);
                        }


                    }


                    .section2-imgmockup-div {
                        position: relative;
                        max-width: 100%;

                        .mockup {
                            object-fit: contain;
                            justify-self: center;
                            display: block;
                            width: 100%;
                            height: 100%;
                        }

                        .likecopy {

                            position: absolute;
                            top: -15%;
                            left: 70%;

                        }
                    }


                }

                .box4::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: var(--borderradius);
                    background-image: url("images/graintexture.png");
                    filter: opacity(var(--opacity));
                }

                .box4 {
                    overflow: hidden;
                    position: relative;
                    height: 48%;
                    border-radius: var(--borderradius);
                    background-color: #FEEBB4;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;

                    .header-explanation-products-section4-div {

                        padding-top: var(--spacing-40px);
                        padding-left: var(--spacing-32px);
                        padding-right: var(--spacing-16px);
                        width: 100%;

                        h2 {
                            margin-bottom: var(--spacing-16px);
                        }

                    }

                    .section4-imgmockup-div {
                        max-width: 100%;
                        object-fit: contain;

                        .card {
                            display: block;
                        }
                    }
                }


            }


            .box3-box5-container {
                display: flex;
                flex-direction: column;
                gap: var(--spacing-32px);
                width: 50%;
                height: 100%;


                .box3::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: var(--borderradius);
                    background-image: url("images/graintexture.png");
                    filter: opacity(var(--opacity));

                }

                .box3 {
                    width: 100%;
                    height: 48%;
                    border-radius: var(--borderradius);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    gap: var(--spacing-40px);
                    background-color: #FFADD2;
                    position: relative;
                    overflow: hidden;

                    .header-explanation-products-section3-div {

                        padding-top: var(--spacing-40px);
                        padding-left: var(--spacing-32px);
                        padding-right: var(--spacing-16px);
                        align-self: flex-start;

                        h2 {
                            margin-bottom: var(--spacing-16px);
                        }

                    }

                    .section3-imgmockup-div {
                        position: relative;
                        max-width: 100%;

                        .iphone13 {
                            display: block;
                            object-fit: contain;
                            width: 100%;
                            height: 100%;
                        }

                        .wallet {
                            position: absolute;
                            top: -15%;
                            left: 65%;

                        }
                    }


                }


                .box5::after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border-radius: var(--borderradius);
                    background-image: url("images/graintexture.png");
                    filter: opacity(var(--opacity));

                }

                .box5 {
                    background-color: #B1EDFB;
                    position: relative;
                    width: 100%;
                    height: 52%;
                    border-radius: var(--borderradius);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    overflow: hidden;
                    gap: var(--spacing-40px);


                    .header-explanation-products-section5-div {
                        padding-top: var(--spacing-40px);
                        padding-left: var(--spacing-32px);
                        padding-right: var(--spacing-16px);
                        align-self: flex-start;

                        h2 {
                            margin-bottom: var(--spacing-16px);
                        }
                    }

                    .section5-imgmockup-div {
                        position: relative;
                        max-width: 100%;

                        .iphone14 {
                            display: block;
                            object-fit: contain;
                            width: 100%;
                            height: 100%;
                        }

                        .blue-arrow-icon {
                            position: absolute;
                            top: -15%;
                            left: 65%;

                        }
                    }
                }

            }

        }

        .box6::after {

            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: var(--borderradius);
            background-image: url("images/graintexture.png");
            filter: opacity(var(--opacity));

        }

        .box6 {

            background-color: #FECCAE;
            position: relative;
            max-width: 1130px;
            width: 100%;
            min-height: 400px;
            border-radius: var(--borderradius);
            grid-area: c;
            padding: 0 var(--spacing-32px);

            .aza-tag-section2-box6-container {
                display: flex;
                flex-wrap: wrap;
                gap: var(--spacing-32px);
                justify-content: space-between;

                .aza-tag-info {

                    align-self: center;
                    width: 549px;
                    display: grid;
                    gap: 1rem;

                }

                .aza-tag-profile {
                    max-width: 100%;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

            }

        }

    }
}

/* GET STARTED SECTION*/

.section3 {
    .section3-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;

        .products-title-section3 {
            max-width: 637px;
            width: 100%;
            display: flex;
            gap: var(--spacing-8px);
            flex-direction: column;
            align-items: center;


            h5 {
                position: relative;
                z-index: 10;
                text-align: center;
                font-size: var(--fs-20px);
                background: var(--text-gradient);
                background-clip: text;
                color: transparent;

                .rectangleicon-section3 {
                    position: absolute;
                    bottom: 15%;
                    left: 0;
                    width: 9rem;
                    height: 4px;
                }

            }

            h2 {

                max-width: 436px;
                text-align: center;
                position: relative;

                .imagestar {

                    position: absolute;
                    top: 0;
                    left: 95%;
                }
            }

            p:last-of-type {

                text-align: center;
            }

        }

        .step1-3-section3-container {
            margin: var(--spacing-72px) 0;
            min-height: 383px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            flex-wrap: wrap;
            justify-content: space-between;
            gap: var(--spacing-48px);

            .step1 {

                align-self: flex-start;

                h5 {
                    margin: var(--spacing-16px) 0;
                }

                .step1img {
                    width: 56px;
                    height: 56px;
                }

            }

            .step2 {
                align-self: center;
                position: relative;

                h5 {
                    margin: var(--spacing-16px) 0;
                }

                .arrow1 {

                    position: absolute;
                    top: -55%;
                    left: -75%;
                }

                .step2img {
                    width: 56px;
                    height: 56px;
                }

                img:nth-child(2) {
                    display: none;
                }


            }

            .step3 {
                align-self: flex-end;
                position: relative;

                h5 {
                    margin: var(--spacing-16px) 0;
                }

                .arrow2 {

                    position: absolute;
                    left: -55%;
                    top: -35%;
                }

                .step3img {

                    width: 56px;
                    height: 56px;
                }


                img:nth-child(2) {
                    display: none;
                }

            }


        }

        button {
            gap: var(--spacing-10px);
        }
    }
}



/* FAQ SECTION */

.section4 {
    margin-top: var(--spacing-32px);


    .section4-container {
        max-width: 786px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--spacing-32px);
        align-items: center;
        margin: 0 auto;

        .faq-header-section4 {
            max-width: 388px;
            width: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            position: relative;



            h5 {
                position: relative;
                z-index: 10;
                text-align: center;
                font-size: var(--fs-20px);
                background: var(--text-gradient);
                background-clip: text;
                color: transparent;

                .rectangleicon-section4 {
                    position: absolute;
                    bottom: 15%;
                    left: 0;
                    width: 12.3rem;
                    height: 4px;
                }
            }

            h2 {
                position: relative;
                text-align: center;
                color: var(--heading-color);

                .starimage-section4 {
                    position: absolute;
                    top: 0;
                    right: -8%;
                }
            }


        }

        .faq-questions-section4 {

            display: flex;
            flex-direction: column;
            gap: var(--spacing-24px);
            width: 100%;

            .faq-question1-section4 {

                display: flex;
                justify-content: space-between;

            }

            .faq-answer-section4 {

                max-width: 504px;
                width: 100%;

                p {

                    font-size: var(--fs-16px);
                    line-height: var(--spacing-24px);

                    a {
                        text-decoration: none;
                        color: var(--text-link-color);
                    }
                }
            }

            .faq-question2-section4 {


                display: flex;
                align-items: center;
                justify-content: space-between;

                h6 {
                    margin-top: 0.125rem;
                }
            }

            .faq-question3-section4 {

                display: flex;
                align-items: center;
                justify-content: space-between;

                h6 {

                    font-family: var(--ff--h);
                    margin-top: 0.125rem;

                }
            }

            .faq-question4-section4 {

                display: flex;
                align-items: center;
                justify-content: space-between;

                h6 {

                    margin-top: 0.125rem;

                }
            }
        }

        button {

            gap: var(--spacing-10px);



        }
    }

}


/* SIGN UP SECTION*/

.section5 {

    padding: 4rem 0;


    .section5-container::after {
        content: '';
        width: 100%;
        height: 100%;
        background-image: url("images/BG.png");
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0.7;
    }

    .section5-container {

        margin: auto;
        overflow: hidden;
        position: relative;
        border-radius: var(--spacing-32px);
        background-color: #020110;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0 var(--spacing-16px);
        align-items: center;
        min-height: 416px;

        .signup-section5 {
            z-index: 10;
            max-width: 416px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-48px);

            h2 {
                color: var(--text-white);
            }

            .download-aza-section5 {

                max-width: 284px;
                width: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                gap: 0.25rem;


                p {

                    font-size: var(--fs-12px);
                    line-height: var(--spacing-16px);
                    color: #F6F5FE;
                    white-space: nowrap;
                }

                .link-container {

                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    gap: var(--spacing-8px);

                    p {
                        color: var(--text-darkblue);
                    }


                    button {
                        background-color: #E9E7FE;
                        color: var(--text-link-section5-color);
                    }

                }
            }
        }

        .iphoneimage {
            margin-top: var(--spacing-40px);
            align-self: flex-end;
            z-index: 10;


        }

    }
}


/* FOOTER */

footer {
    background-color: var(--footer-bg-color);
    padding-bottom: var(--spacing-24px);

    .standard-width {

        .footer {
            margin: 0 auto;
            display: flex;
            align-content: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: var(--spacing-24px);
            padding: var(--spacing-32px) 0;

            .footer-box1 {
                max-width: 229px;
                width: 100%;
                display: grid;
                gap: var(--spacing-16px);


            }

            .footer-box2 {
                max-width: 109px;
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: var(--spacing-16px);


            }

            .footer-box3 {
                max-width: 73px;
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: var(--spacing-16px);
            }


            .footer-box4 {
                max-width: 311px;
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: var(--spacing-16px);


                .socialmedialinks-footer {
                    flex-shrink: 0;
                    width: 184px;
                    height: 40px;
                    gap: 0.5rem;
                }

            }
        }

        .footer2 {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--spacing-32px);

            .footer-line {

                max-width: 100%;
                height: 1px;
            }

            .footer-cookies {


                p {
                    text-align: center;
                }
            }

            .footer-appreciation {

                text-align: center;

            }
        }
    }
}







/* TABLET BREAK POINT 950px */
@media only screen and (max-width:950px) {
    :root {
        --h1--: var(--fs-40px);
        --h1-lh--: var(--spacing-48px);
        --h2--: var(--fs-20px);
        --h6-lh--: var(--spacing-48px);
        --h6--: var(--fs-20px);
        --h2-lh--: var(--spacing-28px);
        --p--: var(--fs-14px);
        --p-lh--: var(--spacing-20px);
    }

    p {
        font-size: var(--p--);
        line-height: var(--p-lh--);
    }

    h2 {
        font-size: var(--h2--);
        line-height: var(--h2-lh--);
    }

    /* HEADER STYLES */

    header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 300;
        background-color: white;
        width: 100%;
    }

    header .header-nav .menu {
        display: block;
        width: var(--spacing-32px);
        height: var(--spacing-32px);
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
        background-color: #FFFFFF;
        border: none;


        .bar {
            width: 100%;
            height: 3px;
            border-radius: 2px;
            background-color: var(--nav-button-bgcolor);
        }

    }

    header .header-nav .menu:hover {
        cursor: pointer;

    }

    header .header-nav .button-container {
        display: none;
    }

    header .header-nav .nav-link {
        display: none;
    }


    /* SLIDE NAV */
    .slider-nav {
        display: block;
        background-color: var(--responsive-nav-bgcolor);
        width: 70vw;
        height: 100dvh;
        padding-top: var(--spacing-55px);
        padding-left: var(--spacing-16px);
        padding-right: var(--spacing-16px);
        padding-bottom: var(--spacing-32px);
        position: fixed;
        top: 0;
        right: 0;
        z-index: 100;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transform: translatex(100%);




        .slider-box1 {
            margin: var(--spacing-24px) 0;

            ul {
                display: grid;
                row-gap: var(--spacing-16px);
                margin-bottom: var(--spacing-16px);
                list-style: none;

                li:first-of-type {
                    display: flex;
                    align-items: center;
                    font-size: var(--fs-16px);
                }

                a {
                    line-height: var(--spacing-24px);
                    color: var(--slider-text-color);

                }
            }

            .button-container {
                /* outline: 2px solid red; */
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: var(--spacing-16px);


                button:last-of-type {
                    background-color: #E9E7FE;
                    color: var(--text-link-color);
                }

            }
        }

        .slider-box2 {
            p:last-of-type {
                margin: var(--spacing-16px) 0;
            }

            p {
                color: var(--slider-text-color);
            }
        }

        .slide-par {
            color: var(--slider-text-color);
            text-align: center;
        }
    }

    /* 
    .menubar {
        background-color: #5645F5;
    } */

    .animateBar1 {
        animation: benddown 0.1s linear forwards;
    }

    .animateBar2 {
        visibility: hidden;
    }

    .animateBar3 {
        animation: moveup 0.1s linear forwards;
    }

    .slideNav {
        transform: translatex(0px);
    }


    /* HERO STYLES */

    .hero-section {

        margin-top: var(--spacing-48px);

        h1 {
            font-size: var(--h1--);
            line-height: var(--h1-lh--);
        }

        p {
            font-size: var(--p--);
            line-height: var(--p-lh--);
        }

        /* LEFT POSITIONING */
        .americaflag {
            left: -16% !important;
        }

        .dollarcash {
            display: none;
        }

        .frenchflag {
            left: -15% !important;
        }

        /* RIGHT POSITIONING */
        .nigerianflag {
            right: -10%;
        }

        .eurocash {
            display: none;
        }

        .ghanaflag {
            right: -10%;
        }



    }

    /* PRODUCTS SECTION  */

    .section2 {

        .products-info-section2-container h2 {
            margin-top: var(--spacing-16px);
            width: 222px !important;

            .starimage {
                right: -10% !important;
            }
        }

        .products-section-section2-container {
            grid-template-columns: 100% !important;
            grid-template-areas: "a"
                "b"
                "c" !important;

        }

        .box1 {

            .box1-container {
                flex-direction: column;
                align-items: center !important;
                justify-content: center !important;
                gap: var(--spacing-32px) !important;

                .multiple-currency-div {
                    padding: 0 !important;
                    width: 100% !important;
                }

                .images-illustration-section2-box1 {
                    width: 50% !important;
                }
            }
        }

        .box2-box5-container {
            flex-direction: column;

            .box2-box4-container {
                width: 100% !important;

                .section2-imgmockup-div {
                    width: 253px;
                }

                .box4 {
                    .section4-imgmockup-div {
                        max-width: 100%;

                        .card {
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                        }
                    }
                }
            }

            .box3-box5-container {
                width: 100% !important;

                .section3-imgmockup-div,
                .section5-imgmockup-div {
                    width: 253px;
                }
            }
        }

        .box6 {
            .aza-tag-section2-box6-container {
                align-items: center !important;
                justify-content: center !important;
                gap: var(--spacing-32px) !important;

                .aza-tag-info {
                    padding-top: var(--spacing-32px);
                    width: 100% !important;
                }

                .aza-tag-profile {
                    width: 253px;
                }
            }
        }
    }

    /* GETTING STARTED SECTION */

    .section3 {

        h2 {
            width: 239px;

            .imagestar {
                left: 100% !important;
            }
        }

        .step1-3-section3-container {
            grid-template-columns: 1fr !important;


            .step2,
            .step3 {

                img:first-of-type {
                    display: none !important;

                }

                img:nth-child(2) {
                    display: block !important;
                }

                .arrow1 {

                    position: absolute;
                    width: 120px !important;
                    transform: rotate(110deg);
                    top: -20% !important;
                    left: 60% !important;

                }

            }
        }

    }

    /* FAQ SECTION */
    .section4 h2 {
        margin-top: var(--spacing-16px);
        width: 222px;
    }

    /* SIGN UP SECTION */

    .section5 {

        .signup-section5 {
            padding-top: var(--spacing-16px);
            align-items: center;

            .download-aza-section5 {
                gap: var(--spacing-32px) !important;
            }

            .link-container {
                flex-direction: column;

                button {
                    width: 100px;
                }
            }

            h2 {
                font-size: var(--h2--);
                line-height: var(--h2-lh--);
                text-align: center;
            }
        }

        .iphoneimage {
            max-width: 100%;
            object-fit: contain;
        }
    }
}

@keyframes benddown {
    from {
        transform: skewY(none);
    }

    to {
        transform: skewy(30deg) translateY(0.5rem);
    }
}

@keyframes moveup {
    from {
        transform: skewY(none);
    }

    to {
        transform: skewy(-30deg) translateY(-0.5rem);
    }
}

/* CUSTOM BREAK POINT */
@media only screen and (max-width:700px) {

    /* SLIDE NAV */
    .slider-nav {
        width: 95vw;
    }
}

/* CUSTOM BREAKPOINT 530px */

@media only screen and (max-width:530px) {


    /* PRODUCTS SECTION */
    .section2 .box1 .box1-container .images-illustration-section2-box1 {
        width: 100% !important;
    }
}

@media only screen and (max-width:510px) {

    /* HERO SECTION */
    .hero-section {

        /* LEFT POSITIONING */
        .americaflag {
            top: -25% !important;
            left: -30% !important;
        }

        .frenchflag {
            bottom: -25% !important;
            left: -25% !important;
        }

        /* RIGHT POSITIONING */

        .nigerianflag {
            top: -20%;
            right: -20%;
        }

        .ghanaflag {
            bottom: -20%;
            right: -20%;
        }

    }

}