@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:wght@400;500;700;900&display=swap');
*{box-sizing: border-box;}
body{font-family: "Inter", sans-serif; color: #333333; font-size: 16px;}
.Section{padding: 70px 0; position: relative;}
ul, ol, li{padding: 0; margin: 0; list-style: none;}
li{list-style-type: none;}
a{text-decoration: none;  font-weight: 600;}
img{width: 100%;}
input:focus{
outline: none;
}


/*Headercss*/

.Header {
    background-color: #171717;
    padding: 32px 0;
}
.Navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.NavMenu {
    display: flex;
    width: 100%;
    justify-content: end;
    gap: 56px;
    align-items: center;
}
.NavMenu li a {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 19px;
    text-transform: uppercase;
}
.Button-Style {
    display: inline-block;
    border: none;
    padding: 8px 18px;
    font-size: 16px;
    border-radius: 30px;
    transition: all .3s;
    font-weight: 600;
    background: linear-gradient(270deg, #7F36DB, #AF75F9);
}
.Bannerleft{
    padding: 0;
}
.Bannerright{
    padding: 0;
}
#myButton {
    display: none;
}



/*Bnner-sec*/
.Inner-banner {
    position: relative;
}
.Banner-sec {
    overflow-x: hidden;
    background: #171717;
}

.Banner-img{
	width: 100%;
}
.Banner-content {
    position: absolute;
    top: 20%;
    left: 72px;
    width: 100%;
    max-width: 500px;
    color: #fff;
}
.Bg-Mobile {
    display: none;
}
.Sub-Heading {
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    margin-bottom: 26px;
    color: #fff;
}
.Banner-content h1 {
    font-size: 50px;
    font-weight: 700;
    line-height: 55px;
    margin-bottom: 26px;
    text-transform: capitalize;
    letter-spacing: 1px;
}
.Banner-content p {
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
}
.Purple-Color {
    color: #af75f9;
}
.Chevron-icon {
    text-align: center;
    margin-top: 20px;
    position: absolute;
    bottom: 120px;
    left: 50%;
    transform: translate(-50%, 0px);
}
.Chevron-icon img {
    width: auto;
}
.Sign-btn {
    text-align: center;
    display: none;
}
.Sign-btn a {
    padding: 8px 20px;
}


/*distribute-css*/
.Distribute {
    background: #171717 url(../images/globeimg.png);
    min-height: 890px;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-y: 100%;
    padding-top: 120px;
}
.Distribute .ButtonStyle {
    margin-top: 18px;
}
.Head-Purple {
    font-size: 42px;
    font-weight: 700;
    line-height: 50px;
    color: #af75f9;
    margin-bottom: 0;
    text-transform: capitalize;
}
.Head-Title {
    font-size: 42px;
    font-weight: 700;
    line-height: 50px;
    color: #fff;
    margin-bottom: 25px;
    text-transform: capitalize;
}
.Para {
    font-size: 16px;
    color: #fff;
    line-height: 20px;
}


/*Jamvana-css*/
.Jamvana-sec {
    background: linear-gradient(#18131d 25%, #281f32 100%);
    padding: 50px 0;
}
.ButtonStyle {
    display: inline-block;
    border: none;
    padding: 14px 20px;
    font-size: 18px;
    border-radius: 30px;
    transition: all .3s;
    font-weight: 600;
    background: linear-gradient(270deg, #7F36DB, #AF75F9);
    color: #fff;
    margin-top: 28px;
    text-transform: uppercase;
}


/*Unlock-sec*/
.Unlock-sec {
    background: #171717 url(../images/girlstraeming.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding: 100px 0 100px;
    background-position: bottom right 0px;
}
.Unlock-sec .col-md-5 {
    padding: 0 0px 0 52px;
}
.unlock-content {
    margin: 30px 0;
}
.unlock-content h1 {
    position: relative;
    margin-bottom: 50px;
}
.unlock-content h1:after {
    content: "";
    position: absolute;
    width: 230px;
    height: 0.7px;
    background-color: #AF75F9;
    bottom: -20px;
    left: 0;
}
.unlock-content h3 {
    font-size: 30px;
    color: #fff;
    font-weight: 400;
    line-height: 36px;
    margin-bottom: 20px;
}
.Unlock-list {
    padding-left: 22px;
}
.Unlock-list li {
    font-size: 18px;
    line-height: 22px;
    color: #AF75F9;
    list-style-type: disc;
}

/*Logos-sec*/

.Logos-sec {
    background: linear-gradient(270deg, #7F36DB, #AF75F9);
    padding: 85px 0 45px;
}
.Inner-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    overflow-x: auto;
}
.Inner-logos img {
    width: auto;
}
.Partner-btn  {
    text-align: center;
}
.Partner-btn a {
    background: #281F32;
        margin-top: 40px;
}

/*Sellcss*/
.Sell-sec{
	background: linear-gradient(180deg, #171717, #281F32);
	padding: 115px 0 82px;
}


/*Realcss*/
.Real-sec {
    background: #171717 url(../images/music-data.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;
    padding: 115px 0 100px;
}
.col-md-4.Real-left {
    padding-right: 80px;
}
.Real-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.Real-btns a {
    width: 194px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 20px;
}
.ButtonStyle.Sign {
    background: transparent;
    border: 1px solid #8139dc;
}
.Real-Feature {
    padding: 0 20px;
    margin-bottom: 60px;
}
.Real-Feature img {
    width: auto;
}
.Real-Feature h2 {
    font-size: 26px;
    font-weight: 500;
    line-height: 32px;
    color: #AF75F9;
    margin-bottom: 20px;
    text-transform: capitalize;
}
.Real-Feature p {
    color: #fff;
    font-size: 18px;
    line-height: 22px;
}
.Mobile-icon {
    display: none;
}
.Desktop-icon {
    margin-bottom: 20px;
}

/*Partnerslider-css*/
.Partner-sec {
    background: #281F32;
    padding: 100px 0 150px;
}
.Partner-sec .Head-Title {
    text-align: center;
}
.Slide-Content {
    position: relative;
    border-radius: 34px;
    margin: 0 50px;
}
.Partner-content {
    padding: 10px 40px;
    border-radius: 30px;
    position: absolute;
    z-index: 99999;
    top: 44%;
}
.Partner-Img {
    position: relative;
}
.Partner-Img img {
    border-radius: 36px;
    object-fit: cover;
    min-height: 420px;
}
.overlay {
    width: 100%;
    height: 59%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    border-radius: 32px;
}
.Slide-Content:nth-child(3n+1) .overlay {
    background: rgba(175, 117, 249, 0.3);
background-blend-mode: color;
backdrop-filter: blur(25px);
}
.Slide-Content:nth-child(3n+2) .overlay {
    background: rgba(175, 117, 249, 0.3);
    background-blend-mode: color;
    backdrop-filter: blur(25px);
}
.Slide-Content:nth-child(3n+3) .overlay {
    background: rgba(175, 117, 249, 0.3);
    background-blend-mode: color;
    backdrop-filter: blur(25px);
}
.Name {
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    line-height: 30px;
}

.Prof {
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    color: #fff;
}
.Slide-para {
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    color: #fff;
    padding-top: 10px;
    word-break: break-word;
}
.Slider .slick-track {
    display: flex;
    padding-top: 50px;
}
.Slider button.slick-arrow {
    width: 40px;
    height: 40px;
    border: 4px solid #AF75F9;
    border-radius: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto 0;
    z-index: 1;
    font-size: 0;
    background: transparent;
}
.slick-prev {
    left: -0px !important;
}
.slick-prev:before {
   content: "\f060";
}
.slick-next {
    right: -0px !important;
}
.slick-next:before {
    content: "\f061";
}
.slick-prev:before, .slick-next:before {
    font: normal normal normal 14px / 1 FontAwesome !important;
    font-size: 18px !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #AF75F9;
}
.slick-dots {
    display: none !important;
}



/*signcss*/
.Sign-up {
    background: #171717 url(../images/Sign-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 50px 0 50px 72px;
    min-height: 1000px;
    background-position: right;
}
.Inner-Sign {
    width: 100%;
    max-width: 410px;
}
#ConrtactForm{
	padding-top: 30px;
}
.InputType {
    width: 100%;
    display: block;
    height: 58px;
    border-radius: 15px;
    border: 1px solid #ccc;
    padding-left: 15px;
    margin-bottom: 20px;
    text-align: center;
}
.InputType::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #281F32;
    font-size: 20px;
}
.InputType:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #281F32;
   font-size: 20px;
}
.InputType::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #281F32;
   font-size: 20px;
}
.InputType:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #281F32;
   font-size: 20px;
}
.InputType::-ms-input-placeholder { /* Microsoft Edge */
   color:    #281F32;
   font-size: 20px;
}
.InputType::placeholder { /* Most modern browsers support this now. */
   color:    #281F32;
   font-size: 20px;
}
.ButtonStyle02 {
    border: none;
    padding: 14px 20px;
    font-size: 18px;
    border-radius: 15px;
    transition: all .3s;
    background: linear-gradient(270deg, #7F36DB, #AF75F9);
    color: #fff;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Sign-ups {
    display: flex;
    align-items: center;
    gap: 10px;
}
.Sign-ups img {
    max-width: 30px;
}
.Sign-ups {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    font-size: 18px;
    border-radius: 15px;
    transition: all .3s;
    background: linear-gradient(270deg, #7F36DB, #AF75F9);
    color: #fff;
    margin-bottom: 20px;
}
.Or {
    text-align: center;
    color: #AF75F9;
    font-size: 25px;
    line-height: 30px;
    font-weight: 400;
    position: relative;
    margin: 20px 0 18px;
}
.Or:before {
    content: "";
    width: 180px;
    height: 1px;
    display: block;
    background-color: #AF75F9;
    position: absolute;
    top: 50%;
    left: 0;
}
.Or:after {
    content: "";
    width: 180px;
    height: 1px;
    display: block;
    background-color: #AF75F9;
    position: absolute;
    top: 50%;
    right: 0;
}

/*subscribe-sec*/
.Subscribe-sec {
    background: #AF75F9;
    padding: 100px 0 90px;
}
.Subscribe-sec .Head-Title {
    color: #281F32;
}
.White-Color {
    color: #fff;
}
.Form-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.Form-sub input {
    width: 100%;
    display: block;
    height: 58px;
    border-radius: 15px;
    padding-left: 15px;
    max-width: 420px;
    background: #281F32;
    border: none;
}
.Form-sub button {
    display: inline-block;
    border: none;
    padding: 14px 20px;
    font-size: 18px;
    border-radius: 30px;
    transition: all .3s;
    font-weight: 600;
    background: #281f32;
    color: #fff;
    text-transform: uppercase;
    width: 100%;
    max-width: 150px;
}
.Input-mail::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:  #fff;
    font-size: 20px;
}
.Input-mail:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   font-size: 20px;
}
.Input-mail::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   font-size: 20px;
}
.Input-mail:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #fff;
   font-size: 20px;
}
.Input-mail::-ms-input-placeholder { /* Microsoft Edge */
   color:    #fff;
   font-size: 20px;
}
.Input-mail::placeholder { /* Most modern browsers support this now. */
   color:    #fff;
   font-size: 20px;
}

/*Footer-css*/
.Footer-sec {
    background: #000;
    padding: 70px 0 40px;
}
.Footer-logo img {
    max-width: 240px;
}
.SocialIcon {
    display: flex;
    gap: 22px;
    flex-direction: row;
    padding-top: 22px;
    align-items: center;
}
.SocialIcon a img {
    max-width: 36px;
}
.FooterTitle {
    font-weight: 600;
    color: #AF75F9;
    font-size: 27px;
    text-transform: capitalize;
    line-height: 32px;
}
.FooterLink li {
    padding-bottom: 20px;
}
.FooterLink li a {
    color: #fff;
    font-size: 18px;
    line-height: 2px;
    font-weight: 500;
}
.Copyright {
    padding-top: 40px;
}
.Copyright p {
    color: #fff;
    text-align: center;
}
.Top-icon img {
    width: auto;
    max-width: 30px;
}
.Top-icon {
    position: relative;
}
.top-img {
    width: auto;
    position: absolute;
    bottom: 100px;
    right: 0;
}



/*Media-query*/
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1542px;
    }
    .Partner-row {
    padding: 0 100px;
}
.slick-prev {
    left: -100px !important;
}
.slick-next {
    right: -100px !important;
}

}

@media (max-width: 1399px) {
    .Inner-logos {
    justify-content: flex-start;
}
    .Slide-Content {
    margin: 0 30px;
}
.Partner-content {
    padding: 10px 20px;
}
.Slide-para {
    font-size: 16px;
    line-height: 22px;
    padding-top: 0;
}
.slick-prev {
    left: -20px !important;
}
.slick-next {
    right: -20px !important;
}
}

@media (max-width: 1199px) {
    .Unlock-sec {
    padding: 25px 0 20px;
    background-position: bottom right -110px;
}
.Unlock-sec .col-md-5 {
    padding: 0 0px 0 0;
}
.col-md-4.Real-left {
    padding-right: 10px;
}
.Real-btns {
    gap: 7px;
}
.Real-btns a {
    font-size: 16px;
}
.col-md-8.col8 {
    width: 90%;
}
.SocialIcon a img {
    max-width: 30px;
}
}

@media only screen and (min-width: 768px) and (max-width: 1024px)  {
       .Partner-Img img {
    min-height: 620px;
}
.Slide-Content:nth-child(3n+1) .overlay {
    background: linear-gradient(177deg, #af75f94d 20%, #2e174c 60%, #392c52 100%);
}
.Slide-Content:nth-child(3n+2) .overlay {
    backdrop-filter: blur(25px);
    background: linear-gradient(177deg, #af75f94d 20%, #2e174c 60%, #392c52 100%);
}
.Slide-Content:nth-child(3n+3) .overlay {
    backdrop-filter: blur(25px);
    background: linear-gradient(177deg, #af75f94d 20%, #2e174c 60%, #392c52 100%);
}
.Real-sec {;
    padding: 80px 0 100px;
}
.Sell-sec {
    padding: 80px 0 82px;
}
.Subscribe-sec {
    padding: 60px 0 70px;
}
.ButtonStyle {
    margin-top: 8px;
}
.Unlock-list {
    padding-bottom: 22px;
}
.Desktop-icon {
    display: block;
    max-width: 30px;
    margin-bottom: 0;
}
  }

@media (max-width: 991px) {
    .NavMenu {
    gap: 22px;
}
.Logo img {
    max-width: 190px;
}
    .Bannerright {
    width: 100%;
}
.Banner-content {
    text-align: center;
    margin-top: -120px;
    max-width: 100%;
    position: initial;
    padding: 0 65px;
}
.Bannerleft {
    order: 2;
    width: 100%;
}
.Bannerright{
    order: 1;
}
.Chevron-icon {
    position: initial;
    text-align: center;
    transform: translate(0px, 0px);
}
.Distribute {
    min-height: 630px;
}

.Unlock-sec {
    background-position: bottom right -220px;
}
.Real-btns {
    display: none;
}
.Sign-up {
    padding-left: 38px;
}
.Real-Feature h2 {
    font-size: 24px;
}
.SocialIcon {
    gap: 14px;
}

.Partner-row {
    padding: 0 0px;
}
.Slide-Content {
    margin: 0 30px;
}
.Unlock-sec .col-md-5 {
    width: 52%;
}
.unlock-content h3 {
    font-size: 24px;
    line-height: 30px;
}
.Real-sec {;
    padding: 80px 0 100px;
}
.Sell-sec {
    padding: 80px 0 82px;
}
.Subscribe-sec {
    padding: 60px 0 70px;
}
.Partner-sec {
    padding: 80px 0 80px;
}
.ButtonStyle {
    margin-top: 4px;
}
.Unlock-list {
    padding-bottom: 22px;
}
.Desktop-icon {
    display: block;
    max-width: 30px;
    margin-bottom: 0;
}
.Bg-desktop {
    display: none;
}
.Bg-Mobile {
    display: block;
}
}


@media (max-width: 767px) {
.Padding {
    padding-left: 25px;
    padding-right: 25px;
}
    #myButton {
    display: block;
}
.NavMenu {
    display: none;
}
.Logo {
    width: 100%;
}
.Logo li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.Logo img {
    max-width: 160px;
}
.NavMenu.toggle-class {
    display: list-item;
    position: absolute;
    top: 97px;
    background: #171717;
    left: 0;
    right: 0;
    z-index: 1;
}
.NavMenu.toggle-class li {
    padding: 10px 14px;
    border-bottom: 1px solid #616161;
}
#myButton {
    background: no-repeat;
    border: none;
}
#myButton i {
    font-size: 33px;
    background: -webkit-gradient(linear, left top, left bottom, from(#7F36DB), to(#AF75F9));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.Bg-desktop {
    display: block;
}
.Bg-Mobile {
    display: none;
}
.Banner-content .Sub-Heading {
    font-size: 14px;
    margin-top: -30px;
}
.Sub-Heading {
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
}
.Banner-content h1 {
    font-size: 32px;
    line-height: 38px;
}
.Banner-content p {
    font-size: 16px;
}
.Bannerleft {
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
}
.Sign-btn {
    text-align: center;
    display: block;
}
.ButtonStyle {
    font-size: 13px;
}
.Head-Purple {
    font-size: 32px;
    line-height: 38px;
}
.Head-Title {
font-size: 32px;
    line-height: 38px;
}
.Distribute {
    padding-top: 45px;
    min-height: 510px;
}
.Para {
    font-size: 14px;
    color: #fff;
    line-height: 20px;
}
.Unlock-sec {
    background-size: cover;
    background-position: bottom right -500px;
    padding: 25px 25px 100px;
}
.Unlock-sec .col-md-5 {
    padding: 0px 10px 0 10px;
    width: 80%;
}
.unlock-content h3 {
    font-size: 18px;
    line-height: 24px;
}
.Unlock-list li {
    font-size: 15px;
}
.Logos-sec {
    padding: 35px 0 60px;
}
.Sell-sec {
    background: #171717;
}
.Real-Feature {
    padding: 0 0px;
}
.Real-right .col-md-6 {
    width: 50%;
    padding: 0 18px;
}
.Real-Feature h2 {
    font-size: 25px;
    word-break: break-all;
}
.Real-Feature p {
    font-size: 16px;
}
.Slide-Content {
    margin: 0 40px;
}
.Partner-row {
    padding: 0 20px;
}
.Sign-up {
    padding: 50px 25px;
    justify-content: center;
    background-size: cover;
    background-position: center;
    min-height: 760px;
}
.Form-sub {
    flex-direction: column;
}
.col-class {
    width: 100%;
    margin-bottom: 60px;
}
.SocialIcon {
    padding-top: 20px;
}
.SocialIcon a img {
    max-width: 30px;
}
.colclass {
    width: 50%;
}
.Footer-sec {
    padding: 70px 0 20px;
}
.Copyright {
    padding-top: 60px;
}
.Copyright p {
    font-size: 12px;
    margin-bottom: 0;
}
.Inner-logos img {
    max-width: 140px;
}
.col-md-8.col8 {
    width: 100%;
}
.top-img {
    left: 50%;
    transform: translate(-50%, -55px);
}
.Top-icon img {
    max-width: 25px;
    bottom: -10px;
}
    .Partner-sec {
        padding: 80px 0 60px;
    }
    .Desktop-icon {
    display: none;
}
.Chevron-icon img {
    max-width: 30px;
}
.Chevron-icon {
    margin-bottom: 20px;
}
.Mobile-icon {
    display: block;
}
}



/* Rectangle 44 */


@media (max-width: 450px) {
.Or:before {
    width: 160px;
}
.Or:after {
    width: 160px;
}
.Unlock-sec {
    background-position: bottom right -560px;
}
}

@media (max-width: 410px) {
.Or:before {
    width: 150px;
}
.Or:after {
    width: 150px;
}
}
@media (max-width: 390px) {
.Or:before {
    width: 140px;
}
.Or:after {
    width: 140px;
}
}

@media (max-width: 350px) {
.Or:before {
    width: 130px;
}
.Or:after {
    width: 130px;
}
}


@media (max-width: 390px) {
.Slide-para {
    font-size: 14px;
    line-height: 17px;
}
.Unlock-sec {
    background-position: bottom right -700px;
}
}

@media (max-width: 360px) {
    .Distribute {
    min-height: 560px;
}
.Slide-para {
    font-size: 14px;
    line-height: 17px;
}
}

