body{padding:0;margin:0;overflow-x:hidden}*{font-family:Nunito Sans,sans-serif;box-sizing:border-box}.desktop{max-width:1400px;margin:0 auto}.left-side,.right-side{padding:15px 40px}.main-cont{display:flex;justify-content:space-between}@media(min-width:1200px)and (max-width:1300px){.right-side{width:400px}}@media(min-width:768px)and (max-width:1199px){.main-cont{flex-direction:column}.left-side,.right-side{width:100%}}.header{width:100%;height:132px;display:flex;flex-direction:column;justify-content:space-between;background-color:#f5f9fa;padding:15px 40px}.header .upper{display:flex;gap:10px}.header .upper i{display:flex;align-items:center}.header h1{font-weight:900;font-size:35px;margin:0;padding:0}span{font-weight:500}.hero{margin-bottom:80px}iframe{width:750px;height:500px;margin-bottom:30px}.icons{list-style-type:none;display:flex;gap:15px;margin:0;padding:0}.icons li{width:40px;height:40px;border-radius:50%;background-color:#fff;color:#6c757d;border:solid 1px #E1E3E1;display:flex;align-items:center;justify-content:center}@media(min-width:768px)and (max-width:1023px){.hero{width:100%}video{width:100%}}@media(max-width:767px){.hero{width:100%;padding:10px 0;margin-bottom:20px}iframe{width:100%;height:300px;position:sticky;top:10px;z-index:2000;background:#000}}.leader-board{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;padding:20px;align-items:center;height:100vh;background-color:#fff;z-index:10000;color:#212170}.close{position:absolute;top:10px;right:10px;font-size:30px}.leader-board .text{display:flex;flex-direction:column;padding:10px;width:100%;align-items:center;justify-content:center}.leader-board .text h3{font-size:20px;font-weight:700;margin:0}.leader-board .text span{font-size:18px;font-weight:500;margin-bottom:15px}.leader-board .message{display:flex;align-items:center;gap:20px;width:60%;justify-content:center;background-color:azure;margin-bottom:50px;border-radius:5px;padding:10px}.leader-board .message span{font-size:50px}.message p{margin:0;padding:0;text-align:end;font-size:18px;font-weight:600;line-height:1.6}.leader-board .board-list{width:100%;display:flex;flex-direction:column;gap:10px;padding:30px;background-color:azure;border-radius:20px;overflow-y:scroll}.board-list .element{width:100%;height:100px;background-color:#fff;border-radius:5px;box-shadow:0 0 30.5px 15px #0000000a}@media(max-width:767px){.message{width:100%!important;gap:10px!important;padding:20px 30px!important}}.material{margin-bottom:80px}.details{width:750px;height:267px;border-radius:3px;background-color:#fff;box-shadow:0 0 30.5px 15px #0000000a;display:flex;align-items:center;justify-content:space-between;padding:30px}.left,.right{width:300px;height:auto}.block{width:100%;display:flex;justify-content:space-between;align-items:center}.block:last-of-type{padding:15px 0 0}.block:not(:last-of-type){border-bottom:solid 1px #E1E3E1;padding:15px 0}.block .key{display:flex;align-items:center;gap:10px;color:#212529}.key i{font-size:20px;color:#212529}.block .value{font-weight:600;color:#212529}h2{margin:0 0 20px;padding:0;font-size:30px}@media(min-width:768px)and (max-width:1023px){.details{width:100%}}@media(max-width:767px){.material{padding:10px 0}.details,.left{width:100%}.right{display:none}}.main{width:752px}.comments-list{display:flex;flex-direction:column;width:752px;margin-bottom:50px}.comment{width:100%;display:flex;align-items:center;gap:30px;padding:20px 0;color:#6c757d}.comment:not(:last-of-type){border-bottom:solid 1px #E1E3E1}.comment .img{width:75px;height:100%}.img img{width:75px;height:75px;border-radius:50%;object-fit:contain}.comment .text{display:flex;flex-direction:column}.text p{margin:0;padding:0}.name{margin-bottom:10px;font-size:17px;font-weight:700}.date{font-size:15px;font-weight:500;margin-bottom:20px}.text-box{width:100%;height:310px;display:flex;flex-direction:column;gap:20px}.text-box textarea{width:100%;height:165px;border:none;box-shadow:0 0 30.5px 15px #0000000a;padding:20px;color:#6c757d}.text-box textarea:focus{border:none;outline:none}.comment-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:200px;height:55px;border:none;border-radius:5px;background-color:#41b69d;font-size:15px;font-weight:600;color:#fff;cursor:pointer}.comment-btn:hover{background-color:#6c757d}@media(min-width:768px)and (max-width:1023px){.main,.comments-list{width:100%}}@media(max-width:767px){.main{width:100%;padding:10px 0;display:flex;flex-direction:column}.comments-list{width:100%}}.courseTopics{display:flex;flex-direction:column;justify-content:space-between;gap:50px}.progress{width:100%;height:76px;display:flex;align-items:center}.progress .all,.progress .completed{height:8px;border-radius:5px}.progress .all{width:405px;background-color:#6c757d;position:relative}.progress .completed{width:63%;position:absolute;top:0;left:0;background-color:green;z-index:1000;color:#485293}.you span{position:absolute;width:40px;height:40px;border:solid 2px #6c757d;display:flex;justify-content:center;align-items:center;border-radius:50%;bottom:20px;left:calc(100% - 20px)}.percent{position:absolute;top:20px;left:calc(100% - 20px);font-size:14px;font-weight:700}@media(max-width:767px){.courseTopics{padding:10px 0;gap:20px}.progress,.progress .all{width:100%}.you span,.percent{display:none}}.topics-card{width:100%;display:flex;flex-direction:column;border:solid 1px #E1E3E1;padding:30px 20px}.topics-card .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.info h3,.info p{padding:0;margin:0}.topics-card .info{display:flex;flex-direction:column;gap:20px}.topics-card .lesson:first-of-type{border-top:solid 1px #E1E3E1}.topics-card .lesson{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-bottom:solid 1px #E1E3E1;gap:20px}.lesson .title{display:flex;gap:10px}.lesson .cards{display:flex;align-items:center;flex-wrap:wrap;gap:10px;justify-content:flex-end}.lesson .cards .questions,.lesson .cards .min{display:flex;align-items:center;justify-content:center;padding:3px 7px;font-weight:600;border-radius:3px}.lesson .cards .questions{background-color:#41b69d2a;color:#40c1ce}.lesson .cards .min{background-color:#e558903d;color:#e55891}.lessons.hidden{display:none}.main-mob{padding:10px 20px}