body{ font-size: 15px; overflow-x: hidden; font-family: 'Lina-Round'; direction: rtl; color: var(--font-colour); background: var(--bg);} a, a:link, a:visited, a:hover, a:active, button, button:hover, i, i:hover, h6, h6:hover, :hover, img{ text-decoration:none; outline:none; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } img{ max-width:100%;} input, textarea, button, input:focus, textarea:focus, button:focus, select:focus{outline: none;} a, a:hover, a:focus{color:inherit;} p:last-child{margin-bottom: 0px;} html { scroll-behavior: smooth;} .logo img{max-width: 160px;} header{padding-top: 30px;} .header-section{display: flex; align-items: center; justify-content: space-between;} .point-rectangle{height: 40px; border-radius: 30px; min-width: 121px; background: var(--shape-secondary); position: relative; font-weight: var(--font-600); color: var(--secondary); display: flex; align-items: center; justify-content: center; padding-right: 20px;} .point-rectangle img{height: 40px; position: absolute; right: -10px; top: 0px;} .point-rectangle p{font-size: var(--font-size-20);} .top-left-section{display: flex; align-items: center; gap: 24px;} .logout-btn button{ border: var(--border-primary); height: 40px; border-radius: 30px; background: none; font-size: var(--font-size-20); min-width: 135px; color: var(--primary); } .logout-btn button:hover{background: var(--primary); color: var(--white);} .logout-btn button:hover img{filter: invert(1) brightness(100);} .menu-icon, .close-icon { display: none; transition: all 0.3s ease-in-out;} .active-icon { display: block;} .pushwrap.active { overflow: hidden;} .welcome-text{padding-top: 30px;} .welcome-text h1{font-size: var(--font-size-48); font-weight: var(--font-900); display: flex; align-items: center;} .welcome-text h1 span{color: var(--primary);} .welcome-text h1 label{margin-right: 10px; background: var(--primary-opacity-11); height: 40px; border-radius: 30px; font-size: var(--font-size-20); display: flex; align-items: center; justify-content: center; color: var(--primary); padding: 7px 15px; font-weight: var(--font-600); cursor: pointer;} .story-section { position: relative; text-align: center;} .stories li { list-style: none; cursor: pointer; width: 140px; display: inline-block;} .stories-img { width: 80px; height: 80px; overflow: hidden; border: 2px solid var(--story-border); padding: 2px; border-radius: 50%; display: inline-block;} .stories-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%;} .stories-img label{position: absolute; background: var(--bg-dark); color: var(--font-colour-white); border-radius: 30px; padding: 4px 10px; left: 24px; top: 0px;} .stories li h6 { text-wrap: nowrap; text-overflow: ellipsis; width: 100%; overflow: hidden; font-size: var(--font-size-16); margin: 0px;} .unseen { border-color: var(--primary);} .story-view { position: fixed; left: 0; top: 0; bottom: 0; right: 0; background: var(--bg-black-90); z-index: 444444; height: 100vh; display: none;} .story-flow { overflow: hidden;} .story-content { width: 100%; max-width: 400px; position: absolute; left: 50%;transform: translate(-50%, 10%); height: 100%; max-height: 500px;} .story-dp { color: var(--white); margin-bottom: 30px; position: relative; padding-right: 70px;} .story-dp p { margin: 0px; margin-top: 15px;} .story-dp h6{font-size: var(--font-size-20);} .story-close-icon { position: absolute; left: 10px; top: 10px;} .story-close-icon i { width: 50px; height: 50px; line-height: 50px; text-align: center; background: #0F1217; border-radius: 50%; color: var(--white); cursor: pointer; font-size: 18px;} .story-carousel .disabled { display: none;} .story-carousel video, .story-carousel img { width: 100%; height: 100%; object-fit: cover;} .story-carousel .owl-dots { display: flex;} .story-carousel .owl-dots .owl-dot { -ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1; background: var(--bg-primary); flex-grow: 1; min-width: 0; max-width: 100%; border-radius: 0; width: inherit; height: 4px; border-radius: 4px;} .story-carousel .owl-dots .owl-dot.active { background-image: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(88, 89, 104,1) 50.001%, rgba(88, 89, 104,1) 100%); background-repeat: no-repeat; background-size: 200%; background-color: var(--third); background-position: 100% 50%; animation-timing-function: linear; animation-delay: .2s; animation-duration: 5s; animation-name: Loader;} .story-carousel .owl-dots.disabled { display: flex; opacity: 1; cursor: pointer!important;} .story-dp img { width: 60px; height: 60px; object-fit: cover; border: 2px solid var(--white); border-radius: 50%; padding: 2px; position: absolute; right: 0px;} .story-carousel .owl-stage-outer{width: 100%; max-width: 400px; height: 100%; max-height: 90vh; overflow: hidden; background:#0F1217 ;} .cart-icon sup{width: 14px; height: 14px; background: var(--third); display: inline-block; text-align: center; line-height: 14px; border-radius: 50%; top: -10px; left: 8px;} .stories .owl-stage{padding: 0px !important;} .pt-50{padding-top: 50px;} .pt-30{padding-top: 30px;} .today-class-box{margin-top: 30px; padding: var(--pad-20); border: var(--stroke-primary); border-radius: 16px; background: var(--bg-white); position: relative;} .today-class-box h4{margin-bottom: 10px;} .today-class-box h5{color: var(--font-secondary); font-weight: 100;} .today-class-box h5 span{color: var(--primary);} .play-btn{cursor: pointer; position: absolute; left: 12%; top: 50%; transform: translate(-50%, -50%);} .private-class{position: relative; height: 264px; border: var(--stroke-primary); border-radius: 30px; width: 100%; display: flex; align-items: center; padding: 30px 100px; background: var(--gradiant1); justify-content: space-between;} .private-class-content h3{color: var(--primary); font-weight: normal; margin-bottom: 15px;} .private-class-content h2{margin-bottom: 20px;} .btn-primary{ height: 56px; border-radius: 30px; width: 100%; background: var(--primary); color: var(--white); font-size: var(--font-size-24); font-weight: var(--font-600); border: none;} .btn-primary:hover{background: var(--secondary);} .private-class-content .btn-primary{max-width: 207px;} .subject-tabs{margin-top: 30px; border-bottom: var(--stroke-primary);} .subject-tabs .nav-link{font-size: var(--font-size-28); color: var(--font-secondary); font-weight: 100; padding-bottom: 20px; border: none; border-bottom: var(--stroke-primary);} .subject-tabs .nav-link.active{border-bottom: 2px solid var(--primary); color: var(--primary); font-weight: var(--font-900); background: none;} .subject-box{text-align: center; border: var(--stroke-primary); border-radius: 30px; padding: 30px 20px; margin-bottom: 30px;} .subject-img img{max-height: 150px; position: relative;} .circle-one{ background: var(--gradiant2); width: 150px; height: 140px; border-radius: 100%; filter: blur(35px); position: absolute; top: 10%; right: 10%;} .circle-two{ background: var(--gradiant3); width: 150px; height: 140px; border-radius: 100%; filter: blur(35px); position: absolute; top: 10%; left: 10%;} .subject-img{position: relative; margin-bottom: 30px;} .subscribed-icon{ background: var(--light-green); border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background-image: var(--subscribed-ico); background-position: center; background-repeat: no-repeat; margin-bottom: 15px;} .subscribe-icon{ background: var(--bg-light); border-radius: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background-image: var(--subscribe-ico); background-position: center; background-repeat: no-repeat; margin-bottom: 15px;} .home-challenge{ background: var(--challenge-bg); background-size: cover; padding: 80px 0px 60px; margin-top: 30px; position: relative;} .home-challenge-content{padding-right: 100px;} .home-challenge-content h2{margin-bottom: 20px;} .home-challenge-content h4{color: var(--primary); margin-bottom: 20px; font-weight: normal;} .home-challenge-content .btn-primary{max-width: 207px;} .home-challenge-img img{max-width: 350px;} .home-challenge-img{position: absolute; left: 10%; bottom: 0;} h2 span{color: var(--secondary);} .liveclass-box{ border: var(--stroke-primary); border-radius: 30px; padding: var(--pad-20); background: var(--gradiant1); position: relative; margin-top: 30px; display: flex; align-items: center; gap: 30px;} .liveclass-box .subscribed-icon, .liveclass-box .subscribe-icon{ position: absolute; left: 30px; top: 20px;} .liveClass-img{position: relative;} .liveClass-img img{max-height: 150px;} .liveClass-content h4{margin-bottom: 16px;} .liveClass-content h5{color: var(--font-secondary); font-weight: 100;} .liveClass-icon{ width: 120px; height: 66px; background-image: var(--live-ico); position: absolute; bottom: 0; transform: translate(-50%); background-size: cover; background-repeat: no-repeat; left: 50%;} .subscribe img{filter: grayscale(100%);} .scroll-top{ left: 15px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; position: fixed; bottom: 15px; background: var(--secondary); border-radius: 50%; cursor: pointer;} footer{padding: 100px 0px 70px; position: relative; overflow: hidden;} .footer-links{display: flex; justify-content: space-between; width: 25%;} .footer-links h4{font-weight: 100; color: var(--font-secondary); margin-bottom: 20px;} .footer-links li{list-style: none; font-size: var(--font-size-20); color: var(--font-colour); margin-bottom: 10px;} .footer-links li:hover{color: var(--primary);} .footer-container{display: flex; justify-content: space-between; width: 100%; flex-wrap: wrap;} .footer-social ul{display: flex; gap: 15px; justify-content: end;} .footer-social ul i{width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--shape-secondary); border-radius: 50%; color: var(--secondary);} .footer-social ul i:hover{background: var(--primary); color: var(--white);} .download-app-icon{width: 160px; height: 60px; border: var(--border-primary); border-radius: 15px; display: flex; align-items: center; justify-content: center; gap: 10px;} .download-app{display: flex; gap: 15px; margin-top: 20px;} .download-app-content p{margin: 0px; color: var(--font-secondary);} .download-app-content h6{font-weight: var(--font-900);} .circle-three{ background: var(--gradiant2); width: 300px; height: 300px; filter: blur(100px); position: absolute; right: 100px; bottom: -300px;} .circle-four{ background: var(--gradiant2); width: 300px; height: 300px; filter: blur(200px); position: absolute; left: 200px; bottom: -300px;} .footer-navbar{border-radius: 15px; background: var(--primary); padding: 14px; position: fixed; z-index: 12; bottom: 30px; left: 50%; transform: translate( -50%); color: var(--white); display: flex; align-items: center; gap: 10px;} .footer-menu{display: flex; gap: 8px; align-items: center; background: var(--bg-white-30); border-radius: 14px; padding: 10px; height: 58px;} .footer-menu button{padding: 10px 20px; border-radius: 10px; background: none; border: 1px solid var(--brd-colour3); color: var(--white); font-size: var(--font-size-18);} .footer-menu h5{font-size: var(--font-size-18);} .footer-menu.active{background: var(--bg-white); color: var(--primary);} #footer-nav-fixed{display: none;} .side-overlay{ position: fixed; left: 0; top: 0; bottom: 0; right: 0; background: var(--bg-white-90); z-index: 2222; height: 100vh; overflow: hidden; display: none;} .side-overlay.active{display: block;} .sidemenu-box{border: var(--stroke-primary); border-radius: var(--border-radius); margin: 20px 0px;} .sidemenu-box .nav-item:last-child{border: none;} .side-nav .navbar-nav .nav-link::after{position: absolute; content: "\f053"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 13px; top: 37%; left: 0px;} .switch-theme{border: var(--stroke-primary); border-radius: var(--border-radius); padding: 16px; display: flex; align-items: center; justify-content: space-between; margin-top: 20px; overflow: hidden; background: var(--bg-white);} .switch-img img{max-height: 45px; position: relative;} .switch-img{display: flex; align-items: center; gap: 30px; position: relative; z-index: 2;} .switch-img h6{font-weight: 100; font-size: 16px; margin-bottom: 8px;} .switch-img h5{color: var(--primary); font-weight: var(--font-900);} .swich-btn, .language-btn{ background: var(--bg-primary); padding: 3px; width: 72px; height: 36px; border-radius: 30px; display: flex; align-items: center; justify-content: space-between;} .swich-btn li, .language-btn li{list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; text-align: center; padding: 6px; transition: all 0.3s ease-in-out;} .swich-btn li.active, .language-btn li.active{ background: var(--primary);} .swich-btn li.active img, .language-btn li.active img, .darktheme .swich-btn li img, .darktheme .language-btn li img{filter: invert(1) brightness(100);} .circle-five{background: var(--gradiant2); width: 60px; height: 60px; position: absolute; transform: translate(-50%); right: -35%; border-radius: 50%; filter: blur(25px);} .circle-six{background: var(--gradiant3); width: 60px; height: 60px; position: absolute; transform: translate(-50%); right: -30%; border-radius: 50%; filter: blur(25px);} .theme-ico{width: 40px; height: 45px; background: var(--theme-ico) center; background-size: cover; position: relative;} ::-webkit-scrollbar { width: 4px;} ::-webkit-scrollbar-thumb {background-color: var(--primary);} ::-webkit-scrollbar-track{ background: var(--bg-white);} .side-menu .inner-wrapper {scrollbar-color: var(--primary) var(--bg-light); scrollbar-width:thin;} .basic-modal{z-index: 22222; background: var(--bg-white-90);} .basic-modal .modal-content{border: var(--stroke-primary); background: var(--bg-white); border-radius: var(--border-radius); padding: var(--pad-20);} .basic-modal .modal-header{justify-content: center; border: none; padding: 0px; margin-bottom: 20px;} .basic-modal .modal-body{display: flex; justify-content: center; gap: 16px; padding: 0px; flex-wrap: wrap; max-height: 385px; overflow: hidden; overflow-y: auto;} .btn-second{border: var(--stroke-primary); border-radius: 30px; height: 54px; background: var(--bg-white); color: var(--font-secondary); font-size: var(--font-size-20); padding: 5px 24px; font-weight: var(--font-600); white-space: nowrap;} .btn-second:hover, .btn-second.active{border-color: var(--primary); color: var(--primary); text-shadow: -5px -5px 0 var(--text-stroke), 5px -5px 0 var(--text-stroke), -5px 5px 0 var(--text-stroke), 5px 5px 0 var(--text-stroke);} .basic-modal .modal-footer{justify-content: center; border: none; padding-bottom: 0px;} .modal-backdrop{background: var(--bg-white-90);} .basic-modal .btn-primary{max-width: 100%;} .modal-close-ico{cursor: pointer; position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg-light); border-radius: 50%; z-index: 1;} .ds-none{display: none !important;} .top-language-btn{display: flex; gap: 10px; align-items: center; background: var(--switch-bg); border-radius: 30px; padding: 5px 8px;} .top-language-btn button{border: 1px solid var(--white-opecity-8); border-radius: 30px; padding: 10px 20px; background: none; color: var(--white);} .min-hight{min-height: 47.5vh; display: flex; justify-content: center;} .sign-up-box h2{text-align: center; margin-bottom: 50px; position: relative;} .sign-up-box h2 span{color: var(--primary);} .sign-up-box{width: 100%; max-width: 700px; padding-top: 70px;} .input label{font-size: var(--font-size-20); margin-bottom: 12px; font-weight: var(--font-900);} .input label span{color: var(--font-secondary);} .input input, .input select{border: var(--stroke-primary); border-radius: 10px; height: 56px; background: var(--bg-white); font-size: var(--font-size-18); padding: 10px 20px; color: var(--font-colour); width: 100%;} .input textarea{border: var(--stroke-primary); border-radius: 10px; font-size: var(--font-size-18); background: var(--bg-white); padding: 10px 20px; color: var(--font-colour); width: 100%; margin: 0px;} .input textarea::placeholder, .input input::placeholder{color: var(--font-secondary);} .input .form-group{margin-bottom: 22px;} .sign-phone{display: flex; align-items: center; gap: 15px; margin-bottom: 30px;} .sign-phone input{width: 80%;} .select-country{ width: 20%; border: var(--stroke-primary); border-radius: 10px; height: 56px; display: flex; align-items: center; justify-content: space-between; font-size: var(--font-size-16); padding: 12px; background: var(--bg-white);cursor: pointer;} .select-country img{max-width: 24px; border-radius: 50%;} .btn{ height: 56px; border-radius: 30px;} .button-not-active, .btn.disabled{background: var(--btn-not-active) !important; color: var(--white-50) !important; font-size: var(--font-size-20); font-weight: var(--font-900); border: none !important; width: 100%;} .button-active{ background: var(--primary) !important; color: var(--white) !important;} .button-not-active:hover{color: var(--white-50); background: var(--btn-not-active); } .country-select, .student-select{display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; border-bottom: var(--stroke-primary); padding-bottom: 16px;} .country-name{font-size: var(--font-size-20); display: flex; gap: 16px; align-items: center; color: var(--font-secondary);} .country-select-icon{width: 36px; height: 36px; border-radius: 50%; border: var(--stroke-primary); display: flex; justify-content: center; align-items: center; color: var(--white); flex-shrink: 0;} .country-select-icon i{display: none;} .country-select.select .country-name{ color: var(--font-colour);} .country-select.select .country-select-icon, .student-select.select .country-select-icon{ background: var(--primary);} .country-select.select .country-select-icon i, .student-select.select .country-select-icon i{display: block;} .country-select:last-child, .student-select:last-child{border: none;} .country-name img{width: 30px; height: 30px;} .basic-modal .modal-dialog-scrollable .modal-body{padding-left: 20px;} .verification-img{position: relative; margin-bottom: 30px;} .verification-img img{max-height: 320px; position: relative;} .verification{text-align: center; margin-bottom: 25px;} .verification h2{margin-bottom: 25px; position: relative;} .verification p{font-size: var(--font-size-20); color: var(--font-secondary);} .circle-seven{background: var(--gradiant2); width: 300px; height: 300px; position: absolute; transform: translate(-50%); left: 50%; border-radius: 50%; filter: blur(60px); top: 15%;} .circle-eight{background: var(--gradiant3); width: 300px; height: 300px; position: absolute; transform: translate(-50%); left: 50%; border-radius: 50%; filter: blur(60px); top: 15%;} .verification-input{display: flex; align-items: center; gap: 16px; margin-bottom: 30px;} .verification-input input{width: calc(100%/4); text-align: center;} .otp-filled{border-color: var(--primary) !important;} .sign-up-box h4{ font-size: var(--font-size-20); text-align: center; color: var(--secondary); margin-top: 30px; font-weight: var(--font-900);} .select-class{padding-top: 50px; position: relative;} .select-class-title{display: flex; gap: 24px; align-items: center; margin-bottom: 40px;} .select-class-title i{width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 50%; background: var(--bg-light); color: var(--font-secondary);} .select-class h5{font-weight: var(--font-900);} .select-class-box, .select-grade-box, .select-curriculam-box{display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 25px; margin-bottom: 25px;} .select-class-nxt-btn{ position: fixed; bottom: 30px; left: 50%; transform: translate(-50%); width: 80%;} .profile-img-section{text-align: center;} .profile-img-section h3{color: var(--primary); text-decoration: underline; cursor: pointer; position: relative;} .profile-img{position: relative; margin-bottom: 30px;} .profile-img img{width: 230px; position: relative; border-radius: 100%; height: 230px; object-fit: cover;} .select-gender{display: flex; align-items: center; gap: 16px; margin-bottom: 40px;} .select-gender .btn-second{width: 100%;} .btn-skip{ background: none; color: var(--secondary); font-size: var(--font-size-20); font-weight: var(--font-900); border: 1px solid var(--secondary); width: 100%;} .btn-skip:hover{background: var(--secondary); color: var(--white);} .mt-25{margin-top: 25px;} .dp-tabs{ border-bottom: var(--stroke-primary); justify-content: center; position: relative;} .dp-tabs .nav-link{ font-size: var(--font-size-24); color: var(--font-secondary); padding: 0px 20px 15px 20px; border: none; border-bottom: var(--stroke-primary);} .dp-tabs .nav-link.active{background: none; color: var(--primary); font-weight: var(--font-900); border-color: var(--primary);} .tab-modal-content .profile-img{margin: 20px auto; max-width: 100px; max-height: 100px;} .tab-modal-content .profile-img img{width: 100px; height: 100px;} .choose-avatar .modal-body{display: block;} .avatar-grid{display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 30px;} .avatar-grid li{width: 80px; height: 80px; border: var(--stroke-primary); border-radius: var(--border-radius); list-style: none; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer;} .avatar-grid li img{max-width: 45px;} .avatar-grid li.active{border-color: var(--primary); background: var(--primary-opacity-11);} .dp-upload-box{border: var(--stroke-primary); padding: var(--pad-20); border-radius: var(--border-radius); color: var(--font-secondary); text-align: center; margin-top: 20px; cursor: pointer;} .dp-upload-box i{font-size: var(--font-size-24); margin-bottom: 10px;} .upload-preview{margin: 30px 0px; display: none; position: relative; min-height: 180px;} .upload-preview i{width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: var(--bg-light); border-radius: 50%; font-size: 14px; cursor: pointer;} .subject-details-img{border-top-left-radius: 20px; padding: 40px; display: flex; align-items: center; justify-content: center; background: var(--bg-light-blue); position: relative; overflow: hidden; border-top-right-radius: 20px; padding-bottom: 100px;} .subject-details-img img{position: relative;} .subject-details-img .circle-seven, .subject-details-img .circle-eight{top: 20%;} .subject-details-content-box{background: var(--bg); border-radius: 50px; padding: 40px; position: relative; top: -60px; display: flex; justify-content: center; flex-wrap: wrap; flex-direction: column; align-items: center; gap: 30px;} .video-ico{width: 28px; height: 28px; background: var(--video-ico); background-size: cover;} .book-ico{width: 28px; height: 28px; background: var(--book-ico); background-size: cover;} .quiz-ico{width: 28px; height: 28px; background: var(--quiz-ico); background-size: cover;} .clock-ico{width: 20px; height: 20px; background: var(--clock-ico); background-size: cover;} .lock-ico{width: 24px; height: 24px; background: var(--lock-ico); background-size: cover;} .subject-details-title ul li{font-size: var(--font-size-20); color: var(--font-secondary); display: flex; align-items: center; gap: 10px; font-weight: 100;} .subject-details-title ul{display: flex; gap: var(--gap-20); justify-content: center;} .subject-details-title h2{margin-bottom: 20px;} .subject-details-title{text-align: center; width: 100%; } .subject-free-trail{display: flex; align-items: center; background: var(--gradiant4); padding: 30px; border-radius: 15px; border: var(--stroke-primary); width: 100%; max-width: 750px; gap: 50px;} .subject-free-trail-img img{max-width: 150px;} .subject-free-trail-content .btn-primary{max-width: 150px;} .subject-free-trail-content h3{color: var(--primary); margin-bottom: 15px;} .subject-free-trail-content h4{margin-bottom: 10px;} .subject-details-price{display: block; width: 100%; max-width: 750px; text-align: center;} .subject-details-price h2 span{color: var(--primary);} .subject-details-price h2{margin-bottom: 20px;} .subject-details-price button{max-width: 100%;} .subject-details-course{display: block; width: 100%; max-width: 950px; position: relative;} .subject-details-course h2{text-align: center; color: var(--primary);} .course-structure{padding: 30px 40px; border: var(--stroke-primary); border-radius: 50px; margin-top: 30px; position: relative; background: var(--bg);} .course-structure-box{ display: flex; justify-content: space-between; cursor: pointer;} .course-structure-content h5{font-weight: var(--font-900); font-size: var(--font-size-24);} .course-structure-content h6{font-size: var(--font-size-20); font-weight: 900;} .course-structure-count{display: flex; gap: 10px; align-items: center; margin-top: 16px;} .course-structure-count .video-ico{width: 20px; height: 20px;} .course-structure-count h6{font-size: var(--font-size-16); color: var(--font-secondary); font-weight: 100;} .course-box-expand{display: flex; gap: 10px; font-size: var(--font-size-18);} .course-box-expand h6{font-size: var(--font-size-18); font-weight: 100; color: var(--font-secondary);} .course-structure-collapse{border-radius: var(--border-radius); border: var(--stroke-primary); padding: var(--pad-20); background: var(--bg-white); margin-top: 20px;} .course-structure-details{display: flex; justify-content: space-between; border-radius: var(--border-radius); border: var(--stroke-primary); padding: var(--pad-20); margin-top: 20px; align-items: end;} .course-structure-collapse-content{display: none;} .course-structure-box.active{color: var(--primary);} .course-structure-box.active .course-box-expand h6{color: var(--primary);} .circle-nine{ width: 427px; height: 377px; border-radius: 100%; background: var(--gradiant2); filter: blur(100px); position: absolute; left: 0; top: 50px;} .circle-ten{ width: 427px; height: 377px; border-radius: 100%; background: var(--gradiant2); filter: blur(100px); position: absolute; right: 0; bottom: -50px;} .notes-structure-details{display: flex; justify-content: space-between; border-radius: var(--border-radius); border: var(--stroke-primary); padding: var(--pad-20); margin-top: 20px; align-items: center; background: var(--bg-white);} .notes-structure-content{display: flex; align-items: center; gap: 16px;} .notes-structure-content h5{font-weight: var(--font-900);} .notes-structure-icon{width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: var(--primary-opacity-11);} .solution-structure-icon{width: 50px; height: 50px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: var(--bg-light-blue);} .subject-details-content-box::before{content: ''; position: absolute; inset: 0; padding: 1px; background: var(--gradiant-border); border-radius: inherit; -webkit-mask: linear-gradient(var(--bg) 0 0) content-box, linear-gradient(var(--bg) 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; pointer-events: none; opacity: 0.4;} .subscription-box{padding: var(--pad-20); border: var(--stroke-primary); border-radius: var(--border-radius); position: relative; background: var(--gradiant4); display: flex; justify-content: space-between; cursor: pointer; margin-bottom: 20px;} .subscription-box h5{margin-bottom: 15px;} .subscription-box h3{color: var(--primary); display: flex; gap: 10px; align-items: center;} .subscription-box h3 small{ font-size: var(--font-size-18); color: var(--font-secondary); font-weight: 100; display: flex; gap: 8px;} .subscription-box h3 small span{color: var(--secondary);} .subscription-box.select{border-color: var(--primary);} .subscription-box.select .country-select-icon{background: var(--primary);} .subscription-box.select .country-select-icon i{display: block;} .subscription-notes-img{position: relative;} .subscription-notes-img img{max-width: 200px;} .subscription-notes{display: flex; justify-content: center; gap: 16px; border-radius: var(--border-radius); width: 100%; align-items: center; background: var(--gradiant-bg); background-size: cover; margin-top: 40px;} .subscription-notes h3{color: var(--white);} .btn-third{font-size: var(--font-size-20); font-weight: var(--font-900); background: var(--white); color: var(--primary); padding: 8px 20px; margin-bottom: 20px;} .btn-third:hover{background: var(--secondary); color: var(--white);} .subscription-button{margin-top: 40px; display: block; text-align: center;} .subscription-button .btn{margin-bottom: 20px;} .subscription-button h4{font-weight: 100; color: var(--font-secondary);} .video-box { position: sticky; top: 130px; overflow: hidden;} .video-box video { width: 100%; border-radius: var(--border-radius); margin-bottom: 20px;} .video-title { display: flex; justify-content: space-between; margin-bottom: 30px;} .video-title h3{margin-bottom: 10px;} .video-title h5{color: var(--font-secondary); font-weight: 100;} .like-icon{width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--primary-opacity-11); display: flex; justify-content: center; align-items: center; background: var(--gradiant1); cursor: pointer; flex-shrink: 0;} .like-icon:active{background: var(--gradiant7);} .video-like-section{display: flex; gap: 10px;} .trai-bgm{border-radius: 30px; background: var(--gradiant-bg); background-size: cover; padding: 40px 20px; overflow: hidden;} .trial-subject-img{position: relative; text-align: center; max-width: 350px; margin: 0 auto;} .trial-subject-img img{max-width: 260px; position: relative;} .trial-subject-img .btn-third{position: relative; top: -30px; margin: 0px;} .circle-11{width: 200px; height: 200px; border-radius: 100%; background: var(--gradiant5); filter: blur(50px); position: absolute; left: 50%; transform: translate(-50%); top:0px;} .circle-12{width: 200px; height: 200px; border-radius: 100%; background: var(--gradiant6); filter: blur(50px); position: absolute; left: 50%; transform: translate(-50%); top: 0px;} .trai-bgm h3{text-align: center; color: var(--white);} .trial-content{border: 1px solid var(--white); border-radius: var(--border-radius); padding: var(--pad-20); margin-top: 20px; font-size: var(--font-size-20); margin-bottom: 20px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .trial-content ul li{position: relative; padding-right: 32px; margin-bottom: 16px; color: var(--white);} .trial-content ul li::before{content: ''; background: var(--check-mark); width: 24px; height: 24px; background-size: cover; position: absolute; right: 0px; top: 4px;} .trial-content ul li:last-child{margin: 0px;} .continue-learning{width: 100%; max-width: 950px; position: relative;} .continue-learning h3{font-weight: 100; margin-bottom: 20px; color: var(--font-secondary);} .continue-learning-box{border-radius: var(--border-radius); border: var(--stroke-primary); padding: var(--pad-20); background: var(--bg-white); position: relative;} .continue-learning-box img{border-radius: var(--border-radius); width: 100%; height: 230px; object-fit: cover; margin-bottom: 20px;} .course-structure-count h5{color: var(--font-secondary); font-weight: 100;} .d-flex-space-between{display: flex; justify-content: space-between;} .play-ico{background: var(--play-ico); width: 38px; height: 38px; background-size: cover;} .video-play-icon{display: flex; gap: 10px; align-items: center;} .video-play-icon p{font-size: 18px; margin: 0px;} .progress-box {width: 100%; margin-top: 20px; display: flex; gap: 10px; align-items: center;} .progress-title { font-weight: bold; color: var(--primary); } .progress-container { width: 100%; background-color: var(--primary-opacity-11); border-radius: 30px; height: 10px; position: relative; overflow: hidden; } .progress-bar {height: 100%;width: 0%;background: var(--primary); border-radius: 30px; position: absolute; top: 0; transition: width 1.5s ease;} .course-structure-count p{font-size: var(--font-size-16); color: var(--font-secondary); margin: 0px;} .course-structure-details .play-ico{width: 20px; height: 20px;} .course-structure-details .video-play-icon p{font-size: 15px; color: var(--font-secondary);} .course-structure-details.completed .video-play-icon p{color: var(--primary);} .course-structure-details.completed .course-structure-count p{color: var(--primary);} .course-structure-details.completed .course-structure-content h6::after{content: ''; background: url(../images/icons/check-mark-green.svg); width: 24px; height: 24px; background-size: cover; position: absolute; margin-right: 10px;} .course-structure-details.completed .course-structure-content .course-structure-count h6::after{ content: none;} .download-ico{width: 28px; height: 28px; background: var(--download-ico); background-size: cover;} .download-ico-blue{width: 28px; height: 28px; background: var(--download-ico-blue); background-size: cover;} .dwonload-icon, .dwonload-icon-blue{display: flex; gap: 8px; align-items: center;} .dwonload-icon p, .dwonload-icon-blue p{margin: 0px; font-size: var(--font-size-18); color: var(--primary);} .download-flex{display: flex; align-items: center; gap: var(--gap-20);} .dwonload-icon-blue p{color: var(--secondary);} .question-video{border: var(--stroke-primary); padding: var(--pad-20); border-radius: var(--border-radius); background: var(--gradiant4); display: flex; align-items: center; justify-content: space-between;} .question-video-box{display: flex; gap: 16px; align-items: center;} .question-video-box img{max-width: 60px;} .question-video-box h3{color: var(--secondary); margin-bottom: 10px;} .question-video-box h5{color: var(--font-secondary); font-weight: 100;} .btn-four{background: var(--secondary); color: var(--white); padding: 8px 20px; font-size: var(--font-size-20); font-weight: var(--font-600); width: 100%;} .question-video-btn{width: 100%; max-width: 140px;} .video-content-box{border: var(--stroke-primary); padding: 15px; border-radius: var(--border-radius);} .video-content-tab{overflow: hidden;} .video-content-tab .dp-tabs{flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start;} .video-content-tab .dp-tabs .nav-link{padding: 0px 15px 15px;} .video-content-title{display: flex; justify-content: space-between; align-items: center; margin: 20px 0px;} .video-content-title i{color: var(--font-secondary);} .video-content-title h5{font-weight: var(--font-900);} .pause-ico{ width: 24px; height: 24px; background: var(--pause-ico); background-size: cover;} .course-structure-details.playing{border-color: var(--primary); background: var(--primary-opacity-11);} .course-structure-details.playing h6{color: var(--primary);} .course-structure-details.playing .course-structure-count h6{color: var(--font-secondary);} .unit-test{border: var(--stroke-primary); padding: var(--pad-20); border-radius: var(--border-radius); background: var(--gradiant4); display: flex; align-items: center; justify-content: space-between; margin-top: 20px;} .unit-test-box{display: flex; gap: 16px; align-items: center;} .unit-test-box img{max-width: 60px;} .unit-test-box h3{color: var(--primary); margin-bottom: 10px;} .unit-test-box h5{color: var(--font-secondary); font-weight: 100;} .unit-test-btn{width: 100%; max-width: 120px;} .ask-teacher-empty-img{position: relative; padding: 110px 0px;} .ask-teacher-empty-img img{max-width: 160px; position: relative;} .ask-teacher-empty{padding: 30px 0px; text-align: center;} .ask-teacher-empty h3{position: relative; margin-bottom: 15px;} .ask-teacher-empty h5{color: var(--font-secondary);} .ask-teacher-empty .btn{margin-top: 30px;} .record-tests .notes-structure-details{ display: block;} .record-tests .notes-structure-content{margin-bottom: 15px;} .machingGame{border: var(--stroke-primary); padding: var(--pad-20); border-radius: var(--border-radius); background: var(--gradiant4); margin-top: 20px;} .game-box{display: flex; align-items: center; justify-content: space-between;} .game-title-img img{max-width: 100px;} .game-title{display: flex; gap: var(--gap-20); align-items: center;} .game-title-details h5{font-weight: 100; margin-bottom: 10px; color: var(--font-secondary);} .game-title-details h4{color: var(--orange);} .game-point{display: flex; justify-content: space-between; margin-top: 20px; align-items: center;} .game-point .point-rectangle img{height: 30px;} .game-point .point-rectangle p{font-size: var(--font-size-16);} .game-point .point-rectangle{height: 30px; min-width: 100px;} .game-point h6{font-size: var(--font-size-18); font-weight: 100; color: var(--font-secondary);} .question-subject-box{ width: 100%;} .question-subject-box h5{ margin-bottom: 10px;} .question-subject-box h3{color: var(--secondary);} .ask-question .input .form-group{margin-bottom: 16px;} .ask-question{padding-left: 20px !important;} .recording{border: var(--stroke-primary); border-radius: 10px; height: 56px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; position: relative; background: var(--bg-white);} .recording h5{color: var(--font-secondary); font-weight: 100;} .wave-container { display: flex; justify-content: center; align-items: flex-end; height: 40px; margin-top: 10px; gap: 5px; position: absolute; left: 10px; top: -15px;} .wave-container .bar { width: 5px; background: var(--primary); animation: wave 1s infinite ease-in-out; border-radius: 5px;} .wave-container .bar:nth-child(1) { animation-delay: 0s; height: 10px;} .wave-container .bar:nth-child(2) { animation-delay: 0.1s; height: 16px;} .wave-container .bar:nth-child(3) { animation-delay: 0.2s; height: 22px;} .wave-container .bar:nth-child(4) { animation-delay: 0.3s; height: 16px;} .wave-container .bar:nth-child(5) { animation-delay: 0.4s; height: 10px;} .recorded-audio-list{display: none; position: relative; margin-top: 15px;} .recorded-audio-list audio{ width: 100%; max-width: 250px; height: 40px; border-radius: 30px;} .recorded-audio-list i{width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; background: var(--bg-light); border-radius: 50%; font-size: 12px; position: absolute; left: 0px; top: 8px; cursor: pointer;} .file-upload{border: 1px dashed var(--primary); height: 56px; border-radius: 10px; width: 100%; background: var(--light-green); display: flex; align-items: center; gap: 10px; justify-content: center; cursor: pointer;} .file-upload h5{color: var(--font-secondary); font-weight: 100;} .file-upload-view{border: 1px dashed var(--primary); height: 56px; border-radius: 10px; width: 100%; background: var(--light-green); display: flex; align-items: center; justify-content: space-between; padding: 8px 20px; } .file-upload-view img{max-height: 26px;} .file-upload-view i{cursor: pointer; color: var(--red);} .video-ask-teacher{width: 100%; border-radius: var(--border-radius); display: flex; justify-content: space-between; border: var(--stroke-primary); background: var(--bg-white); padding: var(--pad-20); margin-top: 20px;} .ask-date{display: flex; align-items: center; gap: 10px; margin-top: 10px;} .ask-date h5{color: var(--font-secondary); font-weight: 100;} .video-ask-button button{background: var(--light-green); border-radius: 30px; padding: 8px 20px; color: var(--primary); border: none; font-size: var(--font-size-18);} .mt-20{margin-top: 20px;} .replied{color: var(--primary) !important;} .ask-teacher-chat{border: var(--stroke-primary); padding: var(--pad-20); border-radius: var(--border-radius); background: var(--bg-white); width: 100%; position: relative;} .welcome-chat{text-align: center;} .welcome-chat h5{font-weight: 100; color: var(--font-secondary); margin-bottom: 15px;} .welcome-message{padding: 10px 16px; border-radius: var(--border-radius); font-size: var(--font-size-18); background: var(--gradiant7);} .waiting-reply{ display: flex; align-items: center; gap: var(--gap-20); width: 100%;} .waiting-reply img, .teacher-chat-icon img{max-width: 20px;} .waiting-reply h5{color: var(--font-secondary); font-weight: 100;} .teacher-side{display: flex; gap: var(--gap-20); justify-content: start; margin-top: 20px;} .teacher-reply{ background: var(--gradiant8); padding: 10px 16px; border-radius: var(--border-radius); font-size: var(--font-size-18); margin-bottom: 10px;} .teacher-reply-box{width: 100%;} .chat-date{color: var(--font-secondary); font-size: var(--font-size-18); font-weight: 100;} .student-side{ display: flex; gap: var(--gap-20); justify-content: end; margin-top: 20px; text-align: left;} .student-reply{ background: var(--gradiant7); padding: 10px 16px; border-radius: var(--border-radius); font-size: var(--font-size-18); margin-bottom: 10px;} .student-reply-box{width: 100%;} .student-chat-icon img{width: 30px; height: 30px; border-radius: 50%; object-fit: cover;} .ask-teacher-typing{display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px;} .ask-teacher-attachment{display: flex; gap: 10px;} .attachment-ico{width: 24px; height: 24px; background: var(--attachment-ico); background-size: cover;} .top50{top: 46px;} .send-icon{width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--send-gradiant); cursor: pointer;} .ask-teacher-typing .input{width: 100%;} .ask-teacher-typing input{border-radius: 30px;} .stop-icon{width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--primary-opacity-11); background: var(--gradiant9); display: flex; justify-content: center; align-items: center; cursor: pointer;} .ask-teacher-recording-view{border: var(--stroke-primary); border-radius: 30px; height: 56px; background: var(--bg-white); position: relative; display: none;} .ask-teacher-recording-view .wave-container{top: 13%; left: 50%; transform: translate(-50%, -50%);} .ask-teacher-recording .recorded-audio-list{margin-top: 0px;} .previewContainer{border: var(--stroke-primary); border-radius: 30px; height: 56px; background: var(--bg-white); padding: 12px 20px; position: relative; display: none;} .previewContainer img{height: 30px;} .previewContainer div img{margin-left: 10px;} /* .ask-teacher-recording .recorded-audio-list audio{height: 56px;} */ .student-reply audio{height: 56px; width: 100%; max-width: 300px;} .attachment-preview{display: flex; align-items: center; justify-content: space-between; width: 100%;} .video-ask-button button.waiting{ background: var(--shape-secondary); color: var(--secondary);} .ask-pdf-view{display: flex; align-items: center; gap: 10px;} .toast { background-color: var(--primary); color:white; padding: 16px 24px; border-radius: 10px; opacity: 0; pointer-events: none; display: flex; align-items: center; gap: 10px; justify-content: space-between; box-shadow: 0 5px 10px rgba(0,0,0,0.2); transform: translateX(120%); opacity: 0; transition: transform 0.4s ease, opacity 0.4s ease;} .toast.show { opacity: 1; pointer-events: auto; transform: translateX(0);} .toast .close { background: transparent; color: var(--white); border: none; font-size: var(--font-size-18); cursor: pointer;} .toast-container { position: fixed; bottom: 30px; right: 30px; z-index: 99999; width: 100%; max-width: 600px;} .toast.hide { transform: translateX(120%); opacity: 0;} .live-class .dp-tabs{margin-top: 40px; justify-content: start;} .calender-box{border: var(--stroke-primary); background: var(--bg-white); padding: var(--pad-20); border-radius: var(--border-radius); margin-top: 20px; display: flex; flex-wrap: nowrap; gap: 60px; overflow: hidden;} .date-box{width: 34px; height: 34px; border-radius: 50%; background: var(--brd-colour); display: flex; justify-content: center; align-items: center; margin-top: 15px; color: var(--font-secondary); cursor: pointer;} .date-row{text-align: center;} .date-row h6{color: var(--font-secondary);} .date-box.active{background: var(--primary); color: var(--white);} .shared-class-box{background: var(--bg-white); border-radius: var(--border-radius); border: var(--stroke-primary); width: 100%; max-width: 500px;} .shared-time{display: flex; width: 100%; gap: 10px; border-bottom: var(--stroke-primary); padding: 14px 20px; align-items: center;} .shared-time h5{color: var(--font-secondary); font-weight: 100;} .shared-box-content{padding: 14px 20px; display: flex; flex-direction: column; gap: 16px;} .shared-box-content h5{color: var(--primary);} .shared-box-status{background: var(--gradiant4); padding: 8px 20px; border-radius: 15px; text-align: center; height: 60px; gap: var(--gap-20); border: 1px solid var(--primary-opacity-11); display: flex; align-items: center; justify-content: center;} .shared-box-status p{font-size: var(--font-size-20); margin: 0px; color: var(--primary);} .btn-join{height: 38px; border-radius: 30px; background: var(--primary); color: var(--white); padding: 8px 20px; border: none; font-size: var(--font-size-20); display: flex; align-items: center; justify-content: center;} .shared-box-status.join{ justify-content: space-between;} .live-class-subscribed-box{ border-radius: var(--border-radius); border: var(--stroke-primary); padding: var(--pad-20); background: var(--bg-white); margin-top: 20px;} .mb-30{margin-bottom: 30px;} .live-class-subscribed-header{display: flex; justify-content: space-between; align-items: center; cursor: pointer;} .live-class-subscribed-title{display: flex; align-items: center; gap: var(--gap-20);} .live-class-subscribed-title .liveClass-img img{max-width: 100px;} .live-class-subscribed-title .liveClass-icon{width: 80px; height: 56px;} .live-class-subscribed-title h5{color: var(--font-secondary); margin-top: 20px;} .btn-five{ background: var(--primary); color: var(--white); padding: 8px 20px; font-size: var(--font-size-20); font-weight: var(--font-600); width: 100%;} .live-class .shared-box-status{width: 100%; max-width: 400px;} .live-class .course-structure-count p{color: var(--primary);} .live-class-subscribed-content{display: none;} .live-class-subscribed-header.active, .live-class-subscribed-header.active .course-box-expand h6{ color: var(--primary);} .subject-details-bgm{border-top-left-radius: 20px; padding: 40px; display: flex; align-items: center; justify-content: space-evenly; background: var(--bg-light-blue); position: relative; overflow: hidden; border-top-right-radius: 20px; padding-bottom: 100px;} .liveclass-deatils-img{position: relative; text-align: center;} .liveclass-deatils-img img{position: relative; max-height: 300px;} .subject-price-box{background: var(--bg-white-10); padding: var(--pad-20); border-radius: var(--border-radius); border: 1px solid var(--brd-white); width: 100%;} .subject-price-box .subject-details-price{margin-top: 0px;} .liveclass-start{display: flex; align-items: center; justify-content: center; gap: 16px; padding:20px; border-radius: 15px; background: var(--gradiant4); border: 1px solid var(--primary-opacity-11); width: 100%; max-width: 750px; color: var(--primary);} .liveclass-sylabus{ border-radius: var(--border-radius); background: var(--gradiant-bg); background-size: cover; padding: var(--pad-20); overflow: hidden; width: 100%; max-width: 750px; display: flex; gap: 30px; justify-content: center; align-items: center;} .liveclass-sylabus .trial-content{flex: 2 0 0; padding: 12px; margin: 0px; width: 100%;} .liveclass-subscribe-btn{flex: 1 0 0;} .liveclass-sylabus .trial-content ul li{margin-bottom: 8px;} .liveclass-subscribe-btn h3{color: var(--white);} .live-class-empty{ display: flex; flex-direction: column; gap: 30px; align-items: center; margin-top: 30px;} .live-class-empty-img{position: relative;} .live-class-empty-img img{position: relative; max-width: 260px;} .live-class-empty h3{position: relative; margin-top: 30px;} .private-class-empty{display: flex; flex-direction: column; gap: var(--gap-20); position: relative; align-items: center; width: 100%; max-width: 600px;} .mt-30{margin-top: 30px !important;} .private-class-empty a{display: block; width: 100%;} .primary-modal{z-index: 2222; background: var(--bg-white-90);} .primary-modal .modal-content{border: var(--stroke-primary); background: var(--bg-white); border-radius: var(--border-radius); padding: var(--pad-20);} .primary-modal .modal-header{justify-content: center; border: none; padding: 0px; margin-bottom: 20px;} .primary-modal .modal-body{ padding: 0px; max-height: 385px; overflow: hidden; overflow-y: auto;} .primary-modal .modal-footer{justify-content: center; border: none; padding-bottom: 0px;} .primary-modal .btn-primary{max-width: 100%;} .primary-modal .modal-dialog-scrollable .modal-body{padding-left: 20px;} .select-scrollable{display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; margin: 25px 0px; overflow: hidden;} .calendar { width: 100%; border: var(--stroke-primary); border-radius: var(--border-radius); overflow: hidden; background: var(--bg-white); margin: 20px 0px;} .calendar-header { display: flex; justify-content: space-between; align-items: center; padding: var(--pad-20); color: var(--primary); font-size: var(--font-size-24);} .calendar-header button { background: none; border: none; font-size: var(--font-size-18); cursor: pointer; color: var(--font-secondary);} .calendar-days, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center;} .calendar-days div { color: var(--font-secondary); padding: 10px 0; font-weight: bold;} .calendar-grid div { padding: 10px 0; color: var(--primary); font-weight: var(--font-600); margin: 0 auto;} .calendar-grid .today { background: var(--primary); color: var(--white); font-weight: bold; border-radius: 50%;} .calendar-day.selected { background: var(--secondary); color: var(--white); border-radius: 50%;} .private-class-empty h5{color: var(--font-secondary);} .success-img{position: relative; padding: 80px 0px; padding-bottom: 0px; margin-top: 80px; text-align: center;} .success-img img{position: relative; max-width: 150px; top: -50px;} .success-img .circle-eight, .success-img .circle-seven{width: 160px; height: 160px;} .success-content{display: flex; align-items: center; flex-direction: column; gap: var(--gap-20); position: relative; text-align: center;} .success-content h5{color: var(--font-secondary);} .success-message{min-height: 280px;} .circle-13{background: var(--gradiant10); width: 160px; height: 160px; position: absolute; transform: translate(-50%); left: 50%; border-radius: 50%; filter: blur(60px); top: 15%;} .private-class-title{display: flex; justify-content: space-between; align-items: center;} .private-class-title a{max-width: 220px; width: 100%;} .private-class-box{ background: var(--bg-white); border-radius: var(--border-radius); border: var(--stroke-primary); width: 100%; min-height: 196px;} .shared-box-content h4 span{margin-right: 6px; color: var(--primary);} .private-shared-time{display: flex; width: 100%; justify-content: space-between; border-bottom: var(--stroke-primary); padding: 14px 20px; align-items: center;} .private-shared-time h5{color: var(--font-secondary); font-weight: 100;} .private-shared-time div{display: flex; gap: 10px; align-items: center;} .private-shared-time .like-icon{width: 32px; height: 32px;} .private-shared-time .like-icon .attachment-ico{width: 18px; height: 18px;} .private-box-status { background: var(--gradiant4); padding: 8px 20px; border-radius: 15px; text-align: center; height: 60px; border: 1px solid var(--primary-opacity-11); display: flex; align-items: center; justify-content: center; color: var(--primary);} .private-box-status p { font-size: var(--font-size-20); margin: 0px; } .private-box-status.abcent{background: var(--gradiant-red); border-color: var(--red-opacity-11); color: var(--red);} .private-box-status.completed{background: var(--gradiant-green); border-color: var(--green-opacity-11); color: var(--green); justify-content: space-between;} .private-box-status.completed .btn-join{background: var(--green);} .private-box-status.join{justify-content: space-between;} .ask-teacher-icon img{max-width: 200px;} .ask-teacher-history{display: flex; gap: 60px;} .ask-teacher-history-box{flex: 1 0 0; border: var(--stroke-primary); background: var(--bg-white); border-radius: 30px; padding: 0px 20px; overflow: hidden; height: 600px; overflow-y: auto;} .ask-history-empty{text-align: center; flex: 2 0 0; display: flex; flex-direction: column; gap: 30px; align-items: center; border: var(--stroke-primary); border-radius: 30px; padding: 80px 0px; background: var(--bg-white);} .ask-teacher-history-box .select-scrollable .btn-second.active{background: var(--shape-secondary);} .ask-teacher-history-box .video-ask-teacher{flex-direction: column; gap: 15px;} .ask-history-chat{ flex: 2 0 0; display: flex; flex-direction: column; gap: 30px; align-items: center; position: relative; border: var(--stroke-primary); border-radius: 30px; background: var(--bg-white);} .ask-history-chat .ask-teacher-chat{border: none; height: 600px; overflow-y: auto; padding-bottom: 100px;} .ask-history-typing{width: 100%; position: absolute; bottom: 0px; left: 0px; right: 0px; padding: var(--pad-20); background: var(--bg-white);} .show-chat-history{cursor: pointer;} .show-chat-history.active{border-color: var(--primary);} .statistics-page{display: flex; width: 100%; margin-top: 30px; gap: 40px;} .statistics-count{ flex: 2; display: flex; flex-direction: column; gap: var(--gap-20); } .statistics-count-box{border: var(--stroke-primary); border-radius: var(--border-radius); padding: var(--pad-20); background: var(--bg-white);} .statistics-count-box{display: flex; gap: var(--gap-20); align-items: center;} .statistics-count-box img{max-width: 50px;} .statistics-count-title h4{font-weight: 100; color: var(--font-secondary);} .statistics-count-title{display: flex; justify-content: space-between; width: 100%;} .statistics-tab{flex: 3; display: flex; flex-direction: column; gap: 30px;} .statistics-tab-content{border: var(--stroke-primary); border-radius: var(--border-radius); background: var(--bg-white); padding: var(--pad-20);} .statistics-bar{display: flex; justify-content: space-between;} .statistics-bar h4{color: var(--font-secondary); font-weight: 100;} .statistics-bar h5{font-size: var(--font-size-24); font-weight: var(--font-900);} .statistics-view{margin-bottom: 20px;} .statistics-view:last-child{margin: 0px;} .statistics-view.completed h5{color: var(--primary);} .statistics-view.not-finished h5{color: var(--secondary);} .statistics-view.not-finished .progress-container{ background: var(--secondary-opacity-11);} .statistics-view.not-finished .progress-bar{ background: var(--secondary);} .statistics-view.not-seen h5{color: var(--red);} .statistics-view.not-seen .progress-container{ background: var(--red-opacity-11);} .statistics-view.not-seen .progress-bar{ background: var(--red);} .donut-chart { position: relative; width: 200px; height: 200px; margin: 0 auto; margin-bottom: 40px;} .donut-chart svg { transform: rotate(-90deg);} .donut-chart circle { transition: stroke-dashoffset 1s ease; stroke-linecap: butt; /* avoid gaps when 100% */} .center-text { position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); text-align: center;} .center-text .count { font-size: var(--font-size-28); font-weight: bold;} .center-text .label { color: var(--font-secondary); font-size: var(--font-size-20);} .saved-videos-tab .select-scrollable .btn-second.active{background: var(--primary-opacity-11);} .saved-video-box{margin-top: 20px; border-radius: var(--border-radius); border: var(--stroke-primary); background: var(--bg-white); padding: var(--pad-20); display: flex; align-items: center; gap: var(--gap-20);} .saved-video-img{position: relative; flex: 1;} .saved-video-image{border-radius: var(--border-radius); height: 180px; object-fit: cover; width: 100%;} .saved-video-details{flex: 1; display: flex; justify-content: space-between;} .saved-subject{display: flex; justify-content: space-between; align-items: center; position: absolute; top: 20px; width: 94%; margin: 0px 3%;} .saved-subject .btn-third:disabled{margin: 0px; color: var(--secondary); background: var(--bg-white); opacity: 1; border: none;} .myCourse-subscribe{filter: grayscale(100%);} .myCourse-liveSubscribe{border-radius: var(--border-radius); border: 1px solid var(--primary); padding: var(--pad-20); background: var(--primary-opacity-11); margin-bottom: 30px;} .myCourse-liveSubscribe .liveclass-start{padding: 15px; margin-top: 15px;} .myCourse-liveSubscribe .live-class-subscribed-header{align-items: start;} .myCourse-liveunSubscribe .liveclass-box{margin-top: 20px; padding: 10px 20px;} .inner-page-title h5{color: var(--font-secondary); margin-top: 20px;} .inner-page-title{margin-bottom: 20px;} .homework-box{border: var(--stroke-primary); border-radius: var(--border-radius); padding: var(--pad-20); background: var(--bg-white); display: flex; flex-direction: column; gap: 16px;} .homework-top-section{display: flex; justify-content: space-between;} .homewok-title{display: flex; flex-direction: column; gap: 10px;} .homework-date{display: flex; gap: 8px; align-items: center;} .homework-date p{margin: 0px; color: var(--font-secondary); font-size: var(--font-size-20);} .homework-date h5{color: var(--primary);} .btn-six{background: none; border: 1px solid var(--secondary); padding: 8px 20px; font-size: var(--font-size-20); font-weight: var(--font-600); width: 100%; color: var(--secondary);} .status{ height: 40px; border-radius: 30px; color: var(--secondary); background: var(--shape-secondary); padding: 5px 20px; font-size: var(--font-size-20); display: flex; align-items: center;} .homework-bottom{display: flex; gap: 15px;} .status.added{background: var(--light-green); color: var(--primary);} .filter-icon{text-align: left;} .filter-icon img{max-width: 32px;} .private-class-form .select-class-box{gap: 10px;} .private-class-form .btn-second{padding: 5px 16px; white-space: nowrap;} .date-picker-wrapper { position: relative;} .calendar-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; background: var(--calendar-ico); width: 20px; height: 20px; background-size: cover;} .flatpickr-calendar{background: var(--bg-white); box-shadow: none; border: var(--stroke-primary);} .flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after{border-bottom-color: var(--font-secondary);} .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month{color: var(--font-colour); fill: var(--font-colour);} .flatpickr-current-month, span.flatpickr-weekday{color: var(--font-colour);} .flatpickr-day{color: var(--font-secondary);} .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay{ background: var(--primary); border-color: var(--primary);} .private-class-form .select-scrollable{margin: 20px 0px;} .timeline-section{margin-top: 20px; display: flex; flex-direction: column; gap: var(--gap-20);} .timeline-time{font-size: var(--font-size-20); color: var(--font-secondary);} .timeline-box{display: flex; gap: var(--gap-20); align-items: center; border: var(--stroke-primary); background: var(--bg-white); padding: var(--pad-20); border-radius: var(--border-radius); overflow: hidden;} .timeline-img img{max-width: 80px;} .timeline-content{display: flex; justify-content: space-between; width: 100%; align-items: center;} .flex-direction{display: flex; flex-direction: column; gap: 10px;} .timeline-content h6{font-size: var(--font-size-18); color: var(--font-secondary);} .timeline-content h4{color: var(--primary);} .attendance{ height: 42px; border-radius: 15px; border: 1px solid var(--green-opacity-11); display: flex; align-items: center; gap: 8px; background: var(--gradiant-green); color: var(--green); padding: 5px 20px; flex-shrink: 0;} .attendance p{font-size: var(--font-size-18);} .quiz-grade{position: relative; padding: 0px 20px;} .quiz-grade img{max-width: 80px; position: relative;} .quiz-grade .circle-five, .quiz-grade .circle-six{width: 80px; height: 80px; top: 20%; right: -25%;} .timeline-content .course-structure-count{margin-top: 0px;} .attendance.abcent{border-color: var(--red-opacity-11); color: red; background: var(--gradiant-red);} .profile-page{display: flex; gap: 60px;} .profile-right-side{border: var(--stroke-primary); border-radius: var(--border-radius); padding: 60px 20px; background: var(--bg-white); flex: 1; display: flex; flex-direction: column; gap: 40px; align-items: center; justify-content: space-around;} .profile-name{ position: relative; display: flex; flex-direction: column; gap: var(--gap-20); align-items: center;} .profile-img-section .profile-img{margin-bottom: 0px;} .profile-left-side{flex: 2; display: flex; flex-direction: column; gap: var(--gap-20);} .profile-img-section .profile-img img{width: 180px; height: 180px;} .profile-count-title{display: flex; align-items: center; gap: 20px;} .profile-count-title h5{color: var(--font-secondary); font-weight: 100;} .profile-count-title h4{font-weight: var(--font-900); color: var(--font-colour);} .profile-left-side .statistics-count-box h3{color: var(--primary); font-size: var(--font-size-24);} .tile-box{border: var(--stroke-primary); border-radius: var(--border-radius); padding: var(--pad-20); background: var(--bg-white);} .personality-img{position: relative; text-align: center;} .personality-img .btn-third{position: relative; margin: 0px;} .personality-img img{max-width: 250px; position: relative;} .personality-box{display: flex; flex-direction: column; align-items: center; gap: 30px;} .personality-img .circle-seven, .personality-img .circle-eight{width: 230px; height: 230px;} .profile-mission-box{border: var(--stroke-primary); border-radius: var(--border-radius); padding: var(--pad-20); background: var(--gradiant1); width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 10px;} .profile-mission-box h5{color: var(--font-secondary);} .profile-mission-box .progress-box{margin: 0px;} .profile-mission-box h4{color: var(--primary);} .profile-mission-box .progress-title{color: var(--font-colour);} .personality-box h4{position: relative;} .characters .personality-img img{max-width: 400px; position: relative;} .characters .personality-box .btn-third{margin: 0px; position: relative;} .characters .profile-mission-box{max-width: 100%;} .characters .owl-theme .owl-dots{position: absolute; top: 49%; left: 50%; transform: translate(-50%, -50%); } .characters .owl-carousel .owl-stage-outer{padding-top: 60px;} .terms-condtions h4{color: var(--secondary); margin-bottom: 15px;} .terms-condtions p{color: var(--font-secondary); font-size: var(--font-size-18);} .help-chat{display: flex; flex-direction: column; gap: 28px; padding-bottom: 100px;} .chat-welcome-message{background: var(--light-green); padding: var(--pad-20); text-align: center;} .chat-welcome-message h4{color: var(--font-secondary); font-weight: 100;} .help-teacher-side{display: flex; flex-direction: column; gap: var(--gap-20); width: 100%; max-width: 900px;} .help-teacher-box{border-radius: var(--border-radius); border-top-right-radius: 0; background: var(--bg-light); padding: var(--pad-20);} .help-teacher-box p, .help-student-box p{font-size: var(--font-size-18);} .help-teacher-side .select-grade-box{margin: 0px;} .help-student{display: flex; flex-direction: column; gap: var(--gap-20); align-items: end; width: 100%; max-width: 900px; margin-right: auto;} .help-student-box{border-radius: var(--border-radius); border-top-left-radius: 0; background: var(--primary); padding: var(--pad-20); width: 100%; color: var(--white);} .chat-typing {position: fixed; bottom: 0px; width: 85vw; z-index: 2; display: flex; gap: 16px; left: 50%; transform: translateX(-50%); justify-content: center; padding: 20px 0px; background: var(--bg);} .chat-typing .send-icon{width: 56px; height: 56px;} .chat-typing input{border-radius: 30px; width: 94%;} .inner-page-title h2 span{color: var(--primary);} .quiz-title{display: flex; justify-content: space-between; align-items: center;} .quiz-title button{border: 1px solid var(--font-secondary); font-size: var(--font-size-20); color: var(--font-secondary); padding: 6px 20px; width: 100%; max-width: 230px;} .quiz-section{display: flex; flex-direction: column; gap: 30px;} .quiz-time{display: flex; gap: 40px; align-items: center; justify-content: space-between;} .question-count{height: 50px; border-radius: 30px; padding: 6px 20px; font-size: var(--font-size-20); color: var(--primary); background: var(--light-green); display: flex; align-items: center;} .timer-wrapper {position: relative;width: 80px;height: 80px;} .progress-ring { transform: rotate(-90deg);} .ring-bg { fill: none; stroke: var(--primary-opacity-11); stroke-width: 2;} .ring { fill: none; stroke: var(--primary); stroke-width: 2; stroke-dasharray: 213.63; /* 2πr where r = 54 */ stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear;} .time-text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--font-size-24); font-weight: bold;} .quiz-question{display: flex; gap: 80px; } .quiz-question-box{flex: 1; justify-content: center; text-align: center; display: flex; flex-direction: column; gap: var(--gap-20); min-height: 220px;} .quiz-question-box p{font-size: var(--font-size-20);} .quiz-answer{flex: 1; display: flex; flex-direction: column; gap: var(--gap-20);} .quiz-answer-button{display: flex; gap: var(--gap-20); align-items: center;} .success-modal{z-index: 2222; background: var(--bg-white-90);} .success-modal .modal-content{border: var(--stroke-primary); background: var(--bg-white); border-radius: var(--border-radius); padding: var(--pad-20);} .success-modal .modal-header{justify-content: center; border: none; padding: 0px; margin-bottom: 20px;} .success-modal .modal-footer{justify-content: center; border: none; padding-bottom: 0px;} .success-modal .btn-primary{max-width: 100%;} .success-modal .modal-dialog-scrollable .modal-body{padding-left: 20px;} .quiz-success{display: flex; flex-direction: column; gap: var(--gap-20); align-items: center;} .quiz-success-img{position: relative;} .quiz-success-img img{position: relative; max-width: 250px;} .quiz-success-img .circle-seven, .quiz-success-img .circle-13{width: 160px; height: 160px; top: 35%;} .quiz-content{position: relative; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; width: 100%;} .quiz-content p{font-size: var(--font-size-20); color: var(--font-secondary); margin: 0px;} .quiz-content button{margin-top: 20px;} .circle-14{ background: var(--gradiant-rose); width: 160px; height: 160px; position: absolute; transform: translate(-50%); left: 40%; border-radius: 50%; filter: blur(40px); top: 15%;} .circle-15{ background: var(--gradiant-violet); width: 160px; height: 160px; position: absolute; transform: translate(-50%); left: 60%; border-radius: 50%; filter: blur(40px); top: 15%;} .quiz-wrong-img img{max-width: 200px; top: 20px;} .quiz-score-title{display: flex; flex-direction: column; gap: 30px;} .quiz-score-title h2{color: var(--primary);} .quiz-time-box{display: flex; flex-direction: column; gap: 10px; text-align: center; background: var(--bg-white-10); border:1px solid var(--brd-white); padding: 20px 40px; border-radius: var(--border-radius);} .quiz-time-box h5{color: var(--font-secondary);} .quiz-numbers{display: flex; align-items: center; gap: 15px; flex-wrap: wrap; justify-content: center;} .number-circle{width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--bg-white); border: var(--stroke-primary); font-size: var(--font-size-20); color: var(--font-secondary); font-weight: var(--font-600);} .number-circle.selected{border-color: var(--primary); -webkit-box-shadow: 2px 2px 2px 0 var(--bg-light); box-shadow: 2px 2px 2px 0 var(--bg-light);} .number-circle.wright{color: var(--green);} .number-circle.wrong{color: var(--red);} .quiz-score-details h2{color: var(--font-colour);} .quiz-score-details .quiz-question{flex-direction: column; gap: 30px;} .quiz-options{display: flex; gap: var(--gap-20); width: 100%; align-items: center;} .quiz-options .btn{width: 100%; flex: 2; border: var(--stroke-primary); font-size: var(--font-size-20); color: var(--font-secondary); font-weight: var(--font-600); display: flex; justify-content: center; align-items: center;} .quiz-score-details .quiz-question-box{flex: unset; width: 100%;} .quiz-option-list{display: flex; flex-direction: column; gap: var(--gap-20);} .quiz-options.wright .btn, .saheeh{border-color: var(--green); background: var(--green-opacity-11); color: var(--green);} .quiz-options.wrong .btn, .qatah{border-color: var(--red); background: var(--red-opacity-11); color: var(--red);} .quiz-options.wright h5{color: var(--green);} .clr-wrong{color: var(--red) !important;} .subject-free-trail-content{display: flex; justify-content: space-between; align-items: center; width: 100%;} .subscribe-subject-title{display: flex; flex-direction: column; gap: var(--gap-20);} .subscribe-subject-title h4{color: var(--font-secondary); font-weight: 100;} .change-number{display: flex; justify-content: space-between;} .change-number strong{color: var(--primary);} .input select option:checked, .input select option:hover { background-color: var(--primary);} .timeline-empty{margin: 30px auto; text-align: center; display: flex; flex-direction: column; gap: 30px; align-items: center;} .timeline-empty-img{position: relative;} .timeline-empty-img img{position: relative; max-width: 260px;} .timeline-empty-img .circle-seven, .timeline-empty-img .circle-eight, .live-class-empty-img .circle-seven, .live-class-empty-img .circle-eight{width: 180px; height: 180px; top: 30%; filter: blur(45px);} .course-structure .video-content-tab{padding-bottom: 1px;} .course-structure .video-content-tab .dp-tabs{ justify-content: center; } #countdown{width: 40px; height: 40px; background: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white);} .circle-1 { width: 90px; height: 90px; background: var(--gradiant-main); border-radius: 50%; filter: blur(35px); position: absolute;} .circle-2{width: 90px; height: 90px; background: var(--gradiant-second); border-radius: 50%; filter: blur(25px);} .quiz-answer .btn-second.active{background: var(--primary-opacity-11);} .quiz-next-prev{display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 20px;} .quiz-next-prev button{width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: var(--stroke-primary); border-radius: 50%; background: var(--bg-white); font-size: var(--font-size-18); color: var(--font-colour);} .quiz-next-prev button:disabled{color: var(--font-secondary);} .cart-title{display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;} .cart-title h4{display: flex; gap: 8px; align-items: center; font-weight: 300; color: var(--font-secondary);} .cart-title h4 i{color: var(--font-colour);} .cart-container{display: flex; justify-content: space-between; gap: 30px;} .cart-item-box{ padding: var(--pad-20); border-radius: var(--border-radius); border: var(--stroke-primary); display: flex; justify-content: space-between; background: var(--bg-white);} .cart-remove{width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--bg-light);} .cart-image img{max-height: 70px;} .cart-items{display: flex; align-items: center; gap: 10px;} .cart-content{display: flex; flex-direction: column; gap: 10px;} .cart-content h5{color: var(--font-secondary);} .cart-content h3{color: var(--font-colour); font-weight: var(--font-900);} .cart-content h4{color: var(--font-secondary); font-weight: 300; display: flex; gap: 10px; align-items: center;} .cart-content h4 span{color: var(--primary);} .cart-items-section{flex: 2; display: flex; flex-direction: column; gap: var(--gap-20);} .monthly{display: flex; height: 34px; border-radius:30px; align-items: center; gap: 8px; background: var(--shape-secondary); color: var(--blue); font-weight: var(--font-600); font-size: var(--font-size-20); padding: 5px 10px; cursor: pointer;} .p-50{padding: 50px 0px;} .change-type{display: flex; gap: var(--gap-20); justify-content: center; padding: 30px;} .cart-price-box {padding: 30px; border: var(--stroke-primary); border-radius: 30px; flex-direction: column; gap: 30px; display: flex; position: sticky; top: 90px; z-index: 1; background: var(--bg-white);} .discount-area { display: flex; flex-direction: column; gap: 12px;} .discount-area h5 { font-weight: var(--font-900);} .discount-area h5 span {color: var(--primary);} .discount-input {position: relative;} .discount-input input { border: var(--stroke-primary); border-radius: 10px; padding: 8px 60px; width: 100%; height: 56px; font-size: var(--font-size-18); background: var(--bg-white); color: var(--font-colour);} input::placeholder{color: var(--font-secondary);} .tag-ico { width: 20px; height: 20px; background: var(--tag-ico); background-size: cover; position: absolute; top: 50%; left: 92%; transform: translate(-50%, -50%);} .activation { font-size: var(--font-size-18); color: var(--primary); font-weight: var(--font-600); cursor: pointer; position: absolute; top: 50%; left: 8%; transform: translate(-50%, -50%);} .full-category { display: flex; width: 100%; border-radius: 30px; height: 42px; align-items: center; gap: 8px; padding: 8px 20px; background: var(--gradiant-blue); border: 1px solid var(--primary-opacity-11); color: var(--white); margin-top: 15px;} .full-category h6 { font-size: var(--font-size-18);} .price-area {display: flex;flex-direction: column;gap: 24px;} .cart-price-section { flex: 1;position: relative;} .subject-price { display: flex; justify-content: space-between; color: var(--font-secondary);} .discount-price { display: flex; justify-content: space-between; color: var(--red);} .total-price { display: flex; justify-content: space-between;} .price-area h5 { font-weight: var(--font-900);} .cart-price-section .circle-1 { position: absolute; width: 350px; height: 250px; top: 80%; left: 50%;transform: translate(-50%, -50%); filter: blur(100px); background: var(--gradiant2);} .cart-add-pop .modal-dialog{width: 100%; max-width: 950px;} .cart-add-pop .modal-body{max-height: inherit; overflow: visible;} .subject-add-container .dp-tabs{margin-bottom: 20px;} .cart-add-pop .modal-header{padding-bottom: 0px;} .popup-subject-conainer{display: flex; flex-wrap: nowrap; gap: 10px; overflow: hidden;} .subject-box h5{color: var(--font-secondary); margin-top: 12px; color: var(--font-secondary);} .subject-box h5 span{color: var(--primary);} .subscribe .subject-img{filter: grayscale(100%);} .subject-add-container .subject-box{cursor: pointer;} .subscribe.select .subject-img, .subscribe.select img{filter: none;} .subscribe.select{border-color: var(--blue); background: var(--shape-secondary);} .register-icon img{position: relative; max-height: 130px;} .non-register{display: flex; flex-direction: column; gap: 40px; align-items: center; width: 100%; padding: 40px 20px 20px;} .non-register-content{display: flex; flex-direction: column; gap: var(--gap-20); width: 100%; align-items: center; position: relative; text-align: center;} .register-icon{position: relative;} .circle-green{ width: 160px; height: 160px; background: var(--green-gradiant); border-radius: 50%; filter: blur(35px); position: absolute;} .register-icon .circle-1{width: 160px; height: 160px; right: -50px; top: 20%;} .non-register-content a{display: block; width: 100%;} .cart-empty{display: flex; flex-direction: column; gap: 40px; align-items: center;} .cart-empty-img{position: relative;} .cart-empty-img img{position: relative; max-width: 300px;} .cart-empty-content{display: flex; gap: var(--gap-20); width: 100%; max-width: 720px; flex-direction: column; text-align: center;} .cart-empty-content h3{color: var(--font-colour); font-weight: var(--font-900);} .cart-empty-img .circle-1, .cart-empty-img .circle-2{position: absolute; width: 205px; height: 198px; top: 25%; filter: blur(50px);} .cart-empty-img .circle-1{right: -10px;} .cart-empty-img .circle-2{left: -10px;} .cart-empty-content h4{color: var(--font-secondary); font-weight: 100;} .circle-rose{position: absolute; width: 205px; height: 198px; filter: blur(60px); background: var(--gradiant-rose); left: -30px; top: -10px;} .circle-violet{position: absolute; width: 205px; height: 198px; filter: blur(60px); background: var(--gradiant-violet); right: -30px; top: -10px;} .failed .cart-empty-img img{max-width: 240px;} .failed{padding-top: 40px;} .liveclass-details-title{display: flex; flex-direction: column; gap: 30px; width: 100%; max-width: 510px; align-items: center;} .semester-box{background: var(--bg-white-10); padding: var(--pad-20); border-radius: 50px; border: 1px solid var(--brd-white); display: flex; gap: 20px; justify-content: center; align-items: center; cursor: pointer; color: var(--secondary);} .semester-box h5{font-size: var(--font-size-18);} .sign-tabs .dp-tabs{ margin-bottom: 20px; justify-content: start;} .user-ico{width: 22px; height: 22px; background: var(--user-ico); background-size: cover;} .login-user{position: relative;} .login-user input{padding-right: 50px;} .login-user .user-ico, .login-user .lock-ico{position: absolute; top: 50%; left: 96%; transform: translate(-50%, -50%);} .eye-ico{width: 22px; height: 22px; background: var(--eye-ico); background-size: cover;} .eye-slash-ico{width: 22px; height: 22px; background: var(--eyeSlash-ico); background-size: cover;} .login-user .eye-ico, .login-user .eye-slash-ico{position: absolute; top: 50%; left:4%; transform: translate(-50%, -50%); cursor: pointer;} .cart-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--blue); border-radius: 50%; cursor: pointer; position: relative;} .cart-icon sup { position: absolute; font-size: var(--font-size-16); top: 0; left: -5px; width: 20px; height: 20px; display: flex; align-items: center; background: var(--secondary); border-radius: 50%; justify-content: center; color: var(--white);} .liked{background: var(--primary);} .liked img{filter: invert(1) brightness(100);} .calendar-day { display: flex; align-items: center; justify-content: center; text-align: center; width: 34px; height: 34px; cursor: pointer;} .student-chat-icon{flex-shrink: 0;} .join-btn{max-width: 90px; cursor: pointer; position: absolute; left: 15%; top: 50%; transform: translate(-50%, -50%);} .today-class-box h4{display: flex; align-items: center; gap: 8px;} .today-class-box h4 img{max-width: 24px;} .student-name{display: flex; align-items: center; gap: 16px;} .student-class{display: flex; flex-direction: column; gap: 8px;} .student-class h6{font-size: var(--font-size-16); color: var(--font-secondary);} .student-img{position: relative;} .student-img img{position: relative; width: 60px; height: 60px; object-fit: cover; border-radius: 50%;} .student-name .circle-five, .student-name .circle-six{width: 30px; height: 35px; filter: blur(10px); right: 0%; top: 40%;} .student-class h5{font-weight: var(--font-900);} .profile-name h5{display: flex; justify-content: space-between; gap: var(--gap-20);} .profile-name h5 span{color: var(--primary);} .profile-delete h5{color: var(--font-secondary); opacity: 0.2; cursor: pointer;} .profile-box{display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;} .profile-tile{display: flex; align-items: center; padding: 10px; border: var(--stroke-primary); border-radius: var(--border-radius); background: var(--bg-white); gap: 8px;} .profile-tile-img img{max-width: 50px;} .profile-tile-content{display: flex; flex-direction: column; gap: 6px;} .profile-tile-content h5{font-size: var(--font-size-18); color: var(--font-secondary);} .profile-tile-content h6{font-size: var(--font-size-18); font-weight: 700;} .dir-ltr{direction: ltr;} .leaderboard-ico{background: var(--leaderboard); width: 60%; height: 400px; background-repeat: no-repeat; background-size: cover; background-position: center bottom; position: relative;} .leader-toppers{position: relative; width: 100%; height: 400px; display: flex; justify-content: center; text-align: center;} .leader-first{display: flex; flex-direction: column; gap: 10px; align-items: center; position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%); z-index: 1;} .leader-avatar{width: 100px; height: 100px; background: var(--bg-white); border-radius: 50%; padding: 15px; display: flex; align-items: center; justify-content: center;} .crown{position: absolute; right: -15px; top: -15px; max-width: 60px;} .leader-toppers h5{color: var(--secondary);} .leader-second{display: flex; flex-direction: column; gap: 10px; align-items: center; position: absolute; top: 35%; left: 30%; transform: translate(-50%, -50%); z-index: 1;} .leader-toppers img{border-radius: 50%; width: 100%; height: 100%; object-fit: cover;} .leader-third{display: flex; flex-direction: column; gap: 10px; align-items: center; position: absolute; top: 43%; left: 70%; transform: translate(-50%, -50%); z-index: 1;} .leaderboard{display: flex; flex-direction: column; gap: var(--gap-20);} .leader-list{display: flex; align-items: center; justify-content: space-between; padding: var(--pad-20);} .rank{font-size: var(--font-size-20); font-weight: 700; color: var(--primary);} .leader-img{width: 80px; height: 80px; border-radius: 50%; border: var(--stroke-primary); background: var(--bg); display: flex; align-items: center; justify-content: center;} .leader-img img{width: 45px; height: 45px; border-radius: 50%; object-fit: cover;} .leader-name{display: flex; align-items: center; gap: var(--gap-20);} .leader-point{ font-size: var(--font-size-20); color: var(--secondary);} .leader-list-box{display: flex; flex-direction: column; gap: var(--gap-20); border: var(--stroke-primary); padding: 20px 0px; border-radius: var(--border-radius);} .line-1{border-bottom: var(--stroke-primary);} .leader-name.active h5{ color: var(--primary);} .notification-title{display: flex; align-items: center; justify-content: space-between;} .tick-ico{width: 24px; height: 24px; background: var(--tick); background-size: cover;} .notification-title h5{display: flex; align-items: center; gap: 6px; color: var(--font-secondary);} .notification{display: flex; flex-direction: column; gap: var(--gap-20); padding: 40px 0px;} .notification-date{color: var(--font-secondary);} .notification-icon{width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--light-green); position: relative; flex-shrink: 0;} .notification-icon img{max-width: 24px;} .notification-box{display: flex; align-items: center; justify-content: space-between; padding: var(--pad-20); border-radius: var(--border-radius); border: var(--stroke-primary);} .notification-link{color: var(--primary);} .notification-content{display: flex; align-items: center; gap: var(--gap-20);} .notification-description{display: flex; flex-direction: column; gap: 8px;} .notification-description p{color: var(--font-secondary); font-size: var(--font-size-16);} .unread{background: var(--gradiant1);} .unread .notification-description h5{color: var(--primary);} .unread .notification-icon::before{content: "\f111"; font-weight: 900; font-family: "Font Awesome 6 Free"; font-size: 8px; color: var(--primary); position: absolute; right: 5px; top: 5px;} .new-Register{margin-top: 20px; text-align: center;} .new-Register h5 a{color: var(--secondary);} .video-rating-icon { display: flex; justify-content: center; gap: 10px; align-items: center;} .video-rating-icon img { filter: grayscale(100); cursor: pointer;} .video-rating-icon img.rated { filter: grayscale(0);} .video-comment{display: flex; flex-direction: column; gap: 10px; width: 100%;} .video-comment h5{text-align: center; color: var(--font-secondary);} .video-comment .select-scrollable{margin: 0px;} .video-comment .select-scrollable .btn{white-space: nowrap;} .forgot-password{margin-top: 20px; text-align: center; color: var(--font-secondary);} .forgot-password h5{cursor: pointer;} .printed-notes-btn{font-size: var(--font-size-20); font-weight: var(--font-900); background: var(--white); color: var(--primary); padding: 8px 20px; margin-bottom: 20px; border-radius: 30px; display: inline-flex; height: 56px; align-items: center;} .terms-accept { display: flex; gap: 10px; margin-bottom: 30px; align-items: center;} .terms-accept h5 {font-weight: var(--font-900);} .terms-accept h5 a { color: var(--primary); text-decoration: underline;} .check-box-ico i { display: none;} .check-box-ico { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--checkBox-ico); background-size: cover; cursor: pointer; color: var(--white);} .ask-back i{display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; color: var(--font-colour); background: var(--bg-light);} .ask-back{cursor: pointer; display: none;} input:-webkit-autofill, input:-internal-autofill-selected { -webkit-box-shadow: 0 0 0 1000px var(--bg-white) inset !important; box-shadow: 0 0 0 1000px var(--bg-white) inset !important; background-color: var(--bg-white) !important; -webkit-text-fill-color: var(--font-colour) !important;} .spedia-id{display: flex; flex-direction: column; gap: var(--gap-10); width: 100%;} .spedia-id label{font-size: var(--font-size-18);} .spediaCode{display: flex; height: 56px; border-radius: 10px; border: var(--stroke-primary); align-items: center; justify-content: center; padding: 10px 30px; flex-shrink: 0; font-family: var(--secondary-font); font-size: var(--font-size-18);} .id-number{display: flex; align-items: center; gap: var(--gap-10); direction: ltr;} .id-number input{width: 100%; height: 56px; border: var(--stroke-primary); border-radius: 10px; background: var(--bg-white); color: var(--font-colour); padding: 6px 12px;} .student-container{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-20); margin-top: 40px;} .student-box{border: var(--stroke-primary); border-radius: 10px; height: 200px; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: var(--gap-10); text-align: center;} .student-box .student-img img{width: 100px; height: 100px;} .student-box .circle-five{top: 40%; right: auto; left: 20%;} .student-box .circle-six{top: 40%; } .home-ico{ width: 24px; height: 24px; background: var(--home-ico); background-size: cover;} .myCourse-ico{ width: 24px; height: 24px; background: var(--myCourse-ico); background-size: cover;} .privateClass-ico{ width: 24px; height: 24px; background: var(--privateClass-ico); background-size: cover;} .askTeacher-ico{ width: 24px; height: 24px; background: var(--askTeacher-ico); background-size: cover;} .mobile-menu{display: none; position: fixed; left: 0; bottom: 10px; right: 0; z-index: 222; padding: 10px; background: var(--bg-white-70); border-radius: 30px; width: calc(100% - 32px); margin: 0 auto;} .mobile-container{display: flex; align-items: center;} .menu-items{flex: 1; display: flex; flex-direction: column; gap: 5px; align-items: center;} .menu-items.active{color: var(--primary);} .menu-items.active div{filter: none !important;} .menu-items.active .home-ico{background: var(--home-ico-active);} .menu-items.active .myCourse-ico{background: var(--myCourse-ico-active);} .menu-items.active .privateClass-ico{background: var(--privateClass-ico-active);} .menu-items.active .askTeacher-ico{background: var(--askTeacher-ico-active);}