:root {
--primary-color: #de0e02;
--dark-bg: #111;
--darker-bg: #000;
--light-bg: #f8f9fa;
--sidebar-width: 300px;
--h3-title:#167d83;
--artist-title:#5d5d5d;
}
body {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
background-color: #f9f9f9;
padding-top: 112px;
}
.navbar-brand-text {
margin-left: 1px;
font-size: 24px;
font-weight: 800;
}
a {
color: var(--primary-color);
text-decoration: none;
font-weight: 400;
}
h3.section-title {
margin-bottom: 10px;
font-size: 20px;
background: var(--h3-title);
color: white;
padding: 10px;
border-radius: 6px;
}
a.logo {
color: #000;
text-decoration: none;
}
.container-main {
max-width: 1200px;
margin: 0px auto;
padding: 15px 15px;
display: flex;
background: var(--bs-white);
gap:15px;
}
.header-container {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
background: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.top-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
background-color: var(--bs-gray-100);
padding: 6px 0;
}
.logo-img {
height: 30px;
transition: all 0.3s ease;
}
a.logo-text
{
text-decoration: none;
color:black ;
}
.logo-img:hover {
opacity: 0.8;
}
/* Main Navigation */
.main-nav {
display: flex;
align-items: center;
gap: 20px;
}
.main-nav a {
color: var(--bs-black);
text-decoration: none;
font-weight: 500;
font-size: 15px;
transition: color 0.3s ease;
}
.main-nav a:hover {
color: var(--primary-color);
text-decoration: underline 3px;
}
/* Search Header Bar */
.search-header {
position: fixed;
top: 48px; /* Height of top header */
left: 0;
right: 0;
z-index: 1029;
background-color: var(--bs-gray-200);
padding: 9px 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.search-form {
max-width: 800px;
margin: 0 auto;
}
.search-input {
border-radius: 20px 0 0 20px !important;
border: none;
padding: 8px 15px;
}
.search-btn {
border-radius: 0 20px 20px 0 !important;
background-color: var(--primary-color);
border: none;
padding: 8px 20px;
}
.search-btn:hover {
background-color: #ffc107;
}
/* Mobile Menu Button */
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: white;
font-size: 1.5rem;
}
/* Mobile Menu */
.mobile-menu {
display: none;
position: fixed;
top: 103px;
left: 0;
right: 0;
background-color: var(--light-bg);
padding: 15px;
z-index: 1028;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.mobile-menu.active {
display: block;
}
.mobile-menu a {
display: block;
color: black;
text-decoration: none;
padding: 10px 0;
border-bottom: 1px solid #ffffff;
font-weight: 600;
padding: 10px;
}
.mobile-menu a:hover
{
background: #e7e7e7;
}
table {
display: table;
border-collapse: separate;
border-spacing: 0;
border-color: grey;
width: 100%;
}
table.content-table {
border-collapse: collapse;
width: 100%;
background: #b1b1b11c;
margin-bottom: 15px;
}
th img{    height: auto;
width: 13px;}
tr {
display: block;
vertical-align: inherit;
border-color: inherit;
text-align: left;
background: linear-gradient(to bottom, #ffffff, #ebebeb);
}
table.content-table td,
table.content-table th {
border-bottom: 0 solid #dcdcdc;
font-size: 14px;
padding: 5px 10px;
vertical-align: inherit;
border-color: inherit;
color: #000000;
font-weight: 600;
}
table.content-table td {
font-weight: 400;
}
table.content-table a {
color: #2a92de;
}
p.ring-tag
{
display: inline-block;
padding: 0px;}
.dringbar
{
float:right;
margin: 5px;}
.songs-list {
padding: 10px;
width: 48%;
display: inline-block;
background: #fff;
margin: 5px 5px 5px 5px;
border-radius: 10px;
border: 0px solid #dcdcdc;
box-shadow: 0 10px 15px rgb(181 181 181 / 30%);}
.songs-list img
{
width: 60px;
height:auto;
float: left;
padding:7px;}
div.ring-time
{
font-size: 13px;
color: #8e8e8e;}
p.ring-tag a
{
font-size: 14px;
border-radius: 5px;
border: 1px solid #888;
color: var(--artist-title);
padding: 2px 6px;
text-decoration: none;
margin: 0 8px 8px 0;
display: inline-block;}
.dload-ring
{
display: inline-block;
background: var(--primary-color);
color: #fff;
padding: 5px 15px;
font-weight: 600;
border-radius: 20px;
font-size: 16px;}
.ring-details
{
background: #167d83;
padding: 7px;
margin: 10px;
color: #fff;
border-radius: 7px;
font-size:15px;}
.similar-tag
{
    background: #efefef;
padding: 10px;
font-weight: 700;
color: red;
font-size: 20px;
margin: 10px 0px;}
.similar-tag span
{
    color: #1e1e1e;}
.dmca-details {
background: #f2f2f2;
padding: 10px;
margin: 10px 0px;
color: #737373;
border-radius: 7px;
font-size: 14px;
font-style: italic;}
ul.download-link
{
    list-style-type: none;
    padding: 15px 0px;
    margin: 0px;
    text-align: center;
}
ul.download-link li
{
color: #d6d3d3;
cursor: pointer;
display: inline-block;
margin: 8px;
padding: 10px;
/* border-bottom: 1px dashed; */
text-overflow: unset;
white-space: unset;
background: #f70f0e;
font-weight: 700;
border-radius: 7px;}
ul.download-link li a
{
color: #fff;}
ul.ring-link
{
list-style-type: none;
padding: 0px;
margin: 0px;}
ul.ring-link li
{
color: #d6d3d3;
cursor: pointer;
display: inline-block;
margin: 8px;
padding: 5px 10px;
/* border-bottom: 1px dashed; */
text-overflow: unset;
white-space: unset;
background: #28a745;
font-weight: 700;
border-radius: 7px;}
ul.ring-link li a
{
color: #fff;}
.singer-bio
{
padding: 7px;
background: #f7f7f7;
border-radius: 5px;
margin: 0;
}
.ringtone-card {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgb(0 0 0 / 13%);
padding: 16px;
margin-bottom: 16px;
transition: transform 0.2s ease;
}
.ringtone-card:hover {
transform: translateY(-1px);
}
.ringtone-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.play-btn {
width: 48px;
height: 48px;
background-color: var(--artist-title);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
cursor: pointer;
flex-shrink: 0;
}
.play-btn svg {
width: 24px;
height: 24px;
}
.ringtone-info {
flex-grow: 1;
}
.ringtone-title {
padding: 5px 0px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
    border-bottom: 1px solid #e3e3e3;
}
.ringtone-meta {
display: flex;
gap: 12px;
margin-top: 4px;
font-size: 12px;
color: #777;
}
.ringtone-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 0px;
}
.tag {
background-color: #f3f4ff;
color: #4a6bff;
padding: 4px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.ringtone-actions {
display: flex;
gap: 8px;
}
.download-btn, .share-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
border: none;
cursor: pointer;
}
.download-btn {
background-color: #4a6bff;
color: white;
flex-grow: 1;
}
.share-btn {
background-color: #f3f4ff;
color: #4a6bff;
}
.download-btn svg, .share-btn svg {
width: 16px;
height: 16px;
}
/* Responsive Adjustments */
@media (max-width: 991px) {
.main-nav {
display: none;
}
.mobile-menu-btn {
display: block;
}
body {
padding-top: 104px;
}
.search-header {
top: 47px;
}
}
@media (max-width: 576px) {
.logo-img {
height: 25px;
}
.search-input {
padding: 8px 12px;
}
}
/* Main Content */
.main-content {
flex: 1;
max-width: calc(100% - var(--sidebar-width) - 30px);
}
/* Right Sidebar */
.sidebar {
width: var(--sidebar-width);
position: sticky;
top: 112px;
overflow-y: auto;
}
.sidebar-card {
background: white;
border-radius: 8px;
padding: 10px;
margin-bottom: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.song-item {
display: flex;
align-items: center;
padding: 10px;
background: #ffffff;
border-radius: 0px;
/* box-shadow: 0 3px 4px rgba(0, 0, 0, 0.05); */
text-decoration: none;
color: inherit;
position: relative;
border-bottom: 1px solid #e9e9e9;
}
.song-item:hover {
background-color: #f7f7f7;
}
p.lead {
font-weight: normal;
padding: 8px;
background: #f9f9f9;
border-radius: 5px;
}
a.song-item-u {
display: flex;
align-items: center;
width: 100%;
text-decoration: none; /* Remove underline from link */
color: inherit; /* Inherit text color */
position: relative; /* For positioning duration */
}
.song-duration {
color: #888;
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
font-size: 0.9rem;
}
/* Make sure song info takes available space */
.song-info {
flex-grow: 1;
padding-right: 50px; /* Space for duration */
}
.song-info-f {
flex-grow: 1;
padding-right: 0px; /* Space for duration */
}
/* Song listing styles */
.song-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 10px 0;
}
.song-thumbnail {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 4px;
margin-right: 15px;
}
.song-title {
font-weight: 600;
margin-bottom: 5px;
}
.section-title {
font-size: 1.2rem;
margin: 0px 0 0px;
padding-bottom: 8px;
/* border-bottom: 2px solid var(--primary-color); */
background: var(--h3-title);
color: white;
padding: 10px;
border-radius: 6px;
}
.song-duration {
color: #888;
margin-left: 15px;
}
/* Song Detail Header Styles */
.song-detail-header {
margin-bottom: 30px;
}
.song-main-title {
font-size: 28px;
color: #333;
margin-bottom: 20px;
font-weight: 700;
padding-bottom: 10px;
border-bottom: 2px solid #f5a623;
}
.song-detail-container {
display: flex;
gap: 30px;
margin-bottom: 25px;
align-items: flex-start;
}
.song-cover-wrapper {
flex: 0 0 250px;
}
.song-meta-table {
flex: 1;
}
.song-info-table {
width: 100%;
border-collapse: collapse;
}
.song-info-table tr {
border-bottom: 1px solid #f0f0f0;
}
.song-info-table tr:last-child {
border-bottom: none;
}
.song-info-table td {
padding: 12px 8px;
vertical-align: top;
}
.meta-label {
font-weight: 600;
color: #555;
width: 120px;
}
.meta-value {
color: #333;
}
.artist-link {
color: #3498db;
text-decoration: none;
transition: color 0.2s;
}
.artist-link:hover {
color: #1a73e8;
text-decoration: underline;
}
/* Download Info Box */
.download-info-box {
background-color: #f8f9fa;
border-radius: 8px;
padding: 20px;
border: 1px solid #eee;
margin-top: 20px;
}
.download-title {
font-size: 22px;
color: #333;
margin-bottom: 15px;
font-weight: 600;
}
.download-description {
color: #555;
line-height: 1.6;
margin: 0;
font-size: 15px;
}
/* Pagination Styles */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin: 30px 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.pagination a {
color: var(--primary-color);
text-decoration: none;
padding: 8px 16px;
border: 1px solid #e0e0e0;
border-radius: 4px;
transition: all 0.3s ease;
font-weight: 500;
background-color: #fff;
}
.pagination a:hover {
background-color: #f8f9fa;
}
.pagination span {
padding: 8px 16px;
color: #555;
font-weight: 600;
background-color: #f5f5f5;
border-radius: 4px;
}
/* Active/Hover States */
.pagination a:first-child:hover::before {
content: "← ";
}
.pagination a:last-child:hover::after {
content: " →";
}
/* Responsive Adjustments */
@media (max-width: 480px) {
.pagination {
gap: 8px;
}
.pagination a,
.pagination span {
padding: 6px 12px;
font-size: 14px;
}
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.song-detail-container {
flex-direction: column;
}
.song-cover-wrapper {
margin: 0 auto 20px;
max-width: 250px;
}
.song-main-title {
font-size: 24px;
}
.download-title {
font-size: 20px;
}
.songs-list {
padding: 15px;
width: 98%;
width: calc(98% - 0px);
display: inline-block;}
}
@media (max-width: 480px) {
.song-main-title {
font-size: 22px;
}
.meta-label {
width: 90px;
}
.song-info-table td {
padding: 8px 5px;
}
}
/* Responsive adjustments */
@media (max-width: 992px) {
.container-main {
flex-direction: column;
}
.container-main-top {
flex-direction: column;
}
.sidebar {
width: 100%;
position: static;
height: auto;
order: 2; /* Move sidebar below content */
}
.main-content {
max-width: 100%;
order: 1;
}
.song-list {
grid-template-columns: 1fr;
}
.main-menu {
display: none; /* Hide desktop menu on mobile */
}
.mobile-menu-btn {
display: block !important; /* Show mobile menu button */
color: grey;
}
}
.footer-menu {
background-color: var(--dark-bg);
padding: 20px 0;
}
.footer-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}
.footer-links a {
color: white;
text-decoration: none;
}
.copyright {
background-color: var(--darker-bg);
color: #aaa;
padding: 15px 0;
text-align: center;
font-size: 0.9rem;
}
.breadcrumb-item+.breadcrumb-item {
padding-left: 5px;
}
.breadcrumb-container {
padding: 10px 0;
background-color: #f8f9fa;
margin: 0px -15px;
}
.breadcrumb {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
font-size: 14px;
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-item + .breadcrumb-item::before {
content: "›";
padding: 0 2 0 2px;
color: #6c757d;
}
.breadcrumb-item a {
color: var(--primary-color);
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb-item a:hover {
color:var(--primary-color);
text-decoration: underline;
}
.breadcrumb-item.active {
color: #6c757d;
}
.breadcrumb-item i.fa-home {
margin-right: 2px;
font-size: 10px;
}
@media (max-width: 576px) {
.breadcrumb {
font-size: 12px;
}
.breadcrumb-item + .breadcrumb-item::before {
padding: 0 3px;
}
}
/* Song Detail Styles */
.song-detail-section {
padding: 0px 0;
}
h2.songtitle {
    font-size: 22px;
    padding: 15px 0px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.song-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.song-cover-container {
margin-bottom: 25px;
}
.song-cover {
width: 200px;
height: 200px;
border-radius: 10px;
object-fit: cover;
border: 1px solid #eee;
}
.song-info {
max-width: 500px;
width: 100%;
}
.song-title {
font-size: 18px;
margin: 0 0 5px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
}
.song-artist
{
font-size: 16px;
margin: 0 0 5px;
color: var(--artist-title);
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
}
.song-meta {
margin-bottom: 25px;
text-align: left;
}
.meta-item {
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
text-align: left;
}
.meta-label {
font-weight: 600;
color: #555;
min-width: 80px;
margin-right: 10px;
}
.fa-magnifying-glass:before, .fa-search:before {
content: "\f002";
color: white;
}
.meta-value {
color: #333;
flex: 1;
}
.download-btn {
background-color: var(--primary-color);
color: white;
border: none;
padding: 12px 25px;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
margin: 10px;
}
.download-btn a{
color: white;
font-weight: 700;
}
.download-btn:hover {
background-color: #e69500;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(245, 166, 35, 0.4);
}
/* Responsive Styles */
@media (max-width: 768px) {
.song-cover {
width: 150px;
height: 150px;
}
.song-title {
font-size: 18px;
}
.meta-item {
gap: 5px;
}
.meta-label {
min-width: auto;
}
.download-btn {
padding: 10px 20px;
font-size: 15px;
}
}
@media (max-width: 480px) {
.song-cover {
width: 120px;
height: 120px;
}
.song-title {
font-size: 16px;
}
.breadcrumb-item {
font-size: 16px;
}
.breadcrumb-item i.fa-home {
margin-right: 3px;
}
}