section .asosiy .muhim .korish{
    transform-style: preserve-3d;
    position: relative;
    width: 740px;
    height: 440px;
    perspective: 20000px;
    transition: .8s;
}
 section .asosiy .muhim .korish .corusel{
    transform-style: preserve-3d;
    width: inherit;
    height: inherit;
    
}

.oldi{
    transform: translateZ(213px);
}
.ong{
    transform: rotateY(120deg) translateZ(213px);
}
.chap{
    transform: rotateY(240deg) translateZ(213px);
}
 section .asosiy .muhim .asos{
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    width: 740px;
    height: 440px;
    backface-visibility: hidden;
}
 section .asosiy .muhim .asos img{
    width: 740px;
    height: 440px;
    
}
section .asosiy .muhim .asos .aso{
    position: absolute;
    top: 0;
    padding: 25px;
}






.bton{
   display: flex;
   align-items: center;
   z-index: 99;
   position: absolute;
   top: 190px;
   left: 50px;
}
.bton .spn{
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #8527D8;
    background: #8527D8;
}
.bton .spn:hover .span{
    background: #8527D8;
}
.bton .spn:hover{
    background: #fff;
    cursor: pointer;
}
.bton .spn1{
    background: #8527D8;
    transform: rotateZ(180deg);
    margin: 0 5px 0 0;
}
.bton .span{
    width: 10px;
    height: 10px;
    background: #ddd;
    transform: rotateZ(-90deg);
    clip-path: polygon(8% 23%, 50% 68%, 91% 24%, 100% 32%, 50% 85%, 0 32%);
}
.bton .spn:active{
    background: #8527D8;
    border: 1px solid #fff;
}
.bton .spn:active .span{
    background: #fff;
}




section .asosiy .muhim .asos .aso a{
    color: #fff;
    padding: 10px 20px;
    border: 1px solid #8527D8;
    background: #8527D8;
    border-radius: 6px;
}
section .asosiy .muhim .asos .aso a:hover{
    color: #aaa;
    background: #fff0;
}
section .asosiy .muhim .asos .aso h2{
   color: #fff;
   margin: 255px 0 13px 0;
}
section .asosiy .muhim .asos .aso .boto{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #bbb;
}
section .asosiy .muhim .asos .aso .boto .lina{
   display: flex;
   align-items: center;
}
section .asosiy .muhim .asos .aso .boto .lina .du{
    width: 10px;
    height: 10px;
    border-radius: 50px;
    margin: 0 5px;
    background: #eee;
 }
 section .asosiy .muhim .asos .aso .boto .lina .du_a{
    border: 1px solid #fff;
    background: #8527d8;
    transform: scale(1.2);
 }

































section{
    width: 100%;
    overflow: hidden;
}
section .live{
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 25px 0;
}
section .live .left, section .live .center, section .live .right {
    margin: auto 10px;
}
section .live .left .int{
    width: 15px;
    height: 15px;
    background: crimson;
    border-radius: 50px;
    border: 9px solid rgb(255, 199, 199);
    margin: 0 10px;
}
section .live .left, section .live .center, section .live .right{
    height: 80px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 9px;
    background: #fff;
}
section .live .center img, section .live .right img{
    width: 60px;
    height: 60px;
    border-radius: 8px;
    margin: 0 10px 0 0;
}
section .live a{
   color: black;
   font-weight: 600;
}
section .live a:hover{
    color: #8527D8;
 }
section .asosiy{
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    justify-content: center;
}
section .asosiy .muhim{
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

 section .joy{
     display: flex;
     flex-wrap: wrap;
    justify-content: center;
 }












section .asosiy .muhim img{
    width: 700px;
    height: 430px;
    border-radius: 10px;
}
section .asosiy .muhim .muh{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0 0 0;
}
section .asosiy .muhim .muh .spn{
    border: 1px solid #8527D8;
    padding: 9px;
    border-radius: 50px;
    background: #8527D8;
}
.be4{
    color: green !important;
}
.kva4{
    background-color: green !important;
}
section .asosiy .muhim .muh .spn:hover{
    background: #fff;
}
section .asosiy .muhim .muh .spn:hover .span{
    background: #8527D8;
}
.spn{
    border: 1px solid #8527D8 !important;
}
.spn:hover{
    background: #fff !important;
}
.spn:hover .span{
    background: #8527D8 !important;
}
section .asosiy .muhim .muh .span{
    width: 10px;
    height: 10px;
    background: #fff;
    transform: rotateZ(-90deg);
    clip-path: polygon(8% 23%, 50% 68%, 91% 24%, 100% 32%, 50% 85%, 0 32%);
}
section .asosiy .muhim .linya{
    position: relative;
    margin: 18px 0 23px 0;
}
section .asosiy .muhim .lin1{
    width: 100%;
    height: 2px;
    background: #ddd;
}
section .asosiy .muhim .lin2{
    width: 100px;
    height: 4px;
    position: absolute;
    top: -1px;
    border-radius: 8px;
    background: #3858f6;
}

section .asosiy .songi{
    width: 400px;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    
}
section .asosiy .songi .left{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 9px 0 0 0;
}
section .asosiy .songi .left a{
    color: #000;
    font-weight: 600;
}
section .asosiy .songi a:hover, section .asosiy .songi a:hover h5{
    color: #8527d8;
}
section .asosiy .songi .linya{
    position: relative;
    margin: 23px 0;
}
section .asosiy .songi .lin1{
    width: 100%;
    height: 2px;
    background: #ddd;
}
section .asosiy .songi .lin2{
    width: 200px;
    height: 4px;
    position: absolute;
    top: -1px;
    border-radius: 8px;
    background: #3858f6;
}

section .joy .wrap, section .bolim .wrt1 .wrap, section .bolim .wrap11{
    height: 430px;
    overflow-y: scroll;
}


section .asosiy .songi .wrap{
    height: 430px;
    overflow-y: scroll;
}
section .asosiy .songi .wrap .row{
    display: flex;
    align-items: center;
    margin: 0 0 13px 0;
}
section .asosiy .songi .wrap .row a{
    color: #333;
    font-size: 18px;
    margin: 0 0 12px 0;
}
section .asosiy .songi .wrap .row .time{
    color: #bbb;
    font-size: 14px;
    margin: 9px 0 0 0;
}
section .asosiy .songi .wrap .row img{
    border-radius: 8px;
    margin: 0 12px 0 0;
}



















section .joy{
    margin: 25px 0 0 0;
}
section .joy .wrapper{
    width: 320px;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    margin: 0 25px 0 0;
}


section .joy .wrapper .muh{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section .joy .wrapper .muh a{
    color: #000;
}
section .joy .wrapper .muh .spn{
    padding: 10px;
    border-radius: 50px;
    background: #8527D8;
}
section .joy .wrapper .muh .span{
    width: 10px;
    height: 10px;
    background: #fff;
    transform: rotateZ(-90deg);
    clip-path: polygon(8% 23%, 50% 68%, 91% 24%, 100% 32%, 50% 85%, 0 32%);
}


section .joy .wrapper .left{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section .joy .wrapper .left a{
    color: #000;
    font-weight: 600;
}

section  .joy .wrapper .linya{
    position: relative;
    margin: 23px 0;
}
section .joy .wrapper .lin1{
    width: 100%;
    height: 2px;
    background: #4444;
}
section .joy .wrapper .lin2{
    width: 200px;
    height: 4px;
    position: absolute;
    top: -1px;
    border-radius: 8px;
    background: #0165d8;
}





section .joy .wrapper .wrap .row{
    display: flex;
    align-items: center;
    margin: 0 0 13px 0;
}
section .joy .wrapper .wrap .row a{
    color: #333;
    font-size: 18px;
    margin: 0 0 12px 0;
}
section .joy .wrapper .wrap .row .time{
    color: #bbb;
    font-size: 14px;
    margin: 9px 0 0 0;
}
section .joy .wrapper .wrap .row img{
    border-radius: 8px;
    margin: 0 12px 0 0;
}
section .joy .wrapper .view{
    text-align: center;
    margin: 50px 0 10px 0;
}
section .joy .wrapper .lini1{
    width: 100%;
    height: 1px;
    background: #4444;
    margin: 0 0 -9px 0;
}
section .joy .wrapper .view a{
    color: #bbb;
    padding: 10px 35px;
    border-radius: 60px;
    background: #fff;
    border: 1px solid #bbb;
    text-align: center;
    font-size: 14px;
}
section .joy .wrapper .view a:hover{
    color: #eee;
    background: #8527D8;
    border: 1px solid #8527D8;
}



section .reklama{
    margin: 30px 0;
}
section .reklama img{
    width: 100%;
    min-height: 80px;
    border-radius: 10px;
}



section .media{
    width: 100%;
    background: #161B2A;
    padding: 85px 0 85px 0;
}
section .media .top1{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 45px 0;
}
section .media .top1 h2{
    color: #ddd;
}
section .media .top1 a{
    color: #ddd;
    padding: 15px 55px;
    border-radius: 10px;
    background: #8527D8;
    border: 1px solid #8527D8;
}
section .media .top1 a:hover{
    color: #ddd;
    background: #161B2A;
    border: 1px solid #8527D8;
}
section .media .video{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
section .media .video p{
    font-size: 25px;
    color: #ddd;
}

section .media .video .left a{
    color: #ad0404;
}
section .media .video .left{
    width: 600px;
    flex-direction: column;
}
section .media .video .left video{
    margin: 0 0 25px 0;
    width: 600px;
}
section .media .video .left p{
    margin: 25px 0 20px 0;
}

section .media .video .right{
    width: 600px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
section .media .video .right .wrap{
    width: 600px;
    display: flex;
    justify-content: center;
}
section .media .video .right .row1, section .media .video .right .row2, section .media .video .right .row3, section .media .video .right .row4{
    width: 270px;
    margin: 0 0 0 30px;
    justify-content: center;
}
section .media .video .right .row1 video, section .media .video .right .row2 video, section .media .video .right .row3 video, section .media .video .right .row4 video{
    width: 270px;
    margin: 0 0 25px 0;
}
section .media .video .right .row1 a{
    color: #8527D8;
}
section .media .video .right .row2 a{
    color: #4d27d8;
}
section .media .video .right .row3 a{
    color: #00b309;
}
section .media .video .right .row4 a{
    color: #beb20e;
}
section .media .video .right p{
    margin: 25px 0 30px 0;
}






section .bolim{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 25px 0 0 0;
}
section .bolim .wrapper{
    width: 400px;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
}
section .bolim .wr1{
    width: 600px;
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    margin: 0 25px 0 0;
}
section .bolim .wr1 .wrap{
    display: flex;
    margin: 0 0 20px 0;
}











section .bolim .wr1 .wrap .right{
    margin: 0 0 0 20px;
}
section .bolim .wr1 .wrap .right .time{
    color: #aaa;
    margin: 20px 0 0 0;
}
section .bolim .wr1 .wrap .right h4{
    margin: 16px 0 15px 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}
section .bolim .wr1 .wrap .right p{
    font-size: 14px;
    color: #aaa;
}
section .bolim .wr1 .wrap .right a{
    color: #fff;
    padding: 7px 25px;
    border-radius: 20px;
}
section .bolim .wr1 .wrap .right a:hover{
    color: #8527d8;
    background: #eee;
    border: 1px solid #8527d8;
}
section .bolim .wr1 .wrap .right a{
    background: rgb(226, 188, 20);
}

section .bolim .wr1 .wrap .right{
    margin-top: 30px;
}
section .bolim .wr1 .wrap .right2 a{
    background: rgb(255, 14, 14);
}
section .bolim .wr1 .wrap .right3 a{
    background: rgb(20, 68, 226);
}
section .bolim .wr1 .wrap img{
    margin: -7px 0 0 0;
    border-radius: 10px;
}





























section .bolim .wrapper .muh{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section .bolim .wrapper .muh a{
    color: #000;
}
section .bolim .wrapper .muh .spn{
    padding: 10px;
    border-radius: 50px;
    background: #8527D8;
}
section .bolim .wrapper .muh .span{
    width: 10px;
    height: 10px;
    background: #fff;
    transform: rotateZ(-90deg);
    clip-path: polygon(8% 23%, 50% 68%, 91% 24%, 100% 32%, 50% 85%, 0 32%);
}


section .bolim .wrapper .left{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section .bolim .wrapper .left a{
    color: #000;
    font-weight: 600;
}

section  .bolim .wrapper .linya{
    position: relative;
    margin: 23px 0;
}
section .bolim .wrapper .lin1{
    width: 100%;
    height: 2px;
    background: #4444;
}
section .bolim .wrapper .lin2{
    width: 200px;
    height: 4px;
    position: absolute;
    top: -1px;
    border-radius: 8px;
    background: #0165d8;
}
section .bolim .wrapper .wrap .row{
    display: flex;
    align-items: center;
    margin: 0 0 13px 0;
}
section .bolim .wrapper .wrap .row a{
    color: #333;
    font-size: 18px;
    margin: 0 0 12px 0;
}
section .bolim .wrapper .wrap .row .time{
    color: #bbb;
    font-size: 14px;
    margin: 9px 0 0 0;
}
section .bolim .wrapper .wrap .row img{
    border-radius: 8px;
    margin: 0 12px 0 0;
}
section .bolim .wrapper .view{
    text-align: center;
    margin: 50px 0 10px 0;
}
section .bolim .wrapper .lini1{
    width: 100%;
    height: 1px;
    background: #4444;
    margin: 0 0 -9px 0;
}
section .bolim .wrapper .view a{
    color: #bbb;
    padding: 10px 35px;
    border-radius: 60px;
    background: #fff;
    border: 1px solid #bbb;
    text-align: center;
    font-size: 14px;
}
section .bolim .wrapper .view a:hover{
    color: #eee;
    background: #8527D8;
    border: 1px solid #8527D8;
}










section .dolzarb{
    padding: 20px;
    background: #fff;
    border-radius: 20px;
    margin: 25px 0 0;
}

section .dolzarb .muh{
    display: flex;
    align-items: center;
    justify-content: space-between;

    
}
section .dolzarb .muh a{
    color: #000;
}
section .dolzarb .muh .spn{
    padding: 10px;
    border-radius: 50px;
    background: #8527D8;
}

section .dolzarb .muh .span{
    width: 10px;
    height: 10px;
    background: #fff;
    transform: rotateZ(-90deg);
    clip-path: polygon(8% 23%, 50% 68%, 91% 24%, 100% 32%, 50% 85%, 0 32%);
}
section  .dolzarb .linya{
    position: relative;
    margin: 23px 0;
}
section .dolzarb .lin1{
    width: 100%;
    height: 2px;
    background: #4444;
}
section .dolzarb .lin2{
    width: 200px;
    height: 4px;
    position: absolute;
    top: -1px;
    border-radius: 8px;
    background: #0165d8;
}
section  .dolzarb .gallery{
    display: flex;
    flex-wrap: wrap;
   justify-content: center;
}
section  .dolzarb .gallery img{
    margin: 0 0 25px 0;
}
section  .dolzarb .gallery .time{
    color: #aaa;
    margin: 30px 0;
}
section  .dolzarb .gallery .left img{
    border-radius: 15px;
}
section  .dolzarb .gallery .left{
    width: 550px;
}

section  .dolzarb .gallery .right{
    width: 600px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
}
section  .dolzarb .gallery .right .wrap{
    width: 550px;
    display: flex;
    justify-content: center;
}
section  .dolzarb .gallery .right .row{
    width: 220px;
    margin: 0 0 0 24px;
    width: 294px;
}
section  .dolzarb .gallery h4{
    margin: 21px 0 20px 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}
section  .dolzarb .gallery p{
    font-size: 14px;
    color: #aaa;
}
section  .dolzarb .gallery a{
    color: #fff;
    padding: 8px 25px;
    border-radius: 20px;
}
section  .dolzarb .gallery a:hover{
    color: #8527d8;
    background: #eee !important;
}
section  .dolzarb .gallery .right .row1 a{
    background: rgb(226, 119, 20);
    border: 1px solid rgb(226, 119, 20);
}
section  .dolzarb .gallery .right .row2 a{
    background: rgb(153, 8, 211);
    border: 1px solid rgb(153, 8, 211);
}
section  .dolzarb .gallery .right .row3 a{
    background: rgb(230, 208, 19);
    border: 1px solid rgb(230, 208, 19);
}
section  .dolzarb .gallery .right .row4 a{
    background: rgb(61, 255, 135);
    border: 1px solid rgb(61, 255, 135);
}
section  .dolzarb .gallery .left a{
    background: rgb(61, 194, 255);
    border: 1px solid rgb(61, 194, 255);
}
section  .dolzarb .gallery .right .row img{
    width: 294px;
    border-radius: 15px;
}






@media (max-width: 500px){
    section .live{
        display: none;
    }
    section .bolim .wr1 .wrap img {
        margin: 7px 0 18px 0;
    }
}
@media (max-width: 400px){
    section .media .top1 a {
        margin: 20px 0 0 0;
    }
    section .asosiy .muhim .aso{
        padding-top: 15px !important;
    }
}







@media (max-width: 800px) and (min-width: 700px){
    section .asosiy .muhim .asos img, section .asosiy .muhim .asos, section .asosiy .muhim .korish{
        width: 650px;
    }
    
    .oldi{
        transform: translateZ(188px) !important;
    }
    .ong{
        transform: rotateY(120deg) translateZ(188px) !important;
    }
    .chap{
        transform: rotateY(240deg) translateZ(188px) !important;
    }
}
@media (max-width: 750px){
    section .asosiy .muhim .asos img, section .asosiy .muhim .asos, section .asosiy .muhim .korish{
        width: 550px;
    }

section .live .right {
    display: none;
}
.oldi{
    transform: translateZ(160px) !important;
}
.ong{
    transform: rotateY(120deg) translateZ(160px) !important;
}
.chap{
    transform: rotateY(240deg) translateZ(160px) !important;
}

}


@media (max-width: 1219px){
    section .media .video .left a{
        margin: 0 40px;
    }
    section .media .video .left p{
        margin: 25px 40px 20px 40px;
    }
}

@media (max-width: 1100px){
    

section .asosiy{
    flex-wrap: wrap;
}
}
@media (max-width: 700px) and (min-width: 600px){
    section .asosiy .muhim .asos img, section .asosiy .muhim .asos{
        width: 550px;
    }

}
@media (max-width: 600px){
    section .asosiy .muhim .asos img, section .asosiy .muhim .korish, section .asosiy .muhim .asos, section .asosiy .muhim{
        width: 100% !important;
    }
    
}
@media (max-width: 600px) and (min-width: 500px){
    section .asosiy .muhim .asos img, section .asosiy .muhim .asos, section .media .video .left video, section .dolzarb .gallery .left img, section .asosiy .muhim .korish{
        width: 450px;
    }
    
    section .media .video .left video{
        margin: 0 0 0 45px;
    }
    section .media .video .right .wrap, section .dolzarb .gallery .right .wrap{
        flex-direction: column;
        margin: 0 0 0 130px;
    }

    section .asosiy .muhim .asos img, section .asosiy .muhim .asos, section .asosiy .muhim .korish{
        height: 300px;
    }
    section .asosiy .muhim .asos .aso .left{
        margin: 0 0 50px 0;
    }
    .bton{
        position: absolute;
        top: 180px;
        left: 50px;
     }
     section .asosiy .muhim .asos .aso h2{
        margin: 115px 0 13px 0;
     }
    
}
@media (max-width: 500px) and (min-width: 400px){
    section .asosiy .muhim .asos img, section .asosiy .muhim .asos, section .media .video .left video, section .dolzarb .gallery .left img, section .asosiy .muhim .korish{
        width: 350px;
    }
    section .media .video .right .wrap, section .dolzarb .gallery .right .wrap{
        flex-direction: column;
        margin: 0 0 0 130px;
    }

    section .media .video .left video{
        margin: 0 0 0 35px;
    }

    section .bolim .wr1 .wrap{
        flex-direction: column;
        margin: 0 0 0 70px;
    }
    section .asosiy .muhim .asos .aso {
        padding: 15px;
    }





    section .asosiy .muhim .asos img, section .asosiy .muhim .asos, section .asosiy .muhim .korish{
        height: 200px;
    }
    section .asosiy .muhim .asos .aso .left{
        margin: 0 0 20px 0;
    }
    

    section .asosiy .muhim .asos .aso h2{
        font-size: 15px;
        margin: 65px 0 16px 0;
    }
    .bton{
        position: absolute;
        top: 140px;
        left: 35px;
     }
     section .asosiy .muhim .asos .aso a{
        padding: 6px 15px;
    }
}
@media (max-width: 400px) and (min-width: 300px){
    section .asosiy .muhim .asos img, section .asosiy .muhim .asos, section .media .video .left video, section .dolzarb .gallery .left img, section .asosiy .muhim .korish{
        width: 250px;
    }
    section .media .video .right .wrap, section .dolzarb .gallery .right .wrap{
        flex-direction: column;
        margin: 0 0 0 130px;
    }
    section .media .video .left video{
        margin: 0 0 0 35px;
    }
    section .bolim .wr1 .wrap{
        flex-direction: column;
        margin: 0 0 0 30px;
    }

    section .media .top1{
        flex-direction: column;
    }




    section .asosiy .muhim .asos img, section .asosiy .muhim .asos, section .asosiy .muhim .korish{
        height: 200px;
    }
    section .asosiy .muhim .asos .aso .left{
        margin: 0 0 20px 0;
    }
    
    section .asosiy .muhim .asos .aso{
        padding: 6px
    }
    

    section .asosiy .muhim .asos .aso h2{
        font-size: 15px;
        margin: 65px 0 16px 0;
    }
    .bton{
        position: absolute;
        top: 140px;
        left: 35px;
     }
     section .asosiy .muhim .asos .aso a{
        padding: 6px 15px;
    }
}
@media (max-width: 300px){
    section .asosiy .muhim .asos img, section .asosiy .muhim .asos, section .media .video .left video, section .dolzarb .gallery .left img, section .asosiy .muhim .korish{
        width: 200px;
    }
    section .media .video .right .wrap, section .dolzarb .gallery .right .wrap{
        flex-direction: column;
        margin: 0 0 0 130px;
    }

    section .media .video .left video{
        margin: 0 0 0 35px;
    }
    section .bolim .wr1 .wrap{
        flex-direction: column;
        margin: 0 0 0 30px;
    }
    section .media .top1{
        flex-direction: column;
    }

    section .asosiy .muhim .asos img, section .asosiy .muhim .asos, section .asosiy .muhim .korish{
        height: 200px;
    }
    section .asosiy .muhim .asos .aso .left{
        margin: 0 0 20px 0;
    }
    
    section .asosiy .muhim .asos .aso{
        padding: 6px
    }
    section .asosiy .muhim .asos .aso h2{
        font-size: 15px;
        margin: 5px 0 16px 0;
    }
    section .asosiy .muhim .asos .aso .boto{
        font-size: 10px;
    }

    
    section .asosiy .muhim .asos .aso h2{
        font-size: 15px;
        margin: 65px 0 16px 0;
    }
    .bton{
        position: absolute;
        top: 140px;
        left: 35px;
     }
     section .asosiy .muhim .asos .aso a{
        padding: 6px 15px;
    }
}