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;}
.scroll-top {position: fixed; bottom: 15px; left: 15px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
background: var(--secondary); border-radius: 50%; cursor: pointer;}
footer{  padding: 100px 0px 70px;  position: relative; background: var(--bg-white);  overflow: hidden; top: -1px;}
.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(--gradiant1); width: 300px; height: 300px; filter: blur(100px); position: absolute; right: 100px; bottom: -300px;}
.circle-four { background: var(--gradiant1); width: 300px; height: 300px; filter: blur(200px); position: absolute; left: 200px; bottom: -300px;}
.main-section{background: var(--light-green); position: relative;}
.header-section { display: flex; align-items: center; justify-content: space-between;}
.btn1{border: none; background: none; border-radius: var(--border-radius30); height: 48px;}
.btn-gradiant{font-size: var(--font-size-18); font-weight: var(--font-600); display: flex; gap: 5px; justify-content: center;
background: var(--gradiant-button); align-items: center; padding: 6px 14px; color: var(--white);}
.top-left-section{ display: flex; align-items: center; gap: 12px;} 
.top-language-btn { display: flex; gap: 10px; align-items: center; background: var(--bg-light-dark); border-radius: var(--border-radius30); padding: 5px 8px;
height: 48px;}
.top-language-btn button{ border: 1px solid var(--white-8); border-radius: var(--border-radius30); padding: 4px 12px;  background: none;  color: var(--white);}
.cart-icon{width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: var(--stroke-primary);
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);}
.login-btn button{border: var(--stroke-primary); border-radius: var(--border-radius30); padding: 5px 15px; font-size: var(--font-size-18);
color: var(--secondary);}
.more-icon{width: 41px; height: 41px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center;
display: none;}
.menu-icon, .close-icon { display: none; transition: all 0.3s ease-in-out;}
.active-icon { display: block;}
.light-shape{background: var( --light-shape); background-size: cover; width: 100%; height: 106px;}
.banner-section{display: flex; flex-direction: column; align-items: center; padding-top: 80px;}
.hero-content{display: flex; flex-direction: column; gap: 25px; width: 100%; max-width: 700px; text-align: center; align-items: center; 
position: relative; top: -90px;}
.hero-content h2{color: var(--font-secondary); font-weight: var(--font-600); font-size: var(--font-size-30);}
.hero-content h1{font-size: 60px; max-width: 600px;}
.hero-content h1 span{color: var(--dark-green);}
.hero-content .btn1{height: 70px; font-size: var(--font-size-28); padding: 5px 20px; border: 1px solid transparent;}
.hero-content .btn1:hover{background: var(--white); color: var(--primary); border-color: var(--primary);}
.hero{position: relative; width: 100%; max-width: 820px; display: flex; flex-direction: column; align-items: center;}
.hero-student-img img{height: 500px; position: relative;}
.rank-area{text-align: center; position: absolute; left: 0;}
.rank-area h2{ font-size: 76px; font-weight: 100;}
.rank-area h1{font-size: 150px; position: relative; top: -50px; }
.crown-icon img{max-width: 140px; position: relative; top: -20px; left: 20px;}
.circle-1{width: 90px; height: 90px; background: var(--gradiant-green); border-radius: 50%; filter: blur(35px); position: absolute;}
.circle-2{width: 90px; height: 90px; background: var(--gradiant2); border-radius: 50%; filter: blur(25px);}
.crown-bg{display: flex; align-items: center; position: absolute;}
.crown-icon{position: absolute; left: 0; top: 38%; z-index: 1;}
.hero-name-box{background: var(--gradiant-box); border-radius: 50px; padding: 32px; width: 100%; max-width: 400px; display: flex;
flex-direction: column; gap: 10px; height: 162px; justify-content: center; position: absolute; right: 2%; top: 40%;}
.hero-name-box h4{font-weight: var(--font-600); position: relative; z-index: 1;}
.hero-name-box h2{font-size: 32px; color: var(--font-colour); position: relative; z-index: 1; max-width: 210px;}
.cap-icon img{max-width: 160px; position: relative; top: -20px; left: 50px;}
.cap-icon{position: absolute; top:33%; right: 20px; z-index: 1;}
.hero-gradiant{position: relative; top: -200px; width: 100%; max-width: 900px;}
.hero-gradiant .circle-2{width: 528px; height: 266px; position: absolute; left:0;}
.hero-gradiant .circle-1{width: 631px; height: 285px; position: absolute; right:0;}
.slide{pointer-events: none; transition: opacity 0.3s ease; opacity: 0; position: absolute; width: 100%; height: 100%;}
.slide.active{opacity: 1; pointer-events: auto;}
.slider{position: relative; width: 100%; height: 500px; margin: 0 auto; overflow: hidden;}
.hero-student-img{text-align: center;}
.slide img{animation: bounceInUp 0.8s ease;}
.pt-50{padding-top: 50px;}
.d-flex-justify-space{display: flex; align-items: center; justify-content: space-between;}
.story-count{width: 100%; max-width: 900px;}
.story-title{font-size: 50px; width: 100%; max-width: 350px; font-weight: var(--font-900);}
.story-title span{color: var(--primary);}
.count-box{display: flex; flex: 1; gap: 30px; align-items: center; justify-content: end;}
.count-box h4{color: var(--font-secondary); font-weight: 100;}
.our-teachers{text-align: center;}
.our-teachers h1{margin-bottom: 18px;}
.our-teachers h1 span{color: var(--primary);}
.pt-80{padding-top: 80px;}
.teachers-box{border-radius: 40px; padding: 40px 100px; display: flex; justify-content: space-between; align-items: center; overflow: hidden;
background: var(--light-green); position: relative; height: 280px;}
.teachers-slide{position: relative;}
.teacher-name{display: flex; flex-direction: column; gap: var(--gap-20); position: relative;}
.teacher-name h3{color: var(--primary); max-width: 400px;}
.teachers-box .circle-2{width: 140px; height: 195px; position: absolute; right: -100px; bottom: 0px;}
.teachers-box .circle-2.second{right: auto; left: -50px; bottom: auto; top: -50px;}
.play-icon{width: 60px; height: 60px;  border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; background: var(--bg-white);
z-index: 1; cursor: pointer;}
.play-icon:before {content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); display: block;
width: 80px; height: 80px;background: var(--bg-white);border-radius: 50%; z-index: -1;
-webkit-animation: pulse-border 1500ms ease-out infinite; animation: pulse-border 1500ms ease-out infinite;}
.teacher-video h3{font-weight: 100; color: var(--font-colour); max-width: 220px; text-align: left;}
.teacher-video{display: flex; align-items: center; gap: 30px; cursor: pointer;}
.spedia-logo{display: flex; align-items: center; justify-content: center; width: 94px; height: 94px; border-radius: 50%; 
background: var(--bg-white); position: absolute; right: 100px; z-index: 1; top: -18%;}
.spedia-logo img{max-width: 62px;}
.teacher-img img{height: 436px;}
.teacher-img{position: absolute; left: 50%; transform: translate(-50%); z-index: 1; bottom: 0;}
.basic-modal { z-index: 22222; background: var(--bg-white-90);}
.teacher-subjects{position: absolute; bottom: -90px; left: 34%; transform: translate(-50%); z-index: 11;}
.teacher-subjects img{max-height: 160px; position: relative; top: -25px; left: 25px;}
.basic-modal .modal-header{justify-content: center; border: none;}
.basic-modal .modal-footer{border-color: var(--bg-light);}
.basic-modal .modal-body video{width: 100%;}
.modal-close-ico { cursor: pointer;  width: 40px; height: 40px; display: flex; align-items: center;
 justify-content: center; background: var(--bg-light);  border-radius: 50%; z-index: 1;}
.teachers-slider.owl-carousel .owl-stage-outer{ overflow: visible;}
.teachers-slider{ margin-top: 50px; padding-top: 150px; overflow: hidden; }
.white-line{position: absolute; background: var(--bg-white); bottom: -40px; height: 40px; left: 0; right: 0; z-index: 2;}
.basic-modal .modal-content{background: var(--bg-white); border-color: var(--bg-light); overflow: hidden; border-radius: var(--border-radius);}
.basic-modal .modal-content .crown-bg{left: 0px;}
.basic-modal .modal-content .modal-title{color: var(--font-colour); font-weight: var(--font-900);}
.notes-area{background: var(--light-green); padding: 30px 0px 60px; position: relative; top: -1px;}
.notes-img{text-align: center; max-width: 500px; position: relative; margin: 0 auto;}
.notes-img img{max-width: 500px;}
.notes-content{display: flex; flex-direction: column; gap: 16px; padding: 0 20px;}
.notes-content .btn-second{margin-top: 20px;}
.btn-second{height: 70px; font-size: var(--font-size-28); padding: 5px 35px; border: 1px solid transparent;  border-radius: 50px;}
.btn-second:hover{background: var(--white); color: var(--primary); border-color: var(--primary);}
.notes-content h1 span{color: var(--primary);}
.flipY{transform: scaleY(-1);}
.mt-60{margin-top: 60px;}
.ps-sticky{position: sticky; top:0px;}
.green-shape{background: var( --green-shape); background-size: cover; width: 100%; height: 106px;}
.btn-third{background: var(--white); color: var(--secondary); font-weight: var(--font-600);}
.btn-third:hover{background: var(--gradiant-button); color: var(--white);}
.live-area{background: var(--light-blue); padding: 60px 0px 90px; position: relative; top: -1px;}
.live-area .notes-content h1, .live-area .notes-content h3{color: var(--white);}
.live-img{max-width: 500px; position: relative; width: 100%;}
.live-image{text-align: center; position: relative;}
.live-image .hero-gradiant{position: absolute; top: 45%; bottom: auto;}
.live-subject-icon img{max-width: 180px; position: relative; z-index: 1;}
.live-subject-icon{position: absolute; left: 20px; top: -50px;}
.live-student-icon{position: absolute; left: 100px; bottom: 100px;}
.live-teacher-icon{position: absolute; right: 100px; top: 100px;}
.private-img .circle-1{width: 462px; height: 462px; right: 0px; filter: blur(150px);}
.private-img .circle-2{width: 462px; height: 462px; left: 0px; filter: blur(150px); position: absolute;}
.private-img img{position: relative; max-width: 500px; width: 100%;}
.private-img{position: relative; text-align: center;}
.ask-teacher{background: var(--bg-white); padding: 80px 0px; position: relative; top: -1px;}
.white-shape{background: var( --white-shape); background-size: cover; width: 100%; height: 106px;}
.ask-teacher-img{text-align: center; max-width: 450px; margin: 0 auto; position: relative;}
.ask-teacher-icon{position: absolute; top: 30%; left: -55px;}
.ask-teacher-icon img{max-width: 200px; position: relative;}
.ask-teacher-icon .crown-bg{left: 70px; top: 60px;}
.teacher-icon{left: auto; right: 0;}
.student-testimonials{position: relative; background: var(--bg-white); top: -1px;}
.student-testimonials h1 span{color: var(--primary);}
.student-testimonials h1{margin-bottom: 15px;}
.testimonial-box{border: 2px solid var(--white);  background: var(--bg-white-50); border-radius: 30px; backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); display: flex; gap: 30px; overflow: hidden; align-items: center; position: relative; }
.student-content{display: flex; flex-direction: column; gap: var(--gap-20); padding-left: 40px; flex: 1;}
.student-content h4{color: var(--primary);}
.student-content h5{font-size: var(--font-size-24); font-weight: var(--font-600); height: 90px; display: -webkit-box; 
-webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.student-content h6{font-size: var(--font-size-20); color: var(--font-secondary); font-weight: var(--font-900);}
.testimonial-area{position: relative; margin-top: 60px; padding-bottom: 40px;}
.student-img{ border-radius: 30px; padding-top: 60px; position: relative; overflow: hidden; flex: 1; }
.student-img img{max-height: 300px; position: relative;}
.student-bgm{display: flex; align-items: center; position: absolute; right: 10%; width: 100%; max-width: 500px; height: 360px; top: 0;}
.student-bgm .circle-1, .student-bgm .circle-2{width: 280px; height: 280px;}
.student-bgm .circle-1{ right: 0px; filter: blur(60px); top: 0;}
.student-bgm .circle-2{left: 0px; position: absolute; filter: blur(60px); top: 0; }
.student-percentage{text-align: center; font-size: 88px; font-weight: var(--font-900); position: absolute; left: 50%; transform: translate(-50%);
top: -30px;}
.bg-video {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0.4; }
.student-bgm2{right: auto; left: 0;}
.user-icon{display: none; cursor: pointer;}
.sidemenu-box { border:  1px solid var(--white); border-radius: var(--border-radius); margin: 20px 0px;}
.country-btn{width: 48px; height: 48px; border: 2px solid var(--white); border-radius: 50%; display: flex; align-items: center; 
overflow: hidden; cursor: pointer;}
.country-btn img{width: 44px; height: 44px; object-fit: cover;}
.country-select { display: flex; justify-content: space-between; align-items: center; width: 100%; cursor: pointer; position: relative;
border-bottom: 1px solid var(--bg-light);  padding-bottom: 16px; padding-top: 16px; z-index: 1;}
.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: 1px solid var(--bg-light); 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 { background: var(--secondary);}
.country-select.select .country-select-icon i { display: block;}
.country-select:last-child { border: none; padding-bottom: 0px;}
.country-name img { width: 30px; height: 30px;}
.modal-footer .btn-gradiant{width: 100%;}
.inner-title{display: flex; flex-direction: column; gap: var(--gap-20); align-items: center; padding: 80px 20px 40px; text-align: center;}
.inner-title h1{font-size: 60px;}
.category-title{position: relative;}
.category-title .cap-icon{left: 0px; right: auto; top: -50px;}
.category-box-contanier, .class-box-contanier{display: grid; gap: var(--gap-20); grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin-top: 40px;}
.category-box, .class-box{background: var(--light-f4fb); padding: 16px; border-radius: 20px; border: 1px solid var(--primary-opacity-11);
display: flex; align-items: center; justify-content: center; text-align: center; height: 300px; overflow: hidden; position: relative;}
.category{padding-bottom: 40px;}
.text-container{ position: relative; font-size: 60px; font-weight: var(--font-900); line-height: 65px;}
.text-stroke-back { position: absolute; top: 0; left: 0; color: transparent; -webkit-text-stroke: 14px var(--white); z-index: 1;}
.text-fill { position: relative; color: var(--primary); z-index: 2;}
.category-bgColours{position: absolute; transform: translate(-50%, -50%); top: 40%; left: 70%;}
.category-bgColours .circle-3{left: 50px;}
.circle-3{width: 110px; height: 110px; background: var(--gradiant-green); border-radius: 50%; filter: blur(30px); position: absolute;}
.circle-4{width: 110px; height: 110px; background: var(--gradiant2); border-radius: 50%; filter: blur(25px);}
.category-box:nth-child(2) .category-bgColours{ top: 80%; left: 0;}
.category-box:nth-child(3) .category-bgColours{ top: 10%; left: 0;}
.category-box:nth-child(4) .category-bgColours{ top: 5%; left: 40%;}
.private-box{position: relative; background: var(--light-green); display: flex; flex-direction: column; border-radius: 40px; align-items: center;}
.private-content{width: 100%; max-width: 630px; display: flex; flex-direction: column; gap: var(--gap-20); position: relative;}
.private-content h4{font-weight: 300; color: var(--font-secondary);}
.private-icon img{width: 100%; max-width: 400px;}
.private-icon{position: absolute; left: 60px; z-index: 1; bottom: -50px;}
.private-box-bg{position: absolute; left: 0; right: 0; top: 0; bottom: 0;}
.private-box-bg .circle-4{width: 150px; height: 200px; right: -100px; bottom: 0px; position: absolute; filter: blur(45px);}
.private-box-container{background: var(--light-green); border-radius: 40px;  height: 285px; display: flex; position: relative; padding: 30px 60px;
align-items: center; justify-content: space-between; overflow: hidden; width: 100%;}
.private-box-bg .circle-4.second{right: auto; left: 0px; bottom: auto; top: 0px;}
.class-box{height: 233px;}
.class-img{display: flex; flex-direction: column; gap: var(--gap-20); align-items: center; position: relative;}
.class-img img{max-height: 120px;}
.class-bgColours{position: absolute; left: 0; top: 0; bottom: 0; right: 0;}
.class-img h4{font-weight: var(--font-600);}
.class-bgColours .circle-4{position: absolute; top: 5%; right: -20%;}
.class-box:nth-child(2) .class-bgColours .circle-4{right: auto; left: -30%; top: 30%;}
.class-bgColours .circle-3{right: -40%; top: 5%;}
.class-box:nth-child(3) .class-bgColours .circle-4{right: auto; left: 50%; transform: translate(-50%, -50%);  top: -20%;}
.class-box:nth-child(4) .class-bgColours .circle-4{right: auto; left: -30%; }
.class-box:nth-child(5) .class-bgColours .circle-4{right: auto; left: -10%; top: -20%; }
.shop-tabs{border-bottom: 1px solid var(--bg-light); display: flex; gap: var(--gap-20); margin: 20px 0px 30px;}
.shop-tabs .nav-link{border: none; border-bottom: 2px solid transparent; padding: 20px 20px; font-size: var(--font-size-24);
color: var(--font-secondary);}
.shop-tabs .nav-link.active{border-color: var(--primary); color: var(--primary); font-weight: var(--font-900);}
.subject-box { text-align: center; border: 1px solid var(--bg-light); border-radius: 30px; padding: 30px 20px; margin-bottom: 30px;}
.subject-img img { max-height: 150px; position: relative; transition: 0.3s all ease-in-out;}
.circle-one {  background: var(--gradiant-green);  width: 150px;  height: 140px;  border-radius: 100%;  filter: blur(25px);
position: absolute; top: 10%; right: 10%;}
.circle-two {  background: var(--gradiant2);  width: 150px;  height: 140px;  border-radius: 100%;  filter: blur(25px);  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;}
.bundle-container .subject-box h4{font-size: var(--font-size-28);}
.bundle-container, .recorded-container{margin: 25px 0px; border-bottom: 1px solid var(--bg-light);}
.bundle-container .subject-img img{max-height: 230px;}
.liveclass-box { border: 1px solid var(--bg-light); border-radius: 30px; padding: var(--pad-20); background: var(--gradiant-box); position: relative;
margin-bottom: 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%);}
#bundle .bundle-container{margin: 0px; border: none;}
.liveClass-container{margin-top: 25px;}
.white-header header{background: var(--bg-white);}
.subject-details-bgm { border-top-left-radius: 50px; padding: 40px; display: flex; align-items: center; justify-content: space-evenly;
 background: var(--bg-light-blue); position: relative; overflow: hidden; border-top-right-radius: 50px; 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);
margin-top: 20px;}
.circle-seven { background: var(--gradiant-green); width: 300px; height: 300px; position: absolute; transform: translate(-50%); left: 50%;
border-radius: 50%; filter: blur(60px);}
.circle-eight { background: var(--gradiant2); width: 300px; height: 300px; position: absolute; transform: translate(-50%); left: 50%;
border-radius: 50%; filter: blur(60px); }
.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: 8px;}
.subject-details-title { text-align: center; width: 100%; position: relative;}
.subject-free-trail { display: flex; align-items: center; background: var(--gradiant-box); padding: 30px; border-radius: 15px;
border: var(--stroke-grey); width: 100%; max-width: 750px; gap: 50px; position: relative; z-index: 1;}
.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); font-weight: var(--font-900);}
.subject-free-trail-content { display: flex; justify-content: space-between; align-items: center; width: 100%;}
.subject-free-trail-content h4 { margin-bottom: 10px; color: var(--font-secondary);}
.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); margin-bottom: 30px; position: relative; z-index: 1;}
.course-structure {  padding: 30px 40px;  border: var(--stroke-grey);  border-radius: 50px;  margin-top: 10px;  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-18); 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-grey); 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-grey);
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: 387px; height: 320px; border-radius: 100%; background: var(--gradiant-green); filter: blur(100px); position: absolute;
left: 0; top:0;}
.circle-ten {width: 387px; height: 320px; border-radius: 100%; background: var(--gradiant-green); filter: blur(100px); position: absolute;
right: 0; bottom: 80px;}
.notes-structure-details {display: flex; justify-content: space-between; border-radius: var(--border-radius); border: var(--stroke-grey);
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); flex-shrink: 0;}
.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;}
.subject-details-price .btn1{height: 60px; width: 100%; font-size: var(--font-size-24); border: 1px solid transparent;}
.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: 1px solid transparent;}
.btn-primary:hover{background: none; border-color: var(--primary); color: var(--primary);}
.video-content-tab{overflow: hidden; padding-bottom: 1px;}
.video-content-tab .dp-tabs {flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
.dp-tabs { border-bottom: var(--stroke-grey); 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-grey);}
.dp-tabs .nav-link.active { background: none; color: var(--primary); font-weight: var(--font-900); border-color: var(--primary);}
.brd-primary{border-color: var(--primary);}
.subject-details-price .btn1:hover{background: var(--bg-white); color: var(--primary); border-color: var(--primary);}
.modal-backdrop{background: var(--bg-white-90);}
.add-cart-popup{display: flex; flex-direction: column; gap: 15px; align-items: center;  position: relative;}
.modal-close-ico{position: absolute; right: 15px; top: 15px;}
.subject-pop-img{position: relative; width: 100%; max-width: 350px; text-align: center;}
.subject-pop-img img{max-height: 170px; position: relative;}
.bg-colours{position: absolute; width: 100%;}
.bg-colours .circle-3, .bg-colours .circle-4{width: 180px; height: 180px; position: absolute;}
.bg-colours .circle-4{left: 30px;}
.bg-colours .circle-3{right: 30px;}
.subscription-box { padding: 15px; border: var(--stroke-grey); border-radius: var(--border-radius); position: relative;
background: var(--gradiant-box); display: flex; justify-content: space-between; cursor: pointer; width: 100%;}
.subscription-box h3 { color: var(--primary); display: flex; gap: 10px; align-items: center; font-size: 24px;}
.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;}
.button-not-active, .btn.disabled { background: var(--btn-not-active) !important; color: var(--white-50) !important; font-size: var(--font-size-24);
font-weight: var(--font-600); border: none !important; width: 100%; height: 60px; border-radius: 30px;}
.button-active { background: var(--primary) !important; color: var(--white) !important;}
.add-cart-popup h5 a{color: var(--secondary);}
.terms-conditions{padding: 30px 0px;}
.terms-conditions ul{display: flex; flex-direction: column; gap: 2px; position: relative;}
.terms-conditions ul li{font-size: var(--font-size-24); color: var(--font-secondary); list-style: disc;}
.private-class-img{position: relative; width: 100%; max-width: 400px;}
.private-class-img img{max-width: 300px; position: relative;}
.private-class-img .bg-colours .circle-3, .private-class-img .bg-colours .circle-4{width: 300px; height: 300px; filter: blur(70px);}
.private-class-img .bg-colours .circle-4{left: 0px;}
.private-class-img .bg-colours .circle-3{right: -20px;}
.private-container{position: relative; top: -30px;}
.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-grey); 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-grey); 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;}
.btn-four{border: var(--stroke-grey); border-radius: 30px; height: 56px; background: var(--bg-white); color: var(--font-secondary);
font-size: var(--font-size-20); padding: 5px 24px; font-weight: var(--font-600);}
.btn-four:hover, .btn-four.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);}
.select-scrollable{display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; margin: 20px 0px; overflow: hidden; width: 100%;}
.calendar { width: 100%; border: var(--stroke-grey); border-radius: var(--border-radius); overflow: hidden; background: var(--bg-white); 
margin: 20px 0px; padding: 0px 100px;}
.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: 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%;}
.select-class-box, .select-grade-box{display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; margin: 20px 0px;}
.private-class-form{position: relative; width: 100%; overflow: hidden;}
.calendar-day{display: flex; align-items: center; justify-content: center; text-align: center; width: 34px; height: 34px; 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);}
.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(--primary);}
.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;}
.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-grey); display: flex; justify-content: space-between;}
.cart-remove{width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer;
background: var(--grey-20);}
.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: var(--border-radius30); align-items: center; gap: 8px; background: var(--shape-secondary);
color: var(--blue2); font-weight: var(--font-600); font-size: var(--font-size-20); padding: 5px 10px;}
.p-50{padding: 50px 0px;}
.change-type{display: flex; gap: var(--gap-20); justify-content: center; padding: 30px;}
.basic-modal .modal-content .crown-bg .circle-1, .basic-modal .modal-content .crown-bg .circle-2{filter: blur(80px);}
.cart-price-box{ padding: 30px; border: var(--stroke-grey); border-radius: var(--border-radius30); 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-grey); border-radius: 10px; padding: 8px 60px; width: 100%; height: 56px; font-size: var(--font-size-18);}
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-bg); 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: 60%; left: 50%; transform: translate(-50%, -50%);
filter: blur(80px);}
.cart-add-pop .modal-dialog{width: 100%; max-width: 950px;}
.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(--blue2); background: var(--shape-secondary);}
.register-icon img{position: relative; max-height: 120px;}
.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;}
.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;}
.failed .cart-empty-img img{max-width: 240px;}
.failed{padding-top: 40px;}
.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;}
.min-hight { min-height: 47.5vh; display: flex; justify-content: center; align-items: 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;}
.sign-phone { display: flex; align-items: center; gap: 15px; margin-bottom: 30px;}
.sign-phone input { width: 80%;}
.select-country { width: 20%; border: var(--stroke-grey); 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%;}
.verification-input {display: flex; align-items: center; gap: 16px; margin-bottom: 30px;}
.verification-input input {  width: calc(100%/4); text-align: center; font-weight: var(--font-900);}
.otp-filled { border-color: var(--primary) !important;}
.cart-empty-content h5{ text-align: center; color: var(--secondary); margin-top: 30px; font-weight: var(--font-900); font-size: var(--font-size-24);}
#countdown{width: 40px; height: 40px; background: var(--secondary); border-radius: 50%; display: flex; align-items: center;
justify-content: center; color: var(--white);}
.liveclass-start {display: flex; align-items: center; justify-content: center; gap: 16px; padding: var(--pad-20); border-radius: 15px; background: var(--gradiant-box);
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-img); 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 .sylabus-content {flex: 2 0 0;padding: 12px;margin: 0px;width: 100%;}
.liveclass-subscribe-btn {flex: 1 0 0;}
.liveclass-sylabus .sylabus-content ul li { margin-bottom: 8px;}
.liveclass-subscribe-btn h3 {color: var(--white); font-weight: var(--font-900);}
.course-structure-count p {font-size: var(--font-size-18); color: var(--font-secondary); margin: 0px;}
.btn-five {font-size: var(--font-size-20); font-weight: var(--font-900); background: var(--white); color: var(--primary); padding: 8px 20px;
margin-bottom: 20px;}
.btn-five:hover {background: var(--secondary); color: var(--white);}
.trai-bgm h3 {text-align: center; color: var(--white); position: relative; z-index: 1;}
.trial-content {border: 1px solid var(--primary-opacity-11); border-radius: var(--border-radius); padding: var(--pad-20); margin-top: 20px; font-size: var(--font-size-20);
margin-bottom: 20px; background: var(--gradiant4); position: relative; z-index: 1;}
.trial-content ul li {position: relative; padding-right: 32px; margin-bottom: 16px; color: var(--secondary); font-weight: var(--font-900);}
.trial-content ul li::before {content: ''; background: var(--check-mark-blue); width: 24px; height: 24px; background-size: cover; position: absolute;
right: 0px; top: 4px;}
.trial-content ul li:last-child {margin: 0px;}
.trial-content::before{content: ''; position: absolute; background: var(--bg-white-70); width: 100%; height: 100%; top: 0; left: 0; 
border-radius: var(--border-radius); z-index: 0;}
.live-class .course-structure-count p { color: var(--primary);}
.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; color: var(--font-colour); font-weight: var(--font-900);}
.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(--gradiant-box); cursor: pointer;}
.like-icon:active {background: var(--gradiant7);}
.video-like-section { display: flex; gap: 10px;}
.trai-bgm { border-radius: 30px; background: var(--gradiant-img); 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-five {position: relative; top: -30px; margin: 0px; z-index: 1;}
.circle-11 {width: 200px; height: 200px; border-radius: 100%; background: var(--gradiant-green); filter: blur(50px); position: absolute;
left: 50%; transform: translate(-50%); top: 20%;}
.circle-12 { width: 200px; height: 200px; border-radius: 100%; background: var(--gradiant2); filter: blur(50px); position: absolute;
left: 50%; transform: translate(-50%); top: 20%;}
.btn-trial{width: 100%; background: var(--white); height: 60px; font-size: var(--font-size-28); font-weight: var(--font-900); 
color: var(--secondary); border: 1px solid var(--secondary);}
.sylabus-content {border: 1px solid var(--white); border-radius: var(--border-radius); padding: 12px;  font-size: var(--font-size-20);
background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.sylabus-content ul li {position: relative; padding-right: 32px; margin-bottom: 16px; color: var(--white);}
.sylabus-content ul li::before {content: ''; background: var(--check-mark); width: 24px; height: 24px; background-size: cover; position: absolute;
right: 0px; top: 4px;}
.sylabus-content ul li:last-child {margin: 0px;}
.category-title h1 span{color: var(--font-secondary);}
.post-secondary{margin-top: 40px; display: flex; gap: 45px; flex-wrap: wrap;}
.post-secondary .subject-img img{max-height: 250px;}
.post-secondary .subject-img{margin-bottom: 0px;}
.post-secondary h3{font-weight: var(--font-900); color: var(--font-colour);}
.post-secondary .circle-one, .post-secondary .circle-two{width: 180px; height: 160px;}
.non-register-content .input{width: 100%;}
.non-register-content .input .form-group:last-child{margin: 0px;}
.non-register-content .input .sign-phone{margin: 0px;}
.non-register-content .input .select-country{width: 30%;}
.select-grade-box .btn-four { text-wrap: nowrap;}
.select-scrollable .btn-four { text-wrap: nowrap;}
.hide{ display:none;}
.banner-video{position: relative; overflow: hidden; width: 100%; height: 900px; display: flex; align-items: end; justify-content: center; }
.video-desktop, .video-mobile{position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1;
transform: translate(-50%, -50%); object-fit: contain; }
.video-mask{ background: var(--video-mask); background-size: cover; width: 100%; height: 100px; position: relative; top: -1px;}
.btn-qatar{ height: 70px; font-size: var(--font-size-28); padding: 5px 20px; border: 1px solid transparent; color: var(--dark-green);
background: var(--white); font-weight: var(--font-900); border-radius: 50px;}
.btn-qatar:hover{background: var(--dark-green); color: var(--white);}
.qatar-content{display: flex; gap: 30px; flex-direction: column; align-items: center; text-align: center; position: relative;}
.qatar-content h1{color: var(--white); font-weight: var(--font-900); font-size: 60px;}
.qatar-content h1 span{color: var(--dark-green);}
.qatar-content h3{color: var(--dark-green); font-weight: var(--font-600);}
.qatar-testimonial .student-img{ padding-top: 0px; text-align: center;}
.video-desktop { display: block; }
.video-mobile { display: none; }
.notes-img video{max-width: 102%;}
.subject-box:hover .subject-img img{transform: scale(1.2);}
.bundle-box { border: 1px solid var(--bg-light); border-radius: 30px; margin-bottom: 30px; position: relative; overflow: hidden;}
.bundle-video video{max-width: 100%; display: block;}
.bundle-box .subscribe-icon, .bundle-box .subscribed-icon{position: absolute; right: 20px; top: 20px;}
.semester{display: inline-flex; align-items: center; gap: 6px; border: 1px solid #BCE6F1; border-radius: 30px; height: 54px; padding: 8px 20px;
background: var(--bg-white-10); color: var(--blue2); font-size: var(--font-size-18); margin-bottom: 20px; cursor: pointer; position: relative;}
.semester p{font-size: var(--font-size-18); margin: 0px;}
.select-semester{margin: 0px 0px 15px; justify-content: center;}
.select-semester .btn-four{min-width: 160px;}
.jwplayer{border-radius: 20px !important; margin-bottom: 20px !important;}
.basic-modal .jwplayer{margin-bottom: 0px !important;}
.qatar-banner{position: relative; height: 125vh; background: var(--qatar-banner); background-size: cover; background-position: top;
background-repeat: no-repeat; display: flex; align-items: center; flex-direction: column; gap: 10px; justify-content: center;}
.qatar-img{position: relative; width: 100%; max-width: 800px;}
.qatar-cap{position: absolute; max-width: 200px; right: 5%; top: 13%;}
.qatar-cloud{position: absolute; max-width: 250px; left: 0; top: -30px;}
.qatar-main{position: relative;}
.qatar-play{position: absolute; max-width: 120px; left: 40%; top: 20%; transform: translate(-50%, -50%);}
.qatar-trophy{position: absolute; max-width: 160px; left: 20%; top: 80%; transform: translate(-50%, -50%);}
.qatar-100{position: absolute; max-width: 300px; left: -50px; top: 40px;}
.bundle-content{display: flex; flex-direction: column;  color: var(--white); position: absolute; top: 20%; right: 2%; gap: 10px; width: 100%;}
.bundle-content h3{color: var(--white); font-weight: var(--font-900); font-size: 34px;}
.details-video{max-width: 380px; border-radius: 50px; position: relative; overflow: hidden;}
.subject-pop-img .details-video{max-width: 300px; margin: 0 auto; border-radius: 15px; border: var(--stroke-grey);}
.bundle-content h4{font-weight: normal; font-size: 28px;}
.offer{display: flex; border-radius: 30px; background: var(--red); width: 50px; justify-content: center; height: 30px; font-size: var(--font-size-18);
align-items: center; position: absolute; right: 18%; top: 60%;}
.offer-text{position: absolute; right: 2%; bottom: 10%; color: var(--white); font-size: var(--font-size-18);}
.bundle-details{position: relative;}
.bundle-details-content{position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); color: var(--white); display: flex;
flex-direction: column; gap: 10px; align-items: center; width: 100%;}
.bundle-details-content h3{color: var(--white);}
.bundle-details-content .offer{right: auto; position: relative; transform: none; left: auto;}
.add-cart-popup .subject-details-title h3{color: var(--font-colour); font-weight: 900; margin-bottom: 8px;}
.terms-conditions p{font-size: var(--font-size-24); margin: 0px;}
.terms-content{display: flex; flex-direction: column; gap: 15px;}
.terms-content ul{padding-right: 60px;}
ul.list-number li{list-style: decimal;}
ul.list-number ul li{list-style: circle;}
.bundle-details img{border-radius: 30px;}
.delete-icon img{ max-width: 90px;}
.about-us{display: flex; flex-direction: column; gap: var(--gap-20);}
.non-register-content .input{text-align: right;}