@media(max-width:480px){

    .card-box{
    
    margin:10px;
    
    padding:15px;
    
    }

}

@media(max-width:992px){

.hero{

height:auto;

}

.hero-content{

padding:40px;

max-width:450px;

}

.hero h1{

font-size:48px;

line-height:56px;

}

.hero-subtitle{

font-size:20px;

margin:25px 0 35px;

}

.hero-btn{

font-size:20px;

padding:16px 28px;

}

}


@media(max-width:768px){

.hero{

background-position:72% center;

}

/*.hero-overlay{

background:

linear-gradient(

180deg,

rgba(0,0,0,.72),

rgba(0,0,0,.50)

);

}*/

.hero-content{

padding:25px;

max-width:100%;

}

.hero h1{

font-size:20px;

line-height:30px;

}

.hero-subtitle{

font-size:15px;

gap:8px;

}

.hero-btn{

    font-size: 15px;
    padding: 5px 15px;

}

.hero-btn i{

font-size:24px;

}

}

@media(max-width:768px){

.wallet-top{

padding:18px;

}

.wallet-top h1{

font-size:30px;

}

.wallet-right img{

width:120px;

}

.wallet-item h4{

font-size:24px;

}

.wallet-item span{

font-size:14px;

}

.wallet-item small{

font-size:12px;

}

}

@media(max-width:768px){

.quick-action{

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

gap:8px;

margin:12px 18px;

}

.action-card{

padding:3px 6px 8px;

}

.action-icon{

font-size:20px;

margin-bottom:2px;

}

.action-card span{

font-size:12px;

}

}

@media(max-width:768px){

.invite-section{

padding:18px;

}

.invite-left{

width:65%;

}

.invite-right{

width:35%;

}

.invite-left h3{

font-size:18px;

}

.invite-left p{

font-size:12px;

}

.invite-right img{

max-width:120px;

}

.invite-btn{

padding:10px 18px;

font-size:13px;

}



.bottom-nav{

left:18px;
right:18px;
bottom:6px;

gap:6px;

}

.nav-card{

height:60px;

border-radius:12px;

}

.nav-card i{

font-size:18px;

}

.nav-card span{

font-size:9px;

}

}


/*==============================
Responsive
==============================*/

@media(max-width:480px){

}