/*==================================================
Body
==================================================*/
@media (max-width:400px){
    body{
        padding: 4px;
    }
}

/*==================================================
NAVBAR
==================================================*/
@media (max-width:920px){
    .nav-toggle{
        display:flex;
    }

    .nav-menu{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:
            var(--color-background);
        backdrop-filter:
            blur(var(--navbar-blur));
        border-top:
            1px solid var(--glass-bg-strong);
        border-bottom:
            1px solid var(--glass-bg-strong);
        box-shadow:
             var(--shadow-large);
        opacity:0;
        visibility:hidden;
        transform:
            translateY(-15px);
        pointer-events:none;
        flex-direction:column;
    }

    .nav-menu.menu-open{
        opacity:1;
        visibility:visible;
        transform:translateY(0);
        pointer-events:auto;
        display:flex;
    }

   .nav-menu a{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        padding:var(--space-md);
    }
    
    .nav-menu li{
        width:100%;
    }

    .nav-menu a:hover{
        transform:
            none;
        background:
            rgba(255,255,255,.03);

    }

    .hr-div{
        margin-top: var(--space-xs);
    }

    .nav-menu{
        transition:
            opacity var(--motion-normal) var(--ease-smooth),
            transform var(--motion-normal) var(--ease-smooth),
            visibility var(--motion-normal) var(--ease-smooth);
    }
}
/*==================================================
BEAT'S SALE PAGE
==================================================*/
/*=================
Playlist Catalog
====================*/
@media (max-width:1150px){
    .playlist-price{
        white-space:wrap;
    }

    .playlist-item{
        grid-template-columns:
            1fr
            60px
            70px;
    }
}

@media (max-width:768px){
    .filters-container{
        grid-template-columns:
            repeat(3,1fr);
    }

    .beatlist{
        width:100%;
        flex:none;
    }

    .beatlistcontrol{
        height:280px;
    }

    .playlist-price{
        margin-left:var(--space-sm);
    }

    .playlist-bpm,
    .playlist-keychord{
        margin-left:var(--space-sm);
    }
}

@media (max-width:576px){
    .playlist-item{
        grid-template-columns:1fr;
        text-align:center;
    }

    .playlist-title{
        white-space:normal;
    }

    .filters-container{
        grid-template-columns:1fr;
    }

    .search-container{
        margin-bottom:var(--space-lg);
    }
}

@media (max-width:390px){
    .playlist-item{
        font-size: var(--text-large);
        grid-template-columns:
            18px
            1fr;
    }

    .playlist-title{
        
        grid-column:2;
    }

    .playlist-keychord{
       
        grid-column:2;
    }

    .playlist-bpm{
        
        grid-column:2;
    }

    .playlist-price{
        grid-column:2;
        font-size: var(--text-large);
    }
}

/*=================
    PLAYER 
====================*/
/*====================
    = 1100 px - 1000px
======================*/
@media (max-width:1100px){
    .container-brand-2{
        margin-bottom:0;
    }
}

/*====================
    = 920px
======================*/
@media (max-width: 920px){
    .playlist,
    .beatlist{
        flex:none;
        width:100%;
        max-width:none;
    }

    .playlist p{
        font-size: var(--text-h3);
    }
   
    .container-brand-2{
        margin-top: -80px;
        width:40%;
        margin-bottom: -40px;
    }

    #visualizer{
        width:95%;
        margin-inline:auto;
    }

    .control{
        transform: scale(1.3);
    }

    .control button{
        margin:var(--space-sm);
    }
   
    .moreinfo{
        font-size: var(--text-h2);
    }

    .volume-container{
        width:100%;
        max-width:290px;
        margin-top:var(--space-md);
        margin-bottom: var(--space-lg);
    }

    #running{
        margin-top: 10px;
        width: 95%;
    }

    #running::-webkit-slider-thumb{
        width:12px;
        height:12px;
    }

    .sect a{
        font-size:var(--text-h2);
    }
}

/*====================
    = 768px - 700px
======================*/
@media (max-width:768px){
    .player-layout{
        gap:var(--space-xl);
        align-items:stretch;
        flex-direction:column;
    }

    .playlist{
        padding:var(--space-lg);
        margin-bottom:var(--space-xl);
    }

    .beatlist{
        margin-top:-30px;
    }

    .container-brand-2{
        width:45%;
    }

    .playlist,
    .beatlist{
        position:static;
    }

    #volume-slider{
        flex:1;
    }
   
    .moreinfo{
        margin:var(--space-xxs) 0 0;
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    .moreinfo ul{
        width:100%;
        padding:0;
        margin:0;
    }

    .moreinfo li{
        font-size: var(--text-h2);
        text-align:center;
    }

    .control{
        display:flex;
        justify-content:center;
        flex-wrap:wrap;
        gap:var(--space-xs);
        margin-top:var(--space-lg);
    }

    .control button{
        width:52px;
        height:52px;
        font-size:var(--text-h3);
    }

    .surface:hover{
        transform:none;
    }

}
/*====================
    = 576px - 500px
======================*/
@media (max-width:576px){
    .playlist{
        padding:var(--space-sm) var(--space-md);
    }

    .container-brand-2{
        width:55%;
    }

    .playlist p{
        font-size:var(--text-h3);
    }

    .moreinfo{
        margin-top:var(--space-md);
    }

    .moreinfo h5{
        font-size:var(--text-h3);
    }

    .volume-container{
        max-width:220px;
        gap:var(--space-md);
    }

    .control button{
        width:48px;
        height:48px;
    }

    #controlicon{
        transform:scale(1.03);
    }

    #running{
        margin:var(--space-md) 0;
    }

    #visualizer{
        margin-top:var(--space-lg);
        margin-bottom:var(--space-md);
    }
}
/*====================
    = 480px - 300px
======================*/
@media (max-width:480px){
    .container-brand-2{
        margin-top:-70px;
        width:60%;
    }

    .control{
        gap:var(--space-sm);
    }

    .control button{
        width:40px;
        height:40px;
        margin:calc(var(--space-xxs) + 1px);
    }

    #controlicon{
        scale:1.35;
    }

}

@media (max-width:390px){

    .control{
        gap:var(--space-xs);
    }

    .playlist p{
        font-size:var(--text-large);
    }

    .moreinfo h5{
        font-size:var(--text-large);
    }

    .sect a{
        font-size:calc(var(--text-h3) - 0.5px);
    }

    #controlicon{
        scale:1.25;
    }
}
/*==================================================
HOME
==================================================*/
/*====================
    = 1150px
======================*/
@media (max-width:1150px){
    .latest-grid{

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }

}
/*====================
    = 992px
======================*/
@media (max-width:992px){

    .hero-section{

        padding:var(--space-2xl) 6%;

        min-height:75vh;


    }

    .hero-content{

        max-width:680px;

    }

    .latest-grid{

        gap:var(--space-xl);

    }

}
/*====================
    = 768 px
======================*/
@media (max-width: 768px){
    .hero-section{
        min-height:auto;
        padding:var(--space-3xl) 7%;
        justify-content:center;
    }

    .hero-background{
        background-position:65% top;
    }

    .hero-content{
        max-width:100%;
        align-items:center;
        text-align:center;
    }

    .hero-content p{
        max-width:100%;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
        align-items: center;
    }

    .primary-button,
    .secondary-button{
        width:100%;
        max-width:320px;
        justify-content:center;
        text-align:center;
    }

    .release-card:hover{
        filter: none;
        border-color: var(--color-shadow-red);
    }
    
    .release-card img{
        transform:scale(.92);

    }
    .release-info{

        padding:var(--space-md);
        
    }
    .view{
        margin:auto;
        transform: scale(0.8);
    }
}
/*====================
    = 720px
======================*/
@media (max-width:720px){
    .latest-grid{
        grid-template-columns:1fr;
    }

    .release-card{
        width:100%;
        height: 100%;
        max-width:560px;
        margin-inline:auto;
        max-height:680px ;

    }
    .release-info{
        padding:calc(var(--space-3xl) + 50px);
        transform: scale(1.4);
    }
}
/*====================
    = 620px
======================*/
@media (max-width:620px){
    .latest-section{
        padding:
            var(--space-xxs)
            var(--space-xxs);

    }
    .release-card{
        max-width:360px;
    }

    .release-info{
        padding:var(--space-lg);
        transform: none;
    }

    .view{
        margin-top: -10px;
    }
}

/*====================
    = 480px
======================*/

@media (max-width:480px){
    .hero-background{
        background-position:30% top;
    }
    .view{
        transform: scale(0.6);
    }
}
/*====================
    = 360px
======================*/
@media (max-width:360px){
    .release-card{
        max-width:300px;
        margin-inline:auto;

    }

    .release-card img{
        width:100%;
        height:115px;
        margin-top: var(--space-xl);
        aspect-ratio:auto;
        margin-bottom: -10px;
        object-fit:cover;
        transform:none;
    }

    .release-info{
        transform: scale(0.85);
        padding:var(--space-xxs) var(--space-xxs);
    }

    .release-info p{
        margin-top:var(--space-xxs);
    }

    .listen-button{
        width:130px;
        height: 50px;
        margin-top:var(--space-sm);
        padding:var(--space-xs) var(--space-xxs);

    }

}

/*==================================================
ABOUT
==================================================*/
/*====================
    = 1100px
======================*/
@media (max-width:1100px){
    .about-hero{
        flex-direction:column;
        text-align:center;
        justify-content:center;
        gap:var(--space-2xl);
    }

    .about-left{
        align-items:center;
        margin-top:0;
    }
}
/*====================
    = 1060px
======================*/
@media (max-width: 1060px){
    .about-right{
        width:100%;
        display:flex;
        justify-content:center;
        align-items:center;
        margin-top:var(--space-xl);
    }

    .about-illustration{
        width:min(80%,420px);
    }

    .about-story{
        flex-direction:column;
        align-items:center;
        gap:var(--space-2xl);
    }

    .story-image img{
        width:100%;
        max-width:420px;
        opacity: 100%;
        height:auto;
    }

    .story-content{
        width:100%;
        max-width:720px;
    }

    .about-values{
        margin-top: var(--space-3xl);
    }

    .about-values h2{
        margin-top: var(--space-xl);
    }

    .about-values > p{
        max-width: 620px;
    }

    .values-grid{
        margin-top:var(--space-2xl);
        gap:var(--space-lg);
    }

    .about-cta{
        padding:var(--space-2xl) var(--space-lg);
    }

}
/*====================
    = 768px
======================*/
@media (max-width:768px){
    .about-story{
        padding:var(--space-2xl) 6%;
    }
    .story-content h2{
        font-size:var(--text-h2);
    }

    .story-content p{
        max-width:100%;
        font-size: var(--text-large);
    }

    .signature-author{
        justify-content:center;
        text-align:center;
    }

    .timeline-item{
        margin:0;
        width: 95%;
    }
    .timeline-content{
        padding:var(--space-lg);
    }
    .timeline h3{
        font-size: var(--text-large);
    }
    .about-values{
        padding-inline: var(--space-md);
    }

    .about-values > p{
        max-width:100%;
    }

    .value-card{
        padding:var(--space-lg);
    }

    .about-cta{
        padding:var(--space-2xl) var(--space-md);
    }

    .about-cta p{
        max-width:100%;
    }

    .cta-buttons{
        flex-direction:column;
        align-items:center;
    }

    .primary-btn,
    .secondary-btn{
        width:260px;
        text-align:center;
    }
}
/*====================
    = 576px
======================*/
@media (max-width:576px){
    .about-illustration{
        width:100%;
        max-width:320px;
    }

    .timeline{
        gap:var(--space-2xl);
    }

    .timeline p{
        font-size: var(--text-small);
    }
    .timeline-dot{
        width:30px;
    }

    .timeline-dot::before{
        width:14px;
        height:14px;
    }

    .timeline-dot::after{
        width:24px;
        height:24px;
    }

    .timeline-item:nth-child(even){
        transform: translateX(20px);
    }

    .timeline-item.show{
        transform: translateX(0);
    }

    .about-values h2{
        margin-top: var(--space-lg);
    }

    .value-card{
        padding:var(--space-md);
    }

    .value-card h3{
        font-size:var(--text-large);
    }

    .value-card p{
        font-size:var(--text-body);
        margin-top: -30px;
    }

    .value-card:hover{
        transform:none;
    }
}

/*==================================================
PROMOTIONS
==================================================*/
/*====================
    = 1200 px
======================*/
@media(max-width:1200px){
    .promotions-hero{
        flex-direction:column;
        text-align:center;
        gap:var(--space-3xl);
    }

    .hero-left{
        align-items:center;
    }

    .hero-left p{
        text-align:center;
    }

    .hero-tag{
        align-self:center;
    }

    .hero-right{
        justify-content:center;
    }

    .hero-right::before{
        width:420px;
        height:420px;
    }

    .promotion-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

/*====================
    = 992 px
======================*/
@media (max-width:992px){
    .promotion-card{
        padding:var(--space-3xl);
    }

    .benefit-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .featured-offer{
        padding:
            var(--space-3xl)
            var(--space-2xl);

    }

    .step-container{
        gap:var(--space-lg);
    }

    .step{
        font-size:var(--text-h2);
    }

    .step p{
        font-size:var(--text-body);
    }
}

/*====================
    = 768 px
======================*/
@media(max-width:768px){
    .hero-left h1{
        font-size:var(--text-h1);
    }

    .hero-left{
        width:100%;
    }

    .hero-left p{
        max-width:100%;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:center;
    }

    .primary-btn,
    .secondary-btn{
        width:260px;
        text-align:center;
    }

    .hero-right::before{
        width:320px;
        height:320px;
        font-size:var(--text-h1);
    }

    .promotion-grid{
        grid-template-columns:1fr;
    }

    .promotion-card{
        padding:var(--space-2xl);
    }
    .promotion-card h2{
        font-size:var(--text-h1);
    }

    .promotion-card p{
        font-size:var(--text-body);
    }

    .new-price{
        font-size:var(--text-h2);
    }

    .promotion-card button{
        width:100%;
    }

    .step-container{
        flex-direction:column;
        align-items:center;
    }

    .step{
        width:100%;
        max-width:500px;
    }

    .benefit-grid div{
        padding:var(--space-xl) var(--space-md);
        font-size:var(--text-body);
    }

    .benefit-grid div:hover{
        transform:none;
        box-shadow:none;
    }

    .featured-offer{
        padding:
            var(--space-3xl)
            var(--space-xl);
    }

    .featured-offer h2{
        font-size:var(--text-displaybig);
    }

    .featured-offer p{
        font-size:var(--text-body);
    }

    .promotion-cta h2{
        font-size:var(--text-display);
    }
   
}

/*====================
    = 576 px
======================*/
@media (max-width:576px){
    .promotions-hero{
        padding:
            var(--space-md)
            var(--space-md);
        gap:
            var(--space-xl);
    }

    .hero-tag{
        padding:
            var(--space-xs)
            var(--space-md);
        font-size:
            var(--text-small);
    }

    .hero-left h1{
        font-size:
            var(--text-h1);
        line-height:
            var(--leading-tight);
    }
    .hero-left p{
        font-size:
            var(--text-body);
        max-width:100%;
    }

    .hero-buttons{
        width:100%;
        flex-direction:column;
    }

    .hero-buttons a{
        width:100%;
        text-align:center;
    }

    .hero-right::before{
        width:240px;
        height:240px;
        font-size:var(--text-h1);
    }

    .promotion-card h2{
        margin-bottom:var(--space-md);
    }

    .promotion-card p{
        margin-bottom:var(--space-md);
    }

    .price{
        margin-bottom:var(--space-lg);
    }

    .promotion-card button{
        height:48px;
    }

    .step{
        padding:var(--space-xl);
    }

    .benefit-grid{
        grid-template-columns:1fr;
    }

    .benefit-grid div{
        padding:var(--space-lg);
    }

    .benefit-grid div:hover{
        transform:none;
        box-shadow:none;
    }

    .featured-offer{
        padding:
            var(--space-xl)
            var(--space-lg);
    }

    .featured-offer span{
        margin-bottom:var(--space-lg);
    }

    .featured-offer p{
        font-size:var(--text-small);
    }

    .featured-offer-button{
        width:100%;
        max-width:280px;
    }

    .featured-offer h2{
        font-size:var(--text-h1);
    }

    .featured-offer{
        text-wrap:balance;
    }

    .promotion-cta a{
        width:100%;
        max-width:300px;
    }

    .promotion-cta h2{
        font-size:var(--text-h1);
    }
}

/*==================================================
CONTACT PAGE
==================================================*/
/*====================
    = 992 px
======================*/
@media (max-width:992px){
    .contact-layout{
        grid-template-columns:
            minmax(300px,340px)
            1fr;
        gap:var(--space-xl);
    }

}

/*====================
    = 920 px
======================*/
@media (max-width:920px){
    .contact-layout{
        grid-template-columns:1fr;
        gap:var(--space-3xl);
    }

    .beat-card{
        width:100%;
        position:static;
        top:auto;
        margin-top: 0;   
        min-height:auto;
    }

    .contact-form{
        margin-top: -40px;
        padding:var(--space-lg);
    }

    .beat-cover{
        width:150px;
        height:150px;
    }

    #customer-message{
        min-height:180px;
    }

    .contact-social{
        margin-top:var(--space-2xl);
        margin-bottom:var(--space-lg);
    }

    .contact-social h3{
        font-size:var(--text-h2);
    }

    .social-grid{
        grid-template-columns:
            repeat(2,1fr);
        gap:var(--space-lg);
    }
}

/*====================
    = 576 px
======================*/
@media (max-width:576px){
    .beat-cover{
        width:130px;
        height:130px;
    }

    .beat-details{
        gap:var(--space-md);
        flex-wrap:wrap;
    }

    #contact-price{
        font-size:var(--text-h3);
    }

    .beat-card h2{
        font-size:var(--text-h2);
    }

    #contact-beat-title{
        font-size:var(--text-h3);
    }

    .beat-card{
        padding:var(--space-lg);
    }

    .contact-form{
        padding:var(--space-md);
    }

    .contact-form h2{
        font-size:var(--text-h2);
        text-align:center;
    }

    .contact-form label{
        font-size:var(--text-uppersmall);
    }

    .contact-form input,
    .contact-form textarea{
        padding:var(--space-sm) var(--space-md);
        font-size:var(--text-small);
    }

    #customer-message{
        min-height:150px;
    }
    .contact-form button{
        width:100%;
        max-width:260px;
    }

    #contact-status{
        margin-top:var(--space-md);
        text-align:center;
    }

    .social-grid{
        grid-template-columns:1fr;
    }

    .social-card{
        padding:var(--space-lg);
        gap:var(--space-sm);
    }

    .social-card i{
        font-size:var(--text-h3);
    }

    .contact-social p{
        font-size:var(--text-body);
    }

    .social-card span{
        font-size:var(--text-small);
    }
}

/*==================================================
FOOTER
==================================================*/
@media (max-width:768px){
    .footer-bottom{
        flex-direction:column;
        gap:var(--space-md);
        text-align:center;
    }
}