:root{
    --text-tiny: 10px;
    --text-xs: 12px;
    --text-xs1: 13px;
    --text-sm: 14px;
    --text-sm1: 15px;
    --text-md: 16px;
    --text-md1: 17px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-mxl: 22px;
    --text-2xl: 24px;
    --text-3xl: 25px;
    --text-mid: 28px;
    --text-4xl: 30px;
    --text-mb4xl: 32px;
    --text-5xl: 34px;
    --text-mb5xl: 36px;
    --text-6xl: 40px;
    --text-7xl: 42px;
    --text-8xl: 46px;
    --text-9xl: 50px;
    --text-mdbig: 60px;
    --text-wblarge: 65px;
    --text-lgbig: 70px;
    --text-big: 80px;
    --text-wblg: 90px;
    
    --color-themeorange: #cb7e54;
    --color-themegreen: #77dcb2;
    --color-dark: #0a1415;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-bottle-green: #01211e;
    --color-footerbg: #1e1f21;
    --color-theme-lime: #dbf9cd;
    --color-theme-lightgreen: #dff8d4;
    --color-green: #60aa7a;
    --color-footer-heading: #e3f3db;
    --color-secondary-green: #b7f1cd;
    --color-dark-green: #122620;
    --color-bg-darkgreen: #0f2d38;
    --color-seagreen: #10dbc8;
    --color-moss-green: #1b2d2c;
    --color-dark-olive: #283009;
    --color-greenish-grey: #434646;
    --color-yellowish-grey: #66685c;
    --color-aqua: #0F7775;
}


*{
    box-sizing: border-box;
    scroll-behavior: smooth;
}
html{
    scroll-behavior: smooth;
}
ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
}
a{
    text-decoration: none;
    color: var(--color-dark);
    transition: all .3s ease-in-out;
}

.container{
    width: min(2200px, 90%);
    max-width: inherit;
    margin-inline: auto;
    position: relative;
}

body{
    background: var(--color-dark);
    background: var(--color-dark-green);
    background: var(--color-moss-green);
    background: var(--color-black);
    font-family: "Anybody", sans-serif;
    font-family: "Inter", sans-serif;
}
.viewport {
    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

/*---------------------------------header---------------------------------*/
.overflow-hidden{
    overflow: hidden;
}

.header-main{
    position: fixed;
    inset-inline: 0;
    top: 0;
    padding: 15px 0px;
    background: transparent;
    z-index: 5;
    box-shadow: inset 0px 40px 40px rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.14);
}
.logo{
    position: relative;
    z-index: 6;
}
.header-container{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}
.header-container__logo{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.menu-container__list{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mobile-only{
    display: none !important;
}
.menu-container__list ul li{
    display: inline-block;
    padding-left: 30px;
}
.menu-container__list ul li a{
    font-size: var(--text-xl);
    color: rgba(255,255,255,.7);
    text-transform: capitalize;
    transition: color 0.3s ease-in;
}
.menu-container__list ul li:hover a, .menu-container__list ul li.active a{
    color: rgba(255,255,255,.9);
}
.logo img{
    max-width: 50px;
}
.mobile-menu__burger{
    position: relative;
    cursor: pointer;
    width: 30px;
    display: none;
}
.mobile-menu__burger span{
    display: block;
    height: 2px;
    width: 30px;
    background: linear-gradient(to right, var(--color-theme-lightgreen), var(--color-themegreen) 92%);
    transition: width 0.3s ease-in, transform 0.3s ease-in;
}
.mobile-menu__burger span:nth-child(2){
    margin: 5px 0px;
    width: 24px;
}
.mobile-menu__burger:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--color-theme-lightgreen);
    left: 25px;
    top: 13px;
    animation: burger-bullet-1 2s ease-in-out infinite;
}
.mobile-menu__burger:after
{
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: var(--color-theme-lightgreen);
    left: 5px;
    top: -2px;
    animation: burger-bullet-2 2s ease-in-out infinite;
}


@keyframes burger-bullet-1{
    0% {
        left: 25px;
    }
    50% {
        left: 5px;
    }
    100% {
        left: 25px;
    }
}
@keyframes burger-bullet-2
{
    0% {
        left: 5px;
    }
    50% {
        left: 25px;
    }
    100% {
        left: 5px;
    }
}


/*---------------------------banner------------------------------*/
.banner{
    position: relative;
    background: linear-gradient(to right, var(--color-bg-darkgreen) 40%, var(--color-seagreen) 190%);
    overflow-x: hidden;
}
.banner__inner{
    height: 100vh;
    align-items: center;
    position: relative;
    display: grid;
    grid-template-columns: 550px 1fr;
    gap: 60px;
}
.banner__image{
    text-align: center;
    padding-top: 82px;
}

.banner-focus{
    text-align: center;
    position: relative;
    display: inline-block;
}
.banner-focus__img{
    display: inline-block;
    max-width: 400px;
    mix-blend-mode: overlay;
}

.hero-mike__img{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    top: 90px;
}
.hero-mike__img img{
    height: 100%;
}

  
.banner-orbit__wrapper{
    border: 3px solid rgba(201,177,85,.4);
    border-radius: 50%;
    position: relative;
    display: inline-block;
    padding: 25px;
    box-shadow: inset 230px 0px 75px rgb(210 246 203 / 20%);
}

@media (prefers-reduced-motion: no-preference) {
    .banner-orbit__rotator{
        display: flex;
    }
}
@media (prefers-reduced-motion: reduce) {
    .banner-orbit__rotator{
        display: none;
    }
}
.banner-orbit__rotator {
    pointer-events: none;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}
.banner-orbit__crowd.sub-circle1 {
    transform: rotate(60deg);
}
.banner-orbit__crowd{
    width: 55px;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    inset: -38px;
}
.banner-orbit__icon.top.circle1 {
    transition: filter .5s ease-in-out;
}
.banner-orbit__icon.top {
    position: absolute;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: 0%;
}
.banner-orbit__icon.bottom {
    position: absolute;
    top: auto;
    bottom: 0%;
    left: 0%;
    right: 0%;
}
.banner-orbit__icon.circle1 {
    -webkit-animation: rotating 85s linear reverse infinite;
    -moz-animation: rotating 85s linear reverse infinite;
    -ms-animation: rotating 85s linear reverse infinite;
    -o-animation: rotating 85s linear reverse infinite;
    animation: rotating 85s linear reverse infinite;
}
.banner-orbit__icon{
    opacity: 1;
    pointer-events: auto;
    border-radius: 50%;
    padding-top: 100%;
    position: static;
    overflow: visible;
}
.banner-orbit__icon-spinner.spinner{
    transform: rotate(-60deg);
}
.banner-orbit__icon-spinner {
    z-index: 3;
    border-radius: 50%;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}
.banner-orbit__icon-dp, .spinned-icon{
    width: 100%;
}
.spinned-icon img{
    width: 100%;
}


h1 span{
  color: var(--color-secondary-green);
}
.banner__text h1{
    font-size: var(--text-8xl);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-theme-lightgreen);
    margin-bottom: 10px;
}
@keyframes fadeIn {
    0% { opacity: 0;}
    100% { opacity: 1;}
}
@keyframes fadeInUp {
    0% { opacity: 0;transform: translateY(50px);}
    100% { opacity: 1;transform: translateY(0);}
}

.banner__text {
    padding-top: 40px;
    color: rgba(255,255,255,.82);
    position: relative;
    z-index: 2;
    align-self: center;
}
.banner__text p{
    font-size: var(--text-xl);
    line-height: 1.6;
    margin: 0 0 30px;
}

.btn-theme{
    display: inline-block;
    padding: 10px 30px;
    background-image: linear-gradient(to right, var(--color-themeorange), var(--color-themegreen) 43%);
    background-image: linear-gradient(to right, var(--color-theme-lime), var(--color-themegreen) 43%);
    background-size: 300% 160%;
    transition: background .3s ease-in-out, color .3s ease-in-out;
    border-radius: 30px;
    text-align: center;
    color: var(--color-black);
    font-size: var(--text-md);
    font-weight: 500;
    border-color: transparent;
    text-transform: capitalize;
    transition-property: all !important;
}
.btn-theme:hover, .btn-theme:focus {
    background-position: 26% 0;
    color: var(--color-bottle-green);
    transition-property: all !important;
}
.banner__text .btn-theme{
    animation: fadeIn 2s linear;
    transition: background .3s ease-in-out, color .3s ease-in-out, animation 1s ease-in;
    
   
}
.banner__object{
    position: absolute;
    inset: 0;
    padding: 100px 0px;
    mix-blend-mode: color-dodge;
}
.banner__object--image{
    max-width: 135px;
    
}
.banner__object--image:first-child{
    margin-left: -6%;
}

.banner__object--image:last-child{
    position: absolute;
    left: 35%;
    bottom: 20px;
    opacity: 0.65;
    
}

/*-------------------------------search and tab section--------------------------------------*/
.music-ocean{
    background: url(../images/dj-sound.jpg) no-repeat top center;
    background-size: 100%;
    position: relative;
    z-index: 0;
    padding: 80px 0px;
}
.music-ocean::before{
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(19, 19, 20, .96);
    position: absolute;
    inset: 0;
    z-index: 0;
    box-shadow: inset 0px -150px 150px rgba(25,44,43,.34);
}
.section-heading{
    text-align: center;
    position: relative;
    z-index: 1;
    
}
.section-heading__main{
    font-size: var(--text-6xl);
    line-height: 1.5;
    color: rgba(255,255,255,.82);
    font-weight: 600;
    margin-bottom: 15px;
    background: linear-gradient(to right, var(--color-green), var(--color-theme-lightgreen));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: capitalize;
}
.section-heading__text{
    font-size: var(--text-lg);
    color: rgba(255,255,255,.82);
}
.multi-search{
    display: flex;
    flex-direction: row-reverse;
    height: 54px;
    border: 2px solid rgb(182, 223, 183, .57);
    border-radius: 30px;
    background: linear-gradient(90deg, rgb(139, 188, 209,.1) 0%, rgb(33, 33, 33, .79) 90%);
    padding: 4px;
    max-width: 800px;
    margin-inline: auto;
    margin-top: 60px;
    overflow: hidden;
}
.multi-search__icon-wrap
{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 15px;
}
.multi-search__icon-wrap svg{
    max-height: 24px;
    width: auto;
}
.multi-search__icon-wrap svg g{
    fill: rgba(255,255,255,.7);
    transition: all .3s;
}
.multi-search__input-block:has(.multi-search__input:focus) + .multi-search__icon-wrap svg g{
    fill: var(--color-theme-lightgreen);
}

.multi-search__input-block{
    flex-grow: 1;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding-right: 15px;
}
.multi-search__input{
    width: 100%;
    height: 100%;
    font-size: var(--text-lg);
    line-height: 50px;
    color: var(--color-white);
    border: none;
    outline: none;
    background: transparent;
    padding-right: 15px;
}
.multi-search__input::placeholder{
    color: rgba(255,255,255,.7);
    text-align: center;
    transition: opacity .2s ease;
}
.multi-search__input:focus::placeholder{
    opacity: 0;
}


.multi-search__input-action{
    padding: 0;
    background: transparent;
    width: 30px;
    flex-shrink: 0;
    border: none;
}
.multi-search__input-action svg path{
    stroke: rgba(255,255,255,.75);
    transition: all .3s;
}
.multi-search__input-action:has(:focus, :hover) svg path{
    stroke: var(--color-theme-lightgreen);
    transition: all .3s;
}


.music-type__card{
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    border: 2px solid rgba(221,238,231,.17);
    transition: border-color .3s ease-in-out;
}
.music-type__card-link{
    height: 100%;
    width: 100%;
    display: block;
    position: relative;
    z-index: 2;
}
.music-type__card-link:before{
    content: "";
    height: 100%;
    width: 100%;
    background: rgba(18, 23, 24, .72);
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: background .3s ease-in-out;
}
.music-type__card-link:after{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background .3s ease-in-out;
}
.music-type__card:hover{
    border-color: rgba(221,238,231,.45);
}
.music-type__card:hover .music-type__card-link::before{
    background: transparent;
    transition: background .3s ease-in-out;
}
.music-type__card:hover .music-type__card-link:after{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    background: rgb(15, 45, 56, .77);
    transition: background .3s ease-in-out;
}

.music-type__card img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.7);
    transition: filter .3s ease-in-out;
}
.music-type__card:hover img{
    filter: grayscale(0);
    transition: filter .3s ease-in-out;
}
.music-type__card h4{
    font-size: var(--text-xl);
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(221,238,231,.81);
}
.music-type__card-name{
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.music-type__card-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 150px);
    gap: 25px;
    
}
.music-type__tab-section{
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 80px;
    margin-top: 90px;
    max-width: 900px;
    margin-inline: auto;
}


.music-type__tab-menu{
    flex-direction: column;
    align-items: center;
    gap: 35px;
    border-bottom: none !important;
}
.music-type__tab-menu .nav-item{
    position: relative;
    width: 100%;
    z-index: 0;
}
.music-type__tab-menu .nav-link{
    background: transparent;
    border: 2px solid rgba(221,238,231,.17);
    border-radius: 30px;
    padding: 13px 10px;
    min-width: 100%;
    width: max-content;
    color: rgb(228, 244, 221, .9) !important;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    transition: border-color .3s ease-in, background .3s ease-in;
}
.music-type__tab-menu .nav-link:hover{
    border-color: rgba(221,238,231,.25);
    background: var(--color-moss-green);
}
.music-type__tab-menu .nav-item.show, .music-type__tab-menu .nav-link.active{
    
    background: var(--color-moss-green);
    border-color: transparent; 
}

.music-type__tab-menu .nav-item.show:after, .music-type__tab-menu .nav-item:has(.nav-link.active):after{
    content: "";
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    position: absolute;
    top: -3px;
    bottom: -3px;
    left: -3px;
    right: -3px;
    background: linear-gradient(var(--gradient-angle), var(--color-moss-green), rgb(193, 249, 167, .51));
    border-radius: 30px;
    animation: rotation 3s linear 0s infinite normal forwards;
}

@keyframes rotation 
    {
        0%
        {
            --gradient-angle : 0deg;
        }
        100%
        {
            --gradient-angle : 360deg;
        }
    }
@property --gradient-angle
    {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
    }



    /*---------------------------------boost with music---------------------------*/
    .do-with__music{
        position: relative;
        padding: 80px 0px;
        background: rgba(1, 11, 12, 1);
    }
    .music-boost{
        display: flex;
        gap: 50px;
        overflow: hidden;
        max-width: 1100px;
        margin: 70px auto 0;
    }
    .music-boost__card{
        border-radius: 8px;
        overflow: hidden;
        min-height: 500px;
        max-height: 500px;
        flex: 1 1 50%;
        transition: flex .5s ease-in-out, border-color .5s ease-in-out;
        position: relative;
        border: 2px solid rgba(221, 238, 231, .17);
        transition-property: opacity, transform, flex, border-color !important;
    }
    .music-boost__card:hover{
        flex: 3 0 65%;
        transition: flex .5s ease-in-out, border-color .5s ease-in-out;
        border-color: rgba(221, 238, 231, .25);
        transition-property: opacity, transform, flex, border-color !important;
    }
    .music-boost__card a{
        width: 100%;
        height: 100%;
        display: block;
        position: relative;
    }
    .music-boost__card a img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform .5s ease-in-out;
    }
    .music-boost__card a:after{
        content: "";
        height: 100%;
        width: 100%;
        box-shadow: inset 350px 0px 350px rgba(14, 18, 12, .9);
        position: absolute;
        inset: 0;
        z-index: 0;
    }
    .music-boost__card:last-child a::after{
        box-shadow: inset -280px 0px 200px rgba(17, 47, 45, 1);
    }
    .music-boost__card--content{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 20px;
        z-index: 1;
        max-width: 300px;
    }
    .music-boost__card:last-child .music-boost__card--content{
        right: 0;
        text-align: right;
    }
    .music-boost__card--content p{
        font-size: var(--text-mid);
        font-weight: 500;
        color: var(--color-theme-lightgreen);
        line-height: 1.6;
    }
    .music-boost__card--content p span{
        font-size: var(--text-xl);
        font-weight: 300;
        display: block;
        margin-top: 18px;
    }
    .do-with__music::before{
        content: "";
        width: 100%;
        height: 100%;
        background: url(../images/listening6.jpg) no-repeat top center;
        background-size: cover;
        position: absolute;
        inset: 0;
        opacity: 0.019;
        z-index: 0;
    }


    /*------------------------latest track section--------------------*/
    .latest-track{
        position: relative;
        padding: 80px 0px;
        text-align: center;
        background: radial-gradient(120.19% 65.75% at -30.21% 2.58%, rgba(236, 243, 219, .10) 7.12%, 
        rgba(10, 36, 28, 1) 42.28%, rgba(23, 23, 23, 1) 100%), linear-gradient(189.22deg, var(--color-dark-olive) -17.47%, 
        var(--color-black) 66.23%);
        background: radial-gradient(120.19% 65.75% at -30.21% 2.58%, rgba(236, 243, 219, .10) 7.12%, rgba(19, 21, 24, 1) 42.28%, 
        rgba(23, 23, 23, 1) 100%), linear-gradient(189.22deg, var(--color-dark-olive) -17.47%, var(--color-black) 66.23%);
    }
    .latest-track__slider{
        position: relative;
        z-index: 1;
        margin-bottom: 60px;
        padding: 60px 0px 20px;
    }
    
    .latest-track__slider--model__card{
        border-radius: 10px;  
        z-index: 0;
        position: relative;
        text-align: left;
        margin-inline: 12px;
        width: 100%;
        width: 1025px !important;
        min-height: 500px;
        max-height: 500px;
    
    }
    .latest-track__slider--model__card a{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 6px;
        background: linear-gradient(to top right, rgba(67, 70, 70, .48) 20%, rgba(17, 34, 40, .76) 40%);
        position: relative;
        z-index: 1;
    }
    .latest-track-image{
        height: 100%;
        width: 100%;
        border-radius: 6px;
        overflow: hidden;
    }
    .latest-track__slider--model__card img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
    }

    .latest-track__text-wrap{
        color: var(--color-theme-lightgreen);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 50px 70px;
        position: relative;
    }
    .latest-track__slider--model__card::before{
        content: "";
        width: calc(100% + 6px);
        height: calc(100% + 6px);
        position: absolute;
        top: -3px;
        bottom: -3px;
        left: -3px;
        right: -3px;
        background: linear-gradient(var(--gradient-angle), var(--color-greenish-grey), rgba(106, 145, 153, .51));
        border-radius: 6px;
        z-index: 0;
    }
    .latest-track__text-wrap h4{
        font-size: var(--text-6xl);
        font-weight: 800;
        line-height: 1.5;
        margin-bottom: 15px;
        text-transform: uppercase;
    }
    .latest-track__text-wrap p{
        font-weight: 300;
        line-height: 2;
        margin-bottom: 30px;
    }
    .latest-track__btn{
        display: flex;
        gap: 10px;
    }
    .latest-track__btn button{
        display: flex;
        gap: 6px;
        align-items: center;
        justify-content: center;
    }
    .latest-track__btn button svg{
        max-width: 24px;
        max-height: 24px;
    }
    .btn--secondary{
        background: transparent;
        border: 2px solid var(--color-theme-lightgreen);
        color: var(--color-theme-lightgreen);
        transition: border-color .3s ease-in-out, color .3s ease-in-out;
    }
    .btn--secondary svg g{
        fill: var(--color-theme-lightgreen);
        transition: all .3s;
    }
    .btn--secondary:hover, .btn--secondary:focus{
        border-color: var(--color-themegreen);
        color: var(--color-themegreen);
    }
    .btn--secondary:hover svg g, .btn--secondary:focus svg g{
        fill: var(--color-themegreen);
    }
    .track-splide .splide__arrow{
        background: rgba(211, 247, 203, .6);
        opacity: 1;
        transition: all .3s;
    }
    .track-splide .splide__arrow--prev{
        left: -35px;
    }
    .track-splide .splide__arrow--next{
        right: -35px;
    }
    .track-splide .splide__arrow:hover:not(:disabled), .track-splide .splide__arrow:focus:not(:disabled) {
        opacity: 1;
        background: rgba(211, 247, 203, .75);
        transition: all .3s;
    }


/*----------------------------------pre-footer--------------------------------*/

.pre-footer{
    position: relative;
    background: radial-gradient(120.19% 65.75% at -30.21% 2.58%, rgba(255, 208, 40, .12) 7.12%, rgba(15, 45, 56, .70) 42.28%, 
    rgba(1, 11, 12, 1) 100%), linear-gradient(189.22deg, var(--color-dark-olive) -17.47%, var(--color-black) 66.23%);
    padding: 80px 0px;
}

.gallery{
    display: grid;
    grid-gap: 20px;
    grid-auto-rows: 50px;
    grid-auto-flow: dense;
    max-width: 1050px;
    margin-inline: auto;
    position: relative;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-top: 80px;
    z-index: 0;
}
.gallery__item{
    border-radius: 6px;
    overflow: hidden;
}
.gallery__item img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.gallery__item:nth-child(2){
    grid-row: span 4;
    margin-top: 50px;
}
.gallery__item:nth-child(3){
    grid-row: span 2;
    margin-top: -40px;
}
.gallery__item:nth-child(4){
    grid-row: span 4;
    margin-top: 20px;
}
.gallery__item:nth-child(5){
    grid-row: span 3;
}
.gallery__item:nth-child(6){
    grid-row: span 3;
    
}
.gallery__item:nth-child(7){
    grid-column: span 2;
}
.gallery__item:nth-child(8){
    grid-row: span 2;
    
}
.gallery__item:nth-child(9){
    grid-row: span 3;
    
}
.gallery__item:nth-child(10){
    grid-row: span 2;
    grid-column: span 2;
}
.gallery__item:nth-child(11){
    grid-column: span 2;
}


.pre-footer__overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 20%, var(--color-black) 80%);
    mix-blend-mode: darken;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

section{
    overflow: hidden;
}

/*--------------------------------------------Artist section----------------------------------------*/
.artist-view__forum{
    background: radial-gradient(120.19% 65.75% at -30.21% 2.58%, 
    rgba(255, 208, 40, .12) 7.12%, rgba(15, 45, 56, .42) 42.28%, rgba(10, 0, 7, 1) 100%), 
    linear-gradient(189.22deg, var(--color-yellowish-grey) -17.47%, var(--color-black) 66.23%);
    padding: 70px 0px 300px;
    position: relative;
}
.artist-circle__wrapper{
    pointer-events: none;
    min-width: 1500px;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 50%;
    right: 0%;
    transform: translate(-50%);
}
.artist-circle{
    pointer-events: none;
    width: 100%;
    padding-top: 100%;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 50%;
    right: 0%;
    transform: translate(-50%, 20%);
}
.artist-circle__rotator{
    pointer-events: none;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}
.circle1{
    -webkit-animation: rotating 85s linear infinite;
    -moz-animation: rotating 85s linear infinite;
    -ms-animation: rotating 85s linear infinite;
    -o-animation: rotating 85s linear infinite;
    animation: rotating 85s linear infinite;
}
.artist-circle__person.circle1{
    -webkit-animation: rotating 85s linear reverse infinite;
    -moz-animation: rotating 85s linear reverse infinite;
    -ms-animation: rotating 85s linear reverse infinite;
    -o-animation: rotating 85s linear reverse infinite;
    animation: rotating 85s linear reverse infinite;
}

.artist-circle__crowd.sub-circle1{
    transform: rotate(60deg);
}
.artist-circle__crowd.sub-circle2{
    transform: rotate(15deg);
}
.artist-circle__crowd.sub-circle3{
    transform: rotate(120deg);
}
.artist-circle__person-spinner.spinner--1{
    transform: rotate(-60deg);
}
.artist-circle__person-spinner.spinner--2{
    transform: rotate(-15deg);
}
.artist-circle__person-spinner.spinner--3{
    transform: rotate(-120deg);
}

.circle2{
    -webkit-animation: rotating 50s linear infinite;
    -moz-animation: rotating 50s linear infinite;
    -ms-animation: rotating 50s linear infinite;
    -o-animation: rotating 50s linear infinite;
    animation: rotating 50s linear infinite;
}
.artist-circle__person.circle2{
    -webkit-animation: rotating 50s linear reverse infinite;
    -moz-animation: rotating 50s linear reverse infinite;
    -ms-animation: rotating 50s linear reverse infinite;
    -o-animation: rotating 50s linear reverse infinite;
    animation: rotating 50s linear reverse infinite;
}
.artist-circle__crowd.sub-circle4a{
    top: 12%;
    bottom: 12%;
    left: 12%;
    right: 12%;
    transform: rotate(105deg);
}
.artist-circle__crowd.sub-circle4b{
    top: 12%;
    bottom: 12%;
    left: 12%;
    right: 12%;
    transform: rotate(165deg);
}
.artist-circle__crowd.sub-circle4c{
    top: 12%;
    bottom: 12%;
    left: 12%;
    right: 12%;
    transform: rotate(60deg);
}
.artist-circle__person-spinner.spinner--4a{
    transform: rotate(-105deg);
}
.artist-circle__person-spinner.spinner--4b{
    transform: rotate(-165deg);
}
.artist-circle__person-spinner.spinner--4c{
    transform: rotate(-60deg);
}

@media (prefers-reduced-motion: no-preference) {
    .artist-circle__rotator{
        display: flex;
    }
}
@media (prefers-reduced-motion: reduce) {
    .artist-circle__rotator{
        display: none;
    }
}


.artist-circle__crowd{
    width: 6%;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    top: 2%;
    bottom: 2%;
    left: 2%;
    right: 2%;
}

.artist-circle__person{
    opacity: 1;
    pointer-events: auto;
    border-radius: 50%;
    padding-top: 100%;
    position: static;
    overflow: visible;
}
.artist-circle__person.top {
    position: absolute;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: 0%;
}
.artist-circle__person.top.circle1{
    transition: filter .5s ease-in-out;
}
.artist-circle__person.bottom {
    position: absolute;
    top: auto;
    bottom: 0%;
    left: 0%;
    right: 0%;
}


.artist-circle__person-spinner{
    z-index: 3;
    border-radius: 50%;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}
.artist-circle__card{
    opacity: 0;
    transform: scale(0);
}
.artist-circle__card{
    aspect-ratio: 1;
    opacity: 0;
    color: var(--color-white);
    cursor: pointer;
    border-radius: 50%;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    max-width: 120px;
    height: 100%;
    transition: box-shadow .2s cubic-bezier(.165,.84,.44,1);
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(.5);
}
.artist-hero_img{
    filter: saturate(20%);
    object-fit: cover;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    transition: box-shadow .4s cubic-bezier(.165,.84,.44,1), transform .4s cubic-bezier(.165,.84,.44,1);
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}
.artist-name{
    color: rgba(141, 178, 193, .58);
    text-align: center;
    width: 100%;
    max-width: 80px;
    font-size: .9375rem;
    line-height: 1.2;
    position: absolute;
    top: 115%;
}
.artist-hero_img:hover {
    filter: saturate();
    outline-color: var(--color-themegreen);
    outline-offset: 6px;
    outline-width: 2px;
    outline-style: solid;
    transform: scale(1.05);
    box-shadow: 0 4px 4px rgba(20, 204, 245, 0.3), 0 4px 60px rgba(200, 245, 20, 0.18);
    transition: box-shadow .4s cubic-bezier(.165,.84,.44,1), transform .4s cubic-bezier(.165,.84,.44,1);
}


.artist-ring__block{
    z-index: -1;
    pointer-events: none;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}
.artist-ring {
    pointer-events: none;
    border: 3px solid rgba(80,102,91,.7);
    border-radius: 50%;
    position: absolute;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
    transform: scale(.39);
}
.ring4 {
    transform: scale(.6);
}
.ring3 {
    transform: scale(.7);
}
.ring2 {
    transform: scale(.8);
}
.ring1 {
    transform: scale(.9);
}
.artist__view-all-btn{
    text-align: center;
    position: relative;
    z-index: 1;
}
.content-p{
    text-align: center;
    font-size: var(--text-xl);
    line-height: 2;
    color: rgba(221,238,231,.81);
    max-width: 800px;
    margin: 50px auto 40px;
}


@-webkit-keyframes rotating {
    from {
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    to {
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes rotating {
    from {
      -ms-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    to {
      -ms-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }


/*----------------------------footer---------------------------*/
.footer-main{
    background: var(--color-footerbg);
}
.footer-top{
    padding: 50px 0px;
}
.footer-logo{
    padding: 0px 0px 25px;
}
.footer-logo img{
    max-width: 60px;
}
.footer-top__grid{
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 110px;
}
.footer-top__menu-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.footer-text{
    font-size: var(--text-sm);
    color: rgba(255,255,255,.75);
    line-height: 1.8;
}
.footer-heading{
    font-size: var(--text-lg);
    color: var(--color-footer-heading);
    margin-bottom: 20px;
}
.footer-top__menu li{
    margin-bottom: 10px;
}
.footer-top__menu li:hover a{
    color: var(--color-white);
}
.footer-bottom{
    border-top: 1px solid rgba(221,238,231,.81);
    padding: 20px 0px;
}
.footer-bottom__grid{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer__copy{
    font-size: var(--text-sm);
    color: rgba(227, 243, 219, .47);
    margin-bottom: 0px;
}
.footer__social-media{
    display: flex;
    gap: 20px;
}
.footer__social-media svg path{
    fill: rgba(227, 243, 219, .47);
    transition: all .3s ease-in-out;
}
.footer__social-media a:hover svg path{
    fill: var(--color-theme-lime);
    transition: all .3s ease-in-out;
}
.footer-top__menu .footer-text{
    line-height: 1.2;
}



/*------------------------------------------About page-------------------------------------*/
.hero-girl__img{
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.hero-girl__img img{
    height: 100%;
}
.about--banner__image{
    align-self: end;
    position: relative;
    padding-top: 290px;
}
.about--banner__inner{
    height: auto;
}

.about--banner__image .banner-focus__img{
    min-width: 450px;
}
.about-bn__element-wrapper{
    position: absolute;
    top: -130px;
    bottom: 100px;
    left: -140px;
    right: 0;
}
.about-bn__element-wrapper img:first-child{
    position: absolute;
    left: 0;
    bottom: 0;
}
.about-bn__element-wrapper img:nth-child(2){
    position: absolute;
    left: 100px;
    top: 100px;
}
.about-bn__element-wrapper img:nth-child(3){
    position: absolute;
    right: 0;
    top: 0;
}
.about-bn__element-wrapper img:last-child{
    position: absolute;
    right: -80px;
    bottom: 0;
}

.about__focus{
    background: radial-gradient(120.19% 65.75% at -11.21% 2.58%, var(--color-bg-darkgreen) 7.12%, #1f2a2f 66.23%);
    position: relative;
}
.about__grid{
    display: grid;
    grid-template-columns: 45% 1fr;
}
.about__img-grid{
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 45%;
}
.about__img-grid:after{
    content: "";
    background: linear-gradient(to left, transparent 30%, #1f2a2f 80%);
    width: 100%;
    position: absolute;
    top: -100px;
    bottom: -125px;
    left: -100px;
    z-index: 0;
    box-shadow: inset 250px 0px 270px #1f2a2f;
    border-radius: 40% 0 0 40%;
}
.about-img__wrapper{
    width: 100%;
    height: 100%;
    border-radius: 40% 0 0 40%;
    overflow: hidden;
}
.about__img-grid img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about__content-grid{
    width: 60%;
    padding: 65px 40px 40px 0px;
}
.about__content{
    font-size: var(--text-lg);
    line-height: 1.8;
    color: rgba(255,255,255,.75);
    margin: 25px 0px 15px;
}
.assets__grid{
    display: flex;
    gap: 30px;
    margin: 40px 0px;
}
.assets{
    width: 140px;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(to bottom, #4c747e, #1d252a);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--color-white);
}
.assets b{
    display: block;
    margin-bottom: 5px;
    font-size: var(--text-xl);
    font-weight: 500;
}
.assets p{
    margin: 0px;
}
.rising__track-grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 60px auto;
    
}
.rising__track-card:hover{
    box-shadow: 0px 10px 40px rgba(209, 246, 203, .3);
    border-color: rgba(209, 246, 203, .3);
    transition-property: opacity, transform, box-shadow, border-color !important;
}
.rising__track-card{
    background: #1c1d31;
    border-radius: 25px;
    overflow: hidden;
    padding-bottom: 25px;
    text-align: center;
    box-shadow: 0px 10px 40px transparent;
    border: 1px solid transparent;
    transition-property: opacity, transform, box-shadow, border-color !important;
}
.rising__tracks{
    padding: 80px 0px;
}
.rising__artist-card{
    min-height: 250px;
    max-height: 250px;
    text-align: center;
    padding-top: 45px;
    margin-bottom: 25px;
    border-radius: 0 0 25px 25px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.rising__artist-card img{
    max-height: 210px;
    max-width: 100%;
}
.rising__track-card:first-child .rising__artist-card{
    background: #549d96;
}
.rising__track-card:nth-child(2) .rising__artist-card{
    background: #f0f0f0;
}
.rising__track-card:nth-child(3) .rising__artist-card{
    background: #d48394;
}
.rising__track-card:nth-child(4) .rising__artist-card{
    background: #e9c9a3;
}
.rising__track-card:last-child .rising__artist-card{
    background: #92e4b9;
}
.rising__track-card h4{
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255,255,255,.7);
    margin-bottom: 0px;
    transition: all .3s;
}
.rising__track-card:hover h4{
    color: rgba(255,255,255,.82);
    transition: all .3s;
}
.rising__tracks .section-heading__main{
    max-width: 600px;
    margin: 0 auto 15px;
}
.more__about-music{
    background: radial-gradient(120.19% 65.75% at -30.21% 2.58%, 
    rgba(255, 208, 40, .12) 7.12%, rgba(15, 45, 56, .42) 42.28%, rgba(10, 0, 7, 1) 100%), 
    linear-gradient(189.22deg, var(--color-yellowish-grey) -17.47%, var(--color-black) 66.23%);
    padding: 65px 0px 80px;
}
.more__genre-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1000px;
    margin: 80px auto 90px;
}
.more__genre-card{
    background: linear-gradient(to top right, rgba(32,33,53,1), #1c1d31);
    padding: 55px 30px;
    border-radius: 20px;
    color: rgba(255,255,255,.75) !important;
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
    box-shadow: 0px 0px 30px transparent;
    transition-property: opacity, transform, border-color, box-shadow !important;
}
.more__genre-card:hover{
    border-color: rgba(255,255,255,.2);
    box-shadow: 0px 0px 30px rgba(98, 147, 140, .3);
    transition-property: opacity, transform, border-color, box-shadow !important;
}
.more__genre-card::after{
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    inset: 0;
    box-shadow: inset -80px 0px 80px rgb(0, 0, 0, .64);
}
.more__genre-card p{
    font-size: var(--text-md);
    margin-bottom: 0px;
}
.more__genre-headline{
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 18px;
    align-items: center;
    margin-right: -30px;
    margin-bottom: 30px;
    overflow: hidden;
}
.more__genre-headline b{
    font-size: var(--text-mid);
    line-height: 1.5;
}
.more__genre-dp{
    display: flex;
    gap: 12px;
}
.more__genre-img{
    height: 80px;
    width: 80px;
    border-radius: 10px;
    overflow: hidden;
}
.more__genre-img img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}


/*-----------------------------Login page----------------------------------*/
.login__page-wrapper{
    position: fixed;
    min-height: 100vh;
    inset: 0;
    z-index: 5;
    padding: 40px 0px;
    overflow-y: auto;
}
.login__page{
    padding: 50px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 15px;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    background: rgba(255,255,255,.09);
    background: linear-gradient(45deg, rgba(255, 255, 255, .18), transparent);
}

.music__bar{
    margin: 10px 0px;
    text-align: center;
}
.music__bar img{
    max-width: 100%;
    max-height: 200px;
}

.login__page h3{
    font-size: var(--text-mid);
    color: rgba(255,255,255,.75);
}
.login__headline{
    font-size: var(--text-sm1);
    color: rgba(255,255,255,.68);
    line-height: 1.5;
    margin-bottom: 25px;
}
.login__form label{
    font-size: var(--text-md);
    color: rgba(255,255,255,.7);
    margin-bottom: 10px;
}
.login__input{
    height: 50px;
    border-radius: 30px;
    background: rgba(247, 247, 247, .19);
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}
.login__input .form__control{
    width: 100%;
    height: 100%;
    line-height: 50px;
    position: relative;
    background: transparent;
    border: none;
    outline: none;
    padding: 0px 12px 0px 50px;
    font-size: var(--text-sm1);
    color: rgba(255,255,255,.82);
}
.login__input .form__control::placeholder{
    color: rgba(255,255,255,.3);
}
.login__input span{
    position: absolute;
    left: 15px;
    top: 11px;
}
.login__input span svg{
    max-width: 20px;
    max-height: 22px;
}
.login__input span svg path{
    stroke: rgba(255,255,255,.5);
    transition: all .3s;
}
.signup__text{
    font-size: var(--text-sm1);
    color: rgba(255,255,255,.7);
    margin: 25px 0px 0px;
    text-align: center;
}
.signup__text a{
    color: var(--color-theme-lightgreen);
}
.signup__text a:hover{
    text-decoration: underline;
}
.close-page{
    position: absolute;
    right: 25px;
    top: 25px;
    cursor: pointer;
}
.close-page svg{
    max-width: 30px;
    max-height: 30px;
}
.close-page svg path{
    stroke: var(--color-theme-lightgreen);
    stroke-width: 1.7px;
    transition: all .3s;
}
.close-page svg:hover path{
    stroke: var(--color-white);
}
.login__input:has(.form__control:focus) span svg path{
    stroke: var(--color-white);
}


/*--------------------------Pricing page----------------------------*/
.pricing__page{
    padding: 160px 0px 100px;
    text-align: center;
    position: relative;
}
.pricing__page-ellipse{
    position: absolute;
    inset: 0;
    top: 80px;
    z-index: 0;
    display: flex;
    justify-content: space-between;
}
.pricing__page-ellipse img{
    max-width: 100%;
    max-height: 220px;
    opacity: .35;
}
.pricing__page-ellipse img:last-child{
    align-self: end;
    opacity: .5;
}

.pricing__grid{
    width: 100%;
    max-width: 1000PX;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    position: relative;
}

.pricing__card{
    padding: 50px 25px 30px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(217, 217, 217, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    color: var(--color-theme-lightgreen) !important;
    transition: all .3s;
    position: relative;
    z-index: 1;
    transition-property: opacity, transform, box-shadow !important;
    box-shadow: 0px 0px 40px transparent;
    text-align: left;
}
.pricing__card:hover{
    box-shadow: 0px 0px 40px rgba(98,147,140,.5);
    transition-property: opacity, transform, box-shadow !important;
}
.pricing__card-ellipse{
    position: absolute;
    z-index: 0;
}
.pricing__card-ellipse:first-child{
    top: -65px;
    left: -70px;
}
.pricing__card-ellipse:first-child img{
    max-width: 110px;
}
.pricing__card-ellipse:nth-child(2){
    bottom: -50px;
    right: -60px;
}
.pricing__card-ellipse:nth-child(2) img{
    max-width: 100px;
}

.pricing__card h4{
    font-size: var(--text-lg);
    font-weight: 500;
    margin: 0px 0px 5px;
    color: var(--color-themegreen);
    position: relative;
}
.pricing__card h3{
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--color-theme-lightgreen);
    position: relative;
    margin: 0px 0px 15px;
}
.pricing__card p::after{
    content: "";
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: var(--color-white);
    background: linear-gradient(to right, var(--color-theme-lime), var(--color-themegreen) 88%);
    position: absolute;
    top: 10px;
    left: 0;    
}
.pricing__card .btn-theme{
    width: 100%;
}
.pricing__card p{
    font-size: var(--text-lg);
    line-height: 1.5;
    margin: 10px 0px;
    position: relative;
    padding-left: 16px;
}
.pricing__card p:first-child{
    margin: 30px 0px 10px;
}
.pricing__card p b{
    color: var(--color-themegreen) !important;
}




@media (min-width: 1600px) {
    .banner-focus__img {
        max-width: 100%;
        min-width: 500px;
    }
    .hero-mike__img{
        top: 115px;
    }
}


@media (min-width: 1800px){
    /* section:not(.banner){
        min-height: 85vh;
        padding: 150px 0px;
    } */
    .banner-focus__img {
        min-width: 590px;
    }
    .banner__text h1 {
        font-size: var(--text-9xl);
    }
    .banner__inner{
        grid-template-columns: 600px 1fr;
    }
    .hero-mike__img{
        top: 145px;
    }
    .banner-orbit__wrapper{
        box-shadow: inset 300px 0px 150px rgb(210, 246, 203, .20);
    }
}


@media (min-width: 2200px){
    /* section:not(.banner){
        min-height: 65vh;
        padding: 80px 0px;
    } */
    
    .banner-focus__img {
        min-width: 720px;
    }
    .hero-mike__img {
        top: 180px;
    }
    .banner__inner {
        grid-template-columns: 720px 1fr;
    }
    .banner__text h1 {
        font-size: var(--text-mdbig);
    }
    .banner__text p {
        font-size: var(--text-2xl);
    }

    /*----------------------Pricing page------------------------*/
    .pricing__page{
        min-height: 70vh;
    }
}
@media (min-width: 3000px){
    .banner-focus__img {
        min-width: 820px;
    }
    .artist-circle{
        transform: translate(-50%, 15%);
    }
}

@media (min-width: 4000px){
    .banner-focus__img {
        min-width: 920px;
    }
    .hero-mike__img {
        top: 210px;
    }

    .artist-view__forum{
        padding: 70px 0px 480px;
    }
    .artist-circle{
        transform: translate(-50%, 12%);
    }
    /*----------------------Pricing page------------------------*/
    .pricing__page{
        min-height: 80vh;
    }
}

@media (max-width: 1400px){
    h1{
        font-size: var(--text-mdbig);
    }
    .latest-track__slider--model__card{
        width: 900px !important;
        min-height: 450px;
        max-height: 450px;
    }
    .latest-track__text-wrap{
        padding: 35px 50px;
    }

    /*---------------------------------About page---------------------------------*/
    .about-bn__element-wrapper img:last-child{
        right: -60px;
    }
}

@media (max-width: 1200px){
    .latest-track__slider--model__card{
        width: 750px !important;
        min-height: 400px;
        max-height: 400px; 
    }
    .latest-track__text-wrap{
        padding: 25px 30px;
    }
    .latest-track__text-wrap h4 {
        font-size: var(--text-mb5xl);
    }
    .latest-track__btn button{
        padding: 10px 20px;
    }
    .banner-focus__img{
        max-width: 100%;
    }
    .banner__inner{
        grid-template-columns: 430px 1fr;
    }
    .banner__text h1 {
        font-size: var(--text-7xl);
    }
    .banner-orbit__icon.top{
        top: 4px;
    }
    .banner-orbit__icon.bottom{
        bottom: 4px;
    }


    /*----------------------------About page------------------------------*/
    .about--banner__inner{
        grid-template-columns: 430px 1fr;
    }
    .about--banner__image .banner-focus__img {
        min-width: 380px;
        max-width: 380px;
    }
    .hero-girl__img img {
        max-height: 520px;
    }
    .about-bn__element-wrapper img{
        max-height: 80px;
        max-width: 65px;
    }
    .about-bn__element-wrapper img:first-child{
        left: 70px;
    }
    .about-bn__element-wrapper img:nth-child(2){
        left: 145px;
    }
    .about-bn__element-wrapper img:nth-child(3) {
        right: 65px;
        top: 50px;
    }
    .about-bn__element-wrapper img:last-child{
        right: -60px;
    }
    .about--banner__image {
        padding-top: 190px;
    }
    .about__content-grid {
        width: 80%;
        padding-right: 0px;
    }
    .about__content{
        font-size: var(--text-md);
    }
    

    /*----------------------Pricing page-------------------------*/
    .pricing__card-ellipse:first-child {
        top: -55px;
        left: -55px;
    }
    
}

@media (max-width: 1025px){
    
    /*---------------------------------About page-----------------------------------*/
    .rising__track-grid{
        gap: 10px;
    }
}


@media (max-width:991px){
    .banner__inner{
        height: inherit;
        min-height: 600px;
    }
    .banner__inner {
        grid-template-columns: 1fr 300px;
        gap: 35px;
    }
    .banner__text h1 {
        font-size: var(--text-mb5xl);
    }
    .banner__text p {
        font-size: var(--text-sm1);
    }
    .btn-theme{
        font-size: var(--text-sm);
    }

    .section-heading__main {
        font-size: var(--text-mb5xl);
    }
    .music-type__tab-section{
        gap: 40px;
        grid-template-columns: 170px 1fr;
    }
    .music-type__card h4 {
        font-size: var(--text-lg);
    }
    .multi-search{
        height: 48px;
    }
    .music-boost__card--content p {
        font-size: var(--text-2xl);
        margin: 0px;
        text-align: center;
    }
    .music-boost__card--content p span {
        font-size: var(--text-md);
    }
    .music-boost__card:hover {
        flex: 2 0 58%;
    }
    .music-boost{
        flex-direction: column;
    }
    .music-boost__card {
        min-height: inherit;
        max-height: inherit;
        height: 350px;
        flex: none !important;
    }
    .music-boost__card:hover a img{
        transform: scale(1.1);
        transition: transform .6s ease-in-out;
    }
    .music-boost__card a img{
        transition: transform .6s ease-in-out;
    }
    .music-boost__card--content{
        max-width: 100%;
        left: 0;
        right: 0;
    }
    .music-boost__card:last-child a::after {
        box-shadow: inset -280px 0px 200px rgba(17, 47, 45, .81);
    }
    .music-boost__card a:after{
        box-shadow: inset 350px 0px 350px rgba(14, 18, 12, .83);
    }
    
    .content-p{
        font-size: var(--text-md1);
    }
    .artist-view__forum{
        padding: 70px 0px 280px;
    }
    .artist-circle{
        transform: translate(-50%, 19%);
    }

    .latest-track__slider--model__card{
        width: 620px !important;
        min-height: 330px;
        max-height: 330px; 
        grid-template-columns: 46% 1fr;
    }
    .latest-track__text-wrap h4 {
        font-size: var(--text-mb4xl);
    }
    .latest-track__btn {
        gap: 8px;
    }
    .latest-track__text-wrap {
        padding: 20px;
    }
    .latest-track__btn button {
        padding: 10px 15px;
    }

    .footer-top__grid{
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .about--banner__image .banner-focus__img {
        min-width: 280px;
        max-width: 280px;
    }
    .hero-girl__img img {
        max-height: 370px;
    }
    .about--banner__image {
        padding-top: 190px;
    }
    .rising__artist-card {
        min-height: 170px;
        max-height: 170px;
    }
    .rising__artist-card img {
        max-height: 130px;
    }
    .rising__track-card h4{
        font-size: var(--text-md);
    }
    .rising__track-grid{
        grid-template-columns: repeat( auto-fit, minmax(120px, 1fr) );;
    }
    .more__genre-headline b {
        font-size: var(--text-mxl);
    }
    .more__genre-headline {
        grid-template-columns: 45% 1fr;
    }
    .more__genre-img {
        height: 60px;
        width: 60px;
    }

    /*------------------------Pricing page------------------------*/
    .pricing__card h4 {
        font-size: var(--text-mxl);
    }
    .pricing__card p {
        font-size: var(--text-md);
    }
    .pricing__card {
        padding: 50px 20px 30px;
    }
    .pricing__grid{
        gap: 15px;
    }
    .pricing__card-ellipse:first-child img {
        max-width: 100px;
    }
    .pricing__card-ellipse:nth-child(2) img {
        max-width: 90px;
    }
    .pricing__card-ellipse:first-child {
        top: -45px;
        left: -45px;
    }
    .pricing__card-ellipse:nth-child(2) {
        bottom: -35px;
        right: -40px;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 96%;
    }
    .header-container__logo{
        width: 100%;
    }
    .mobile-only{
        display: block !important;
    }
    .header-container .btn-theme{
        display: none;
    }
    .mobile-menu__burger{
        display: block;
        z-index: 5;
    }    
    .mobile-menu__burger.active span:first-child{
        transform: rotate(-45deg) translate(-10px, 10px);
    }
    .mobile-menu__burger.active span:nth-child(2){
        width: 0;
    }
    .mobile-menu__burger.active span:last-child{
        transform: rotate(45deg);
    }
    .mobile-menu__burger.active:before {
        width: 0;
        height: 0;
    }
    .mobile-menu__burger.active:after
    {
        width: 0;
        height: 0;
    }
    .menu-container__list{
        transition: opacity 0.3s ease-in-out, pointer-events 0.3s ease-in;
        pointer-events: none;
        position: fixed;
        inset: 0px;
        z-index: 4;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        transform-origin: top;
        transform: scaleY(0);
        background: rgba(0,0,0,.95);
        backdrop-filter: blur(100px);
        padding-top: 2rem;
        padding-bottom: 1.5rem;
        opacity: 0;
        transition-property: all;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 500ms;
    }
    .menu-container__list .btn-theme{
        pointer-events: none;
        transform: translateX(-50%);
        opacity: 0;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in;
        position: fixed;
        top: calc(100vh - 110px);
        left: 50%;
        width: 170px;
    }
    .menu-container__list.show-menu{
        transform: scaleY(1);
        opacity: 1;
        pointer-events: auto;
    }
    .menu-container__list ul{
        transform: scale(.5);
        transform-origin: center;
        opacity: 0;
        transition: opacity .6s ease-in-out, transform .3s ease-in-out;
    }
    .menu-container__list.show-menu ul{
        transform: scale(1);
        opacity: 1;
        transition: opacity .6s ease-in-out, transform .3s ease-in-out;
        transition-delay: .2s;
    }
    .menu-container__list ul li {
        display: block;
        padding-left: 0;
        padding-bottom: 15px;
    }
    .menu-container__list.show-menu .btn-theme{
        pointer-events: auto;
        transform: translateX(-50%);
        opacity: 1;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in;
        transition-delay: .5s;
    }
    
    body.overflow-hide{
        overflow: hidden;
    }
    .btn-theme{
        font-size: var(--text-sm);
    }
    
    .banner__text h1{
        font-size: var(--text-mb4xl);
    }
   
    .btn-theme{
        font-size: var(--text-sm);
    }
    .banner__inner {
        height: inherit;
        min-height: 500px;
        grid-template-columns: 1fr;
        padding: 85px 0px 65px;
    }
    .banner__text {
        text-align: center;
    }
    .banner__image{
       padding-top: 25px;
    }
    .banner-focus__img {
        max-width: 300px;
    }
    .banner-orbit__crowd{
        width: 48px;
    }
    .banner__object{
        display: none;
    }
    .section-heading__main {
        font-size: var(--text-5xl);
    }
    .section-heading__text{
        font-size: var(--text-md);
    }
    .multi-search__input{
        font-size: var(--text-md);
    }
    .multi-search{
        margin-top: 70px;
    }
    .music-type__tab-section{
        grid: none;
        margin-top: 65px;
    }
    .music-type__tab-menu{
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;
        justify-content: space-between;
        padding: 4px;
    }
    .music-type__tab-menu .nav-item{
        width: auto;
    }
    .music-type__tab-menu .nav-link{
        font-size: var(--text-sm);
        padding: 10px 25px;
    }
    .music-type__card-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        grid-template-rows: auto;
    }
    .music-type__card{
        height: 125px;
    }
    .music-type__card h4 {
        font-size: var(--text-md);
    }
    
    .music-ocean{
        padding: 60px 0px;
    }
    .multi-search{
        margin-top: 45px;
    }
    .music-boost__card{
        height: 300px;
    }
    
    .music-type__tab-section{
        margin-top: 45px;
    }
    .do-with__music{
        padding: 60px 0px;
    }
    .music-boost{
        margin-top: 50px;
    }
    .pre-footer{
        padding: 60px 0px;
    }
    .gallery{
        margin-top: 60px;
    }

    .gallery__item:not(:first-child){
        grid-row: span 2 !important;
        grid-column: auto !important;
        margin: 0px !important;
    }

    .artist-circle {
        transform: translate(-50%, 21%);
    }
    .content-p{
        max-width: 600px;
    }
    .latest-track{
        padding: 60px 0px;
    }
    .latest-track__text-wrap h4 {
        font-size: var(--text-mid);
    }
    .latest-track__text-wrap p{
        font-size: var(--text-sm1);
    }
    .latest-track__text-wrap {
        padding: 20px 10px;
    }

    .latest-track__slider--model__card{
        min-height: auto;
        max-height: inherit;
        width: 400px !important;
    }
    .latest-track__slider--model__card a{
        grid: none;
    }
    .latest-track-image{
        height: 200px;
    }
    .latest-track__slider{
        padding: 40px 10px 20px;
    }
    .latest-track__text-wrap p{
        display: none;
    }


    /*-------------------------About page------------------------*/
    .about--banner__inner{
        padding-bottom: 0px;
    }
    .about--banner__image{
        padding-top: 90px;
    }
    .about__content-grid {
        width: 100%;
        text-align: center;
    }
    .assets__grid{
        justify-content: center;
    }
    .about__img-grid:after{
        left: 0;
    }
    .rising__track-card h4 {
        font-size: var(--text-sm);
    }
    .more__genre-grid{
        grid-template-columns: 1fr;
    }


    /*-------------------------------------Pricing page----------------------------------*/
    .pricing__grid{
        grid-template-columns: 1fr;
    }
    .pricing__card-ellipse:first-child img {
        max-width: 70px;
    }
    .pricing__card-ellipse:nth-child(2) img{
        max-width: 60px;
    }
    .pricing__card-ellipse:first-child {
        top: -20px;
        left: -25px;
    }
    .pricing__card-ellipse:nth-child(2) {
        bottom: -20px;
        right: -20px;
    }
    .pricing__page{
        padding-bottom: 60px;
    }
    .more__genre-grid{
        margin: 55px auto 65px;
    }
}



@media (max-width:576px){
    .menu-container.show-menu  .btn-theme{
        width: 80%;
    }
    .footer-top__menu-grid{
        grid-template-columns: 1fr;
    }
    .footer-top{
        padding-bottom: 30px;
    }
    .footer-bottom__grid{
        flex-direction: column;
        gap: 15px;
    }
    .section-heading__main {
        font-size: var(--text-mb4xl);
    }
    .multi-search__input{
        font-size: var(--text-sm);
        padding-right: 10px;
    }
    .multi-search__icon-wrap{
        padding: 0px 10px;
    }
    .multi-search__input-block{
        padding-right: 10px;
    }
    .multi-search__icon-wrap svg {
        max-height: 18px;
    }
    .multi-search__input-action svg{
        max-height: 20px;
    }
    .multi-search__input-action{
        width: 20px;
    }
    .music-type__tab-menu .nav-link{
        font-size: var(--text-xs1);
        padding: 8px 20px;
    }
    .artist-circle {
        transform: translate(-50%, 19%);
    }
    .content-p{
        font-size: var(--text-sm1);
    }
    .latest-track__text-wrap h4 {
        font-size: var(--text-3xl);
        margin-bottom: 8px;
    }
    .latest-track__text-wrap p {
        font-size: var(--text-sm);
        line-height: 1.4;
        margin-bottom: 12px;
    }
    .latest-track__slider--model{
        width: 100%;
    }
    .latest-track__slider--model__card{
        width: 380px !important;
    }
    .latest-track__slider{
        margin: 30px 0px;
    }
    .latest-track__text-wrap p{
        display: none;
    }
    .latest-track__btn button span{
        display: none;
    }
    .latest-track__btn button{
        padding: 6px 15px;
    }
    .latest-track__text-wrap h4 {
        font-size: var(--text-mxl);
    }

    /*--------------------Login page-----------------------*/
    .login__input {
        height: 44px;
    }
    .login__input span svg {
        max-width: 18px;
        max-height: 18px;
    }
    .login__input span{
        top: 9px;
    }

    .close-page svg {
        max-width: 22px;
        max-height: 22px;
    }
    
    
}
@media (max-width:480px){
    .menu-container.show-menu  .btn-theme{
        width: 80%;
    }
    .banner-focus__img {
        max-width: 190px;
    }
    .hero-mike__img{
        top: 50px;
    }
    .banner-orbit__crowd{
        width: 40px;
        inset: -30px;
    }
    .section-heading__main {
        font-size: var(--text-3xl);
    }
    .music-type__card{
        height: 100px;
    }
    .artist-circle {
        transform: translate(-50%, 19%);
    }
    .content-p{
        font-size: var(--text-sm);
        max-width: 350px;
    }
    
    .latest-track-image {
        height: 160px;
    }
    .latest-track__slider--model__card{
        width: 95% !important;
    }
    .track-splide .splide__arrow--prev{
        left: -16px;
    }
    .track-splide .splide__arrow--next{
        right: -16px;
    }


    /*----------------------------About page------------------------------*/
    .about--banner__image .banner-focus__img {
        min-width: 250px;
        max-width: 250px;
    }
    .hero-girl__img img {
        max-height: 325px;
    }
    .about-bn__element-wrapper img {
        max-height: 50px;
        max-width: 40px;
    }
    .about-bn__element-wrapper img:first-child {
        left: 110px;
    }
    .about-bn__element-wrapper img:nth-child(2) {
        left: 170px;
    }
    .about-bn__element-wrapper img:nth-child(3) {
        right: 50px;
        top: 80px;
    }
    .about-bn__element-wrapper img:last-child {
        right: -25px;
    }
    .about--banner__image {
        padding-top: 50px;
    }
    .more__genre-headline b {
        font-size: var(--text-xl);
    }
    .more__genre-headline {
        grid-template-columns: 50% 1fr;
    }

    /*-----------------------Login page--------------------*/
    .login__page {
        padding: 35px 25px;
    }

}

@media (max-width: 412px){
    .artist-circle {
        transform: translate(-50%, 20%);
    }
}
@media (max-width: 324px){
    .artist-circle {
        transform: translate(-50%, 23%);
    }
}

@media (max-width:340px){
    .content-p{
        max-width: 270px;
    }

}