body{
    font-family: Arial, Helvetica, sans-serif;
    align-items: center;
}

.banner_carousel{
    /* border: 2px solid red; */
    width: 90%;
    display: flex;
    margin: auto;
    margin-top: 140px;
    margin-left: 80px;
    text-align: center;
    overflow: hidden;
    /* padding: 1%; */
    gap: 1%;
    z-index: 0;
    position: relative;
}

.banner_carousel .banner{
    min-width: 49%;
    min-height: 300px;
    /* border: 2px solid pink; */
    transform: translateX(-50%);
    transition: ease-out;
    transition-duration: .5s;
    /* padding: .5%; */
}

.banner_carousel .banner img{
    /* border: 2px solid black; */
    width: 100%;
    border-radius: 5px;
    height: 95%;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.226);
}

.carousel button{
    position: absolute;
    border: none;
    border-radius: 50%;
    background: transparent;
    top: 45%;
    z-index: 1;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 30px;
    color: transparent;
}

.carousel button:hover{
    background: gray;
    color: black;
}
.banner_carousel .b1{
    left: 2%;
}

.banner_carousel .b2{
    right: 2%;
}

/* .block_display{
    /* border: 2px solid red;
} 
*/

.block_display{
    width: 90%;
    padding-left: 30px;
    margin: auto;
}
.tag{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.h-tag{
    margin-top: 30px;
    margin-bottom: 20px;
}
.a-tag{
   text-decoration: none;
   color: rgb(231,44,48);
   font-size: 12px;
   font-weight: 400;
}
.block_display .cards_carousel{
    /* border: 2px solid red; */
    display: flex;
    overflow: hidden;
    width: 100%;
    text-align: center;
    position: relative;  
}

.block_display .cards_carousel .card{
    /* padding: 0% 2% 0% 0%; */
    /* border: 2px solid black; */
    /* transform: translateX(-50%); */
    margin-right: 40px;
    transition: ease-out;
    transition-duration: .5s;
    text-decoration: none;
    color: black;
}

.block_display .cards_carousel .card img{
    /* border: 2px solid red; */
    /* margin: 0% 2% 0% 0%; */
    /* margin-right: 40px; */
    width: 160px;
    border-radius: 5px;
}

.cards_carousel .b1{
    left: 0%;
    transform: translateY(-100%);
}

.cards_carousel .b2{
    right: 0%;
    transform: translateY(-100%);
}


/* player Css */
.bottom {
    display: block;
    position: sticky;
    width: 100%;
    bottom: 0;
    height: 90px;
    background-color: rgb(255, 255, 255);
    margin: auto;
}

.bottom input {
    -ms-flex-align: center;
    align-items: center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    min-height: 12px;
    overflow: hidden;
  }
  
  .bottom input:focus {
    box-shadow: none;
    outline: none;
  }
  
  .bottom input::-webkit-slider-runnable-track {
    background: tomato;
    content: '';
    height: 2px;
    pointer-events: none;
  }
  
  .bottom input::-webkit-slider-thumb {
    height: 12px;
    width: 12px;
    -webkit-appearance: none;
    appearance: none;
    background: tomato;
    border-radius: 50%;
    box-shadow: 5px 0 0 -8px #c7c7c7, 6px 0 0 -8px #c7c7c7, 7px 0 0 -8px #c7c7c7, 8px 0 0 -8px #c7c7c7, 9px 0 0 -8px #c7c7c7, 10px 0 0 -8px #c7c7c7, 11px 0 0 -8px #c7c7c7, 12px 0 0 -8px #c7c7c7, 13px 0 0 -8px #c7c7c7, 14px 0 0 -8px #c7c7c7, 15px 0 0 -8px #c7c7c7, 16px 0 0 -8px #c7c7c7, 17px 0 0 -8px #c7c7c7, 18px 0 0 -8px #c7c7c7, 19px 0 0 -8px #c7c7c7, 20px 0 0 -8px #c7c7c7, 21px 0 0 -8px #c7c7c7, 22px 0 0 -8px #c7c7c7, 23px 0 0 -8px #c7c7c7, 24px 0 0 -8px #c7c7c7, 25px 0 0 -8px #c7c7c7, 26px 0 0 -8px #c7c7c7, 27px 0 0 -8px #c7c7c7, 28px 0 0 -8px #c7c7c7, 29px 0 0 -8px #c7c7c7, 30px 0 0 -8px #c7c7c7, 31px 0 0 -8px #c7c7c7, 32px 0 0 -8px #c7c7c7, 33px 0 0 -8px #c7c7c7, 34px 0 0 -8px #c7c7c7, 35px 0 0 -8px #c7c7c7, 36px 0 0 -8px #c7c7c7, 37px 0 0 -8px #c7c7c7, 38px 0 0 -8px #c7c7c7, 39px 0 0 -8px #c7c7c7, 40px 0 0 -8px #c7c7c7, 41px 0 0 -8px #c7c7c7, 42px 0 0 -8px #c7c7c7, 43px 0 0 -8px #c7c7c7, 44px 0 0 -8px #c7c7c7, 45px 0 0 -8px #c7c7c7, 46px 0 0 -8px #c7c7c7, 47px 0 0 -8px #c7c7c7, 48px 0 0 -8px #c7c7c7, 49px 0 0 -8px #c7c7c7, 50px 0 0 -8px #c7c7c7, 51px 0 0 -8px #c7c7c7, 52px 0 0 -8px #c7c7c7, 53px 0 0 -8px #c7c7c7, 54px 0 0 -8px #c7c7c7, 55px 0 0 -8px #c7c7c7, 56px 0 0 -8px #c7c7c7, 57px 0 0 -8px #c7c7c7, 58px 0 0 -8px #c7c7c7, 59px 0 0 -8px #c7c7c7, 60px 0 0 -8px #c7c7c7, 61px 0 0 -8px #c7c7c7, 62px 0 0 -8px #c7c7c7, 63px 0 0 -8px #c7c7c7, 64px 0 0 -8px #c7c7c7, 65px 0 0 -8px #c7c7c7, 66px 0 0 -8px #c7c7c7, 67px 0 0 -8px #c7c7c7, 68px 0 0 -8px #c7c7c7, 69px 0 0 -8px #c7c7c7, 70px 0 0 -8px #c7c7c7, 71px 0 0 -8px #c7c7c7, 72px 0 0 -8px #c7c7c7, 73px 0 0 -8px #c7c7c7, 74px 0 0 -8px #c7c7c7, 75px 0 0 -8px #c7c7c7, 76px 0 0 -8px #c7c7c7, 77px 0 0 -8px #c7c7c7, 78px 0 0 -8px #c7c7c7, 79px 0 0 -8px #c7c7c7, 80px 0 0 -8px #c7c7c7, 81px 0 0 -8px #c7c7c7, 82px 0 0 -8px #c7c7c7, 83px 0 0 -8px #c7c7c7, 84px 0 0 -8px #c7c7c7, 85px 0 0 -8px #c7c7c7, 86px 0 0 -8px #c7c7c7, 87px 0 0 -8px #c7c7c7, 88px 0 0 -8px #c7c7c7, 89px 0 0 -8px #c7c7c7, 90px 0 0 -8px #c7c7c7, 91px 0 0 -8px #c7c7c7, 92px 0 0 -8px #c7c7c7, 93px 0 0 -8px #c7c7c7, 94px 0 0 -8px #c7c7c7, 95px 0 0 -8px #c7c7c7, 96px 0 0 -8px #c7c7c7, 97px 0 0 -8px #c7c7c7, 98px 0 0 -8px #c7c7c7, 99px 0 0 -8px #c7c7c7, 100px 0 0 -8px #c7c7c7, 101px 0 0 -8px #c7c7c7, 102px 0 0 -8px #c7c7c7, 103px 0 0 -8px #c7c7c7, 104px 0 0 -8px #c7c7c7, 105px 0 0 -8px #c7c7c7, 106px 0 0 -8px #c7c7c7, 107px 0 0 -8px #c7c7c7, 108px 0 0 -8px #c7c7c7, 109px 0 0 -8px #c7c7c7, 110px 0 0 -8px #c7c7c7, 111px 0 0 -8px #c7c7c7, 112px 0 0 -8px #c7c7c7, 113px 0 0 -8px #c7c7c7, 114px 0 0 -8px #c7c7c7, 115px 0 0 -8px #c7c7c7, 116px 0 0 -8px #c7c7c7, 117px 0 0 -8px #c7c7c7, 118px 0 0 -8px #c7c7c7, 119px 0 0 -8px #c7c7c7, 120px 0 0 -8px #c7c7c7, 121px 0 0 -8px #c7c7c7, 122px 0 0 -8px #c7c7c7, 123px 0 0 -8px #c7c7c7, 124px 0 0 -8px #c7c7c7, 125px 0 0 -8px #c7c7c7, 126px 0 0 -8px #c7c7c7, 127px 0 0 -8px #c7c7c7, 128px 0 0 -8px #c7c7c7, 129px 0 0 -8px #c7c7c7, 130px 0 0 -8px #c7c7c7, 131px 0 0 -8px #c7c7c7, 132px 0 0 -8px #c7c7c7, 133px 0 0 -8px #c7c7c7, 134px 0 0 -8px #c7c7c7, 135px 0 0 -8px #c7c7c7, 136px 0 0 -8px #c7c7c7, 137px 0 0 -8px #c7c7c7, 138px 0 0 -8px #c7c7c7, 139px 0 0 -8px #c7c7c7, 140px 0 0 -8px #c7c7c7, 141px 0 0 -8px #c7c7c7, 142px 0 0 -8px #c7c7c7, 143px 0 0 -8px #c7c7c7, 144px 0 0 -8px #c7c7c7, 145px 0 0 -8px #c7c7c7, 146px 0 0 -8px #c7c7c7, 147px 0 0 -8px #c7c7c7, 148px 0 0 -8px #c7c7c7, 149px 0 0 -8px #c7c7c7, 150px 0 0 -8px #c7c7c7, 151px 0 0 -8px #c7c7c7, 152px 0 0 -8px #c7c7c7, 153px 0 0 -8px #c7c7c7, 154px 0 0 -8px #c7c7c7, 155px 0 0 -8px #c7c7c7, 156px 0 0 -8px #c7c7c7, 157px 0 0 -8px #c7c7c7, 158px 0 0 -8px #c7c7c7, 159px 0 0 -8px #c7c7c7, 160px 0 0 -8px #c7c7c7, 161px 0 0 -8px #c7c7c7, 162px 0 0 -8px #c7c7c7, 163px 0 0 -8px #c7c7c7, 164px 0 0 -8px #c7c7c7, 165px 0 0 -8px #c7c7c7, 166px 0 0 -8px #c7c7c7, 167px 0 0 -8px #c7c7c7, 168px 0 0 -8px #c7c7c7, 169px 0 0 -8px #c7c7c7, 170px 0 0 -8px #c7c7c7, 171px 0 0 -8px #c7c7c7, 172px 0 0 -8px #c7c7c7, 173px 0 0 -8px #c7c7c7, 174px 0 0 -8px #c7c7c7, 175px 0 0 -8px #c7c7c7, 176px 0 0 -8px #c7c7c7, 177px 0 0 -8px #c7c7c7, 178px 0 0 -8px #c7c7c7, 179px 0 0 -8px #c7c7c7, 180px 0 0 -8px #c7c7c7, 181px 0 0 -8px #c7c7c7, 182px 0 0 -8px #c7c7c7, 183px 0 0 -8px #c7c7c7, 184px 0 0 -8px #c7c7c7, 185px 0 0 -8px #c7c7c7, 186px 0 0 -8px #c7c7c7, 187px 0 0 -8px #c7c7c7, 188px 0 0 -8px #c7c7c7, 189px 0 0 -8px #c7c7c7, 190px 0 0 -8px #c7c7c7, 191px 0 0 -8px #c7c7c7, 192px 0 0 -8px #c7c7c7, 193px 0 0 -8px #c7c7c7, 194px 0 0 -8px #c7c7c7, 195px 0 0 -8px #c7c7c7, 196px 0 0 -8px #c7c7c7, 197px 0 0 -8px #c7c7c7, 198px 0 0 -8px #c7c7c7, 199px 0 0 -8px #c7c7c7, 200px 0 0 -8px #c7c7c7, 201px 0 0 -8px #c7c7c7, 202px 0 0 -8px #c7c7c7, 203px 0 0 -8px #c7c7c7, 204px 0 0 -8px #c7c7c7, 205px 0 0 -8px #c7c7c7, 206px 0 0 -8px #c7c7c7, 207px 0 0 -8px #c7c7c7, 208px 0 0 -8px #c7c7c7, 209px 0 0 -8px #c7c7c7, 210px 0 0 -8px #c7c7c7, 211px 0 0 -8px #c7c7c7, 212px 0 0 -8px #c7c7c7, 213px 0 0 -8px #c7c7c7, 214px 0 0 -8px #c7c7c7, 215px 0 0 -8px #c7c7c7, 216px 0 0 -8px #c7c7c7, 217px 0 0 -8px #c7c7c7, 218px 0 0 -8px #c7c7c7, 219px 0 0 -8px #c7c7c7, 220px 0 0 -8px #c7c7c7, 221px 0 0 -8px #c7c7c7, 222px 0 0 -8px #c7c7c7, 223px 0 0 -8px #c7c7c7, 224px 0 0 -8px #c7c7c7, 225px 0 0 -8px #c7c7c7, 226px 0 0 -8px #c7c7c7, 227px 0 0 -8px #c7c7c7, 228px 0 0 -8px #c7c7c7, 229px 0 0 -8px #c7c7c7, 230px 0 0 -8px #c7c7c7, 231px 0 0 -8px #c7c7c7, 232px 0 0 -8px #c7c7c7, 233px 0 0 -8px #c7c7c7, 234px 0 0 -8px #c7c7c7, 235px 0 0 -8px #c7c7c7, 236px 0 0 -8px #c7c7c7, 237px 0 0 -8px #c7c7c7, 238px 0 0 -8px #c7c7c7, 239px 0 0 -8px #c7c7c7, 240px 0 0 -8px #c7c7c7;
    margin-top: -5px;
  }
  
  .bottom input::-moz-range-track {
    height: 2px;
  }
  
  .bottom input::-moz-range-thumb {
    height: 12px;
    width: 12px;
    position: relative;
  }
  
  .bottom input::-moz-range-progress {
    height: 2px;
    background: #e33d44;
    border: 0;
    margin-top: 0;
  }
  
  .bottom input::-ms-track {
    background: transparent;
    border: 0;
    border-color: transparent;
    border-radius: 0;
    border-width: 0;
    color: transparent;
    height: 2px;
    margin-top: 10px;
    width: 240px;
  }
  
  .bottom input::-ms-thumb {
    height: 12px;
    width: 12px;
  }
  
  .bottom input::-ms-fill-lower {
    background: #e33d44;
    border-radius: 0;
  }
  
  .bottom input::-ms-fill-upper {
    background: #c7c7c7;
    border-radius: 0;
  }
  
  .bottom input::-ms-tooltip {
    display: none;
  }

.playbox {
    display: flex;
    color: black;
    margin-top: 5px;
}

.songInfo {
    float: left;
    margin-left: 10px;
    margin-top: 15px;
}

.timer {
    float: left;
    margin-left: 3%;
    border: 1px solid tomato;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 20px;
    font-size: 12px;
    padding-bottom: 10px;
    margin-top: 10px;
}

.icons {
    margin-top: 8px;
    float: left;
    margin-left: 0%;
}

.icons i {
    cursor: pointer;
    color: rgb(0,0,0);
    font-size: 30px;
    margin-bottom: 40px;
    margin-left: 20px;
}

#myProgressBar {
    width: 100%;
    height: 2px;
    cursor: pointer;
    margin-top: 0;
    color: tomato;
    border: none;
}

#masterPlay {
    background-color: rgb(231, 44, 48);
    border-radius: 50%;
    color: white;
    font-size: 40px;
}

.songInfo img{
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

.repeate img{
    margin-top: 6px;
    width: 50px;
    margin-left: 30px;
}

.songImg img{
    width: 50px;
    margin-top: 10px;
    margin-left: 40px;
}

.songVol img{
    width: 40px;
    margin-top: 10px;
    margin-left: 50px;
}

.nextsongInfo{
    margin-left: 15px;
    padding-bottom: 40px;
}
.nextsongInfo p{
    font-size: 12px;
}
.nextsongInfo span{
    font-size: 15px;
}


@media screen and (max-width:1000px){
    .bottom{
        display: none;
    }
}