*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins;
}

body{
background:#000;
color:white;
}

/* GLASSMORPHISM NAVBAR */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10%;
    /* Semi-transparent maroon */
    background: rgba(128, 0, 0, 0.8); 
    /* The magic blur effect */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
    
    position: fixed; /* Changed to fixed to stay over the sliding hero */
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    transition: all 0.4s ease;
}


/* Enhanced Logo Animation */
.navbar .logo {
    color: #fff;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.navbar .logo:hover {
    letter-spacing: 5px; /* Techy expansion effect */
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

/* Smooth Button Pulse */
.buy {
    background: #fff;
    color: #800000;
    padding: 10px 25px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    transition: 0.3s;
}

.buy:hover {
    background: #ff0000;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
    transform: scale(1.05);
}

/* HERO */

/* HERO SECTION UPDATE */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 120px 10% 100px 10%;
    height: 80vh; /* Set a specific height for the background to show */
    position: relative;
    overflow: hidden;
    
    /* Background properties */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Animation: name | duration | timing-function | iteration-count */
    animation: heroSlider 15s infinite ease-in-out;
}

/* Hide the old static image since it's now a background */
.hero-img {
    display: none;
}

/* Define the sliding background images */
@keyframes heroSlider {
    0%, 100% {
        background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/bg-2.jpg');
    }
    33% {
        background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/four.jpg');
    }
    66% {
        background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('../images/bg-3.jpg');
    }
}

/* Ensure text stays readable over the images */
.hero-text {
    z-index: 5;
    position: relative;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
}

/* PLATFORM LOGOS STYLE */
.platforms {
    margin-top: 20px;
    display: flex;
    gap: 25px;
    font-size: 28px; /* Adjust size of logos */
}

.platforms a {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.platforms a:hover {
    color: #ff4d4d; /* Changes to your accent red on hover */
    transform: translateY(-5px) scale(1.1); /* Subtle 3D lift */
    filter: drop-shadow(0 0 8px rgba(255, 77, 77, 0.8)); /* Neon glow */
}












.hero-text h1{
font-size:70px;
line-height:1.1;
}

.red{
color:red;
}

.listen{
margin-top:30px;
padding:15px 30px;
background:red;
border:none;
color:white;
}






/* HORIZONTAL NAVIGATION & LINK STATES */
.navbar ul {
    display: flex;             /* Makes the list horizontal */
    list-style: none;          /* Removes the bullets */
    gap: 30px;                 /* Space between links */
    margin: 0;
    padding: 0;
}

/* Base State (Normal) */
.navbar ul li a {
    text-decoration: none;
    font-weight: 500;
    color: #ffffff;            /* Pure white for clean visibility */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 5px 0;
}

/* Hover State (Interactive) */
.navbar ul li a:hover {
    color: #ff4d4d;            /* Bright red/coral for high-energy hover */
    text-shadow: 0 0 8px rgba(255, 77, 77, 0.6); /* Futuristic glow */
}

/* Visited State */
/* Note: Browsers limit visited styles for privacy, usually just color */
.navbar ul li a:visited {
    color: #d1d1d1;            /* Slightly dimmed white to show it's been clicked */
}

/* Active State (When the link is being clicked) */
.navbar ul li a:active {
    transform: scale(0.95);    /* Subtle "press" effect */
    color: #ffffff;
}

/* High-Tech Underline Effect */
.navbar ul li a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ff4d4d;
    box-shadow: 0 0 10px #ff4d4d;
    transition: width 0.3s ease;
}

.navbar ul li a:hover::after {
    width: 100%;               /* Line slides out on hover */
}













/* CURRENT PAGE HIGHLIGHT */
.navbar ul li a.active {
    color: #ff4d4d; /* Stays the hover color */
}

.navbar ul li a.active::after {
    width: 100%; /* Stays underlined */
    background-color: #ff4d4d;
    box-shadow: 0 0 10px #ff4d4d;
}

/* STREAMS */

.streams{
padding:80px 10%;
text-align:center;
background-color: #fff;
color: red;
}

.carousel{
display:flex;
gap:20px;
justify-content:center;
}

.album img{
width:200px;
border-radius:10px;
}

/* BEATS */

/* CREATIVE BIO SIDE STYLES */
.creative-bio-side {
    position: relative;
    padding-right: 20px;
}

.bio-intro-box {
    margin-top: 30px;
}

/* Dropcap for professional editorial feel */
.dropcap-text {
    font-size: 18px;
    line-height: 1.8;
    color: #ccc;
    margin-bottom: 30px;
}

.dropcap-text::first-letter {
    float: left;
    font-size: 60px;
    line-height: 1;
    font-weight: 700;
    padding-right: 12px;
    color: #800000; /* Maroon accent */
    text-transform: uppercase;
}

/* Feature highlights */
.bio-highlights {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 40px;
}

.highlight-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.highlight-row i {
    font-size: 24px;
    color: #800000;
    margin-top: 5px;
}

.highlight-row h4 {
    margin: 0;
    font-size: 18px;
    color: #fff;
    letter-spacing: 1px;
}

.highlight-row p {
    font-size: 14px;
    color: #aaa;
    margin: 5px 0 0;
}

/* Creative Quote Block */
.bio-quote {
    font-style: italic;
    border-left: 4px solid #800000;
    padding-left: 20px;
    margin-bottom: 35px;
    font-size: 20px;
    color: #fff;
    line-height: 1.4;
    font-family: 'Georgia', serif; /* Slight contrast for quotes */
}

/* Tablet/Mobile Adjustment for the Bio */
@media (max-width: 1024px) {
    .creative-bio-side {
        padding-right: 0;
        text-align: center;
    }
    .highlight-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .bio-quote {
        border-left: none;
        border-top: 2px solid #800000;
        padding-top: 15px;
        padding-left: 0;
    }
}

.beats{
padding:100px 10%;
}

.player{
background:#0a0a0a;
padding:30px;
border-radius:10px;
}

.track{
display:flex;
align-items:center;
gap:20px;
}

.track img{
width:80px;
border-radius:5px;
}

.play{
background:red;
border:none;
color:white;
padding:10px;
}

.track-list{
margin-top:30px;
list-style:none;
}

.track-list li{
display:flex;
justify-content:space-between;
padding:10px 0;
border-bottom:1px solid #333;
}

.buy-btn{
background:red;
border:none;
color:white;
padding:5px 15px;
}

/* INSTAGRAM */

.instagram{
padding:80px 10%;
text-align:center;
background-color: #fff;
}

.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:30px;
}

.grid img{
width:100%;
}


/* INSTAGRAM & MUSIC PRODUCTION SECTION */
.instagram {
    padding: 100px 10%;
    background-color: #fff;
    text-align: center;
}

.section-header h2 {
    color: #800000;
    font-size: 14px;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.main-heading {
    color: #000;
    font-size: 45px;
    font-weight: 700;
    margin-bottom: 40px;
}

/* GRID & HOVER EFFECTS */
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.grid-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    aspect-ratio: 1 / 1;
}

.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* High-Tech Hover Effect */
.grid-item:hover img {
    transform: scale(1.1) rotate(2deg); /* 3D zoom and tilt */
    filter: brightness(0.5) blur(2px);
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    font-size: 30px;
}

.grid-item:hover .grid-overlay {
    opacity: 1;
}

/* LOAD MORE BUTTON POSITIONING */
.load-more-container {
    margin-top: 40px;
}

.load-more {
    border: 2px solid #800000 !important; /* Adding border for white background visibility */
}

.fadeInUp {
    animation: fadeInUp 0.8s ease forwards;
}

.hidden-item {
    transition: all 0.5s ease;
}

/* Style for the final "Load All" state */
.load-all-state {
    background: #800000 !important; /* Maroon background */
    color: #fff !important;         /* White text */
    border: none !important;
    letter-spacing: 2px;
    box-shadow: 0 0 15px rgba(128, 0, 0, 0.4);
}

.load-all-state:hover {
    background: #a00000 !important;
    transform: translateY(-5px) scale(1.05); /* Extra pop for the final link */
}






/* PLAYLIST SECTION UPDATED */
.playlist {
    text-align: center;
    padding: 100px 10%;
    background: linear-gradient(135deg, #800000 0%, #4a0000 100%); /* Deep Maroon Gradient */
    display: flex;
    justify-content: center;
}

.playlist-container {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1000px;
    text-align: left;
}

/* Artwork Styling */
.playlist-art {
    position: relative;
    width: 350px;
    height: 350px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
    transition: transform 0.4s ease;
}

.playlist-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3D Hover Effect on Art */
.playlist-art:hover {
    transform: scale(1.03) rotate(-2deg);
}

.art-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(128, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.playlist-art:hover .art-overlay {
    opacity: 1;
}

.art-overlay i {
    font-size: 50px;
    color: white;
}

/* Text Adjustments */
.playlist-content h3 {
    color: #ffd700; /* Gold accent for "Official" feel */
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 16px;
}

.playlist-content h1 {
    font-size: 65px;
    color: #fff;
    margin: 10px 0 30px 0;
    line-height: 1;
}

.playlist-buttons {
    display: flex;
    gap: 20px;
}

/* Responsive Fix */
@media(max-width: 900px) {
    .playlist-container {
        flex-direction: column;
        text-align: center;
    }
    .playlist-buttons {
        justify-content: center;
    }
}

/* ABOUT */

.about{
display:flex;
padding:100px 10%;
gap:40px;
background-color: #fff;
color: red;
}

.about img{
width:40%;
border-radius:10px;
}

/* BIO / ABOUT SECTION STYLES */
.bio {
    padding: 100px 10%;
    background: #fff; /* Dark cinematic background */
    color: #000;
}

.bio-container {
    display: flex;
    align-items: center;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 3D Image Container */
.bio-image {
    position: relative;
    flex: 1;
}

.bio-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 20px 20px 0px #800000; /* Maroon offset shadow */
    transition: transform 0.5s ease;
}

.bio-image:hover img {
    transform: translate(-10px, -10px);
    box-shadow: 30px 30px 0px #b30000;
}

/* Floating Badge */
.experience-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: #800000;
    color: #fff;
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Text & Stats */
.bio-content { flex: 1.5; }

.sub-title {
    color: #800000;
    letter-spacing: 4px;
    font-size: 14px;
    text-transform: uppercase;
}

.bio-content h1 {
    font-size: 50px;
    margin: 10px 0 20px;
}

.description {
    font-size: 18px;
    line-height: 1.8;
    color: #000;
    margin-bottom: 40px;
}

/* Stats Grid */
.bio-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.stat-item {
    border-left: 3px solid #800000;
    padding-left: 15px;
    transition: transform 0.3s ease;
}

.stat-item:hover {
    transform: scale(1.1);
}

.stat-number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #000;
}

.stat-label {
    font-size: 12px;
    color: #800000;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* FOOTER */
/*
footer{
text-align:center;
padding:40px;
background:#050505;
}
*/



/* CLIENT MARQUEE STYLES */
.client-marquee {
    padding: 60px 0;
    background: linear-gradient(135deg, #800000 0%, #4a0000 100%);
    text-align: center;
    overflow: hidden;
}

.client-marquee h2 {
    color: #fff;
    font-size: 14px;
    letter-spacing: 4px;
    margin-bottom: 40px;
    opacity: 0.8;
}

.marquee-container {
    display: flex;
    overflow: hidden;
    user-select: none;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 100px; /* Space between logos */
    animation: scroll 25s linear infinite;
    white-space: nowrap;
}

.marquee-track img {
    height: 60px;
    filter: grayscale(1) brightness(2); /* Makes logos uniform white */
    transition: 0.3s;
    opacity: 0.6;
}

.marquee-track img:hover {
    filter: grayscale(0) brightness(1); /* Color pops on hover */
    opacity: 1;
}

.client-text {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 2px;
}

/* THE INFINITE LOOP ANIMATION */
@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

footer{

  
  background: #000;
  height: auto;
  width: 100%;
  background-size: cover;
  margin-top: 20px;
  padding: 20px;
}


.footer-links{
display:flex;
justify-content:center;
gap:30px;
margin-bottom:20px;
}

/* RESPONSIVE */

@media(max-width:900px){

.hero{
flex-direction:column;
}

.hero-img{
width:100%;
margin-top:30px;
}

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

.about{
flex-direction:column;
}

}





/* FADE-IN ANIMATION */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* Starts slightly lower */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* Glides to original position */
    }
}

/* Applying the animation to Hero components */
.hero-text h1 {
    opacity: 0; /* Hidden initially */
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.3s; /* Title appears first */
}

.platforms {
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.6s; /* Platforms appear second */
}

.listen {
    opacity: 0;
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.9s; /* Button appears last */
}


/* VISUALIZER RESET & FIX */
.logo {
    display: flex !important; /* Forces horizontal alignment */
    align-items: center;
    gap: 10px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
}

.nav-visualizer {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    width: 25px; /* Fixed width to prevent jumping */
    height: 20px;
}

.nav-visualizer span {
    display: inline-block;
    width: 3px;
    background-color: #ffffff; /* Explicit white color */
    height: 4px; /* Default height when not hovering */
    border-radius: 1px;
}

/* THE ANIMATION */
@keyframes barBounce {
    0%, 100% { height: 4px; }
    50% { height: 18px; }
}

/* Trigger animation when hovering anywhere on the navbar */
.navbar:hover .nav-visualizer span {
    animation: barBounce 0.6s infinite ease-in-out;
}

/* Staggered delay for that 'rhythm' look */
.nav-visualizer span:nth-child(1) { animation-delay: 0.0s; }
.nav-visualizer span:nth-child(2) { animation-delay: 0.2s; }
.nav-visualizer span:nth-child(3) { animation-delay: 0.1s; }
.nav-visualizer span:nth-child(4) { animation-delay: 0.3s; }




/* GLOBAL BUTTON STYLES */
button, 
.buy, 
.listen, 
.play, 
.buy-btn, 
.subscribe,
.btn-info {
    /* Base Look */
    background: #ffffff;
    color: #800000;
    padding: 12px 28px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
    display: inline-block;
    
    /* Smooth Transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-info .bio{

      /* Base Look */
    background: #800000;
    color: #fff;
    padding: 12px 28px;
    border: 1px solid #800000;
    font-weight: 700;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 1px;
    display: inline-block;
    
    /* Smooth Transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

/* Hover Effect (The Navigation Button Effect) */
button:hover, 
.buy:hover, 
.listen:hover, 
.play:hover, 
.buy-btn:hover, 
.subscribe:hover,
.btn-info:hover {
    background: #f0f0f0;
    color: #800000;
    transform: translateY(-5px); /* Professional 3D lift */
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.15); /* Soft glow */
}

/* Active/Press Effect */
button:active, 
.buy:active, 
.listen:active, 
.play:active, 
.buy-btn:active, 
.subscribe:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* Specific Adjustments for Small Buttons (Beat Store) */
.buy-btn, .play {
    padding: 8px 15px;
    font-size: 14px;
}



/* Add this to keep buttons visible on white backgrounds */
.streams button, 
.about button, 
.instagram button {
    border: 1px solid #800000;
}


/* BACK TO TOP - BULLETPROOF STYLES */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 55px;
    height: 55px;
    background: #800000; /* Solid Maroon for visibility */
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    
    /* Center the icon */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Initial Hidden State */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    
    z-index: 9999; /* Ensure it is above everything */
    cursor: pointer;
    transition: all 0.5s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

/* Show state triggered by JS */
.back-to-top.show {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: #ff0000;
    transform: translateY(-10px) scale(1.1);
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
}



/* ARTIST MANAGEMENT STYLES */
.streams {
    padding: 80px 10%;
    background: #f9f9f9;
    color: #000;
}

.artist-nav {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

/* Specific styling for the selection buttons */
.artist-btn {
    background: transparent;
    color: #800000;
    border: 2px solid #800000;
    padding: 10px 25px;
    cursor: pointer;
    font-weight: 700;
    transition: all 0.3s ease;
}

.artist-btn.active, .artist-btn:hover {
    background: #800000;
    color: #fff;
}

/* Detail Display Logic */
.artist-detail {
    display: none; /* Hide all by default */
    animation: fadeInUp 0.6s ease forwards;
}

.artist-detail.active {
    display: block; /* Show only active */
}

.artist-grid {
    display: flex;
    align-items: center;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

.artist-img { flex: 1; }
.artist-img img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 15px 15px 0px #800000;
}

.artist-info { flex: 1.5; }
.artist-info span { color: #800000; text-transform: uppercase; font-size: 14px; letter-spacing: 2px; }
.artist-info h3 { font-size: 40px; margin: 10px 0; }
.artist-info p { line-height: 1.8; color: #555; margin-bottom: 25px; }

@media (max-width: 768px) {
    .artist-grid { flex-direction: column; text-align: center; }
}


/* BEATS & SOCIAL SPLIT STYLES */
.beats-social-split {
    padding: 80px 10%;
    background: #0a0a0a; /* Dark background to make white/maroon pop */
    color: #fff;
}

.split-container {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.beats-playlist-side, .instagram-feed-side {
    flex: 1;
}

/* Playlist Styling */
.beat-list {
    margin-top: 30px;
}

.beat-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.beat-item:hover {
    background: rgba(128, 0, 0, 0.2);
    transform: scale(1.02);
}

.beat-number {
    font-size: 14px;
    color: #800000;
    margin-right: 20px;
    font-weight: 700;
}

.beat-info { flex-grow: 1; }
.beat-info h4 { margin: 0; font-size: 18px; }
.beat-info p { margin: 5px 0 0; font-size: 12px; color: #aaa; }

.play-btn-small, .buy-btn-small {
    background: transparent;
    border: 1px solid #800000;
    color: #fff;
    padding: 5px 12px;
    margin-left: 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: 0.3s;
}

.buy-btn-small { background: #800000; font-weight: 700; }

.play-btn-small:hover { background: #fff; color: #800000; }

/* INSTAGRAM FEED CONTAINER FIX */
.instagram-feed-side {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ig-feed-placeholder {
    width: 100%;
    height: 500px; /* Adjust this height to match your Beats list height */
    background: #111;
    border-radius: 15px;
    border: 1px solid rgba(128, 0, 0, 0.3); /* Maroon border */
    overflow-y: auto; /* Allows scrolling INSIDE the box only */
    overflow-x: hidden;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}

/* Ensure the Elfsight widget respects the container boundaries */
.elfsight-app-03d3f753-979c-4d99-8f08-6ba89aa65742 {
    width: 100% !important;
    max-width: 100% !important;
}

/* Custom Scrollbar for the IG Feed to match your dark theme */
.ig-feed-placeholder::-webkit-scrollbar {
    width: 5px;
}
.ig-feed-placeholder::-webkit-scrollbar-track {
    background: #000;
}
.ig-feed-placeholder::-webkit-scrollbar-thumb {
    background: #800000;
    border-radius: 10px;
}


/* PACKAGE CARD STYLES */
.packages { padding: 80px 10%; background: #f4f4f4; text-align: center; }

.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.package-card {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: 0.4s;
    position: relative;
    border: 1px solid transparent;
}

.package-card.featured {
    border: 2px solid #800000;
    transform: scale(1.05);
}

.package-card:hover { transform: translateY(-10px); }

.package-card h3 { color: #000; font-size: 24px; margin-bottom: 20px; }

.package-card .price { font-size: 18px; color: #555; margin-bottom: 30px; }

.package-card .price span { color: #800000; font-weight: 700; font-size: 28px; }

.package-card ul { list-style: none; padding: 0; margin-bottom: 30px; text-align: left; }

.package-card ul li { margin-bottom: 15px; color: #666; }

.package-card ul li i.fa-check { color: #800000; margin-right: 10px; }

.package-card ul li.disabled { opacity: 0.4; text-decoration: line-through; }

.package-card .badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: #800000;
    color: #fff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    text-transform: uppercase;
}

/* CREATIVE PAGINATION STYLES */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
}
.pagination-line {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(128, 0, 0, 0.2);
    z-index: 1;
}

.pagination-controls {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    background: #fff; /* Match your section background */
    display: inline-flex;
    padding: 0 40px;
}

.page-numbers {
    display: flex;
    gap: 15px;
}

.page-num {
    font-weight: 700;
    font-size: 18px;
    color: #ccc;
    cursor: pointer;
    transition: 0.3s;
    padding: 5px 10px;
}

.page-num.active {
    color: #800000;
    border-bottom: 2px solid #800000;
    transform: translateY(-5px);
}

.pag-arrow {
    background: #800000;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.pag-arrow:hover {
    color: #800000;
    letter-spacing: 4px;
}

.pag-arrow:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.5;
}


/* WIKIPEDIA BIOGRAPHY LAYOUT */
.wiki-bio-section {
    padding: 140px 10% 80px;
    background: #fff; /* White background for readability */
    color: #333;
}

.wiki-container {
    display: flex;
    flex-direction: row-reverse; /* Infobox on the right */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Infobox (The Right Sidebar) */
.wiki-infobox {
    width: 300px;
    background: #f8f9fa;
    border: 1px solid #a2a9b1;
    padding: 10px;
    font-size: 14px;
}

.infobox-title {
    background: #cedff2;
    text-align: center;
    padding: 5px;
    font-size: 18px;
    margin-bottom: 10px;
}

.infobox-img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #a2a9b1;
    margin-bottom: 10px;
}

.infobox-table { width: 100%; border-collapse: collapse; }
.infobox-table th { text-align: left; vertical-align: top; width: 40%; padding: 5px; }
.infobox-table td { padding: 5px; }

/* Main Content Styles */
.wiki-content { flex: 1; }
.wiki-main-header { font-size: 40px; border-bottom: 1px solid #a2a9b1; margin-bottom: 20px; }
.wiki-lead { font-size: 17px; line-height: 1.6; margin-bottom: 30px; }

.wiki-toc {
    background: #f8f9fa;
    border: 1px solid #a2a9b1;
    padding: 15px;
    display: inline-block;
    margin-bottom: 30px;
}

.wiki-toc h3 { font-size: 16px; margin-bottom: 10px; text-align: center; }
.wiki-toc ul { list-style: none; padding-left: 0; }
.wiki-toc a { text-decoration: none; color: #0645ad; font-size: 14px; }
.wiki-toc a:hover { text-decoration: underline; }

.wiki-section-h2 {
    font-size: 26px;
    border-bottom: 1px solid #a2a9b1;
    margin-top: 40px;
    margin-bottom: 15px;
}

.wiki-content p { margin-bottom: 20px; line-height: 1.8; }

/* Mobile View */
@media (max-width: 900px) {
    .wiki-container { flex-direction: column; }
    .wiki-infobox { width: 100%; }
}

/* ARTIST PORTFOLIO STYLES */
.artist-hero {
    height: 70vh;
    background: url('../images/bg-7.jpg') no-repeat center center/cover;
    display: flex;
    align-items: flex-end;
    padding: 60px 10%;
    position: relative;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, #000, transparent);
}

.hero-content {
    position: relative;
    z-index: 10;
}

.hero-content h1 {
    font-size: 70px;
    letter-spacing: 5px;
    margin: 10px 0;
    text-shadow: 2px 2px 20px rgba(0,0,0,0.8);
}

.label-tag {
    background: #800000;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
}

.social-pills { display: flex; gap: 15px; }
.social-pills a {
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,0.1);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    transition: 0.3s;
}
.social-pills a:hover { background: #800000; }

/* LAYOUT GRID */
.portfolio-container { padding: 60px 10%; background: #000; }
.portfolio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 80px;
}

.section-title {
    font-size: 24px;
    border-left: 4px solid #800000;
    padding-left: 15px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.mini-wiki { margin-top: 30px; border-top: 1px solid #333; }
.wiki-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #222;
}
.wiki-row span:first-child { color: #888; font-weight: bold; }

/* GALLERY */
.port-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.gal-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    filter: grayscale(0);
    transition: 0.4s;
}
.gal-item img:hover { filter: grayscale(0); transform: scale(1.05); }

/* VIDEOS */
.video-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}
.v-card iframe { width: 100%; height: 300px; border-radius: 12px; border: 1px solid #333; }
.v-card h4 { margin-top: 15px; text-align: center; color: #888; }

@media (max-width: 900px) {
    .portfolio-grid, .video-grid { grid-template-columns: 1fr; }
    .hero-content h1 { font-size: 40px; }
}


/* THE OVERLAY (Blurs the background) */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Darken screen */
    backdrop-filter: blur(10px); /* The "Out of Focus" effect */
    -webkit-backdrop-filter: blur(10px);
    display: none; /* Hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Higher than navbar */
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* THE POPUP BOX */
.popup-content {
    background: #111;
    width: 90%;
    max-width: 800px;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(128, 0, 0, 0.3);
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    transform: translateY(20px);
    transition: transform 0.4s ease;
}

/* Centering the content inside */
.popup-split {
    display: flex;
    flex-wrap: wrap;
}

.popup-img {
    flex: 1;
    min-width: 300px;
    position: relative;
}

.popup-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.popup-text {
    flex: 1.2;
    padding: 40px;
    min-width: 300px;
    background: linear-gradient(135deg, #111 0%, #050505 100%);
}

/* Close Button Styling */
.close-popup {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 35px;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
}

/* Text and Form Styling */
.popup-text .tag { color: #800000; font-weight: bold; font-size: 12px; letter-spacing: 2px; }
.popup-text h2 { margin: 10px 0; font-size: 28px; }
.popup-text p { color: #888; font-size: 14px; margin-bottom: 20px; }

#subscribe-form input {
    width: 100%;
    padding: 15px;
    background: #1a1a1a;
    border: 1px solid #333;
    color: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background: #800000;
    color: #fff;
    border: none;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.submit-btn:hover { background: #b30000; }


/* LIGHT THEME ARTIST SECTION */
.light-theme {
    background: #ffffff;
    color: #111;
    padding: 150px 10% 100px;
}

.section-intro h1 {
    font-size: 60px;
    font-weight: 900;
    margin-bottom: 10px;
    color: #000;
}

/* ROSTER VERSION 2 (WHITE BACKGROUND) */
.roster-section-v2 {
    background: #ffffff;
    padding: 120px 10% 80px;
    color: #111;
    text-align: center;
}

.roster-header {
    margin-bottom: 60px;
}

.roster-tag {
    color: #800000;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 10px;
}

.roster-header h1 {
    font-size: 50px;
    color: #000;
    margin: 0;
}

.roster-header p {
    color: #666;
    font-size: 16px;
}

/* The Grid: 5 columns on desktop, 2 on mobile */
.artist-mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

.mini-card {
    perspective: 1000px;
}

.card-inner {
    position: relative;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    background: #f4f4f4;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.card-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
    transition: 0.5s ease;
}

/* HOVER STATE: Only Zoom */
.card-inner:hover img {
    transform: scale(1.15); /* The Zoom effect */
}

.card-inner:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    transform: translateY(-8px); /* Subtle lift */
}

/* Hover Effects */
.card-inner:hover .mini-info {
    transform: translateY(0);
}

.mini-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 25px 15px;
    /* Solid brand gradient for text readability */
    background: linear-gradient(to top, rgba(128, 0, 0, 0.9) 0%, transparent 100%);
    color: #fff;
    text-align: left;
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.card-inner:hover .mini-info {
    transform: translateY(0);
    opacity: 1;
}

.mini-info h3 { font-size: 18px; margin: 0; font-weight: 700; }
.mini-info p { font-size: 12px; opacity: 0.9; margin: 5px 0 10px; }
.mini-info a { 
    color: #fff; 
    text-decoration: none; 
    font-size: 11px; 
    font-weight: bold;
    border-bottom: 1px solid #fff;
}

/* Responsive Fix */
@media (max-width: 600px) {
    .artist-mini-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .card-inner {
        height: 250px;
    }
}
/* DARK DISTRIBUTION SECTION */
.distro-section {
    background: #000;
    padding: 100px 10%;
    color: #fff;
}

.tier-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 50px;
}

.tier-card {
    background: #111;
    border: 1px solid #222;
    padding: 40px;
    border-radius: 15px;
    flex: 1;
    min-width: 280px;
    text-align: center;
    transition: 0.4s;
    position: relative;
}

.tier-card:hover {
    border-color: #800000;
    transform: scale(1.03);
}

.tier-card.featured {
    border: 2px solid #800000;
    box-shadow: 0 0 30px rgba(128, 0, 0, 0.2);
}

.tier-icon i {
    font-size: 40px;
    color: #800000;
    margin-bottom: 20px;
}

.tier-card h3 { font-size: 24px; margin-bottom: 20px; }
.tier-card ul { list-style: none; margin-bottom: 30px; padding: 0; color: #888; }
.tier-card li { margin-bottom: 10px; font-size: 14px; }

.tier-btn {
    background: transparent;
    border: 1px solid #800000;
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.tier-card:hover .tier-btn { background: #800000; }

/* RESPONSIVENESS */
@media (max-width: 800px) {
    .creative-roster { grid-template-columns: 1fr; }
    .section-intro h1 { font-size: 40px; }
}

/* LABEL CONTACT SECTION */
.label-contact {
    background: #fff;
    padding: 100px 10%;
    border-top: 1px solid #1a1a1a;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    align-items: center;
}

.contact-info .tag {
    color: #000;
    font-weight: bold;
    letter-spacing: 2px;
}

.contact-info h2 {
    font-size: 42px;
    margin: 20px 0;
    color: #000;
}

.contact-info p {
    color: #888;
    line-height: 1.8;
}

.contact-details { margin-top: 40px; }
.detail-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    color: #000;
}
.detail-item i { color: #800000; font-size: 20px; }

/* Form Styling */
#demo-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#demo-form input, #demo-form textarea {
    width: 100%;
    padding: 15px;
    background: #111;
    border: 1px solid #222;
    color: #fff;
    border-radius: 5px;
    font-size: 14px;
    outline: none;
    transition: 0.3s;
}

#demo-form input:focus, #demo-form textarea:focus {
    border-color: #800000;
}

.input-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.submit-btn-glow {
    background: #800000;
    color: #fff;
    border: none;
    padding: 18px;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.4s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.submit-btn-glow:hover {
    background: #b30000;
    box-shadow: 0 0 20px rgba(128, 0, 0, 0.4);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .input-group { grid-template-columns: 1fr; }
}

/* ADVERT PORTFOLIO STYLES */
.ad-portfolio {
    padding: 120px 0 60px; /* Space for fixed navbar */
    background: #fff;
}

.ad-intro {
    text-align: center;
    margin-bottom: 50px;
}

.ad-intro h1 {
    font-size: 42px;
    letter-spacing: 4px;
    color: #000;
    margin-bottom: 15px;
}

.ad-intro p {
    color: #888;
    max-width: 600px;
    margin: 0 auto;
}

/* THE GRID: 3 columns */
.ad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 5%;
}

.ad-card {
    background: #111;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease;
    border: 1px solid #222;
}

.ad-card:hover {
    transform: translateY(-10px);
    border-color: #800000; /* Maroon hover border */
}

/* Responsive YouTube Container (16:9 Aspect Ratio) */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.ad-details {
    padding: 20px;
}

.ad-details h3 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #fff;
}

.ad-details p {
    font-size: 14px;
    color: #888;
    margin: 0;
}

/* RESPONSIVE BREAKPOINTS */
@media (max-width: 992px) {
    .ad-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for tablets */
    }
}

@media (max-width: 600px) {
    .ad-grid {
        grid-template-columns: 1fr; /* 1 column for phones */
    }
    .ad-intro h1 {
        font-size: 30px;
    }
}

/* EPK SPECIFIC STYLES */
.epk-page { background: #000; color: #fff; scroll-behavior: smooth; }

/* HERO */
.epk-hero {
    height: 100vh;
    position: relative;
    overflow: hidden;
}
.hero-img-wrapper img {
    width: 100%; height: 100%; object-fit: cover;
}
.epk-nav {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}
.epk-nav ul { display: flex; gap: 30px; list-style: none; }
.epk-nav a { 
    color: #fff; text-decoration: none; font-weight: bold; font-size: 14px; 
    text-transform: uppercase; letter-spacing: 2px;
}

.hero-title {
    position: absolute;
    bottom: 10%; left: 5%;
}
.hero-title h1 { font-size: 80px; margin: 0; letter-spacing: 10px; }

/* EPK BIO V2: EDITORIAL STYLE */
.epk-bio-v2 {
    background: #FFC0CB; /* White background as requested */
    padding: 120px 0;
    color: #111;
    overflow: hidden;
}

.epk-bio-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

/* Image Side */
.epk-bio-image {
    flex: 1;
    position: relative;
    max-width: 500px;
}

.epk-bio-image img {
    width: 100%;
    height: 600px; /* High cinematic portrait */
    object-fit: cover;
    border-radius: 5px;
    position: relative;
    z-index: 2;
    display: block;
}

/* The maroon accent box behind the image (from screenshot style) */
.image-accent-box {
    position: absolute;
    top: 30px;
    left: -30px;
    width: 100%;
    height: 100%;
    background: #800000;
    z-index: 1;
    border-radius: 5px;
}

/* Text Side */
.epk-bio-text-card {
    flex: 1.2;
    padding: 40px;
    background: #f9f9f9; /* Subtle grey-off-white box */
    border-radius: 10px;
    box-shadow: 20px 20px 60px rgba(0,0,0,0.05);
    z-index: 3;
}

.bio-tag {
    color: #800000;
    font-weight: bold;
    letter-spacing: 3px;
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
}

.epk-bio-text-card h2 {
    font-size: 48px;
    font-weight: 900;
    color: #000;
    margin-bottom: 30px;
}

.bio-body p {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    margin-bottom: 20px;
}

.bio-signature {
    margin-top: 30px;
    border-top: 1px solid #ddd;
    padding-top: 20px;
    font-weight: bold;
    color: #800000;
}

/* RESPONSIVE: Stack on mobile */
@media (max-width: 992px) {
    .epk-bio-flex {
        flex-direction: column;
        text-align: center;
    }
    
    .epk-bio-image {
        max-width: 80%;
        margin-bottom: 50px;
    }
    
    .image-accent-box {
        left: 20px; /* Adjust for mobile centering */
    }

    .epk-bio-text-card h2 {
        font-size: 32px;
    }
}


/* EPK MUSIC SECTION */
.epk-music {
    padding: 100px 0;
    background: #000;
    text-align: center; /* Global center alignment */
}

.release-card {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(20, 20, 20, 0.6);
    padding: 60px 40px;
    border-radius: 20px;
    border: 1px solid rgba(128, 0, 0, 0.3);
    backdrop-filter: blur(15px);
}

/* Artwork Zoom & Glow */
.release-artwork {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 0 auto 40px;
}

.release-artwork img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    position: relative;
    z-index: 2;
    transition: transform 0.5s ease;
}

.artwork-glow {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #800000;
    filter: blur(40px);
    opacity: 0.4;
    z-index: 1;
}

.release-card:hover .release-artwork img {
    transform: scale(1.05);
}

/* Typography */
.new-tag {
    color: #800000;
    font-weight: bold;
    letter-spacing: 4px;
    font-size: 12px;
}

.song-title {
    font-size: 48px;
    font-weight: 900;
    margin: 10px 0;
    letter-spacing: 2px;
}

.artist-name {
    font-size: 18px;
    color: #888;
    margin-bottom: 30px;
}

.song-bio {
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.8;
    color: #ccc;
}

/* Music Player Styling */
.custom-player {
    background: #111;
    padding: 20px;
    border-radius: 50px;
    margin-bottom: 40px;
}

.player-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.play-btn {
    background: #800000;
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

.progress-container {
    flex: 1;
    height: 6px;
    background: #333;
    border-radius: 10px;
    cursor: pointer; /* Makes user realize they can click to seek */
}

.progress-bar {
    width: 40%;
    height: 100%;
    background: #800000;
    border-radius: 10px;
    transition: width 0.1s linear; /* Makes the movement smooth */
}

/* Store Buttons Grid */
.store-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.store-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background: transparent;
    border: 1px solid #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    transition: 0.3s;
    font-size: 14px;
}

.store-item:hover {
    background: #fff;
    color: #000;
    transform: translateY(-3px);
}

.store-item i {
    font-size: 18px;
}

/* EPK PRESS & MEDIA */
.epk-press {
    padding: 100px 0;
    background: #FFC0CB;
}

.media-flex-container {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Video Side (60% width) */
.video-column {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #333;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-item h4 {
    margin-top: 15px;
    color: #000;
    font-size: 14px;
    letter-spacing: 1px;
}

/* Instagram Side (40% width) */
.instagram-column {
    flex: 1;
    background: #111;
    border-radius: 15px;
    padding: 20px;
    border: 1px solid #222;
    position: sticky;
    top: 100px; /* Stays visible as you scroll videos */
}

.insta-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #fff;
    font-weight: bold;
}

.insta-header i {
    color: #800000;
    font-size: 24px;
}

.insta-feed-placeholder {
    width: 100%;
    min-height: 600px; /* Space for the feed */
    background: #000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .media-flex-container {
        flex-direction: column;
    }
    
    .instagram-column {
        position: static;
        width: 100%;
    }
}

/* GALLERY 4x3 */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 200px);
    gap: 15px;
    margin: 50px 0;
}
.gal-cell img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.gallery-nav { text-align: center; }
.gallery-nav button { background: #111; color: #fff; border: 1px solid #333; padding: 10px 25px; cursor: pointer; }

/* GALLERY HOVER EFFECTS */
.gal-cell {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    background: #111;
}

.gal-cell img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;
    filter: brightness(0.8);
}

.gal-cell:hover img {
    transform: scale(1.1);
    filter: brightness(1.1);
}

/* LIGHTBOX OVERLAY */
.lightbox-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(15px); /* The 'out of focus' effect */
    justify-content: center;
    align-items: center;
}

#lightboxImg {
    max-width: 85%;
    max-height: 85%;
    border-radius: 10px;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox-overlay[style*="display: flex"] #lightboxImg {
    transform: scale(1); /* Pop-in effect when flex is active */
}

.close-lightbox {
    position: absolute;
    top: 40px;
    right: 40px;
    color: white;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10001;
}

/* BOOKING FORM */
.epk-booking { padding: 100px 0; background: #FFC0CB;; }
.booking-card { max-width: 700px; margin: 0 auto; background: #111; padding: 50px; border-radius: 15px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.booking-card input, .booking-card textarea {
    width: 100%; padding: 15px; background: #000; border: 1px solid #fff; color: #fff; margin-bottom: 20px;
}
.booking-card button { width: 100%; padding: 15px; background: #800000; color: #fff; border: none; font-weight: bold; }

/* ARTIST BUZZ SECTION */
.artist-buzz {
    padding: 80px 0;
    background: #0a0a0a;
    border-bottom: 1px solid #1a1a1a;
}

.buzz-header {
    text-align: center;
    margin-bottom: 50px;
}

.buzz-header h2 {
    font-size: 36px;
    letter-spacing: 5px;
    font-weight: 800;
}

.buzz-header .subtitle {
    color: #800000;
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: bold;
}

/* THE GRID */
.buzz-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    padding: 0 5%;
}

.buzz-card {
    background: #111;
    padding: 30px;
    border-radius: 15px;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease;
    border: 1px solid #222;
}

.buzz-card:hover {
    transform: translateY(-10px);
    border-color: #800000;
}

.buzz-card p {
    font-style: italic;
    color: #ddd;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 15px;
}

.buzz-tag {
    font-size: 10px;
    background: #800000;
    padding: 3px 10px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

.buzz-icon {
    font-size: 20px;
    color: #1da1f2; /* Twitter Blue */
    margin-bottom: 15px;
}

.buzz-footer .source {
    font-weight: bold;
    font-size: 13px;
    color: #888;
}

/* Different styling for reviews to make them pop */
.buzz-card.review {
    background: linear-gradient(145deg, #111, #1a1a1a);
}























/* RESPONSIVE DESIGN - MOBILE & TABLET OPTIMIZATION */

/* Tablets and Small Laptops (under 1024px) */
@media (max-width: 1024px) {
    .hero {
        flex-direction: column-reverse; /* Puts text below image on mobile */
        text-align: center;
        padding-top: 120px;
    }

    .hero-text h1 { font-size: 50px; }
    
    .platforms { justify-content: center; }

    .bio-container, .split-container, .artist-grid {
        flex-direction: column;
        gap: 40px;
    }
}

/* Mobile Phones (under 768px) */
@media (max-width: 768px) {
    .navbar {
        padding: 15px 5%;
        flex-wrap: wrap;
        justify-content: center;
    }

    
    .hero-title h1{ font-size: 35px; }

    .navbar nav {
        order: 3;
        width: 100%;
        margin-top: 15px;
    }

    .navbar ul {
        justify-content: space-around;
        gap: 10px;
    }

    .navbar .buy {
        display: none; /* Hide top buy button on mobile to save space */
    }

    .grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    }

    .playlist-container {
        flex-direction: column;
        text-align: center;
    }

    .playlist-art {
        width: 250px;
        height: 250px;
    }

    .bio-stats {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .stat-item {
        border-left: none;
        border-bottom: 2px solid #800000;
        padding: 0 0 10px 0;
        width: 100%;
    }
}

/* Small Phones (under 480px) */
@media (max-width: 480px) {
    .grid {
        grid-template-columns: 1fr; /* 1 column for small screens */
    }
    
    .hero-text h1 { font-size: 35px; }
    
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }
}


@media (max-width: 1024px) {
    .beats-playlist-side, .instagram-feed-side {
        width: 100%; /* Take full width when stacked */
    }
    
    .ig-feed-placeholder {
        height: 400px; /* Shorter box on mobile */
    }
}