@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;1,100&display=swap);

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

html{
    font-size: 62.5%;
    font-family:'Poppins', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

/* Dark-light theme colors */

.dark-mode--theme{
    background:rgb(11, 14, 17);
}

.dark-mode--theme .navigation{
    background:#181A20;
}

.dark-mode--theme .navigation__mega-menu{
    background:#1E2329;
}
.dark-mode--theme .navigation__mega-menu--item:hover{
    background:#2B3139;
}

.dark-mode--theme .theme--text{
    color:rgb(234, 236, 239);
}

.dark-mode--theme .theme--text-light{
    color:#B7BDC6;
}

.dark-mode--theme .navigation__main--item span{
    color:rgb(234, 236, 239);
}

.dark-mode--theme .header{
    background-color:rgb(11, 14, 17);
}
.dark-mode--theme .redeem-gift{
    background:rgb(60, 38, 1);
}

.dark-mode--theme .dark-mode-background{
    background:#181A20;
}
.dark-mode--theme .popular-cryptocurrencies__content--item__data:hover{
    background:#2B3139;
}

.dark-mode--theme .trade-bitcoin .max-wrapper__content{
    background:#281A00;
}

.dark-mode--theme .daily-rewards__content--card{
    background:rgb(43, 49, 57);
}

.dark-mode--theme .daily-rewards__content--card:hover{
    background:rgb(24, 26, 32);
}

.dark-mode--theme .daily-rewards__content--card:hover{
    background:rgb(24, 26, 32);
}

.dark-mode--theme .daily-rewards__content--card:hover .daily-rewards__content--card__footer--trailing{
    background:rgb(252, 213, 53);
}

.dark-mode--theme .daily-rewards__content--card .daily-rewards__content--card__footer--trailing{
    background:rgb(30, 35, 41);
}

.dark-mode--theme .daily-rewards__content--card:hover .daily-rewards__content--card__footer--trailing svg{
    color:rgb(11, 14, 17);
}

.dark-mode--theme .explore__content--card{
    background:#0B0E11;
}

.dark-mode--theme .trade__content--download__apps--app > div:hover{
    background:#2B3139;
}

.dark-mode--theme .trade__content--download__apps--app > div svg{
    color:#EAECEF;
}

.dark-mode--theme .trade__content--download__apps--app > div p{
    color:#EAECEF;
}

.dark-mode--theme .trade__content--download__scan{
    background:#0B0E11;
}

.dark-mode--theme .earn{
    background:#0B0E11;
}

.dark-mode--theme .header__main--content__auth-btn--btn{
    background:#474D57;
    color:#EAECEF;
}

.dark-mode--theme .header__main--content__auth-btn--btn svg{
    fill:#EAECEF;
}

.dark-mode--theme .header__main--content__continue p{
    padding:0 10px;
    color:#848E9C;
}
.dark-mode--theme .header__main--content__continue span{
    flex:1;
    height:1px;
    background:#848E9C;
}

.dark-mode--theme .mobile-navigation{
    background-color:rgb(30, 35, 41);
}

.dark-mode--theme .mobile-navigation__settings--item:hover{
    background-color: rgb(43, 49, 57);
}

.dark-mode--theme .mobile-navigation__settings--item__theme-btn{
    background:rgb(71, 77, 87);
}

.dark-mode--theme .mobile-navigation__settings--item__theme-btn > div > svg{
    color:rgb(132, 142, 156);
}

.dark-mode--theme  .mobile-navigation__main--item__title:hover{
    background-color:rgb(43, 49, 57);
}
.dark-mode--theme  .mobile-navigation__main--item__body--item:hover{
    background-color:rgb(43, 49, 57);
}

.green--text-color{
    color:rgb(3, 166, 109);
}
.red--text-color{
    color:rgb(207, 48, 74);
}

/* Font families */

:root{
    --primary-font:'Poppins', sans-serif;
    --secondary-font:'Roboto', sans-serif;
    --tertiary-font:'Oswald', sans-serif;
}

/* Element colors */

:root{
    --yellow-dark:rgb(201, 148, 0);
    --yellow-strong:rgb(240, 185, 11);
}

/* Hover colors */

:root{
    --yellow-light-hover:rgb(240, 185, 11);
    --yellow-dark-hover:rgb(201,148,0);
}

.std-title-more:hover{
    color:#F0B90B;
}

/* Max wrappers utility class */

.max-wrapper{
    max-width:1600px;
    margin:0 auto;
}
.max-wrapper__content{
    width:90%;
    margin:0 auto;
}
.std-top-space{
    padding-top: 10rem;
}
.std-title{
    font-size: 4rem;
    color:rgb(30, 35, 41);
    font-weight:600;
}
.std-subtitle{
    font-weight:400;
    font-size:1.8rem;
    color:#474D57;
    padding-top:8px;
}
@media screen and (max-width:1024px){
    .std-title{
        font-size: 3.2rem;
    }
}
@media screen and (max-width:768px){
    .std-title{
        font-size: 2.5rem;
    }
    .std-subtitle{
        font-size:1.6rem;
    }
}

/* Button Style */

.btn{
    padding: 1.3rem;
    background: #FBD849;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    border-radius: 5px;
    width: 100%;
    max-width:20rem;
    font-weight: 500;
    font-family: var(--secondary-font);
}
@media screen and (max-width:768px){
    .btn{
        max-width: 100%;
    }
}

/* Mobile Banner */

.mobile-banner{
    background:rgba(18, 22, 28, 0.9);
    padding:1.4rem 1.6rem;
    display:flex;
    justify-content: space-between;
    display:none;
    z-index:9999;
}
.mobile-banner__main{
    display:flex;
    color:#fff;
}
.mobile-banner__main--title{
    margin-left:1rem;
}
.mobile-banner__main--title h2{
    font-weight:600;
    letter-spacing: .9px;
}
.mobile-banner__main--title p{
    font-size:1.35rem;
}
.mobile-banner__sub{
    display:flex;
    align-items: center;
    column-gap: 1rem;
}
.mobile-banner__sub--download{
    background: var(--yellow-strong);
    border-radius: 30rem;
    width:3.6rem;
    height:3.6rem;
    padding:8px;
}
.mobile-banner__sub--cancel{
    height:2rem;
    width:2rem;
}
.mobile-banner__sub--cancel svg{
    fill: #fff;
    color:#fff;   
}

@media screen and (max-width:1024px){
    .mobile-banner{
        display:flex;
        position:sticky;
        top:0;
    }
}


/* Banner */

.banner{
    padding: 1.6rem;
    font-size: 1.5rem;
    background:rgb(43, 49, 57);
    color:#fff;
    display:grid;
    place-items:center;
    font-weight:500;
    position:sticky;
    top:0;
    width:100%;
    z-index:9999;
}
.banner__content{
    display:flex;
    column-gap:2rem;
    align-items: center;
}
.banner__content--btn{
    display:flex;
    align-items:center;
}
.banner__content--btn__continue{
    padding: 5px 1.6rem;
    background:rgb(71, 77, 87);
    font-size:1.2rem;
    border-radius: 4px;
    margin-right:1rem;
}
.banner__content--btn__cancel{
    height:2rem;
    width:2rem;
}
.banner__content--btn__cancel svg{
    fill: rgb(118, 128, 143);
    color:rgb(118, 128, 143);
}
.banner__content--main__country{
    color:var(--yellow-dark);
}

@media screen and (max-width:1024px){
    .banner{
        position:static;
        z-index:9999;
    }
}

/* Navigation */

.navigation{
    padding:0 2rem;
    display:flex;
    align-items: center;
    cursor:pointer;
    position:relative;
}
.navigation__logo{
    margin-right: 2rem;
}
@media screen and (max-width:1080px){
    .navigation__logo{
        padding:2rem 0;
    }
}
.navigation__logo svg{
    fill: var(--yellow-strong);
    color: var(--yellow-strong);
    width:120px;
    height:24px;
}
.navigation__main{
    display:flex;
}
@media screen and (max-width:1080px){
    .navigation__main{
        display:none;
    }
}
.navigation__main--item{
    padding: 2rem 0;
    display:flex;
    align-items: center;
    transition: 100ms ease;
    font-family: var(--secondary-font);
    font-size:1.5rem;
    white-space:nowrap;
}
.navigation__main--item:not(:last-child){
    margin-right: 1.2rem;
}
.navigation__main--item:hover > span{
    color:var(--yellow-light-hover);
}
.navigation__main--item:hover .navigation__main--item__apps{
    color:var(--yellow-light-hover);
}
.navigation__main--item:hover .navigation__main--item__dropdown{
    transform: rotate(-180deg);
}
.navigation__main--item__dropdown{
    color:#707A8A;
    transition: 250ms ease;
}
.navigation__sub{
    display:flex;
    align-items: center;
    font-size:1.5rem;
    margin-left: auto;
}
.navigation__sub--auth{
    display:flex;
    align-items: center;
}
@media screen and (max-width:320px){
    .navigation__sub--auth{
        display:none;
    }    
}
.navigation__sub--auth__btn{
    display:flex;
    align-items: center;
    padding:6px 12px;
    color:rgb(24,26,32);
    border-radius: 4px;
    font-size:1.4rem;
    margin-right: 2rem;
}
.navigation__sub--auth__btn svg{
    height:1.6rem;
    width:1.6rem;
    margin-right: 8px;
}
.navigation__sub--auth__btn--login:hover{
    color:var(--yellow-light-hover);
}
.navigation__sub--auth__btn--register{
    background:rgb(252,213,53);
}
@media screen and (max-width:1160px){
    .navigation__sub--auth__btn--login{
        display:none;
    }
}
.navigation__sub--settings{
    display:flex;
    align-items: center;
}
.navigation__sub--settings__download{
    margin-right:1.5rem;
    margin-left:5px;
}
.navigation__sub--settings__language{
    margin-right: 5px;
    font-size: 21px;
}
.navigation__sub--settings__currency{
    font-size: 1.4rem;
}
.navigation__sub--settings__divider{
    width:1px;
    margin: 0 5px;
    background:#aaa;
    height:12px;
}
.navigation__sub--settings__theme{
    font-size: 1.8rem;
}
.navigation__sub--settings--item:hover{
    color:var(--yellow-light-hover);
}
@media screen and (max-width:1300px){
    .navigation__sub--settings__download,
    .navigation__sub--settings__language, 
    .navigation__sub--settings__currency,
    .navigation__sub--settings__divider,
    .navigation__sub--settings__theme{
        display:none;
    }
}
.navigation__sub--menu{
    display:none;
    place-items: center;
}
@media screen and (max-width:1300px){
    .navigation__sub--menu{
        display:grid;
    }
}

/* ------ Navigation mega menu apps ------- */

.navigation__mega-menu{
    position: absolute;
    top:100%;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 8%);
    background:#fff;
    padding:1.5rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    display:flex;
    display:none;
}
.navigation__mega-menu--item{
    height:7.5rem;
    padding:0 2rem;
    border-radius: 1rem;
    display:flex;
    align-items: center;
    background:transparent;
    width: 100%;
}
.navigation__mega-menu--item:hover{
    background:#f5f5f5;
}
.navigation__mega-menu--item:hover .navigation__mega-menu--item__arrow{
    opacity:1;
}
.navigation__mega-menu--item__img{
    margin-right: 2rem;
}
.navigation__mega-menu--item__content{
    max-width:26rem;
    width:100%;
    margin-right: 2rem;
    white-space: normal;
}
.navigation__mega-menu--item__content h2{
    font-size:1.5rem;
    font-weight:400;
    color:#1E2329;
    padding-bottom: 2px;
}
.navigation__mega-menu--item__content p{
    font-size:1.3rem;
    color:#707A8A;
}
.navigation__mega-menu--item__arrow{
    color:#F0b90b;
    opacity:0;
    transition: 400ms ease;
}

/* ---- Header mega menu apps hover link up ---- */
.navigation__mega-menu--apps{
    left:14rem;
}
.navigation__main--item--apps-hov:hover .navigation__mega-menu--apps{
    display:flex;
}

/* ---- Header mega menu buy crypto hover link up ---- */

.navigation__mega-menu--buy-crypto{
    left:20rem;
}
.navigation__mega-menu--buy-crypto__pay{
    display:flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.navigation__mega-menu--buy-crypto__pay > div{
    display:flex;
    align-items: center;
}
.navigation__mega-menu--buy-crypto__pay > div > img{
    margin-right: 5px;
}
.navigation__mega-menu--buy-crypto__pay > div > svg{
    transform: rotate(-90deg);
    margin-left: 5px;
}
.navigation__main--item--buy-crypto-hov:hover .navigation__mega-menu--buy-crypto{
    display:flex;
}

/* ---- Header mega menu trade hover link up ---- */

.navigation__mega-menu--trade{
    left:38rem;
}
.navigation__main--item--trade-hov:hover .navigation__mega-menu--trade{
    display:flex;
}

/* ---- Header mega menu derivatives hover link up ---- */

.navigation__mega-menu--derivatives{
    left:45rem;
}
.navigation__main--item--derivatives-hov:hover .navigation__mega-menu--derivatives{
    display:flex;
}

/* ---- Header mega menu earn hover link up ---- */

.navigation__mega-menu--earn{
    left:52rem;
}
.navigation__main--item--earn-hov:hover .navigation__mega-menu--earn{
    display:flex;
}

/* ---- Header mega menu finance hover link up ---- */

.navigation__mega-menu--finance{
    left:63rem;
}
.navigation__main--item--finance-hov:hover .navigation__mega-menu--finance{
    display:flex;
}

/* ---- Header mega menu institutional hover link up ---- */

.navigation__mega-menu--institutional{
    right:25rem;
}
.navigation__main--item--institutional-hov:hover .navigation__mega-menu--institutional{
    display:flex;
}


/* 

Mobile Navigation

*/

.mobile-navigation{
    width:100%;
    max-width:37.5rem;
    height:100%;
    position:fixed;
    top:0;
    right:-37.5rem;
    z-index:99999999;
    background:#fff;
    display:none;
    transition:400ms ease-in-out;
    overflow: auto;
}

@media screen and (max-width:1300px){
    .mobile-navigation{
        display:block;
    }
    .mobile-navigation.show{
        right:0;
    }
}

.mobile-navigation__cancel{
    padding:1.6rem;
    display:flex;
    justify-content: right;
    align-items: center;
    color:rgb(112, 122, 138);
}
.mobile-navigation__cancel span{
    font-size:2.4rem;
    font-weight:bold;
    cursor:pointer;
}
.mobile-navigation__auth{
    padding:1.6rem;
    display:none;
}
@media screen and (max-width:1160px){
    .mobile-navigation__auth{
        display:block;
    }
}
.mobile-navigation__auth-btn{
    font-size:1.4rem;
    display:grid;
    place-items:center;
    color:rgb(30, 35, 41);
    text-overflow:ellipsis;
    white-space: nowrap;
    overflow:hidden;
}
.mobile-navigation__auth-btn--register{
    margin-top:2rem;
    background:rgb(252,213,53);
    padding:10px 12px;
    border-radius: 4px;
}
.mobile-navigation__auth-btn--register > div{
    display: flex;
    align-items: center;
}
.mobile-navigation__auth-btn--register > div > svg{
    margin-right:2px;
    height:1.6rem;
    width:1.6rem;
}
.mobile-navigation__settings--item{
    padding:1.6rem;
    display:flex;
    justify-content:space-between;
    cursor:pointer;
}
.mobile-navigation__settings--item:hover{
    background-color: rgb(245, 245, 245);
}
.mobile-navigation__settings--item:hover .mobile-navigation__settings--item__leading svg{
    color: var(--yellow-light-hover);
}
.mobile-navigation__settings--item:hover .mobile-navigation__settings--item__trailing svg{
    color: var(--yellow-light-hover);
}
.mobile-navigation__settings--item__leading{
    display:flex;
    align-items:center;
    column-gap: 8px;
    font-size:1.6rem;
    color:rgb(30, 35, 41);
}
.mobile-navigation__settings--item__leading > svg {
    color:rgb(112, 122, 138);
}
[aria-mobile-theme-btn='true'] .mobile-navigation__settings--item__theme-btn > div{
    transform:translateX(1.6rem);
}

.mobile-navigation__settings--item__theme-btn{
    background:rgb(234, 236, 239);
    border-radius:999rem;
    width:4rem;
    height:2.4rem;
    margin:0;
    padding:0;
    border:none;
    box-sizing: border-box;
}
.mobile-navigation__settings--item__theme-btn > div{
    margin:0 3px;
    width:1.8rem;
    height:1.8rem;
    cursor:pointer;
    border-radius:999rem;
    transition: 200ms ease-in-out;
    background-color: rgb(255, 255, 255);
    padding:2px;
    box-shadow: rgb(20 21 26 / 4%) 0px 1px 2px, rgb(71 77 87 / 4%) 0px 3px 6px, rgb(20 21 26 / 10%) 0px 0px 1px;
}
.mobile-navigation__settings--item__theme-btn > div > svg{
    height:100%;
    width:100%;
    color:rgb(112, 122, 138);
    /* color:rgb(132, 142, 156); */
    
}
/* .mobile-navigation__settings--item__theme-btn > div.active{
    transform:translateX(1.6rem);
} */

.mobile-navigation__main{
    display:none;
}
@media screen and (max-width:1080px){
    .mobile-navigation__main{
        display:block;
    }
}
.mobile-navigation__main--item{
    cursor:pointer;
}
.mobile-navigation__main--item:last-child{
    border-bottom:1px solid #ddd;
}
.mobile-navigation__main--item__title{
    display:flex;
    justify-content:space-between;
    align-items: center;
    padding:1.6rem;
}
.mobile-navigation__main--item__title:hover{
    background-color:rgb(245, 245, 245);
}
.mobile-navigation__main--item__body--item:hover{
    background-color:rgb(245, 245, 245);
}
.mobile-navigation__main--item__title--leading{
    display: flex;
    align-items: center;
    column-gap: 8px;
    font-size: 1.6rem;
    color: rgb(30, 35, 41);
}
.mobile-navigation__main--item__title--trailing{
    display:grid;
    place-items:center;
    transition:250ms ease;
}
.mobile-navigation__main--item__title--leading svg{
    color:rgb(112, 122, 138);
}
.mobile-navigation__main--item__body{
    color:#777;
}
.mobile-navigation__main--item__body--item{
    font-size: 1.4rem;
    padding-left:4.8rem;
    padding-right: 16px;
    padding-top: 16px;
}

.mobile-navigation__main--item__body--item{
    padding-bottom: 16px;
}
.mobile-navigation__main--item__body{
    overflow:hidden;
    transition:height 250ms ease;
}
.mobile-navigation__main--item__body:not(.effect){
    display:none;
}
.mobile-navigation__main--item__title:hover svg{
    color:var(--yellow-light-hover);
}

/* 

Mobile Navigation Dropback

*/

.mobile-navigation-backdrop{
    background:rgba(0, 0, 0, 0.1);
    height:100%;
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:88888888;
    display:none;
}
.mobile-navigation-backdrop.show{
    display:block;
}

@media screen and (min-width:1300px){
    .mobile-navigation-backdrop.show{
        display:none;
    }
}

/* Redeem Gift */

.redeem-gift{
    padding:1rem 2rem;
    background:#FEF6D8;
    display:grid;
    place-items:center;
}
.redeem-gift__content{
    font-size: 1.3rem;
    display:flex;
    align-items: center;
    column-gap: 2rem;
}
.redeem-gift__content--main{
    display:flex;
    align-items: center;
}
.redeem-gift__content--main img{
    margin-right: 6px;
}
.redeem-gift__content--btn{
    padding:4px 8px;
    border-radius: 4px;
    background:#FCD535;
    font-size:1.3rem;
    white-space: nowrap;
}


/* Header  */

.header{
    padding-top:8rem;
    padding-bottom:4rem;
    background-image: url("./assets/images/web-background-image.png");
    background-size:cover;
    background-position:35% center;
    background-repeat:no-repeat;
}
.header__main{
    display:flex;
    column-gap: 1.5rem;
    row-gap:6rem;
}
@media screen and (max-width:1024px){
    .header__main{
        flex-direction: column-reverse;
    }    
}
.header__main--content{
    width:60rem;
    font-family:var(--secondary-font);
}
@media screen and (max-width:1024px){
    .header__main--content{
        width:100%;
    }    
}
.header__main--content h1{
    font-size:4rem;
}
@media screen and (max-width:768px){
    .header__main--content h1{
        font-size:3.2rem;
    }
}
.header__main--content__trade{
    display:flex;
    align-items: center;
    margin-top: 5rem;
    margin-bottom: 3rem;
    font-size:2rem;
}
.header__main--content__trade p{
    margin-left:5px;
    color:#1E2329;
}
.header__main--content__max{
    max-width: 38rem;
}
@media screen and (max-width:1024px){
    .header__main--content__max{
        max-width: 100%;
    } 
}
.header__main--content__btn{
    padding:1.3rem;
    background:#FBD849;
    display:grid;
    place-items:center;
    font-size:1.6rem;
    border-radius: 5px;
    width:100%;
}
.header__main--content__btn > div{
    display:flex;
    align-items: center;
    text-align:center;
}
.header__main--content__btn > div > span{
    margin-right: 5px;
}
.header__main--content__continue{
    padding:2rem 0;
    background:transparent;
    display:flex;
    font-size:1.6rem;
    max-width: 100%;
    font-weight:500;
    color:#707A8A;
    position:relative;
    align-items: center;
}
.header__main--content__continue p{
    padding:0 10px;
}
.header__main--content__continue span{
    flex:1;
    height:1px;
    background:#EAECEF;
}
.header__main--content__auth-btn{
    display:flex;
    column-gap: 2.5rem;
}
.header__main--content__auth-btn--btn{
    display: grid;
    place-items:center;
    padding: 1.5rem 0;
    background:#EAECEF;
    border-radius:5px;
    font-size: 1.6rem;
    font-weight:500;
    flex:1;
}
.header__main--content__auth-btn--btn > div{
    display:flex;
    align-items: center;
}
.header__main--content__auth-btn--btn > div > img, .header__main--content__auth-btn--btn > div > svg{
    margin-right:8px;
    fill:#1e2329;
}
.header__main--image{
    flex:1;
    display:grid;
    place-items: center;
}
@media screen and (max-width:768px){
    .header__main--image{
        display:none;
    }
}
.header__main--image > img{
    width:100%;
    height:100%;
    max-width:85.6rem;
    max-height: 71.1rem;
}
@media screen and (max-width:1024px){
    .header__main--image > img{
        width:100%;
        height:100%;
        max-width:65.6rem;
        max-height: 51.1rem;
    } 
}

.header__stats{
    margin-top:10rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    font-family: var(--secondary-font);
    column-gap: 2rem;
    color:rgb(30, 35, 41);
}
@media screen and (max-width:1024px){
    .header__stats{
        grid-template-columns: 1fr 1fr;
    }
}
.header__stats--stat{
    padding: 4rem 0;
}
.header__stats--stat h1{
    font-size: 4rem;
    
}
.header__stats--stat p{
    padding-top: 4px;
    font-size: 1.6rem;
}
@media screen and (max-width:768px){
    .header__stats--stat h1{
        font-size: 2.5rem;
    }
    .header__stats--stat{
        padding: 2rem 0;
    }
    .header__stats--stat p{
        font-size: 1.4rem;
    }
}


/* Popular Cryptocurrencies  */

.popular-cryptocurrencies{
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

.popular-cryptocurrencies__title{
    display:flex;
    justify-content: space-between;
    margin-bottom: 4rem;
    align-items: center;
}
.popular-cryptocurrencies__title div{
    display:flex;
    align-items:center;
    white-space: nowrap;
    color:#929aa5;
    font-size:1.5rem;
    font-family: var(--secondary-font);
    font-weight:500;
}
@media screen and (max-width:768px){
    .popular-cryptocurrencies__title div{
        display:none;
    }
}
.popular-cryptocurrencies__content--item{
    grid-template-columns: 2fr 1fr 1fr 1fr;
    display:grid;
    font-size: 1.5rem;
    padding: 2rem 0;
    color:#707A8A;
}
@media screen and (max-width:768px){
    .popular-cryptocurrencies__content--item{
        grid-template-columns: 2.5fr 1fr 1fr;
        column-gap:1rem;        
    }
    .popular-cryptocurrencies__content--item > div{
        font-size:1.3rem;
        display:flex;
        flex-basis: 50%;
        min-width:0;
    }
    .popular-cryptocurrencies__content--item > div > .b-ellipsis{
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
@media screen and (max-width:425px){
    .popular-cryptocurrencies__content--item{
        grid-template-columns: 2fr 1fr 1fr;
    }
}
.popular-cryptocurrencies__content--item > div:not(:first-child, :last-child){
    display:flex;
    justify-content:center;
}
.popular-cryptocurrencies__content--item > div:last-child{
    display:flex;
    justify-content:right; 
}
@media screen and (max-width:768px){
    .popular-cryptocurrencies__content--item > div:nth-child(2){
        display:flex;
        justify-content:right; 
    }
}
.popular-cryptocurrencies__content--item__data{
    padding:1.5rem 1.5rem;
    margin-left:-1.5rem;
    margin-right: -1.5rem;
    border-radius: 4px;
}
.popular-cryptocurrencies__content--item__data:hover{
    background:#F5F5F5;
}
.popular-cryptocurrencies__content--item__data > div{
    display:flex;
    align-items: center;
    flex-basis: 50%;
    min-width:0;
}
.popular-cryptocurrencies__content--item__data > div > img{
    height: 3.2rem;
    width:3.2rem;
}
@media screen and (max-width:768px){
    .popular-cryptocurrencies__content--item__data > div > img{
        height: 2.5rem;
        width:2.5rem;
    }
}
.popular-cryptocurrencies__content--item__data > div > h2{
    font-weight:600;
    font-size: 1.5rem;
    color:#1E2329;
    padding-left: 1.5rem;
    padding-right: .8rem;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.popular-cryptocurrencies__content--item__data > div > span{
    font-size:1.4rem;
}
@media screen and (max-width:768px){
    .popular-cryptocurrencies__content--item > div:nth-child(4){
        display:none;
    }
    .popular-cryptocurrencies__content--item > div:nth-child(3){
        justify-content: right;
    }
    .popular-cryptocurrencies__content--item__data > div > h2{
        font-size: 1.4rem;
        padding-left: 1rem;
        padding-right: 5px;
    }
    .popular-cryptocurrencies__content--item__data > div > span{
        font-size:1.3rem;
    }
}
.popular-cryptocurrencies__footer--market{
    margin-top:3rem;
    display:flex;
    align-items:center;
    white-space: nowrap;
    color:#929aa5;
    font-size:1.5rem;
    font-family: var(--secondary-font);
    font-weight:500;
    display:none;
}
@media screen and (max-width:768px){
    .popular-cryptocurrencies__footer--market{
        display:flex;
    }
}
.popular-cryptocurrencies__footer > p{
    font-size:2.4rem;
    font-weight:600;
    margin:3.2rem 0;
    color:#1E2329;
}


/* 

Trade Bitcoin

*/

.trade-bitcoin{
    font-family: var(--secondary-font);
}

.trade-bitcoin .max-wrapper__content{
    background:#FFFDE6;
    border-radius: 1.6rem;
    padding:4rem;
    display:flex;
    column-gap: 10rem;
    row-gap: 4rem;
}
@media screen and (max-width:768px){
    .trade-bitcoin .max-wrapper__content{
        flex-direction:column;
        padding:2rem;
    } 
}
.trade-bitcoin__image{
    display:grid;
    place-items:center;
}
.trade-bitcoin__image img{
    height:100%;
    width:100%;
    max-width:32.5rem;
    max-height:23.5rem;
}
@media screen and (max-width:1024px){
    .trade-bitcoin__image img{
        height:100%;
        width:100%;
        max-width:24rem;
        max-height:17.4rem;
    }
}
.trade-bitcoin__caption h1{
    font-size:3.2rem;
    font-weight:600;
    color:#1E2329;
    margin-bottom:2rem;
}
@media screen and (max-width:768px){
    .trade-bitcoin__caption h1{
        font-size:2.4rem;
    }  
}
.trade-bitcoin__caption p{
    display:flex;
    font-size:1.55rem;
    color:#1E2329;
    margin-bottom: 2.5rem;
}
.trade-bitcoin__caption p > svg{
    height:1.5rem;
    width:1.5rem;
}


/* 

Crypto Portfolio

*/

.crypto-portfolio__mobile-title{
    display:none;
}
.crypto-portfolio__mobile-title h1{
    font-size:3.2rem;
    font-weight:600;
}
@media screen and (max-width:1024px){
    .crypto-portfolio__mobile-title{
        display:block;
        margin-bottom: 8rem;
    }
}
@media screen and (max-width:768px){
    .crypto-portfolio__mobile-title h1{
        font-size:2.5rem;
    }
}
.crypto-portfolio__mobile-title p{
    font-weight:400;
    font-size:1.8rem;
    color:#474D57;
    padding-top:8px;
}
@media screen and (max-width:768px){
    .crypto-portfolio__mobile-title p{
        font-size:1.6rem;
    }
}
.crypto-portfolio__box--main__title{
    margin-bottom: 8rem;
}
@media screen and (max-width:1024px){
    .crypto-portfolio__box--main__title{
        display:none;
    }
}
.crypto-portfolio__box--main__title p{
    font-weight:400;
    font-size:2rem;
    color:#474D57;
    padding-top:8px;
}
.crypto-portfolio__box{
    display:flex;
    column-gap: 6rem;
    row-gap: 8rem;
}
@media screen and (max-width:1024px){
    .crypto-portfolio__box{
        flex-direction: column-reverse;
    }
}
.crypto-portfolio__box--main{
    flex:1;
    width:100%;
    max-width:70rem;
}
.crypto-portfolio__box--image{
    display:flex;
    justify-content: center;
}
.crypto-portfolio__box--image img{
    width:100%;
    height:100%;
    max-width:33.5rem;
    max-height:67.6rem;
}
@media screen and (max-width:1024px){
    .crypto-portfolio__box--image img{
        width:100%;
        height:100%;
        max-width:19rem;
        max-height:38.3rem;
    }
}
.crypto-portfolio__box--main__content--card{
    display:flex;
    column-gap: 4rem;
    align-items: center;
    margin-bottom:6rem;
}
@media screen and (max-width:768px){
    .crypto-portfolio__box--main__content--card{
        display:block;
    }
}
.crypto-portfolio__box--main__content--card__caption h2{
    font-size:2.4rem;
    font-weight:600;
    padding-bottom:1rem;
}
@media screen and (max-width:768px){
    .crypto-portfolio__box--main__content--card__caption h2{
        font-size:2rem;
    }
}
.crypto-portfolio__box--main__content--card__caption p{
    font-size:1.5rem;
    color:#474D57;
}


/* 

Daily Rewards

*/

.daily-rewards__content{
    margin:4rem 0;
    grid-template-columns: repeat(4, 1fr);
    display:grid;
    row-gap:2rem;
    column-gap:2rem;
}
@media screen and (max-width:1024px){
    .daily-rewards__content{
        grid-template-columns: repeat(3, 1fr);
    }
}
@media screen and (max-width:768px){
    .daily-rewards__content{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media screen and (max-width:320px){
    .daily-rewards__content{
        grid-template-columns: 1fr;
    }
}
.daily-rewards__content--card{
    width:100%;
    padding:2rem;
    border:2px solid transparent;
    border-radius:1.5rem;
    background:#fafafa;
}
@media screen and (max-width:1024px){
    .daily-rewards__content--card:nth-child(7){
        display:none;
    }
    .daily-rewards__content--card:nth-child(8){
        display:none;
    }
}
@media screen and (max-width:425px){
    .daily-rewards__content--card{
        padding:1rem;
    }
}
.daily-rewards__content--card:hover{
    border:2px solid rgb(252, 213, 53);
}
.daily-rewards__content--card__title{
    color:rgb(30, 35, 41);
    font-weight:400;
    font-size:1.6rem;
}
@media screen and (max-width:425px){
    .daily-rewards__content--card__title{
        font-size:1.4rem;
    }
}
.daily-rewards__content--card__content{
    font-weight: 400;
    color:rgb(3, 166, 109);
    font-size:2.4rem;
    font-family:var(--tertiary-font);
    padding-top: 4px;
    padding-bottom: 3rem;
}
@media screen and (max-width:768px){
    .daily-rewards__content--card__content{
        font-size:2rem;
    }
}
@media screen and (max-width:375px){
    .daily-rewards__content--card__content{
        font-size:1.6rem;
    }
}
.daily-rewards__content--card__footer{
    display:flex;
    justify-content: space-between;
}
.daily-rewards__content--card__footer--leading{
    display:flex;
    align-items:center;
    column-gap: 8px;
}
.daily-rewards__content--card__footer--leading img{
    height:3rem;
    width:3rem;
}
.daily-rewards__content--card__footer--leading span{
    font-size:1.4rem;
    font-weight: 600;
    color:rgb(30, 35, 41);
}
.daily-rewards__content--card__footer--trailing{
    display:grid;
    place-items:center;
    background:#EAECEF;
    border-radius: 50%;
    height:3.5rem;
    width:3.5rem;
}
@media screen and (max-width:768px){
    .daily-rewards__content--card__footer--trailing{
        display:none;
    }
}
.daily-rewards__content--card__footer--trailing svg{
    height:2.5rem;
    width:2.5rem;
    color:#929AA5;
}


/* 

Explore endless possibilities with Binance

*/

.explore__title{
    padding-bottom: 6rem;
}
.explore__content{
    display:flex;
    column-gap: 2rem;
}
.explore__content--card{
    padding: 2.8rem 2.4rem;
    width:100%;
    max-width:38rem;
    background:#fafafa;
    height:58rem;
    display:flex;
    flex-direction: column;
    border-radius: 1rem;
    font-family:var(--secondary-font);
    justify-content: space-between;
}
@media screen and (max-width:1024px){
    .explore__content{
        flex-direction:column;
        row-gap:3rem;
    }
    .explore__content--card{
        max-width:100%;
        flex-direction: row;
        height:auto;
        align-items:center;
    }
}
@media screen and (max-width:768px){
    .explore__content--card{
        flex-direction: column;
    }
}
.explore__content--card:hover{
    box-shadow: rgb(24 26 32 / 16%) 0px 8px 16px;
}
.explore__content--card:nth-child(2){
    flex-direction: column-reverse;
}
@media screen and (max-width:1024px){
    .explore__content--card:nth-child(2){
        flex-direction: row-reverse;
    }
}
@media screen and (max-width:768px){
    .explore__content--card:nth-child(2){
        flex-direction: column-reverse;
    }
}
.explore__content--card__image img{
    width:100%;
    height:100%;
    max-height:22rem;
}
@media screen and (max-width:1024px){
    .explore__content--card__image img{
        max-width:28rem;
    }
    .explore_content--card__caption{
        max-width:30rem;
    }
} 
@media screen and (max-width:768px){
    .explore_content--card__caption{
        max-width:100%;
    }
}
.explore_content--card__caption--content > div h1{
    padding-bottom:2rem;
    font-size:2.8rem;
    font-weight:500;
}
.explore_content--card__caption--content > div p{
    font-size:1.55rem;
    color:rgb(30, 35, 41);
    line-height:24px;
}
.explore_content--card__caption--learn{
    font-size:1.5rem;
    padding-top: 2rem;
    color:rgb(201, 148, 0);
    display:none;
}
@media screen and (max-width:1024px){
    .explore_content--card__caption--content > div h1{
        font-size:2.2rem;
    }
    .explore_content--card__caption--learn{
        display:block;
    }
}
.explore__content--card:hover .explore_content--card__caption--learn{
    display:block;
}
.explore .btn{
    margin-top:5rem;
}


/* 

Trusted Crypto Exchange

*/

.trusted-exchange__title{
    display:flex;
    padding-bottom:6rem;
}
.trusted-exchange__title > div{
    flex:1;
}
.trusted-exchange__title > p{
    white-space: nowrap;
    color: #929aa5;
    font-size: 1.5rem;
    font-family: var(--secondary-font);
    font-weight: 400;
    padding-top:1.8rem;
}
.trusted-exchange__title > p > span{
    display:flex;
    align-items:center;
}
@media screen and (max-width:1024px){
    .trusted-exchange__title{
        flex-direction: column;
    }
}
.trusted-exchange__content{
    display:flex;
    column-gap:3rem;
    row-gap:6rem;
}
@media screen and (max-width:1024px){
    .trusted-exchange__content{
        flex-direction: column-reverse;
    }
}
.trusted-exchange__content > div{
    flex-basis:50%
}
.trusted-exchange__content--card{
    display:flex;
    column-gap:2rem;
}
@media screen and (max-width:768px){
    .trusted-exchange__content--card{
        display:block;
    }
}
.trusted-exchange__content--card:not(:last-child){
    margin-bottom:5rem;
}
.trusted-exchange__content--card
.trusted-exchange__content--card__caps h2{
    font-weight:500;
    font-size:2rem;
    padding-bottom:5px;
}
.trusted-exchange__content--card__caps p{
    font-weight:400;
    font-size:1.5rem;
    color: #474D57;
}
.trusted-exchange__content--card > img{
    height:7.2rem;
    width:7.2rem;
}
@media screen and (max-width:768px){
    .trusted-exchange__content--card > img{
        height:5.6rem;
        width:5.6rem;
    }
}
.trusted-exchange__content--image{
    display:grid;
    place-items:center;
}
.trusted-exchange__content--image img{
    width:100%;
    height:100%;
    max-width:58.8rem;
    max-height:33rem;
}
.trusted-exchange .btn{
    margin-top:5rem;
}


/* 

    Trade on the go. Anywhere, anytime.

 */

.trade__title{
    display:flex;
    padding-bottom:10rem;
}
.trade__title > div{
    flex:1;
}
.trade__title > p{
    white-space: nowrap;
    color: #707A8A;
    font-size: 1.5rem;
    font-family: var(--secondary-font);
    font-weight: 400;
    padding-top:1.8rem;
}
.trade__title > p > span{
    display:flex;
    align-items:center;
}
@media screen and (max-width:1024px){
    .trade__title{
        flex-direction: column;
    }
}
@media screen and (max-width:768px){
    .trade__title > p{
        display:none;
    }
}
.trade__content{
    display:flex;
    column-gap: 12rem;
}
.trade__content--image{
    flex-basis:50%;
    display: flex;
    align-items:center;
    justify-content:center;
}
.trade__content--image > img{
    height:100%;
    width:100%;
    max-width:72.4rem;
    max-height:43.5rem;
    object-fit: contain;
}
.trade__content--image__1024px{
    display:none;
}
@media screen and (max-width:1024px){
    .trade__content{
        column-gap: 6rem;
    }
    .trade__content--image__desktop{
        display:none;
    }
    .trade__content--image__1024px{
        display:block;
    }
    .trade__content--image > img{
        max-width:40rem;
        max-height:60rem;
    }
    .trade__content--download__apps--app:nth-child(4),
    .trade__content--download__apps--app:nth-child(5),
    .trade__content--download__apps--app:nth-child(6){
        display:none;
    }
}

@media screen and (max-width:768px){
    .trade__content{
        flex-direction:column;
    }
    .trade__content--image{
        padding-bottom:55%;
        background:url("./assets/images/portfolio-section.webp") no-repeat;
        background-position:top center;
        background-size: auto 190%;
    }
    .trade__content--image > img{
        display:none;
    }
    .trade__content--download__apps--app:nth-child(3){
        display:none;
    }
}


.trade__content--download{
    flex-basis: 50%;
}
@media screen and (max-width:768px){
    .trade__content--download{
        display:flex;
        flex-direction: column-reverse;
    } 
}
.trade__content--download__scan{
    display:flex;
    padding:1.6rem;
    background:#FAFAFA;
    border-radius:8px;
    width:100%;
}
.trade__content--download__scan-qrcode{
    position:relative;
    width:fit-content;
}
.trade__content--download__scan-qrcode img{
    height: 2rem;
    width:2rem;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%)
}
.trade__content--download__scan-text{
    margin-left:2rem;
    margin-top:auto;
    margin-bottom:auto;
}
.trade__content--download__scan-text p{
    color:#707A8A;
    font-size:1.6rem;
}
.trade__content--download__scan-text h1{
    color:#1E2329;
    font-size:2rem;
    font-weight:600;
    margin-top:2px;
}
.trade__content--download__apps{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top:5rem;
}
@media screen and (max-width:320px){
    .trade__content--download__apps{
        display:flex;
        justify-content: space-around;
        flex-wrap:wrap;
    }
}
.trade__content--download__apps--app > div{
    display:grid;
    place-items:center;
    width:fit-content;
    border-radius:8px;
    padding:8px 0;
    width:10rem;
    margin-bottom:4rem;
}
@media screen and (max-width:768px){
    .trade__content--download__apps--app{
        display:grid;
        place-items:center;
    }
}
.trade__content--download__apps--app > div:hover{
    background:#F5F5F5;
}
.trade__content--download__apps--app svg{
    height:3.2rem;
    width:3.2rem;
}
.trade__content--download__apps--app p{
    font-size:1.3rem;
    font-weight:400;
    padding-top: 6px;
}
.trade__footer{
    margin-top:1rem;
    display:none;
}
.trade__footer > span{
    white-space: nowrap;
    color: #707A8A;
    font-size: 1.4rem;
    font-family: var(--secondary-font);
    font-weight: 400;
    padding-top:1.8rem;
    display:flex;
    align-items:center;
}

@media screen and (max-width:768px){
    .trade__footer{
        display:block;
    }
}



/* 

Need Help

*/

.help{
    padding-bottom:10rem;
}
.help__title{
    margin:5rem 0;
}
@media screen and (max-width:768px){
    .help__title{
        margin-top:0;
    } 
}
.help__content{
    display:flex;
    justify-content:space-between;
}
@media screen and (max-width:1024px){
    .help__content{
        flex-wrap:wrap;
    }
}
.help__content--card {
    display:flex;
    column-gap: 2rem;
    width:100%;
    max-width: 38rem;
    padding:1.6rem;
}
@media screen and (max-width:425px){
    .help__content--card{
        padding:1.6rem 0;
    }
}
@media screen and (max-width:1024px){
    .help__content--card {
        display:block;
    }
}
.help__content--card img{
    height:64px;
    width:64px;
}
.help__content--card__content h1{
    font-size:2rem;
    font-weight:500;
    font-family:var(--secondary-font)
}
.help__content--card__content > div{
    padding:1rem 0;
    color:400;
    font-size:1.3rem;
    color:#474D57;
}
.help__content--card__content p{
    color:#C99400;
    font-size:1.4rem;
    padding-top:1rem;
}


/* 

Start Earning Today

*/

.earn{
    background:#FAFAFA;
    padding:8rem 0;
}
.earn > div{
    display:grid;
    place-items:center;
}

.earn h1{
    margin-bottom:4rem;
}

/* 

Binance Footer

*/

.footer{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 2fr 1.1fr;
    column-gap:1rem;
    cursor:pointer;
    padding-top:5rem;
}
@media screen and (max-width:1024px){
    .footer{
        grid-template-columns: 1fr 1fr 1fr 1fr;
        row-gap:5rem;
    } 
    .footer__links:last-child{
        grid-column: 1/span 4;
    }
}
.footer__links h1{
    color:#1E2329;
    font-size:1.9rem;
    font-weight:600;
    padding-bottom:1rem;
    display:flex;
    justify-content: space-between;
}
.footer__links h1 span{
    display:none;
}
@media screen and (max-width:768px){
    .footer__links h1{
        font-size:1.6rem;
    }
    .footer__links h1 span{
        display:block;
    }
    .footer__links--link{
        transition: 250ms ease-in;
        overflow:hidden;
        height:auto;
    }
    .footer__links--link:not(.effect){
        display:none;
    }
}
.footer__links--link{
    color:#707A8A;
}
.footer__links--link p{
    font-size:1.4rem;
    padding-bottom:8px;
}
.footer__links--double{
    display:flex;
    column-gap: 1rem;   
}
@media screen and (max-width:1024px){
    .footer__links--double{
        flex-direction: column;  
        row-gap:2rem;
    }
}
.footer__links--community{
    display:flex;
    flex-wrap:wrap;
    padding-top:8px;
    color:#707A8A;
}
.footer__links--community > div{
    font-size:18px;
    margin-right:3.2rem;
    margin-bottom:2.4rem;
    width:2.5rem;
    height:2.5rem;
}
@media screen and (max-width:768px){
    .footer{
        display:flex;
        flex-direction:column;
        row-gap:2rem;
    } 
}

.desktop-footer{
    display: block;
}
.mobile-footer{
    display:none;
}
@media screen and (max-width:768px){
    .desktop-footer{
        display: none;
    }    
    .mobile-footer{
        display:block;
    }
}

/* 

Binance Copyright Text

*/
.copyright{
    padding-top: 2.5rem;
}
.copyright__text{
    border-top:1px solid #EAECEF;
    text-align:center;
    padding:2rem 0;
    color:#707A8A;
    font-size:1.4rem;
}