:root {
  --white-100: hsl(0, 0%, 100%);
  --white-200: hsl(0, 0%, 90%);
  --white-300: hsl(0, 0%, 80%);
  --white-400: hsl(0, 0%, 65%);
  --white-500: hsl(0, 0%, 50%);
  --red-500: #FF3131;
  --red-100: #FF5757;
  --grey-100: #f5f5f5;
  --grey-200: #f0f0f0;
  --purple-700: hsl(218, 81%, 46%);
  --textcolor-100: hsl(0, 0%, 50%);
  --textcolor-500: hsl(0, 0%, 20%);
  --blogseccolor-400: #232323;
  --text-xs: clamp(0.82rem, calc(0.8rem + 0.14vw), 0.9rem);
  --text-sm: clamp(0.91rem, calc(0.88rem + 0.14vw), 1rem);
  --text-md: clamp(1rem, calc(0.97rem + 0.14vw), 1.08rem);
  --text-lg: clamp(1.09rem, calc(1.06rem + 0.14vw), 1.18rem);
  --text-xl: clamp(1.19rem, calc(1.16rem + 0.14vw), 1.27rem);
  --text-xxl: clamp(1.28rem, calc(1.25rem + 0.14vw), 1.38rem);
  --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
     0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
     0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
     0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-larger: 0 10px 30px -10px rgba(0, 0, 0, 0.2),
     0 8px 12px -4px rgba(0, 0, 0, 0.05);
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  font-size: 100%;
  box-sizing: inherit;
  scroll-behavior: smooth;
  height: -webkit-fill-available;
}

body {
  font-family: sans-serif;
  font-size: var(--text-md);
  font-weight: normal;  
  line-height: 1.1;
  color: var(--textcolor-100);
  background-color: var(--white-100);
}

main {
  overflow: hidden;
}

a,
button {
  cursor: pointer;
  user-select: none;
  border: none;
  outline: none;
  background: none;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

img {
  image-rendering:-webkit-optimize-contrast;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
  filter: contrast(120%);
  filter: saturate(120%);
}

.container {
  max-width: 75rem;
  height: auto;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.text-xs {
  font-size: var(--text-xs);
  line-height: inherit;
}
.text-sm {
  font-size: var(--text-sm);
  line-height: inherit;
}
.text-md {
  font-size: var(--text-md);
  line-height: inherit;
}
.text-lg {
  font-size: var(--text-lg);
  line-height: inherit;
}
.text-xl {
  font-size: var(--text-xl);
  line-height: inherit;
}
.text-xxl {
  font-size: var(--text-xxl);
  line-height: inherit;
}

.font-100 {
  font-weight: 100;
}
.font-200 {
  font-weight: 200;
}
.font-300 {
  font-weight: 300;
}
.font-400 {
  font-weight: 400;
}
.font-500 {
  font-weight: 500;
}
.font-599 {
  font-weight: 599;
}
.font-700 {
  font-weight: 700;
}
.font-800 {
  font-weight: 800;
}
.font-900 {
  font-weight: 900;
}


.btn {
  display: inline-block;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: normal;
  line-height: inherit;
  text-align: center;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  border-radius: 50px;
  text-transform: unset;
  transition: all 0.3s ease;
}
.btn-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
}
.btn-primary {
  padding: 0.65rem 1.75rem;
  color: var(--white-100);
  background-color: var(--purple-700);
  box-shadow: var(--shadow-medium);
}


@media only screen and (min-width:48rem){
  
    .section {
  background: var(--purple-700);
  background-size:cover;
  min-height: 28.875rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
      text-align: left;
      background: linear-gradient(to bottom right,#112c57 40%,#165bd5 100%);
}
  
  .p1{
    height: auto;
    text-align: left;
    margin: 0 auto;
    }

.p2{
    height: auto;
    text-align: left;
    margin: 0 auto;
    }
}

.latest-section {
    padding:1rem;
    max-width: 75rem;
    margin:0 auto;
    
}

.p {
    font-size: 1rem;
    font-weight: bold;
    padding: 0.5rem 0 0.9rem 0;
    
}

.latest-songs {
    
    text-align: left;
    
}

.colm img:hover {
    opacity:0.5;
    }


@media only screen and (max-width:2561px){

  
  .latest-songs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 8px 15px;
  }
.colm {
    
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
    line-height: 1.2;
    
}
    
    .latest-song-name {
    font-size: 100%;
    font-weight: 500;
    text-transform: capitalize;
}

.latest-artist-name {
    font-size: 98%;
    font-weight: 599;
    padding-top: 0;
    margin-top: 0;
    text-transform: capitalize;    
}
}    

@media only screen and (max-width:1025px){

  
  .latest-songs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap:8px 15px;
  }
.colm {
    
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
    line-height: 1.2;
}
    
    .latest-song-name {
    font-size: 100%;
    font-weight: 500;
    text-transform: capitalize;
}

.latest-artist-name {
    font-size: 98%;
    font-weight: 500;
    padding-top: 0;
    margin-top: 0;
    text-transform: capitalize;    
}
}
    
@media only screen and (max-width:48rem){

  .latest-songs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap:8px 12px;
  }
  
.colm {
    
    
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
    line-height: 1.1;
}
    
    .latest-song-name {
    font-size: 1rem;
    font-weight: 500;
    text-transform: capitalize;
}

.latest-artist-name {
    font-size: 1rem;
    font-weight: 500;
    text-transform: capitalize; 
      
}
}
    
    
@media only screen and (max-width:481px){

  .latest-songs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px 12px;
  }
  
.colm {
  
    
    
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
    line-height: 1;
}
    
    .latest-song-name {
    font-size: 80%;
    font-weight: 500;
    text-transform: capitalize;
}

.latest-artist-name {
    font-size: 78%;
    font-weight: 500;
    text-transform: capitalize; 
      
}
}

@media only screen and (max-width:332px){
        
  .latest-songs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  
  .colm {
    
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
    line-height: 1;
    }
    
    .latest-song-name {
    font-size: 80%;
    font-weight: 500;
    text-transform: capitalize;
    
}

.latest-artist-name {
    font-size: 79%;
    font-weight: 500;
    text-transform: capitalize; 
     
}
}

@media only screen and (max-width:321px){
        
  .latest-songs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  
  .colm {
    
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
    line-height: 1;
    }
    
    .latest-song-name {
    font-size: 80%;
    font-weight: 500;
    text-transform: capitalize;
}

.latest-artist-name {
    font-size: 79%;
    font-weight: 500;
    text-transform: capitalize;
}
}

@media only screen and (max-width:301px){
  
  .latest-songs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
        .colm {
          
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
    line-height: 1;
    }
    
    .latest-song-name {
    font-size: 80%;
    font-weight: 500;
    text-transform: capitalize;
}

.latest-artist-name {
    font-size: 79%;
    font-weight: 300;
    text-transform: capitalize;  
     
}
}
    
@media only screen and (max-width:242px){
        
  .latest-songs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .colm{
    
    text-overflow: ellipsis;
    overflow:hidden;
    white-space: nowrap;
    line-height: 1;
    }
    
    .latest-song-name {
    font-size: 80%;
    font-weight: 500;
    text-transform: capitalize;
}

.latest-artist-name {
    font-size: 79%;
    font-weight: 300;
    text-transform: capitalize;
}
}

  .latest-song-name {
    color: var(--textcolor-100);
    text-transform: capitalize;
    padding-top: 8px;
}

.latest-artist-name {
    color: var(--textcolor-500);
    text-transform: capitalize;
}  
    /* song view */

.view-section {
    margin: 0 auto;
    max-width: 40rem;
}

.view-container {
    text-align: left;
    margin:0 auto;
}

.view-details-section {
  margin-top: -3.3785rem;
  padding: 0 1rem;
}

.view-header-song-name {
    color: var(--textcolor-100);
    font-size: 1.1rem;
    font-weight: 710;
    padding:0.2rem 0;
    text-transform:capitalize;
    line-height:1;
    width:18.4rem;
}

.view-header-artist-name {
    color: var(--textcolor-500);
    font-size: 1rem;
    font-weight: 605;
    margin: 0.3rem 0;
    text-transform:capitalize;
}

.view-header-details {
    font-size: 0.676rem;
    font-weight: 300;
    color: var(--textcolor-500);
    text-transform:capitalize;
    margin: 0.5rem 0;
}

.backdropfilter { 
     background: rgba(1,1,1,0);
     backdrop-filter:blur(50px); 
     -webkit-backdrop-filter:blur(50px); 
}

 .image-overlay {
     background: linear-gradient(180deg, rgba(91, 47, 168, 0) 0%, rgba(28, 26, 46) 100%); 
     border-bottom: 1px solid var(--purple-700);
     padding: 6rem 4rem 3rem 4rem;
     width:100%;
     min-height:28rem;
     text-align: center;
     margin: auto;
     display:flex;
     flex-direction:column;              
     justify-content:center;
     align-items:center;
     max-width: 75rem;
             }

.pord {
    background:transparent;
    color: var(--textcolor-100);
    font-weight: 500;
    padding: 0.09rem 0.5rem 0.01rem 0.5rem;
    font-size: 0.5rem;
    border-radius: 50px;
    margin-top: 0.2rem;
    white-space: nowrap;
    display: inline-flex;
    border:1px solid var(--textcolor-100);
    font-family: sans-serif;
}
             
.collapsed {  
  overflow: hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:18;
  -webkit-box-orient: vertical;
              }
.view-header-song-name {line-height:1.1;}


.play-section {
        max-width: 60rem;
        margin:0 auto;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;        
        align-items: center;
    }

.play-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top:-2.8rem;
    padding-right: 0.8rem;
}

.play-position {
  text-align: center;
  width: 5rem;
  position: relative;
}

.progress-indicator {
  display: block;
  margin-bottom: 1rem;
  width: 5rem;
  height: 5rem;
  transform: rotate(-90deg);
}

.play,
.pause {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  border: 0;
  width: 2rem;
  height: 2rem;
  background: transparent;
  z-index: 99;
}

.visually-hidden {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.time {
    display: block;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    margin-left: 0.4rem;
}

 .alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

 /* // song view */

.footer {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    color: var(--purple-200);
    padding: 0.8rem 0.8rem 5rem 0.8rem;
    font-size: 0.7rem;
}

.footer a {
    color: var(--purple-200);
}

/* download section */

.download {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding:1rem 1rem;
}

.download-container {
    
    max-width: 75rem;
}

.btn-wide-h {
    padding:0 2.5rem 0 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 500;
    color: var(--textcolor-500);
    width: auto;
}

.fa-download {
    padding:0.5rem 0.5rem;
    font-weight: 800;
    font-size: 1rem;
    color: var(--textcolor-500);  
    background: var(--white-100);
    border-radius: 50%;
    vertical-align:middle;
    border: 4px solid var(--textcolor-500);
}

 /* lyrics section */

.lyrics {
    padding: 1.5rem;
    color: var(--textcolor-100);
    text-align: left;
}

.lyrics-title {
    font-size: 1.2rem;
    text-align: left;
    font-weight: bold;
}

.lyrics-body {
    text-align: left;
    font-size: 0.912rem;
    font-weight: 400;
    white-space: pre-wrap;    
}

.lyrics-container {
    max-width: 75rem;
    margin: 0 auto;
    text-align: left;
}


  .hidelyrics {    
          display:none;
          padding:0;
          margin:0;
          }

  .lyricssource {         
        font-size:0.9785rem;
        font-weight:200;
        color:var(--textcolor-100);
        text-align:left;
        text-decoration:underline;
        }
    .lyricssource-p{
       color:var(--textcolor-100);
       text-align:left;
       font-size:0.9785rem;
       float:left;
       } 
  .lyrics-body p {
       cursor: pointer;
  }

/* //lyrics section */

/* share links */

.share {
    max-width: 40rem;
    padding:1rem 1rem 0.5rem 1rem;
    
    }

.share-container {
    display: flex;
    flex-direction: row;   
    justify-content:flex-start;
    align-items: center;
    text-align:left;
}

.share-icn {
    color: var(--textcolor-500);
    width: 10%;
    vertical-align: middle;  
}

.share-icon {
    width: 14%;
    font-size: 1rem;
    padding-right: 0.8rem;
    color: var(--textcolor-500);
}


.facebook {
    width: 14%;
    font-size: 1rem;
    padding-right: 0.8rem;
    color: var(--textcolor-500);
}

.twitter {
    width: 14%;
    font-size: 1rem;
    padding-right: 0.8rem;
    color: var(--textcolor-500);
}
.copy-link {
    width: 14%;
    font-size: 1rem;
    padding-right: 0.8rem;
    color: var(--textcolor-500);
}

.copy-link i, .twitter i, .facebook i, .share-icon i, .share-embed i {
    vertical-align: middle;
    font-size: 1rem;
    text-align: left;
    color: var(--textcolor-500);
}

.clipboard {
    background: transparent;
    color: var(--textcolor-500);
}

/* //share links */

.search {
    max-width: 75rem;
    margin:0 auto;
}

.search-container {
    padding: 6rem 1.5rem 1rem 1.5rem;
}

.search-text {
    width: 80%;
    padding: 1.3rem 1.3rem;
    border: 0px;
    margin: 0;
    border-radius: 50px 0 0 50px;  
    background: var(--white-100);
    color: var(--textcolor-100);
}

.search-btn {
    padding: 1.3rem 1.3rem;
    margin: 0;
    width: 18%;
    color:var(--textcolor-100);
}

.form {
    width:100%;
    white-space: nowrap;
    display: inline-block;
    border-radius:50px 50px 50px 50px;
    border: 1px solid var(--purple-700);
    
}

.genre {
    max-width: 75rem;
    margin:0 auto;
    padding: 6rem 0.5rem 6rem 0.5rem;
}

.genre a {
    color: var(--white-100);
}

.genre-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content:center;
    align-items: center;
}

.genre-col1, .genre-col2, .genre-col3, .genre-col4,.genre-col5,.genre-col6 {
    width:43%;
    margin: 0.5rem;
    text-align: center;
}

.genre-col1 {
    background: green;
    padding: 2rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--white-100);
}

.genre-col2 {
    background: red;
    padding: 2rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--white-100);
}

.genre-col3 {
    background: darkturquoise;
    padding: 2rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--white-100);
}

 .genre-col4 {
    background: blueviolet;
    padding: 2rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--white-100);
}


.genre-col5 {
    background: #442FAF;
    padding: 2rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--white-100);
}

.genre-col6 {
    background: #737373;
    padding: 2rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--white-100);
}


.search-list {
    max-width: 75rem;
    margin: 0 auto;
    padding: 1rem 1.5rem;
}

.search-list-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 10px;
}

.list-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 0.5rem;
    text-align: left;
    margin:0.5rem 0;
    max-width: 22rem;
    padding-bottom:1rem;
    border-bottom: 1px solid var(--white-200);
}

.list-col1 {
    width: 40%;
}

.list-col2 {
    width: 70%;
}

.list-col1 img {
    width: 6.5rem;
    height: 6.5rem;
    border-radius: 10px;
}

 .list-col1 img:hover{
   opacity: 0.5;
 }

.list-col2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 0.5rem;
    line-height: 1.1;
    text-align: left;
}

.list-song-title {
    color: var(--textcolor-100);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 0.4rem;
}

.list-artist-name {
    color: var(--textcolor-500);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1;
}

.list-song-dir {
    color: var(--purple-700);
    font-size: 0.6rem;
    font-weight: 500;
    line-height: 1;
    padding-top: 0.3rem;
}

.pagination-section {
    padding: 1rem 1rem;
    max-width: 75rem;
    margin:0 auto;
}

.pagination {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.pagination a:first-child {
    margin-right: auto;
    padding:0.3rem 2rem 0.3rem 2rem;
    background: var(--white-100);
    border: 1px solid var(--textcolor-500);
    color: var(--textcolor-500);
    border-radius: 50px;  
    font-size: 0.8rem;
     }

.pagination a:last-child {
    margin-left: auto;
    padding:0.3rem 2rem 0.3rem 2rem;
    background: var(--white-100);
    color: var(--textcolor-500);
    border: 1px solid var(--textcolor-500);
    border-radius: 50px; 
    font-size: 0.8rem;
    
}

/* nav */

.header-home {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background-color: var(--purple-700);
}

.navbar-home {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 4rem;
  margin: 0 auto;
}

.brand-home img {
  width:7rem;
  height:auto;
}

.menu-home {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 70vh;
  overflow: hidden;
  background-color: var(--purple-700);
  box-shadow: var(--shadow-medium);
  transition: all 0.4s ease-in-out;
}
.menu-home.is-active {
  right: 0;
}
.menu-inner-home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 1.25rem;
  margin-top: 8rem;
}
.menu-link-home {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 599;
  line-height: 1.5;
  color: var(--white-100);
  text-transform: uppercase;
  transition: all 0.3s ease;
}
.menu-block-home {
  font-size: 1.3rem;
  text-align: right;
  color: var(--white-100);
  font-weight:620;
  
}

@media only screen and (max-width: 481px) {
  .menu-block-home {
    margin: 0 1rem 0 auto;
  }
}
@media only screen and (min-width: 48rem) {
  .menu-home {
    position: relative;
    left: 0;
    width: auto;
    height: auto;
    box-shadow: none;
  }
  .menu-inner-home {
    display: flex;
    flex-direction: row;
    column-gap: 1.75rem;
    margin: 0 auto;
  }
}

.burger-home {
  position: relative;
  display: block;
  order: 1;
  cursor: pointer;
  user-select: none;
  z-index: 10;
  width: 1.6rem;
  height: 1.15rem;
  rotate: 0deg;
  border: none;
  outline: none;
  visibility: visible;
  background: none;
  transition: 0.35s ease;
}
@media only screen and (min-width: 48rem) {
  .burger-home {
    display: none;
    visibility: hidden;
  }
}
.burger-line-home {
  position: absolute;
  display: block;
  right: 0;
  width: 100%;
  height: 2.1px;
  opacity: 1;
  rotate: 0deg;
  border: none;
  outline: none;
  border-radius: 1rem;
  background-color: var(--white-100);
  transition: 0.25s ease-in-out;
}
.burger-line-home:nth-child(1) {
  top: 0px;
}
.burger-line-home:nth-child(2) {
  top: 0.5rem;
  width: 100%;
}
.burger-line-home:nth-child(3) {
  top: 1rem;
  width: 60%;
}
.burger-home.is-active > .burger-line-home:nth-child(1) {
  top: 0.5rem;
  rotate: 135deg;
}
.burger-home.is-active > .burger-line-home:nth-child(2) {
  opacity: 0;
  visibility: hidden;
}
.burger-home.is-active > .burger-line-home:nth-child(3) {
  top: 0.5rem;
  rotate: -135deg;
  width: 100%;
}

.navbar-home img {
    width: 7rem;
    height: auto;
}

/* //nav */

/* similar artist */

  .fartist-section {
    max-width: 75rem;
    margin:0 auto;
    padding-top: 0.3rem;
}

.fartist-section-container {
    background:inherit;
    padding: 1.5rem 1.5rem 1.5rem 1rem;
}

  div.fartist {
    overflow:auto;
    white-space:nowrap;
} 

div.fartist a { 
  display:inline-block;
  text-align:center;
  text-decoration:none;
  margin-right:9px;
  vertical-align: middle;
} 

div.fartist img {
  border-radius:100%;
  height: auto;
  width: 9.5rem; 
  box-shadow: var(--shadow-medium);      
} 

div.fartist img:hover {
  opacity:0.5;
}

.fartsist a {
   text-decoration: none;
   }

.fartist-title {
  padding:10px 2px;
  width: 9.5rem;
    }

.fartist-heading {
  color: var(--textcolor-100);
  font-size: 0.657rem;
  font-weight: 500;
  margin-bottom: 0.975rem;
    
}

.fartist-title {
    white-space: normal;
    width: 9.5rem;  
    text-align: center; 
    font-size:0.9785rem;
    font-weight: 500;    
    color: var(--textcolor-500); 
    text-transform:capitalize;   
}

@media screen and (max-width:48rem){ .fartist{-ms-overflow-style:none;
scrollbar-width:none;
} .fartist::-webkit-scrollbar{display:none;}
}
/* //Similar Artists */
                 
 /* video page */

.video-section {
    margin:0 auto;
    max-width: 75rem;
    padding: 5rem 0 0.8rem 0;
    background: black;
}

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-iframe {
    max-width: 100%;
    height: auto;
}

.youtube {
    height: 15rem;
    width: 100vw;
    margin:0 auto;
    text-align: center;
}

@media only screen and (min-width:48rem){
    .youtube {
    height: 20.9375rem;
    width: 70vw;
}
}

@media only screen and (min-width:1501px){
    .youtube {
    height: 30.9375rem;
    width: 74rem;
}
}

.video-details {
    max-width: 75rem;
    margin:0 auto;
    padding:0.6rem 0.8rem;
}

.songtitle {
    font-size: 1.5rem;
    color: var(--textcolor-100);
    text-align: left;
}

.artist {
    font-size: 0.9rem;
    text-align: left;
    color: var(--textcolor-500);
}

.genre-date {
    font-size: 0.6rem;
    text-align: left;
    color: var(--textcolor-100);
}


 /* privacy page */

.privacy-section {
    max-width: 75rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 3rem 1.5rem;
    text-align: left;
}

.privacy-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.privacy-container h2,  .privacy-container h1{
    color: var(--textcolor-500);
    margin-bottom: 1.2rem;
    font-size: 1.6rem;
    font-weight: 900; 
    line-height: 1;
}

.privacy-container p {
    margin-bottom: 1.2rem;
    color: var(--textcolor-100);
    font-size: 94%;
}

/* //privacy page */


/* artist profile */


.artist-profile {
    max-width: 75rem;
    margin: 0 auto;
}

.artist-profile-image {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding:0 1.5rem 0.9rem 1.5rem;
}

.artist-profile-image img {
    height: 11rem;
    width: 11rem;
    padding: 0px;    
    border-radius: 100%;
    border: 4px solid rgba(255,255,255,0.9);
    box-shadow: var(--shadow-larger);
}

.artist-profile-details {
    text-align:center;
    padding: 0.5rem 0rem; 
    row-gap: 0.2rem;
    margin-top:15.8rem;
}

.artist-profile-name {
    color: var(--textcolor-100);
    font-size: 2.4rem;
    text-transform: capitalize;
}

.artist-profile-details span {
    color: var(--textcolor-100);
    margin: 0.02rem;
    font-size: 0.8rem;    
    text-align: center;
    font-weight:300;
    text-transform: capitalize;
}

.fa-check-circle {
  color: var(--purple-700);
  display: inline-block;
  vertical-align: middle;
}

.overlay {
    background: rgb(28,26,46);
    background: linear-gradient(180deg, rgba(1,1,1,0) 0%, rgba(28, 26, 46, 1) 100%);
    padding: 6rem 1.5rem 1.2rem 1.5rem;
    min-height: 26rem;
}

.ap-songs-section {
    max-width: 75rem;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    }
div.ap-songs {
    overflow:auto;
    white-space:nowrap;
} 

div.ap-songs a {
  display:inline-block;
  text-align:left;
  text-decoration:none;
  margin-right:9px;
  vertical-align: middle;
} 

div.ap-songs img {
  border-radius:5px;
  height: auto;
  width: 9rem;
} 

div.ap-songs img:hover {
  opacity:0.5;
}

.aps-p h2{
    padding-bottom: 0.875rem;
    font-size: 1rem;
    color: var(--textcolor-100);
}


.aps a {
   text-decoration: none;
   }

.aps-title {
    font-size: 0.89rem;
    color: var(--textcolor-100);
    font-weight: 599;
    padding-top: 0.7rem;
    text-transform:capitalize;
}

.aps-artist{
    font-size: 0.89rem;
    color: var(--textcolor-500);
    padding-top: 0.2rem;
}

.aps-title, .aps-artist {
    padding-left: 1px;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 9rem;
    overflow: hidden; 
    
}

.aps-heading {
    color: var(--textcolor-100);
    font-size: 0.7rem;
    font-weight: 500;
    margin-bottom: 0.7rem;
}

.aps {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 9rem;
    overflow: hidden;    
    display: flex;
    flex-direction: column;
}

@media only screen and (max-width:48rem){ .ap-songs{-ms-overflow-style:none;
scrollbar-width:none;
} .ap-songs::-webkit-scrollbar{display:none;}
}

.alr-section {
    max-width: 75rem;
    margin: 0 auto;
    padding: 2rem 1rem;
    
}

.alr-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.alr-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    text-align: left;
    margin: 0rem;
    max-width: 25rem;
    background: rgba(255,255,255,0.1);
    border-radius:5px;
     overflow: hidden;
    
}

.alr-col1 {
    width: 30%;
}

.alr-col2 {
    width: 40%;
}

.alr-col1 img {
    width: 6rem;
    height: auto;
    border-radius: 5px 0 0 5px;
}

.alr-col1 img:hover {
    opacity:0.5;
}

.alr-col2 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 0;
    line-height: 1.1;
    text-align: left;
}
.alr-col3 {
  margin-left: auto;
  text-align: center;
  width:20%;
  transform: rotate(90deg);
  
}

.alr-latest{
  background: var(--white-100);
  padding:0.9rem 0 0.2rem 0;
  border-radius:2px;
  color:var(--textcolor-100);
}
.alr-song-title {
    color: var(--textcolor-100);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 0.45rem;
    text-transform:capitalize;
}

.alr-artist-name {
    color: var(--textcolor-500);
    font-size: 0.7rem;
    font-weight: 504;
    line-height: 1;
}

.alr-date {
    color: var(--textcolor-100);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    padding-top: 0.4rem;
}

.alr-p h2{
    padding-bottom: 0.9rem;
    font-size: 1rem;
    color: var(--textcolor-100);
}

.about-section {
    margin:0 auto;
    max-width: 75rem;
    padding: 2rem 1rem;
    background: var(--white-100);
}

.about {
    color: var(--textcolor-100);
    font-size:0.875rem;
    font-weight: 302;
}

.about-p h2{
    padding-bottom: 0.9rem;
    font-size: 1rem;
    color: var(--textcolor-100);
    text-transform: capitalize;
}

.about-source {
    margin-top: 0.5rem;
}

.about-source a {
    color: var(--purple-700);
    font-size:0.8rem;
}

.artist-social-media {
    vertical-align: middle;
    font-size: 1.2rem;
    display: inline-flex;
    column-gap: 1.5rem;
    margin: 1rem 0;
}
        
.artist-social-media .fa-brands {
    color: var(--textcolor-500);
}

    /* blog */

 .featured-section {
   max-width: 75rem;
   margin: 0 auto;
   padding: 6rem 1rem 1rem 1rem;
 }
     
 .featured-section-container {
     display:flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
     align-items:center;
 }

 .featured-post {
    border-radius:15px;
    margin:0;
    padding:0;
 }
 
 .featured-post-image, .featured-post-image img{
     margin:0;
     padding:0;
     width:100%;
     height: 18.8rem;
     border-radius:15px 15px 0 0;
 }
 
 .featured-post-body{
     background-color: var(--blogseccolor-400);
     padding:2rem;
     margin:0;
     border-radius:0 0 15px 15px;
 }
 

 .featured-post-body a {
     color: var(--purple-700);
     font-size: 1.3875rem;
     font-weight:800;     
     line-height:1.1;
 }
 
  .featured-cat{
    background: var(--blogseccolor-400);
    border-radius:50px;
    position:relative;
    z-index: 55;
    margin-top:-2rem; 
    max-width: 3rem;
    text-align:center;
    margin-left: 1rem;
    padding-bottom:0.175rem;
  }

 .featured-cat a {
     color:var(--purple-700);
     font-size: 0.6rem;
     font-weight:400;
     vertical-align:middle;
 }
 
 .featured-post-2 {
   display:flex;
   flex-direction: row;
   justify-content: center;
   align-items:center;
   padding:1rem 0 1rem 0;
   border-bottom:1.2px solid var(--white-400);
 }
 
 
 .featured-post-2-body {
     padding:1rem;
 } 

  .featured-post-2-link {
    color: var(--blogseccolor-400);
    font-weight:500;
    font-size:0.875rem;
  }
      
 .featured-post-2-image img{
     height:7rem;
     width:28rem;
     border-radius:15px;
 }
 
 .featured-cat-2-3 {
     color:var(--white-500);
     font-size:0.675rem;
     font-weight:400;
     margin-bottom:0.2rem;     
 } 
      
      
  .featured-cat-2-3 a{
     color:var(--white-500);
     font-size:0.675rem;
     font-weight:400;
  } 

  @media only screen and (min-width:48rem){
 
     .featured-section-container {
         display:flex;
         flex-direction:row;
         justify-content:center;
         align-items:center;
         height: 30rem;
         margin:0 auto;
                        } 
     
      .featured-post-col-1 {
         width:55%;
     }
     
     .featured-post-col-2 {
         width: 45%;
         padding-left:1rem;
     }
    
    .featured-post-image, .featured-post-image img{
     margin:0;
     padding:0;
     width:100%;
     height: 18.8rem;
     border-radius:15px 15px 0 0;
 }
 
 .featured-post-2 {
     width: 100%;
     height: 98%;
 }
 }


/* //blog */


.colm img, .ap-songs img, .falcol img, .div-scroll img  {
        
     box-shadow: var(--shadow-large) !important;
     border:1px solid rgba(255,255,255,0.1);  
            }

.colm {
    line-height:1.15 !important;
    margin-bottom:0.8rem;
}

.latest-song-name {
    padding-top:0.8rem !important;
    font-weight:599;
    color:var(--textcolor-100);
}

.latest-song-group{line-height:1.15;}

.latest-artist-name { margin-top:-2.2rem !important;}
.latest-img {
  margin-bottom: 0.5rem;
  display: block;
}

.div-scroll-section {
     max-width: 75rem;
     padding:1rem;
     margin: 0 auto;
 }

.div-scroll {
    display: inline-flex;
    width: 100%;
    column-gap: 0.8rem;
    row-gap: 0.8rem;
    overflow-x: scroll;
}

 .div-scroll img, .ds-artist-title, .ds-artist-name {
     width: 10rem;
     height: auto;
 }

  .div-scroll img {
    border-radius: 5px;
  }

   .div-scroll img:hover {
     opacity: 0.5;
   }
 
 .ds-artist-title {
     margin-top: 0.7rem;
     font-size: 0.875rem;
     font-weight: 500;
     color: var(--textcolor-100);
     overflow: hidden;
     text-overflow:ellipsis;
     display:-webkit-box;
     -webkit-line-clamp:2;
     -webkit-box-orient: vertical;
 }

 .ds-artist-name {
   margin-top: 0.35rem;
   color: var(--textcolor-500);
   font-size: 0.875rem;
   font-weight: 500;
   overflow: hidden;
   text-overflow:ellipsis;
   white-space: nowrap;
 }
 
 @media only screen and (min-width:481px){
      .div-scroll img, .ds-artist-title, .ds-artist-name {
     width: 11rem;
     height: auto;
 }
 }

@media screen and (max-width:48rem){ .div-scroll{-ms-overflow-style:none;
scrollbar-width:none;
} .div-scroll::-webkit-scrollbar{display:none;}
}

.hide {
    display:none;
    padding:0;
    margin:0;
}

.show {
    display:block !important;
 }

@media only screen and (min-width:481px){ .adisplay {
  display:none;
  padding:0;
  margin:0;
} }

.gray {
    color: var(--white-400);
}

.wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  width: 100%;
}

.tab {
  cursor: pointer;
  padding: 10px 20px;
  margin: 0px 2px;
  background: var(--purple-700);
  display: inline-block;
  color: var(--textcolor-100);
  border-radius: 15px 15px 0px 0px;
  box-shadow: 0 0.5rem 0.8rem #00000080;
}

.panels {
  background: var(--white-100);
  min-height: 200px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding-top: 20px;
  white-space: nowrap;
  
}

.panel {
  display: none;
  animation: fadein 0.8s;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.panel-title {
  font-size: 1.5em;
  font-weight: bold;
}

.radio {
  display: none;
}

#one:checked ~ .panels #one-panel,
#two:checked ~ .panels #two-panel {
  display: block;
}

#one:checked ~ .tabs #one-tab,
#two:checked ~ .tabs #two-tab {
  background: var(--white-100);
  color: var(--textcolor-100);
  border-top: 3px solid var(--purple-700);
}

.bottom-nav-section {
  min-width: 100%;
  margin: 0 auto;
  padding:0;
  bottom: 0;
  position:fixed;
  z-index: 9999;
}
.bottom-nav-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: auto;
  margin: 0 auto;
  background: var(--white-100);
  border-top: 1px solid var(--textcolor-500);
  }

.b-nav {
  color: var(--textcolor-500);
  padding: 0.8rem 0.9rem;
  font-size: 1.2975rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bottom-nav-section { 
  display:none;
}
.bottom-nav-section.scrolled1 { 
  display:block;
}

.b-nav-text {
  margin-top: 0.4rem;
  font-size: 0.6rem;
}
.b-nav:first-child {
  padding-left: 1.5rem;
}
.b-nav:first-child {
  padding-right: 1.5rem;
}
.b-nav:active {
  border-top: 4px solid var(--textcolor-500);
  border-radius: 3px 3px 0 0;
}

@media only screen and (min-width:481px){
 .bottom-nav-section, .bottom-nav-container {
   display:none !important;
   padding:0;
   margin:0;
}
}


.btn-view-more{
color:var(--textcolor-100);
background-color:transparent;
border-radius:5px;
border:1px solid var(--textcolor-100);
width:94.5%;
padding:0.4rem 2rem;
text-align:center;
margin:0.2rem 0.7rem;
}

.btn-view-more:hover { 
color:var(--purple-700);
border:1px solid var(--purple-700);
}
.view-header-details {
text-transform:uppercase; }

.fartist img {
border:1px solid rgba(255,255,255,0.1);
}

.bg-phone {
  width:45rem;
  height:auto;
  margin-bottom: -24.9rem;
}
 .p1 {
    margin-top:1rem;
    color: var(--white-100);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
   
}

 .p2 {
    color: var(--white-100);
    font-size: 1rem;
    font-weight: 300;
    margin-top: 1rem;
    text-align: center;
}

 .container1 {
     padding:4rem 1.8rem 1.5rem 1.8rem;
}

.section {
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  background: var(--purple-700);
  background-size:cover;
min-height:32rem;
}

.col-1 {
  text-align: center;
  
}

.col-2{
  text-align: center;
  
}
@media only screen and (min-width:30rem){
  
    .section {
  background-size:cover;
  min-height: 28.875rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
      text-align: left;
      background: linear-gradient(to bottom right,#112c57 40%,#165bd5 100%);
}

.menu-home {
 background:none !important;
}

.col-1 {
    padding:0.002rem 0.5rem 1rem 7rem;
    text-align: left;
    
}
  
  .col-2 {
    display:flex;
    flex-direction: column;
    text-align: right;
    width:70%;
  }
  
  .bg-phone {
    margin-bottom: 0;
    margin-top: 3rem;
    width:auto;
    height: 22rem;
  }
.container1 {
    padding: 1.5rem;
    text-align: left;
    margin: auto;
    display:flex;
    flex-direction: column;
    row-gap: 1rem;
}
  
  .p1{
    height: auto;
    text-align: left;
    margin: 0;
    }

.p2{
    height: auto;
    text-align: left;
    margin: 0;
    width: 80%;
    }
.youtube {
height:20.9375rem;
width:70vw;
}
}

overlay {
    background: transparent;
    background: linear-gradient(180deg, rgba(1,1,1,0) 70%, rgba(28, 26, 46, 1) 30%) !important;
}

.dropbtn {
  background-color: none;
  border: none;
  cursor: pointer;
 text-align:left;
}


.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: %var(bg)%;
  min-width:160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index:1;
  border-radius:2.25rem;
  border:1px solid %var(bg)%;
}


.dropdown-content textarea{
  
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  border:none;
}

.dropdown-content a:hover {background-color: #f1f1f1}


.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: none;
}

.alert {
  padding: 20px;
  border-radius:5px;
  background-color: #fbcac3;
  border:1px solid #ff3131;
  color: #5a5a5a;
  text-align:left;
  display:none;
}

.closebtn {
  margin-left: 15px;
  color: #5a5a5a;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

.pointer1 {
pointer-events:none;
opacity:0.3;
}