/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/






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

    .title{
        font-size: 40px;
    }
    
    
    .para{
        font-size: 18px;
        line-height: 150%;
    }
    
    .small-para{
        font-size: 16px;
        line-height: 140%;
    }
    

    section.metaverse .top{
        -webkit-transform: translateY(-99px);
            -ms-transform: translateY(-99px);
                transform: translateY(-99px);
    }
}



@media screen and (max-width:1099px){
    section.music .card h4{
        height: 95px; 
    }

    .card-heading{
        font-size: 18px;
    }

    .padding{
        padding: 70px 0;
    }

    section.shop {
        padding-top: 0;
    }

    
}




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

.title{
    font-size: 40px;
}


.para{
    font-size: 16px;
    line-height: 150%;
}

.small-para{
    font-size: 16px;
    line-height: 140%;
}

.heading{
    font-size: 40px;
}


.upper-text{
    font-size: 20px;
}


.btn{

width: 174px;
 height: 54px;

}


.offcanvas{
    width: 90vw !important;
}




.btn::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0px; 
    padding: 1.5px; 
    padding-left: 2.5px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(215, 215, 215, 0.44)), to(#fff));
    background: -o-linear-gradient(left, rgba(215, 215, 215, 0.44) 0%, #fff 100%);
    background: linear-gradient(90deg, rgba(215, 215, 215, 0.44) 0%, #fff 100%);
    -webkit-mask: 
       -webkit-gradient(linear, left top, left bottom, color-stop(0, #15056d)) content-box, 
       -webkit-gradient(linear, left top, left bottom, color-stop(0, #c90a0a));
    -webkit-mask: 
       linear-gradient(#15056d 0 0) content-box, 
       linear-gradient(#c90a0a 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude; 
}



.btn:hover{
 background-color: #fff;
 color: #000;
}



.btn-2{
font-family: satoshi-black, sans-serif;
font-weight: 900;
font-size: 20px;
line-height: 474%;
letter-spacing: -0.03em;
color: #101010;
background: #fff;
width: 159px;
height: 58px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
}
.btn-2:hover{
 background-color: #FFF2A9;
}


.card-heading{
    font-family: satoshi-black, sans-serif;
font-weight: 900;
font-size: 20px;
line-height: 118%;
letter-spacing: -0.03em;
color: #fff;
}

.card-heading-small{
    font-family: satoshi-b, sans-serif;
    font-weight: 700;
    font-size: 25px;
    line-height: 120%;
    letter-spacing: -0.03em;
    color: #fff;
}

.card-heading-small1{
    font-family: satoshi-b, sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.03em;
    color: #d6d6d6;
}


header .a {
   display: none;

}


section.music {
padding-top: 0;
}

#dialog-content{
    max-width: 100%;
    padding: 10px;
}


@-webkit-keyframes nav {
    0%{
        -webkit-transform: translateY(-100px);
                transform: translateY(-100px);
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    100%{
        -webkit-transform: translateY(0);
                transform: translateY(0);
        width: 90%;
        height: 81px;
        opacity: 1;
    }
}


@keyframes nav {
    0%{
        -webkit-transform: translateY(-100px);
                transform: translateY(-100px);
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    100%{
        -webkit-transform: translateY(0);
                transform: translateY(0);
        width: 90%;
        height: 81px;
        opacity: 1;
    }
}


section.banner{
    height:100vh;
    background-image: url('../assets/home_banner_mob.jpg');
}

section.banner p{
padding: 10px;
}
section.banner .arrow{
display: none;
}



.padding{
  padding: 70px 0;
}


section.metaverse .top{
    -webkit-transform: translateY(-99px);
        -ms-transform: translateY(-99px);
            transform: translateY(-99px);
}


section.feature .row{
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow-x: scroll;
    padding-right: 80px;
}

section.feature .row::-webkit-scrollbar {
    height: 1px;
}


section.shop {
  padding-top: 0;
}



footer a{
    font-size: 14px !important;
}
footer .para-1 p{
    font-size: 12px !important;
}

}