

  @media (min-width: 990px) {
      
  }

/* Tablet-pro desktop :1024px. */
@media  (max-width: 1030px) {

  .category-box-contanier{ grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));}
  .text-container{ max-width: 250px;}
  .private-content{text-align: center; max-width: 450px;}
  .private-icon{position: relative; left: 0; bottom: 0;}
  .private-box-container{padding: 0px 30px 50px; overflow: visible; height: inherit; justify-content: center;}
  .private-box{overflow: hidden;}
  .private-box-bg{top: -80%;}
  .cart-title{margin-bottom: 20px;}
  .cart-container{flex-direction: column; gap: 20px;}
  .cart-price-section, .cart-items-section{flex: unset; width: 100%;}
  .tag-ico{left: 95%;}
  .cart-add-pop .modal-dialog{max-width: 96%;}
  .min-hight{min-height: 71vh;}
   .qatar-banner{height: auto; gap: 30px; padding: 80px 0px 20px;}
   .offer{right: 25%;}
   

}

/* Tablet desktop :768px. */
@media (min-width: 768px) and (max-width: 991px) {
}

/* Tablet-pro desktop :1024px. */
@media (max-width: 840px) {

  .top-subject, .top-language-btn, .login-btn{display: none;}
  .cart-icon{width: 28px; height: 28px; border: none;}
  .more-icon{display: flex;}
  .user-icon{display: flex;}
  .hero{max-width: 720px;}
  .banner-section{padding-top: 30px;}
  .d-flex-justify-space{flex-direction: column; gap: var(--gap-20);}
  .story-title{ text-align: center; }
  .d-flex-justify-space.story-count{flex-direction: unset; margin-top: 20px; flex-wrap: wrap;}
  .count-box{justify-content: center;}
  .teachers-box{padding: 40px 30px;}
  .teacher-name h2{font-size: 28px;}
  .teacher-name h3, .teacher-video h3{font-size: 20px; padding: 0px;}
  .teacher-img img{height: 340px;}
  .teacher-subjects img{max-width: 140px;}
  .teachers-slider{margin-top: 0px; padding-top: 100px;}
  .notes-content{text-align: center; padding: 0 16px; align-items: center; position: relative;}
  .live-image{margin-bottom: 40px;}
  .country-btn{width: 28px; height: 28px;}
  .country-btn img{width: 24px; height: 24px;}
  .cart-icon sup{top: -8px; left: -8px;}
  .footer-links{width: 35%;}
  footer{padding-bottom: 30px;}
  .class-box-contanier{ grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));}
  .subject-details-bgm{flex-direction: column; gap: 60px;}
  .sign-up-page .top-language-btn{display: flex;}
  .liveclass-sylabus{flex-direction: column;}
  .liveclass-sylabus .trial-content, .liveclass-subscribe-btn{flex: unset; width: 100%;}
  .liveclass-subscribe-btn{text-align: center;}
  .bundle-content{top: 28%;}
  .offer{right: 33%;}
  .about-us{text-align: center;}
  h1{font-size: 40px;}
  
  
  
}

/* small mobile :767px. */
@media (max-width: 767px) {
  .video-desktop { display: none; }
  .video-mobile { display: block; }
  .bundle-content{transform: translate(-50%, -50%); right: auto; left: 50%; text-align: center; top: 15%;}
  .bundle-content h4{font-size: 18px;}
  .offer{transform: translate(-50%, 30%); right: auto; left: 50%; top: 100%; width: 36px; height: 24px;}
  .offer-text{transform: translate(-50%, -50%); right: auto; left: 50%; width: 100%; text-align: center; bottom: auto; top: 38%;}

}

/* Large Mobile :480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
   
  
}

@media (max-width: 480px) {
  .logo img{max-width: 110px;}
  header{padding-top: 15px;}
  .top-left-section{gap: 8px;}
  .rank-area{position: relative;}
  .rank-area h2{font-size: 58px;}
  .rank-area h1{font-size: 125px; top: -35px;}
  .banner-section{padding-top: 20px; overflow: hidden; height: 710px;}
  .cap-icon{right: 50px; top: 45%;}
  .cap-icon img{max-width: 90px;}
  .crown-icon img{max-width: 92px;}
  .crown-bg .circle-1, .crown-bg .circle-2, .cap-icon .circle-1, .cap-icon .circle-2{width: 60px; height: 60px;}
  .hero-name-box{ border-radius: 20px; right: 20px; padding: 12px 20px; height: 106px; max-width: 300px; top: 50%;}
  .hero-student-img img{height: 280px; position: relative; top: -80px;}
  .hero-student-img{position: relative; text-align: left;}
  h4{font-size: 18px;}
  .hero-name-box h2{font-size: 26px;}
  .hero-gradiant{top: -170px;}
  .crown-icon{top: 53%; left: -20px;}
  .hero-gradiant .circle-1{width: 416px; height: 188px;}
  .hero-gradiant .circle-2{width: 348px; height: 175px;}
  .hero-content h1{font-size: 34px;}
  .hero-content .btn1{height: 60px;}
  .light-shape, .green-shape, .white-shape, .video-mask{height: 30px;}
  .story-title{font-size: 30px;  max-width: 220px;}
  .pt-50{padding-top: 30px;}
  h1, h2{font-size: 30px;}
  .count-box img{max-width: 40px;}
  .count-box{gap: 20px;}
  .pt-80{padding-top: 40px;}
  .our-teachers h1{margin-bottom: 8px;}
  h3{font-size: 18px;}
  .teachers-box{padding: 60px 20px; flex-direction: column; gap: 30px; height: 500px; justify-content: inherit;}
  .teacher-img{width: 78%;}
  .teacher-img img{height: inherit; max-height: 290px;}
  .teacher-subjects img{max-width: 120px; left: -20px;}
  .teacher-subjects .crown-bg{left: 0px; top: -20px;}
  .spedia-logo{position: relative; right: auto; top: 50px; margin: 0 auto;}
  .teachers-slider{padding-top: 0px; margin-top: 0px;}
  .teacher-name{text-align: center;}
  .play-icon{width: 40px; height: 40px;}
  .play-icon::before{width: 60px; height: 60px;}
  .teacher-subjects{bottom: -60px;}
  .owl-theme .owl-nav{margin-top: 60px;}
  .mt-60{margin-top: 30px;}
  .btn-second{height: 50px;}
  .notes-content .btn-second{margin-top: 0px;}
  .live-img, .private-img img{max-width: 300px;}
  .live-subject-icon img{max-width: 100px;}
  .live-student-icon{left: 40px; bottom: 50px;}
  .live-student-icon img, .live-teacher-icon img{max-width: 70px;}
  .live-teacher-icon{right: 50px; top: 80px;}
  .private-img .circle-1, .private-img .circle-2{width: 250px; height: 250px;}
  .ask-teacher-img{max-width: 250px;}
  .ask-teacher-icon img{max-width: 100px;}
  .ask-teacher-icon{left: -20px;}
  .ask-teacher-icon .crown-bg{left: auto; top: auto;}
  .teacher-icon{left: auto;}
  footer{padding: 50px 10px 30px;}
  .footer-links{width: 100%;}
  .footer-social ul, .download-app{justify-content: center;}
  .footer-social{margin-top: 20px; width: 100%;}
  #topcontrol{width: 30px; height: 30px; left: 5px; display: none !important;}
  .download-app-icon{width: 150px;}
  .ask-teacher{padding-bottom: 40px; padding-top: 0px;}
  .testimonial-box{flex-direction: column; overflow: visible; gap: 0; padding: 12px 20px;}
  .student-img{max-width: 270px; flex: unset; top: -100px;}
  .testimonials-slider .owl-stage-outer{ padding-top: 130px;}
  .testimonial-area{margin-top: 10px;}
  .student-content{flex: unset; padding: 0px; text-align: center; position: relative; top: -65px;}
  .student-bgm{left: 0px; height: 100%;}
  .student-bgm2{display: none;}
  .student-bgm .circle-2{top: auto; bottom: 20%; left: 25%; filter: blur(30px); width: 300px; height: 300px;}
  .student-content h5{height: inherit;}
  .testimonials-slider .owl-nav{margin-top: 30px;}
  .student-bgm .circle-1{right: 10%; filter: blur(20px); width: 300px; height: 300px;}
  .student-testimonials, .live-area{overflow: hidden;}
  .ps-sticky{position: relative; top: 0px;}
  .live-area{padding-bottom: 50px;}
  .second-point{top: -30px;}
  .third-point{top: -60px;}
  .end-point{top: -90px; position: relative;}
  .inner-title{padding-top: 40px;}
  .inner-title h1{font-size: 30px;}
  .category-title .cap-icon img{left: 0; top: 0;}
  .category{padding-top: 30px; padding-bottom: 20px;}
  .category-box-contanier{ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 20px;}
  .category-box{height: 173px;}
  .text-container{font-size: 30px; line-height: 40px; max-width: 135px;}
  .category-bgColours .circle-3{filter: blur(60px);}
  .category-bgColours .circle-4{filter: blur(60px);}
  .private-content{ max-width: 290px;}
  .private-icon img{max-width: 270px;}
  .class-box{height: 173px;}
  .class-img img{max-height: 90px;}
  .class-bgColours .circle-3{filter: blur(45px);}
  .class-bgColours .circle-4{filter: blur(35px);}
  .class-box-contanier{margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));}
  .shop-tabs .nav-link{padding: 10px 0px; font-size: 18px;}
  .shop-tabs{margin: 10px 0px 15px;}
  .bundle-container, .recorded-container{margin: 15px 0px;}
  .subject-box{padding: 15px 10px; margin-bottom: 12px; border-radius: 20px;}
  .subscribed-icon, .subscribe-icon{width: 28px; height: 28px; margin-bottom: 10px;}
  #myTabContent .col-6{padding: 0 6px;}
  .subject-img img{max-height: 80px;}
  .subject-img{margin-bottom: 15px;}
  .circle-one, .circle-two{width: 80px; height: 80px;}
  .liveClass-container{margin-top: 15px;}
  .bundle-container .subject-img img{max-height: 180px;}
  .liveclass-box{ border-radius: 10px; padding: 10px; gap: 15px; margin: 0px; margin-bottom: 12px;}
  .liveClass-img img{height: 90px;}
  .liveclass-box .subscribed-icon, .liveclass-box .subscribe-icon{left: 8px; top: 8px;}
  .liveClass-icon{width: 60px; height: 41px;}
  .liveclass-deatils-img img{max-height: 180px;}
  .subject-details-bgm{ gap: 30px; padding: 20px; padding-bottom: 80px; border-top-left-radius: 30px; border-top-right-radius: 30px;}
  .circle-seven, .circle-eight{width: 170px; height: 170px;}
  .subject-details-content-box{padding: 25px 8px; border-radius: 30px; gap: 20px;}
  .subject-details-title h2{margin-bottom: 8px;}
  .video-ico, .book-ico, .quiz-ico{width: 20px; height: 20px;}
  .subject-details-price .btn1{font-size: 24px;}
  .subject-details-title ul{gap: 10px;}
  .subject-details-title ul li{gap: 6px;}
  .subject-details-title{ position: relative;}
  .subject-free-trail-img img{max-width: 38px;}
  .subject-free-trail{gap: 10px; padding: 10px; }
  .subject-details-price h2{font-size: 24px;}
  .liveclass-details-title{width: 100%;}
  .btn-primary{height: 41px;}
  .video-content-tab .dp-tabs{justify-content: flex-start;}
  .course-structure{margin-top: 0px; border-radius: 20px; padding: 0px; border: none;}
  .circle-nine, .circle-ten{display: none;}
  .course-structure .dp-tabs .nav-link{ padding: 0px 10px 15px;}
  .course-structure-collapse, .course-structure-details, .notes-structure-details{border-radius: 10px; padding: 15px 10px; margin-top: 10px;}
  .course-structure-count{margin-top: 10px; gap: 6px;}
  .course-box-expand h6{display: none;}
  .clock-ico{width: 16px; height: 16px;}
  .lock-ico{width: 18px; height: 18px;}
  .notes-structure-icon, .solution-structure-icon{border-radius: 8px; width: 36px; height: 36px;}
  .notes-structure-content{gap: 8px;}
  .notes-structure-icon img, .solution-structure-icon img{max-width: 18px;}
  h5{font-size: 16px;}
  .add-cart-popup{padding: 0px; gap: 12px;}
  .country-select-icon{width: 24px; height: 24px;}
  .modal-close-ico{width: 30px; height: 30px;}
  .button-not-active, .btn.disabled{height: 48px;}
  .terms-conditions ul{padding: 0px 15px;}
  .private-class-img{display: none;}
  .calendar{padding: 0px 20px; margin: 10px 0px;}
  .private-container{top: 0px;}
  .private-container .subject-details-content-box{top: -40px; padding: 30px 12px;}
  .select-scrollable, .select-class-box{margin: 10px 0px;}
  .btn-four{height: 38px;}
  .calendar-grid div{padding: 4px 0px;}
  .file-upload, .file-upload-view{height: 44px;}
  .input .form-group{margin-bottom: 12px;}
  .terms-accept{margin-bottom: 15px;}
  .p-50{padding: 30px 0px;}
  .cart-image img{max-height: 60px;}
  .cart-remove{position: absolute; width: 28px; height: 28px; left: 20px;}
  .cart-items{gap: 6px;}
  .cart-content h4{gap: 4px; font-size: 16px;}
  .monthly{height: 28px;}
  .cart-price-box{padding: 20px; gap: 20px;}
  .discount-input input{padding: 8px 45px;}
  .full-category{padding: 8px 10px;}
  .price-area{gap: 12px;}
  .cart-price-section .circle-1{width: 180px; height: 120px; top: 70%;}
  .register-icon img{max-height: 140px;}
  .non-register{padding: 15px;}
  .popup-subject-conainer{gap: 0;}
  .tag-ico{left: 92%;}
  .cart-empty-img img{max-width: 230px;}
  .cart-empty-img .circle-1, .cart-empty-img .circle-2, .circle-rose, .circle-violet{width: 160px; height: 140px;}
  .failed .cart-empty-img img{max-width: 180px;}
  .circle-rose, .circle-violet{filter: blur(40px); top: 0;}
  .top-language-btn button{padding: 6px 12px;}
  .sign-up-box{max-width: 340px;}
  .sign-up-box h2{margin-bottom: 25px; font-size: 24px;}
  .sign-phone input{width: 65%;}
  .select-country{padding: 6px;}
  .select-country{width: 30%;}
  .min-hight{min-height: 57vh;}
  .verification-input{gap: 8px; margin-bottom: 15px;}
  .cart-empty-content h5{margin-top: 15px;}
  .liveclass-start{padding: 14px 8px;}
  .liveclass-sylabus{ padding: 12px; gap: 15px;}
  .liveclass-subscribe-btn .btn-five{margin-bottom: 10px;}
  .subject-details-course h2{margin-bottom: 15px; font-size: 20px;}
  .video-box video{margin-bottom: 10px;}
  .video-title{margin-bottom: 15px;}
  .trial-content ul li::before{width: 18px; height: 18px;}
  .trial-content ul li{padding-right: 24px; margin-bottom: 10px;}
  .subject-free-trail-content .btn-primary{max-width: 80px; height: 32px; padding: 0px; font-size: var(--font-size-18);}
  .subject-free-trail-content h4{margin-bottom: 5px;}
  .sylabus-content ul li::before{width: 20px; height: 20px;}
  .post-secondary{margin-top: 20px; gap: 20px;}
  .post-secondary .subject-img img{max-height: 180px;}
  .post-secondary .circle-one, .post-secondary .circle-two{width: 180px; height: 120px;}
  .post-secondary h3{font-size: 22px;}
  .btn-qatar{height: 48px;}
  .banner-video{height: 550px;}
  .banner-video video{max-width: 130%;}
  .qatar-content h1{font-size: 36px;}
  .qatar-content{gap: 15px;}
  .select-semester .btn-four{min-width: 90px;}
  .select-semester{margin: 0px;}
  .qatar-play{max-width: 60px;}
  .qatar-cap{max-width: 90px; top: -10px;}
  .qatar-cloud{max-width: 120px;}
  .qatar-100{max-width: 180px; top: -60px; left: 50%; transform: translate(-50%);}
  .bundle-content h3{font-size: 26px;}
  .bundle-content h5{font-size: 18px;}
  .bundle-details-content p{display: none;}
  .subscription-box{padding: 12px;}
  .terms-content{gap: 8px;}
  .notes-img img{max-width: 280px;}
  .notes-img{margin-bottom: 30px;}
  .hero-name-box h2{max-width: 150px;}
  .liveClass-img{width: 80px; display: flex; flex-shrink: 0;}
  .hero-content{padding: 0px 16px;}

}

@media (max-width: 380px) {
 .cart-content h4{font-size: 15px;}
 .monthly{padding: 5px 8px; font-size: 15px; gap: 4px;}
}
  