 <style>
    /* Song cards */
    .song-card {
      position: relative;
      border-radius: 10px;
      cursor: pointer;
      background: transparent;
      padding: 10px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      max-width: 250px;
      margin: auto;
      overflow: hidden; /* keep for rounded corners, but hover uses shadow not border */
    }

    .song-card:hover {
      transform: scale(1.05);
      background-color: rgba(211, 211, 211, 0.08);
      border: 1px solid rgba(29, 185, 84, 0.8);
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(29, 185, 84, 0.4);
    }

    .song-card img {
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      object-fit: cover;
      border-radius: 8px;
      display: block;
    }


    /* If card text is below image, keep it small but visible */
    .song-card h5 {
      margin-top: 8px;
      font-size: 1rem;
    }

    /* Optional: give columns a little more width by reducing gutter (if desired) */
    .row.g-4 { 
      gap: 10px; /* decrease gap to fit slightly bigger visuals */
    }


    .col-md-3 {
      transition: all 0.3s ease;
    }


    .song-card p {
      position: relative;               /* sit above image */
      z-index: 1;
      background: none;
      margin: 0;
      padding: 5px;
      border-radius: 6px;
      font-size: 0.9rem;
      color: #fff;
    }
 
    .song-card h5 {
      margin: 5px 0;
      font-size: 1.1rem;
      font-weight: 600;
      color: #ffffff;
      transition: color 0.3s ease;
    }

    .song-card p {
      margin: 0;
      font-size: 0.9rem;
      color: #b3b3b3;
      transition: color 0.3s ease;
    }
    /* Play button: centered on card cover */
    .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* perfectly center horizontally and vertically */
      width: 50px; /* make it slightly bigger if needed */
      height: 50px;
      background: rgba(29, 185, 84, 0.9); /* Spotify green with slight transparency */
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      opacity: 0; /* hidden by default */
      transition: opacity 0.3s ease, transform 0.3s ease;
      z-index: 2; /* ensures it stays on top of image */
    }

    /* Show play button on hover */
    .song-card:hover .play-btn {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1.1); /* slight zoom on hover */
    }

    .play-btn i {
      font-size: 30px; /* icon size */
      color: white;
      pointer-events: none; /* ensures clicks go to the button container */
    }

    /* ✅ Minimized Bottom Player */
    .player-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 70px;
      background: #000;
      border-top: 1px solid #282828;
      display: flex; /* ✅ visible but hidden offscreen until .show is added */
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
      z-index: 1000;
    }

    /* Left: Song Info */
    .player-info {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 25%;
    }
    .player-info img {
      width: 45px;
      height: 45px;
      object-fit: cover;
      border-radius: 6px;
    }
    .player-text {
      font-size: 13px;
    }
    .player-text div:first-child {
      font-weight: bold;
    }
    .player-text div:last-child {
      color: #aaa;
    }
    /* Center: Controls */
    .player-controls {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .controls {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    .controls i {
      font-size: 18px;
      cursor: pointer;
      color: #b3b3b3;
      transition: color 0.2s;
    }
    .controls i:hover {
      color: white;
    }
    .controls .bi-play-circle-fill,
    .controls .bi-pause-circle-fill {
      font-size: 32px; /* smaller play/pause button */
      color: #1DB954;
    }
    .progress-container {
      width: 75%;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
      color: #aaa;
      margin-top: 3px;
    }
    /* Seek bar */
    #seekBar {
      width: 75%;
      -webkit-appearance: none;
      background: #404040;
      height: 4px;
      border-radius: 2px;
      cursor: pointer;
    }
    #seekBar::-webkit-slider-thumb {
      -webkit-appearance: none;
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background: #1DB954;
      cursor: pointer;
    }
    #seekBar::-moz-range-thumb {
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background: #1DB954;
      cursor: pointer;
    }
    /* Right: Extras */
    .player-extras {
      width: 25%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      color: #b3b3b3;
    }
    .volume-slider {
      -webkit-appearance: none;
       width: 100px;
       background: #404040;
       height: 4px;
       border-radius: 2px;
       cursor: pointer;
    }
    .volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
       height: 12px;
       width: 12px;
       border-radius: 50%;
       background: #1DB954;
       cursor: pointer;
    }
    .volume-slider::-moz-range-thumb {
      height: 12px;
      width: 12px;
      border-radius: 50%;
      background: #1DB954;
      cursor: pointer;
    }
    


    .nav-pills .nav-link {
      color: #b3b3b3; /* soft grey by default */
      font-weight: 500;
      transition: color 0.3s ease, background-color 0.3s ease;
      border-radius: 20px;
    }

    .nav-pills .nav-link.active,
    .nav-pills .nav-link:hover {
      color: #1DB954 !important; /* Spotify green */
      background-color: rgba(29, 185, 84, 0.1); /* light green tint on hover */
    }

    .nav-pills .nav-link:focus {
      box-shadow: none !important;
    }

    footer {
       border-top: 1px solid rgba(255,255,255,0.2);
    }
    .modal {
      z-index: 1100;
    }
    /* Modal player bar: same style but not fixed at bottom */
    .modal-player-bar { 
      position: relative; /* not fixed */  
      bottom: auto; 
      background: #181818; 
      border-top: 1px solid rgba(255,255,255,0.2); 
      border-radius: 10px; 
      margin-top: 15px; 
      padding: 10px; 
    }
    .modal-player-bar .player-info img {
      width: 50px;
      height: 50px;
    }

    .modal-player-bar .controls .bi-play-circle-fill,
    .modal-player-bar .controls .bi-pause-circle-fill {
        color: #1DB954;
    }

    #modalSeekBar {
        -webkit-appearance: none;
        width: 75%;
        height: 4px;
        background: #404040;       /* same as bottom player */
        border-radius: 2px;
        cursor: pointer;
    }
    #modalSeekBar::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background: #1DB954;       /* same green */
        cursor: pointer;
    }
    #modalSeekBar::-moz-range-thumb {
        height: 10px;
        width: 10px;
        border-radius: 50%;
        background: #1DB954;
        cursor: pointer;
    }

    /* 🔹 Make header fixed at top */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      z-index: 1000;
      padding: 15px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 25px;
    }

    /* Optional: Add a little shadow when scrolling for depth */
    header.scrolled {
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    }

    /* --- Header Search Style --- */
    header .search-container {
      position: relative;
      max-width: 250px;
    }

    header .search-bar {
      background-color: #2c2c2c;
      color: rgba(255, 255, 255, 0.7);
      border: none;
      border-radius: 25px 0 0 25px;
      padding: 8px 15px;
      font-size: 14px;
      outline: none;  

    }

    header .search-bar::placeholder {
      color: rgba(255,255,255,0.6);
    }

    header .btn-search i {
      color: #1db954; /* same green as your login button */
      font-size: 1.3rem;
    }

    header .search-container .form-control:focus ~ .btn-search i {
      color: #dee2e6 !important;
    }

    header .search-bar:focus {
      background-color: #3a3a3a; /* slightly lighter grey on focus */
      color: rgba(255,255,255,0.85); /* text remains semi-white */
      box-shadow: none; /* remove default browser glow */ 
    }

    header .btn-search {
      background-color:   #3a3a3a; /* grey background behind the icon */
      border: none;
      border-radius: 0 25px 25px 0; /* match rounded search bar */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
      cursor: pointer;
      transition: background 0.3s, color 0.3s;;
    }

    header .btn-search:hover i {
      color: #21e065;
    }


    /* ===== Header General ===== */
    header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      z-index: 1000;
      padding: 15px 20px;
      display: flex;
       align-items: center;
       justify-content: space-between;
       gap: 25px;
    }
    body {
      background-color: #121212;
      color: white;
      margin: 0;
      font-family: "Circular Std", Arial, sans-serif;
    }



    /* ===== Icon and Button Sizes ===== */
    .header-icon {
      height: 42px;
      width: 42px;
      object-fit: contain;
      opacity: 0.9;
      transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .header-icon:hover {
      transform: scale(1.1); /* grows slightly on hover */
      opacity: 1;
    }
    .header-btn {
      padding: 8px 20px;
      font-weight: 600;
      border-radius: 25px;
      font-size: 14px;
    }

    #downloadBar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1100;

    }
    header {
      top: 0;
    }

    .modal-player-bar {
      display: flex; /* ensure player controls show */
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }

    .modal-song-info h4 {
      margin: 0;
      font-size: 1.3rem;
      font-weight: 600;
    }
    .modal-song-info p {
      margin-top: 5px;
      font-size: 0.95rem;
      color: #b3b3b3;
    }

    .player-text {
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: calc(100% - 50px); /* leave room for the cover image */
    }

    .player-text div:first-child {
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .player-text div:last-child {
      color: #aaa;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }



    .player-bar {
      background-color: rgba(0, 0, 0, 0.5); 
      backdrop-filter: blur(4px); /* adds smooth glassy blur */
    }
    .player-bar {
      transition: bottom 0.4s ease;
      bottom: -100px;
    }

    .player-bar {
      opacity: 0;
      pointer-events: none;
    }
    .player-bar.show {
      bottom: 0;
      opacity: 1;
      pointer-events: all;
    }

/* 🎵 Create Beats button general look */
.header-btn,
.header-btn-create {
  font-weight: 700;
  padding: 8px 20px;
  font-size: 1rem;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* ✅ Mobile version — smaller and inline */
@media (max-width: 768px) {
  .header-btn,
  .header-btn-create {
    font-size: 0.8rem !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
  }

  header {
    flex-wrap: nowrap !important; /* keep all in one line */
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    padding: 8px 10px !important;
  }

  .header-icon {
    width: 28px !important;
    height: 28px !important;
  }
  .search-container {
    flex: 1 !important;
    max-width: 150px !important;  /* keep small but usable */
  }

  .search-bar {
    font-size: 12px !important;
    padding: 5px 8px !important;
  }

  .btn-search {
    padding: 4px 8px !important;          /* smaller padding */
    border-radius: 0 20px 20px 0 !important;
  }

  .btn-search i {
    font-size: 0.9rem !important;         /* shrink icon */
  }

  .header-btn {
    font-size: 0.8rem !important;
    padding: 4px 10px !important;
  }
}




/* --- Mobile horizontal scroll for Trending Beats --- */
@media (max-width: 768px) {
  #trending .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* smooth on iPhones */
    padding-bottom: 10px;
  }

  #trending .col {
    flex: 0 0 auto;            /* each card keeps its width */
    width: 180px;              /* control visible card width */
    scroll-snap-align: start;  /* snaps cleanly on scroll */
  }

  #trending .song-card {
    width: 100%;
  }

  /* Hide scrollbar for a cleaner BeatStars feel */
  #trending .row::-webkit-scrollbar {
    display: none;
  }
  #trending .row {
    -ms-overflow-style: none;  /* IE/Edge */
    scrollbar-width: none;     /* Firefox */
  }
}




    /* 🔹 Fix modal cover image scaling */
    #modal-cover {
      width: 100%;
      max-width: 220px;
      aspect-ratio: 1 / 1;    /* Ensures it's a perfect square */
      object-fit: cover;      /* Crop extra content to fit square */
      border-radius: 10px;
      display: block;
    }
    #modal-cover {
      width: 200px;          /* fixed square width */
      height: 200px;         /* fixed square height */
      object-fit: cover;     /* crop excess instead of stretching */
      border-radius: 10px;   /* match your card style */
      display: block;        /* avoid inline gaps */
    }

    #extraCategories {
      display: none;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    #extraCategories.show {
      display: flex;
      opacity: 1;
    }


    /* HERO SECTION CLEAN VERSION */

    #hero {
      min-height: 65vh;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      padding-left: 20px;
      padding-right: 20px;
      color: #fff;
      position: relative;
      padding-top: 150px; /* ✅ pushes hero below the fixed header */
    }
    #hero::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to right, rgba(0,0,0,0.9), rgba(0,0,0,0));
      z-index: 0; /* sits above the image but behind the text */
    }

    /* Make sure hero text sits above the gradient */
    #hero > * {
      position: relative;
      z-index: 1;
    }

    #hero h1 {
      font-size: 3rem;
      margin-bottom: 0.5rem;
    }
    #hero p {
      margin-bottom: 1rem;
      max-width: 600px;
    }
    #hero .input-group {
      max-width: 500px;
    }
    #hero-cover {
      position: absolute;
      top: 0;
      margin-top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1; /* behind text */
      opacity: 1;
      transition: opacity 1s ease-in-out;  /* fade effect */
      border-radius: 10px;
    }
    #hero-cover.fade-out {
      opacity: 0;  /* fade out */
    }


    /* SEARCH BAR */
    #hero .input-group {
      background-color: #2c2c2c;
      border-radius: 50px;
      overflow: hidden;
      max-width: 500px;
    }

    #hero .form-control {
      background-color: #2c2c2c;
      border: none;
      color: #fff;
    }
    #hero .form-control::placeholder {
      color: rgba(255, 255, 255, 0.7); /* soft white text */
      font-style: normal;  /* default text style */
      font-weight: normal; /* default weight */
      font-size: 14px;     /* default size */
    }

    #hero .form-control:focus {
      background-color: #3a3a3a;
      color: #fff;
      box-shadow: none;
    }

    #hero .btn {
      border: none;
      background-color: #1db954;
      color: #fff;
      transition: background-color 0.3s;
      border-radius: 0 50px 50px 0;
    }

    #hero .btn:hover {
      background-color: #21e065;
    }

    /* "Explore Beats" button */
    #hero a.btn-outline-light {
      border-radius: 50px;
      padding: 10px 30px;
      border-width: 2px;
      transition: all 0.3s ease;
    }

    #hero a.btn-outline-light:hover {
      background-color: #1db954;
      border-color: #1db954;
      color: #fff;
    }

    #trending .song-card {
      background: #181818;
      border-radius: 10px;
      max-width: 300px;  /* increase from 250px to 300px */
      flex: 1 1 auto;    /* allow it to grow/shrink nicely */
      padding: 10px;
      text-align: center;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      position: relative;
      z-index: 10;         /* ensures cards hover above everything */
    }
    #trending .song-card:hover {
      transform: scale(1.1);
      box-shadow: 0 0 18px rgba(128,128,128,0.4);
    }

    #trending .song-card img {
      width: 100%;
      border-radius: 8px;
    }
    #trending h5 {
      color: #fff;  /* song title stays white */
      margin: 0;
      font-size: 0.9rem;
    }

    #trending p {
      color: #aaa;  /* artist name in grey */
      margin: 0;
      font-size: 0.85rem; /* optional: slightly smaller */
    }

    .trending-title {
      font-size: 1.5rem;     /* adjust as you like (default ~1.5rem) */
      font-weight: 700;
      letter-spacing: 0.5px;
    }

    /* Smooth slide for bottom player */
    .player-bar {
      /* ensure initial is hidden off-screen */
      bottom: -120px;            /* hide by default below viewport */
      left: 0;
      right: 0;
      transition: bottom 0.35s ease;
    }

    /* When .show is added via JS, slide it up */
    .player-bar.show {
      bottom: 0;
    }

    /* Ensure trending container does not horizontally scroll */
    #trending .container,
    /* keep .song-card max width but let grid manage spacing */
    .song-card {
      max-width: 100%; /* allow col sizing to control width */
    }

    #trending .see-more-btn {
      font-size: 0.85rem;
      padding: 4px 10px;
      border-radius: 20px;
      border: 1px solid #198754;
      color: #198754;
      transition: background 0.3s, color 0.3s;
      text-decoration: none;
    }

    #trending .see-more-btn:hover {
      background-color: #198754;
      color: #fff;
    }


    #kickstart {
      overflow: hidden;
      background: linear-gradient(135deg, rgba(0,0,0,0.6), rgba(29,185,84,0.2));
      color: white;
    }

    #kickstart h2 {
      font-size: 2rem;
    }

    #kickstart ul li {
      font-size: 1rem;
      line-height: 1.7;
    }

    #kickstart .kickstart-image img {
      transition: transform 0.5s ease;
    }

    #kickstart .kickstart-image img:hover {
      transform: scale(1.05);
    }

    html, body {
      overflow-x: hidden; /* prevent horizontal scroll */
    }


    .beat-section {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
      gap: 10px;
      z-index: 1;
      overflow: hidden;     
      padding-top: 2px;   /* space for upward float */
      padding-bottom: 2px; /* space for downward float */
      background: radial-gradient(circle at center, #1a1a1a 0%, #0b0b0b 100%);
    }

    /* Top gradient */
    .beat-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 15%;              /* top fade height is responsive */
      background: linear-gradient(to bottom, rgba(0,0,0,0.95), transparent);
      pointer-events: none;
      z-index: 10;  
    }

    /* Bottom gradient */
    .beat-section::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height:25%;              /* bottom fade height */
      background: linear-gradient(to top, rgba(0,0,0,0.95), transparent);
      pointer-events: none;
      z-index: 10;  
    }




    .beat-container {
      display: flex;
      justify-content: space-between;  /* spreads them apart */
      align-items: center;
      width: 90%;                      /* control total width */
      margin: 0 auto;                  /* center section inside page */
    }


    .beat-left {
      flex: 1;
    }

    .beat-left h2 {
      font-size: 3rem;
      margin-bottom: 20px;
    }

    .key-points {
      list-style: disc;
      padding-left: 20px;
      font-size: 1rem;
      color: #ccc;
    }

    .beat-right {
      flex: 1.5;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 30px;
      min-height: 350px;
      max-height: 500px;
      overflow: hidden;           /* hides extra cards */
      position: relative;
    }


    /* Card look */
    .album-card {
      width: 200px;                 /* define width only */
      aspect-ratio: 1 / 1;          /* keeps perfect square */
      display: block;                /* keep shape */
      text-decoration: none;         /* remove underline */
      color: inherit;                /* keep text color same */
      cursor: pointer;
      border-radius: 10px;
      overflow: hidden;
      position: relative;
      background: #222;
      flex-shrink: 0;
      border: 2px solid rgba(80, 80, 80, 0.6);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .album-card:hover {
      transform: scale(1.08) translateY(-3px);
      box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15);
      z-index: 20; /* brings card above others during hover */
    }


    .album-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;            /* ensures no stretching */
      display: block;
    }


    /* Transparent info bar */
    .album-info {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: rgba(0, 0, 0, 0.6);
      color: white;
      padding: 5px 6px;
      pointer-events: none;
    }

    .track-title {
      font-size: 0.8rem;
      font-weight: 600;
      margin: 0;
    }

    .artist-name {
      font-size: 0.7rem;
      color: #bbb;
      margin: 0;
    }

    /* Columns */
    .album-column {
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      will-change: transform;
    }

    /* independent floating motion */
    .album-column.up {
      animation: scrollUp 14s ease-in-out infinite alternate;
    }

    .album-column.down {
      animation: scrollDown 14s ease-in-out infinite alternate;
    }

    /* keyframes */
    @keyframes scrollUp {
      0%   { transform: translateY(10%); }
      100% { transform: translateY(-30%); }
    }

    @keyframes scrollDown {
      0%   { transform: translateY(-10%); }
      100% { transform: translateY(30%); }
    }


    .get-started-btn {
      position: relative;
      top: -15px; /* move up 10px */
      left: 20px;
      display: inline-block;
      margin-top: 25px;
      padding: 12px 28px;
      font-size: 1rem;
      font-weight: 600;
      color: white;
      background: #1DB954;
      border: none;
      border-radius: 30px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 0 10px rgba(29, 185, 84, 0.4);
    }

    .get-started-btn:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 0 20px rgba(29, 185, 84, 0.6);
      background: #1ed760; /* lighter green on hover */
    }


    /* General responsiveness */
    @media (max-width: 1200px) {
      #hero h1 { font-size: 2.5rem; }
      #hero p { font-size: 1rem; }
      .beat-left h2 { font-size: 2.5rem; }
    }

    @media (max-width: 900px) {

      /* HERO SECTION */
      #hero {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 40px 20px;
        min-height: auto;
      }

      #hero h1 {
        font-size: 2rem;
      }

      #hero p {
        font-size: 1rem;
        max-width: 90%;
      }

      #hero .input-group {
        width: 100%;
        max-width: 100%;
      }

      #hero a.btn-outline-light {
        margin-top: 15px;
      }


      /* KICKSTART SECTION */
      #kickstart .container {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
      }

      #kickstart .kickstart-image {
        order: -1; /* put image above text */
        margin-bottom: 20px;
      }

      #kickstart h2 {
        font-size: 1.8rem;
      }

      #kickstart ul li {
        font-size: 0.95rem;
      }



/* 🔹 Final mobile swipe system for Explore Categories */
@media (max-width: 768px) {
  #categoryContainer {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
  }

  #categoryContainer .col-6,
  #categoryContainer .col-md-2 {
    flex: 0 0 auto !important;
    width: 180px !important;
    scroll-snap-align: start;
  }

  /* 🔥 Include hidden extra categories in swipe */
  #categoryContainer .d-none.more-category {
    display: block !important;
  }

  /* Hide See More button on mobile */
  #seeMoreBtn {
    display: none !important;
  }

  #categoryContainer::-webkit-scrollbar {
    display: none;
  }
}

/* 🎵 CREATE YOUR OWN BEATS SECTION */
#create-beats {
  background: linear-gradient(135deg, #0e0e0e 0%, #1b1b1b 100%);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}

#create-beats .text-content h2 {
  font-size: 2.5rem;
}

#create-beats .text-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: #ddd;
}

#create-beats img {
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

#create-beats img:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

@media(max-width: 992px) {
  #create-beats {
    text-align: center;
  }
  #create-beats .container {
    flex-direction: column-reverse;
  }
  #create-beats img {
    max-width: 300px;
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  .player-extras .bi-music-note-list {
    display: none !important;
  }

  .player-controls {
    width: 65% !important; /* give more room to seekbar */
  }

  .progress-container {
    width: 80% !important; /* stretch seek bar nicely */
  }
}


      /* FLOATING BEATS SECTION */
      .beat-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 60px 20px;
      }

      .beat-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      .beat-left {
        margin-bottom: 30px;
      }

      .beat-left h2 {
        font-size: 2rem;
      }

      .beat-right {
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
        gap: 15px;
      }

      .album-card {
        width: 140px;
        aspect-ratio: 1/1;
      }

      .get-started-btn {
        position: static;
        margin-top: 20px;
      }
    }

    /* Extra small devices (phones) */
    @media (max-width: 600px) {
      #hero h1 { font-size: 1.8rem; }
      #hero p { font-size: 0.9rem; }
      .album-card { width: 120px; }
      #kickstart h2 { font-size: 1.5rem; }
    }

    /* Maintain floating reel effect across all devices */
    @media (max-width: 900px) {
      .beat-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 10px;
      }

      .beat-container {
        flex-direction: column;
        align-items: center;
        width: 100%;
      }

      .beat-right {
        height: 65vh;
        min-height: 300px;
        overflow: hidden;
        justify-content: center;
        gap: 12px;
      }

      .album-column {
        flex-direction: column;
        gap: 15px;
        animation-duration: 16s; /* slightly slower on small screens */
      }

      .album-card {
        width: 120px;
        aspect-ratio: 1 / 1;
      }

      .beat-left h2 {
        font-size: 1.8rem;
      }
    }

/* ✅ Final Mobile Height Fix (add this LAST in your CSS) */
@media (max-width: 768px) {
  .beat-section {
    align-items: flex-start !important;
  }

  .beat-right {
    height: 35vh !important;      /* adjust: 35vh → short, 45vh → 1.5 cards, 55vh → taller */
    min-height: auto !important;  /* remove 300px min height */
    max-height: 300px !important;  /* remove 500px limit */
    overflow: hidden !important;
  }

}

@media (max-width: 768px) {
  @keyframes scrollUp {
    0%   { transform: translateY(0%); }
    100% { transform: translateY(-45%); } /* a bit more travel */
  }
  @keyframes scrollDown {
    0%   { transform: translateY(-45%); }
    100% { transform: translateY(0%); }
  }

  .album-column.up {
    animation: scrollDown 30s ease-in-out infinite alternate;
  }
  .album-column.down {
    animation: scrollUp 30s ease-in-out infinite alternate;
  }
}
/* 🔹 Bigger album cards only for mobile screens */
@media (max-width: 768px) {
  .album-card {
    width: 160px;      /* increase from your default (e.g., 120px) */
    height: 160px;     /* make cards larger */
    border-radius: 12px; /* optional — smoother corners */
  }

  /* optional: add more spacing between cards */
  .album-column {
    gap: 18px;  /* default 10–12px → more breathing room */
  }

  /* ensure images scale perfectly inside */
  .album-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
  }
}

#hero {
  padding-top: 120px !important; /* ✅ creates gap below fixed header */
}

@media (max-width: 768px) {
  header {
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .search-container {
    flex: 1 !important;
    max-width: 140px !important;
    min-width: 0 !important;
  }

  .input-group {
    flex-wrap: nowrap !important;  /* ✅ keeps input & icon side by side */
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .search-bar {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 5px 8px !important;
  }

  .btn-search {
    flex: 0 0 auto !important;   /* ✅ prevents button from shrinking or wrapping */
    padding: 4px 8px !important;
  }

  .btn-search i {
    font-size: 0.9rem !important;
  }
}

.header-btn {
  flex-shrink: 0;
}
.header-icon {
  flex-shrink: 0;
}

footer {
  padding-left: 20px !important;  /* ✅ adds space on the left */
  padding-right: 20px !important; /* optional — keeps symmetry */
}

.dropdown-menu {
  background-color: #181818;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 6px 0;
}

.dropdown-item {
  color: #ddd;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
  background-color: rgba(29,185,84,0.2);
  color: #1DB954;
}

@media (max-width: 768px) {
  .header-btn-create {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
    border-radius: 15px !important;
  }

  .header-btn {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
    border-radius: 15px !important;
  }

  header {
    gap: 4px !important;
    padding: 6px 8px !important;
  }

  .header-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .search-container {
    max-width: 120px !important;
  }

  .search-bar {
    font-size: 12px !important;
    padding: 4px 6px !important;
  }

  .btn-search {
    padding: 4px 6px !important;
  }

  .btn-search i {
    font-size: 0.9rem !important;
  }
}

/* === FreeBeat Cookie Banner === */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(10px);
  padding: 18px 22px;
  z-index: 2000;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#cookie-banner .cookie-content {
  max-width: 1100px;
  margin: 0 auto;
  color: #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}

#cookie-banner p {
  margin: 0;
  font-size: 14px;
}

#cookie-banner a {
  color: #1DB954;
  text-decoration: underline;
}

.cookie-buttons {
  display: flex;
  gap: 10px;
}

#cookie-accept,
#cookie-reject {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s ease;
}

#cookie-accept {
  background: #1DB954;
  color: white;
}

#cookie-accept:hover {
  background: #21e065;
}

#cookie-reject {
  background: #444;
  color: white;
}

#cookie-reject:hover {
  background: #666;
}

@media (max-width: 600px) {
  #cookie-banner .cookie-content {
    flex-direction: column;
    text-align: center;
  }
}




  </style>