@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url('https://fonts.cdnfonts.com/css/avenir');
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap');
@import url("https://db.onlinewebfonts.com/c/55c4f556836775174bfac94178a3fe82?family=Proxima+N+W01+Reg");


.media-section {
    max-width: 900px;
    padding: 20px;
    margin: 0 auto;
    margin-top:-120px;
    position: relative;
    z-index: 4;
    text-align: center;
    background-color: transparent;
    overflow-x: hidden;
}

.album {
    max-width: 660px;
    background-color: #ffffff;
    padding: 20px;
    overflow: hidden;
}

/* Audio Player Styles */
.audio-player {
    display: flex;
    align-items: center;
}
.album-art {
    width: 25%;
}
.album-art img {
    width: 100%;
    height: auto;
}

.player-controls {
    text-align: left;
    width: 75%;
    padding:0px 20px;
}

.top-to-pay-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.pay-push {
    margin-right: 10px;
}

.play-pause-btn {
    padding: 8px 16px;
    background-color: transparent;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.play-pause-btn:hover svg {
    fill:#7FCCF7;
}

.contents {
    flex-grow: 1;
    text-align: left;
    position: relative;
}

.contents h3 {
    font-size: 18px;
    color: #000;
    margin: 0;
    font-family: "Nunito", sans-serif;
    font-weight: 300;
    line-height: 1.4;
}

.contents p {
    margin: 5px 0;
    color: #000;
    font-family: "Nunito", sans-serif;
    font-weight: 300;
    font-size: 14px;
}
.contents i {
    cursor: pointer;
}
.contents svg {
    position: absolute;
    top:0;
    right: 0;
    fill:#7FCCF7;
}

.audio-play-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.control-buttons {
    display: flex;
    justify-content: space-between;
    width: 20%;
    margin-right: 20px;
}

.control-btn {
    padding: 10px 15px;
    background-color: transparent;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.control-btn:hover svg {
    fill:#7FCCF7;
}

/* Progress Container */
.progress-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: auto;
    width: 65%;
}

.slider {
    width: 70%;
    cursor: pointer;
    margin: 0 10px;
}

#current-time, #duration-time {
    font-size: 14px;
    color: #555;
    padding:0px 7px;
    position: relative;
}

#duration-time::before {
    content:"";
    position: absolute;
    top:0;
    width: 1px;
    height: 80%;
    left:-5%;
    transform:rotate(30deg);
    background-color: #333;
}

/* Volume Control */
.volume-control {
    font-size: 14px;
    cursor: pointer;
    position: relative;
    margin-left: 10px;
}
.volume-control #volume-slider {
    display: none;
    position: absolute;
    top: -330%;
    left: -300%;
    transform: rotate(270deg);
    width: 100px;
}
.volume-control.active #volume-slider {
    display: inline;
}

audio {
    width: 100%;
    margin-top: 20px;
}

.track-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    text-align: left;
}

.track-list li {
    padding: 15px 0 15px 8px;
    cursor: pointer;
    color: #555;
    border-bottom:1px solid rgba(0, 0, 0, .1);
    transition: background-color 0.2s ease-in-out;
    font-family: "Nunito", sans-serif;
    font-family: 300;
    font-size: 14px;
}


.track span {
    float: right;
    color: #000;
}

/* Active Track */
.track {
    position: relative;
}
.track.active {
    background-color: #ffffff;
    color: #7FCCF7;
}

.audio-download {
    margin-left: 14px;
}

.track:hover .active-track,
.track.active .active-track{
    display: flex;
}

.active-track {
    display: none;
    justify-content: space-between;
    align-items: center;
    color:#7FCCF7;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    background-color: #fff;
    padding:12px 0 12px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.active-track i.play svg {
    fill: #7FCCF7;
    width: 19px;
    height: 20px;
}
.active-track > span {
    font-family: "Nunito", sans-serif;
    font-size: 300;
    font-size: 16px;
    margin-right: auto;
    padding-left: 20px;
    color:#7FCCF7;
}
.active-track .meta svg {
    fill: #7FCCF7;

}
.active-track .meta a {
    display: inline-block;
    color: #7FCCF7 !important;
    padding:3px 10px;
    color: #000;
    border: 1px solid #7FCCF7;
    text-decoration: none;
    margin-left: 10px;
}

/* Input Range */

/* Hide the default appearance */
input[type="range"] {
    -webkit-appearance: none; /* Safari */
    width: 100%; /* Full width */
    background: transparent; /* Remove background */
}

/* Track styles */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px; /* Height of the track */
    background: #ddd; /* Background color */
    border-radius: 5px; /* Rounded corners */
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: #ddd;
    border-radius: 5px;
}

/* Thumb styles */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Safari */
    width: 20px; /* Thumb width */
    height: 20px; /* Thumb height */
    background: #7FCCF7; /* Thumb color */
    border-radius: 50%; /* Round thumb */
    cursor: pointer; /* Pointer cursor */
    margin-top: -6px; /* Center the thumb */
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #7FCCF7;
    border-radius: 50%;
    cursor: pointer;
}

/* Hover effect */
input[type="range"]::-webkit-slider-thumb:hover {
    background: #7FCCF7; /* Darker on hover */
}

input[type="range"]::-moz-range-thumb:hover {
    background: #7FCCF7;
}

/* Focus effect */
input[type="range"]:focus {
    outline: none; /* Remove default focus outline */
}

input[type="range"]::-webkit-slider-runnable-track:focus {
    background: #ccc; /* Change track color on focus */
}

input[type="range"]::-moz-range-track:focus {
    background: #ccc;
}


/* Social share icons */

.share-audio-icons ul {
    position: absolute;
    top:0;
    right: 0;
    width: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style-type: none;
    transform: translateX(200%);
    transition: all .3s ease-in-out;
    background-color: #ffffff;
    padding:5px;
}
.share-audio-icons ul li {
    background-color: #ffffff;
}
.share-audio-icons ul svg {
    position: static;
    width: 14px;
    height: 14px;
    fill: #555;
    opacity: .7;
}
.share-audio-icons ul.active {    
    transform: translateX(0%);
}
.share-audio-icons ul.first-track.active {
    transform: translateX(-298%);
}
.share-audio-icons ul.first-track {
    width: 50px;
}
.share-audio-icons ul.first-track li {
    padding-left:0;
    padding-right:0;
}
.share-audio-icons ul.first-track a {
    padding: 0;
    border:none;
}

.share-audio-icons ul li.first {
    transform: translateX(200%);
    transition: all .2s ease-in-out;
}
.share-audio-icons ul li.second {
    transform: translateX(200%);
    transition: all .4s ease-in-out;
}
.share-audio-icons ul li.third {
    transform: translateX(200%);
    transition: all .6s ease-in-out;
}
.share-audio-icons ul li.fourth {
    transform: translateX(200%);
    transition: all .8s ease-in-out;
}

.share-audio-icons ul.active li.first {
    transform: translateX(0%);
}
.share-audio-icons ul.active li.second {
    transform: translateX(0%);
}
.share-audio-icons ul.active li.third {
    transform: translateX(0%);
}
.share-audio-icons ul.active li.fourth {
    transform: translateX(0%);
}