/* utilities */
.h3{
    text-transform: uppercase;
    margin-bottom: 1rem;
    font-weight: 500;
}

/* resets */

.footer p{
    margin-bottom: 1rem;
}

.btn{
    padding: .45rem 1rem;
    gap: .3rem;
    border: none;
    outline: none;
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
    cursor: pointer;
    display: inline-block;
}

.btnGreen {
    background-color: #7BB20E;
    color: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* footer */
.footerLogoWrap{
    margin-bottom: 1rem;
}

.footerLogoWrap input{
    width: unset !important;
}

.imgLogo{
    width: 50%;
}

.footer{
    min-height: 40vh;
    background-color: #232323;
    overflow: hidden;
    padding: 2rem 3rem;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
}

.footerBrand{
    flex-basis: 30%;
}

.footerCatListing{
    flex-basis: 70%;
    display: flex;
    flex-direction: column;
    justify-self: stretch;
}

.footerCatListing li{
    padding: .3rem 0;
}

.footerCatListingFlex{
    display: flex;
    gap: 1rem;
}

.footerLatestCat, .footerMostCat, .footerInfo{
    flex-basis: 30%;
}

.payment{
    flex-basis: 30%;
}

.listFlex{
    display: flex;
    align-items: center;
    gap: .5rem;
}

.footerMeta{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #141414;
    color: #FFFFFF;
    padding: .7rem 0;
}

.footerForm input{
    padding: .4rem 1rem;
    /* border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem; */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.socialIcons{
    display: flex;
    gap: .7rem;
}

@media screen and (max-width: 860px){
    .footer{
        display: block;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .imgLogo{
        width: 20%;
    }

    .footerCatListing{
        margin-top: 1.5rem;
    }

    .footerLatestCat, .footerMostCat, .footerInfo{
    flex-basis: 32%;
}
}

@media screen and (max-width: 650px){
    .footer{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .imgLogo{
        width: 30%;
    }

    .footerLatestCat, .footerMostCat, .footerInfo{
        flex-basis: 42%;
    }

    .footerCatListingFlex{
        flex-wrap: wrap;
        gap: 2rem;
    }

    .payment{
        margin-top: 1.5rem;
    }

    .footerMeta{
        flex-direction: column;
        gap: 1rem;
    }
}

@media screen and (max-width: 320px){
    .footer{
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .imgLogo{
        width: 35%;
    }

    .footerCatListing, .footerCatListingFlex{
        display: block;
    }
}