/*==========
Theme Name: SpiffyPlay - Music Design HTML5 Template
Theme Version: 1.0
==========*/
/*==========
----- CSS INDEX -----
1.Typography CSS
2.Common CSS
3.Form CSS
4.Button CSS
5.Slider CSS
6.Overflow text CSS
7.White Text CSS
8.Header CSS
9.Banner CSS
10.Artist Section CSS
11.Album Section CSS
12.Music Controls CSS
13.Upcoming Section CSS
14.Event Section CSS
15.Gallery Section CSS
16.Sponsor Section CSS
17.Video Gallery CSS
18.Footer CSS
19.Album Page CSS
20.Album Single Page CSS
21.Artists Page CSS
22.Artists Single Page
23.Events Page CSS
24.Gallery Page CSS
25.Contact Us Page CSS
25.Scroll To Top CSS
26.Page Loader CSS
27.Responsive CSS
==========*/
/*==========Typography CSS==========*/
body,
button,
input,
select,
optgroup,
textarea {
color: var(--white-color);
font-size: 16px;
line-height: 30px;
font-weight: 300;
}
p {
font-size: 16px;
line-height: 30px;
pointer-events: auto;
}
p:last-child {
margin-bottom: 0;
}
a {
background-color: transparent;
text-decoration: none !important;
outline: none !important;
pointer-events: auto;
}
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
ol {
list-style: decimal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #b39ad6;
font-family: var(--title-font);
font-weight: 300;
position: relative;
pointer-events: auto;
}
.h1-title {
font-size: 60px;
line-height: 80px;
text-transform: capitalize;
font-weight: bold;
color: var(--white-color);
}
.hero_sec {
background: url("../images/singWithMe/cover.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.child_hero {
background-color: #0000008c;
}
.hero_sec .populor-corner {
position: absolute;
right: 110px;
animation: bounce2 2s ease infinite;
top: 320px;
/* bottom: 25px; */
background-color: #80808014;
backdrop-filter: blur(13px);
display: grid;
place-items: center;
padding: 1rem;
max-width: 220px;
border-radius: 15px;
z-index: 2;
}
.hero_sec .populor-corner h3 {
color: white;
font-weight: 700;
font-size: 25px;
}
.search-container {
position: relative;
width: 88%;
max-width: 500px;
margin-left: 4rem;
}
.search-bar {
width: 100%;
padding: 8px 20px 8px 55px;
font-size: 16px;
border: none;
border-radius: 25px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
outline: none;
transition: all 0.3s ease;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.search-bar::placeholder {
color: rgba(255, 255, 255, 0.7);
font-weight: 300;
}
.search-bar:focus {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
transform: translateY(-2px);
}
.search-icon {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.search-container:hover .search-icon {
opacity: 1;
}
.search-bar:focus+.search-icon {
opacity: 1;
}
/* Subtle animation on load */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-container {
animation: fadeInUp 0.6s ease-out;
}
/* Alternative darker theme */
.dark-theme {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
}
.dark-theme .search-bar {
background: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.dark-theme .search-bar:focus {
background: rgba(0, 0, 0, 0.4);
border-color: rgba(255, 255, 255, 0.2);
}
.hero_sec .populor-corner .row {
height: auto;
padding: unset;
}
.hero_sec .populor-corner>.col-6 {
padding: 5px;
}
.hero_sec .populor-corner .col-6>div {
display: flex;
justify-content: center;
}
.hero_sec .populor-corner .col-6 img {
/* width: 75%; */
border-radius: 15px;
}
.popular-images {
max-width: 200px;
}
/* hero_about */
.hero_about {
background: url(/assets/images/singWithMe/austin-neill.jpg);
background-size: cover;
/* height: 70vh; */
position: relative;
background-position: center;
}
.about-child {
background-color: #000000b5;
/* height: 70vh; */
}
.about-child .row {
align-items: center;
justify-content: center;
padding: 8rem 0 7rem 0;
}
.about-child .row h2 {
font-size: 54px;
font-weight: 900;
text-align: center;
color: white;
}
.spacer {
height: auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
}
.about-section {
/* max-width: 1200px; */
margin: 35px 27px;
background: rgba(255, 255, 255, 0.95);
border-radius: 30px;
/* background: linear-gradient(135deg, #260c3c, #211d38, #452466); */
background: url("/assets/images/singWithMe/bg.gif");
background-size: cover;
box-shadow: 0 20px 35px rgb(255 255 255 / 10%);
box-shadow: rgb(255 255 255 / 20%) 0px 2px 8px 0px;
backdrop-filter: blur(10px);
overflow: hidden;
}
.about_inner {
background: linear-gradient(135deg, #260c3c80, #211d387d, #45246699);
padding: 80px 20px;
border-radius: 25px;
}
.about-section .container .row {
align-items: center;
}
.about-giff {
/* display: flex;
justify-content: center; */
}
.about-giff img {
width: 20%;
opacity: .2;
margin-top: -158px;
margin: 0 auto;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
bottom: -190px;
}
.about-section .content {
padding: 0 20px;
}
.about-section .title {
font-size: 2.5rem;
font-weight: 700;
color: #fff;
margin-bottom: 10px;
text-align: left;
}
.about-section .title .span-heading {
color: #b39ad6;
}
.about-section .subtitle {
font-size: 1.2rem;
color: #b79dd9;
margin-bottom: 30px;
}
.about-section .description {
/* font-size: 1.1rem; */
/* line-height: 1.8; */
color: #ffffff;
margin-bottom: 40px;
}
.songs_heading {
font-size: 23px;
font-weight: 600;
color: white;
max-width: 300px;
}
.music-player {
background: rgb(255 255 255 / 10%);
backdrop-filter: blur(9px);
backdrop-filter: blur(5px);
border-radius: 20px;
padding: 30px;
max-width: 425px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
color: white;
position: relative;
overflow: hidden;
}
.album-cover img {
border-radius: 12px;
}
.music-player::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
pointer-events: none;
}
.music-player .header {
display: flex;
justify-content: space-between;
align-items: flex-start;
/* margin-bottom: 30px; */
}
.music-player .header .song-info {
flex: 1;
display: flex;
align-items: center;
gap: 15px;
}
.music-player .header .song-info .album-cover {
width: 60px;
height: 60px;
border-radius: 12px;
background: linear-gradient(135deg, #ff6b6b, #4ecdc4);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: white;
font-weight: bold;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.music-player .header .song-info .track-details h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
color: white;
}
.music-player .header .song-info .track-details p {
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
.music-player .header .action-buttons {
display: flex;
gap: 10px;
}
.music-player .header .action-buttons .icon-btn {
background: none;
border: none;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
padding: 8px;
border-radius: 50%;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.music-player .header .action-buttons .icon-btn:hover {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.music-player .header .action-buttons .icon-btn.liked {
color: #ff6b6b;
}
.music-player .progress-section {
margin-bottom: 30px;
}
.music-player .progress-section .time-info {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
.music-player .progress-section .progress-container {
position: relative;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
cursor: pointer;
overflow: hidden;
}
.music-player .progress-section .progress-container .progress-bar {
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 2px;
transition: width 0.1s ease;
position: relative;
}
.music-player .progress-section .progress-container .progress-bar::after {
content: '';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.music-player .controls {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
.music-player .controls .control-btn {
background: none;
border: none;
color: white;
cursor: pointer;
padding: 12px;
border-radius: 50%;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.music-player .controls .control-btn:hover {
background: rgba(255, 255, 255, 0.1);
transform: scale(1.1);
}
.music-player .controls .control-btn.play-btn {
background: rgba(255, 255, 255, 0.2);
padding: 16px;
backdrop-filter: blur(10px);
}
.music-player .controls .control-btn.play-btn:hover {
background: rgba(255, 255, 255, 0.3);
}
.music-player .icon {
width: 20px;
height: 20px;
fill: currentColor;
}
.music-player .controls .control-btn.play-btn .icon {
width: 24px;
height: 24px;
}
.music-player .visualizer {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #667eea, #764ba2);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.music-player.playing .header .song-info .album-cover {
animation: pulse 2s ease-in-out infinite;
}
.music-player.playing .visualizer {
animation: visualize 3s ease-in-out infinite;
}
@keyframes visualize {
0%,
100% {
transform: scaleX(0);
}
50% {
transform: scaleX(1);
}
}
/* .btn {
display: inline-block;
background: linear-gradient(45deg, #667eea, #764ba2);
color: white;
padding: 15px 30px;
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
} */
.about-section .image-section {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: unset;
}
/* .profile-container {
position: relative;
width: 300px;
height: 300px;
} */
/* .powel_video{
margin-left: -68px;
} */
.powel_video video {
height: 499px;
box-shadow: rgba(248, 248, 248, 0.2) 0px 2px 8px 0px;
/* border: 2px solid #896cb3; */
border-radius: 15px;
}
.profile-image {
/* width: 50%;
position: absolute; */
top: 0;
animation: animName 4s infinite;
/* width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover; */
/* border: 8px solid white; */
/* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); */
}
.floating-elements {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
pointer-events: none;
}
.floating-item {
position: absolute;
background: white;
border-radius: 15px;
padding: 15px 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
animation: float 3s ease-in-out infinite;
}
.floating-item:nth-child(1) {
top: 10%;
right: 10%;
}
.floating-item:nth-child(2) {
top: 60%;
left: -10%;
animation-delay: 1s;
}
.floating-item:nth-child(3) {
bottom: 10%;
right: -5%;
animation-delay: 2s;
}
.stat-number {
font-size: 2rem;
font-weight: bold;
color: #667eea;
display: block;
}
.stat-label {
font-size: 0.9rem;
color: #7f8c8d;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.partnerships {
display: flex;
gap: 20px;
margin-top: 40px;
}
.partner-logo {
width: 50px;
height: 50px;
background: #f8f9fa;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #667eea;
border: 2px solid #e9ecef;
transition: transform 0.3s ease;
}
.partner-logo:hover {
transform: translateY(-5px);
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
/* gap: 40px; */
text-align: center;
}
.title {
font-size: 2rem;
}
/* .profile-container {
width: 250px;
height: 250px;
} */
.floating-elements {
width: 300px;
height: 300px;
}
}
/* hero_about */
/* parent-features */
.parent-features {
position: relative;
padding: 4rem 0;
}
.brand-inner {
background-color: #16002d;
border: 3px solid #9f54f5;
padding: 20px;
border-radius: 15px;
transition: all .3s ease-in-out;
height: 350px;
display: grid;
place-items: center;
box-shadow: rgba(129, 48, 167, 0.35) 0px 5px 15px;
}
.share_btn {
background: #9f54f5;
padding: 5px 12px;
border: 2px solid #9f9f9f00;
border-radius: 12px;
color: white;
font-size: 14px;
display: flex;
gap: 15px;
transition: all .4s ease-in-out;
align-items: center;
}
.share_btn:hover {
background-color: #fff;
border: 2px solid #9f9f9f;
}
.share_btn lord-icon {
background-color: white;
border-radius: 12px;
height: 40px;
width: 40px;
}
.brand-inner:hover {
transform: scale(1.1);
}
.brand-inner h3 {
font-size: 25px;
text-align: center;
color: white;
font-weight: 600;
}
.features_heading {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.features_heading h2 {
font-size: 50px;
font-weight: 800;
color: white;
}
/* parent-features */
/* music-release-section */
.music-release-section {
position: relative;
padding: 3rem 0;
}
.music-release-section .floating-particles {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.music-release-section .particle {
position: absolute;
width: 4px;
height: 4px;
background: linear-gradient(45deg, #6c5ce7, #a29bfe);
border-radius: 50%;
animation: music-float 6s ease-in-out infinite;
}
@keyframes music-float {
0%,
100% {
transform: translateY(0px) rotate(0deg);
opacity: 0;
}
50% {
transform: translateY(-20px) rotate(180deg);
opacity: 1;
}
}
.music-release-section .main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
position: relative;
z-index: 2;
}
.music-release-section .left-section {
opacity: 0;
transform: translateX(-50px);
animation: music-slideInLeft 1s ease-out 0.5s forwards;
}
.music-release-section .main-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
line-height: 1.1;
margin-bottom: 30px;
color: white;
/* background: linear-gradient(135deg, #ffffff 0%, #a29bfe 100%); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text; */
}
.music-release-section .subtitle {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 40px;
color: #b8b8b8;
}
.music-release-section .subtitle em {
color: #9086f6;
font-style: italic;
}
.music-release-section .cta-button {
display: inline-flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
border: none;
padding: 16px 32px;
border-radius: 50px;
color: white;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
position: relative;
overflow: hidden;
}
.music-release-section .cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.music-release-section .cta-button:hover::before {
left: 100%;
}
.music-release-section .cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(108, 92, 231, 0.4);
}
.music-release-section .music-icon {
font-size: 1.2rem;
}
.music-release-section .right-section {
opacity: 0;
transform: translateX(50px);
animation: music-slideInRight 1s ease-out 0.7s forwards;
}
.music-release-section .features-list {
display: flex;
flex-direction: column;
gap: 40px;
}
.music-release-section .feature-item {
display: flex;
gap: 24px;
padding: 30px;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
transition: all 0.4s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.music-release-section .feature-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(108, 92, 231, 0.1) 0%, rgba(162, 155, 254, 0.1) 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.music-release-section .feature-item:hover::before {
opacity: 1;
}
.music-release-section .feature-item:hover {
transform: translateY(-5px);
border-color: rgba(108, 92, 231, 0.3);
box-shadow: 0 15px 40px rgba(108, 92, 231, 0.2);
}
.music-release-section .feature-number {
flex-shrink: 0;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #9f54f5 0%, #5750b7 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
position: relative;
z-index: 2;
}
.music-release-section .feature-content h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 12px;
color: white;
position: relative;
z-index: 2;
}
.music-release-section .feature-content p {
color: #b8b8b8;
line-height: 1.6;
position: relative;
z-index: 2;
}
@keyframes music-slideInLeft {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes music-slideInRight {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes music-pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.music-release-section .feature-item:hover .feature-number {
animation: music-pulse 0.6s ease-in-out;
}
@media (max-width: 768px) {
.music-release-section .main-content {
grid-template-columns: 1fr;
gap: 60px;
text-align: center;
}
.music-release-section .container {
padding: 40px 20px;
}
.music-release-section .feature-item {
flex-direction: column;
text-align: center;
gap: 20px;
}
.music-release-section .feature-number {
align-self: center;
}
}
/* Glowing effect for interactive elements */
.music-release-section .glow-on-hover {
position: relative;
}
.music-release-section .glow-on-hover::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg, #6c5ce7, #a29bfe, #6c5ce7);
border-radius: inherit;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.music-release-section .glow-on-hover:hover::after {
opacity: 0.7;
}
/* music-release-section */
/* royalty-collection */
.secRoyalty {
position: relative;
padding: 5rem 0;
}
.secRoyalty .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.secRoyalty .stat-card {
background: #120b28;
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 12px;
padding: 20px;
/* border: 2px solid #b198d4; */
transition: 0.4s ease-in-out;
}
.secRoyalty .stat-card:hover {
transform: translateY(-5px);
background-color: #120b28;
border-color: #ad99ca;
color: #ffffff;
box-shadow: rgba(248, 248, 248, 0.2) 0px 2px 8px 0px;
}
.secRoyalty .stat-card h2 {
font-size: 19px;
color: #ffffff;
font-weight: 600;
margin-bottom: 10px;
}
.secRoyalty .stat-card:hover h2 {
color: white;
transition: 0.4s ease-in-out;
}
.secRoyalty .stat-card p {
font-size: 32px;
font-weight: bold;
color: #b39ad6;
margin-top: 6px;
}
.secRoyalty .chart-placeholder {
background: #120b28;
height: 250px;
border-radius: 12px;
border: 2px dashed #b39ad6;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-size: 1.1rem;
margin-bottom: 40px;
}
.secRoyalty .payout-section {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
margin-bottom: 30px;
}
.secRoyalty .payout-section h2 {
font-size: 1.5rem;
margin-bottom: 10px;
color: white;
font-weight: 700;
}
.secRoyalty .payout-history h2 {
color: white;
font-weight: 700;
}
.secRoyalty .stat-card lord-icon {
width: 75px;
height: 75px;
background-color: white;
/* padding: 5px; */
border-radius: 12px;
display: flex;
}
/* .secRoyalty .stat-card:hover {
} */
.stats-icon {
display: flex;
justify-content: space-between;
align-items: center;
}
.secRoyalty .payout-btn {
/* background: #ff4081; */
background: linear-gradient(135deg, #452d64, #21183c, #321a4a);
color: #fff;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.4s ease-in-out;
}
.secRoyalty .payout-btn:hover {
background: #3d13af;
transform: translateY(-4px);
/* box-shadow: rgba#ffffff (99, 99, 99, 0.2) 0px 2px 8px 0px; */
/* background: linear-gradient(135deg, #321a4a, #452d64, #21183c, ); */
}
.secRoyalty .payout-history table {
width: 100%;
border-collapse: collapse;
background: #1e1e1e;
border-radius: 12px;
overflow: hidden;
}
.secRoyalty .payout-history th,
.secRoyalty .payout-history td {
padding: 14px 20px;
border-bottom: 1px solid #9d71b9;
text-align: left;
background: #120b28;
color: #ffffff;
}
.secRoyalty .payout-history th {
background: linear-gradient(135deg, #3b225a, #1d0d4e, #300a56);
color: #ffffff;
}
.secRoyalty .payout-history tr:hover {
background: #2b2b2b;
}
/* royalty-collection */
/* Artwork & Photo Upload */
.artWork {
position: relative;
padding: 3rem 0;
}
.artWork .background-pattern {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.2) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.2) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.15) 0%, transparent 50%);
z-index: -1;
}
.artWork .header {
text-align: center;
margin-bottom: 60px;
animation: fadeInUp 1s ease-out;
}
.artWork .header h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 20px;
background: -webkit-linear-gradient(#fbfbfb, #9e67e5, #c192ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
/* animation: shimmer 3s ease-in-out infinite; */
}
.artWork .header p {
font-size: 1.2rem;
color: #ffffff;
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
opacity: 0;
animation: fadeInUp 1s ease-out 0.3s forwards;
}
.artWork .upload-area {
background: rgba(15, 23, 42, 0.6);
border: 2px dashed rgba(148, 163, 184, 0.3);
border-radius: 25px;
padding: 60px 40px;
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
backdrop-filter: blur(15px);
margin-bottom: 50px;
cursor: pointer;
animation: slideInUp 0.8s ease-out 0.5s both;
}
.artWork .upload-area::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
transition: left 0.8s ease;
}
.artWork .upload-area:hover {
border-color: rgba(168, 85, 247, 0.6);
background: rgba(15, 23, 42, 0.8);
transform: translateY(-5px);
box-shadow:
0 20px 40px rgba(168, 85, 247, 0.2),
0 0 0 1px rgba(168, 85, 247, 0.1);
}
.artWork .upload-area:hover::before {
left: 100%;
}
.artWork .upload-area.drag-over {
border-color: #a855f7;
background: rgba(168, 85, 247, 0.1);
transform: scale(1.02);
}
.artWork .upload-icon {
font-size: 4rem;
margin-bottom: 20px;
opacity: 0.8;
animation: float 3s ease-in-out infinite;
}
.artWork .upload-text {
font-size: 1.4rem;
font-weight: 600;
color: #f1f5f9;
margin-bottom: 10px;
}
.artWork .upload-subtext {
color: #94a3b8;
font-size: 1rem;
margin-bottom: 30px;
}
.artWork .browse-btn {
background: linear-gradient(135deg, #8a57ff, #9f54f5);
border: none;
border-radius: 15px;
color: white;
font-weight: 600;
font-size: 1.1rem;
padding: 18px 40px;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
box-shadow: 0 8px 25px rgba(168, 85, 247, 0.3);
}
.artWork .browse-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.artWork .browse-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(168, 85, 247, 0.4);
}
.artWork .browse-btn:hover::before {
left: 100%;
}
.artWork .guidelines-section {
/* background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(148, 163, 184, 0.2); */
border-radius: 20px;
padding: 40px;
backdrop-filter: blur(10px);
animation: slideInUp 0.8s ease-out 0.7s both;
}
.artWork .guidelines-title {
font-size: 60px;
font-weight: bold;
margin-bottom: 1rem;
background: -webkit-linear-gradient(#fbfbfb, #9e67e5, #c192ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-align: center;
/* display: flex; */
/* align-items: center; */
/* gap: 15px; */
}
/* .artWork .guidelines-title::before {
content: '📋';
font-size: 1.8rem;
} */
.artWork .guidelines-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
.artWork .guideline-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 20px;
background: rgba(30, 41, 59, 0.4);
border-radius: 15px;
transition: all 0.3s ease;
opacity: 0;
animation: fadeInLeft 0.6s ease-out forwards;
}
.artWork .guideline-item:nth-child(1) { animation-delay: 0.2s; }
.artWork .guideline-item:nth-child(2) { animation-delay: 0.4s; }
.artWork .guideline-item:nth-child(3) { animation-delay: 0.6s; }
.artWork .guideline-item:nth-child(4) { animation-delay: 0.8s; }
.artWork .guideline-item:hover {
background: rgba(30, 41, 59, 0.6);
transform: translateX(10px);
border-left: 3px solid #a855f7;
}
.artWork .guideline-icon {
width: 60px;
height: 60px;
/* background: linear-gradient(135deg, #8a57ff, #9f54f5); */
background-color: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.artWork .guideline-icon lord-icon {
width: 90px;
height: 90px;
}
.artWork .guideline-item:hover .guideline-icon {
transform: rotate(5deg) scale(1.1);
}
.artWork .guideline-content {
flex: 1;
}
.artWork .guideline-content h4 {
color: #f1f5f9;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
}
.artWork .guideline-content p {
color: #94a3b8;
line-height: 1.5;
font-size: 0.95rem;
}
.artWork .preview-gallery {
display: none;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 30px;
padding: 30px;
background: rgba(30, 41, 59, 0.3);
border-radius: 15px;
animation: fadeIn 0.5s ease;
}
.artWork .preview-item {
position: relative;
border-radius: 12px;
overflow: hidden;
transition: transform 0.3s ease;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.artWork .preview-item:hover {
transform: scale(1.05);
}
.artWork .preview-image {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 12px;
}
.artWork .remove-btn {
position: absolute;
top: 8px;
right: 8px;
background: rgba(239, 68, 68, 0.9);
color: white;
border: none;
border-radius: 50%;
width: 25px;
height: 25px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: bold;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.artWork .remove-btn:hover {
background: rgba(220, 38, 38, 1);
transform: scale(1.1);
}
/* Keyframes stay global */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes shimmer {
0%, 100% {
background-position: 0% 50%;
text-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}
50% {
background-position: 100% 50%;
text-shadow: 0 0 30px rgba(168, 85, 247, 0.6), 0 0 40px rgba(236, 72, 153, 0.3);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
.artWork .floating-elements {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.artWork .floating-shape {
position: absolute;
opacity: 0.1;
animation: floatShape 8s ease-in-out infinite;
}
.artWork .floating-shape:nth-child(1) {
top: 20%;
left: 10%;
width: 80px;
height: 80px;
background: linear-gradient(135deg, #a855f7, #ec4899);
border-radius: 20px;
animation-delay: 0s;
}
.artWork .floating-shape:nth-child(2) {
top: 60%;
right: 15%;
width: 60px;
height: 60px;
background: linear-gradient(135deg, #06b6d4, #8b5cf6);
border-radius: 50%;
animation-delay: 2s;
}
.artWork .floating-shape:nth-child(3) {
top: 40%;
left: 70%;
width: 100px;
height: 40px;
background: linear-gradient(135deg, #ec4899, #06b6d4);
border-radius: 20px;
animation-delay: 4s;
}
@keyframes floatShape {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-30px) rotate(180deg);
}
}
.artWork .upload-stats {
display: flex;
justify-content: center;
gap: 40px;
margin-top: 40px;
flex-wrap: wrap;
background: #120b28;
border: 1px solid #452d64;
max-width: 600px;
padding: 1rem;
border-radius: 12px;
margin: 2rem auto;
}
.artWork .stat-item {
text-align: center;
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
}
.artWork .stat-item:nth-child(1) { animation-delay: 1s; }
.artWork .stat-item:nth-child(2) { animation-delay: 1.2s; }
.artWork .stat-item:nth-child(3) { animation-delay: 1.4s; }
.artWork .stat-number {
font-size: 2rem;
font-weight: 700;
background: -webkit-linear-gradient(#fbfbfb, #9e67e5, #c192ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
}
.artWork .stat-label {
color: #94a3b8;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
@media (max-width: 768px) {
.artWork .header h1 {
font-size: 2.5rem;
}
.artWork .upload-area {
padding: 40px 20px;
}
.artWork .guidelines-grid {
grid-template-columns: 1fr;
}
.artWork .container {
padding: 20px 15px;
}
}
/* Artwork & Photo Upload */
/* support_networking */
.support_networking {
position: relative;
padding: 5rem 0;
}
.support_networking .hero {
text-align: center;
margin-bottom: 50px;
}
.support_networking .hero h2 {
font-size: 45px;
color: #fff;
margin-bottom: 15px;
font-weight: 700;
}
.support_networking .hero p {
/* font-size: 1.1rem; */
color: #ccc;
max-width: 650px;
margin: 0 auto;
}
.support_networking .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
margin-top: 40px;
}
.support_networking .card {
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 12px;
color: white;
padding: 25px;
transition: 0.4s ease-in-out;
}
.support_networking .card:hover {
transform: translateY(-5px);
background-color: #120b28;
border-color: #ad99ca;
color: #ffffff;
box-shadow: rgba(248, 248, 248, 0.2) 0px 2px 8px 0px;
}
.support_networking .card h3 {
color: #ad99ca;
font-weight: 600;
margin-bottom: 10px;
}
.support_networking .card p {
color: #ffffff;
/* font-size: 0.95rem; */
transition: 0.4s ease;
}
.support_networking .card:hover p {
color: #ffffff;
}
.support_networking .testimonials {
margin-top: 60px;
text-align: center;
}
.support_networking .testimonials h3 {
font-size: 37px;
margin-bottom: 20px;
font-weight: 600;
color: white;
}
.support_networking .quote {
background: #120b28;
border-left: 4px solid #7e60a7;
padding: 20px;
margin: 10px auto;
max-width: 700px;
color: #bbb;
font-style: italic;
border-radius: 8px;
}
/* support_networking */
.player-container {
background: rgb(255 255 255 / 26%);
backdrop-filter: blur(9px);
border-radius: 20px;
padding: 20px;
width: 100%;
max-width: 380px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.song-info {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.album-art {
width: 60px;
height: 60px;
border-radius: 12px;
background: linear-gradient(45deg, #62507e, #959eff);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 20px;
/* box-shadow: 0 4px 15px rgb(145 118 186); */
position: relative;
overflow: hidden;
}
.album-art::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') center/cover;
}
.track-details {
flex: 1;
min-width: 0;
}
.song-title {
color: white;
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.artist-album {
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.like-section {
display: flex;
align-items: center;
gap: 8px;
}
.like-btn {
background: none;
border: none;
color: rgba(255, 255, 255, 0.8);
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
padding: 5px;
border-radius: 50%;
}
.like-btn:hover {
color: #b79fff !important;
transform: scale(1.1);
}
.like-btn.active {
color: #ff6b35;
animation: heartbeat 0.6s ease;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.add-btn {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
font-size: 16px;
}
.add-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.progress-section {
margin-bottom: 20px;
}
.time-display {
display: flex;
justify-content: space-between;
color: rgba(255, 255, 255, 0.8);
font-size: 12px;
margin-bottom: 8px;
}
.progress-container {
position: relative;
height: 6px;
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
cursor: pointer;
overflow: hidden;
}
.progress-bar {
height: 100%;
background: linear-gradient(135deg, #5d5962, #7865b3, #61368d);
border-radius: 3px;
width: 45%;
transition: width 0.3s ease;
position: relative;
}
.progress-bar::after {
content: '';
position: absolute;
right: -6px;
top: -3px;
width: 12px;
height: 12px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
opacity: 0;
transition: opacity 0.3s ease;
}
.progress-container:hover .progress-bar::after {
opacity: 1;
}
.controls {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.control-btn {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
padding: 8px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.control-btn:hover {
color: #613ecb !important;
transform: scale(1.1);
}
.play-pause-btn {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
font-size: 24px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.play-pause-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.05);
}
.volume-section {
display: flex;
align-items: center;
gap: 10px;
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.volume-icon {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
cursor: pointer;
}
.volume-slider {
flex: 1;
height: 4px;
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
position: relative;
cursor: pointer;
}
.volume-fill {
height: 100%;
background: linear-gradient(135deg, #9f67e6, #a054eb, #b66eff);
border-radius: 2px;
width: 70%;
transition: width 0.3s ease;
}
.wave-animation {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 0.3s ease;
}
.wave-animation.active {
opacity: 1;
}
.wave-bar {
width: 3px;
height: 12px;
background: rgba(255, 255, 255, 0.6);
border-radius: 1px;
animation: wave 1s ease-in-out infinite;
}
.wave-bar:nth-child(2) {
animation-delay: 0.1s;
}
.wave-bar:nth-child(3) {
animation-delay: 0.2s;
}
.wave-bar:nth-child(4) {
animation-delay: 0.3s;
}
@keyframes wave {
0%,
100% {
height: 4px;
}
50% {
height: 12px;
}
}
.shuffle-repeat {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.mode-btn {
background: none;
border: none;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
padding: 5px;
border-radius: 5px;
}
.mode-btn:hover,
.mode-btn.active {
color: #ff6b35;
background: rgba(255, 107, 53, 0.2);
}
.rotating {
animation: rotate 2s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.hero_sec .h1-title {
font-size: 70px;
line-height: 1.1;
}
.hero_sec .h1-title span {
display: unset;
background: -webkit-linear-gradient(#d1d1d1, #a086f1, #962dff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero_sec .wrapper {
position: relative;
width: 100%;
height: auto;
/* Full height */
}
.banner-video {
position: relative;
z-index: 2;
}
.vector_1 lord-icon,
.vector_2 lord-icon,
.vector_3 lord-icon {
width: 55px;
height: 55px;
}
.vector_1 {
/* background-color: #1cc489; */
background: linear-gradient(135deg, #8b68bf, #ababab, #d0a3ff);
border-radius: 15px;
display: flex;
padding: 6px 8px;
position: absolute;
right: 0;
top: 80px;
animation: rotate-in-down-left 4s ease-in-out infinite;
}
@keyframes rotate-in-down-left {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0;
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1;
}
}
.vector_2 {
background: linear-gradient(135deg, #8b68bf, #ababab, #d0a3ff);
border-radius: 15px;
display: flex;
padding: 6px 8px;
position: absolute;
right: 0;
bottom: -289px;
/* animation: move 10s infinite ease-in-out; */
animation: bounce2 2s ease infinite;
}
@keyframes bounce2 {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes move {
0% {}
50% {
transform: translate(100px, 0px) rotate(20deg);
/* background: #000; */
opacity: 0.2;
border-radius: 15;
}
100% {}
}
.vector_3 {
background-color: #1cc489;
background: linear-gradient(135deg, #8b68bf, #ababab, #d0a3ff);
border-radius: 15px;
display: flex;
padding: 6px 8px;
right: 64px;
bottom: 2px;
position: absolute;
animation: move 10s infinite ease-in-out;
}
.bubble {
position: absolute;
bottom: -100px;
/* Start below the viewport */
background: rgba(255, 255, 255, 0.6);
/* Bubble color */
border-radius: 50%;
/* Make it round */
animation: rise 10s infinite;
/* Animation properties */
}
/* Varying sizes for bubbles */
.bubble:nth-child(1) {
width: 40px;
height: 40px;
left: 10%;
animation-delay: 0s;
}
.bubble:nth-child(2) {
width: 60px;
height: 60px;
left: 30%;
animation-delay: 1s;
}
.bubble:nth-child(3) {
width: 50px;
height: 50px;
left: 50%;
animation-delay: 2s;
}
.bubble:nth-child(4) {
width: 70px;
height: 70px;
left: 70%;
animation-delay: 3s;
}
.bubble:nth-child(5) {
width: 30px;
height: 30px;
left: 20%;
animation-delay: 4s;
}
.bubble:nth-child(6) {
width: 80px;
height: 80px;
left: 40%;
animation-delay: 5s;
}
.bubble:nth-child(7) {
width: 20px;
height: 20px;
left: 60%;
animation-delay: 6s;
}
.bubble:nth-child(8) {
width: 90px;
height: 90px;
left: 80%;
animation-delay: 7s;
}
.bubble:nth-child(9) {
width: 50px;
height: 50px;
left: 15%;
animation-delay: 8s;
}
.bubble:nth-child(10) {
width: 60px;
height: 60px;
left: 85%;
animation-delay: 9s;
}
@keyframes rise {
to {
transform: translateY(-100vh);
/* Move up out of view */
opacity: 0;
/* Fade out */
}
}
/* bottomMusicPlayer */
/* Layout principal */
.bottom_fixedMucicPlayer .music-player {
display: flex;
height: auto;
display: flex;
height: auto;
background: transparent;
box-shadow: unset;
padding: 0;
backdrop-filter: unset;/
}
.bottom_fixedMucicPlayer .music-player::before {
background: transparent;
}
/* Controles de reprodução */
.bottom_fixedMucicPlayer .player-controls {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 96px;
background-color: #1d0c2ec7;
backdrop-filter: blur(12px);
border-top: 1px solid #374151;
display: flex;
align-items: center;
padding: 0 10px;
max-width: 900px;
margin: 0 auto;
border-radius: 15px 15px 0 0;
z-index: 99999;
}
.bottom_fixedMucicPlayer .control-track-info {
width: 25%;
display: flex;
align-items: flex-start;
gap: 16px;
margin-top: 12px;
}
.bottom_fixedMucicPlayer .control-cover {
width: 48px;
height: 48px;
border-radius: 4px;
object-fit: cover;
}
.bottom_fixedMucicPlayer .control-title {
font-weight: 500;
margin-bottom: 0;
font-size: 14px;
line-height: 1.2;
}
.bottom_fixedMucicPlayer .control-artist {
font-size: 14px;
color: #9CA3AF;
}
.bottom_fixedMucicPlayer .playback-controls {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.bottom_fixedMucicPlayer .playback-buttons {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 8px;
}
.bottom_fixedMucicPlayer .control-button {
color: #9CA3AF;
transition: color 0.2s;
border: none;
background: transparent;
}
.bottom_fixedMucicPlayer .control-button:hover {
color: white;
}
.bottom_fixedMucicPlayer .play-pause-button {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #7C3AED;
border: none;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.bottom_fixedMucicPlayer .play-pause-button:hover {
background-color: #8B5CF6;
}
.bottom_fixedMucicPlayer .progress-container {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 500px;
background-color: unset;
overflow: visible;
}
.bottom_fixedMucicPlayer .time {
font-size: 12px;
color: #9CA3AF;
}
.bottom_fixedMucicPlayer .progress-bar {
flex: 1;
height: 4px;
background-color: #4B5563;
border-radius: 2px;
overflow: hidden;
margin: 0;
}
.bottom_fixedMucicPlayer .progress-fill {
height: 100%;
width: 33%;
background-color: #7C3AED;
border-radius: 2px;
}
.bottom_fixedMucicPlayer .volume-control {
width: 25%;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
}
.bottom_fixedMucicPlayer .volume-bar {
width: 96px;
height: 4px;
background-color: #4B5563;
border-radius: 2px;
overflow: hidden;
cursor: pointer;
}
.bottom_fixedMucicPlayer .volume-fill {
height: 100%;
width: 66%;
background-color: #9CA3AF;
border-radius: 2px;
}
/* Visualizações de conteúdo */
.bottom_fixedMucicPlayer .view-content {
display: none;
}
.bottom_fixedMucicPlayer .view-content.active {
display: block;
}
.bottom_fixedMucicPlayer .empty-message {
color: #9CA3AF;
margin-top: 16px;
}
/* Responsividade */
@media (max-width: 1200px) {
.bottom_fixedMucicPlayer .now-playing-panel {
width: 260px;
}
.bottom_fixedMucicPlayer .current-cover {
width: 200px;
height: 200px;
}
}
@media (max-width: 1000px) {
.bottom_fixedMucicPlayer .genres-grid,
.bottom_fixedMucicPlayer .albums-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* dots css */
.player_dots .music-player {
position: relative;
}
.player_dots .song-info {
text-align: center;
margin-bottom: 20px;
color: white;
}
.player_dots .song-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
}
.player_dots .artist-name {
font-size: 16px;
opacity: 0.8;
}
.player_dots .controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.player_dots .menu-button {
width: 44px;
height: 44px;
background: rgba(0, 0, 0, 0.3);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.player_dots .menu-button:hover {
background: rgba(0, 0, 0, 0.5);
/* transform: scale(1.1); */
}
.player_dots .menu-button:active {
transform: scale(0.95);
}
.player_dots .dots {
display: flex;
flex-direction: column;
gap: 3px;
}
.player_dots .dot {
width: 4px;
height: 4px;
background: white;
border-radius: 50%;
}
.player_dots .popup-overlay {
position: fixed;
top: -165px;
left: 238px;
width: 100%;
height: 100%;
/* background: rgba(0, 0, 0, 0.5); */
display: flex;
align-items: center;
/* justify-content: center; */
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 1000;
}
.player_dots .popup-overlay.active {
opacity: 1;
visibility: visible;
}
.player_dots .popup {
background: #111827;
border-radius: 16px;
padding: 0;
min-width: 280px;
max-width: 90vw;
transform: scale(0.9) translateY(20px);
transition: all 0.3s ease;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.player_dots .popup-overlay.active .popup {
transform: scale(1) translateY(0);
}
.player_dots .popup-header {
padding: 10px;
border-bottom: 1px solid #eee;
text-align: center;
}
.player_dots .popup-title {
font-size: 18px;
font-weight: 600;
color: #ffffff;
margin-bottom: 4px;
}
.player_dots .popup-subtitle {
font-size: 14px;
color: #cbcbcb;
}
.player_dots .popup-options {
padding: 0px 0;
}
.player_dots .option {
display: flex;
align-items: center;
gap: 16px;
padding: 5px 14px;
cursor: pointer;
transition: background-color 0.2s ease;
border: none;
width: 100%;
background: none;
text-align: left;
}
.player_dots .option:hover {
background: #1f2937;
}
.player_dots .option-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #667eea;
}
.player_dots .option-text {
flex: 1;
}
.player_dots .option-title {
font-size: 14px;
font-weight: 500;
color: #ffffff;
margin-bottom: 0px;
}
.player_dots .option-description {
font-size: 13px;
color: #cbcbcb;
}
.player_dots .close-button {
position: absolute;
top: 16px;
right: 16px;
width: 32px;
height: 32px;
border: none;
background: #f5f5f5;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
color: #666;
transition: all 0.2s ease;
}
.player_dots .close-button:hover {
background: #e0e0e0;
color: #333;
}
.player_dots .notification {
position: fixed;
top: 20px;
right: 20px;
background: #4CAF50;
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
opacity: 0;
transform: translateX(100px);
transition: all 0.3s ease;
z-index: 1001;
}
.player_dots .notification.show {
opacity: 1;
transform: translateX(0);
}
/* bottomMusicPlayer */
.h2-title {
font-size: 50px;
line-height: 60px;
margin-bottom: 25px;
text-transform: capitalize;
position: relative;
font-weight: bold;
display: inline-block;
}
.h2-title:before {
content: "♫";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-60%, -40%);
font-size: 120px;
line-height: 150px;
z-index: 0;
opacity: 0.1;
color: var(--white-color);
}
.h3-title {
font-size: 35px;
line-height: 45px;
font-weight: 500;
}
.h4-title {
font-size: 25px;
line-height: 35px;
}
.h5-title {
font-size: 18px;
line-height: 28px;
}
.h2-title span,
.h3-title span,
.h4-title span,
.h5-title span,
.sub-title span {
display: block;
}
.sidebar-title {
font-size: 25px;
line-height: 35px;
font-weight: bold;
font-family: var(--body-font);
color: var(--secondary-color);
margin-bottom: 21px;
}
/*==========Typography CSS End==========*/
/*==========Common CSS ==========*/
:root {
--primary-color: #14c285;
--white-color: #ffffff;
--dark-color: #272727;
--body-color: #131a59;
--box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
--transition: 0.8s cubic-bezier(0.22, 0.78, 0.45, 1.02);
--input-color: #14c285;
--body-font: 'Poppins', sans-serif;
--title-font: 'Josefin Sans', sans-serif;
--primary-overlay-color: 36, 77, 77;
}
body {
font-family: var(--body-font);
background: #0D0D0D;
color: #CCCCCC;
background-position: center;
background-repeat: repeat;
background-size: cover;
text-rendering: optimizespeed !important;
position: relative;
padding: 30px;
}
#vantajs-bg {
position: fixed;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
opacity: 0.3;
}
.overlay-body {
position: relative;
border-radius: 30px;
overflow: hidden;
}
.overlay-body:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.1);
background: linear-gradient(135deg, #2a1a42, #000000, #420087);
z-index: 0;
/* backdrop-filter: brightness(1.2) blur(30px) opacity(1); */
/* -webkit-backdrop-filter: brightness(1.2) blur(30px) opacity(1); */
border-radius: 30px;
}
.body-fixed {
position: fixed;
width: 100%;
top: auto;
left: auto;
}
body,
html {
overflow-x: hidden;
}
* {
-webkit-tap-highlight-color: transparent;
}
img {
max-width: 100%;
}
p a {
color: var(--primary-color);
transition: all 0.3s ease 0s;
}
p a:hover {
color: var(--dark-color);
}
a:hover {
color: initial;
}
.for-des {
display: block !important;
}
.for-mob {
display: none !important;
}
.sec-wp {
position: relative;
z-index: 4;
}
.sec-title-text {
text-align: center;
}
.hidden-box {
overflow: hidden;
}
.ani-line {
width: 100%;
height: 1px;
display: block;
background: var(--primary-color);
opacity: 0.2;
transition: width 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
.section {
padding-top: 100px;
padding-bottom: 100px;
position: relative;
}
.light-bg {
background-color: var(--light-bg);
}
.bg-overlay {
position: absolute;
inset: 0px;
background: var(--light-bg);
opacity: 0.96;
}
.gradient-overlay {
position: absolute;
inset: 0px;
background: var(--gradient-color);
opacity: 0.92;
}
.border-overlay {
margin: 15px;
}
::selection {
background: var(--primary-color);
color: var(--dark-color);
}
.back-img {
height: 100%;
width: 100%;
border-radius: 12px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgb(255 255 255 / 30%);
}
.links {
background-image: -webkit-linear-gradient(left, currentcolor 0%, currentcolor 100%);
background-size: 0px 2px;
background-position: 0px 95%;
padding: 0.1% 0px;
background-repeat: no-repeat;
transition: all 0.4s cubic-bezier(0.47, 1.64, 0.41, 0.8) 0s;
}
.links:hover {
background-size: 100% 2px;
}
.top-stories .nav.nav-tabs,
.most-popular .nav.nav-tabs {
border: 0px;
margin-top: 25px;
}
.whatsapp-button {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #25D366;
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
z-index: 1000000000;
transition: all .4s ease-in-out;
text-decoration: none;
}
.whatsapp-button:hover {
color: white;
background: linear-gradient(135deg, #3d1b69, #1d1143, #16002d);
}
.top-stories .nav-link,
.most-popular .nav-link {
width: 150px;
height: 46px;
border-radius: 5px;
color: var(--primary-color);
font-size: 16px;
line-height: 30px;
text-align: center;
border: 0px;
margin: 0px;
}
.top-stories .nav-link.active,
.most-popular .nav-link.active {
background-image: linear-gradient(90deg, rgb(41, 50, 60), rgb(72, 85, 99));
color: rgb(255, 255, 255);
transition: all 0.3s ease 0s;
}
.title {
text-align: center;
}
.title .h4-title {
color: var(--white-color);
}
.video-wrapper .clip.is-active-clip {
-webkit-clip-path: circle(100%);
clip-path: circle(100%);
z-index: 6;
transition: all 0.3s cubic-bezier(0.17, 0.67, 0.83, 0.67) 0.1s;
-webkit-clip-path: circle(0%);
clip-path: circle(0%);
background-size: cover !important;
background-position: 50% 50% !important;
}
/*==========Common CSS End==========*/
/* Cursor Start */
/* Cursor End */
/*==========Form CSS==========*/
select {
appearance: none;
}
.form-element {
position: relative;
}
.form-element i {
position: absolute;
top: 15px;
right: 20px;
pointer-events: none;
color: var(--primary-color);
}
.form-input::-webkit-input-placeholder {
color: var(--input-color);
}
.form-input::placeholder {
color: var(--input-color);
}
select option {
color: var(--dark-color) !important;
}
select {
color: #986bd5 !important;
}
.form-input,
select {
width: 100%;
height: 50px;
border: none;
padding: 0px 30px;
color: var(--body-color);
background-color: var(--white-color);
appearance: none;
border-radius: 5px;
/* box-shadow: rgb(0 0 0 / 16%) 0px 3px 6px; */
font-weight: 500;
outline: none !important;
margin-bottom: 30px;
}
textarea.form-input {
height: 140px;
resize: none;
display: block;
padding-top: 20px;
}
.form-input-wp label {
font-size: 16px;
text-transform: capitalize;
font-weight: 300;
}
.form-input-wp label span,
.contact-title p span {
color: var(--red-color);
}
.form-input-wp {
margin-bottom: 20px;
}
.form-flex-box {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.form-flex-box .form-input-wp {
margin: 0px;
flex: 1 1 0%;
padding-right: 60px;
}
/*==========Form CSS End==========*/
/*==========Button CSS==========*/
.btn-part {
position: relative;
text-align: center;
margin-top: 50px;
}
.sec-btn {
width: auto;
min-height: 50px;
border: 2px solid #7263a2;
border-bottom: 0;
display: inline-flex;
justify-content: center;
align-items: center;
appearance: none;
text-transform: capitalize;
background: 0px 0px;
border-radius: 35px;
font-size: 16px;
line-height: 30px;
color: var(--white-color);
font-weight: 400;
text-align: center;
cursor: pointer;
transition: all 0.5s cubic-bezier(0.22, 0.78, 0.45, 1.02) 0s;
padding: 5px 30px;
overflow: hidden;
position: relative;
z-index: 2;
outline: none !important;
pointer-events: auto;
box-shadow: inset 0 -5px 0 #7463a7;
background: linear-gradient(135deg, #452d64, #120b28, #1d0c2e);
}
.sec-btn:hover {
box-shadow: inset 0 -55px 0 #a082d0, 2px 2px 3px rgb(0 0 0 / 30%);
color: var(--white-color);
transition: all 0.5s cubic-bezier(0.22, 0.78, 0.45, 1.02) 0s;
}
.play-btn {
width: 60px;
height: 60px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
padding-left: 3px;
transition: all 0.5s ease 0s;
vertical-align: middle;
position: relative;
overflow: hidden;
}
.play-btn::before {
content: "";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.1);
z-index: 0;
backdrop-filter: brightness(1.2) blur(30px) opacity(1);
-webkit-backdrop-filter: brightness(1.2) blur(30px) opacity(1);
border-radius: 50%;
}
.play-btn svg {
fill: var(--white-color);
position: relative;
z-index: 1;
}
.read-more {
text-transform: capitalize;
font-size: 20px;
font-family: var(--title-font);
color: var(--primary-color);
display: inline-flex;
align-items: center;
transition: var(--transition);
}
.read-more svg {
margin-left: 15px;
}
.read-more span {
position: relative;
}
.read-more span::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 2px;
background: var(--secondary-color);
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.95s cubic-bezier(0.23, 1, 0.23, 1) 0s, -webkit-transform 0.95s cubic-bezier(0.23, 1, 0.23, 1) 0s;
}
.read-more:hover span::after {
transform: scaleX(1);
transform-origin: left center;
}
.read-more:hover {
color: var(--secondary-color);
}
.explore-more-btn {
margin-top: 43px;
text-align: center;
}
.explore-more-link {
color: var(--secondary-color);
text-transform: uppercase;
font-weight: 300;
position: relative;
padding-bottom: 3px;
letter-spacing: 2px;
}
.explore-more-link::before {
content: "";
position: absolute;
bottom: 0px;
right: 0px;
height: 1px;
width: 100%;
background: var(--secondary-color);
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.95s cubic-bezier(0.23, 1, 0.23, 1) 0s;
}
.explore-more-link:hover::before {
transform: scaleX(1);
transform-origin: left center;
}
.video-play-btn {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--white-color);
border-radius: 50%;
padding-top: 5px;
padding-left: 3px;
z-index: 2;
transition: all 0.3s ease 0s;
}
.video-play-btn:hover {
transform: scale(1.1);
}
/*==========Button CSS End==========*/
/*==========Slider Css==========*/
.event-slider-arrow {
text-align: center;
margin-top: 30px;
}
.swiper-button-next,
.swiper-button-prev {
position: unset;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--white-color);
color: var(--primary-color);
width: 40px;
height: 40px;
z-index: 1;
pointer-events: auto;
}
.swiper-button-prev {
margin-right: 10px;
}
.swiper-button svg path {
transition: all 0.4s ease 0s;
}
.swiper-button svg:hover path {
fill: rgb(200, 225, 222);
}
/*==========Slider Css End==========*/
/*==========Overflow CSS==========*/
.overflow-text {
height: 300px;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background: #654e85;
border-radius: 100px;
}
::-webkit-scrollbar-track {
background: var(--white-color);
border-radius: 100px;
}
main::-webkit-scrollbar {
width: 5px;
}
main::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 100px;
}
main::-webkit-scrollbar-track {
background: var(--white-color);
}
/*==========Overflow CSS End==========*/
/*==========White text CSS==========*/
.white-text p,
.white-text h1,
.white-text h2,
.white-text h3,
.white-text h4,
.white-text h5,
.white-text h6,
.white-text ul li,
.white-text .read-more {
color: var(--white-color);
}
.white-btn {
background-color: var(--white-color);
color: var(--dark-color);
border-color: var(--white-color);
}
.white-form .form-input .white-form select {
background: transparent;
border-color: var(--white-color);
color: var(--white-color);
}
.white-form .form-input::-webkit-input-placeholder {
color: var(--white-input-color);
}
.white-form .form-input::placeholder {
color: var(--white-input-color);
}
.white-form select {
color: var(--white-input-color) !important;
}
.white-form .form-element i {
color: var(--white-color);
}
.white-form .wpcf7 form .wpcf7-response-output {
color: var(--white-color);
}
.white-text .read-more svg path {
fill: var(--white-color);
}
.white-explore-more-link {
color: var(--white-color);
}
.white-explore-more-link:hover {
color: var(--white-color);
opacity: 0.8;
}
.white-explore-more-link::before {
background: var(--white-color);
opacity: 0.6;
}
/*==========White text CSS End==========*/
/*==========Header CSS==========*/
.site-header {
position: absolute;
left: 0px;
top: 0;
width: 100%;
z-index: 99;
transition: all 0.3s ease 0s;
padding: 0px 60px 0px 60px;
background: linear-gradient(135deg, #2980b9, #14c285);
background: linear-gradient(135deg, #a66bef, #4d3d7e, #1d0c2e);
}
.hamburger {
height: 60px;
width: 60px;
float: right;
border: 0px;
right: 15px;
outline: none;
background: 0 0;
position: absolute;
top: 19px;
z-index: 9999;
/* transition: all 0.5s; */
pointer-events: auto;
-webkit-appearance: none !important;
}
.site-branding {
position: relative;
width: 95px;
}
.site-branding a {
font-size: 30px;
font-weight: 600;
;
color: var(--white-color);
pointer-events: auto;
text-transform: uppercase;
letter-spacing: -1px;
}
.menu-main-menu-container li {
display: inline-block;
float: left;
position: relative;
margin: 0 20px;
}
.menu-main-menu-container ul {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.menu-main-menu-container li a {
color: var(--white-color);
font-size: 20px;
pointer-events: auto;
text-transform: capitalize;
font-family: var(--title-font);
position: relative;
font-weight: 400;
}
.menu-main-menu-container li a:before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
height: 1px;
width: 0;
opacity: 0;
background-color: var(--white-color);
transition: all 0.5s;
}
.menu-main-menu-container li a:hover:before {
width: 100%;
opacity: 1;
transition: all 0.5s;
}
.header-menu ul li {
position: relative;
}
.header-menu ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #0e0916;
background: linear-gradient(135deg, #452d64, #120b28, #1d0c2e);
border: 1px solid #9469ca;
border-radius: 12px;
min-width: 240px;
z-index: 999;
overflow: hidden;
}
.header-menu ul li ul li a {
display: block;
padding: 10px 5px;
color: white;
text-decoration: none;
}
.header-menu ul li:hover ul {
display: block;
}
.header-menu ul li ul li a:hover {
background-color: #ffffff;
color: black;
}
.service_drop li {
margin: 0;
/* padding: 0 7px; */
width: 100%;
}
.service_drop li a {
font-size: 16px;
/* padding: 0px 12px; */
display: block;
pointer-events: auto;
font-weight: 600;
}
/*==========Header CSS End==========*/
/*==========Banner CSS==========*/
canvas {
width: 100vw;
height: 100vh;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.dg.ac {
display: none;
}
.main-banner {
background-size: cover;
background-position: center top;
position: relative;
}
.banner-content h3 {
color: var(--white-color);
margin-bottom: 20px;
font-weight: normal;
text-transform: capitalize;
font-family: var(--title-font);
}
.heading-text {
--fill-color: #bc99f1;
position: relative;
display: inline;
padding: 4px 0;
/* letter-spacing: 5px; */
font-weight: bold;
/* font-size: 2.5rem; */
text-decoration: none;
/* text-transform: uppercase; */
-webkit-text-stroke: 1px var(--fill-color);
background: linear-gradient(var(--fill-color) 0 100%) left / 0 no-repeat;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
transition: 1s linear;
}
.heading-text:hover {
background-size: 100%;
transition: 1s linear;
}
.h1-title span {
display: block;
}
.main-banner .row {
height: auto;
padding: 5rem 0;
}
.banner-img {
/* width: 30vw;
height: 30vw;
position: relative;
top: 0;
right: 0;
border-radius: 100%; */
overflow: hidden;
transition: all 0.5s;
/* filter: grayscale(0);
pointer-events: auto; */
}
.banner-img:hover {
filter: grayscale(0);
transition: all 0.5s;
}
.hero_sec p {
font-size: 14px;
display: -webkit-box;
-webkit-line-clamp: 4;
/* Show only 2 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-img {
/* overflow: hidden; */
position: relative;
}
.relative_Img {
display: flex;
justify-content: end;
overflow: hidden;
}
.relative_Img img {
width: 85%;
height: 100%;
overflow: hidden;
transition: all .7s ease-in-out;
/* border-radius: 12px; */
}
.relative_Img img:hover {
transform: scale(1.1);
}
.absolute-img {
position: absolute;
bottom: 0;
animation: mymove 4s infinite;
overflow: hidden;
}
.absolute-img img {
width: 50%;
transition: all .7s ease-in-out;
}
/* .absolute-img img:hover{
transform: scale(1.1);
} */
@keyframes mymove {
0% {
transform: translateY(0);
}
30% {
transform: translateY(20px);
}
100% {
transform: translateY(0);
}
}
.banner-btn {
margin-top: 30px;
display: flex;
align-items: center;
}
.player-parent {
position: relative;
z-index: 999;
}
.banner-btn .sec-btn span {
margin-right: 10px;
}
.sec-btn.hover-btn {
margin-left: 15px;
box-shadow: inset 0 -55px 0 #9176ba, 2px 2px 3px rgb(0 0 0 / 30%);
transition: all 0.5s cubic-bezier(0.22, 0.78, 0.45, 1.02) 0s;
}
.sec-btn.hover-btn:hover {
box-shadow: inset 0 -5px 0 #a082d0;
transition: all 0.5s cubic-bezier(0.22, 0.78, 0.45, 1.02) 0s;
}
/*==========Banner CSS End==========*/
/* chatbot css */
.parent-chatBot {
position: fixed;
bottom: 15px;
right: 14px;
/* width: 85px; */
z-index: 99999999999 !important;
}
.chat-box {
width: 350px;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: relative;
background: white;
}
.chat-header {
background-color: #008cba;
color: white;
padding: 10px 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.chat-header .status {
font-size: 12px;
color: #dfffd4;
}
.chat-header .title {
display: flex;
align-items: center;
gap: 10px;
}
.chat-header .title img {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: white;
}
.chat-body {
background-color: #fff;
padding: 10px 15px;
}
.chat-message {
background-color: #d9fdd3;
padding: 6px 15px;
border-radius: 10px;
display: inline-block;
margin-bottom: 5px;
color: black;
}
.chat-time {
font-size: 12px;
color: #888;
margin: 5px 0;
}
.quick-replies {
margin: 15px 0;
}
.quick-replies button {
display: block;
width: 100%;
background-color: #00a0d1;
color: white;
border: none;
padding: 10px;
border-radius: 20px;
margin-bottom: 10px;
cursor: pointer;
font-weight: bold;
}
.chat-input {
border-top: 1px solid #ccc;
display: flex;
align-items: center;
padding: 10px;
}
.chat-input input {
flex-grow: 1;
padding: 8px 10px;
border: 1px solid #ccc;
border-radius: 20px;
outline: none;
color: #000000;
}
.chat-input .emoji {
margin-left: 10px;
font-size: 20px;
cursor: pointer;
}
.chat-footer {
display: flex;
justify-content: center;
padding: 10px;
}
.chat-footer button {
background-color: #e74c3c;
color: white;
border: none;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
@media (max-width:767px) {
.parent-chatBot .chat-header .title {
font-size: 18px;
}
.quick-replies button {
padding: 4px 0;
font-size: 13px;
}
.chat-input input {
font-size: 13px;
padding: 5px 10px;
}
}
@media (max-width: 430px) {
.parent-chatBot {
bottom: -180px !important;
transform: translate(-50%, -50%);
left: 50%;
/* right: 30px !important; */
/* position: absolute; */
width: 85%;
}
}
/* chatbot css */
/*========== Artist Section CSS Start==========*/
.main {
position: relative;
}
.main h2 {
/* color: white; */
font-size: 115px;
font-weight: 700;
position: absolute;
transform: translate(-50%, -50%);
margin: 0;
}
.main .first {
color: transparent;
-webkit-text-stroke: 2px #baa0dd;
}
.main .second {
color: #8d72b3;
-webkit-text-stroke: 2px #b79edb;
animation: waves 4s ease-in-out infinite;
}
@keyframes waves {
0%,
100% {
clip-path: polygon(0% 45%,
16% 44%,
33% 50%,
54% 60%,
70% 61%,
84% 59%,
100% 52%,
100% 100%,
0% 100%);
}
50% {
clip-path: polygon(0% 60%,
15% 65%,
34% 66%,
51% 62%,
67% 50%,
84% 45%,
100% 46%,
100% 100%,
0% 100%);
}
}
.artist-section .context {
width: 100%;
position: absolute;
top: 50vh;
}
.artist-section .context h1 {
text-align: center;
color: #fff;
font-size: 50px;
}
.artist-section .area {
background: #4e54c8;
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
height: auto;
}
.artist-section .circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.artist-section .circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.artist-section .circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.artist-section .circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.artist-section .circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.artist-section .circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.artist-section .circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.artist-section .circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.artist-section .circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.artist-section .circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.artist-section .circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.artist-section .circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
.artist-section {
/* padding: 80px 0 50px; */
position: relative;
}
.artist-section .main h2 {
font-size: 90px;
margin-bottom: 10px;
}
.parent-loader {
position: absolute;
right: 215px;
top: 150px;
}
/* From Uiverse.io by alexruix */
.parent-loader .loader {
width: 112px;
height: 112px;
}
.parent-loader .box1,
.parent-loader .box2,
.parent-loader .box3 {
border: 16px solid #b39ad6;
box-sizing: border-box;
position: absolute;
display: block;
}
.parent-loader .box1 {
width: 112px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
animation: abox1 4s 1s forwards ease-in-out infinite;
}
.parent-loader .box2 {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
animation: abox2 4s 1s forwards ease-in-out infinite;
}
.parent-loader .box3 {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
animation: abox3 4s 1s forwards ease-in-out infinite;
}
@keyframes abox1 {
0% {
width: 112px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
12.5% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
25% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
37.5% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
50% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
62.5% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
75% {
width: 48px;
height: 112px;
margin-top: 0px;
margin-left: 0px;
}
87.5% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
100% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
}
@keyframes abox2 {
0% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
12.5% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
25% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
37.5% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
50% {
width: 112px;
height: 48px;
margin-top: 0px;
margin-left: 0px;
}
62.5% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
75% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
87.5% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
100% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
}
@keyframes abox3 {
0% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
12.5% {
width: 48px;
height: 48px;
margin-top: 0px;
margin-left: 64px;
}
25% {
width: 48px;
height: 112px;
margin-top: 0px;
margin-left: 64px;
}
37.5% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
50% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
62.5% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
75% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
87.5% {
width: 48px;
height: 48px;
margin-top: 64px;
margin-left: 64px;
}
100% {
width: 112px;
height: 48px;
margin-top: 64px;
margin-left: 0px;
}
}
.artist-row {
padding-top: 80px;
margin: 0 60px;
}
.artist-row .g-5 {
--bs-gutter-x: 5rem;
--bs-gutter-y: 0;
}
.artist-box {
position: relative;
margin-bottom: 30px;
max-width: 400px;
padding: 30px;
box-shadow: 10px 10px 10px #ffffff0f, -10px -10px 10px #ffffff26;
display: block;
}
.artist-box.even {
margin-top: 60px;
margin-left: auto;
}
.mobile-vectors {
position: absolute;
left: -24px;
transform: rotate(90deg);
top: -240px;
}
.mobile-vectors img {
width: 85%;
animation: animName 4s infinite;
}
@keyframes animName {
0% {
transform: translateY(0);
}
30% {
transform: translateY(30px);
}
100% {
transform: translateY(0);
}
}
.artist-box .back-img {
position: relative;
/* filter: grayscale(1); */
transition: 0.5s linear;
z-index: 0;
pointer-events: auto;
min-height: 450px;
margin-left: auto;
}
.rotate-text {
position: absolute;
top: 0;
left: -20px;
transform: rotate(90deg);
transform-origin: 0 0;
width: 370px;
}
.artist-box.even .rotate-text {
top: auto;
bottom: -40px;
left: -45px;
transform: rotate(270deg);
}
.artist-content {
margin-left: auto;
margin-top: 20px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.artist-content p {
color: var(--white-color);
}
.artist-box.even .artist-content {
margin-top: 0;
margin-bottom: 20px;
}
.artist-box-info {
position: absolute;
top: 30px;
left: -35px;
z-index: 1;
}
.artist-box:hover .back-img {
transition: all 0.5s;
filter: grayscale(0);
}
.artist-box .rotate-text span {
--fill-color: #b79dda;
position: relative;
display: inline;
padding: 4px 0;
letter-spacing: 5px;
font-weight: bold;
font-size: 2.5rem;
text-decoration: none;
text-transform: uppercase;
-webkit-text-stroke: 1px var(--fill-color);
background: linear-gradient(var(--fill-color) 0 100%) left / 0 no-repeat;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
transition: 0.5s linear;
}
.artist-box:hover span {
background-size: 100%;
transition: 0.5s linear;
}
.artist-box .artist-box-info a:hover {
-webkit-text-stroke: 1px var(--white-color);
transition: all 0.5s;
}
.artist-box .h4-title {
font-size: 70px;
line-height: 70px;
font-weight: bold;
position: absolute;
bottom: -40px;
right: -25px;
z-index: 1;
margin: 0;
}
/* New Design Start */
.nav-menu {
position: relative;
}
.mani-menu li a {
pointer-events: auto;
font-size: 2.5rem;
line-height: normal;
display: inline-block;
font-weight: bold;
font-family: var(--title-font);
color: var(--white-color);
text-transform: uppercase;
}
.menu-images {
height: 400px;
width: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scaleX(0);
opacity: 0;
transition: all 0.5s;
}
.mani-menu {
text-align: center;
z-index: 1;
position: relative;
}
.menu-images.active-img {
opacity: 1;
transition: all 0.5s;
width: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scaleX(1);
}
.mani-menu li {
display: inline-block;
margin: 0 2em;
}
/* New DEsign End */
/*========== Artist Section CSS End==========*/
/* newsbar */
/* Newsbar Container */
.newsbar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
/* background: linear-gradient(90deg, #2c3e50, #34495e); */
color: #fff;
display: flex;
align-items: center;
padding: 10px 20px;
font-family: "Segoe UI", sans-serif;
font-size: 15px;
box-shadow: 0 -4px 12px rgb(0 0 0 / 8%);
z-index: 9999;
overflow: hidden;
}
/* Label */
.newsbar .news-label {
font-weight: bold;
margin-right: 15px;
white-space: nowrap;
color: #f1c40f;
}
/* Ticker Container */
.newsbar .news-ticker {
flex: 1;
overflow: hidden;
position: relative;
height: 30px;
}
/* News Items */
.newsbar .news-items {
display: inline-block;
white-space: nowrap;
animation: ticker-left 150s linear infinite;
}
.newsbar .news-items span {
margin-right: 50px;
display: inline-block;
font-weight: 500;
}
/* Animation - starts from left */
@keyframes ticker-left {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
/* newsbar */
/* about-section */
.secAbout {
position: relative;
background-image: url("/assets/images/singWithMe/about-banner.avif");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.parent-about {
background-color: #111111fc;
padding: 3rem 0;
}
.secAbout .main h2 {
font-size: 102px;
transform: translate(-50%, -50%);
left: 50%;
}
.about-me .container .title {
padding: 3rem 0;
font-size: 75px;
font-weight: 700;
/* letter-spacing: 15px; */
text-align: center;
margin-bottom: 12px;
opacity: 0;
transform: translateY(50px);
animation: fadeInUp 1s ease forwards;
position: relative;
z-index: 2;
}
.about-me .container .content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.about-me .container .content-grid .text-section {
opacity: 0;
transform: translateX(-50px);
animation: slideInLeft 1s ease forwards;
position: relative;
z-index: 2;
}
.about-me .container .content-grid .text-section:nth-child(even) {
transform: translateX(50px);
animation: slideInRight 1s ease forwards;
}
.about-me .container .content-grid .text-section.delay-1 {
animation-delay: 0.3s;
}
.about-me .container .content-grid .text-section.delay-2 {
animation-delay: 0.6s;
}
.about-me .container .content-grid .text-section.delay-3 {
animation-delay: 0.9s;
}
.about-me .container .content-grid .image-container {
position: relative;
overflow: hidden;
border-radius: 8px;
opacity: 0;
transform: scale(0.8);
animation: scaleIn 1s ease forwards;
}
.about-me .container .content-grid .image-container.delay-1 {
animation-delay: 0.4s;
}
.about-me .container .content-grid .image-container.delay-2 {
animation-delay: 0.7s;
}
.about-me .container .content-grid .image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
/* filter: grayscale(100%) contrast(1.2); */
}
.about-me .container .content-grid .image-container:hover img {
transform: scale(1.05);
filter: grayscale(0%) contrast(1);
}
.about-me .container .content-grid .image-container .image-1 {
height: 400px;
}
.about-me .container .content-grid .image-container .image-2 {
height: 300px;
margin-left: auto;
width: 100%;
}
.about-me .container .content-grid .text-section .text-content {
font-size: 1rem;
line-height: 1.8;
color: #cccccc;
margin-bottom: 20px;
}
.about-me .container .content-grid .text-section .highlight-text {
font-size: 25px;
font-weight: 600;
color: #ffffff;
margin-bottom: 15px;
position: relative;
}
.about-me .container .content-grid .text-section .highlight-text::before {
content: '';
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 20px;
background: linear-gradient(45deg, #ffffff, #888888);
}
/* Floating elements animation */
.about-me .floating-element {
position: absolute;
width: 2px;
height: 2px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.about-me .floating-element:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.about-me .floating-element:nth-child(2) {
top: 60%;
right: 15%;
animation-delay: 2s;
}
.about-me .floating-element:nth-child(3) {
top: 80%;
left: 70%;
animation-delay: 4s;
}
/* Animations */
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scaleIn {
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes float {
0%,
100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.3;
}
50% {
transform: translateY(-20px) rotate(180deg);
opacity: 0.8;
}
}
/* Responsive design */
@media (max-width: 768px) {
.about-me .container .content-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.about-me .container .title {
font-size: 3rem;
/* margin-bottom: 50px; */
}
.about-me .container .content-grid .text-section {
text-align: center;
}
.about-me .container .content-grid .image-container .image-2 {
width: 100%;
margin-left: 0;
}
}
/* Scroll-triggered animations */
.about-me .fade-in-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.about-me .fade-in-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* about-section */
/*========== Album Section CSS Start==========*/
.albums-section {
position: relative;
padding: 80px 0 85px;
/* overflow: hidden; */
}
.music-vectors {
position: relative;
/* right: 0;
top: -30px; */
}
.music-vectors img {
width: 20%;
border-radius: 40px;
animation: move 10s infinite ease-in-out;
position: absolute;
right: 0;
top: -285px;
}
.music3_vectors img {
position: absolute;
top: -190px;
animation: animName 4s infinite;
filter: invert(1);
width: 20%;
}
@keyframes move {
0% {}
50% {
transform: translate(100px, 0px) rotate(20deg);
/* background: #000; */
/* opacity: 0.2; */
border-radius: 0;
}
100% {}
}
.albums-section:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 630px;
background-image: url(../images/music-wave.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: fade-in 2.5s linear infinite;
animation: fade-in 2.5s linear infinite;
animation-play-state: running;
}
.album-box-row {
position: relative;
padding-top: 60px;
}
.album-box.middle-box {
margin-top: 80px;
margin-bottom: 40px;
}
.album-box {
position: relative;
z-index: 1;
padding: 20px;
box-shadow: 10px 10px 10px #ffffff0f, -10px -10px 10px #ffffff26;
text-align: center;
display: block;
pointer-events: auto;
background: black;
border-radius: 12px;
}
.album-box .back-img {
pointer-events: auto;
filter: grayscale(0);
transition: all 0.5s;
height: 450px;
}
.album-box:hover .back-img {
filter: grayscale(1);
transition: all 0.5s;
}
.album-box .h3-title {
margin-top: 20px;
color: var(--white-color);
font-weight: 300;
text-align: center;
margin-bottom: 0;
text-transform: capitalize;
}
.singer-name span {
text-align: center;
text-transform: capitalize;
font-size: 20px;
font-weight: 500;
display: inline-block;
pointer-events: auto;
color: #b79dd9;
transition: all 0.5s;
}
.singer-name a:hover {
color: var(--white-color);
transition: all 0.5s;
}
.album-cover {
position: relative;
z-index: 1;
pointer-events: auto;
}
.album-disk {
position: absolute;
top: 50%;
left: 300px;
width: 500px;
height: 500px;
transform: translate(0, -50%);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s;
}
.album-cover:hover~.album-disk {
left: 500px;
transition: all 0.5s;
}
.album-disk img {
transition: all 0.5s;
-webkit-animation: rotating 2.5s linear infinite;
animation: rotating 2.5s linear infinite;
animation-play-state: paused;
}
.album-cover:hover~.album-disk img {
transition: all 0.5s;
-webkit-animation-play-state: running;
animation-play-state: running;
}
@keyframes fade-in {
0% {
opacity: 1;
}
25% {
opacity: 0.25;
}
50% {
opacity: 0.50;
}
75% {
opacity: 0.75;
}
100% {
opacity: 1;
}
}
/*========== Album Section CSS End==========*/
/*========== Music Controls CSS Start ==========*/
.lyrics-box {
position: relative;
background-image: url("/assets/images/singWithMe/song-bgImg.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.lyrics-child {
padding: 40px 0 100px;
background-color: #000000eb;
}
.lyrics-box .main h2 {
transform: translate(-50%, -50%);
left: 50%;
font-size: 70px;
}
.song-Box {
background-color: #fff;
border-radius: 15px;
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
padding: 10px 12px;
color: black;
font-weight: 600;
/* font-size: 50px; */
display: flex;
gap: 7px;
max-width: 430px;
justify-content: space-around;
align-items: center;
position: relative;
top: -90px;
animation: animName 4s infinite;
}
.song-Box p {
font-size: 30px;
margin: 0;
}
.song-Box>div {
background-color: #272727;
border-radius: 15px;
}
.lyrics-box .title {
margin-bottom: 80px;
}
.music-card {
position: relative;
max-width: 400px;
width: 100%;
height: auto;
border-radius: 25px;
transform-style: preserve-3d;
transition: all .2s linear;
z-index: 2;
box-shadow: 10px 10px 19px #ffffff14, -10px -10px 19px #ffffff1f;
}
.music-card.right-weight {
transform: rotateY(4deg) rotateX(-5deg);
}
.music-card.middle-weight {
transform: rotateY(0) rotateX(-5deg);
}
.music-card.left-weight {
transform: rotateY(-4deg) rotateX(-5deg);
}
.music-card__wrapper {
position: relative;
z-index: 1;
}
.music-card__wrapper .music-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown_Musicplaylist {
display: none;
}
.Parent-visualizerDots:hover .dropdown_Musicplaylist {
display: block;
position: absolute;
top: 28px;
overflow: hidden;
right: -95px;
background: #2e2e2e;
/* padding: 10px; */
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 199999;
}
.dropdown_Musicplaylist a {
color: #fff;
text-decoration: none;
display: block;
padding: 4px 4px;
font-size: 14px;
}
.dropdown_Musicplaylist a:hover {
color: #b79ddb;
background-color: #000000;
}
.music-visualizerDots {
background-color: #3f3f3f;
pointer-events: none;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
flex-direction: column;
gap: 5px;
align-items: center;
justify-content: center;
}
.music-visualizerDots li{
list-style: none;
opacity: .7;
width: 5px;
height: 5px;
margin: 0 2px;
background: #fff;
border-radius: 50%;
}
.music-card__content {
padding-bottom: 20px;
}
.music-image {
position: relative;
width: 400px;
height: 400px;
/* left: 20px; */
top: -20px;
border-radius: 20px;
object-fit: cover;
filter: drop-shadow(-20px 10px 10px rgba(0, 0, 0, 0.25));
}
.music-image.animate {
animation-name: coverAnimate;
animation-duration: .3s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
}
.music-info {
padding-inline: 20px;
position: relative;
z-index: 1;
}
.music-name {
font-size: 1.4em;
color: rgba(255, 255, 255, .8);
margin-bottom: 4px;
line-height: 1;
text-transform: capitalize;
}
.music-artist {
font-size: 1em;
color: #b79ddb;
text-transform: capitalize;
}
.music-controls {
display: flex;
align-items: center;
justify-content: space-around;
padding: 20px;
margin-inline: auto;
width: 270px;
}
.music-controls-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
padding: 6px;
border-radius: 50%;
cursor: pointer;
transition: ease-in-out .2s;
pointer-events: auto;
}
.play-icon-background {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--dark-color);
z-index: -1;
opacity: 0;
pointer-events: none;
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, .25));
transition: all .2s;
}
.music-controls-item#play .play-icon {
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, .3));
transition: all .2s;
}
.music-controls-item#play:hover .play-icon-background {
animation-name: playIconBackgroundAnimate;
animation-duration: .3s;
animation-iteration-count: 1;
opacity: 1;
}
.music-controls-item#play:hover .play-icon {
animation-name: playIconAnimate;
animation-duration: .3s;
animation-iteration-count: 1;
}
.music-controls-item:hover:not(#play) {
background: var(--dark-color);
}
.music-controls-item--icon {
font-size: 1.2em;
color: #fff;
}
.music-progress {
position: relative;
width: calc(100% - 40px);
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
cursor: pointer;
z-index: 1;
}
.music-progress-bar {
position: relative;
width: 0;
height: 5px;
border-radius: 5px;
background-color: #fff;
pointer-events: auto;
}
.music-progress-bar:after {
content: '';
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 1);
filter: drop-shadow(0px 0px 4px rgba(46, 45, 45, 1));
border-radius: 50%;
box-sizing: border-box;
pointer-events: auto;
}
.music-progress:before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 5px;
background: rgba(255, 255, 255, .3);
border-radius: 5px;
z-index: -1;
pointer-events: auto;
}
.music-progress__time {
position: absolute;
top: 12px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.music-progress__time-item {
color: #fff;
font-size: 12px;
opacity: .4;
}
.music-list-row {
padding-left: 30px;
}
.music-list-box {
padding: 30px 4em 30px 30px;
position: relative;
display: flex;
align-items: center;
margin-bottom: 30px;
overflow: hidden;
border-radius: 20px;
z-index: 2;
box-shadow: rgba(255, 255, 255, 0.16) 0px 1px 4px;
}
.music-list-box:after {
content: "♫";
display: block;
position: absolute;
top: 45%;
right: -25px;
transform: translateY(-50%);
font-size: 15em;
z-index: 0;
opacity: 0.1;
color: var(--white-color);
}
.music_controls .music-controls-item {
background: linear-gradient(135deg, #8b68bf, #ababab, #d0a3ff);
}
.music_controls .music-controls-item .play-icon-background {
display: none;
}
.music-list-image {
height: 100px;
width: 100px;
min-width: 100px;
position: relative;
z-index: 1;
}
.music-list-info {
position: relative;
z-index: 1;
}
.music-list-info .music-artist {
margin-bottom: 0;
}
.music_controls {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
/*========== Music Controls CSS End ==========*/
/* pricing page css */
.pricing-container {
display: flex;
gap: 20px;
/* max-width: 1200px; */
width: 100%;
}
.pricing-card {
background: #16002d;
border-radius: 16px;
padding: 32px 28px;
flex: 1;
position: relative;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
.pricing-card.popular {
border: 3px solid #9f54f5;
/* transform: scale(1.05); */
z-index: 2;
}
.pricing-card.popular:hover {
transform: scale(1.05) translateY(-4px);
}
.card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.plan-name {
display: inline-block;
padding: 8px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.starter .plan-name {
background: #7c3aed;
color: white;
}
.pro .plan-name {
background: #ffffff;
color: #9f54f5;
}
.label .plan-name {
background: #7c3aed;
color: white;
}
.plan-badge {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 500;
}
.starter .plan-badge {
color: #7c3aed;
}
.pro .plan-badge {
color: #00d4aa;
}
.badge-icon {
width: 16px;
height: 16px;
}
.plan-description {
color: #ffffff;
font-size: 16px;
line-height: 1.5;
margin-bottom: 24px;
}
.price-section {
margin-bottom: 32px;
}
.price {
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 8px;
}
.currency {
font-size: 24px;
font-weight: 600;
color: #ffffff;
}
.amount {
font-size: 48px;
font-weight: 700;
color: #9f54f5;
line-height: 1;
}
.period {
font-size: 18px;
color: #ffffff;
margin-left: 4px;
}
.features-title {
font-size: 16px;
font-weight: 600;
color: #9f54f5;
margin-bottom: 16px;
}
.features-list {
list-style: none;
margin-bottom: 32px;
}
.ul_overlay {
height: 132px;
overflow: overlay;
}
.features-list li {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 12px;
font-size: 14px;
color: #ffffff;
line-height: 1.4;
}
.features-list li::before {
content: "•";
color: #6b7280;
font-weight: bold;
flex-shrink: 0;
margin-top: 2px;
}
.cta-button {
width: 100%;
padding: 16px 24px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: block;
text-align: center;
}
.starter .cta-button {
background: #9f54f5;
color: white;
}
.starter .cta-button:hover {
background: #ffffff;
color: black;
transform: translateY(-2px);
}
.pro .cta-button {
background: #9f54f5;
color: white;
margin-top: 20px;
}
.pro .cta-button:hover {
background: #ffffff;
color: rgb(0, 0, 0);
transform: translateY(-2px);
}
.label .cta-button {
background: #9f54f5;
color: white;
}
.label .cta-button:hover {
background: #ffffff;
color: black;
transform: translateY(-2px);
}
/* .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background: #000000 !important;
} */
.slidecontainer input {
width: 100%;
}
/* Style for Chrome, Safari, Opera */
.slidecontainer input[type=range]::-webkit-slider-thumb {
background: #9f54f5;
/* Thumb color */
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
cursor: pointer;
margin-top: -6px;
}
.slidecontainer input[type=range]::-webkit-slider-runnable-track {
background: #9f54f5;
/* Track background */
height: 5px;
border-radius: 5px;
}
/* Style for Firefox */
.slidecontainer input[type=range]::-moz-range-thumb {
background: #9f54f5 !important;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
cursor: pointer;
}
.slidecontainer input[type=range]::-moz-range-track {
background: #9f54f5;
height: 5px;
border-radius: 5px;
}
/* Style for IE (if needed) */
.slidecontainer input[type=range]::-ms-thumb {
background: #9f54f5;
}
.slidecontainer input[type=range]::-ms-track {
background: #9f54f5;
height: 5px;
}
.learn-more {
display: block;
text-align: center;
color: #7c3aed;
font-size: 14px;
font-weight: 500;
text-decoration: none;
margin-top: 16px;
padding: 8px;
border-radius: 6px;
transition: background-color 0.3s ease;
}
.learn-more:hover {
background-color: #f3f4f6;
}
.artist-count {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
font-size: 14px;
color: #6b7280;
}
.artist-count span:first-child {
color: #7c3aed;
font-weight: 500;
}
.progress-bar {
width: 100%;
height: 6px;
background: #e5e7eb;
border-radius: 3px;
margin: 12px 0 24px 0;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #7c3aed;
border-radius: 3px;
width: 12.5%;
transition: width 0.3s ease;
}
@media (max-width: 768px) {
.pricing-container {
flex-direction: column;
gap: 16px;
}
.pricing-card.popular {
transform: none;
}
.pricing-card.popular:hover {
transform: translateY(-4px);
}
}
/* pricing page css */
/*========== Upcoming Section CSS Start==========*/
.upcoming-section {
position: relative;
padding: 25px 0 100px;
}
.upcoming-section .main h2 {
font-size: 92px;
font-weight: 700;
position: absolute;
transform: translate(-50%, -50%);
margin: 0;
width: 100%;
left: 50%;
margin-top: 48px;
}
.upcoming-box:before {
content: " upcoming ";
display: block;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--white-color);
text-transform: capitalize;
opacity: 0.03;
font-size: 16em;
font-weight: bold;
z-index: -1;
}
.upcoming-box {
position: relative;
z-index: 1;
}
.countdown-box {
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 0 20px;
pointer-events: auto;
}
.countdown-box p {
margin-bottom: 0;
font-size: 30px;
color: var(--white-color);
font-family: var(--title-font);
text-align: center;
text-transform: capitalize;
}
.countdown-box p span {
display: block;
font-weight: bold;
font-size: 140px;
line-height: 100px;
font-family: var(--body-font);
color: #b39ad6;
padding-bottom: 100px;
position: relative;
margin-bottom: 40px;
}
.countdown-box p span:before {
content: "";
display: block;
position: absolute;
bottom: -20px;
left: 50%;
transform: translate(-50%, 0);
width: 2px;
height: 100px;
background-color: #fff;
}
#hours:before,
#seconds:before {
height: 60px;
bottom: 20px;
}
#hours,
#seconds {
margin-bottom: 0;
}
/*========== Upcoming Section CSS End==========*/
/*========== Event Section CSS Start==========*/
.event-section {
position: relative;
z-index: 1;
padding-top: 50px;
}
.event-section:before {
content: "♫";
display: block;
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: -300px;
font-size: 70vw;
color: var(--primary-color);
opacity: 0.1;
}
.event-section .main h2 {
font-size: 70px;
font-weight: 700;
position: absolute;
transform: translate(-50%, -50%);
margin: 0;
left: 50%;
width: 100%;
margin-top: -30px;
}
.event-row {
padding-top: 25px;
}
.event-box {
position: relative;
padding: 20px;
pointer-events: auto;
}
.event-box .back-img {
height: 500px;
max-width: initial;
}
.event-content {
background: linear-gradient(145deg, #13151e, #232b76);
/* box-shadow: 10px 10px 19px #282e61, -10px -10px 19px #363e83; */
padding: 30px 20px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.event-box .date-tag {
position: absolute;
top: 20px;
left: 20px;
display: block;
padding: 10px 0;
background-color: var(--white-color);
font-size: 20px;
font-weight: normal;
text-transform: uppercase;
color: var(--primary-color);
width: 70px;
text-align: center;
z-index: 1;
}
.event-box .date-tag span {
display: block;
}
.event-content a {
pointer-events: auto;
font-size: 35px;
line-height: 50px;
color: var(--primary-color);
font-family: var(--title-font);
text-transform: capitalize;
}
.event-content span {
font-size: 16px;
line-height: 26px;
color: var(--white-color);
font-weight: normal;
}
.event-content a:hover~.back-img {
filter: grayscale(0);
}
/*========== Event Section CSS End==========*/
/*========== Gallery Section CSS Start==========*/
.gallery-section {
padding: 140px 0 80px;
position: relative;
z-index: 1;
}
.flexbox {
column-count: 4;
margin-top: 80px;
}
.flexbox:hover img {
filter: grayscale(1);
}
.flexbox .item {
position: relative;
pointer-events: auto;
margin: 0 -9px;
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
overflow: hidden;
}
.flexbox .item img {
width: 100%;
display: block;
transition: all 0.8s;
}
.flexbox .item:hover img {
transform: scale(1.03);
}
.flexbox .item .title {
position: absolute;
top: 48%;
left: 0;
width: 100%;
padding: 0 3%;
font-size: 30px;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.42);
}
.flexbox .item:hover img {
filter: grayscale(0);
}
/*========== Gallery Section CSS End==========*/
/* subscriptioin */
.subscriptioin {
position: relative;
}
.subscriptioin .hero {
text-align: center;
margin-bottom: 50px;
}
.subscriptioin .hero h2 {
font-size: 45px;
font-weight: 700;
margin-bottom: 15px;
color: #fff;
}
.subscriptioin .hero p {
/* font-size: 1.1rem; */
color: #ccc;
max-width: 600px;
margin: 0 auto;
}
.subscriptioin .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
.subscriptioin .feature-card {
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 12px;
padding: 20px;
transition: 0.4s ease-in-out;
}
.subscriptioin .feature-card:hover {
transform: translateY(-5px);
border-color: #ad99ca;
background-color: #120b28;
box-shadow: rgba(248, 248, 248, 0.2) 0px 2px 8px 0px;
}
.subscriptioin .feature-card p {
/* font-size: 0.95rem; */
color: #ffffff;
transition: 0.4s ease-in-out;
}
.subscriptioin .feature-card:hover p {
color: #fff;
}
.subscriptioin .feature-card h3 {
font-size: 23px;
margin-bottom: 10px;
color: #ad99ca;
font-weight: 700;
}
.un_Span {
color: #896cb3;
}
.subscriptioin .cta {
text-align: center;
margin-top: 40px;
}
.subscriptioin .cta button, .guidelines-section .cta button {
background: #ff4081;
background: linear-gradient(135deg, #452d64, #21183c, #321a4a);
color: #fff;
padding: 14px 30px;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.guidelines-section .cta {
margin-top: 3rem;
display: flex;
justify-content: center;
}
.subscriptioin .cta button:hover {
/* background: #e73572; */
transform: translateY(-4px);
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
background: linear-gradient(135deg, #452d64, #21183c, #321a4a);
}
/* subscriptioin */
/*========== Sponsor Section CSS Start ==========*/
.sponsor-section {
position: relative;
padding: 60px 0 120px;
}
.sponsor-slider {
overflow-x: hidden;
}
.sponsor-section img {
pointer-events: auto;
filter: grayscale(1);
opacity: 0.2;
transition: all 0.5s;
height: 100%;
}
.sponsor-section img:hover {
filter: grayscale(0);
opacity: 1;
transition: all 0.5s;
}
.sponsor-boxs {
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
/*========== Sponsor Section CSS End ==========*/
/* secQR_code */
.secQR_code {
/* background: url("/assets/images/singWithMe/QR_bg.jpg"); */
background:
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* overlay */
url('/assets/images/singWithMe/QR_bg.jpeg') no-repeat center center/cover;
/* background: url(/assets/images/singWithMe/bg.gif); */
background-size: cover;
background-position: center;
padding: 3rem 0;
position: relative;
margin: 3rem 0 5rem 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.content_QR h2 {
font-weight: 800;
color: white;
font-size: 50px;
}
.content_QR img {
width: 20%;
border: 2px solid #9d66e3;
border-radius: 12px;
}
.store_button {
display: flex;
gap: 20px;
margin: 1rem 0;
}
.store-btn {
background: linear-gradient(135deg, #452d64, #21183c, #321a4a);
border: 2px solid rgba(139, 92, 246, 0.3);
border-radius: 12px;
padding: 1rem 1.5rem;
color: white;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 1rem;
position: relative;
overflow: hidden;
min-width: 180px;
}
.store-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.3), transparent);
transition: left 0.5s ease;
}
.store-btn:hover {
transform: translateY(-3px);
border-color: #9d66e3;
box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
}
.store-btn:hover::before {
left: 100%;
}
.store-btn.app-store:hover {
box-shadow: 0 10px 25px rgba(146, 59, 246, 0.4);
border-color: #9d66e3;
}
.store-btn.google-play:hover {
box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
border-color: #9d66e3;
}
.store-icon {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #8B5CF6, #3B82F6);
border-radius: 8px;
padding: 4px;
box-shadow: 0 4px 10px rgba(139, 92, 246, 0.3);
}
.store-icon svg {
width: 20px;
height: 20px;
color: white;
}
.store-text {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
}
.store-subtitle {
font-size: 0.75rem;
color: #C7D2FE;
font-weight: 400;
opacity: 0.8;
line-height: 1;
}
.store-name {
font-size: 1.1rem;
font-weight: 700;
color: white;
line-height: 1.2;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
body {
flex-direction: column;
padding: 1rem;
}
.store-btn {
justify-content: center;
min-width: 200px;
}
}
/* secQR_code */
/*========== Video Gallery CSS Start ==========*/
.video_slider {
/* background-color: #111; */
background-image: url("/assets/images/singWithMe/about-bg.png");
padding: 3rem 0;
}
/* .video_slider h2 {
font-size: 40px;
} */
.video_slider .section-header {
/* display: flex;
align-items: center;
gap: 12px; */
margin-bottom: 30px;
}
.video_slider .main h2 {
left: 50%;
font-size: 62px;
margin-top: -50px;
}
.video_slider .section-icon {
width: 8px;
height: 8px;
background: #3b82f6;
border-radius: 50%;
}
.video_slider .section-title {
font-size: 44px;
font-weight: 600;
text-align: center;
/* font-weight: 600; */
color: #ffffff;
}
.video_slider .swiper {
width: 100%;
height: auto;
overflow: visible;
}
.video_slider .swiper-wrapper {
transition-timing-function: linear;
}
.video_slider .swiper-slide {
width: 280px;
height: 380px;
background: #1a1a1a;
border-radius: 16px;
overflow: hidden;
position: relative;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.video_slider .swiper-slide:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
.video_slider .video-thumbnail {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
position: relative;
}
/* Live video backgrounds */
.video_slider .video-1 {
background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)), url('data:image/svg+xml;utf8,');
}
.video_slider .video-2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)), url('data:image/svg+xml;utf8,');
}
.video_slider .video-3 {
background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)), url('data:image/svg+xml;utf8,');
}
.video_slider .video-4 {
background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)), url('data:image/svg+xml;utf8,');
}
.video_slider .video-5 {
background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7)), url('data:image/svg+xml;utf8,');
}
.video_slider .live-badge {
position: absolute;
top: 12px;
left: 12px;
background: #dc2626;
color: white;
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
gap: 4px;
}
.video_slider .live-dot {
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.video_slider .video-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
}
.video_slider .video-category {
color: #e5e7eb;
font-size: 12px;
font-weight: 500;
margin-bottom: 6px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.video_slider .video-title {
color: #ffffff;
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
line-height: 1.3;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.video_slider .video-stats {
display: flex;
align-items: center;
justify-content: space-between;
color: #d1d5db;
font-size: 12px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.video_slider .stats-left {
display: flex;
align-items: center;
gap: 12px;
}
.video_slider .viewers {
display: flex;
align-items: center;
gap: 4px;
color: #d1d5db;
}
.video_slider .viewer-dot {
width: 4px;
height: 4px;
background: #10b981;
border-radius: 50%;
}
/* Responsive Design */
@media (max-width: 768px) {
/* .video_slider .container {
padding: 0 16px;
} */
.video_slider .swiper-slide {
width: 240px;
height: 320px;
}
.video_slider .section-title {
font-size: 20px;
}
}
@media (max-width: 480px) {
.video_slider .swiper-slide {
width: 200px;
height: 280px;
}
.video_slider .video-info {
padding: 16px;
}
.video_slider .video-title {
font-size: 14px;
}
}
.video-gallery {
position: relative;
padding-bottom: 100px;
}
.video-box {
height: 500px;
pointer-events: auto;
}
.video-box .back-img {
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.video-box .back-img a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background-color: transparent;
border-radius: 100%;
color: var(--white-color);
font-size: 2em;
overflow: hidden;
pointer-events: auto;
}
/* .video-box .back-img a:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, .2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 0;
border-radius: 100%;
} */
.video-box .back-img a i {
position: relative;
}
/*========== Video Gallery CSS End ==========*/
/*==========Footer CSS Start==========*/
.site-footer {
position: relative;
}
.footer-logo a {
font-size: 30px;
font-weight: bold;
font-family: var(--title-font);
color: #b197d4;
}
.copyright .row {
position: relative;
border-top: 1px solid #8e8e8e;
padding: 30px 0 50px;
}
span.copyright-text {
font-size: 16px;
line-height: 24px;
font-family: var(--title-color);
letter-spacing: 1px;
float: right;
pointer-events: auto;
}
.copyright-text a {
color: #ffffff;
font-weight: bold;
text-decoration: underline !important;
}
/* Follow Us CSS Star==*/
.follow-us-row {
padding: 80px 0;
}
.follow-us {
position: relative;
padding: 25px 0 40px;
}
.follow-us-row ul {
display: flex;
align-items: center;
justify-content: space-around;
}
.follow-us-row li {
width: auto;
display: inline-block;
text-align: center;
}
.follow-us-row li a {
width: auto;
position: relative;
display: block;
pointer-events: auto;
}
span.big-text {
position: relative;
font-size: 110px;
line-height: 1em;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
color: var(--white-color);
transition: all 0.5s;
text-transform: capitalize;
opacity: 0.09;
}
.follow-us-row li a:hover .big-text {
color: var(--primary-color);
transition: all 0.5s;
opacity: 0.3;
}
.follow-us-row li a:hover .small-text {
transition: all 0.5s;
color: var(--white-color);
}
.small-text {
position: absolute;
display: block;
width: 100%;
margin: 0;
top: calc(50% - 15px);
font-size: 20px;
font-weight: bold;
color: #b197d4;
font-family: var(--title-font);
opacity: 1;
transition: all 0.5s;
}
/* Follow Us CSS End */
/*==========Footer CSS End==========*/
/*========== Album Page CSS Start==========*/
.album-section {
position: relative;
padding: 100px 0 60px;
}
.album-row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-evenly;
}
.album-row .albums-col {
width: 18vw;
margin: 0 20px 30px;
}
.albums-box {
width: 100%;
text-align: center;
pointer-events: auto;
margin: 0 auto 30px;
}
.albums-cover {
position: relative;
height: 18vw;
width: 100%;
border-radius: 100%;
border: 5px solid #e6e6e7;
overflow: hidden;
display: flex;
align-items: center;
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
.albums-cover:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 70px;
width: 70px;
border-radius: 100%;
background-color: #ffffff;
border: 4px solid #e6e6e7;
z-index: 1;
}
.albums-cover .back-img {
position: relative;
height: 110%;
filter: grayscale(1);
transition: all 400ms cubic-bezier(.47, 1.64, .41, .8);
}
.albums-box:hover .albums-cover .back-img {
filter: grayscale(0);
}
/* .albums-box:hover .albums-cover {
animation: border-transform 6s linear infinite;
} */
@-webkit-keyframes rotating {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes border-transform {
0%,
100% {
border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}
14% {
border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
}
28% {
border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
}
42% {
border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
}
56% {
border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
}
70% {
border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
}
84% {
border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
}
}
.albums-box .album-link {
font-size: 30px;
line-height: 40px;
margin-top: 20px;
font-family: var(--body-font);
font-weight: bold;
-webkit-text-stroke: 1px var(--primary-color);
-webkit-text-fill-color: transparent;
pointer-events: auto;
letter-spacing: 0px;
transition: all 400ms cubic-bezier(.47, 1.64, .41, .8);
z-index: 1;
position: relative;
display: inline-block;
text-transform: uppercase;
background: linear-gradient(var(--primary-color) 0 100%) left/0 no-repeat;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
}
.albums-box .album-link:hover,
.albums-box:hover .album-link {
background-size: 100%;
}
/*========== Album Page CSS End==========*/
/*========== Album Single Page CSS Start==========*/
.album-banner {
position: relative;
height: 100vh;
}
.album-banner .row {
align-items: center;
height: 100vh;
}
.album-image {
height: 100vh;
width: 50%;
position: absolute;
top: 0;
left: 0;
}
.album-details {
position: relative;
max-height: 100vh;
margin-left: 40px;
padding-top: 150px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
overflow-y: auto;
pointer-events: auto;
}
.album-details .title {
text-align: left;
}
.album-details .h1-title {
margin-bottom: 0;
}
.album-details .small-text {
position: relative;
top: 0;
left: 0;
color: var(--white-color);
font-size: 20px;
font-weight: 300;
margin-left: 3px;
}
.album-details .music-card__content {
position: relative;
bottom: 0;
left: 0;
width: 100%;
padding-bottom: 0;
}
.popular-songs li {
display: flex;
align-items: center;
padding: 15px 0;
border-bottom: 1px solid rgb(255 255 255 / 6%);
margin-bottom: 20px;
}
.album-songs-detail {
display: flex;
margin: 60px 0 70px;
}
.popular-songs,
.similar-artists {
width: 50%;
position: relative;
}
.popular-songs h4,
.similar-artists h4 {
font-size: 20px;
line-height: 30px;
text-transform: uppercase;
font-weight: bold;
color: var(--white-color);
}
.similar-artists h4 {
margin-bottom: 13px;
}
.songs-name .back-img {
height: 50px;
width: 50px;
max-width: 50px;
border-radius: 10px;
box-shadow: 2px 2px 6px rgb(0 0 0 / 30%);
}
.songs-name .h3-title {
font-size: 18px;
line-height: 30px;
font-weight: normal;
margin-bottom: 0;
margin-left: 15px;
color: var(--white-color);
text-transform: capitalize;
}
.audio-box {
width: 30%;
}
.songs-name {
width: 70%;
display: flex;
align-items: center;
}
.audio-box .music-controls {
width: auto;
padding: 0;
justify-content: flex-end;
}
.popular-songs .music-list-box:before,
.popular-songs .music-list-box:after {
display: none;
}
.popular-songs .music-list-box {
box-shadow: none;
border-radius: 0;
}
.similar-artists {
margin-left: 30px;
margin-right: 30px;
padding-left: 30px;
border-left: 1px solid rgb(255 255 255 / 6%);
}
.similar-artists-box .h3-title {
margin-left: 0;
line-height: 20px;
}
.similar-artists-text {
margin-left: 15px;
padding-top: 8px;
}
.similar-artists-text .small-text {
font-size: 14px;
line-height: 24px;
}
.similar-artists-box .back-img {
height: 60px;
width: 60px;
max-width: 60px;
border-radius: 100%;
box-shadow: 4px 4px 20px rgb(0 0 0 / 50%);
position: relative;
}
.similar-artists-box .back-img:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 70px;
width: 70px;
background-color: transparent;
border: 1px solid var(--white-color);
z-index: 0;
border-radius: 100%;
}
.similar-artists li {
padding: 15px 0;
}
.songs-name.similar-artists-box a {
display: inline-flex;
pointer-events: auto;
}
/*========== Album Single Page CSS End==========*/
/*========== Artists Page CSS Start==========*/
.inner-banner {
position: relative;
padding: 140px 0 105px;
background-color: rgb(255 255 255 / 10%);
}
.inner-banner .h1-title {
color: var(--white-color);
text-align: center;
font-size: 58px;
line-height: 1.2;
max-width: 700px;
margin: 0 auto;
}
.artists-section {
position: relative;
padding-bottom: 50px;
}
/*========== Artists Page CSS End==========*/
/* uplaod video section */
.upload-container {
/* max-width: 1000px; */
margin: auto;
background: #120b28;
border-radius: 20px;
padding: 40px;
position: relative;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}
.upload-header h2 {
font-size: 35px;
/* margin-bottom: 10px; */
color: #ad99ca;
font-weight: 600;
}
.upload-header p {
color: #ffffff;
font-size: 15px;
}
.upload-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 30px;
}
.upload-box {
border: 2px dashed #b39ad6;
width: 100%;
border-radius: 16px;
padding: 40px;
text-align: center;
background: rgba(15, 23, 42, 0.7);
transition: all 0.3s ease;
}
.upload-box:hover {
border-color: #b39ad6;
background: #452d64;
}
.upload-box input[type="file"] {
display: none;
}
.upload-btn {
margin-top: 20px;
padding: 10px 20px;
border: none;
background-color: #9f54f5;
color: white;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
transition: background 0.5s ease-in-out;
}
.upload-btn:hover {
background: #896cb3;
}
.platforms {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.platform-badge {
background: #f1f1f1;
padding: 8px 14px;
border-radius: 50px;
font-size: 14px;
color: #333;
}
/* uplaod video section */
/* secRoyalty */
.secRoyalties .background-pattern {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(120, 219, 255, 0.2) 0%, transparent 50%);
z-index: -1;
}
.secRoyalties .container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
position: relative;
z-index: 1;
}
.secRoyalties .header {
text-align: center;
margin-bottom: 60px;
animation: fadeInUp 1s ease-out;
}
.secRoyalties .header h1 {
font-size: 60px;
font-weight: 700;
margin-bottom: 20px;
background: linear-gradient(135deg, #a855f7, #ec4899, #06b6d4);
background: -webkit-linear-gradient(#fbfbfb, #9e67e5, #c192ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
/* animation: glow 3s ease-in-out infinite alternate; */
}
.secRoyalties .header p {
/* font-size: 1.2rem; */
color: #94a3b8;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.secRoyalties .cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.secRoyalties .card {
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 20px;
padding: 30px;
backdrop-filter: blur(10px);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
animation: slideInUp 0.8s ease-out;
}
.secRoyalties .card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(135deg, #8a57ff, #9f54f5);
transform: scaleX(0);
transition: transform 0.4s ease;
transform-origin: left;
}
.secRoyalties .card:hover {
transform: translateY(-10px);
border-color: rgba(168, 85, 247, 0.5);
box-shadow:
0 20px 40px rgba(168, 85, 247, 0.2),
0 0 0 1px rgba(168, 85, 247, 0.1);
}
.secRoyalties .card:hover::before {
transform: scaleX(1);
}
.secRoyalties .card-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #8a57ff, #9f54f5);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: transform 0.3s ease;
}
.secRoyalties .card:hover .card-icon {
transform: rotate(5deg) scale(1.1);
}
.secRoyalties .card-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 15px;
color: #f1f5f9;
}
.secRoyalties .card-description {
color: #94a3b8;
margin-bottom: 25px;
line-height: 1.6;
}
.secRoyalties .features-list {
list-style: none;
margin-bottom: 30px;
}
.secRoyalties .features-list li {
display: flex;
align-items: center;
margin-bottom: 12px;
color: #cbd5e1;
opacity: 0;
animation: fadeInLeft 0.6s ease-out forwards;
}
.secRoyalties .features-list li:nth-child(1) {
animation-delay: 0.1s;
}
.secRoyalties .features-list li:nth-child(2) {
animation-delay: 0.2s;
}
.secRoyalties .features-list li:nth-child(3) {
animation-delay: 0.3s;
}
.secRoyalties .features-list li:nth-child(4) {
animation-delay: 0.4s;
}
.secRoyalties .features-list li:nth-child(5) {
animation-delay: 0.5s;
}
.secRoyalties .features-list li::before {
content: '✓';
width: 20px;
height: 20px;
background: linear-gradient(135deg, #10b981, #06b6d4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12px;
font-size: 12px;
font-weight: bold;
color: white;
}
.secRoyalties .cta-button {
width: 100%;
padding: 15px 30px;
background: linear-gradient(135deg, #8a57ff, #9f54f5);
border: none;
border-radius: 12px;
color: white;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.secRoyalties .cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.secRoyalties .cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(168, 85, 247, 0.4);
}
.secRoyalties .cta-button:hover::before {
left: 100%;
}
.secRoyalties .stats-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 50px;
animation: fadeInUp 1s ease-out 0.5s both;
}
.secRoyalties .stat-card {
background: rgba(15, 23, 42, 0.5);
border: 1px solid rgba(148, 163, 184, 0.1);
border-radius: 15px;
padding: 25px;
text-align: center;
backdrop-filter: blur(5px);
transition: transform 0.3s ease;
}
.secRoyalties .stat-card:hover {
transform: translateY(-5px);
}
.secRoyalties .stat-number {
font-size: 2.5rem;
font-weight: 700;
background: -webkit-linear-gradient(#fbfbfb, #9e67e5, #c192ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
}
.secRoyalties .stat-label {
color: #94a3b8;
font-size: 1rem;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes glow {
from {
text-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}
to {
text-shadow: 0 0 30px rgba(168, 85, 247, 0.8),
0 0 40px rgba(236, 72, 153, 0.3);
}
}
@media (max-width: 768px) {
.secRoyalties .header h1 {
font-size: 40px;
}
.secRoyalties .features-list {
text-align: left;
}
.secRoyalties .cards-grid {
grid-template-columns: 1fr;
}
.secRoyalties .container {
padding: 20px 15px;
}
}
.secRoyalties .floating-elements {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.secRoyalties .floating-circle {
position: absolute;
background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.1));
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.secRoyalties .floating-circle:nth-child(1) {
width: 100px;
height: 100px;
top: 20%;
left: 10%;
animation-delay: 0s;
}
.secRoyalties .floating-circle:nth-child(2) {
width: 150px;
height: 150px;
top: 60%;
right: 10%;
animation-delay: 2s;
}
.secRoyalties .floating-circle:nth-child(3) {
width: 80px;
height: 80px;
top: 40%;
left: 70%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(180deg);
}
}
/* secRoyalty */
/* new_musicSec */
.new_musicSec {
padding: 3rem 0;
position: relative;
}
.new_musicSec .upload-section {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.new_musicSec .section-header {
text-align: center;
margin-bottom: 3rem;
}
.new_musicSec .section-title {
font-size: 60px;
font-weight: bold;
margin-bottom: 1rem;
background: -webkit-linear-gradient(#fbfbfb, #9e67e5, #c192ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.new_musicSec .section-subtitle {
/* font-size: 1.2rem; */
color: #9CA3AF;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.new_musicSec .cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.new_musicSec .upload-card {
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 20px;
padding: 2rem;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.new_musicSec .upload-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(139, 92, 246, 0.05), transparent, rgba(59, 130, 246, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
}
.new_musicSec .upload-card:hover {
transform: translateY(-10px);
border-color: rgba(168, 85, 247, 0.5);
box-shadow: 0 20px 40px rgba(168, 85, 247, 0.2), 0 0 0 1px rgba(168, 85, 247, 0.1);
}
.new_musicSec .upload-card:hover::before {
opacity: 1;
}
.new_musicSec .card-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #8a57ff, #9f54f5);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
position: relative;
z-index: 2;
transition: all .4s ease-in-out;
}
.new_musicSec .upload-card:hover .card-icon {
transform: rotate(5deg) scale(1.1);
}
.new_musicSec .card-icon svg {
width: 30px;
height: 30px;
color: white;
}
.new_musicSec .card-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1rem;
color: #E5E7EB;
position: relative;
z-index: 2;
}
.new_musicSec .card-description {
color: #9CA3AF;
line-height: 1.6;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.new_musicSec .card-features {
list-style: none;
margin-bottom: 2rem;
position: relative;
z-index: 2;
}
.new_musicSec .card-features li {
color: #C7D2FE;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.new_musicSec .card-features li::before {
content: '✓';
color: #fff;
font-weight: bold;
background: linear-gradient(135deg, #10b981, #06b6d4);
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
}
.new_musicSec .upload-btn {
background: linear-gradient(135deg, #8a57ff, #9f54f5);
border: none;
border-radius: 12px;
padding: 1rem 2rem;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
font-size: 1rem;
position: relative;
z-index: 2;
overflow: hidden;
}
.new_musicSec .upload-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}
.new_musicSec .upload-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
}
.new_musicSec .upload-btn:hover::before {
left: 100%;
}
/* Floating vectors */
.new_musicSec .floating-vector {
position: absolute;
opacity: 0.1;
animation: float 6s ease-in-out infinite;
}
.new_musicSec .vector-1 {
top: 10%;
left: 5%;
font-size: 3rem;
animation-delay: 0s;
}
.new_musicSec .vector-2 {
top: 20%;
right: 10%;
font-size: 2rem;
animation-delay: 2s;
}
.new_musicSec .vector-3 {
bottom: 20%;
left: 8%;
font-size: 2.5rem;
animation-delay: 4s;
}
.new_musicSec .vector-4 {
bottom: 10%;
right: 5%;
font-size: 3.5rem;
animation-delay: 1s;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
/* Responsive Design */
@media (max-width: 768px) {
.new_musicSec .section-title {
font-size: 2rem;
}
.new_musicSec .cards-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.new_musicSec .upload-card {
padding: 1.5rem;
}
.new_musicSec .floating-vector {
display: none;
}
}
/* Special effects */
.new_musicSec .music-wave {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
opacity: 0.05;
z-index: 1;
}
.new_musicSec .wave-bar {
width: 4px;
height: 100%;
background: linear-gradient(to top, #8B5CF6, #3B82F6);
margin: 0 2px;
border-radius: 2px;
animation: wave 1.5s ease-in-out infinite;
display: inline-block;
}
.new_musicSec .wave-bar:nth-child(2) { animation-delay: 0.1s; }
.new_musicSec .wave-bar:nth-child(3) { animation-delay: 0.2s; }
.new_musicSec .wave-bar:nth-child(4) { animation-delay: 0.3s; }
.new_musicSec .wave-bar:nth-child(5) { animation-delay: 0.4s; }
.new_musicSec .wave-bar:nth-child(6) { animation-delay: 0.5s; }
@keyframes wave {
0%, 100% { transform: scaleY(0.3); }
50% { transform: scaleY(1); }
}
/* new_musicSec */
/* Main page content */
.parent_modalForm .main-content {
text-align: center;
color: white;
z-index: 1;
}
.parent_modalForm .main-title {
font-size: 3rem;
font-weight: bold;
margin-bottom: 20px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.parent_modalForm .main-subtitle {
font-size: 1.2rem;
margin-bottom: 40px;
opacity: 0.9;
}
.open-popup-btn {
padding: 10px 30px;
background: rgba(255, 255, 255, 0.2);
border: 2px solid #9469ca;
background: linear-gradient(135deg, #452d64, #120b28, #1d0c2e);
border-radius: 50px;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
animation: pulse 2s infinite;;
}
.open-popup-btn:hover {
background: white;
color: #000000;
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* Modal Overlay */
.parent_modalForm .modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(5px);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.parent_modalForm .modal-overlay.active {
opacity: 1;
visibility: visible;
}
/* Animated background particles for modal */
.parent_modalForm .modal-particles {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.parent_modalForm .particle {
position: absolute;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}
.parent_modalForm .particle:nth-child(1) {
width: 80px;
height: 80px;
left: 10%;
animation-delay: 0s;
}
.parent_modalForm .particle:nth-child(2) {
width: 60px;
height: 60px;
left: 20%;
animation-delay: 2s;
}
.parent_modalForm .particle:nth-child(3) {
width: 40px;
height: 40px;
left: 60%;
animation-delay: 1s;
}
.parent_modalForm .particle:nth-child(4) {
width: 100px;
height: 100px;
left: 80%;
animation-delay: 3s;
}
.parent_modalForm .particle:nth-child(5) {
width: 50px;
height: 50px;
left: 70%;
animation-delay: 1.5s;
}
@keyframes float {
0%,
100% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% { opacity: 1; }
90% { opacity: 1; }
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
/* Modal Container */
.parent_modalForm .modal-container {
display: flex;
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
overflow: hidden;
width: 900px;
max-width: 90vw;
min-height: 500px;
transform: scale(0.7) translateY(100px);
opacity: 0;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.parent_modalForm .modal-overlay.active .modal-container {
transform: scale(1) translateY(0);
opacity: 1;
}
/* Close button */
.parent_modalForm .close-btn {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
background: rgba(0, 0, 0, 0.1);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #666;
transition: all 0.3s ease;
z-index: 10;
}
.parent_modalForm .close-btn:hover {
background: rgba(255, 0, 0, 0.1);
color: #ff4757;
transform: rotate(90deg);
}
.parent_modalForm .left-panel {
background: linear-gradient(135deg, #2d1b69 0%, #11998e 100%);
background: linear-gradient(135deg, #4d287a, #21124e, #531b89);
padding: 40px;
color: white;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.parent_modalForm .left-panel::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 50px 50px;
animation: drift 20s linear infinite;
}
@keyframes drift {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.parent_modalForm .logo {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 20px;
letter-spacing: -2px;
animation: glow 2s ease-in-out infinite alternate;
z-index: 2;
}
@keyframes glow {
from { text-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
to { text-shadow: 0 0 30px rgba(255, 255, 255, 0.8); }
}
.parent_modalForm .tagline {
font-size: 1.1rem;
text-align: center;
opacity: 0.9;
margin-bottom: 30px;
z-index: 2;
}
.parent_modalForm .platform-icons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
z-index: 2;
}
.parent_modalForm .icon {
width: 60px;
height: 60px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
animation: iconFloat 3s ease-in-out infinite;
}
.parent_modalForm .icon:nth-child(1) { background: linear-gradient(45deg, #ffffff, #ffffff); animation-delay: 0s; }
.parent_modalForm .icon:nth-child(2) { background: linear-gradient(45deg, #ffffff, #ffffff); animation-delay: 0.2s; }
.parent_modalForm .icon:nth-child(3) { background: linear-gradient(45deg, #ffffff, #ffffff); animation-delay: 0.4s; }
.parent_modalForm .icon:nth-child(4) { background: linear-gradient(45deg, #ffffff, #ffffff); animation-delay: 0.6s; }
.parent_modalForm .icon:nth-child(5) { background: linear-gradient(45deg, #ffffff, #ffffff); animation-delay: 0.8s; }
.parent_modalForm .icon:nth-child(6) { background: linear-gradient(45deg, #ffffff, #ffffff); animation-delay: 1s; }
@keyframes iconFloat {
0%,100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.parent_modalForm .icon:hover {
transform: scale(1.1) translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.parent_modalForm .right-panel {
padding: 40px;
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
}
.parent_modalForm .form-header {
text-align: center;
margin-bottom: 30px;
}
.parent_modalForm .form-title {
font-size: 2rem;
font-weight: bold;
color: #2c3e50;
margin-bottom: 10px;
animation: fadeInDown 0.8s ease-out 0.5s both;
}
.parent_modalForm .form-subtitle {
color: #7f8c8d;
animation: fadeInDown 0.8s ease-out 0.7s both;
}
.parent_modalForm .form-subtitle a {
color: #667eea;
text-decoration: none;
font-weight: 500;
}
.parent_modalForm .form-group {
/* margin-bottom: 20px; */
animation: fadeInUp 0.8s ease-out both;
}
.parent_modalForm .form-group:nth-child(3) { animation-delay: 0.6s; }
.parent_modalForm .form-group:nth-child(4) { animation-delay: 0.7s; }
.parent_modalForm .form-group:nth-child(5) { animation-delay: 0.8s; }
@keyframes fadeInDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.parent_modalForm .form-input {
width: 100%;
padding: 15px 20px;
border: 2px solid #e1e8ed;
border-radius: 10px;
font-size: 16px;
transition: all 0.3s ease;
background: #f8f9fa;
}
.parent_modalForm .form-input:focus {
outline: none;
border-color: #667eea;
background: white;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
transform: translateY(-2px);
}
.parent_modalForm .form-input::placeholder{
color: #5a6c7d;
}
.parent_modalForm .checkbox-group {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.parent_modalForm .checkbox {
width: 18px;
height: 18px;
accent-color: #667eea;
}
.parent_modalForm .checkbox-label {
font-size: 14px;
color: #5a6c7d;
line-height: 1.2;
}
.parent_modalForm .checkbox-label a {
color: #667eea;
text-decoration: none;
}
.parent_modalForm .submit-btn {
width: 100%;
padding: 15px;
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
background: linear-gradient(135deg, #452d64, #120b28, #1d0c2e);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
animation: fadeInUp 0.8s ease-out 0.9s both;
}
.parent_modalForm .submit-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.parent_modalForm .submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}
.parent_modalForm .submit-btn:hover::before {
left: 100%;
}
.parent_modalForm .divider {
text-align: center;
margin: 20px 0;
color: #bdc3c7;
position: relative;
animation: fadeInUp 0.8s ease-out 1s both;
}
.parent_modalForm .divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e1e8ed;
}
.parent_modalForm .divider span {
background: white;
padding: 0 15px;
}
.parent_modalForm .google-btn {
width: 100%;
padding: 15px;
border: 2px solid #e1e8ed;
border-radius: 10px;
background: white;
color: #5a6c7d;
font-size: 16px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
animation: fadeInUp 0.8s ease-out 1.1s both;
}
.parent_modalForm .google-btn:hover {
border-color: #667eea;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.parent_modalForm .google-icon {
width: 20px;
height: 20px;
background: url('data:image/svg+xml,') no-repeat center;
background-size: contain;
}
.parent_modalForm .privacy-text {
font-size: 12px;
color: #95a5a6;
text-align: center;
margin-top: 15px;
line-height: 1.4;
animation: fadeInUp 0.8s ease-out 1.2s both;
}
/* Responsive design */
@media (max-width: 768px) {
.parent_modalForm .modal-container {
flex-direction: column;
width: 95vw;
max-height: 90vh;
overflow-y: auto;
}
.parent_modalForm .left-panel,
.parent_modalForm .right-panel {
width: 100%;
}
.parent_modalForm .left-panel {
padding: 30px;
min-height: 200px;
}
.parent_modalForm .right-panel {
padding: 30px;
}
.parent_modalForm .platform-icons {
grid-template-columns: repeat(6, 1fr);
}
.parent_modalForm .icon {
width: 40px;
height: 40px;
font-size: 12px;
}
.parent_modalForm .main-title {
font-size: 2rem;
}
}
/* Pulse animation for the open button */
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
/* artist-portal css */
.secArtist_portal {
position: relative;
}
.secArtist_portal .hero {
text-align: center;
margin-bottom: 50px;
}
.secArtist_portal .hero h2 {
font-size: 45px;
margin-bottom: 15px;
font-weight: 700;
color: white;
}
.secArtist_portal .hero p {
/* font-size: 1.1rem; */
color: #ccc;
max-width: 650px;
margin: 0 auto;
}
.secArtist_portal .features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 30px;
margin-top: 50px;
}
.secArtist_portal .feature-card {
background: rgba(15, 23, 42, 0.7);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 12px;
padding: 25px;
transition: 0.4s ease-in-out;
margin: 10px 0;
}
.secArtist_portal .feature-card:hover {
transform: translateY(-5px);
background-color: #120b28;
border-color: #ad99ca;
color: #ffffff;
box-shadow: rgba(248, 248, 248, 0.2) 0px 2px 8px 0px;
}
.secArtist_portal .feature-icon lord-icon {
width: 70px;
height: 70px;
background-color: #f3f3f3;
border-radius: 15px;
margin-bottom: 10px;
}
.secArtist_portal .feature-card h3 {
color: #ad99ca;
font-size: 26px;
font-weight: 700;
margin-bottom: 10px;
height: 60px;
}
.secArtist_portal .feature-card p {
color: #ffffff;
/* font-size: 0.95rem; */
height: 110px;
}
/* .secArtist_portal .feature-card:hover p {
color: #aaa;
} */
.secArtist_portal .cta {
text-align: center;
margin: 60px 0;
}
.secArtist_portal .cta a {
background: linear-gradient(135deg, #452d64, #21183c, #321a4a);
color: white;
padding: 15px 30px;
font-size: 1rem;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: 0.4s ease-in-out;
display: inline-block;
}
.secArtist_portal .cta a:hover {
/* background: #3d17a7; */
transform: translateY(-4px);
box-shadow: rgba(224, 224, 224, 0.2) 0px 2px 8px 0px;
}
.faq-content .container {
max-width: 900px;
margin: 0 auto;
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease-out 0.3s forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.faq-content .header {
text-align: center;
margin-bottom: 50px;
color: white;
}
.faq-content .header h1 {
font-size: 3.5em;
font-weight: 800;
margin-bottom: 15px;
background: linear-gradient(135deg, #ffffff, #e0e7ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
opacity: 0;
animation: slideInDown 1s ease-out 0.5s forwards;
}
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.faq-content .header p {
font-size: 1.3em;
opacity: 0.9;
margin-bottom: 30px;
opacity: 0;
animation: slideInDown 1s ease-out 0.7s forwards;
}
.faq-content .music-icon {
width: 80px;
height: 80px;
margin: 0 auto 20px;
animation: float 3s ease-in-out infinite;
opacity: 0;
animation: float 3s ease-in-out infinite, fadeIn 1s ease-out 0.9s forwards;
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-20px);
}
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.faq-content .faq-container {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(20px);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
overflow: hidden;
box-shadow: 0 32px 64px rgba(0, 0, 0, 0.3);
}
.faq-content .faq-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
opacity: 0;
transform: translateX(-30px);
animation: slideInRight 0.6s ease-out forwards;
}
.faq-content .faq-item:nth-child(1) {
animation-delay: 0.8s;
}
@keyframes slideInRight {
to {
opacity: 1;
transform: translateX(0);
}
}
.faq-content .faq-item:last-child {
border-bottom: none;
}
.faq-content .faq-item:hover {
background: rgba(255, 255, 255, 0.05);
}
.faq-content .faq-question {
padding: 30px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
color: white;
font-size: 1.2em;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.faq-content .faq-question::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}
.faq-content .faq-question:hover::before {
left: 100%;
}
.faq-content .question-text {
flex: 1;
padding-right: 20px;
}
.faq-content .expand-icon {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq-content .faq-item.active .expand-icon {
transform: rotate(45deg);
}
.faq-content .faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.4s ease;
background: rgba(0, 0, 0, 0.3);
}
.faq-content .faq-item.active .faq-answer {
max-height: 1000px;
}
.faq-content .answer-content {
padding: 30px;
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
font-size: 1.1em;
transform: translateY(-20px);
opacity: 0;
transition: all 0.4s ease 0.1s;
}
.faq-content .faq-item.active .answer-content {
transform: translateY(0);
opacity: 1;
}
.faq-content .highlight {
color: #60a5fa;
font-weight: 600;
}
.faq-content .warning-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
padding: 8px 16px;
border-radius: 50px;
font-size: 0.9em;
font-weight: 600;
margin: 15px 0;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.8;
}
}
.faq-content .info-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
padding: 8px 16px;
border-radius: 50px;
font-size: 0.9em;
font-weight: 600;
margin: 15px 0;
}
.faq-content .tips-list {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 20px;
margin: 20px 0;
border-left: 4px solid #10b981;
}
.faq-content .tips-list h4 {
color: #10b981;
margin-bottom: 15px;
font-size: 1.1em;
}
.faq-content .tips-list ul {
list-style: none;
padding: 0;
}
.faq-content .tips-list li {
padding: 8px 0;
position: relative;
padding-left: 25px;
}
.faq-content .tips-list li::before {
content: '✓';
position: absolute;
left: 0;
color: #10b981;
font-weight: bold;
}
.faq-content .floating-elements {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
}
.faq-content .floating-circle {
position: absolute;
border-radius: 50%;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(59, 130, 246, 0.3));
animation: floatRandom 20s ease-in-out infinite;
}
.faq-content .floating-circle:nth-child(1) {
width: 100px;
height: 100px;
top: 10%;
left: 10%;
animation-delay: 0s;
}
.faq-content .floating-circle:nth-child(2) {
width: 60px;
height: 60px;
top: 60%;
right: 10%;
animation-delay: -5s;
}
.faq-content .floating-circle:nth-child(3) {
width: 80px;
height: 80px;
bottom: 20%;
left: 20%;
animation-delay: -10s;
}
@keyframes floatRandom {
0%,
100% {
transform: translate(0, 0) rotate(0deg);
}
25% {
transform: translate(30px, -30px) rotate(90deg);
}
50% {
transform: translate(-20px, 20px) rotate(180deg);
}
75% {
transform: translate(20px, -10px) rotate(270deg);
}
}
@media (max-width: 768px) {
.faq-content .container {
padding: 0 10px;
}
.faq-content .header h1 {
font-size: 2.5em;
}
.faq-content .faq-question {
padding: 20px;
font-size: 1.1em;
}
.faq-content .answer-content {
padding: 20px;
font-size: 1em;
}
}
@media (max-width:476px) {
.faq-content .question-text {
padding-right: 0px;
}
.disclaimer-content {
text-align: center !important;
}
.disclaimer-container {
width: auto !important;
}
}
.disclaimer-container {
/* max-width: 800px; */
width: 100%;
/* background: linear-gradient(135deg, rgba(26, 26, 46, 0.9) 0%, rgba(22, 33, 62, 0.9) 50%, rgba(15, 52, 96, 0.9) 100%); */
background-color: #120b28;
border: 2px solid #896cb3;
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(147, 51, 234, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
transition: all .4s ease-in-out;
animation: slideInUp 0.8s ease-out;
}
.disclaimer-container:hover {
transform: translateY(-5px);
background-color: #120b28;
box-shadow: rgba(248, 248, 248, 0.2) 0px 2px 8px 0px;
}
.disclaimer-container::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.1), transparent);
animation: shimmer 3s infinite;
}
.disclaimer-header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
animation: fadeInLeft 1s ease-out 0.2s both;
}
.disclaimer-header .dis_icon lord-icon {
width: 70px;
height: 70px;
background-color: #f3f3f3;
border-radius: 15px;
margin-bottom: 10px;
}
.warning-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
animation: pulse 2s infinite;
box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
}
.warning-icon::before {
content: '⚠';
color: white;
font-size: 24px;
font-weight: bold;
}
.disclaimer-title {
color: #ffffff;
font-size: 28px;
font-weight: bold;
background: linear-gradient(135deg, #896cb3 0%, #896cb3 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 10px rgba(147, 51, 234, 0.3);
}
.disclaimer-content {
color: #cbd5e1;
font-size: 16px;
line-height: 1.8;
text-align: justify;
animation: fadeInUp 1s ease-out 0.4s both;
position: relative;
}
.disclaimer-content p {
color: white;
transition: all .4s ease-in-out;
}
.disclaimer-container:hover p {
color: white;
}
.highlight-text {
color: #896cb3;
font-weight: 600;
background: linear-gradient(135deg, #9333ea 0%, #a855f7 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
.disclaimer-footer {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(147, 51, 234, 0.3);
animation: fadeInUp 1s ease-out 0.6s both;
}
.compliance-badge {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, rgba(147, 51, 234, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%);
border: 1px solid rgba(147, 51, 234, 0.4);
border-radius: 50px;
padding: 8px 16px;
color: #a855f7;
font-size: 14px;
font-weight: 500;
animation: float 3s ease-in-out infinite;
}
.compliance-badge::before {
content: '✓';
margin-right: 8px;
color: #22c55e;
font-weight: bold;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
box-shadow: 0 0 20px rgba(147, 51, 234, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 30px rgba(147, 51, 234, 0.5);
}
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
}
@media (max-width: 768px) {
.disclaimer-container {
padding: 30px 20px;
margin: 10px;
}
.disclaimer-title {
font-size: 24px;
}
.disclaimer-content {
font-size: 15px;
}
.warning-icon {
width: 40px;
height: 40px;
margin-right: 15px;
}
.warning-icon::before {
font-size: 20px;
}
}
/* artist-portal css */
/* blog-detail */
.blog-detail {
position: relative;
}
.blog-detail .blog-hero {
text-align: center;
}
.blog-detail .blog-hero img {
width: 100%;
max-height: 400px;
object-fit: cover;
border-radius: 15px;
margin-bottom: 20px;
}
.blog-detail h1 {
font-size: 42px;
color: #fff;
margin-bottom: 10px;
font-weight: 700;
max-width: 700px;
margin: 0 auto;
}
.blog-detail .blog-meta {
color: #ffffff;
/* font-size: 0.9rem; */
margin-bottom: 40px;
}
.blog-detail .blog-content h2 {
font-size: 30px;
color: #896cb3;
margin-top: 30px;
font-weight: 700;
}
.blog-detail .blog-content p {
color: #ffffff;
margin: 15px 0;
}
.blog-detail .blog-content ul {
padding-left: 20px;
margin: 20px 0;
}
.blog-detail .blog-content ul li {
margin-bottom: 10px;
}
.blog-detail .back-link {
margin-top: 50px;
display: inline-block;
color: #7166ee;
text-decoration: none;
font-weight: bold;
}
.blog-detail .back-link:hover {
text-decoration: underline;
}
/* blog-detail */
/* secArtist_portal_blog */
.secArtist_portal_blog .hero {
max-width: 500px;
margin: 0 auto;
}
.secArtist_portal_blog .hero h2 {
color: white;
font-weight: 700;
font-size: 45px
}
.secArtist_portal_blog {
position: relative;
}
.secArtist_portal_blog .blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.secArtist_portal_blog .blog-card {
background: #120b28;
border-radius: 15px;
border: 2px solid #654e85;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease-in-out;
}
.secArtist_portal_blog .blog-card:hover {
transform: translateY(-5px);
box-shadow: rgba(248, 248, 248, 0.2) 0px 2px 8px 0px;
}
.secArtist_portal_blog .blog-img {
width: 100%;
height: 200px;
object-fit: cover;
}
.secArtist_portal_blog .blog-content {
padding: 20px;
}
.secArtist_portal_blog .blog-content h3 {
font-size: 24px;
margin-bottom: 10px;
color: #ffffff;
font-weight: 600;
}
.secArtist_portal_blog .blog-content p {
font-size: 0.95rem;
color: #b6b5b5;
}
.secArtist_portal_blog .read-more {
display: inline-block;
margin-top: 10px;
font-weight: 600;
color: #7166ee;
text-decoration: none;
}
.secArtist_portal_blog .read-more:hover {
text-decoration: underline;
}
.secArtist_portal_blog .btn-primary {
background: #7166ee;
color: #fff;
padding: 12px 24px;
border-radius: 30px;
font-weight: bold;
text-decoration: none;
transition: background 0.3s;
}
.secArtist_portal_blog .btn-primary:hover {
background: #5a52d4;
}
/* secArtist_portal_blog */
/*========== Artists Single Page CSS Start ==========*/
.artists-banner {
position: relative;
padding: 120px 0;
text-align: center;
}
.artists-banner .album-image {
width: 100%;
position: relative;
height: 585px;
border-radius: 20px 20px 0 0;
overflow: hidden;
}
.artists-banner .album-image:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: linear-gradient(to top, #2f3673, transparent);
}
.artists-banner .h1-title {
margin-top: -40px;
}
.artists-details {
position: relative;
padding: 0 0 120px;
overflow: hidden;
}
.artists-details:before {
content: "♫";
display: block;
position: absolute;
top: 50%;
transform: translate(0, -50%);
right: -300px;
font-size: 70vw;
color: var(--primary-color);
opacity: 0.1;
}
.artists-img {
position: relative;
height: 600px;
border-radius: 20px;
overflow: hidden;
margin-bottom: 30px;
}
.artists-details .music-info {
padding: 0 15px;
}
.album-image .back-img {
background-position: top center;
}
.artists-tracklist {
margin-left: 50px;
}
.about-album {
margin-top: 40px;
}
.artists-tracklist .h3-title {
text-transform: capitalize;
font-family: var(--body-font);
}
.artists-tracklist li {
display: flex;
align-items: center;
justify-content: space-between;
}
.artists-songs {
margin-bottom: 0;
font-size: 20px;
color: var(--white-color);
font-family: var(--body-font);
}
.artists-tracklist .music-controls {
margin: 0;
padding: 0;
width: auto;
}
.about-album li {
display: block;
margin-bottom: 5px;
}
.about-album li strong {
color: var(--primary-color);
}
/*========== Artists Single Page CSS End ==========*/
/*========== Events Page CSS Start ==========*/
section.events-inner-section {
position: relative;
padding: 120px 0;
}
.events-inner-section .h1-title {
text-transform: uppercase;
}
.event-banner {
height: 500px;
width: 100%;
overflow: hidden;
border-radius: 20px;
margin: 30px 0;
}
.details-box {
display: block;
padding: 30px;
margin-top: 30px;
box-shadow: inset 10px 10px 19px #282e61, inset -10px -10px 19px #363e83;
border-radius: 20px;
}
.details-box li {
font-size: 16px;
line-height: 36px;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.details-box li:last-child {
border-bottom: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.events-inner-section .h3-title {
text-transform: capitalize;
}
.about-tour {
margin-top: 30px;
overflow: hidden;
}
.about-tour p {
line-height: 36px;
}
.share-via ul {
justify-content: space-evenly;
}
/*========== Events Page CSS End ==========*/
/* signup-app */
/* Animated background dots */
.signup-app .bg-dots {
position: absolute;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle at 20px 80px, rgba(255, 255, 255, 0.15) 2px, transparent 2px),
radial-gradient(circle at 80px 20px, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
radial-gradient(circle at 40px 40px, rgba(255, 255, 255, 0.08) 1.5px, transparent 1.5px),
radial-gradient(circle at 90px 70px, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
radial-gradient(circle at 15px 50px, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 100px 100px;
animation: drift 15s linear infinite;
}
.signup-app .bg-dots {
animation-name: drift;
}
@keyframes drift {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100px, -100px);
}
}
/* Crowd silhouette */
.signup-app .crowd-silhouette {
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 300px;
background: url('data:image/svg+xml,') no-repeat center bottom;
background-size: cover;
}
.signup-app .container {
display: flex;
/* background: rgba(255, 255, 255, 0.98); */
backdrop-filter: blur(20px);
border-radius: 24px;
/* box-shadow: 0 32px 64px rgba(0, 0, 0, 0.2); */
/* overflow: hidden; */
/* max-width: 1000px; */
width: 100%;
min-height: 600px;
margin: 10px auto;
position: relative;
z-index: 10;
}
.signup-app .left-section {
flex: 1.2;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #342052 75%, #221928 100%);
padding: 60px 50px;
border-radius: 20px 0 0px 20px;
display: flex;
flex-direction: column;
justify-content: center;
color: white;
position: relative;
overflow: hidden;
}
.signup-app .left-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
animation: float 20s linear infinite;
}
.signup-app .left-section .logo {
font-size: 55px;
font-weight: 900;
margin-bottom: 30px;
/* letter-spacing: -2px; */
position: relative;
z-index: 2;
}
.signup-app .left-section .tagline {
font-size: 22px;
margin-bottom: 40px;
line-height: 1.4;
position: relative;
z-index: 2;
}
.signup-app .left-section .tagline .free-trial {
text-decoration: underline;
font-style: italic;
}
.signup-app .left-section .music-platforms {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 40px;
position: relative;
z-index: 2;
}
.signup-app .left-section .music-platforms .platform-logo {
width: 30%;
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
backdrop-filter: blur(10px);
}
@keyframes float {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100px, -100px);
}
}
.signup-app .right-section {
flex: 1;
padding: 60px 50px;
border-radius: 0px 20px 20px 0px;
background: white;
}
.signup-app .right-section .form-header {
margin-bottom: 40px;
}
.signup-app .right-section .form-header h2 {
font-size: 32px;
color: #1a1a2e;
margin-bottom: 10px;
font-weight: 700;
}
.signup-app .right-section .form-header p {
color: #666;
font-size: 16px;
}
.signup-app .right-section .form-header p a {
color: #7209b7;
text-decoration: none;
font-weight: 600;
}
.signup-app .right-section .form-group {
margin-bottom: 24px;
}
.signup-app .right-section .form-group .form-input {
width: 100%;
padding: 18px 20px;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s ease;
background: #f9fafb;
color: #1f2937;
}
.signup-app .right-section .form-group .form-input:focus {
outline: none;
border-color: #7209b7;
background: white;
box-shadow: 0 0 0 3px rgba(114, 9, 183, 0.1);
}
.signup-app .right-section .form-group .form-input::placeholder {
color: #9ca3af;
}
.signup-app .right-section .checkbox-group {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
font-size: 14px;
color: #4b5563;
line-height: 1.5;
}
.signup-app .right-section .checkbox-group input[type="checkbox"] {
margin-right: 12px;
margin-top: 3px;
transform: scale(1.3);
accent-color: #7209b7;
}
.signup-app .right-section .checkbox-group label a {
color: #7209b7;
text-decoration: none;
font-weight: 500;
}
.signup-app .right-section .submit-btn {
width: 100%;
padding: 18px;
background: linear-gradient(135deg, #7209b7 0%, #533483 100%);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 30px;
}
.sign_up_btn {
background-color: #580dad;
color: white;
transition: all .4s ease-in-out;
display: block;
padding: 12px 12px;
font-weight: 600;
border-radius: 12px;
width: 100%;
text-align: center;
}
.sign_up_btn:hover {
background-color: #120b28;
color: white;
}
.signup-app .right-section .submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(114, 9, 183, 0.4);
}
.signup-app .right-section .submit-btn:active {
transform: translateY(0);
}
.signup-app .right-section .divider {
text-align: center;
margin: 30px 0;
color: #9ca3af;
position: relative;
font-size: 14px;
font-weight: 500;
}
.signup-app .right-section .divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #e5e7eb;
}
.signup-app .right-section .divider span {
background: white;
padding: 0 24px;
position: relative;
}
.signup-app .right-section .google-btn {
width: 100%;
padding: 18px;
background: white;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: #374151;
font-weight: 600;
}
.signup-app .right-section .google-btn:hover {
border-color: #4285f4;
box-shadow: 0 8px 20px rgba(66, 133, 244, 0.15);
transform: translateY(-1px);
}
.signup-app .right-section .google-btn .google-icon {
margin-right: 12px;
width: 20px;
height: 20px;
}
.signup-app .right-section .disclaimer {
margin-top: 30px;
font-size: 12px;
color: #9ca3af;
text-align: center;
line-height: 1.4;
}
@media (max-width: 768px) {
.signup-app .container {
flex-direction: column;
/* margin: 10px; */
border-radius: 16px;
}
.signup-app .container .left-section,
.signup-app .container .right-section {
padding: 40px 30px;
}
.signup-app .container .left-section .logo {
font-size: 48px;
}
.signup-app .container .left-section .tagline {
font-size: 18px;
}
.signup-app .container .left-section .music-platforms {
justify-content: center;
}
}
/* signup-app */
/*========== Gallery Page CSS Start ==========*/
.inner-gallery-section {
padding-top: 0;
}
.inner-gallery-section .btn-part {
margin-top: 80px;
margin-bottom: 30px;
}
/*========== Gallery Page CSS End ==========*/
/* parent_majorPowel */
.parent_majorPowel {
position: relative;
margin-top: 4rem;
}
.parent_majorPowel .about-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 15px;
color: white;
}
.parent_majorPowel .about-title {
font-size: clamp(4rem, 8vw, 8rem);
font-weight: 900;
line-height: 1;
margin-bottom: 60px;
letter-spacing: -2px;
background: -webkit-linear-gradient(#fbfbfb, #9e67e5, #c192ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.parent_majorPowel .content-grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 40px;
align-items: start;
}
.parent_majorPowel .left-content {
display: flex;
flex-direction: column;
gap: 30px;
}
.parent_majorPowel .service-item h3 {
font-size: 32px;
font-weight: 600;
margin-bottom: 8px;
/* color: #ffffff; */
}
.parent_majorPowel .powel_gif img {
position: absolute;
right: 100px;
width: 20%;
top: -20px;
filter: hue-rotate(45deg);
opacity: .6;
}
.parent_majorPowel .service-item p {
font-size: 0.95rem;
line-height: 1.6;
color: #ffffffeb;
}
.parent_majorPowel .main-images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
height: 500px;
}
.parent_majorPowel .image-large {
grid-row: 1 / 3;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.parent_majorPowel .image-small {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.parent_majorPowel .image-large img,
.parent_majorPowel .image-small img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.parent_majorPowel .image-large:hover img,
.parent_majorPowel .image-small:hover img {
transform: scale(1.05);
}
.parent_majorPowel .right-content {
padding-left: 20px;
}
.parent_majorPowel .philosophy-section h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 30px;
line-height: 1.2;
}
.parent_majorPowel .philosophy-text {
font-size: 1rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 25px;
}
.parent_majorPowel .corner-image {
width: 120px;
height: 80px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
margin-top: 20px;
}
.parent_majorPowel .corner-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1024px) {
.parent_majorPowel .content-grid {
grid-template-columns: 1fr;
gap: 50px;
}
.parent_majorPowel .main-images {
order: -1;
height: 400px;
}
.parent_majorPowel .right-content {
padding-left: 0;
}
}
@media (max-width: 768px) {
.parent_majorPowel .main-images {
grid-template-columns: 1fr;
height: auto;
}
.parent_majorPowel .image-large,
.parent_majorPowel .image-small {
height: 250px;
}
.parent_majorPowel .philosophy-section h2 {
font-size: 2rem;
}
}
/* parent_majorPowel */
/*========== Contact Us Page CSS Start ==========*/
.contact-banner {
background-image: url("/assets/images/aditya-chinchure.jpg");
background-size: cover;
padding: 0 !important;
background-position: center;
}
/* .contact-banner {
} */
.contact_child {
background-color: #000000ba;
padding: 7rem 0 5rem 0;
}
.contact-us-sec {
padding: 80px 0px;
position: relative;
z-index: 1;
}
.form-Cta-unique {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin: 0 0 3rem;
}
.form-Cta-unique lord-icon {
height: 55px;
width: 55px;
}
.forminer_CTA {
background-color: #2f367a;
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
border: none;
border-radius: 15px;
}
.forminer_CTA lord-icon {
background-color: #00cb84;
border-radius: 15px;
}
.forminer_CTA a {
color: white;
}
.forminner_Mailto {
background-color: #00b871;
text-decoration: none;
padding: 6px 12px;
display: flex;
align-items: center;
gap: 5px;
border: none;
border-radius: 15px;
}
.forminner_Mailto lord-icon {
background-color: #2f367a;
border-radius: 15px;
}
.forminner_Mailto a {
color: white;
}
.contact-form {
position: relative;
}
.contact-us-form {
position: relative;
z-index: 1;
padding-left: 70px;
}
.contact-us-form .h3-title {
margin-bottom: 20px;
}
.contact-map {
height: 550px;
padding: 30px;
}
.contact-map .map {
height: 100%;
width: 100%;
overflow: hidden;
border-radius: 20px;
}
.contact-map .map iframe {
width: 100%;
height: 100%;
filter: grayscale(1);
}
.link {
display: inline-flex;
flex-direction: column;
}
.contact-box a {
color: var(--white-color);
font-size: 16px;
line-height: 32px;
display: inline-block;
}
.contact-box a i {
margin-right: 5px;
}
.contact-box .h4-title {
font-weight: bold;
font-size: 20px;
line-height: 30px;
text-transform: capitalize;
}
.contact-box {
margin-bottom: 30px;
}
.contact-us-detail .row .col-lg-6:last-child {
padding-right: 0;
padding-top: 30px;
padding-left: 30px;
border-top: 1px solid rgb(255 255 255 / 35%);
border-left: 1px solid rgb(255 255 255 / 35%);
}
.contact-us-detail .row .col-lg-6:nth-child(2) {
padding-right: 0;
padding-left: 30px;
border-left: 1px solid rgb(255 255 255 / 35%);
}
.contact-us-detail .row .col-lg-6:nth-child(3) {
padding-left: 0;
padding-right: 30px;
padding-top: 30px;
border-top: 1px solid rgb(255 255 255 / 35%);
}
.contact-us-detail .row .col-lg-6:nth-child(1) {
padding-left: 0;
padding-right: 30px;
}
.contact-us-detail {
padding: 15px;
}
.contact-us-detail .row .col-lg-6:nth-child(3) .contact-box,
.contact-us-detail .row .col-lg-6:last-child .contact-box {
margin-bottom: 15px;
}
/*========== Contact Us Page CSS End ==========*/
/* Animated background particles */
.playlist_section .bg-particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.playlist_section .particle {
position: absolute;
width: 2px;
height: 2px;
background: #8a2be2;
border-radius: 50%;
animation: float 6s infinite ease-in-out;
opacity: 0.6;
}
@keyframes float {
0%,
100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.6;
}
33% {
transform: translateY(-20px) rotate(120deg);
opacity: 0.8;
}
66% {
transform: translateY(10px) rotate(240deg);
opacity: 0.4;
}
}
/* Progress Bar */
.playlist-card .progress-container {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
margin: 15px 0;
position: relative;
overflow: hidden;
}
.playlist-card .progress-bar {
width: 40%; /* Example value */
height: 100%;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 4px;
transition: width 0.3s ease;
}
/* Controls Row */
.playlist-card .playlist-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-top: 10px;
}
/* Control Buttons */
.playlist-card .control-btn {
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #333;
cursor: pointer;
transition: all 0.3s ease;
}
.playlist-card .control-btn:hover {
background: rgba(0, 0, 0, 0.2);
transform: scale(1.1);
}
.playlist-card .control-btn:active {
transform: scale(0.9);
}
.playlist_section .container {
position: relative;
z-index: 1;
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}
.playlist_section .header {
text-align: center;
margin-bottom: 50px;
animation: fadeInUp 1s ease-out;
}
.playlist_section .header h1 {
font-size: 3rem;
background: linear-gradient(45deg, #8a2be2, #9d4edd, #c77dff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
text-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
}
.playlist_section .header p {
color: #b19cd9;
font-size: 1.1rem;
opacity: 0.8;
}
.playlist_section .playlists-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.playlist_section .playlist-card {
background: linear-gradient(135deg, rgba(138, 43, 226, 0.1) 0%, rgba(75, 0, 130, 0.1) 100%);
border-radius: 20px;
padding: 0;
border: 1px solid rgba(138, 43, 226, 0.3);
backdrop-filter: blur(20px);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
animation: slideInUp 0.6s ease-out;
animation-fill-mode: both;
}
.playlist_section .playlist-card:nth-child(1) {
animation-delay: 0.1s;
}
.playlist_section .playlist-card:nth-child(2) {
animation-delay: 0.2s;
}
.playlist_section .playlist-card:nth-child(3) {
animation-delay: 0.3s;
}
.playlist_section .playlist-card:nth-child(4) {
animation-delay: 0.4s;
}
.playlist_section .playlist-card:nth-child(5) {
animation-delay: 0.5s;
}
.playlist_section .playlist-card:nth-child(6) {
animation-delay: 0.6s;
}
.playlist_section .playlist-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.6s ease;
}
.playlist_section .playlist-card:hover::before {
left: 100%;
}
.playlist_section .playlist-card:hover {
transform: translateY(-10px) scale(1.02);
border-color: rgba(138, 43, 226, 0.6);
box-shadow: 0 20px 40px rgba(138, 43, 226, 0.3);
}
.playlist_section .playlist-cover {
position: relative;
height: 200px;
background: linear-gradient(135deg, #4b0082, #8a2be2, #9d4edd);
border-radius: 20px 20px 0 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.playlist_section .playlist-cover::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.3;
animation: musicFloat 8s linear infinite;
}
@keyframes musicFloat {
0% {
transform: translateY(0px);
}
100% {
transform: translateY(-20px);
}
}
.playlist_section .playlist-icon {
font-size: 4rem;
z-index: 2;
position: relative;
animation: iconPulse 2s ease-in-out infinite;
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.5));
}
@keyframes iconPulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.playlist_section .playlist-info {
padding: 25px;
position: relative;
}
.playlist-info-top {
display: flex;
/* align-items: center; */
justify-content: space-between;
margin-bottom: 15px;
}
.playlist_section .music-visualizerDots {
background-color: #1d0c2e;
}
.playlist_section .dropdown_Musicplaylist a {
padding: 2px 8px;
font-size: 12px;
pointer-events:unset;
}
.playlist_section .Parent-visualizerDots:hover .dropdown_Musicplaylist {
top: 40px;
right: 35px;
}
.playlist_section .playlist-title {
font-size: 1.4rem;
font-weight: bold;
color: #ffffff;
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.playlist_section .playlist-stats {
color: #b19cd9;
font-size: 0.9rem;
margin-bottom: 20px;
opacity: 0.8;
}
.playlist_section .playlist-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.playlist_section .btn {
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
}
.playlist_section .btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transition: all 0.3s ease;
transform: translate(-50%, -50%);
}
.playlist_section .btn:hover::before {
width: 300px;
height: 300px;
}
.playlist_section .btn-primary {
background: linear-gradient(135deg, #8a2be2, #9d4edd);
color: white;
box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4);
}
.playlist_section .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(138, 43, 226, 0.6);
}
.playlist_section .btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #c77dff;
border: 1px solid rgba(199, 125, 255, 0.3);
}
.playlist_section .btn-secondary:hover {
background: rgba(199, 125, 255, 0.2);
border-color: rgba(199, 125, 255, 0.6);
transform: translateY(-2px);
}
.playlist_section .floating-player {
position: fixed;
bottom: 30px;
right: 30px;
background: linear-gradient(135deg, rgba(138, 43, 226, 0.9), rgba(75, 0, 130, 0.9));
border-radius: 60px;
padding: 15px 25px;
backdrop-filter: blur(20px);
border: 1px solid rgba(138, 43, 226, 0.5);
display: flex;
align-items: center;
gap: 15px;
animation: floatIn 0.8s ease-out 2s both;
box-shadow: 0 10px 30px rgba(138, 43, 226, 0.4);
}
.playlist_section .floating-player:hover {
transform: scale(1.05);
}
.playlist_section .now-playing {
color: white;
font-size: 0.9rem;
white-space: nowrap;
}
.playlist_section .play-pause-btn {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.playlist_section .play-pause-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.playlist_section .loading-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(138, 43, 226, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
border-radius: 20px;
backdrop-filter: blur(10px);
}
.playlist_section .loading-overlay.active {
opacity: 1;
visibility: visible;
}
.playlist_section .spinner {
width: 40px;
height: 40px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-top: 3px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes floatIn {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.playlist_section .container {
padding: 20px 15px;
}
.playlist_section .header h1 {
font-size: 2rem;
}
.playlist_section .playlists-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.playlist_section .floating-player {
bottom: 20px;
right: 20px;
padding: 12px 20px;
}
}
.song_list {
position: relative;
padding-bottom: 3rem;
}
.song_list .section-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid rgba(138, 43, 226, 0.3);
}
.song_list .Parent-visualizerDots:hover .dropdown_Musicplaylist {
top: -58px;
right: 15px;
}
.song_list .dropdown_Musicplaylist a {
padding: 0px 8px;
font-size: 12px;
}
.song_list .Parent-visualizerDots:hover .dropdown_Musicplaylist {
background-color: #403c44;
}
.song_list .music-visualizerDots {
background-color: #4f3c62;
}
.song_list .section-icon {
width: 90px;
height: 90px;
border-radius: 12px;
background: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
box-shadow: 0 8px 25px rgba(138, 43, 226, 0.4);
}
.song_list .playlist-icon img {
border-radius: 12px;
}
.song_list .section-title {
font-size: 45px;
/* font-size: 2.2em; */
font-weight: 700;
/* background: linear-gradient(135deg, #8a2be2, #da70d6); */
color: #9f54f5;
/* -webkit-background-clip: text; */
/* -webkit-text-fill-color: transparent; */
/* background-clip: text; */
}
.song_list .section-subtitle {
color: #b8b8b8;
font-size: 1rem;
margin-top: 5px;
}
.song_list .create-playlist-btn {
margin-left: auto;
padding: 12px 24px;
background: linear-gradient(135deg, #8a2be2, #9370db);
border: none;
border-radius: 25px;
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(138, 43, 226, 0.3);
}
.song_list .create-playlist-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(138, 43, 226, 0.5);
}
.song_list .playlists-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.song_list .playlist-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 20px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
}
.song_list .playlist-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(138, 43, 226, 0.1), transparent);
transition: left 0.5s ease;
}
.song_list .playlist-card:hover::before {
left: 100%;
}
.song_list .playlist-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(138, 43, 226, 0.3);
border-color: rgba(138, 43, 226, 0.4);
}
.song_list .playlist-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.song_list .playlist-icon {
width: 60px;
height: 60px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
position: relative;
z-index: 1;
}
.song_list .playlist-info h3 {
font-size: 1.4em;
font-weight: 600;
margin-bottom: 5px;
color: #ffffff;
}
.song_list .playlist-meta {
color: #b8b8b8;
font-size: 0.9em;
}
.song_list .playlist-actions {
display: flex;
align-items: center;
gap: 10px;
margin-top: 15px;
opacity: 0;
transform: translateY(10px);
transition: all 0.3s ease;
}
.song_list .playlist-card:hover .playlist-actions {
opacity: 1;
transform: translateY(0);
}
.song_list .action-btn {
padding: 8px 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
color: white;
border-radius: 20px;
font-size: 0.85em;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.song_list .action-btn:hover {
background: rgba(138, 43, 226, 0.3);
border-color: rgba(138, 43, 226, 0.5);
}
.song_list .quick-playlists {
margin-top: 40px;
}
.song_list .quick-playlists h3 {
/* font-size: 1.3em; */
margin-bottom: 20px;
/* color: #da70d6; */
color: #ffffff;
font-weight: 400;
}
.song_list .quick-playlist-list {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.song_list .quick-playlist-item {
padding: 10px 18px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 25px;
font-size: 0.9em;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(5px);
}
.song_list .quick-playlist-item:hover {
background: rgba(138, 43, 226, 0.2);
border-color: rgba(138, 43, 226, 0.4);
transform: scale(1.05);
}
.song_list .stats {
display: flex;
justify-content: space-between;
margin-top: 30px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
backdrop-filter: blur(10px);
}
.song_list .stat-item {
text-align: center;
}
.song_list .stat-number {
font-size: 1.8em;
font-weight: 700;
color: #9f54f5;
}
.song_list .stat-label {
color: #ffffff;
font-size: 0.9em;
margin-top: 5px;
}
@media (max-width: 768px) {
.song_list .playlists-grid {
grid-template-columns: 1fr;
}
.song_list .section-header {
flex-direction: column;
text-align: center;
}
.song_list .create-playlist-btn {
margin-left: 0;
}
.song_list .stats {
flex-direction: column;
gap: 20px;
}
}
/* User Portal Scoped Styles */
.user-portal .welcome-section {
/* background: rgba(255, 255, 255, 0.95); */
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
animation: slideUp 0.8s ease-out;
}
.user-portal .welcome-title {
font-size: 72px;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 1rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background: -webkit-linear-gradient(#747171, #9e67e5, #c192ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: flex;
/* justify-content: space-around; */
gap: 30px;
}
.user-portal .welcome-subtitle {
font-size: 1.1rem;
color: #ccc;
margin-bottom: 1.5rem;
}
.user-portal .user-Lord lord-icon {
display: block;
background-color: white;
height: 90px;
width: 90px;
border-radius: 12px;
}
.user-portal .stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-top: 1.5rem;
}
.user-portal .stat-card {
background: #120b28;
padding: 1.5rem;
border: 1px solid #452d64;
border-radius: 15px;
text-align: center;
color: white;
transition: 0.3s ease-in-out;
}
.user-portal .stat-card:hover {
transform: translateY(-5px);
background-color: #120b28;
box-shadow: rgba(248, 248, 248, 0.2) 0px 2px 8px 0px;
border-color: #764ba2;
}
.user-portal .stat-card:hover .stat-label {
color: white;
}
.user-portal .stat-number {
font-size: 2rem;
font-weight: bold;
color: #b39ad6;
margin-bottom: 0.5rem;
}
.user-portal .stat-label {
font-size: 0.9rem;
/* opacity: 0.9; */
color: white;
font-weight: 600;
transition: 0.3s ease-in-out;
}
/* Subscription Plans Section */
.user-portal .section {
/* background: rgba(255, 255, 255, 0.95); */
/* backdrop-filter: blur(10px); */
border-radius: 20px;
padding: 2rem;
margin-bottom: 2rem;
/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
animation: slideUp 0.8s ease-out;
}
.user-portal .section-title {
font-size: 55px;
font-weight: bold;
margin-bottom: 1rem;
color: #9f54f5;
position: relative;
padding-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 30px;
}
.user-portal .section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.user-portal .plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.user-portal .plan-card {
background: #16002d;
border: 3px solid #e1e8ed;
border-radius: 15px;
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.user-portal .plan-card.popular {
border-color: #9f54f5;
transform: scale(1.05);
}
.user-portal .plan-card.popular::before {
content: 'Most Popular';
position: absolute;
top: 0;
right: 0;
background: linear-gradient(135deg, #921aff 0%, #472866 100%);
color: white;
padding: 0.5rem 1rem;
font-size: 0.8rem;
font-weight: bold;
border-bottom-left-radius: 10px;
}
.user-portal .plan-card:hover {
border-color: #9f54f5;
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
transform: translateY(-5px);
}
.user-portal .plan-name {
font-size: 1.5rem;
font-weight: bold;
color: #ccc;
margin-bottom: 0.5rem;
}
.user-portal .plan-price {
font-size: 3rem;
font-weight: bold;
color: #9f54f5;
margin-bottom: 0.5rem;
}
.user-portal .plan-period {
color: #ccc;
margin-bottom: 1.5rem;
}
.user-portal .plan-features {
list-style: none;
margin-bottom: 2rem;
text-align: left;
}
.user-portal .plan-features li {
padding: 0.5rem 0;
position: relative;
padding-left: 1.5rem;
color: #ffffff;
}
.user-portal .plan-features li::before {
content: '✓';
position: absolute;
left: 0;
color: #9f54f5;
font-weight: bold;
}
.user-portal .plan-button {
width: 100%;
padding: 1rem;
border: none;
border-radius: 10px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.user-portal .plan-button.primary {
/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
background-color: #9f54f5;
color: white;
}
.user-portal .plan-button.secondary {
background: transparent;
color: white;
border: 2px solid #9f54f5;
}
.user-portal .plan-button:hover {
transform: translateY(-2px);
background-color: white;
color: black;
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}
/* Playlist Section */
.user-portal .playlist-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
}
.user-portal .playlist-card {
/* background: white; */
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out !important;
cursor: pointer;
}
.user-portal .playlist-card:hover {
/* transform: translateY(-5px) !important; */
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.user-portal .playlist-cover {
width: 100%;
height: 200px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-image: url("/assets/images/singWithMe/user_img1.jpeg");
background-size: cover;
background-repeat: no-repeat;
position: relative;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
}
.playlist-card_2 .playlist-cover {
background-image: url("/assets/images/singWithMe/user_img2.jpeg");
}
.playlist-card_3 .playlist-cover {
background-image: url("/assets/images/singWithMe/user_img3.jpeg");
}
.playlist-card_4 .playlist-cover {
background-image: url("/assets/images/singWithMe/user_img4.jpeg");
}
.playlist-card_5 .playlist-cover {
background-image: url("/assets/images/singWithMe/user_img5.png");
}
.playlist-card_6 .playlist-cover {
background-image: url("/assets/images/singWithMe/user_img6.png");
}
.user-portal .playlist-info {
padding: 1.5rem;
}
.user-portal .playlist-name {
font-size: 1.2rem;
font-weight: bold;
margin-bottom: 0.5rem;
color: #333;
}
.user-portal .playlist-details {
color: #666;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.user-portal .playlist-actions {
display: flex;
gap: 1rem;
}
.user-portal .action-btn {
padding: 0.5rem 1rem;
border: 1px solid #667eea;
background: transparent;
color: #667eea;
border-radius: 5px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.user-portal .action-btn:hover,
.user-portal .action-btn.active {
background: #667eea;
color: white;
}
.user-portal .create-playlist-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 1rem 2rem;
border-radius: 10px;
font-size: 1.1rem;
font-weight: bold;
cursor: pointer;
margin-bottom: 2rem;
transition: all 0.3s ease;
}
.user-portal .create-playlist-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
}
/* Favorites Section */
.user-portal .favorites-list {
display: grid;
gap: 1rem;
margin-top: 2rem;
}
.user-portal .favorite-item {
background: white;
border-radius: 10px;
padding: 1rem;
display: flex;
align-items: center;
gap: 1rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.user-portal .favorite-item:hover {
transform: translateX(5px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}
.user-portal .song-cover {
width: 60px;
height: 60px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
}
.user-portal .song-info {
flex: 1;
}
.user-portal .song-title {
font-weight: bold;
margin-bottom: 0.2rem;
}
.user-portal .song-artist {
color: #666;
font-size: 0.9rem;
}
.user-portal .song-actions {
display: flex;
gap: 0.5rem;
}
.user-portal .song-btn {
background: none;
border: none;
color: #667eea;
cursor: pointer;
font-size: 1.2rem;
padding: 0.5rem;
border-radius: 5px;
transition: all 0.3s ease;
}
.user-portal .song-btn:hover {
background: rgba(102, 126, 234, 0.1);
}
/* Animations */
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.user-portal .nav-links {
display: none;
}
/* .user-portal .container {
padding: 1rem;
} */
.user-portal .welcome-title {
font-size: 50px;
}
.user-portal .plans-grid {
grid-template-columns: 1fr;
}
.user-portal .playlist-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.user-portal .plan-card.popular {
transform: none;
}
}
/* Loading states */
.user-portal .loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(102, 126, 234, 0.3);
border-radius: 50%;
border-top-color: #667eea;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* contact us section */
.contact-wrapper {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border-radius: 25px;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
/* width: 100%; */
/* max-width: 1200px;
min-height: 700px; */
overflow: hidden;
/* Changed grid to flex */
/* display: flex;
flex-direction: column; Flex column layout */
position: relative;
}
.close-btn {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.9);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
color: #666;
transition: all 0.3s ease;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
}
.close-btn:hover {
background: #ff5757;
color: white;
transform: rotate(90deg);
}
/* Left Column - Images */
.image-section {
background: linear-gradient(45deg, #2c3e50, #3498db);
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
}
.image-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.image-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
}
.main-image {
width: 100%;
height: 300px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
.main-image::before {
content: '🏢';
font-size: 4rem;
margin-bottom: 10px;
animation: float 3s ease-in-out infinite;
}
.secondary-images {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
height: 200px;
}
.secondary-image {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.secondary-image:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.image-content {
position: absolute;
bottom: 30px;
left: 30px;
right: 30px;
text-align: center;
color: white;
}
.image-content h3 {
font-size: 1.8rem;
margin-bottom: 10px;
font-weight: 300;
}
.image-content p {
opacity: 0.9;
line-height: 1.6;
}
/* Right Column - Form */
.form-section {
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
}
.form-header {
margin-bottom: 40px;
}
.form-header h1 {
font-size: 48px;
color: #baa0dd;
margin-bottom: 10px;
font-weight: 700;
}
.form-header p {
color: #7f8c8d;
line-height: 1.6;
font-size: 1.1rem;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 25px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group {
position: relative;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: #2c3e50;
font-weight: 600;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 10px 20px;
border: 2px solid #ecf0f1;
border-radius: 12px;
font-size: 1rem;
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.9);
color: #2c3e50;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.1);
transform: translateY(-2px);
background: white;
}
.form-group textarea {
height: 120px;
resize: vertical;
}
.submit-btn {
background: linear-gradient(135deg, #14c285, #2980b9);
background: linear-gradient(135deg, #452d64, #120b28, #1d0c2e);
color: white;
border: none;
padding: 18px 40px;
border-radius: 12px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
overflow: hidden;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(52, 152, 219, 0.4);
background: linear-gradient(135deg, #30077a, #24143f);
}
.submit-btn:active {
transform: translateY(-1px);
}
.contact-info {
margin-top: 40px;
padding-top: 30px;
border-top: 1px solid #ecf0f1;
}
.info-items {
display: flex;
flex-direction: column;
gap: 15px;
}
.info-item {
display: flex;
align-items: center;
gap: 15px;
color: #7f8c8d;
}
.info-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #3498db, #2980b9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
}
.social-links {
display: flex;
gap: 15px;
margin-top: 25px;
justify-content: center;
}
.social-link {
width: 45px;
height: 45px;
background: #ecf0f1;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #7f8c8d;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.2rem;
}
.social-link:hover {
background: #3498db;
color: white;
transform: translateY(-3px);
}
.success-message {
display: none;
background: linear-gradient(135deg, #2ecc71, #27ae60);
color: white;
padding: 20px;
border-radius: 12px;
margin-bottom: 25px;
text-align: center;
font-weight: 600;
}
.success-message.show {
display: block;
animation: slideDown 0.5s ease;
}
@keyframes float {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (min-width: 1024px) {
.contact-wrapper {
flex-direction: row;
}
}
/* Responsive Design */
@media (max-width: 900px) {
.image-section {
padding: 30px;
min-height: 400px;
}
.form-section {
padding: 40px 30px;
}
.form-row {
grid-template-columns: 1fr;
gap: 15px;
}
.main-image {
height: 200px;
}
.secondary-images {
height: 120px;
}
}
@media (max-width: 600px) {
.contact-wrapper {
margin: 10px;
border-radius: 20px;
}
.form-section {
padding: 30px 20px;
}
.image-section {
padding: 20px;
}
.form-header h1 {
font-size: 2rem;
}
}
/* contact us section */
/*==========Scroll To Top CSS Start==========*/
.scrolltop {
text-align: center;
cursor: pointer;
transition: all 0.3s ease 0s;
position: absolute;
top: 180px;
right: 2vw;
z-index: 98;
}
.scrolltop:hover {
transform: scale(1.05);
}
/*==========Scroll To Top CSS End==========*/
/*==========Page Loader CSS==========*/
.page-loader {
position: fixed;
top: 0px;
left: 0px;
height: 100vh;
width: 100vw;
overflow: hidden;
background: #131a52;
background: linear-gradient(135deg, #653b99, #3a2c64, #1d0c2e);
z-index: 9999999999;
opacity: 1;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
transition: all 0.5s ease 0s;
}
.fullpage-loader--invisible {
opacity: 0;
}
.page-loader .h3-title {
font-size: 45px;
font-family: var(--title-font);
color: var(--white-color);
opacity: 0.4;
font-weight: 700;
}
.page-loader img {
width: 20%;
}
.payment-popup .withdraw-btn {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
color: white;
padding: 15px 30px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.3);
}
.payment-popup .withdraw-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
}
.payment-popup .overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
z-index: 999999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.payment-popup .overlay.active {
opacity: 1;
visibility: visible;
}
.payment-popup .popup {
background: #16002d;
border: 2px solid #452d64;
border-radius: 20px;
padding: 30px;
width: 100%;
max-width: 450px;
box-shadow: 0 20px 60px #764ba21a;
transform: scale(0.8) translateY(20px);
transition: all 0.3s ease;
position: relative;
}
.payment-popup .amount-input {
color: #452d64;
}
.payment-popup .overlay.active .popup {
transform: scale(1) translateY(0);
}
.payment-popup .popup-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
}
.payment-popup .popup-title {
font-size: 28px;
font-weight: 700;
background: -webkit-linear-gradient(#fbfbfb, #9e67e5, #c192ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.payment-popup .close-btn {
background: none;
border: none;
font-size: 24px;
color: #9ca3af;
cursor: pointer;
padding: 5px;
border-radius: 50%;
transition: all 0.2s ease;
}
.payment-popup .close-btn:hover {
background: #f3f4f6;
color: #6b7280;
}
.payment-popup .payment-methods {
display: grid;
gap: 12px;
padding: 5px;
height: 270px;
overflow: overlay;
}
.payment-popup .payment-method {
display: flex;
align-items: center;
padding: 16px;
border: 2px solid #e5e7eb;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
background: #fafafa;
}
.payment-popup .payment-method:hover {
border-color: #8b5cf6;
background: #f8fafc;
transform: translateY(-1px);
}
.payment-popup .payment-method.selected {
border-color: #6366f1;
background: linear-gradient(135deg, #ede9fe, #f3e8ff);
}
.payment-popup .payment-icon {
width: 40px;
height: 40px;
border-radius: 8px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: white;
font-size: 14px;
}
.payment-popup .paypal { background: linear-gradient(135deg, #0070ba, #003087); }
.payment-popup .cashapp { background: linear-gradient(135deg, #00d632, #00ac28); }
.payment-popup .venmo { background: linear-gradient(135deg, #3d95ce, #1a5490); }
.payment-popup .bank { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.payment-popup .crypto { background: linear-gradient(135deg, #f7931a, #e6851a); }
.payment-popup .payment-info h3 {
font-size: 16px;
font-weight: 600;
color: #1f2937;
margin-bottom: 2px;
}
.payment-popup .payment-info p {
font-size: 14px;
color: #6b7280;
}
.payment-popup .amount-section {
margin: 25px 0;
padding: 20px;
background: linear-gradient(135deg, #a66bef, #4d3d7e, #1d0c2e);
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.payment-popup .amount-label {
font-size: 14px;
font-weight: 600;
color: #ffffff;
margin-bottom: 8px;
}
.payment-popup .amount-input {
width: 100%;
padding: 12px 16px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
transition: border-color 0.2s ease;
}
.payment-popup .amount-input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.payment-popup .withdraw-action {
display: flex;
gap: 12px;
margin-top: 25px;
}
.payment-popup .btn-cancel {
flex: 1;
padding: 12px;
border: 2px solid #e5e7eb;
background: white;
color: #6b7280;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.payment-popup .btn-cancel:hover {
border-color: #d1d5db;
background: #f9fafb;
}
.payment-popup .btn-confirm {
flex: 2;
padding: 12px;
background: linear-gradient(135deg, #764ba2, #452d64);
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.payment-popup .btn-confirm:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}
.payment-popup .btn-confirm:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.playlistSection .main-container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 0;
}
.playlistSection .header {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
}
.playlistSection .logo {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #8b5cf6, #a855f7);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3);
}
.playlistSection .star-icon {
width: 40px;
height: 40px;
fill: white;
}
.playlistSection .header-content h1 {
font-size: 48px;
font-weight: 800;
margin-bottom: 10px;
}
.playlistSection .header-content p {
font-size: 18px;
color: #a1a1aa;
font-weight: 400;
}
.playlistSection .playlist-word {
background: linear-gradient(135deg, #a855f7, #c084fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.playlistSection .create-btn {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
color: white;
padding: 16px 30px;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
}
.playlistSection .create-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 35px rgba(139, 92, 246, 0.4);
}
.playlistSection .overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 99999999999999999999999999;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.playlistSection .overlay.active {
opacity: 1;
visibility: visible;
}
.playlistSection .popup {
background: linear-gradient(135deg, #1e1b4b, #312e81);
border-radius: 24px;
width: 100%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
transform: scale(0.8) translateY(30px);
transition: all 0.3s ease;
border: 1px solid rgba(139, 92, 246, 0.2);
}
.playlistSection .overlay.active .popup {
transform: scale(1) translateY(0);
}
.playlistSection .popup-header {
padding: 30px 30px 0;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.playlistSection .popup-title {
font-size: 28px;
font-weight: 700;
background: linear-gradient(135deg, #a855f7, #c084fc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.playlistSection .close-btn {
background: rgba(255, 255, 255, 0.1);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
color: white;
font-size: 20px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.playlistSection .close-btn:hover {
background: rgba(255, 255, 255, 0.2);
}
.playlistSection .popup-content {
padding: 0 30px 30px;
}
.playlistSection .form-section {
/* margin-bottom: 25px; */
padding: 0;
}
.playlistSection .form-group {
margin-bottom: 20px;
}
.playlistSection .form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #e4e4e7;
margin-bottom: 8px;
}
.playlistSection .form-input {
width: 100%;
padding: 14px 16px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid rgba(139, 92, 246, 0.2);
border-radius: 12px;
color: white;
font-size: 16px;
transition: all 0.2s ease;
}
.playlistSection .form-input:focus {
outline: none;
border-color: #a855f7;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.1);
}
.playlistSection .form-input::placeholder {
color: #a1a1aa;
}
.playlistSection .form-textarea {
min-height: 100px;
resize: vertical;
}
.playlistSection .cover-upload-section {
text-align: center;
padding: 20px;
border: 2px dashed rgba(139, 92, 246, 0.3);
border-radius: 16px;
background: rgba(255, 255, 255, 0.02);
transition: all 0.3s ease;
cursor: pointer;
}
.playlistSection .cover-upload-section:hover {
border-color: rgba(139, 92, 246, 0.6);
background: rgba(255, 255, 255, 0.05);
}
.playlistSection .cover-preview {
width: 120px;
height: 120px;
border-radius: 16px;
margin: 0 auto 15px;
object-fit: cover;
border: 3px solid rgba(139, 92, 246, 0.3);
}
.playlistSection .upload-placeholder {
width: 120px;
height: 120px;
background: rgba(139, 92, 246, 0.1);
border-radius: 16px;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: #a855f7;
}
.playlistSection .privacy-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.playlistSection .privacy-option {
padding: 16px;
border: 2px solid rgba(139, 92, 246, 0.2);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
background: rgba(255, 255, 255, 0.02);
}
.playlistSection .privacy-option:hover {
border-color: rgba(139, 92, 246, 0.4);
}
.playlistSection .privacy-option.selected {
border-color: #a855f7;
background: rgba(168, 85, 247, 0.1);
}
.playlistSection .privacy-icon {
font-size: 24px;
margin-bottom: 8px;
}
.playlistSection .suggested-songs {
margin-top: 25px;
}
.playlistSection .songs-grid {
display: grid;
gap: 12px;
max-height: 200px;
overflow-y: auto;
border-radius: 12px;
padding: 5px;
}
.playlistSection .song-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.playlistSection .song-info {
display: flex;
align-items: start;
gap: 0px;
flex-direction: column;
margin-bottom: 0px;
}
.playlistSection .song-item:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(139, 92, 246, 0.3);
}
.playlistSection .form-input, select {
margin-bottom: 0px;
}
.playlistSection .song-item.selected {
background: rgba(168, 85, 247, 0.2);
border-color: #a855f7;
}
.playlistSection .song-cover {
width: 48px;
height: 48px;
border-radius: 8px;
object-fit: cover;
}
.playlistSection .song-info h4 {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}
.playlistSection .song-info p {
font-size: 12px;
color: #a1a1aa;
}
.playlistSection .form-actions {
display: flex;
gap: 12px;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid rgba(139, 92, 246, 0.2);
}
.playlistSection .btn-secondary {
flex: 1;
padding: 14px;
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.playlistSection .btn-secondary:hover {
background: rgba(255, 255, 255, 0.15);
}
.playlistSection .btn-primary {
flex: 2;
padding: 14px;
background: linear-gradient(135deg, #8b5cf6, #a855f7);
color: white;
border: none;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}
.playlistSection .btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 25px rgba(139, 92, 246, 0.4);
}
.playlistSection .btn-primary:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.playlistSection .selected-count {
background: linear-gradient(135deg, #8b5cf6, #a855f7);
color: white;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-left: 10px;
}
/* Scrollbar styling */
.playlistSection .songs-grid::-webkit-scrollbar {
width: 6px;
}
.playlistSection .songs-grid::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
border-radius: 3px;
}
.playlistSection .songs-grid::-webkit-scrollbar-thumb {
background: rgba(139, 92, 246, 0.6);
border-radius: 3px;
}
.music-playerWithPopup .playlists-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.music-playerWithPopup .playlist-card {
background: linear-gradient(135deg, rgba(138, 43, 226, 0.1) 0%, rgba(75, 0, 130, 0.1) 100%);
border-radius: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(138, 43, 226, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.music-playerWithPopup .playlist-details {
padding: 20px;
}
.music-playerWithPopup .playlist-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
}
.music-playerWithPopup .playlist-image {
width: 100%;
height: 200px;
border-radius: 10px 10px 0 0;
object-fit: cover;
margin-bottom: 15px;
}
.music-playerWithPopup .playlist-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.music-playerWithPopup .playlist-info {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
padding: 0;
}
.music-playerWithPopup .playlist-controls {
display: flex;
gap: 15px;
}
.music-playerWithPopup .btn {
padding: 12px 24px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.music-playerWithPopup .btn-play {
background: linear-gradient(135deg, #8a2be2, #9d4edd);
color: white;
}
.music-playerWithPopup .btn-play:hover {
background: linear-gradient(45deg, #9932cc, #8a2be2);
transform: scale(1.05);
}
.music-playerWithPopup .btn-like {
background: #2a1a42;
color: white;
}
.music-playerWithPopup .btn-like:hover {
background: #420087;
transform: scale(1.05);
}
.music-playerWithPopup .add-song-btn {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
background: linear-gradient(45deg, #8a2be2, #9932cc);
border: none;
border-radius: 50%;
color: white;
font-size: 24px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
transition: all 0.3s ease;
}
.music-playerWithPopup .add-song-btn:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(138, 43, 226, 0.6);
}
.music-playerWithPopup .popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}
.music-playerWithPopup .popup.active {
display: flex;
}
.music-playerWithPopup .player-popup {
background: rgba(26, 26, 46, 0.95);
border-radius: 20px;
padding: 30px;
width: 90%;
max-width: 500px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
}
.music-playerWithPopup .player-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
}
.music-playerWithPopup .close-btn {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.music-playerWithPopup .close-btn:hover {
background: rgba(255, 255, 255, 0.1);
}
.music-playerWithPopup .current-song {
text-align: center;
margin-bottom: 30px;
}
.music-playerWithPopup .song-image {
width: 150px;
height: 150px;
border-radius: 15px;
object-fit: cover;
margin: 0 auto 20px;
display: block;
}
.music-playerWithPopup .song-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 5px;
}
.music-playerWithPopup .song-artist {
color: rgba(255, 255, 255, 0.7);
}
.music-playerWithPopup .progress-container {
margin-bottom: 30px;
}
.music-playerWithPopup .progress-bar {
width: 100%;
height: 6px;
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
margin-bottom: 10px;
cursor: pointer;
}
.music-playerWithPopup .progress {
height: 100%;
background: linear-gradient(45deg, #8a2be2, #9932cc);
border-radius: 3px;
width: 0%;
transition: width 0.1s ease;
}
.music-playerWithPopup .time-info {
display: flex;
justify-content: space-between;
font-size: 14px;
color: rgba(255, 255, 255, 0.7);
}
.music-playerWithPopup .player-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-bottom: 20px;
}
.music-playerWithPopup .control-btn {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
transition: all 0.3s ease;
}
.music-playerWithPopup .control-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.music-playerWithPopup .play-pause-btn {
width: 60px;
height: 60px;
background: linear-gradient(45deg, #8a2be2, #9932cc);
font-size: 24px;
}
.music-playerWithPopup .volume-container {
display: flex;
align-items: center;
gap: 15px;
}
.music-playerWithPopup .volume-slider {
flex: 1;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
cursor: pointer;
}
.music-playerWithPopup .volume-progress {
height: 100%;
background: linear-gradient(45deg, #8a2be2, #9932cc);
border-radius: 2px;
width: 70%;
}
.music-playerWithPopup .add-song-popup {
background: rgba(26, 26, 46, 0.95);
border-radius: 20px;
padding: 30px;
width: 90%;
max-width: 600px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
max-height: 80vh;
overflow-y: auto;
}
.music-playerWithPopup .form-group {
margin-bottom: 20px;
}
.music-playerWithPopup .form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
.music-playerWithPopup .form-group input,
.music-playerWithPopup .form-group select {
width: 100%;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: white;
font-size: 16px;
}
.music-playerWithPopup .form-group input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.music-playerWithPopup .song-list {
max-height: 300px;
overflow-y: auto;
margin-bottom: 20px;
}
.music-playerWithPopup .song-item {
display: flex;
align-items: center;
padding: 15px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
margin-bottom: 10px;
transition: background 0.3s ease;
}
.music-playerWithPopup .song-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.music-playerWithPopup .song-item-image {
width: 50px;
height: 50px;
border-radius: 8px;
object-fit: cover;
margin-right: 15px;
}
.music-playerWithPopup .song-item-info {
flex: 1;
}
.music-playerWithPopup .song-item-title {
font-weight: bold;
margin-bottom: 5px;
}
.music-playerWithPopup .song-item-artist {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
}
.music-playerWithPopup .form-actions {
display: flex;
gap: 15px;
justify-content: flex-end;
}
.music-playerWithPopup .btn-cancel {
background: rgba(255, 255, 255, 0.1);
color: white;
}
.music-playerWithPopup .btn-save {
background: linear-gradient(45deg, #8a2be2, #9932cc);
color: white;
}
/* newsletter css */
/* .news_letter .container {
max-width: 1200px;
width: 100%;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border-radius: 24px;
padding: 60px 40px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
} */
.news_letter {
position: relative;
}
.news_letter .section-header {
text-align: center;
margin-bottom: 50px;
}
.news_letter .section-title {
font-size: 3.5rem;
font-weight: 700;
color: #ffffff;
margin-bottom: 20px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
letter-spacing: -0.02em;
}
.news_letter .section-subtitle {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.newsletter_parent {
max-width: 700px;
margin: 0 auto;
}
.news_letter .newsletter-section {
background-color: #120b28;
padding: 40px;
border-radius: 20px;
border: 2px solid #654e85;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all .3s ease-in-out;
backdrop-filter: blur(10px);
}
.news_letter .newsletter-section:hover{
transform: translateY(-5px);
box-shadow: rgba(248, 248, 248, 0.2) 0px 2px 8px 0px;
}
.news_letter .newsletter-title {
font-size: 2rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 12px;
}
.news_letter .newsletter-icon {
width: 70px;
height: 70px;
background: #e5e5e5;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.newsletter-icon lord-icon {
width: 60px;
height: 60px;
}
.news_letter .newsletter-description {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 30px;
font-size: 1.1rem;
line-height: 1.6;
}
.news_letter .newsletter-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.news_letter .input-group {
display: flex;
/* gap: 12px; */
}
.news_letter .email-input {
flex: 1;
padding: 16px 20px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
font-size: 16px;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.news_letter .email-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.news_letter .email-input:focus {
outline: none;
border-color: #8a49ff;
background: rgba(255, 255, 255, 0.15);
/* box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.2); */
}
.news_letter .subscribe-btn {
padding: 16px 32px;
background: linear-gradient(135deg, #685383, #422e7e, #260c40);
color: #ffffff;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
/* box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3); */
white-space: nowrap;
}
.news_letter .subscribe-btn:hover {
/* transform: translateY(-2px); */
/* box-shadow: rgba(248, 248, 248, 0.2) 0px 2px 8px 0px; */
}
.news_letter .subscribe-btn:active {
transform: translateY(0);
}
.news_letter .social-section {
text-align: center;
}
.news_letter .social-title {
font-size: 2rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 30px;
}
.news_letter .social-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-bottom: 30px;
}
.news_letter .social-card {
background: rgba(255, 255, 255, 0.08);
padding: 30px 20px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
cursor: pointer;
text-decoration: none;
color: inherit;
backdrop-filter: blur(10px);
}
.news_letter .social-card:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.12);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.news_letter .social-icon {
width: 48px;
height: 48px;
margin: 0 auto 16px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #ffffff;
}
.news_letter .facebook-icon {
background: linear-gradient(45deg, #1877f2, #42a5f5);
}
.news_letter .instagram-icon {
background: linear-gradient(45deg, #e4405f, #ffdd55);
}
.news_letter .twitter-icon {
background: linear-gradient(45deg, #1da1f2, #00c9ff);
}
.news_letter .social-name {
font-size: 1.1rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 8px;
}
.news_letter .social-handle {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
.news_letter .connect-text {
color: rgba(255, 255, 255, 0.8);
font-size: 1.1rem;
margin-bottom: 20px;
}
.news_letter .success-message {
background: rgba(76, 175, 80, 0.2);
color: #4caf50;
padding: 12px 20px;
border-radius: 8px;
margin-top: 16px;
text-align: center;
display: none;
border: 1px solid rgba(76, 175, 80, 0.3);
}
/* Responsive Design */
@media (max-width: 968px) {
.news_letter .content-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.news_letter .section-title {
font-size: 2.5rem;
}
}
@media (max-width: 768px) {
.news_letter .social-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.news_letter .input-group {
/* flex-direction: column; */
}
.news_letter .section-title {
font-size: 2rem;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* .news_letter .container {
animation: fadeInUp 0.8s ease-out;
} */
.news_letter .social-card {
animation: fadeInUp 0.8s ease-out;
animation-fill-mode: both;
}
.news_letter .social-card:nth-child(1) {
animation-delay: 0.2s;
}
.news_letter .social-card:nth-child(2) {
animation-delay: 0.4s;
}
.news_letter .social-card:nth-child(3) {
animation-delay: 0.6s;
}
/* newsletter css */
/*==========Page Loader CSS End==========*/
/*==========Responsive Start==========*/
@media screen and (min-width: 992px) {
.menu-toggle {
display: none;
}
}
@media (min-width: 1500px) {
.container {
max-width: 1200px;
}
}
@media (min-width: 2100px) {
.container {
max-width: 1400px;
}
p,
body,
button,
input,
select,
optgroup,
textarea {
font-size: 18px;
line-height: 32px;
}
.h1-title {
font-size: 70px;
line-height: 90px;
}
h3,
.h3-title {
font-size: 30px;
line-height: 40px;
}
.h4-title,
h4,
.singer-name a {
font-size: 20px;
line-height: 30px;
}
.h2-title {
font-size: 60px;
line-height: 70px;
}
.menu-main-menu-container li a {
font-size: 30px;
}
.artist-box {
max-width: 450px;
}
}
@media screen and (max-width:1900px) {
/* .hero_sec {
margin: 3rem 0;
} */
.mobile-vectors img {
width: 70%;
}
.mobile-vectors {
top: -165px;
}
}
@media (max-width: 1560px) {
.menu-main-menu-container li a {
font-size: 18px;
}
}
@media (max-width: 1499px) {
.banner-content {
padding-right: 20px;
}
.albums-cover {
height: 25vw;
}
.parent_modalForm .right-panel {
padding: 20px;
}
.album-row .albums-col {
width: 25vw;
}
.music3_vectors img {
top: -35px;
}
.video_slider .main h2 {
left: 50%;
font-size: 60px;
text-align: center;
margin-top: -50px;
width: 100%;
}
.mobile-vectors img {
width: 60%;
}
.mobile-vectors {
left: -55px;
}
.parent_majorPowel .philosophy-section h2 {
font-size: 34px;
}
.menu-main-menu-container li {
margin: 0 12px;
}
}
@media (max-width: 1299px) {
.parent-loader {
right: 45px;
}
.menu-main-menu-container li {
margin: 0 12px;
}
.menu-main-menu-container li a {
font-size: 16px;
}
}
@media (max-width: 1210px) {
.menu-main-menu-container li {
margin: 0px 14px;
}
}
@media screen and (min-width: 1199px) and (max-width:1330px) {
.powel_video video {
height: 430px;
}
/* .parent_majorPowel .main-images {
align-items: center;
} */
}
@media screen and (min-width: 1050px) and (max-width:1198px) {
.powel_video video {
height: 370px;
}
.parent_majorPowel .main-images {
align-items: center;
}
}
@media screen and (max-width:1049px) {
.powel_video video {
height: 390px;
}
/* .parent_majorPowel .main-images {
align-items: center;
} */
.parent_majorPowel .content-grid {
place-items: anchor-center;
}
}
@media screen and (max-width:1059px) {
.menu-main-menu-container li a {
font-size: 15px;
}
}
@media (max-width: 1199px) {
.music-list-box {
padding: 15px 3em 15px 15px;
}
.parent_majorPowel .philosophy-section h2 {
font-size: 30px;
}
.hero_sec .h1-title {
font-size: 50px;
}
.secArtist_portal .feature-card p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: unset;
}
.secAbout .main h2,
.albums-section .main h2 {
font-size: 65px;
}
.hero_sec p {
line-height: 1.5;
}
.mobile-vectors {
/* top: -200px;
left: -60px; */
}
.mobile-vectors img {
width: 55%;
}
.music-vectors img {
right: 50px;
}
.lyrics-box .main h2 {
font-size: 50px;
}
.song-Box {
max-width: 375px;
}
.song-Box lord-icons {
width: 55px;
height: 55px;
}
.song-Box p {
font-size: 25px;
}
.music_controls {
right: 10px;
}
.menu-main-menu-container li {
margin: 0px 10px;
}
.upcoming-box:before {
font-size: 11em;
top: 50%;
}
.banner-img {
width: 40vw;
height: 40vw;
}
.albums-cover:before {
width: 50px;
height: 50px;
border-width: 3px;
}
.album-details {
margin-left: 0;
}
.songs-name .h3-title {
max-width: 60%;
}
.similar-artists-text .h3-title {
max-width: 100%;
}
.artists-tracklist {
margin-left: 0px;
}
.video_slider .main h2 {
left: 50%;
font-size: 58px;
text-align: center;
margin-top: -50px;
width: 100%;
}
.signup-app .left-section .music-platforms {
gap: 10px;
}
}
@media (max-width: 991px) {
.for-des {
display: none !important;
}
.site-branding {
margin-top: -18px;
}
.signup-app .container {
flex-direction: column;
}
.signup-app .left-section {
border-radius: 20px 20px 0px 0px;
}
.signup-app .right-section {
border-radius: 0px 0px 20px 20px;
}
.header-menu ul li ul {
width: 80%;
margin: 0 auto;
}
.menu-main-menu-container ul {
z-index: 9 !important;
}
.un_dropdown {
z-index: 99 !important;
}
.service_drop {
top: 70%;
}
.service_drop li {
padding: 0 !important;
width: unset;
}
.service_drop li a {
font-size: 18px !important;
}
/* .menu-main-menu-container ul{
z-index: 9999;
} */
/* .menu-main-menu-container li {
z-index: 99;
} */
/* .menu-main-menu-container li {
z-index: 99999999;
} */
/* .header-menu ul li ul {
z-index: 9999999999;
} */
.service_drop li {
padding: 0;
}
/* .mobile-vectors{
top: -220px;
} */
.sec-btn {
padding: 5px 13px;
}
.for-mob {
display: block !important;
}
.page-loader .h3-title {
font-size: 4.5em;
}
body {
padding: 0;
}
.overlay-body {
border-radius: 0;
}
.about-section .content {
display: grid;
place-items: center;
}
.about-section .content .title {
text-align: center;
}
.about-section .content .description {
text-align: center;
}
.about-giff img {
top: 315px;
}
.site-header .container {
max-width: 100%;
}
.site-header {
top: 0px;
height: 100px;
padding: 15px 0 0;
}
.site-branding {
width: 82px;
}
.site-header.sticky_head {
position: fixed;
box-shadow: 10px 10px 19px #282e61, -10px -10px 19px #363e83;
}
.site-header.sticky_head:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: transparent;
filter: blur(15px);
backdrop-filter: brightness(1.2) blur(30px) opacity(1);
-webkit-backdrop-filter: brightness(1.2) blur(30px) opacity(1);
}
.site-header .col-lg-5 {
position: absolute;
left: 15px;
width: 100%;
}
.main-banner .banner-img {
display: none;
}
.main-banner::before {
background: rgb(235, 236, 237);
z-index: 1;
height: 100%;
width: 100%;
transform: translate(0px);
opacity: 0.6;
}
.main-banner .h1-title {
position: relative;
text-align: center;
z-index: 1;
}
.search-container {
margin-left: 2rem;
}
.banner-btn {
justify-content: center;
flex-wrap: wrap;
}
.sec-btn,
.sec-btn.hover-btn {
margin: 15px 10px 0;
}
.menu-images {
width: 100%;
z-index: 1;
pointer-events: none;
opacity: 0;
}
.nav-menu.open-menu .menu-images {
opacity: 0.1;
}
.mani-menu {
width: 100vw;
}
.open-hamburger {
left: auto;
right: 30px;
top: 65px;
height: 40px;
width: 40px;
}
.mani-menu ul {
text-align: center;
position: relative;
z-index: 1;
}
.nav-menu li a {
font-size: 30px;
line-height: 40px;
margin-bottom: 10vh;
}
.nav-menu li:last-child a {
margin-bottom: 0px;
}
.site-header .col-lg-3 {
position: absolute;
top: 50%;
width: auto;
left: 15px;
transform: translate(0, -50%);
}
.pricing-container {
flex-wrap: wrap;
}
.site-header .row.align-items-center {
padding: 0 15px;
}
.hamburger span {
width: 30px;
height: 3px;
background: #fff;
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: 1.5s;
transition: 1.5s;
}
.parent-loader {
top: 0px;
}
.hamburger span:first-child {
top: 20px;
}
.hamburger span:last-child {
bottom: 17px;
top: unset;
}
.toggled .hamburger span {
-webkit-transition: 1.5s;
transition: 1.5s;
opacity: 0;
background: var(--white-color);
}
.toggled .hamburger span:first-child {
-webkit-transition: 1.1s;
-webkit-transform: translate(-50%, -50%) rotate(-135deg);
transform: translate(-50%, -50%) rotate(-135deg);
top: 50%;
-webkit-transition: 1.5s;
transition: 1.5s;
opacity: 1;
width: 40px;
}
.toggled .hamburger span:last-child {
top: 50%;
-webkit-transform: translate(-50%, -50%) rotate(-225deg);
transform: translate(-50%, -50%) rotate(-225deg);
-webkit-transition: 1.5s;
transition: 1.5s;
opacity: 1;
width: 40px;
}
.menu-main-menu-container li:nth-child(1) {
transition: .5s;
transition-delay: 0s;
}
.toggled .menu-main-menu-container li:nth-child(1) {
transform: scale(1);
opacity: 1;
transition: .3s;
transition-delay: .9s;
}
.menu-main-menu-container li:nth-child(2) {
transition: .4s;
transition-delay: .1s;
}
.toggled .menu-main-menu-container li:nth-child(2) {
transform: scale(1);
opacity: 1;
transition: .4s;
transition-delay: 1s;
}
.menu-main-menu-container li:nth-child(3) {
transition: .3s;
transition-delay: .2s;
}
.toggled .menu-main-menu-container li:nth-child(3) {
transform: scale(1);
opacity: 1;
transition: .5s;
transition-delay: 1.1s;
}
.menu-main-menu-container li:nth-child(4) {
transition: .2s;
transition-delay: .2s;
}
.toggled .menu-main-menu-container li:nth-child(4) {
transform: scale(1);
opacity: 1;
transition: .6s;
transition-delay: 1.2s;
}
.menu-main-menu-container li:nth-child(5),
.menu-main-menu-container li:nth-child(6) {
transition: .1s;
transition-delay: 0.3s;
}
.toggled .menu-main-menu-container li:nth-child(5) {
transform: scale(1);
opacity: 1;
transition: .7s;
transition-delay: 1.3s;
}
.toggled .menu-main-menu-container li:nth-child(6) {
transform: scale(1);
opacity: 1;
transition: .8s;
transition-delay: 1.4s;
}
.toggled .menu-main-menu-container li:nth-child(7) {
transform: scale(1);
opacity: 1;
transition: .9s;
transition-delay: 1.5s;
}
.menu-main-menu-container ul {
justify-content: center;
flex-direction: column;
}
.header-menu {
height: 0;
position: absolute;
top: -30px;
left: 0;
width: 100%;
z-index: 99;
transition: 1s cubic-bezier(.165, .84, .44, 1);
overflow-y: auto;
background: 0 0;
text-align: center;
overflow: hidden;
}
.toggled .header-menu {
height: 100vh !important;
transition: 1s cubic-bezier(.165, .84, .44, 1);
top: 0;
}
.header-menu:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
background: var(--body-color);
z-index: 0;
transition: 1s cubic-bezier(.165, .84, .44, 1);
pointer-events: none;
}
.toggled .header-menu:before {
height: 100vh;
transition-duration: 1s;
}
.menu-main-menu-container:before {
content: "♫";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
font-size: 30em;
z-index: 0;
opacity: 0.1;
color: var(--primary-color);
transition: .1s;
transition-delay: 0.3s;
}
.toggled .menu-main-menu-container:before {
transform: translate(-50%, -50%) scale(1);
transition: all .8s cubic-bezier(.47, 1.64, .41, .8);
transition-delay: 1.4s;
}
.header-menu:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
background-color: #120b28;
z-index: 0;
transition: .5s cubic-bezier(.165, .84, .44, 1);
transition-delay: .2s;
pointer-events: none;
backdrop-filter: brightness(1.2) blur(30px) opacity(1);
-webkit-backdrop-filter: brightness(1.2) blur(30px) opacity(1);
}
.toggled .header-menu:before {
height: 100vh;
transition-delay: .5s;
}
.header-menu:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 0;
width: 100%;
background: linear-gradient(135deg, #452d64, #120b28, #1d0c2e);
z-index: 0;
transition: 1s cubic-bezier(.165, .84, .44, 1);
transition-duration: .5s;
pointer-events: none;
}
.toggled .header-menu:after {
height: 100vh;
transition-duration: 1s;
transition-delay: 0.6s;
}
.menu-main-menu-container {
position: relative;
height: 100vh;
display: flex;
align-items: center;
z-index: 1;
}
.menu-main-menu-container li a {
font-size: 30px;
line-height: 40px;
z-index: 1;
color: var(--white-color);
}
.menu-main-menu-container li {
padding: 2vh 0;
transform: scale(0);
}
.banner-content {
/* text-align: center; */
padding: 0;
}
.hero_sec .h1-title {
font-size: 30px;
text-align: left;
}
.artist-row {
padding-top: 10px;
}
.artist-box,
.artist-box.even {
margin: 0 auto 30px;
max-width: 100%;
}
.artist-box.even .rotate-text {
left: -67px;
}
.rotate-text {
left: 0;
}
.artist-section .btn-part {
margin-top: 0;
}
.albums-section {
padding: 50px 0 63px;
}
.album-box-row {
padding-top: 10px;
}
.album-box.middle-box {
margin: 30px 0;
}
.upcoming-box:before {
display: none;
}
.lyrics-box .title {
margin-bottom: 30px;
}
.music-card {
margin: 0 auto 40px;
}
.follow-us-row ul {
flex-wrap: wrap;
}
.follow-us-row li {
width: 50%;
margin: 0 auto 30px;
}
.follow-us-row li a {
display: inline-block;
}
.follow-us-row {
padding: 80px 0 0;
}
.follow-us-row li:last-child {
margin-bottom: 0;
}
span.copyright-text {
float: left;
margin-top: 15px;
}
.event-row {
padding-top: 10px;
}
.flexbox {
margin-top: 30px;
}
.lyrics-box {
/* padding-bottom: 48px; */
}
.upcoming-section {
padding-bottom: 95px;
}
.gallery-section {
padding-top: 105px;
}
.gallery-section.inner-gallery-section {
padding-top: 0;
}
.video-gallery {
padding-bottom: 80px;
}
.artist-row .g-5 {
--bs-gutter-x: 0;
}
.inner-banner {
margin-bottom: 60px;
}
.album-section {
padding-top: 0;
}
.songs-name {
width: 100%;
}
.songs-name {
width: 100%;
}
.album-image {
width: 100%;
position: relative;
height: 50vh;
}
.album-details {
padding-top: 60px;
padding-right: 15px;
max-height: inherit;
padding-left: 15px;
overflow: visible;
}
.album-banner,
.album-banner .row {
height: auto;
}
.album-songs-detail {
display: block;
}
.similar-artists {
width: 100%;
margin-left: 0;
border-left: 0;
padding-left: 5px;
}
.popular-songs,
.similar-artists {
width: 100%;
}
.similar-artists {
margin-top: 60px;
}
.artists-banner .album-image {
position: absolute;
border-radius: 0;
}
.artists-banner .h1-title {
margin-top: 120px;
}
.artists-details {
margin-top: 215px;
padding-bottom: 60px;
}
.artists-img {
margin-bottom: 40px;
}
.artists-img .back-img {
background-position: top center;
}
section.events-inner-section {
padding-top: 30px;
padding-bottom: 80px;
}
.details-box {
margin-top: 50px;
}
.artists-tracklist {
margin-top: 40px;
}
.overlay-body:before {
border-radius: 0;
}
.copyright {
text-align: center;
}
.album-row .albums-col {
width: 44%;
}
.albums-cover {
height: 400px;
border-radius: 0;
}
.albums-cover:before {
display: none;
}
.contact-us-form {
padding-left: 0;
}
.contact-us-detail {
margin-bottom: 40px;
}
.contact-us-sec {
padding: 20px 0;
}
.contact-map {
margin: 30px 0;
}
.video_slider .main h2 {
left: 50%;
font-size: 52px;
text-align: center;
margin-top: -50px;
width: 100%;
}
.newsbar {
bottom: -50px;
background: linear-gradient(135deg, #a66bef, #4d3d7e, #1d0c2e);
}
.main-banner {
margin-top: 2rem;
}
}
@media (max-width: 767px) {
.flexbox {
column-count: 3;
}
.upload-grid {
grid-template-columns: 1fr;
}
.music-list-row {
padding-left: 0;
}
.hero_sec .populor-corner {
top: unset;
position: absolute;
bottom: -252px;
transform: translate(-50%, -50%) !important;
left: 50%;
}
.search-container {
position: absolute;
width: 88%;
max-width: 500px;
margin-left: 0rem;
top: 55px;
}
.upcoming-section .main h2 {
font-size: 60px;
}
.hero_sec .h1-title {
font-size: 44px;
}
.banner-content {
text-align: center;
}
.hero_sec .h1-title {
text-align: center;
}
.player-parent {
display: flex;
justify-content: center;
}
.banner-content {
padding-top: 3rem;
}
.banner-video {
display: flex;
justify-content: center;
margin-top: 6rem;
}
.about-giff img {
top: 390px;
width: 28%;
}
/* .service_drop */
.service_drop {
/* display: none !important; */
}
.form-Cta-unique {
flex-direction: column;
}
.contact-us-detail .row .col-lg-6 {
border: 0 !important;
padding: 0 !important;
border-bottom: 1px solid rgb(255 255 255 / 35%) !important;
margin-bottom: 30px;
}
.contact-us-detail .row .col-lg-6:last-child {
border: 0 !important;
margin: 0 !important;
}
.contact-us-sec {
padding: 0px 0 45px;
}
.contact-us-detail .row .col-lg-6:nth-child(3) .contact-box,
.contact-us-detail .row .col-lg-6:last-child .contact-box {
margin-bottom: 30px;
}
.secArtist_portal .feature-card h3 {
height: 60px;
font-size: 22px;
}
.mobile-vectors {
left: -104px;
top: 65px;
}
.parent-loader {
top: 210px;
}
.vector_2 {
position: absolute;
bottom: 0;
left: 0;
}
.secAbout .main h2,
.albums-section .main h2 {
font-size: 46px;
}
.lyrics-box .main h2 {
font-size: 33px;
}
.artist-section .main h2 {
font-size: 60px;
}
.song-Box lord-icon {
width: 50px;
height: 45px;
}
.song_list .playlist-card {
display: grid;
place-items: center;
}
.song_list .playlist-info {
text-align: left;
}
.event-section .main h2 {
font-size: 60px;
}
.mobile-vectors img {
width: 40%;
}
.banner-video video {
width: 100%;
}
.artist-section {
margin-top: 8rem;
}
.parent-loader {
display: none;
}
.mobile-vectors {
display: none;
}
.song-Box lord-icon {
width: 55px;
height: 55px;
}
.video_slider .main h2 {
left: 50%;
font-size: 48px;
text-align: center;
margin-top: -50px;
width: 100%;
}
.parent_majorPowel .main-images {
grid-template-columns: 1fr 1fr;
}
.parent_majorPowel .image-large {
overflow: visible;
}
.parent_majorPowel .powel_video video {
height: 515px;
}
.user-portal .section-title {
font-size: 50px;
text-align: left;
}
.user-portal .section-title span {
display: contents;
}
.store_button {
justify-content: center;
}
}
@media (max-width: 575px) {
.h1-title,
.inner-banner .h1-title {
font-size: 13vw;
line-height: 14vw;
}
.secRoyalty .payout-section {
justify-content: center;
flex-direction: column;
}
.brand-inner {
width: 50%;
margin: 0 auto;
}
.about_inner {
padding: 80px 0px;
}
.store-btn {
padding: 10px;
min-width: auto;
}
.store-name {
font-size: 14px;
}
.about_inner .music-player {
padding: 16px 12px;
}
.music-player .header .song-info .track-details h3 {
font-size: 16px;
}
.about-section .title {
text-align: center;
}
.about-section .title {
font-size: 32px;
}
.signup-app .container .left-section .logo {
font-size: 34px;
}
.track-details {
text-align: left;
}
.music-player .header .action-buttons {
gap: 0px;
}
.video_slider .main h2 {
left: 50%;
font-size: 42px;
text-align: center;
margin-top: -50px;
width: 100%;
}
.countdown-box p span {
font-size: 70px !important;
}
.event-section .main h2 {
font-size: 44px;
}
.upcoming-section .main h2 {
font-size: 44px;
}
.music-vectors img {
right: 60px;
top: -134px;
}
.banner-content {
/* position: absolute; */
/* z-index: 3; */
/* background: #00000000; */
/* padding: 0 25px 0 0; */
}
.hero_sec .populor-corner {
width: 60%;
}
.player_dots .popup-overlay {
left: 20px;
}
.hamburger {
top: 8px;
}
.Parent-visualizerDots:hover .dropdown_Musicplaylist {
top: 40px;
right: 0px;
}
.bottom_fixedMucicPlayer .volume-control {
display: none;
}
.bottom_fixedMucicPlayer .progress-container {
width: 60%;
align-items: end;
justify-content: end;
width: 80%;
margin-top: 6px;
}
.bottom_fixedMucicPlayer .control-track-info {
gap: 10px;
}
.player_dots .controls {
gap: 8px;
}
.bottom_fixedMucicPlayer .playback-controls {
flex: unset;
}
.bottom_fixedMucicPlayer .player-controls {
justify-content: space-between;
}
.banner-video {
opacity: .4;
}
.mobile-vectors {
display: none;
}
.song-Box p {
font-size: 22px;
}
.secArtist_portal .feature-card h3 {
height: unset;
font-size: 24px;
}
.hero_sec .h1-title {
font-size: 32px;
}
/* .hero_sec {
margin: 5rem 0 0 0;
} */
.banner-btn {
margin-top: 0;
}
.artist-section {
margin-top: 8rem;
}
.secAbout .main h2,
.albums-section .main h2 {
font-size: 35px;
}
.song-Box lord-icon {
width: 50px !important;
height: 50px !important;
}
.container,
.container-fluid {
padding: 0px 30px;
}
.artist-row .col-lg-6 {
padding: 0 15px;
}
.artist-row {
margin: 0;
}
.artist-box.even .rotate-text {
left: -23px;
}
.rotate-text {
left: 8px;
}
.music-card {
max-width: 100%;
}
.service_drop {
top: 156px !important;
left: 50% !important;
transform: translate(-50%, -50%);
}
.header-menu ul li ul li a {
padding: 2px 5px;
}
.music-card__content {
padding: 20px;
}
.music-image {
left: 0;
top: 0;
margin-bottom: 20px;
height: 300px;
}
/* music-list */
.music-list-box {
display: block;
padding: 15px;
border-radius: 20px 20px 25px 20px;
}
.music-list-image {
filter: drop-shadow(-20px 10px 10px rgba(0, 0, 0, 0.25));
border-radius: 10px;
overflow: hidden;
width: 100%;
max-width: 70%;
height: 200px;
}
.music-list-box .music-info {
margin-top: 20px;
padding: 0;
}
.music-list-box .music_controls {
right: 0;
top: unset;
bottom: 0;
transform: translate(0);
}
.music_controls .music-controls-item {
border-radius: 50px 50px 50px 0;
}
.event-box {
padding: 0;
}
.flexbox {
column-count: 2;
}
.video-box {
height: 250px;
}
.video-box .back-img a {
width: 60px;
height: 60px;
font-size: 1.3em;
}
.countdown-box p span {
font-size: 100px;
line-height: 60px;
}
.copyright .row {
--bs-gutter-x: 0;
}
.album-row .albums-col {
width: 100%;
}
.page-loader .h3-title {
font-size: 25px;
}
.secArtist_portal .features-grid {
grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}
.about-giff img {
top: 455px;
width: 55%;
}
.user-portal .user-Lord lord-icon {
height: 70px;
width: 70px;
}
.user-portal .welcome-title {
font-size: 30px;
text-align: left;
}
.user-portal .section {
padding: 0;
}
.secRoyalties .card-icon {
margin: 16px auto;
}
/* .about-me .container .content-grid .image-container img {
object-fit: fill;
} */
.user-portal .playlist-actions {
display: flex;
gap: 0rem;
justify-content: space-around;
}
.user-portal {
padding-bottom: 0 !important;
}
.user-portal .welcome-section {
padding: 0;
}
.parent_modalForm .left-panel {
min-height: 345px;
}
.parent_modalForm .platform-icons {
grid-template-columns: repeat(3, 1fr);
}
.artWork .guideline-item {
flex-direction: column;
justify-content: center;
align-items: center;
}
}
@media (max-width: 476px) {
.forminer_CTA a,
.forminner_Mailto a {
font-size: 13px;
}
.user-portal .playlist-cover {
background-position: center;
}
.user-portal .section-title {
font-size: 36px;
}
.form-Cta-unique lord-icon {
height: 45px;
width: 45px;
}
.powel_video {
margin-left: -93px;
}
.profile-image {
top: 55px;
}
.powel_video video {
height: 325px;
}
.hero_sec p {
line-height: normal;
}
.hero_sec .h1-title {
font-size: 26px !important;
}
.about-child .row h2 {
font-size: 35px;
}
.chat-box {
width: unset;
}
.page-loader img {
width: 30%;
}
.parent_majorPowel .powel_video {
margin-left: 0;
}
.parent_majorPowel .image-large {
overflow: visible;
}
.parent_majorPowel .powel_video video {
height: 295px;
}
.un_marginn {
margin-top: 3rem;
}
.parent_majorPowel .main-images {
grid-template-columns: 1fr;
}
.parent_majorPowel .powel_gif img {
right: 18px;
width: 26%;
top: 27px;
filter: hue-rotate(45deg);
opacity: .4;
z-index: 1;
}
.news_letter .input-group {
display: flex;
gap: 12px;
justify-content: center;
}
.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.content_QR h2 {
font-size: 30px;
}
.content_QR img {
width: 35%;
}
}
@media (max-width: 400px) {
.container,
.container-fluid {
padding: 0px 15px;
}
.site-header .col-lg-3 {
left: 0;
}
.hamburger {
right: 0;
}
.artist-row .col-lg-6 {
padding: 0;
}
.rotate-text {
left: 0;
}
.artist-box.even .rotate-text {
left: -30px;
bottom: -40px;
}
.secAbout .main h2,
.albums-section .main h2 {
font-size: 32px;
}
.event-box .back-img {
height: 300px;
}
span.big-text {
font-size: 90px;
}
.event-banner {
height: 250px;
}
.album-row .albums-col {
margin-right: 0;
margin-left: 0;
}
.contact-map {
padding: 30px 15px;
}
}
@media (max-width: 380px) {
.music-player .action-buttons {
position: absolute;
right: 0;
top: 65px;
}
}
/*==========Responsive End==========*/
.mobile-nav2 {
display: none;
width: 100%;
/* background-color: #aacde9; */
background: linear-gradient(135deg, #3d1b69, #1d1143, #16002d);
margin-top: 12px;
position: fixed;
z-index: 9999;
bottom: 0;
left: 0;
}
.mobile-nav2-ul {
display: flex;
justify-content: space-between;
align-items: end;
padding: 12px 4px;
margin: 0px;
}
.mobile-nav2-ul li {
width: 50%;
z-index: 999;
}
.li-icon {
display: flex;
flex-direction: column;
text-align: center;
}
.mobile-nav2-ul li a {
font-size: 11px;
line-height: 20px;
z-index: 999;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
color: #fff;
}
.whatsApp-logo {
position: absolute;
bottom: 32px;
border-radius: 50%;
width: 50px;
/* Adjust as needed */
height: 50px;
/* Adjust as needed */
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease-in-out;
animation: plusAnimation 1s infinite ease-in-out;
}
@keyframes plusAnimation {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
}
.whtsp {
position: relative;
}
.mobile-nav2-ul i {
font-size: 22px;
color: #ffffff;
}
@media only screen and (max-width: 660px) {
.mobile-nav2 {
display: block;
}
span.copyright-text {
margin-bottom: 3rem;
}
.whatsapp-button {
display: none;
}
.parent-chatBot img {
display: none !important;
}
.powel_video video {
height: 250px;
}
.parent_majorPowel .image-large {
box-shadow: unset;
display: flex;
justify-content: center;
}
}
@media (max-width: 365px) {
.powel_video video {
height: 300px;
}
}