@import url(https://fonts.googleapis.com/css2?family=Alexandria:wght@197&family=Cairo:wght@200..1000&family=Changa:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Readex+Pro:wght@700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Alexandria:wght@197&family=Cairo:wght@200..1000&family=Changa:wght@200..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Readex+Pro:wght@700&family=Tajawal:wght@200;300;400;500;700;800;900&display=swap);.loader,body::before{position:fixed;height:100vh}.sidebar_btn::after,body::before{content:"";top:0;background-size:cover;left:0}.music_menu ul li a p,body{font-family:Alexandria}.song_col:hover,.songs_tabs h2:after{background-color:var(--theme-color)}.sidebar_btn,.song_col:hover .song_det h2,.song_col:hover .song_det p,.song_col:hover .song_icon_time i,.song_col:hover .song_icon_time p{color:var(--white-color)}*{margin:0;padding:0;box-sizing:border-box;list-style:none;text-decoration:none;font-family:Poppins,sans-serif;scroll-behavior:smooth}.main-title,h1,h2,h3,h4{font-family:Tajawal,sans-serif;font-weight:800}body::before{width:200vw;background-image:url('kjh.webp');background-repeat:repeat-x;background-attachment:fixed;filter:blur(2px);z-index:-2;animation:40s linear infinite alternate moveBackground}@keyframes moveBackground{0%{transform:translateX(0)}100%{transform:translateX(-50vw)}}:root{--theme-color:#b100a2;--gray-color:#cdcdcd;--grey-light-text:#cdcdcd;--text-color:#cdcdcd;--light-color:#3333;--white-color:#cdcdcd;--black-color:#000;--dark-gradient:linear-gradient(145deg, #3333 0%, #3333 100%);--transition:.3s;--transition2:.6s}.music_menu ul li a p,.music_menu ul li a span,.sidebar_btn i,.song_col,.songs_tabs h2:after{transition:var(--transition)}.loader{top:50%;left:50%;transform:translate(-50%,-50%);width:100%;display:flex;justify-content:center;align-items:center;background-color:#190017;z-index:999;animation:4s linear forwards loader}.search_box,.song_col{background-color:#3333}.loader img{scale:0.3}header{width:100%;display:flex;position:relative}.sidebar_hide{width:5%;display:flex;flex-direction:column;align-items:center}.toggle_sidebar_btn{transform:rotate(180deg)}.hide_element,.small_logo,.small_screen_logo,.songs_container:hover::after,.songs_wrapper2,.songs_wrapper3{display:none}.show_element{display:block}.sidebar_btn{position:absolute;top:50%;left:-20px;z-index:1;display:flex;justify-content:center;align-items:center;transform:translateY(-50%) rotate(180deg);padding:4px;width:20px;height:90px;border-radius:4px 0 0 4px;cursor:pointer}.sidebar_btn i{font-size:20px;color:var#3333}.sidebar_btn::after{position:absolute;width:100%;height:100%;background-image:url(sidebar_bg2.svg);background-position:center;background-repeat:no-repeat;z-index:-1}.music_menu{margin-top:15px;display:flex;flex-direction:column}.menu_gap{margin:6px 0!important}.music_menu h2{font-size:1.3rem;text-transform:uppercase;color:var(--gray-color);font-weight:500}.music_menu ul{display:flex;flex-direction:column;margin:10px 0;width:100%;gap:17px}.music_menu ul li a span,.song_optionbox span{display:inline-block;background-image:url(icon.svg);background-repeat:no-repeat}.music_menu ul li a{color:var(--grey-light-text);font-size:.8rem;font-weight:1000;display:flex;align-items:center;gap:10px}.music_menu ul li .active_link,.music_menu ul li a:hover p,.song_optionbox:hover h3{color:var(--theme-color)}.search_box i,.search_box input,.songs_tabs h2{color:var(--grey-light-text)}.music_menu ul li a span{width:25px;height:20px;background-position:0 -37px}.hero_container{width:87%;padding:1% 3%;display:flex;flex-direction:column;background-repeat:no-repeat;background-position:center right;background-size:58.5%}.hero_top{width:100%;display:flex;justify-content:space-between;align-items:center}.hero_top_col{width:70%;display:flex;align-items:center;gap:15px;justify-content:flex-end;margin-left:auto}.search_box{position:relative;flex-direction:row-reverse;width:70%;height:50px;border-radius:50px;display:flex;align-items:center;padding:0 20px;gap:10px;left:-30px}.song_optionbox .download_option_icon{background-position:-258px 2px}.song_optionbox:hover .download_option_icon{background-position:-258px -35px}.song_optionbox .share_option_icon{background-position:-660px 3px}.song_optionbox:hover .share_option_icon{background-position:-660px -35px}.search_box input{flex:1;background-color:transparent;border:none;outline:0;font-size:13px;font-weight:500;text-align:right}.search_box input::placeholder{color:var(--grey-light-text);font-family:Alexandria}.search_box i{font-size:1.3rem;cursor:pointer}.songs_container{width:41%;display:flex;flex-direction:column;margin-top:20px;position:absolute;top:50px;right:270px;direction:rtl}.song_info,.songs_tabs{align-items:center;display:flex}.songs_container::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:500px;background-image:-webkit-linear-gradient(90deg ,#00000056 0 ,#00000000 100%)}.songs_tabs h2:after,.songs_tabs::after{position:absolute;top:100%;height:2px;content:''}.songs_tabs{gap:50px;padding-bottom:0;position:relative}.songs_tabs::after{left:0;width:100%;background-image:linear-gradient(90deg ,#3333 40% ,#3333 100%)}.songs_tabs h2{font-size:1rem;font-weight:500;padding-bottom:15px;z-index:1;cursor:pointer;position:relative}.active_song_list:after{width:100%!important}.songs_tabs h2:after{left:50%;transform:translate(-50% ,-50%);width:0}.songs_tabs h2.active_tab_list::after{width:100%}.songs_wrapper{width:100%;height:600px;overflow:scroll;display:flex;flex-direction:column;gap:20px;margin-top:20px;padding-right:20px}.song_box img,.song_cover{height:50px;object-fit:cover}.show_songs{animation:show_songs var(--transition) linear}.songs_wrapper::-webkit-scrollbar{width:5px}.songs_wrapper::-webkit-scrollbar-thumb{background-color:var(--theme-color);border-radius:10px}.song_col{width:98%;display:flex;justify-content:space-between;align-items:center;padding:7px 15px;cursor:pointer;border-radius:10px}.song_info{gap:20px;position:relative}.song_info span{color:var(--text-color);font-size:1.2rem;font-weight:600}.song_det h2,.song_optionbox h3{font-weight:500;transition:var(--transition)}.play_img{position:absolute;top:20%;left:93.8%;transform:translate(-50% ,-50%) scale(.5);opacity:0;transition:var(--transition)}.song_col:hover .play_img{top:50%;transform:translate(-50% ,-50%) scale(1);opacity:1}.song_box{display:flex;align-items:center;gap:10px}.song_box img{width:60px;border-radius:10px}.song_det{display:flex;flex-direction:column}.song_det h2{font-size:1rem;color:var(--text-color)}.song_det p{font-size:13px;color:var(--gray-color);transition:var(--transition)}.song_icon_time{display:flex;align-items:center;gap:30px}.song_icon_time i{font-size:1.5rem;color:var(--text-color);cursor:pointer}.song_icon_time p{color:var(--text-color);font-size:13px}.song_option{position:relative}.song_option_dropdown{position:absolute;top:100%;opacity:0;transform:scale(0);left:-60px;width:180px;border-radius:10px;background-color:#3333337c;box-shadow:0 0 60px 0 rgba(0,0,0,.2);padding:10px 15px;display:flex;flex-direction:column;gap:7px;z-index:5;transition:var(--transition)}.song_option_dropdown::after{content:'';position:relative;top:-10px;right:15px;width:20px;background-color:#00000029;transform:rotate(45deg)}.song_optionbox{display:flex;align-items:center;gap:10px;cursor:pointer}.song_optionbox span{width:21px;height:25px;vertical-align:middle;background-position:-205px 3px;transition:var(--transition)}.song_optionbox h3{font-size:13px;color:var(--grey-light-text)}.show_song_option{opacity:1;top:150%;transform:scale(1)}.bottom_container{display:flex!important;align-items:center;justify-content:space-between;padding:10px 20px;gap:20px;background-color:#3333;position:fixed;bottom:0;left:0;width:100%;z-index:1;backdrop-filter:blur(50px)}.song_info_box{display:flex;align-items:center;gap:10px;background:#b100a2;padding:10px 15px;border-radius:10px}.song_cover{width:50px;border-radius:7px}.song_info_box h3,.song_info_box p{margin:0;color:#fff}
.logo,.music_menu .lo-1,.small_logo{position:relative}.play_button{font-size:16px;display:flex;justify-content:center;align-items:center}.current_time,.music_play_line p,.total_duration{color:#fff;font-size:13px}.seek_slider,.volume_slider{appearance:none;height:4px;background:#ccc;border-radius:2px}.seek_slider::-webkit-slider-thumb,.volume_slider::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#b100a2;border-radius:50%;cursor:pointer}.queue_btn{background:#b100a2;border:none;color:#fff;padding:8px 15px;border-radius:20px;font-size:14px;cursor:pointer}.song_col.playing_song{background-color:var(--theme-color)!important}.playing_song{background-color:#b100a2!important;box-shadow:0 0 10px #b100a2}.music_menu ul li a img{width:20px;transition:.3s;filter:brightness(0) invert(1)}.music_menu ul li a.active_link img,.music_menu ul li a:focus img,.music_menu ul li a:hover img{filter:invert(44%) sepia(88%) saturate(421%) hue-rotate(317deg) brightness(100%) contrast(97%);transform:scale(1.2)}.music_menu ul li a:active img{filter:invert(34%) sepia(78%) saturate(747%) hue-rotate(160deg) brightness(95%) contrast(90%);transform:scale(1.4)}aside{position:fixed;right:0;top:0;height:100vh;background-color:#3333;backdrop-filter:blur(6px);width:13%;padding:2%;box-shadow:0 42px 60px 0 #ffffff1d;transition:var(--transition)}.hero_container{margin-right:13%}.music_menu ul li a{display:flex;flex-direction:row-reverse;align-items:center;gap:10px;text-align:right}.music_menu ul li a p{margin:0}.bottom_container{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;gap:20px;background-color:#3333331e}.song_info_box{display:flex;align-items:center;gap:10px;background:#b100a2;padding:10px 15px;border-radius:10px}.song_cover{width:50px;height:50px;object-fit:cover;border-radius:7px}.song_info_box h3{font-size:14px;color:#fff;margin:0}.song_info_box p{font-size:12px;color:#e6e6e6;margin:0}.music_play_option{display:flex;align-items:center;gap:15px}.music_play_option button{cursor:pointer;background:0 0;border:none;color:#fff;font-size:18px}.play_button{background:#b100a2;width:35px;height:35px;border-radius:50%;color:#fff;border:none}.music_play_line{flex:1;display:flex;align-items:center;gap:10px}.seek_slider{flex:1}.music_volume{display:flex;align-items:center;gap:10px}.mute_button{cursor:pointer;background:0 0;border:none;color:#fff;font-size:16px}.volume_slider{width:100px}.music_menu .lo-1{text-align:right;font-size:2rem}.song_info_box h3,p{text-align:right}.logo{right:10%;top:3%}.small_logo{top:20px}
@keyframes loader {
    0%, 95% { opacity: 1; }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
@keyframes show_songs{
    0%{
        transform: translateX(100px);
        opacity: 0;
    }
    100%{
        transform: translateX(opx);
        opacity: 1;
    }
}
@keyframes clicked{
    0%{
        box-shadow: 0 0 0 rgb(255,255,255,0);
    }
    50%{
        box-shadow: 0 0 0 rgb(255,255,255,0.5);
    }
    100%{
        box-shadow: 0 0 0 rgb(255,255,255,0);
    }
}
@media (max-width:1400px){
   aside{
    width: 15%;
    .songs_container{
        width: 50%;
    }
    .hero_container{
        background-size: 70%;
    }
    .search_box{
        width: 80%;
        position: relative;
        left: -1000px;
    }
    .logo{
        position: relative;
        left: 10px; 
    }
   }   
}
@media (max-width:1200px) {
    .songs_container{
        width: 70%;
        left: 10%;
    }
    .hero_top_col{
        width: 80%;
        left: -80%;
    }
    .hero_container{
        background-size: contain;
    }
    .search_box{
        width: 100%;
        position: relative;
        left: -90px;
    }
    .music_menu .lo-1{
        position: relative;
        top: 10px;
        right:10%;
        text-align: right;
        font-size: 1.5rem; 
        margin-bottom: 5%;
    }
    .music_menu{
        display: flex;
        position: relative;
        top:3%;
    }
    .sidebar_btn{
        left: -41px; 
    }
    .small_logo{
        width: 100px;
        left: -14px;
        top: 1.5%;
    }
   .aside.logo{
    right: 20px;
   }
}
@media (max-width:900px) {
    .songs_container{
        width: 70%;
        left: 7%;
    }
    .shuffle_mode,
    .repeat mode{
        display: none;
    }
    aside{
        width: 20%;
    }
    .search_box{
        width: 100%;
        position: relative;
        left: -70px;
        top: 30px;
    }
    .music_menu{
        left: 2%;
    }
    .sidebar_hide{
        width: 7%;
    }
    .logo{
        top: 19px;
        left: -5%;
    }
    .songs_container::after{
        display: none;
    }
    .small_logo{
        top: 29px;
    }   
}
@media (max-width:768px) {
    .hero_top{
        gap: 10px;
        flex-direction: column;
    }
    .music_play_wrpper{
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .music_play_box{
        width: 60%;
    }
    .show_bottom_box{
        bottom: -85px !important;
    }
    .song_info_box{
        display: none;
    }
    .songs_container::after{
        display: none;
    }
}
@media (max-width:500px) {
    .music_menu h2,
    .music_menu ul li a p{
        display: none;
    }
    .sidebar_btn{
        display: none;
    }
    aside{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .show_aside{
        width: 15%;
    }
    .songs_tabs h2,
    .song_det h2{
        font-size: 10px;
    }
    .song_det p{
        font-size: 10px;
    }
    .song_info_box,
    .bottom_container{
        display: none;
    }
    .search_box{
        display: flex;
    }
    .music_volume{
        display: none;
    }
    .song_info span{
        font-size: 14px;
    }
    .song_icon_time p{
        font-size: 8px;
    }
    .songs_container::after{
        display: none;
    }
}
@media (max-width:768px){   
    .logo img:nth-child(1){
        position: relative;
        top: -2%;
        right:15%;
        width: 150%;
    }
    .songs_container::after{
        display: none;
    }
}
@media (max-width:613px) {
    .music_menu .lo-1{
        position: relative;
        text-align: right;
        font-size: 1.2rem; 
      }
      .songs_container::after{
        display: none;
    }
      
}
@media (max-width:393px){
    .music_menu h2,
    .music_menu ul li a p{
        display: none;
    }
    .sidebar_btn{
        display: none;
    }
    aside{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .show_aside{
        width: 15%;
    }
    .songs_tabs h2,
    .song_det h2{
        font-size: 10px;
    }
    .song_det p{
        font-size: 10px;
    }
    .song_info_box,
    .bottom_container{
        display: none;
    }
    .search_box{
        position: relative;
        right: 90%;
    }
    .music_volume{
        display: none;
    }
    .song_info span{
        font-size: 10px;
    }
    .song_icon_time p{
        display: none;
    }
    .music_play_line{
        position: relative;
        left: -70px;
        top: -20px;
    }
    .music_play_option{
        position: relative;
        width: 70%;
        right: -34%;
        top: 9px;
    }
    .bottom_container{
        height: 11%;
    }
    .music_menu{
        position: relative;
        top: -8%;
    }
    .search_box input{
        font-size: 0.7rem;
    }
    .songs_container::after{
        display: none;
    }
}
@media (max-width:413px) {
    .logo{
        position: relative;
        top: -10%;
        right: -20px;
    }
    .songs_container::after{
        display: none;
    } 
}
@media (max-width:439px){
     .logo{
        position: relative;
        top: 0.2%;
        margin-left: -40px;
        width: 129%;
    }
    .hero_top_col{
        display: block;
        left: -90px;
        justify-content: center;
    }
    .hero_container{
        display: flex;
        margin-left: 50px;
    }
}