#fullscreen-btn, #exit-fullscreen-btn{right: -30px;}
.controls #prevBtn{left:-40px; margin: 0; padding: 0px; background-color: transparent;}
.controls #nextBtn{right:-40px; margin: 0; padding: 0px;  background-color: transparent;}

@media screen and (max-width:1800px) {
    #content.fullscreen{height:67.4vh;}
    /*.controls #prevBtn{left:-239px;}
    .controls #nextBtn{right:-239px;}
    #fullscreen-btn, #exit-fullscreen-btn{right:-227px;}*/
    #nextBtn.continue-btn2{right:-50px !important;}
    #backBtn.continue-btn2{left:-50px !important;}
}

@media screen and (max-width:1600px) {
    .wrong-user-input{right:399px;}
    .listing {
        padding: 70px 0 70px;
    }
    .list-container .item-title, .list-container2 .item-title {
        font-size: 17px;
        font-weight: 600;
        padding: 6px 0;
    }
    .list-container .item img, .list-container2 .item img {
        width: 100%;
        border-radius: 8px;
        margin-bottom: 10px;
        max-height: 140px;
        object-fit: cover;
    }
    .list-container2 .item:nth-child(2), .list-container2 .item:nth-child(4) {
        top: 70px;
    }

    .banner .banner-area{height:755px;}

    /*#fullscreen-btn, #exit-fullscreen-btn{right:-123px;}
    .controls #prevBtn{left:-139px;}
    .controls #nextBtn{right:-139px;}*/
    #backBtn.continue-btn2{left:-50px !important;}
    #nextBtn.continue-btn2{right:-50px !important;}

}

/* @media screen and (max-width:1600px) {
    .wrong-user-input{right:358px;}

} */

@media screen and (max-width:1536px) {
    .wrong-user-input{right:308px;}
    .banner .banner-area{height:652px;}    
    .banner .banner-area .the_boy{top:74px;}
    .banner .banner-area .the_girl{bottom:-34px;}
    .banner .banner-area .animated-bee{right:31px; top:0px;}

    .eye-toggle, .eye-toggle_c{top:58% !important;}
    /*#istoryModalToggle .big-img, #ebookModalToggle .big-img, 
    .cmn_cssModal.onlyforallstories .big-img{
        width: 70.25%;
        padding-bottom: 70.25%;
    }*/

     /*.controls #nextBtn{right:-111px;}
    .controls #prevBtn{left:-111px;}
   #fullscreen-btn, #exit-fullscreen-btn{right:-100px;}*/

    #backBtn.continue-btn2{left:-50px !important;}
    #nextBtn.continue-btn2{right:-50px !important;}

    /*.stories .explore-image-box img{height:240px;}
    .show_post.owl-carousel .owl-item .explore-image-box img{height: 240px;}*/
}

@media screen and (max-width:1440px) {
    .banner .banner-area .banner-left h2 {
        font-size: 44px;
        line-height: 50px;
    }
    .banner .banner-area .banner-left h2 span {
        font-size: 28px;
        line-height: 36px;
    }

    .wrong-user-input{right:260px;}

    .banner .banner-area{height: 750px;}
    .banner .banner-area img{max-width:900px;}
    .banner .banner-area .the_boy{top: 170px;}
    .banner .banner-area .the_boy img{max-width: 210px; margin-bottom: 0;}
    .banner .banner-area .the_girl{bottom: 80px;}
    .banner .banner-area .the_girl img{max-width: 220px; margin-bottom: 0;}
    .banner .banner-area .animated-bee img {width: 145px;}

    /*.controls #nextBtn{right:-65px;}
    .controls #prevBtn{left:-65px;}
    #fullscreen-btn, #exit-fullscreen-btn{right:-53px;}*/

    #backBtn.continue-btn2{left:-50px !important;}
    #nextBtn.continue-btn2{right:-50px !important;}
}

@media screen and (max-width:1368px) {

    .list-container2 {
        gap: 48px;
    }

    .read-option span {
        font-size: 18px;
    }

    .options label {
        line-height: 134.3%;
    }

    .options .form-check {
        align-items: center;
    }

    .camera-icon{right:164px;}

    .story-slider .slide-image img{width:368px;height:381px;}

    .audioplay-btn{bottom:62px;}

    .story-slider .slide-text p{font-size: 22px; line-height: 145.3%;}

    .HeadRange .custom-tooltip{right:-22px;}

    .list-container2{margin-bottom:0px;}
    .listing{padding:30px 0;}

    .list-container2.mt-5{margin-top:2rem !important;}

    .options .form-check-label span{margin-bottom:0px;}

    .text{font-size: 37px;}

    .backimage{background:url(../images/bg-img.png) no-repeat bottom -157px left -115px;}

    .time-box p{right:60px;}

    .account-profile-view .acc-form-field .profile-viex-box:nth-child(2), .account-profile-view .acc-form-field .profile-viex-box:nth-child(3){padding:0 49px;}

    .account-card-detail .acc-form-field button[type="submit"]{padding-left:5px;padding-right:5px;}

    .rather-price h3{font-size: 25px;}

    .rather-price h3 span{font-size: 12px;}

    .rather-price{gap:5px;}

    .banner .banner-area{height:700px;}

    .banner .banner-area .the_boy{top:104px;}

    .five-small-images{gap:58px;}

    /*#fullscreen-btn, #exit-fullscreen-btn{right:-100px;}
    .controls #prevBtn{left:-113px;}
    .controls #nextBtn{right:-113px;}*/

    .page-container{max-width:1152px;}
    .slide2-section h2, .slide4-section h2, .about-section h2, .slide3-section h2, .slide5-section h2{font-size: 30px;}
}

@media screen and (max-width:1320px){
    .banner .banner-area{height:508px;}
    .five-small-images{margin-bottom:57px;}
    .banner .banner-area .the_girl{bottom:6px;}
    .banner .banner-area .animated-bee{right:31px;}
    /*.controls #prevBtn{left:-74px;}
    .controls #nextBtn{right:-74px;}
    #fullscreen-btn, #exit-fullscreen-btn{right:-64px;}*/
    .banner .banner-area .animated-bee img{width:90px;}
    .stars{font-size: 21px;}
    .oneline{max-width:96px;}

    #backBtn.continue-btn2{left:-50px !important;}
    #nextBtn.continue-btn2{right:-50px !important;}

    /*.stories .explore-image-box img{height:200px;}*/

    .show_post.owl-carousel .owl-item .explore-image-box img{height: 220px;}
}

@media screen and (max-width:1280px) {
    .banner .banner-area .banner-left {
        max-width: 54%;
    }

    .wrong-user-input{right:219px;}

    .options label{font-size: 19px;}
    .account-profile-view .acc-form-field .profile-viex-box:nth-child(2), .account-profile-view .acc-form-field .profile-viex-box:nth-child(3){padding:0 25px;}
    .account-profile-view .acc-form-field .profile-viex-box{padding-right:25px;}

    #backBtn.continue-btn2{left:-50px !important;}
    #nextBtn.continue-btn2{right:-50px !important;}

}

@media screen and (max-width:1200px){
    #backBtn.continue-btn2{left:-30px !important;}
    #nextBtn.continue-btn2{right:-30px !important;}
}

@media screen and (max-width:1180px) {

    .list-container {
        gap: 72px;
    }

    .list-container2 {
        gap: 40px;
    }

    #exampleModalToggle .title,
    #quizModalToggle .title,
    #ebookModalToggle .title {
        font-size: 40px;
    }

    #exampleModalToggle .title .pinktxt,
    #quizModalToggle .title .pinktxt,
    #ebookModalToggle .title .pinktxt {
        font-size: 32px;
    }

    #exampleModalToggle .title .smalltxt,
    #quizModalToggle .title .smalltxt,
    #ebookModalToggle .title .smalltxt {
        font-size: 25px;
    }

    .viewbtn {
        padding-left: 68px;
        padding-right: 68px;
    }

    .listenbtn{
        padding-left: 68px;
        padding-right: 68px;  
    }

    .read-option span {
        font-size: 20px;
    }

    
    .banner .banner-area .banner-left h2 {
        font-size: 40px;
        line-height: 46px;
    }
    .banner .banner-area .banner-left h2 span {
        font-size: 27px;
        line-height: 34px;
    }
    #achievementModalToggle .title .pinktxt {
        font-size: 40px;
    }

    #achievementModalToggle .title .smalltxt {
        font-size: 27px;
    }

    .play-btn {
        top: 14%;
    }

    .wrong-user-input{right:203px;}

    .camera-icon{right:120px;}

    .create-pin-box h1{font-size: 29px;}

    .read-option .icon{width:60px;height:60px;}

    .read-option span{font-size: 14px;}

    .story-slider .slide-text{padding-left:80px;}

    .story-slider .slide-image{padding-right:80px;}

    .customizebtn{padding-left:10px;padding-right:10px;}

    .HeadRange .custom-tooltip{top:-11px;right:-28px;}

    .otp-input, .pin-input{height:63px;}

    .video-thumbnail1, .video-thumbnail2, 
    .video-thumbnail3, .video-thumbnail4{height:183px;}

    .time-box p{right:-15px;}

    .gems{font-size: 26px;}
    .gems span{font-size: 93px;}
    .earn_gems .gap-4{gap:0.5rem !important;}
    .text{font-size: 29px;line-height: 62px;}

    .account-card-detail .acc-form-field button[type="submit"]{font-size: 11px;}
    .account-items .account-card{padding:25px 30px;}

    .rather-item h5{font-size: 17px;}

    .rather-price h3 span{font-size: 10px;}
    .rather-price dotlottie-player{width:38px !important; height:38px !important;}
    .rather-acivity-header h1{font-size: 57px;}

    .banner .banner-area{height: 505px;}
    .banner .banner-area img{max-width:700px;}
    .banner .banner-area .the_boy{top: 53px;}
    .banner .banner-area .the_boy img{max-width: 210px;}
    .banner .banner-area .the_girl img{max-width: 220px;}
    .banner .banner-area .animated-bee img {top: 30px;}
    .five-small-images{margin-bottom: 45px;}

    /*.controls #nextBtn{right:-113px;}
    .controls #prevBtn{left:-113px;}
    #fullscreen-btn, #exit-fullscreen-btn{right:-103px;}
    .slide .imgpart .main_img{height:700px;}*/

    .page-container{max-width:963px;}
}


@media screen and (max-width:1100px){
    input::placeholder {
        font-size: 10px;
      }
    
      input::-webkit-input-placeholder {
        font-size: 10px;
      }
    
      input::-moz-placeholder {
        font-size: 10px;
      }
    
      input:-ms-input-placeholder {
        font-size: 10px;
      }
    
      input:-moz-placeholder {
        font-size: 10px;
      }
}

@media screen and (max-width:1024px) {
    .story-details {
        padding: 70px 0 35px;
    }
    .read-option .icon {
        width: 75px;
        height: 75px;
    }
    .banner .banner-area .banner-left h2 {
        font-size: 36px;
        line-height: 42px;
    }
    .banner .banner-area .banner-left h2 span {
        font-size: 25px;
        line-height: 32px;
    }

    
    #achievementModalToggle .title .pinktxt {
        font-size: 39px;
    }

    #achievementModalToggle .title .smalltxt {
        font-size: 27px;
    }

    .play-btn {
        top: 13%;
    }

    .wrong-user-input{right:128px;}

    .story-slider .slide-image img{width:307px;height:322px;}

    .audioplay-btn{bottom:121px;}


    .result .answer {
        padding: 9px 20px;
    }
    .result .answer .quest {
        font-size: 20px;
    }

    .play-button{top:50%;}

    .dashboard-nav{min-width:258px;}
    /*.dashboard-content{width:calc(100% - 258px);}*/
    .avatar-upload .avatar-preview{width:90px;height:90px;}
    .avatar-upload{max-width:90px;min-width:90px;}
    .account-profile-view .acc-form-field .profile-viex-box:nth-child(2), .account-profile-view .acc-form-field .profile-viex-box:nth-child(3){padding:0 10px;}
    .profile-view-edit-box a span{width:30px;height:30px;}
    .profile-viex-box h6{font-size: 14px;}
    .profile-viex-box h3{font-size: 15px;}
    .dashboard .card-body h1{font-size: 30px;}
    .account-card h4{font-size: 18px;}
    .card-body label{font-size: 14px;}
    .account-profile-view .acc-form-field{margin-top:0 !important;}


    .banner .banner-area{height: 600px;}
    .banner .banner-area img{max-width:550px;}
    .banner .banner-area .the_boy img{max-width: 150px;}
    .banner .banner-area .the_boy{bottom: 80px;}
    .banner .banner-area .the_girl img{max-width: 160px;}
    .banner .banner-area .animated-bee img {top: 20px; width: 110px;}

    .rather-acivity-header h1{font-size: 45px;}

    .footer .footer-container h3{font-size: 18px;}
    .five-small-images{gap:23px; margin-bottom:90px;}

    /*.controls #prevBtn{left:-43px;}
    .controls #nextBtn{right:-43px;}
    #fullscreen-btn, #exit-fullscreen-btn{right:-30px;}*/

    .bakimage{background-image: none;}
    .bakimage .earn_gems-text{padding-left: 0px;}

    .boy-clock-img .img-clock{
        margin-left: -20px;
    }
}

@media screen and (max-width:992px){
    .wrong-user-input{right:102px;}

    .story-slider .slider-container .carousel-inner .carousel-item{height:340px;}

    .audioplay-btn{bottom:-19px;}

    .modal-content .center-part h3, .four-boxes h3, #ebookModalToggle .center-part h3, #istoryModalToggle .center-part h3{font-size: 16px;}

    .viewbtn, .listenbtn, .customizebtn{height:60px;}

    .time-box .time{margin-left:85px;}

    .time-box p{right:-15px;}

    .stopwatch{width:134px;}

    .rather-price h3{font-size: 24px;}
    .rather-price h3 span{font-size: 15px;}
    .rather-price dotlottie-player{width:50px !important; height:50px !important;}

    .rathr-activity-outer .activity-card.grey-shape img{top:22px;}
    .rathr-activity-outer .activity-card.grey-shape span.border-devider{top:69px;}
    .rathr-activity-outer .activity-card.grey-shape h5{top:67px;}

    .page-container{max-width:945px;}
}

@media screen and (max-width:991px) {

    .listing {
        padding: 64px 0;
    }

    .list-container {
        gap: 50px;
    }

    .list-container2 {
        gap: 20px;
    }

    .navbar-toggler {
        border: 0;
        padding: 0;
    }

    .navbar-toggler-icon {
        background-image: none;
        background: url(../images/toggler-icon.png) no-repeat center;
        width: 48px;
        height: 48px;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .menuNav_box {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
      }

      .no-scroll {
        overflow: hidden;
        height: 100vh;
    }

    .collapse:not(.show){
        display: block !important;
    }

      
    .navbar-collapse {
        /*position: fixed;
        top: 0px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        height: 100%;*/

        background-color: #3AB390;
        position: fixed !important;
        display: flex;
        flex-direction: column;
        padding: 30px 30px 100px;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 100;
        overflow: auto;
        max-width: 400px;
        width: 100%;
        transition: .5s;
        transform: translateX(-100%);
    } 

    /*.navbar-collapse.collapsing {
      height: 100%;
        left: -75%;
        transition: height 0s ease;
    }*/ 

    .navbar-collapse.show {
        /*height: 100%;
        left: 0;
        transition: left 400ms ease-in-out;
        z-index: 999;
        background: rgba(255, 255, 255, 1);
        width: 85%;
        max-width: 380px;
        padding: 30px 15px;
        box-shadow: 0 3px 15px rgba(0, 0, 0, 0.5);*/
        transform: translateX(0);
        box-shadow: 0px 0px 20px hsla(0, 0%, 100%, .6);
    } 

    .navbar-toggler.collapsed~.navbar-collapse {
        transition: left 400ms ease-in;
    } 

    .banner .banner-area{height:530px;}

    .nav-link {
        padding: 17px;
    }
    .navbar-nav .nav-item {
        margin-right: 0;
        margin-left:26px;
    }

    .navbar-nav .nav-item::before{top:10px;}

    .loginBtn_area {
        width: 100%;
        margin-top: 50px;
        flex-direction: column;
    }
    .login-btn,
    .get-started-btn {
        width: 100%;
    }

    #exampleModalToggle .title,
    #quizModalToggle .title,
    #ebookModalToggle .title {
        font-size: 20px;
    }

    #exampleModalToggle .title .pinktxt,
    #quizModalToggle .title .pinktxt,
    #ebookModalToggle .title .pinktxt {
        font-size: 24px;
    }

    #exampleModalToggle .center-part h6,
    .four-boxes h6,
    #quizModalToggle .text-container h6,
    #ebookModalToggle h6 {
        font-size: 10px;
    }

    #exampleModalToggle .center-part h3,
    .four-boxes h3,
    #ebookModalToggle .center-part h3 {
        font-size: 18px;
    }

    #achievementModalToggle .title .pinktxt {
        font-size: 24px;
    }

    #achievementModalToggle .title .smalltxt {
        font-size: 14px;
    }

    #achievementModalToggle .title {
        line-height: 17px;
    }
    .list-container2 {
        margin-bottom: 60px;
    }
    
    .listing {
        height: 100%;
        padding: 68px 0 80px;
    }

    #bigvideoModalToggle2 .modal-lg {
        max-width: 850px;
    }

    #quizModalToggle .modal-body {
        padding: 33px 32px;
    }

    .customizebtn,
    .viewbtn {
        height: 67px;
    }

    .buttons {
        gap: 10px;
    }

    .footer .footer-container h3 {
        font-size: 15px;
    }
    
    .read-option .icon {
        width: 60px;
        height: 60px;
        padding: 10px 8px;
    }
    .read-option span {
        font-size: 16px;
    }

    .play-btn {
        top: 9%;
        left: 26%;
    }

    .play-btn img {
        width: 55px;
        height: 55px;
    }

    .customizebtn,
    .viewbtn {
        height: 67px;
    }

    .options {
        margin-top: 25px;
    }

    .video-rating h1 {
        font-size: 36px;
    }

    .wrong-user-input{
        right:173px;
        font-size: 14px;
    }

    .submit-btn{
        padding:0;
    }

    .login-form h2, .signup-form h2{font-size: 31px;}

    .login .login-content .login-form, .sign-up .signup-content .signup-form{padding:33px 31px;}

    .signup-form label{font-size: 13px;}

    .create-pin-box{padding:87px 43px;}

    .create-pin-box h1{font-size: 26px;}

    .story-slider .slide-image img{width:206px;height:214px;}

    .story-slider .slide-text p{font-size: 15px;}

    .story-slider .slider-container .carousel-inner .carousel-item{height:247px;}

    .story-slider .slider-container .carousel-inner .carousel-item{right:0;}

    .slide .textpart{max-width:100%;}

    .slide .imgpart{max-width:100%; text-align: center;}

    .viewbtn{padding-left:25px;padding-right:25px;}

    .toppart{padding:35px 15px;}

    .toppart{top:12%;}

    .options .form-check{align-items: center;}

    .question h3 span{width:70px;}

    #customQuiz .question h3{justify-content: start;}

    .profile-dropdown{
        right:-64px;
        left: 0;
        border: 0;
        box-shadow: none;
        padding-left: 0;
        padding-right:0;
    }

    .toppart{padding:35px 15px 0;}

    .video-thumbnail1, .video-thumbnail2, 
    .video-thumbnail3, .video-thumbnail4{height:120px;}

    .customizebtn, .listenbtn, .viewbtn{font-size: 13px; width:100%;}
    .toppart .title .pinktxt{font-size: 27px;}
    .modal-content .center-part, 
    #ebookModalToggle .center-part, 
    #istoryModalToggle .center-part{
        padding-left:35px;
        padding-right:35px;
    }

    dotlottie-player{height:139px;}
    .gems span{font-size: 79px; line-height: 55px;}
    .gems{font-size: 24px;}
    .text{font-size: 25px; line-height: 62px;}
    .time-box{margin:25px 35px 50px 65px;}
    .stopwatch{width:104px;}
    .time-box p{right:-34px; font-size: 13px;}
    .time-box .time{width:163px; margin-left:66px;}
    .time-box span{font-size: 25px;}

    .bye-btn, .going-btn{min-width: 162px;font-size: 15px;}

    .earn_gems h4{font-size: 21px;}

    .rather-acivity-header h1{font-size: 38px;}
    .rathr-activity-outer{margin-top:0;}
    .rathr-activity-outer .activity-card.grey-shape{width:50%;}
    .rathr-activity-outer .activity-slider-box{width:48%;}
    .rathr-activity-outer .activity-card.grey-shape img{top:20px;}
    .rathr-activity-outer .activity-card.grey-shape span.border-devider{top:104px;}
    .rathr-activity-outer .activity-card.grey-shape h5{top:101px;}
    .modal-content .center-part h3, .four-boxes h3, #ebookModalToggle .center-part h3, #istoryModalToggle .center-part h3{font-size: 14px;}

    .explore-image-box{width: 100%;}
    .question img.img-fluid{width:100%;}
    .banner .banner-area .the_boy{top:96px;}

    .five-small-images .image1 img{width:90px;height:86px;margin:0 0 33px;}

    .page-container{max-width:717px;}
    .slide2-section h2, .slide4-section h2, .about-section h2, .slide3-section h2, .slide5-section h2{line-height: 40px;}
    .slide2-section p, .slide4-section p, .about-section p, .slide3-section p, .slide5-section p, .about-section .about-texts p{font-size: 20px; line-height: 31px;}
}

@media screen and (max-width:932px) {

    #exampleModalToggle .toppart p,
    #ebookModalToggle .toppart p {
        font-size: 17px;
    }
    
    .banner .banner-area .banner-left h2 {
        font-size: 32px;
        line-height: 32px;
    }
    .banner .banner-area .banner-left h2 span {
        font-size: 19px;
        line-height: 24px;
        margin: 5px 0 0;
    }

    .wrong-user-input{right:147px;}
    .slide2-section .about-texts ul, .slide4-section .about-texts ul, .about-section .about-texts ul{font-size: 20px;}
}

@media screen and (max-width:915px) {
    .wrong-user-input{right:137px;}
}

@media screen and (max-width:820px) {    
    #bigvideoModalToggle2 .modal-lg {
        max-width: 720px;
    }

    .wrong-user-input{right:88px;}

    .toppart .title .pinktxt{font-size: 24px;}

    .time-box{margin:25px 35px 25px 65px;}
}

@media screen and (max-width:768px){
    .wrong-user-input{right:63px;}

    .camera-icon{right:93px;}

    .options{margin-top:25px;}

    .modal-content .title .pinktxt,
    #quizModalToggle .title .pinktxt,
    #ebookModalToggle .title .pinktxt,
    #istoryModalToggle .title .pinktxt{font-size: 28px;}

    .modal-content .title .smalltxt, #quizModalToggle .title .smalltxt, #ebookModalToggle .title .smalltxt, #istoryModalToggle .title .smalltxt{font-size:30px;}
    #quizModalToggle .text-container h3{font-size: 22px;}
    .modal-content .center-part h6, .four-boxes h6, #quizModalToggle .text-container h6, #ebookModalToggle h6, #istoryModalToggle h6{margin-bottom:0;}
    .banner .banner-area{height:420px;}
    .banner .banner-area img{margin:0 0 85px;}
    .banner .banner-area .the_girl img, .banner .banner-area .the_boy img{max-width:142px;}
    .banner .banner-area .the_girl{bottom:15px;}
    .banner .banner-area .the_boy{top:56px;}

    .about-data-section .about-data-container{flex-direction: column;}
    .five-small-images{gap:12px;margin-bottom:45px;}
    .banner .banner-area img{margin:0 0 22px;}

    .bakimage{background-image: none;}
    .bakimage .earn_gems-text{padding-left: 0px;}

    .boy-clock-img .img-clock{
        margin-left: 0px;
    }

    #fullscreen-btn, #exit-fullscreen-btn{right: 0px;}
    .controls #prevBtn{left:-15px; border-bottom-left-radius: 0px; border-top-left-radius: 0px;}
    .controls #nextBtn{right:-15px; border-bottom-right-radius: 0px; border-top-right-radius: 0px;}
    
}

@media screen and (max-width:767px) {

    .container {
        max-width: 640px;
    }

    .login-btn,
    .get-started-btn {
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px !important;
    }

    .list-container {
        gap: 35px;
    }

    .list-container2 {
        gap: 17px;
    }

    .footer .footer-container h3 {
        font-size: 13px;
    }

    .footer .footer-container .footer-links li a {
        font-size: 13px;
    }

    .footer .footer-container .copyright {
        font-size: 12px;
    }

    .read-option {
        gap: 10px;
    }

    .read-option .icon {
        width: 50px;
        height: 50px;
    }

    .otp-input,
    .pin-input {
        width: 16%;
        height: 90px;
        font-size: 20px;
    }

    .about-section h2 {
        font-size: 30px;
    }

    .about-section .about-texts{font-size: 20px; line-height: 31px;}
    .slide2-section .about-image, .slide4-section .about-image{width:100%; max-width:100%;}
    .page-container{max-width:636px;}
    .slide2-section .about-texts, .slide4-section .about-texts{margin-left:0;}
    .slide2-section .slide2-container, .slide4-section .slide4-container{gap:40px;}
    .slide3-section .about-image{width:100%; max-width:100%;}
    .slide3-section .about-texts{order:2;}
    .slide3-section .about-texts:not(:last-child){padding:0;}
    .slide3-section .slide3-container{gap:40px;}
    .slide5-section .slide5-container{gap:40px;}
    .slide5-section .about-image{max-width:100%;width:100%;}
    .slide5-section .about-texts{order:2;}

    .about-section .about-image {
        display: block;
        float: left;
        width: auto;
        max-width: 100%;
    }

    .about-section .about-image {
        display: block;
        float: left;
        width: 100%;
        max-width: 100%;
    }

    
    .about-data-section .about-data-container .about-data-left {
        width: 100%;
    }

    .four-boxes {
        margin-bottom: 30px;
    }

    .login .login-content .login-form,
    .sign-up .signup-content .signup-form {
        padding: 30px 37px;
        margin-top: 30px;
    }
    .login-form h2, .signup-form h2 {
        margin: 0px 0px 25px;
    }

    #bigvideoModalToggle2 .modal-lg {
        max-width: 100%;
    }
    .question h3 span {
        height: auto;
    }

    .options {
        margin-top: 0;
    }

    .wrong-user-input{
        right:219px;
        top:inherit;
        bottom:-171px;
    }

    .signup-form label{font-size: 16px;}

    .camera-icon{right:226px;}

    .resend-text{padding:0 31px;}

    .story-details .buttons{flex-direction: column; align-items: flex-start;}


    .result .answer {
        padding: 9px 15px;
    }
    .result .answer .number {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }
    .result .answer .quest {
        width:  calc(100% - 87px);
        font-size: 16px;
    }
    .result .answer .questBox_wrap {
        width: calc(100% - 40px);
        padding-left: 20px;
    }

    .qt_btnBox {
        width: 87px;
    }
    .qt_btnBox .result_act_btn {
        width: 36px;
    }
    .qt_btnBox .result_act_btn > button {
        width: 36px;
        height: 36px;
    }

    #bigvideoModalToggle2 .btn img{right:-191px;}

    .modal-content .title .pinktxt, #quizModalToggle .title .pinktxt, #ebookModalToggle .title .pinktxt, #istoryModalToggle .title .pinktxt{font-size: 26px;}

    .customizebtn{font-size:15px;}

    .question h3 span{height:52px;}

    .HeadRange .custom-tooltip{top:-11px;right:115px;}

    .time-box p{right:301px;}

    .earn_gems h4{font-size: 19px;}

    .earn_gems h2{font-size: 40px;}

    .rathr-activity-outer .activity-card.grey-shape{width:50%;}

    .rather-item h5{font-size: 15px;}

    .rather-acivity-header h1{font-size: 33px;}

    .about-section{padding: 20px 0 10px;}
    .about-section .about-container{ gap: 40px;}
    .about-section .about-container .about-texts{padding: 0; order: 2;}
    .about-section .about-container .about-image{order: 1;}

    .about-data-section{padding: 50px 0;}
    .about-data-section .about-data-container{gap: 40px;}
    .about-data-section .about-data-container .about-data-right{padding: 0;}

    .whould-you-rather-activity {padding: 30px 0px 80px;}

    .total-red-gems{top:-17px;}

    .activitySlider .owl-nav{right:-100%;width:91%;}

    .audiobook-bg{padding:105px 0 20px;}

    .question h3 .text{font-size: 23px;}

    .backimage{background: url(../images/bg-img.png) no-repeat bottom 480px left -115px;}

    .text{font-size: 32px;}

    .five-small-images .image1 img{width:79px;height:75px;}
    .five-small-images .image1 h3{font-size: 18px;}

    .about-section .about-texts.order-2 + .about-image{padding-right:0;float:none;text-align: center;}
}

@media screen and (max-width:720px){
    .banner .banner-area img{max-width:456px;}
}

@media screen and (max-width:667px){
    .wrong-user-input{right:167px;}

    .play-btn{top:11%;left:27%;}

    .customizebtn{font-size:15px;}

    .question h3 span{width:67px;}

    .banner .banner-area{height:384px;}

    .banner .banner-area img{max-width:410px;}

    .banner .banner-area .the_boy{top:38px;}

    .banner .banner-area .the_boy img{max-width:133px;}

    .banner .banner-area .the_girl{bottom:-5px;}

    .banner .banner-area .the_girl img{max-width:133px;}

    .banner .banner-area .animated-bee{right:25px;top:0px;}

}

@media screen and (max-width:640px) {
    .story-details {
        padding: 50px 0 35px;
    }

    #quizModalToggle .text-container h3 {
        font-size: 20px;
    }
    
    .about-data-section .about-data-container .about-data-left{width:50%;}
    
    .banner .banner-area .banner-left h2 {
        font-size: 24px;
        line-height: 30px;
    }
    .banner .banner-area .banner-left h2 span {
        font-size: 16px;
        line-height: 22px;
    }
    body {
        overflow-x: hidden;
    }

    .wrong-user-input{right:152px;}

    .stories .owl-nav .owl-prev{left:0px;}
    .stories .owl-nav .owl-next{right:0px;}

    .five-small-images .image1 img{width:70px;height:66px;}
    .five-small-images .image1 h3{font-size: 16px;}
}

@media screen and (max-width:575px) {

    .list-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 42px;
    }

    .list-container2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 46px 15px;
    }

    .list-container .item,
    .list-container2 .item {
        margin: auto;
        max-width:158px;
    }

    .modal-dialog {
        margin: 29px;
    }

    #exampleModalToggle .title,
    #quizModalToggle .title,
    #ebookModalToggle .title {
        margin-top: 25px;
    }

    .footer .footer-container .rw .colm,
    .footer .footer-container .rw .colm:first-child {
        max-width: 100%;
        flex: 0 0 100%;
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    .story-details .right-img img {
        display: flex;
        margin: auto;
        margin-bottom: 25px;
    }

    .verifyotp.modal-body {
        padding: 29px 31px;
    }

    .otp-input,
    .pin-input {
        width: 16%;
        height: 60px;
        font-size: 17px;
    }

    .about-section .about-image {
        max-width: max-content;
        width: 100%;
    }

    .about-section .about-texts:not(:last-child) {
        width: 100%;
    }

    .about-section .about-texts:not(:last-child) {
        padding: 0;
    }
    
    .about-data-section .about-data-container .about-data-right{padding:0;}
    .about-data-section .about-data-container .about-data-left{width:100%;}
    
    .banner .banner-area .banner-left h2 {
        font-size: 18px;
        line-height: 26px;
    }
    .banner .banner-area .banner-left h2 span {
        font-size: 13px;
        line-height: 18px;
        margin: 4px 0 0;
    }

    .wrong-user-input{
        right:119px;
        bottom:-121px;
    }

    .camera-icon{right:191px;}

    .read-option span{font-size: 24px;}

    .slide .textpart p{text-align: center;}
    .list-container2 {
        margin-bottom: 0px;
    }

    .customizebtn{margin-left:0; margin-right:0;}

    #exampleModalToggle .big-img, #quizModalToggle .big-img, 
    #ebookModalToggle .big-img, #istoryModalToggle .big-img{
        margin-bottom:20px;
        width:100%;
        margin-top:20px;
    }

    .video-container{margin-bottom:20px;}

    .play-btn{top:9%;left:44%;}

    .videobox .imgbox{width:100%;}

    footer{overflow-x: hidden;}

    .HeadRange .custom-tooltip{right:82px;}

    .options .form-check-input{top:0px;}

    .time-box p{right:222px;}

    .earn_gems h4{font-size: 17px;}

    .rather-acivity-header h1{font-size: 25px;}

    .rather-price h3{font-size: 20px;}

    .rather-price h3 span{font-size: 11px;}

    .rather-price dotlottie-player{width:44px !important; height:44px !important;}

    .rathr-activity-outer .activity-card.grey-shape{width:50%;}

    .rathr-activity-outer .activity-card.grey-shape img{top:-3px;}

    .activity-card img{max-height:220px;}

    .rathr-activity-outer .activity-card.grey-shape span.border-devider{top:76px;}

    .rathr-activity-outer .activity-card.grey-shape h5{top:71px;}

    .modal-content .center-part, #ebookModalToggle .center-part, #istoryModalToggle .center-part{margin-top:20px;}

    .video-thumbnail1, .video-thumbnail2, .video-thumbnail3, .video-thumbnail4{height:auto;}

    .modal-content .title .smalltxt, #quizModalToggle .title .smalltxt, #ebookModalToggle .title .smalltxt, #istoryModalToggle .title .smalltxt{font-size: 25px;}

    .question h3 .text{margin-bottom:0;}

    .question h3 .text{width:100%;}

    .question h3{margin-bottom:0;}

    .banner .banner-area .banner-left h2{font-size: 30px;}

    .banner .banner-area .banner-left h2 span{font-size: 17px;}

    .banner .banner-area img{max-width:355px;}

    .banner .banner-area{height:331px;}

    .banner .banner-area .animated-bee img{width:85px;}

    .five-small-images .image1 img{width:50px;height:46px;}

    .five-small-images .image1 h3{font-size: 14px; margin-top:10px;}
}

@media screen and (max-width:540px){
    .wrong-user-input{right:95px;bottom:-90px;}

    .camera-icon{right:167px;}

    .video-container{margin-bottom:20px;}

    .play-btn{left:44%;}

    .play-btn{top:9%;}

    .stories .owl-nav .owl-next {right: 0;}

    #videoModalToggle .video-container .play-button{width:55px;height:55px;}

    .story-cat{padding:12px 65px;}

    .stories .owl-nav .owl-prev, .stories .owl-nav .owl-next{width:42px;height:42px;}
    .stories .owl-nav .owl-prev{left:0px;}
    .stories .owl-nav .owl-next{right:0px;}

    .modal .btn-close{top:2px;right:2px;}

    .HeadRange .custom-tooltip{right:64px;}

    .time-box p{right:196px;}

    .time-box .time{margin-left:59px;}

    .earn_gems h4{line-height: 27pX;}

    .earn_gems h2{font-size: 35px;}

    .total-red-gems dotlottie-player{width:37px !important; height:37px !important;}

    .total-red-gems h4{font-size: 22px; line-height: 28.5px;}

    .rather-item h5{font-size: 14px;}

    .story-list-header .filter-buttons{flex-wrap: wrap; width: 100%;}
    .story-list-header .filter-buttons .filter-button,
    .story-list-header .filter-buttons .filter-rgt{width: 100%;}

    #fullscreen-btn img{width: 24px;}
    
    .question h3 .text{width:100%;}

    .banner .banner-area .the_girl img, .banner .banner-area .the_boy img{max-width:114px;}

    .banner .banner-area img{max-width:335px;}

    .banner .banner-area{height:294px;}

    .banner .banner-area img{margin:0 0 20px;}

    .navbar-collapse.show{width:45%;}

    .about-section h2{font-size: 27px;}

    .slide2-section h2, .slide4-section h2, .about-section h2, .slide3-section h2, .slide5-section h2{font-size: 27px;}

    .slide2-section p, .slide4-section p, .about-section p, .slide3-section p, .slide5-section p, .about-section .about-texts p{font-size: 18px;}

    .slide2-section .about-texts ul, .slide4-section .about-texts ul, .about-section .about-texts ul{font-size: 18px;}

    .about-section p{font-size: 15px;}
}

@media screen and (max-width:480px) {

    .otpModal .btn-close,
    #staticBackdrop .btn-close {
        /* background: var(--bs-btn-close-bg) 31px / 0.8em 13px no-repeat #f6dff3; */
        width: 45px;
        height: 45px;
    }

    .verifyotp h2 {
        font-size: 26px;
    }

    .story-details .buttons {
        flex-wrap: wrap;
        justify-content: center;
    }
    /* .story-details .read-option {
        width: calc(50% - 10px);
    }   */

    .four-boxes {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .banner .banner-area .banner-left {
        max-width: 75%;
    }

    .wrong-user-input{
        right:70px;
        bottom:-32px;
    }

    .camera-icon{right:140px;}

    .profiles{flex-direction: column;}


    .result .answer,
    .result .answer .questBox_wrap {
        align-items: flex-start;
    }

    .play-btn{top:8%;left:42%;}

    #bigvideoModalToggle2 .btn img{right:-162px;}

    .story-list-header h1{font-size:40px;}

    .question h3 span{width:100px;}

    .HeadRange .custom-tooltip{right:37px;}

    .cmn_cssModal .center-part .col-6,
    #ebookModalToggle .center-part .col-6, 
    #istoryModalToggle .center-part .col-6{width:50%;} 

    .time-box p{right:137px;}

    .rather-acivity-header h1{font-size: 18px;}

    .rather-price h3{font-size: 15px;}

    .rather-price dotlottie-player{width:33px !important; height:33px !important;}

    .rather-item h5{font-size: 12px;}

    .total-red-gems{gap:4px;}

    .banner .banner-area img{max-width:290px;}

    .banner .banner-area{height:257px;}

    .banner .banner-area .the_girl img, .banner .banner-area .the_boy img{max-width: 100px;}

    .banner .banner-area .animated-bee img{width:75px;}

    .banner .banner-area .animated-bee{right:-9px;}

    .time-box{margin:25px 35px 25px 10px;}

    .collectgemsbuttons{margin-left:30px;}

    .banner .banner-area .banner-left h2{font-size: 24px;}

    .five-small-images{gap:8px;}

    .five-small-images .image1 img{width:40px;height:36px;}

    .five-small-images .image1 h3{font-size: 12px;}

    .banner .banner-area .animated-bee{top:-29px;}
}

@media screen and (max-width:430px){
    .wrong-user-input{right:46px;bottom:10px;}

    .camera-icon{right:114px;}

    .play-btn{top:7%;}

    #bigvideoModalToggle2 .btn img{right:-139px;}

    .modal-content .title .pinktxt, #quizModalToggle .title .pinktxt, #ebookModalToggle .title .pinktxt, #istoryModalToggle .title .pinktxt{font-size:24px;}

    .toppart{padding:35px 10px 0px;}

    .story-list-header h1{font-size:35px;}

    #bigvideoModalToggle2 .btn.close, #bigvideoModalToggle3 .btn.close{top:11px;right:15px;left:initial;}

    .question h3 span{width:110px;}

    .HeadRange .custom-tooltip{right:13px;}

    .cmn_cssModal .title .pinktxt{line-height:30px;}

    .cmn_cssModal .title .smalltxt{line-height:30px;}

    .qz_result_modal_cont h2{font-size: 22px; line-height: 29px;}

    .bye-btn, .going-btn{min-width: 137px; font-size: 14px;}

    .time-box p{right:93px;}

    .earn_gems h2{font-size: 31px;}

    .rather-acivity-header h1{font-size: 15px;}

    .rather-price h3{font-size: 13px;}

    .rather-price h3 span{font-size: 8px;}

    .total-red-gems dotlottie-player{width:30px !important; height: 30px !important;}

    .total-red-gems h4{font-size: 18px; line-height: 24.5px;}

    .rather-item h5{line-height: 18px;}

    .navbar-collapse.show{max-width:260px;width:58%;}

    .rathr-activity-outer .activity-slider-box .rather-item.activity-card{max-width: calc(100% - 10px);}

    .rather-acivity-header h1{font-size: 22px;}

    .rather-price h3{font-size: 20px;}

    .banner .banner-area .banner-left h2{font-size: 25px;}

    .banner .banner-area .banner-left h2 span{font-size: 14px;}

    .banner .banner-area .the_girl img, .banner .banner-area .the_boy img{max-width:83px;}

    .about-section p, .about-data-section .about-data-container .about-data-right p{font-size: 14px; line-height: 25px;}

}

@media screen and (max-width:420px) {

    /* .get-started-btn {
        display: none;
    } */

    .list-container .item,
    .list-container2 .item {
        max-width: 174px;
    }

    .customizebtn {
        padding-left: 30px;
        padding-right: 30px;
    }

    .list-container .item,
    .list-container2 .item {
        max-width: 164px;
    }

    .customizebtn,
    .viewbtn {
        font-size: 15px;
    }

    .list-container .item,
    .list-container2 .item {
        max-width: 144px;
    }

    .buttons .read-option {
        gap: 12px;
    }

    .about-section h2 {
        font-size: 31px;
    }

    .about-section .about-texts:not(:last-child) {
        padding: 0;
    }
    
    .story-details {
        padding: 40px 0 30px;
    }

    .play-btn {
        top: 5.5%;
    }

    .wrong-user-input{right:41px;bottom:23px;}

    .HeadRange .custom-tooltip{right:3px;}

    .modal-content .title .smalltxt, #quizModalToggle .title .smalltxt, 
    #ebookModalToggle .title .smalltxt, #istoryModalToggle .title .smalltxt{
        font-size: 26px;
    }

    .earn_gems h2{font-size: 29px;}

    .banner .banner-area img{max-width: 271px;}

    .time-box p{right:64px;}
}

@media screen and (max-width:393px){
    .time-box{margin:25px 35px 50px 32px;}

    .collectgemsbuttons{margin-left:44px;}

    .d-flex.align-items-end.gap-4 dotlottie-player{width:142px !important; height:144px !important;}

    .earn_gems h2{font-size: 27px;}

    .banner .banner-area .the_girl img, .banner .banner-area .the_boy img{max-width:75px;}

    .banner .banner-area .the_girl{bottom:13px;}

    .banner .banner-area{height:237px;}

    .time-box p{right:23px;}

    .slide2-section h2, .slide4-section h2, .about-section h2, .slide3-section h2, .slide5-section h2{font-size: 25px; line-height: 33px;}
}

@media screen and (max-width:390px) {
    .otp-input-container {
        gap: 9px;
    }

    .list-container .item-title, .list-container2 .item-title{font-size:16px;}

    .otp-input,
    .pin-input {
        width: 16%;
        height: 54px;
    }

    .about-section h2 {
        font-size: 30px;
    }
    
    .story-details .read-option {
        width: 100%;
    }
    .play-btn {
        top: 6%;
    }

    #bigvideoModalToggle2 .btn img{right:-121px;}

    .wrong-user-input{
        right: 24px;
        bottom: 46px;
    }

    .verifyotp h2{font-size: 22px;}

    .resend-text{padding:0 23px;}

    .camera-icon{right:90px;}

    .book-section .author-label, .book-section .label{
        font-size: 26px;
        margin-left: 0 !important;
        line-height: 49px;
    }

    .modal-content .title .pinktxt, #quizModalToggle .title .pinktxt, #ebookModalToggle .title .pinktxt, #istoryModalToggle .title .pinktxt{font-size:22px;}

    #videoModalToggle .video-container .play-button{width:48px;height:48px;}

    .video-thumbnail .play-button{top:43%;}

    .story-list-header h1{font-size:30px;}

    .question h3 span{width:111px;}

    .HeadRange .custom-tooltip{right:-8px;}

    .question h3 .text{font-size: 25px;}

    .options label{font-size: 18px;}

}

@media screen and (max-width:375px){
    .wrong-user-input{
        right:25px;
        bottom:60px;
        font-size: 13px;
    }

    .resend-text{padding:0 21px;}

    #bigvideoModalToggle2 .btn img{right:-112px;}

    .story-list-header{justify-content: normal; align-items: start; flex-direction: column; gap:20px;}

    .question h3 .text{font-size: 23px;}

    .options label{font-size: 21px;}

    .time-box p{right:8px;}

    .earn_gems h2{font-size: 24px;}

    .banner .banner-area img{max-width:249px;}

    .activitySlider .owl-nav{right:-106%; top:-27px;}
}

@media screen and (max-width:360px) {

    .viewbtn {
        padding-left: 30px;
        padding-right: 30px;
    }

    #quizModalToggle .modal-body {
        padding: 33px 12px;
    }

    .about-section h2 {
        font-size: 25px;
        line-height: 38px;
    }
    .navbar-brand {
        margin-right: 10px;
    }

    .wrong-user-input{
        right: 32px;
        bottom: 77px;
        font-size: 12px;
    }

    .verifyotp h2{font-size: 20px;}
    .verifyotp p{font-size: 14px;}
    .resend-text{padding:0 15px;}

    .camera-icon{right:74px;}

    #bigvideoModalToggle2 .btn img {margin:-25px 0 0 2px;}

    .modal-content .title .pinktxt, #quizModalToggle .title .pinktxt, #ebookModalToggle .title .pinktxt, #istoryModalToggle .title .pinktxt{font-size:22px;}
    .cmn_cssModal .title .smalltxt{font-size:26px;line-height:33px;}

    .HeadRange .custom-tooltip{right:-21px;}
    .create-pin-box{padding:57px 43px;}

    .options label{font-size: 20px;}
    .question h3 .text{font-size: 22px;}

    .collectgemsbuttons{margin-left:10px;}

    .banner .banner-area .the_girl img, .banner .banner-area .the_boy img{max-width:70px;}

    .banner .banner-area .animated-bee img{width:55px;}

    .time-box{margin:25px 35px 50px 3px;}

    .time-box p{font-size: 15px;}
}