@font-face {
    font-family: 'Letter Kids';
    src: url('../fonts/LetterKids.eot');
    src: url('../fonts/LetterKids.eot?#iefix') format('embedded-opentype'),
        url('../fonts/LetterKids.woff2') format('woff2'),
        url('../fonts/LetterKids.woff') format('woff'),
        url('../fonts/LetterKids.ttf') format('truetype'),
        url('../fonts/LetterKids.svg#LetterKids') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
:root{
    --bs-primary: #314196;
    --bs-secondary: #D3569F;
    --bs-warning:#FBCE0D;
    --bs-info:#41A3CA;
    --light-green:#AAD057;
}
.btn{
    border-radius: 30px;
    padding: .5rem 1.5rem;
}
.btn-primary{
    background-color: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}
.btn-primary:hover,.btn-primary:focus{
    background-color: var(--bs-secondary);
    color: #fff;
    border-color: var(--bs-secondary);
}
.btn-white{
    background-color: #fff;
    color: var(--bs-primary);
}
.btn-white:hover{
    background-color:var(--bs-primary);
    color: #fff;
}
.btn-secondary{
    background-color: var(--bs-secondary);
    color: #fff;
    border-color: var(--bs-secondary);
}
.btn-secondary:hover{
    background-color: var(--bs-warning);
    color: #000;
    border-color: var(--bs-warning);
}
.text-warning{
    color: var(--bs-warning) !important;
}
.text-primary{
    color: var(--bs-primary) !important;
}
.text-secondary{
    color: var(--bs-secondary) !important;
}
.text-white{
    color: #fff;
}
.text-info{
    color: var(--bs-info) !important;
}
.dot-ani{
    animation: doAni 2s infinite ;
}
.ballon-ani{
    animation: ballonAni 7s infinite ;
    transform-origin: bottom;
}
.bg-primary{
    background-color: var(--bs-primary) !important;
}
.bg-secondary{
    background-color: var(--bs-secondary) !important;
}
.bg-warning{
    background-color: var(--bs-warning) !important;
}
.bg-info{
    background-color: var(--bs-info) !important;
}
.bg-light-green{
    background-color: var(--light-green) !important;
}

.wax-100{
    max-width: 100% !important;
}
/* Slider */
.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
   border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.slick-slider .slick-arrow{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    background-color: var(--bs-primary);
    border:none;
    text-indent: -999px;
    overflow: hidden;
    z-index: 1;
    font-family: 'Material Icons Round';
    transform: translateY(-50%);
}
.slick-slider .slick-arrow.slick-prev{
    left: 0;
}
.slick-slider .slick-arrow:after{
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
}
.slick-slider .slick-arrow.slick-prev:after{
    background-image: url(../images/slider-left-arrow.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.slick-slider .slick-arrow.slick-next{
    right: 0;
}
.slick-slider .slick-arrow.slick-next:after{
    background-image: url(../images/slider-right-arrow.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.slick-slider .slick-dots{
    list-style: none;
    display: flex;
    padding-left: 0;
    justify-content: center;
}
.slick-slider .slick-dots li{
    margin-right: 10px;

}
.slick-slider .slick-dots li:last-child{
    margin-right: 0;
}
.slick-slider .slick-dots li button{
    border: var(--bs-primary) solid 2px;
    height: 16px;
    width: 14px;
    border-radius: 50%;
    text-indent: -999px;
    overflow: hidden;
    display: flex;
    background: transparent;
    position: relative;
}
.slick-slider .slick-dots li.slick-active button:after{
    height: 5px;
    width: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--bs-secondary);
    content: "";
    border-radius: 50%;
}
h1{
    font-family: "Letter Kids";
}
h2{
    font-size: 44px;
}
img{
    max-width: 100%;    
}

body{
    overflow-x: hidden;
    font-family: "Quicksand", Sans-serif;
    font-size: 16px;
}
/* home page css */
/* header */

header .logo{
    max-width: 164px;
    margin-right:2rem;
    margin-bottom: 0.75rem;
}
.menu-icon{
    display:flex;
    flex-direction: column;
    width: 40px;
}
.menu-icon span{
    width: 100%;
    height: 3px;
    border-radius: 6px;
    background-color: #fff;
    margin-bottom: 6px;
    transition: all 0.35s ease-in-out;
}
.menu-icon span:last-child{
    margin-bottom: 0;
}
.menu-icon[aria-expanded="true"] span:first-child{
    transform: rotate(47deg) translate(9px, 8px);
}
.menu-icon[aria-expanded="true"] span:last-child{
    transform: rotate(-47deg) translate(4px, -4px);
}
.menu-icon[aria-expanded="true"] span:nth-child(2){
    opacity: 0;
}
/* menu css start*/
.nav-link{
    color: #fff;
    transform: scale(1);
    transition: transform 0.35s ease-in-out;
    font-weight: 600;
    padding-left: 1rem;
    padding-right: 1rem;
}

.nav-link.active, .nav-link:hover, .nav-link:focus{
    color: var(--bs-warning);
}
.nav-link:-webkit-any-link:focus-visible{
    outline: 0;
}
.nav-link:hover{
    transform: scale(1.15);
}
/* menu css end*/
header{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 3;
}
header.sticky{
    position: fixed;
    background-color: var(--bs-primary);
}
.head-contact{
    display: flex;
    flex-direction: column;
    text-align: end;
    color: #fff;
}
.head-contact a{
    color: var(--bs-warning);
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
}
.head-contact a:hover{
    color: #fff;
}
/* header*/


/*banner*/
main{
    overflow-x: hidden;
}
.banner-section{
    position: relative;
    padding-top: 96px;
}
.banner-middle{
    display: flex;
    justify-content: center;
    padding-top: 7rem;
    padding-bottom: 5.5rem;
    position: relative;
}
.banner-content{
    max-width: 668px;
    background-image: url(../images/the_pedagogy_owl_shape.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    padding: 1rem;
    text-align: center;
    min-height: 370px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 2rem;
    padding-right: 2rem;
    opacity: 0;
    animation: fadein 2s forwards 0.5s;
}
.banner-content h1{
    font-size: 53px;
    line-height: 58px;
    font-weight: 400;
    color: rgb(250, 204, 15);
    opacity: 0;
    animation: fadein 2s forwards 1.2s;
}
.banner-content h6{
    font-size: 25px;
    line-height: 31px;
    font-weight: 700;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    opacity: 0;
    animation: fadein 2s forwards 1.7s;
}
.banner-content p{
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    opacity: 0;
    animation: fadein 2s forwards 2.2s;
}
.banner-boy{
    position: absolute;
    bottom: 130px;
    right: 19%;
    max-width: 273px;
    opacity: 0;
    animation: fadein 2s forwards 2.5s;
}
.sun-block{
    position: absolute;
    top: 94px;
    right: 0; 
    width: 85px;
    height: 174px;
}

.sun-icon{
    position: absolute;
    top: 0;
    right: 0;
    background-image: url(../images/sun_1.svg);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 130px;
    height: 100%;
    width: 0;
}
.sun-block .sun-icon{
    animation: width 1.5s forwards ;
}
.sun-icon span{
    background-position: center center;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    opacity: 0;
    animation: fadein 1s infinite;
}
.sun-icon span:first-child{
    background-image: url(../images/sun-dot1.svg);
    height: 35px;
    width: 25px;
    top: -2.5%;
    left: 40%;
    animation-delay: 1s;
}
.sun-icon span:nth-child(2){
    background-image: url(../images/sun-dot2.svg);
    height: 24px;
    width: 25px;
    top: 29%;
    left: 10%;
    animation-delay:1.2s;
}
.sun-icon span:nth-child(3){
    background-image: url(../images/sun-dot3.svg);
    height: 21px;
    width: 26px;
    top: 57%;
    left: 0;
    animation-delay:1.4s;
}
.sun-icon span:nth-child(4){
    background-image: url(../images/sun-dot4.svg);
    height: 23px;
    width: 21px;
    top: 83.5%;
    left: 36%;
    animation-delay:1.6s;
}
.pink-dot{
    position: absolute;
    bottom: 124px;
    left: 17%;
    animation-delay: 0.5s;
}
.yellow-dot{
    position: absolute;
    right: 11.5%;
    top: 120px;
    max-width: 32px;
}
.green-dot{
    position: absolute;
    left: 10%;
    top: 120px;
    animation-name: doAni1;
}
/*banner*/
/* skyblue section */
.sky-blue-sec{
    padding-bottom: 19.5rem;
    position: relative;
}
.rainbox-block{
    overflow: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    padding-bottom: 30%;
    width: 21%;
}
.rainbow-img{
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/rainbow_1.svg);
    background-repeat: no-repeat;
    background-position: right top;
    width: 100%;
    background-size: 600px;
    opacity: 0;
    animation: rainbow-ani 3s forwards 3s;
}
.toy-Block{
    position: absolute;
    left: 31%;
    bottom: 17%;
    height: 160px;
    width: 230px;
}
.toy_1{
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: url(../images/toy_1.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom center;
    height: 100%;
    width: 100%;
    animation: arrangeBox 3.5s forwards 1.5s;
    opacity: 0;
}
.toy_orange{
    position: absolute;
    right: 38%;
    top: 33%;
    animation: fadein 5s forwards 0.7s;
    opacity: 0;
}
.toy_pink{
    position: absolute;
    right: 4%;
    top: 15%;
    max-width: 7rem;
    animation: fadein 5s forwards;
}

/* skyblue section */
/* tab section */
.tab-sec{
    padding-top: 5rem;
    position: relative;
    overflow: hidden;
    padding-bottom: 14rem;
}
.tab-sec .nav-tabs{
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    border-bottom: none;
}
.tab-sec .nav-item{
    margin-right: 1rem;
    margin-left: 1rem;
}
.tab-sec .nav-item .nav-link{
    background-image: url(../images/tab-normal-1.svg);
    background-position: center center;
    background-repeat: no-repeat;
    width: 258px;
    height: 80px;
    color: var(--bs-primary);
    border:none;
    background-color:transparent ;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Quicksand', sans-serif;
}
.tab-sec .nav-item .nav-link span{
    white-space: nowrap;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    font-weight: bold;
    font-size: 13px;
}
.tab-sec .nav-item .nav-link.active{
    background-image: url(../images/tab-active.svg);
}
.tab-sec .nav-item .nav-link:hover{
    transform: none;
}
.tab-sec .LetterS-block{
    top: 12rem;
}
.blueSun-block{
    position: absolute;
    top: 10rem;
    left: 0;
    width: 123px;
    height: 263px;
}
.blue-sun{
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/sun_pink_sky_1.svg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 123px;
    height: 100%;
    width: 0;
}
.blueSun-block.active .blue-sun{
    animation: width 1s forwards;
}
.blue-sun span{
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    opacity: 0;
}
.blue-sun span:first-child{
    background-image: url(../images/sun_pink_dot1.svg);
    height: 38px;
    width: 25px;
    top: 0%;
    left: 36%;
}
.blue-sun span:nth-child(2){
    background-image: url(../images/sun_pink_dot2.svg);
    height: 30px;
    width: 26px;
    top: 26%;
    left: 67%;
}
.blue-sun span:nth-child(3){
    background-image: url(../images/sun_pink_dot3.svg);
    height: 25px;
    width: 28px;
    top: 58%;
    left: 71%;
}
.blue-sun span:last-child{
    background-image: url(../images/sun_pink_dot4.svg);
    height: 38px;
    width: 24px;
    position: absolute;
    top: 82%;
    left: 46%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    opacity: 0;
}
.blueSun-block.active span{
    animation: fadein 1s infinite;
}
.blueSun-block.active span:first-child{
    animation-delay: 1s;
}
.blueSun-block.active span:nth-child(2){
    animation-delay:1.2s;
}
.blueSun-block.active span:nth-child(3){
    animation-delay:1.4s;
}
.blueSun-block.active span:last-child{
    animation-delay:1.6s;
}

.tab-sec .round{
    height: 150%;
    position: absolute;
    top: 74%;
    left: -40%;
    right: -40%;
    border-radius: 44%;
}
.tab-sec .tab-pane{
    text-align: center;
}
.tab-sec .container{
    position: relative;
    z-index: 1;
    transform: translateY(150px);
    transition: transform 0.5s ease-in;
}
.tab-sec.active .container{
    transform: translateY(0);
}
.pencilbox{
    position: absolute;
    bottom: 5%;
    left: 16%;
    max-width: 4rem;
    opacity: 0;
}
.pencilbox.active{
    animation: fadein 3.5s forwards;
}
.colorbox{
    position: absolute;
    bottom: 23%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 250px;
}
.colorbox img{
    width: 100%;
}
.tab-sec .toy-block{
    position: absolute;
    bottom: 5%;
    right: 16%;
    width: 200px;
    height: 140px;
}
.tab-sec .toy1{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../images/toy_1.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    opacity: 0;
    
}
.tab-sec .toy-block.active .toy1{
    animation: arrangeBox 3.5s forwards;
}
.pinkangle{
    position: absolute;
    bottom: 37%;
    left: 6%;
}
.bluedot{
    position: absolute;
    bottom: 30%;
    right: 16%;
}
/* tab section */
/* video section */
.video-sec{
    padding-top: 5rem;
    padding-bottom: 16rem;
    position: relative;
}
.video-sec .container{
    position: relative;
    z-index: 1;
    transform: translateY(150px);
    opacity: 0;
    transition: all 1s linear;
}
.video-sec.active .container{
    transform: translateY(0);
    opacity: 1;
}
.video-block{
    border-radius: 30px;
    border: #FACC0F solid 17px;
    position: relative;
}
.video-block .video-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50% , -50%);
    transform: translate(-50% , -50%);
    color: #fff;
    opacity: 0.7;
    font-size: 5rem;
    cursor: pointer;
}
.video-block img{
    border-radius: 10px;
}

.video-text{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 4rem;
    padding-right: 7rem;
    color: #fff;
    
}
.video-text h3{
    line-height: 1.5;
    font-size: 36px;
    font-weight: 800;
}

.video-text span{
    color: #FACC0F;
    display: flex;
    font-size: 43px;
}
.video-sec .sun-block{
    top: 2.5rem;
}
.video-sec .sun-block.active .sun-icon{
    animation: width 1.5s forwards;
}
.readingboy{
    position: absolute;
    bottom: -4.5rem;
    right: 12%;
    max-width: 200px;
    z-index: 1;
    opacity: 0;
}
.readingboy.active{
    animation: fadein 5s forwards 0.5s;
}
.confetti_yellow{
    position: absolute;
    top: 25%;
    left: 10%;
}
.confetti_white{
    position: absolute;
    top: 25%;
    right: 18%;
    max-width: 20px;
}
/* video section */
/* out academy */
.ourAcademic{
    color: #fff;
    padding-top: 4rem;
    padding-bottom: 5rem;
    position: relative;
    
}
.ourAcademic h2{
    font-family: 'Letter Kids';
    font-weight: 400;
    letter-spacing: 2px;
    margin-bottom: 3rem;
}
.ourAcademic .prev-btn, .ourAcademic .next-btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius:50%;
    background-color: var(--bs-warning);
    height: 55px;
    width: 55px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ourAcademic .prev-btn .material-icons-round, .ourAcademic .next-btn .material-icons-round{
    font-weight: bold;
}
.ourAcademic .carousel-inner{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.ourAcademic .prev-btn{ left: 0;}
.ourAcademic .next-btn{ right: 0;}

/* out academy */
/* out Deliverable Chart */
.deliverable-sec{
    padding-top: 4rem;
    padding-bottom: 13rem;
    position: relative;
    background-image: url(../images/wave-shape.svg);
    background-repeat: no-repeat;
    background-position: left calc(100% + 2px);
    background-size: 65%;
}
.deliverable-sec .deliver-chart-content{
    padding-right: 4rem;
}
.deliverable-sec .deliver-chart-content p{
    text-align: center;
 }
 .deliverChart-text{
     overflow: hidden;
     padding-top: 7px;
 }
 .deliverChart-text > .row {
    transform: translateX(100%);
    transition: transform 1.5s linear;
 }
.deliverable-sec.active .deliverChart-text > .row{
    transform: translateX(0);
}
.deliverable-sec .raisingHandBoy{
    position: absolute;
    bottom: 1rem;
    left: 18%;
    max-width: 18%;
    opacity: 0;
}
.deliverable-sec .raisingHandBoy.active{
    animation: fadein 5s forwards 0.5s;
}
.deliverable-sec .blueSun-block{
    bottom: 8rem;
    top: inherit;
}
.blueBallon-img{
    position: absolute;
    top: -11%;
    left: 50px;
    max-width: 9%;
}
.LetterS-block{
    position: absolute;
    top: 4rem;
    right: 0;
    height: 320px;
    width: 100px;
    overflow: hidden;
}
.LetterS{
    position: absolute;
    top: 0;
    background-image: url(../images/S_pink_blue.svg);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 200%;
    height: 100%;
    width: 100%;
    right: -100%;
}
.LetterS-block.active .LetterS{
    animation: right 0.5s forwards;
} 
.deliverable-sec h2{
    color: var(--bs-secondary);
    font-family: 'Letter Kids';  
    margin-bottom: 2rem;
}
.deliverable-sec .deliver-option{
    margin-bottom: 1rem;
}
.deliverable-sec .deliver-option select{
    background-color: var(--bs-primary);
    border-radius: 40px;
    padding:17px 30px 18px;
    font-size: 20px;
    color: var(--bs-warning);
    border: #000 solid 2px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    background-image: url(../images/selectArrow.svg);
}

.deliverable-sec .deliver-option select option{
    font-weight: 400;
    padding-left: 10px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.deliverable-sec .deliver-option select:focus{
    outline: 0;
    box-shadow: none;
}
.boxs{
    border-radius: 20px;
    padding: 2rem;
    color: #fff;
    box-shadow: 5px -5px 1px 0px rgb(0 0 0);
    position: relative;
    background-color: var(--bs-secondary);
    margin-bottom: 1rem;
}
.pin-group{
    position: absolute;
    top: 0;
    left: -7px;
    bottom: 0;
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    
}
.pin-group .pin{
    position:relative;
}
.pin-group .pin:before{
    width: 18px;
    height: 8px;
    border-radius: 40%;
    background-color: #000;
    position: absolute;
    top: 10%;
    left: -2px;
    content: "";
    z-index: 1;
}
.pin-group .pin:after{
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: -1px;
    left: 8px;
    content: "";
}
.boxs ol{
    padding-left: 17px;
    margin-bottom: 0;
}
.boxs ol li{
    font-size: 18px;
    margin-bottom: 0.5rem;
}
.boxs ol li:last-child{
    margin-bottom: 0;
}
.boxs h3{
    color:var(--bs-warning);
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    font-size: 36px;
}
.boxs.yellow{
    background-color: var(--bs-warning);
    color: #000;
}
.boxs.yellow h3{
    color:var(--bs-primary);
}
/* out Deliverable Chart */
/* usp sec */
.usp-sec{
    padding-top: 5rem;
    padding-bottom: 7rem;
    position: relative;
}
.usp-sec h2{
    font-size: 37px;
    font-weight: 700;
    position: relative;
    color: var(--bs-primary);
    text-align: center;
}
.usp-sec h2::after{
    height: 112px;
    width: 188px;
    position: absolute;
    top: -75px;
    left: 50%;
    transform: translateX(-50%);
    background-image:url(../images/ups-title-icon.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    content: "";
}
.usp-sec h2 span{
    position: relative;
    z-index: 1;
}
.usp-sec .card{
    background: transparent;
    border: none;
    align-items: center;
    transform: translateY(150px);
    transition: transform 0.5s ease-in;
}
.usp-sec.active .card{
    transform: translateY(0);
    transition-delay: 0.5s;
}
.usp-sec.active .card:nth-child(2){
    transition-delay: 0.8s;
}
.usp-sec.active .card:nth-child(3){
    transition-delay: 1.1s;
}
.usp-sec.active .card:last-child{
    transition-delay: 1.5s;
}
.usp-sec .card img{
    max-width: 200px;
    transition: transform 0.35s ease-in-out;
}
.usp-sec .card:hover img{
    transform: rotate(360deg);
}
.usp-sec .card-body{
    text-align: center;
}
.usp-sec .card-body h3{
    color: #D3559E;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}
.usp-sec .card-body p{
    color: #000000;
    font-weight: 600;
}
.usp-sec .blueSun-block{
    left: inherit;
    right: 0;
    top: 2rem;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.rainbow-left{
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 14rem;
    background-image: url(../images/rainbow_2.svg);
    background-repeat: no-repeat;
    background-size: 224px;
    background-position: right calc(100% + 2px);
    height: 235px;
    width: 199px;
    opacity: 0;
}
.rainbow-left.active, .rainbow-right.active{
    animation: fadein 2s forwards;
}

.rainbow-right{
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 14rem;
    transform: rotateY(180deg);
    background-image: url(../images/rainbow_2.svg);
    background-repeat: no-repeat;
    background-size: 224px;
    background-position: right calc(100% + 2px);
    height: 235px;
    width: 199px;
    opacity: 0;
}
.pink-dot{
    position: absolute;
    left: 5%;
    bottom: 45%;
    max-width:25px;
}
/* ups sec */
/* our growth */
.growth-sec{
    position: relative;
    padding-top: 3rem;
    padding-bottom: 5rem;
}
.growth-sec .map-story{
    display: flex;
    justify-content: center;
}
.growth-sec .LetterS-block{
    top: 10%;       
}
.white-cloud{
    width: 277px;
    height: 63px;
    position: absolute;
    left: -100%;
    bottom: 0;
    background-image: url(../images/cloud_small_white.svg);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100%;
    animation: cloudAni 30s infinite linear 0s; 
}
.growth-sec .container{
    position: relative;
}
.growth-sec h2{
    color: var(--bs-warning);
    font-family: 'Letter Kids';
    font-size: 74px;
    position: absolute;
    left: 0;
    top: 3rem;
    max-width: 21rem;
    letter-spacing: 2px;
}
.growth-sec .LetterS{
    background-image: url(../images/S_pink_blue1.svg);
}
.total-school-count{
    position: absolute;
    right: 33%;
    bottom: 10%;
    border-radius: 20px;
    background-color: #fff;
    padding: 1.5rem 2.5rem;
    font-size: 25px;
    font-weight: 600;
    font-family: 'Quicksand', sans-serif;     
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.total-school-count .count-block{
    color: var(--bs-secondary);
    display: flex;
    font-size: 33px;
    line-height: 1;
}
.total-school-count i{
    font-style: normal;
    
}
/* our growth*/
/* slick slider */
.text-effect1{
    position: relative;
    overflow: hidden;
}
.text-effect1:after{
    background-color: #fff;
    width: 100%;
    top: 0;
    bottom: 0;
    transition: width 2s ease;
    content: "";
    position: absolute;
    right: 0;
}

.testimonial-sec.active .text-effect1:after{
    width: 0;
}

.testimonial-sec{
    padding-top: 10rem;
    padding-bottom: 10rem;
    position: relative;
}
.testimonial-sec .container{
    position: relative;
    z-index: 1;
}
.testimonial-slider{
    transform: translateY(150px);
    transition: transform 1s ease-in 0.5s;
}
.testimonial-sec.active .testimonial-slider{
    transform: translateY(0);   
}
.testimonial-slider .item{
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}
.testimonial-slider .item figure{
    border: var(--bs-secondary) solid 7px;
    border-radius: 10px;
    position: relative;
}
.testimonial-slider .item figure img{
    border-radius: 5px;
}
.testimonial-slider .item h3{
    color: var(--bs-primary);
    font-size: 24px;
    font-weight: 700;
}
.testimonial-slider .item figure .material-icons-round{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: .8;
    text-decoration: none;
    color: #fff;
    font-size: 60px;
    cursor: pointer;
}
.testimonial-slider .item figure .material-icons-round:hover{
    opacity: 1;
}
.testimonial-slider .slick-dots{
    margin-top: 1rem;
}
.testimonial-slider .slick-arrow{
    margin-top: -2.3rem;
}
.testimonial-sec h2{
    color: var(--bs-primary);
    font-family: 'Letter Kids';
    font-size: 74px;
    font-weight: normal;
    letter-spacing: 2px;
    margin-bottom: 3rem;
}
.testimonial-sec .yellow-dot{
    position: absolute;
    top: 10%;
    left: 13%;
    width: 32px;
}
.testimonial-sec .blue-dot{
    position: absolute;
    top: 16%;
    right: 10%;
    animation-name: doAni1;
}
.testimonial-sec .pink-dot{
    position:absolute;
    bottom: 4rem;
    left: 60%;
}
.testimonial-sec .first-ballon{
    position: absolute;
    bottom: 50px;
    right: 3rem;
}
.testimonial-sec .blue-triangle{
    position: absolute;
    bottom: 16rem;
    left: 3rem;
    animation-name: doAni1;
}
/* slick slider */

/* free demo*/ 
.liveDemo-sec{
    padding-top: 5rem;
}
.liveDemo-sec .demo-content h2{
    color: var(--bs-warning);
    font-size:74px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    line-height: 1;
    margin-bottom: 2rem;
    padding-top: 47px;
    transform: rotateX(-90deg) scale(0.5) translateY(-20px);
    transform-style: preserve-3d;
    transition: transform 1s linear;
}
.liveDemo-sec.active .demo-content h2{
    transform: rotateX(0deg) scale(1) translateY(0px);
}
.liveDemo-sec .demo-content h2:after{
    content: "";
    background-image: url(../images/sp-flag.svg);
    background-repeat: no-repeat;
    background-position: center center;
    height: 64px;
    width: 46px;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    background-size: 100%;

}
.liveDemo-sec .container{
    display: flex;
    justify-content: center;
}
.liveDemo-sec .demo-content{
    text-align: center;
}
.liveDemo-sec .btn{
    text-transform:uppercase ;
    opacity: 0;
}
.liveDemo-sec.active .btn{
    animation: fadein 0.5s forwards 1.2s;
}
.charater-group{
    display: flex;
    align-items: baseline;
    margin-top: 5rem;
    position: relative;
    padding-left: 2rem;
    padding-right: 2rem;
}
.charater-group.active .charater{
    animation: fadein 2s forwards;
}
.charater-group.active{
    animation: fadein 1s forwards;
}
.charater-group.active .bg1{
    animation-delay: 0.3s;
}
.charater-group.active .bg2{
    animation-delay: 0.6s;
}
.charater-group.active .bg3{
    animation-delay: 0.9s;
}
.charater-group.active .bg4{
    animation-delay: 1.2s;
}


.charater{
    flex: 1;
    display: flex;
    align-items: end;
    justify-content: center;
    padding-bottom: 4.5%;
    padding-top: 7%;
    position: relative;
    z-index: 1;
    opacity: 0;
}
.charater .bg{
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    bottom: 0;
    border-radius: 50% 50% 0 0;
    animation: fadebg 5s infinite ;
}
.charater img{
    max-width: 18rem;
    position: relative;
    z-index: 1;
    width: 65%;
}
.charater.bg1 .bg{
    background: #744a98; 
    background: -moz-linear-gradient(top,  #744a98 0%, #33408e 100%); 
    background: -webkit-linear-gradient(top,  #744a98 0%,#33408e 100%); 
    background: linear-gradient(to bottom,  #744a98 0%,#33408e 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#744a98', endColorstr='#33408e',GradientType=0 ); 
    top: 0;
}
.charater.bg2 .bg{
    background: #7c7662;
    background: -moz-linear-gradient(top,  #7c7662 0%, #364586 100%);
    background: -webkit-linear-gradient(top,  #7c7662 0%,#364586 100%);
    background: linear-gradient(to bottom,  #7c7662 0%,#364586 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c7662', endColorstr='#364586',GradientType=0 );
    top: 13%;
    animation-delay:1s;
}
.charater.bg3 .bg{
    background: #1b60ad;
    background: -moz-linear-gradient(top,  #1b60ad 0%, #2e418d 100%);
    background: -webkit-linear-gradient(top,  #1b60ad 0%,#2e418d 100%);
    background: linear-gradient(to bottom,  #1b60ad 0%,#2e418d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b60ad', endColorstr='#2e418d',GradientType=0 );
    top: 12%;
    animation-delay:2s;
}
.charater.bg4 .bg{
    top: 3%;
    background: #66817a;
    background: -moz-linear-gradient(top,  #66817a 0%, #334489 100%);
    background: -webkit-linear-gradient(top,  #66817a 0%,#334489 100%);
    background: linear-gradient(to bottom,  #66817a 0%,#334489 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66817a', endColorstr='#334489',GradientType=0 );
    animation-delay:1s;
}
.charater-group .yellow-bg-left{
    position: absolute;
    top: -73%;
    left: 0;
    width: 11%;
    bottom: 0;
    overflow: hidden;
    opacity: 0;    
}
.charater-group .yellow-bg-left .bg, 
.charater-group .yellow-bg-right .bg{
    background: #d2b325;
    background: -moz-linear-gradient(top,  #d2b325 0%, #fed700 0%, #f6c81b 0%, #f1ca0d 0%, #eec312 0%, #e9be17 1%, #e3bc17 1%, #dfb91a 1%, #dcb518 2%, #d2af1f 2%, #ccab1e 3%, #caa822 3%, #c1a223 4%, #bd9e29 4%, #b2982a 5%, #ad942f 5%, #a68d31 6%, #a18c31 6%, #9c8736 7%, #968336 7%, #94823a 8%, #907d39 8%, #887942 9%, #837641 9%, #817440 10%, #766b4b 11%, #6e674b 12%, #666052 13%, #525460 17%, #4e5160 18%, #4e5164 18%, #494e64 19%, #494d68 19%, #444a6a 21%, #444a6e 21%, #394577 25%, #3a467a 25%, #374278 27%, #38437b 27%, #37437f 28%, #334381 31%, #324186 32%, #2f4189 36%, #2f408e 39%, #314290 40%, #314290 43%, #304294 45%, #314395 100%, #314397 100%, #3b4e9a 100%);
    background: -webkit-linear-gradient(top,  #d2b325 0%,#fed700 0%,#f6c81b 0%,#f1ca0d 0%,#eec312 0%,#e9be17 1%,#e3bc17 1%,#dfb91a 1%,#dcb518 2%,#d2af1f 2%,#ccab1e 3%,#caa822 3%,#c1a223 4%,#bd9e29 4%,#b2982a 5%,#ad942f 5%,#a68d31 6%,#a18c31 6%,#9c8736 7%,#968336 7%,#94823a 8%,#907d39 8%,#887942 9%,#837641 9%,#817440 10%,#766b4b 11%,#6e674b 12%,#666052 13%,#525460 17%,#4e5160 18%,#4e5164 18%,#494e64 19%,#494d68 19%,#444a6a 21%,#444a6e 21%,#394577 25%,#3a467a 25%,#374278 27%,#38437b 27%,#37437f 28%,#334381 31%,#324186 32%,#2f4189 36%,#2f408e 39%,#314290 40%,#314290 43%,#304294 45%,#314395 100%,#314397 100%,#3b4e9a 100%);
    background: linear-gradient(to bottom,  #d2b325 0%,#fed700 0%,#f6c81b 0%,#f1ca0d 0%,#eec312 0%,#e9be17 1%,#e3bc17 1%,#dfb91a 1%,#dcb518 2%,#d2af1f 2%,#ccab1e 3%,#caa822 3%,#c1a223 4%,#bd9e29 4%,#b2982a 5%,#ad942f 5%,#a68d31 6%,#a18c31 6%,#9c8736 7%,#968336 7%,#94823a 8%,#907d39 8%,#887942 9%,#837641 9%,#817440 10%,#766b4b 11%,#6e674b 12%,#666052 13%,#525460 17%,#4e5160 18%,#4e5164 18%,#494e64 19%,#494d68 19%,#444a6a 21%,#444a6e 21%,#394577 25%,#3a467a 25%,#374278 27%,#38437b 27%,#37437f 28%,#334381 31%,#324186 32%,#2f4189 36%,#2f408e 39%,#314290 40%,#314290 43%,#304294 45%,#314395 100%,#314397 100%,#3b4e9a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2b325', endColorstr='#3b4e9a',GradientType=0 );
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200%;
    border-radius:50% 50% 0 0 ;
    animation: fadebg 5s infinite ;
}
.charater-group .yellow-bg-right{
    position: absolute;
    top: -73%;
    right: 0;
    width: 11%;
    bottom: 0;
    overflow: hidden;
    opacity: 0;
}
.charater-group .yellow-bg-left .bg{
    left: -100%;
}
.charater-group .yellow-bg-right .bg{
    right: -100%;
}
.charater-group.active .yellow-bg-right, .charater-group.active .yellow-bg-left{
    animation: fadein 2s forwards;
}
/* free demo*/ 

/* recent post */
.recent-post{
    background-color: #F8CA17;
    padding-top: 5rem;
    padding-bottom: 30%;
    overflow: hidden;
}
.recent-post h2{
    color: var(--bs-primary);
    text-align: center;
    font-size: 54px;
    font-weight: 700;
    position: relative;
    padding-top: 2rem;
    margin-bottom: 4rem;
} 
.recent-post h2 span{
    position: relative;
    overflow: hidden;
}
.recent-post h2 span:before{
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    background-color: #F8CA17;
    bottom: 0;
    width: 100%;
}
.recent-post.active h2 span:before{
    animation: pencileMove 3.5s forwards 0.05s;
}
.recent-post h2 span .pencil-icon{
    position: absolute;
    top: -41%;
    left:50% ;
    transform: translateX(-50%);
    width: 97px;
    height: 14px;
    background-image: url(../images/pencil.png);
    background-size: 100%;
    background-repeat: no-repeat;
    opacity: 0;
}
.recent-post.active h2 span .pencil-icon{
    animation: pencil-move 3.1s forwards 0.15s;
}
.recentpost{
    padding-left: 1rem;
    padding-right: 1rem;
    transform: translateY(150px);
    transition: transform 0.5s ease-in 0.5s;
}

.recent-post.active .recentpost{
    transform: translateY(0);
}
.recentpost .item{
    background-color: #fff;
    border-radius: 20px;
    padding: 2rem;
    margin-right: 0.5rem;
    margin-left: 0.5rem;
}
.recentpost .item h4{
    color: var(--bs-primary);
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    overflow: hidden;
}
/* recent post */
/*footer*/
.cloud-block{
    position: relative;
}
footer{
    margin-top: -14%;
    position: relative;
}
.footer-bg{
    background-color: #29377E;
    padding-top: 5rem;
    padding-bottom: 19%;
    position: relative;
    z-index: 1;
    color: #fff;
    font-weight: 600;
    background-image: url(../images/grass.svg);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: calc(100% + 1rem);
}
footer ul{
    list-style: none;
    padding-left: 0;
}
footer ul.link li{
    margin-bottom: 0.5rem;
}
footer ul.link li a{
    color: #fff;
    text-decoration: none;
    font-family: "Roboto", Sans-serif;
    font-size: 18px;
    font-weight: 400;
}
footer ul.link li a:hover{
    color: var(--bs-warning);
}
footer .contactus{
    display: flex;
    flex-direction: column;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
footer .contactus a{
    color: var(--bs-warning);
    text-decoration: none;
    font-size: 20px;
}
footer .contactus a:hover{
    color: #fff;
}
footer .social-link{
    display: flex;
    margin-top: 1rem;
}
footer .social-link li{
    margin-right: 0.5rem;
}
footer .social-link li a{
    color: #fff;
    font-size: 20px;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items:center;
    border-radius:50% ;
    text-decoration: none;
}
footer .social-link li a.linkedin{
    background-color: #0077b5;    
}
footer .social-link li a.facebook{
    background-color: #3b5998;    
}
footer .social-link li a.youtube{
    background-color: #cd201f;    
}
footer .cloud-bg{
    background-image: url(../images/cloud.png);
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 14%;
    background-position: top center;
    width: 100%;
    display: block;
    z-index: 1;
    position: relative;
}
footer .white-sun{
    background-image:url(../images/sun_face_white.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    position: absolute;
    bottom: -130%;
    left: 41%;
    padding: 9.82%;
    transition: bottom 2s linear;
}
footer .cloud-block.active .white-sun{
    bottom: -17%;
}
footer .reading-boy{
    background-image: url(../images/boy_reading_book.svg);
    background-position: top center;
    background-size: 100%;
    background-repeat: no-repeat;
    position: absolute;
    right: 22%;
    bottom: 4%;
    z-index: 2;
    padding-bottom: 16.5%;
    padding-left: 10%;
    opacity: 0;
}
footer .reading-boy.active{
    animation: fadein 5s forwards 1s;
}
footer .glob{
    background-image: url(../images/world_map_stand.svg);
    background-repeat: no-repeat;
    background-position: center center;
    position: absolute;
    bottom: 3%;
    left: 20%;
    z-index: 2;
    padding-left: 7%;
    padding-top: 10%;
    background-size: 100%;
    opacity: 0;
}
footer .glob.active{
    animation: fadein 5s forwards  0.3s;
}
footer .alphA{
    background-image: url(../images/toy_a.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    padding-left: 3.5%;
    padding-top: 3.5%;
    position: absolute;
    left: 34%;
    bottom: 8%;
    z-index: 2;
    opacity: 0;
}
footer .alphA.active{
    animation: fadein 5s forwards ;
}
footer .alphC{
    background-image: url(../images/toy_c.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    padding-left: 3.5%;
    padding-top: 3.5%;
    position: absolute;
    right: 36%;
    bottom: 7%;
    z-index: 2;
    opacity: 0;
}
footer .alphC.active{
    animation: fadein 5s forwards ;
}
footer .book-icon{
    background-image: url(../images/open_book.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    position: absolute;
    left: 43%;
    bottom: 4%;
    z-index: 2;
    padding-left: 12%;
    padding-top: 6%;
    opacity: 0;
}
footer .book-icon.active{
    animation: scale 5s forwards 0.5s;
}
footer .books{
    background-image: url(../images/books_2.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    padding-left: 7.5%;
    padding-bottom: 5.6%;
    position: absolute;
    right: 10%;
    bottom: 6%;
    z-index: 2;
    opacity: 0;
}
footer .books.active{
    animation: scale 5s forwards 0.60s;
}
footer .LetterS-block{
    top: 31%;
    z-index: 2;
    padding-left: 4%;
    padding-bottom: 15%;
    height: inherit;
    width: inherit;
}
.blue-s{
    background-image: url(../images/blue-s.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 230%;
    position: absolute;
    right: -100%;
    top: 0;    
    height: 100%;
    width: 100%;
}
footer .LetterS-block.active .blue-s{
    animation: right 0.5s forwards;
}
footer .pink-sun{
    background-image: url(../images/sun_half_pink.svg);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100%;
    padding-top: 15%;
    padding-left: 6%;
    position: absolute;
    left: 0;
    top: 29%;
    z-index: 2;
    opacity: 0;
}
footer .pink-sun.active{
    animation: fadein 5s forwards 1.2s;
}

footer .rainbow-left{
    background-image: url(../images/rainbow_2.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 100%;
    padding-top: 19%;
    padding-right: 19%;
    position: absolute;
    left: -3em;
    bottom: 0;
    z-index: 2;
    opacity: 0;
}
footer .pink-sun.active ~ .rainbow-left{
    animation: fadein 5s forwards 1.5s;
}
.copy-text{
    text-align: center;
}

/*footer*/

/* video modal */
.video-modal-bg{
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.video-modal-bg.show{
    opacity: 1;
    visibility: visible;
}
.video-dailog{
    max-width: 640px;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
}
.video-content{
    position: relative;
    padding: 1rem;
    padding-bottom: 53.75%;
    border-width: 10px;
    border-color: var(--bs-secondary);
    border-style: solid;
    border-radius: 20px;
}
.video-content iframe{
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 10px;
}
.video-content .close-btn{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: none;
    background: transparent;
    color: #fff;
    width: 32px;
    height: 32px;
    line-height: 1;
}

/* video modal */
/* home page css */

/* about page */
/* banner */
.about-section{
    padding-top: 11rem;
    padding-bottom: 19rem;
    position: relative;
}
.about-section h1{
    font-size: 59px;
    font-weight: 100;
    opacity: 0;
    animation: fadein 3s forwards 0.5s;
    line-height: 1;
}
.Quickstand{
    font-family: "Quicksand", Sans-serif;
}
strong.Quickstand{
    font-weight: 800;
}
.about-section .LetterS-block{
    top: 14%;
    z-index: 2;
    height: 257px;
    width: 70px;
    right: inherit;
    left: 0;
}
.about-section .LetterS-block .blue-s{
    background-position: right center;
    right: inherit;
    left: -100%;
    animation: left 0.75s forwards 1s;
}
/* banner */
/* sky banner */
.inner-sky-sec{
    position: relative;
    padding-bottom: 9rem;
}
.banner-img{
    max-width: 775px;
    margin-top: -16.5rem;
    opacity: 0;
    animation: fadein 3s forwards 1.5s;
}
.aboutpage .toy-Block{
    right: 5%;
    top: 5%;
    height: 116px;
    width: 160px;
    left: inherit;
}
.aboutpage .rainbox-block{
    padding-bottom: 280px;
    width: 330px;
}
.aboutpage .sky-blue-sec .rainbow-img{
    background-size: 135%;
}
.about-section .pink-dot{
    left: 20%;
}
/* sky banner */
/* about content */
.about-content{
  padding-top:15rem;
  padding-bottom:12rem;
  position: relative;
  background-image: url(../images/about-bottom-bg.png);
  background-position:  center calc(100% + 2px);
  background-repeat: no-repeat;
  background-size: 100%;
}
.aboutImg{
    border-radius: 3.5rem;
    overflow: hidden;
    max-width: 520px;
    border: var(--bs-primary) solid 10px;
    margin-left: 1rem;
}
.about-Img{
    position: relative;
    z-index: 1;
    background-color: #fbce0d;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.about-text{
    padding-left: 3rem;
    padding-right: 3.2rem;
    transform: translateX(-100%);
    transition: transform 1.5s linear 0.5s;
    display: flex;    
    justify-content: center;
    flex-direction: column;
}
.about-content.active .about-text{
    transform: translateX(0);
}
.about-text h3{
    color: var(--bs-primary);
    font-size: 37px;
    font-weight: 700;
}
.about-text p{
    font-size: 20px;
    font-weight: 500;
    color: #000;
}
.pencil-box{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}
.about-content .blueBallon-img{
    top: 58%;
    left: 10%;
    max-width: 120px;
}
.about-content .container{
    z-index: 2;
    position: relative;
}
.about-content .LetterS-block{
    top: inherit;
    bottom: 7rem;
    height: 244px;
    width: 45px;
}
.about-content .LetterS{
    background-size: 335%;
}
.about-content .green-dot{
    left: inherit;
    right: 18%;
    top: 8%;
}
.about-content .pink-dot{
    bottom: inherit;
    top: 12%;
    left: 15%;
}
.about-content .bluedot{
    bottom: 13%;
    right: 55%;
}
.planfly{
    position: absolute;
    top: 14%;
    right: 30%;
    max-width: 134px;
    opacity: 0;
}
.planfly.active{
    animation: fadein 1s forwards 0.5s;
}
/* about content */
/* mission */
.mission-sec{
    padding-top: 29rem;
    padding-bottom: 20rem;
    position: relative;
    background-image: url(../images/cloud1.png);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100%;
}
.mission-block{
    overflow: hidden;
}
.missionText{
    color: #fff;
    margin-bottom: 5rem;
    padding-right: 4rem;
    transform: translateX(-100%);
    transition: transform 1s linear 1.2s;
}
.missionText:nth-child(2){
    transition-delay: 2s;
}
.mission-sec .container.active .missionText{
    transform: translateX(0);
}
.missionText:last-child{
    margin-bottom: 0;
}
.missionText h2{
    font-size: 37px;
    font-weight: 700;
}
.missionText p{
    font-size: 20px;
    font-weight: 500;
}
.mission-sec .title{
    position: relative;
    width: 100%;
    max-width: 355px;
    padding-top: 3rem;
    opacity: 0;
}
.mission-sec .container.active .title{
    animation: fadein 2s forwards ;
}
.mission-sec .title h2{
    position: relative;
    border-radius: 20px;
    background-color: var(--bs-warning);
    font-size: 42px;
    font-weight: 700;
    color: var(--bs-primary);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 6rem;
}

.mission-sec .title h2:after{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    border-radius: 50% 50% 20px 20px;
    transform: translateY(-43%);
    background-color: var(--bs-warning);
    content: "";
}
.mission-sec .title h2 span{
    position: relative;
    z-index: 1;
    transform: translateY(-40px);
    opacity: 0;
}
.mission-sec .container.active .title h2 span{
    animation: fadein 2s forwards 0.5s;
}
.mission-sec .telescopeboy{
    position: absolute;
    top: 40%;
    right: -42%;
    max-width: 355px;
    transform:  translateX(-150px);
    opacity: 0;
    transition: all 1s linear 0.5s;
}
.mission-sec .container.active .telescopeboy{
    transform: translateX(0);
    opacity: 1;
}
.mission-sec .confetti_yellow{
    left: inherit;
    right: 2%;
    top: 35%;
}
.mission-sec .pink-dot{
    bottom: 20%;
    left: 60%;
}
.mission-sec .green-dot{
    left: 50%;
}
.flyingstudent{
    position: absolute;
    right: 23%;
    top: 0;
    max-width: 300px;
    transform: translate(250%, 80%) scale(0);
}
.flyingstudent.active{
    animation: flyingstudent-ani 2s forwards;
}
@keyframes flyingstudent-ani {
    0%{
        transform: translate(250%, 80%) scale(0);
    }
    5%{
        transform: translate(250%, 80%) scale(1);
    }
    100%{
        transform: translate(0, 0) scale(1);
    }
}
.mission-sec .LetterS-block{
    top: 14%;
    z-index: 2;
    height: 257px;
    width: 70px;
    right: inherit;
    left: 0;
}
.mission-sec .LetterS-block .blue-s{
    background-position: right center;
    right: inherit;
    left: -100%;
    background-image: url(../images/yellow-s.svg);
}
.mission-sec .LetterS-block.active .blue-s{
    animation: left 0.75s forwards 1s;
}
.mission-sec .sun-block{
    top: inherit;
    bottom: 10%;
}
.mission-sec .sun-block .sun-icon{
    animation: none;
}
.mission-sec .sun-block.active .sun-icon{
    animation: width 1.5s forwards 1s;
}

/* mission */
/* team */
.team-sec{
    padding-top: 8em;
    padding-bottom: 20%;
    position: relative;
}
.team-sec h2{
    text-align: center;
    font-size: 37px;
    font-weight: 700;
    color: var(--bs-primary);
}
.team-sec h2 span{
    position: relative;
    overflow: hidden;
}
.team-sec h2 span:after{
    height: 100%;
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    transition: width 1s linear;
}
.team-sec h2.active span:after{
    width: 0;
}
.aboutpage footer .white-sun{
    background-image: url(../images/sun_face_yellow.svg);
}
.team-pic-grp{
    margin-top: 3rem;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.team-pic-grp  h4{
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0;
}
.team-detail{
    text-align: center;
    margin-top: 1rem;
}
.team-pic-grp .team-block{
    width: 20%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    transform: scale(0);
    transition: transform 0.75s linear;
}
.team-sec .team-pic-grp .team-block.active{
    transform: scale(1) ;
}
.team-sec .team-pic-grp .team-block.active:nth-child(2){
    transition-delay: 0.5s;
}
.team-sec .team-pic-grp .team-block.active:nth-child(3){
    transition-delay: 1s;
}
.team-sec .team-pic-grp .team-block.active:nth-child(4){
    transition-delay: 1.5s;
}
.team-sec .team-pic-grp .team-block.active:nth-child(5){
    transition-delay: 0.5s;
}
.team-sec .team-pic-grp .team-block.active:nth-child(6){
    transition-delay: 1s;
}
.team-sec .team-pic-grp .team-block.active:nth-child(7){
    transition-delay: 1.5s;
}
.team-sec .team-pic-grp .team-block.active:nth-child(8){
    transition-delay: 2s;
}
.team-sec .team-pic-grp .team-block.active:nth-child(9){
    transition-delay: 2.5s;
}
.team-pic-grp .team-block:nth-child(1),
.team-pic-grp .team-block:nth-child(2),
.team-pic-grp .team-block:nth-child(3),
.team-pic-grp .team-block:nth-child(4){
    width: 25%;
}
.team-sec .LetterS-block{
    top: inherit;
    bottom: 30%;
}
.team-sec .LetterS-block .LetterS{
    background-image: url(../images/S_blue_skye.svg);
}
.team-sec .LetterS-block.active .LetterS {
    animation: right 0.5s forwards;
}
.team-sec .blueSun-block{
    top: 1%;
}
.team-sec .planfly{
    top: 0;
    right: 10%;
}
/* team */
/* about page */
/* product page */
/*banner*/
.product-banner .banner-content{
    max-width: 100%;
    background-image: none;
    background-color: var(--bs-warning);
    width: 70%;
    border-radius: 47% 51% 40% 37%;
    padding-top: 4%;
    justify-content: flex-start;
}
.product-banner h1{
    color: var(--bs-primary);
}
.productpage .toy-Block{
    left: 2%;
    height: 115px;
    width: 167px;
}
.productpage .inner-sky-sec .toy_orange{
    right: 19%;
    top: inherit;
    bottom: 0;
    max-width: 60px;
}
.productpage .toy_pink{
    max-width: 5.5rem;
}

/*banner*/
/*tab sec*/
.preProduct{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.classType{
    padding-top: 7rem;
    padding-bottom: 8rem;
}
.classType .round{
    top: 64%;
}
.classType .pencilbox{
    left: 7%;
}
.classType .toy-block{
    right: 5%;
}
.classType .nav-item .nav-link{
    font-size: 20px;
}
.product-img-block {
    padding: 0 4rem 2rem;
    position: relative;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
}
.product-img-block:after{
    width: 100%;
    height: 70%;
    border-radius: 20px;
    background-color: var(--bs-secondary);
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    box-shadow: 4px 4px 10px 4px rgba(0,0,0,0.3);
}
.product-img-block img{
    position: relative;
    z-index: 1;
}
.product-cell.pink img{
    max-width: 300px;
}
.product-cell.sky-blue .product-img-block:after{
    background-color: var(--bs-info);
}
.product-cell.sky-blue img{
    max-width: 200px;
}
.pattern-btn{
    text-decoration: none;
    background: #3a4496;
    background: -moz-linear-gradient(top,  #3a4496 0%, #904e9a 100%);
    background: -webkit-linear-gradient(top,  #3a4496 0%,#904e9a 100%);
    background: linear-gradient(to bottom,  #3a4496 0%,#904e9a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a4496', endColorstr='#904e9a',GradientType=0 );
    display: inline-flex;
    padding:6px;
    height: 60px;
    border-radius: 40px;
    width: 100%;
}
.pattern-btn span{
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 40px;
    font-size: 22px;
    font-weight: bold;
    color: var(--bs-primary);
    justify-content: center;
    align-items: center;
    display: inline-flex;
}
.pattern-btn:hover{
    color: var(--bs-primary);
}
.pattern-btn:hover span{
    background-color: var(--bs-warning);
}
.product-cell p{
    color: #fff;
    font-size: 22px;
    margin-top: 1rem;
    margin-bottom: 0;
}
.classType .tab-content{
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

/*tab sec*/
/* outkit */
.outKitTab{
    padding-top: 0;
    background-image: url(../images/grass1.png);
    background-position: center calc(100% + 1px);
    background-repeat: no-repeat;
    background-size: 100%;
}
.outKitTab .container{
    transform: none;
    transition: none;
}
.outKitTab .nav-item{
    margin-right: 0;
    margin-left: 0;
}
.outKitTab .nav-item .nav-link{
    background-image: none;
    width: inherit;
    height: inherit;
    background-color: #fff;
    border-radius: 0;
    font-size: 24px;
    padding: 1.5rem 7rem;
}
.outKitTab .nav-item .nav-link strong{
    font-weight: 600;
}
.outKitTab .nav-item:first-child .nav-link{
    border-radius: 50px 0 0 0;
}
.outKitTab .nav-item:last-child .nav-link{
    border-radius: 0 50px 0 0;
}
.outKitTab .nav-item .nav-link.active{
    background-image: none;
    background-color: var(--bs-secondary);
    color: #fff;
}
.outKitTab .LetterS-block{
    right: inherit;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    left: 0;
    top: inherit;
    bottom: 10%;
}
.outKitTab .blueSun-block{
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    left: inherit;
    right: 0;
}
.outKitTab .LetterS{
    background-image: url(../images/S_blue_skye.svg);
}
.outKitTab .nav-tabs{
    margin-bottom: 6.5rem;
}
.outKitTab .pink-dot{
    top: 30%;
    bottom: inherit;
}
.outKitTab .toy_orange{
    right: 8%;
    top: inherit;
    bottom: 19%;
}
/* outkit */
/* student kit */
.studentKit-sec{
    padding-bottom: 15rem;
    position: relative;
}
.studentKit-sec .container{
    transform: translateY(150px);
    transition: transform 0.5s ease-in;
    position: relative;
    z-index: 1;
}
.studentKit-sec.active .container{
    transform: translateY(0);
}
.studentKit-sec h2{
    font-family: "Letter Kids";
    margin-bottom: 2rem;
}
.studentKit-slider .item{
    padding: 1rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border:#fff dashed 2px;  
    border-radius: 5px;
    text-align: center;
}
.studentKit-slider .item figure{
    transform: scale(1);
    transition: transform 0.5s ease-in-out;
    border-radius: 5px;
    overflow: hidden;
}
.studentKit-slider .item:hover figure{
    transform: scale(1.07);
}
.studentKit-slider .item h5{
    color: var(--bs-primary);
    font-size: 21px;
    font-weight: 600;
}
.studentKit-slider .item .btn{
    font-weight: 500;
    font-size: 16px;
}

.curriculum-block{
    margin-top: 1rem;
    border: var(--bs-primary) dashed 2px;
    padding: 1rem;
    color: var(--bs-primary);
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 5px;
    display: flex;
    align-items: center;
}
.curriculum-block .icon-block {
    flex: 0 auto;
}
.curriculum-list-grp{
    flex: 1;
}
.curriculum-list{
    margin-bottom: 0;
    display: flex;
    flex-wrap: wrap;
}
.curriculum-list li{
    font-weight: 600;
    font-size: 1rem;
    width: 50%;
}
.curriculum-list li::marker{
    font-size: 22px;
    color: var(--bs-secondary);
}
.studentKit-sec .rainbow-left,.studentKit-sec .rainbow-right{
    background-size: 310px;
    height: 305px;
    width: 214px;
}
/* student kit */
/* teachet kit */
.teacherKit-sec{
    padding-top: 5rem;
    padding-bottom: 22rem;
    background-image: url(../images/cloud2.png);
    background-position:  center calc(100% + 2px);
    background-size: 100%;
    background-repeat: no-repeat;
    position: relative;
}
.teacherKit-sec .container{    
    transform: translateY(150px);
    transition: transform 0.5s ease-in;
    position: relative;
    z-index: 2;
}
.teacherKit-sec.active .container{
    transform: translateY(0);
}
.teacherKit-sec h2{
    font-family: "Letter Kids";
    margin-bottom: 2rem;
}
.teacher-slider .item{
    padding: 1rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    border:var(--bs-primary) dashed 2px;  
    border-radius: 5px;
    text-align: center;
}
.teacher-slider .item figure{
    transform: scale(1);
    transition: transform 0.3s ease-in-out;
    border-radius: 5px;
    overflow: hidden;
}
.teacher-slider .item:hover figure{
    transform: scale(1.07);
}
.teacher-slider .item h5{
    color: var(--bs-warning);
    font-size: 21px;
    font-weight: 600;
}
.teacher-slider .item .btn{
    font-weight: 500;
    font-size: 16px;
}

.stem-title-bar{
    position: relative;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.stem-title-bar:after{
    content: "";
    left: 22%;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    height: 0.25px;
    background-color: #000;
    position: absolute;
}
.stem-title-bar strong{
    font-size: 16px;
}
.wizzkit-book-grp{
    opacity: 0;
}
.wizzkit-book-grp.active{
    animation: fadein 1s forwards 0.5s;
}
.wizzkit-book-grp h2{
    font-family: "Quicksand", Sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.3em;
}
.wizzkit-book-grp figure{
    background-color: #e5e5e5;
    border-radius: 10px;
    padding: 2rem;
    max-width: 200px;
}
.wizzkit-book-grp figure.video{
    position: relative;
    overflow: hidden;
}
.wizzkit-book-grp figure.video:after{
    background-color:rgba(0,0,0,0.15);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
}
.wizzkit-book-grp figure.video .material-icons-round{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color:var(--bs-secondary);
    font-size: 64px;
    z-index: 1;
    text-shadow: -1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff,-1px -1px 0 #fff;
}
.teacherKit-sec .playfly{
    top: 58%;
    right: 5%;
}
.teacherKit-sec .playfly.active{
    animation: fadein 2s forwards ;
}
.teacherKit-sec .green-dot{
    top: 5%;
    left: 60%;
}
.teacherKit-sec .confetti_yellow{
    top: 55%;
}
.teacherKit-sec .LetterS-block {
    top: 13%;
    z-index: 2;
    height: 257px;
    width: 70px;
    right: 0;
    transform: rotateX(180deg);
}
.teacherKit-sec .LetterS-block .blue-s {
    background-image: url(../images/yellow-blue-s.svg);
}
.teacherKit-sec .LetterS-block.active .blue-s{
    animation: right 0.75s forwards;
}
.teacherKit-sec .sun-block{
    right: inherit;
    left: 0;
    top: inherit;
    bottom: 15%;
    transform: rotateY(180deg);
}
.teacherKit-sec .sun-block .sun-icon{
    animation: none;
}
.teacherKit-sec .sun-block.active .sun-icon{
    animation: width 1.5s forwards;
}
/* teacher kit */
/*  LMS Features */
.lmsFeature-sec{
    padding-top: 2rem;
    padding-bottom: 5rem;
    background-color: #2E3190;
    position: relative;
}
.lmsFeature-sec h2{
    margin-bottom: 7rem;
    font-family: "Letter Kids";
    opacity: 0;
}
.lmsFeature-sec.active h2{
    animation: fadein 2s forwards 0.5s;
}
.lmsFeature-sec .raisingHandBoy{
    position: absolute;
    top: -20%;
    right: 23%;
    transform: rotateY(180deg);
    opacity: 0;
}
.lmsFeature-sec .raisingHandBoy.active{
    animation: fadein 5s forwards 0.5s;
}
.lmsFeature-sec .pencilbox{
    left: inherit;
    right: 5%;
    top: 15%;
    bottom: inherit;
}
.lmsFeature-sec .sun-block{
    top: inherit;
    bottom: 5%;
}
.lmsFeature-sec .LetterS-block {
    top: inherit;
    bottom: 14%;
    z-index: 2;
    height: 257px;
    width: 70px;
    right: inherit;
    left: 0;
}
.lmsFeature-sec .LetterS-block .blue-s {
    background-position: right center;
    right: inherit;
    left: -100%;
    background-image: url(../images/yellow-s.svg);
}
.lmsFeature-sec .LetterS-block.active .blue-s{
    animation: left 0.75s forwards 1s;
}
.lmsFeature-sec .sun-icon{
    animation: none;
}
.lmsFeature-sec .sun-block.active .sun-icon{
    animation: width 1.5s forwards;
}
.lmsFeature-sec .lmsstep{
    opacity: 0;
}
.lmsFeature-sec.active .lmsstep{
    animation: fadein 2s forwards 1s;
}
/*  LMS Features */
/*  ERP Features */
.ERPfeature-sec{
    padding-top:    11rem;
    padding-bottom: 24rem;
    position: relative;
}
.ERPfeature-sec h2{
    margin-bottom: 3rem;
    font-family: "Letter Kids";
    opacity: 0;
}
.ERPfeature-sec.active h2{
    animation: fadein 2s forwards;
}
.ERPstep .ERP-title{
    display: flex;
    color: var(--bs-primary);
    font-family: 'Roboto', sans-serif;
}
.ERPstep .ERP-title strong{
    font-size: 58px;
    margin-right: 0.5rem;
    line-height: 1;
} 
.ERPstep .ERP-title span{
    font-size: 24px;
    text-transform: uppercase;
    font-weight: bold;
} 
.ERPstep [class*='col-']{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 2rem;
    opacity: 0;
}
.ERPfeature-sec.active .ERPstep [class*='col-']{
    animation: fadein 2s forwards;
}
.ERPfeature-sec.active .ERPstep [class*='col-']:nth-child(1){
    animation-delay: 0.5s;
}
.ERPfeature-sec.active .ERPstep [class*='col-']:nth-child(2){
    animation-delay: 0.75s;
}
.ERPfeature-sec.active .ERPstep [class*='col-']:nth-child(3){
    animation-delay: 1s;
}
.ERPfeature-sec.active .ERPstep [class*='col-']:nth-child(4){
    animation-delay: 1.25s;
}
.ERPfeature-sec.active .ERPstep [class*='col-']:nth-child(5){
    animation-delay: 1.50s;
}
.ERPfeature-sec.active .ERPstep [class*='col-']:nth-child(6){
    animation-delay: 1.75s;
}
.ERPstep [class*='col-'] figure{
    max-width: 130px;
}
.playfly{
    position: absolute;
    top: 10%;
    right: 10%;
    max-width: 175px;
    opacity: 0;
}
.ERPfeature-sec.active .playfly{
    animation: fadein 2s forwards ;
}
/*  ERP Features */
/* product page */
/* media page */
.media-banner{
    background-color: #42a3ca;
    padding-top: 9.7rem;
    padding-bottom: 10rem;
    position: relative;
}
.media-banner h1{
    font-size: 59px;
    font-weight: 600;
    margin-bottom: 0.75rem;
    opacity: 0;
    animation: fadein 2s forwards 1s;
}
.media-banner .banner-img{
    margin-top: 0;
    max-width: 920px;
}
.apple{
    position: absolute;
    top: 13%;
    left: 27%;
    opacity: 0;
    animation: fadein 2s forwards 1.5s;
 }
.rocket-icon{
    position: absolute;
    bottom: 32%;
    right: 10%;
    transform: translate(245%, 200%) scale(0);
    animation: rocket-ani 2s forwards 1s;
 } 
.thermometer{
    position: absolute;
    top: 35%;
    left: 13%;
    opacity: 0;
    animation: fadein 2s forwards 1.75s;
 }
.media-banner .pink-dot{
    left: 20%;
 }
 .media-banner .LetterS-block{
    right: inherit;
    left: 0;
    height: 224px;
    width: 70px;
    top: 20%;
 }
 .media-banner .LetterS-block .LetterS{
    animation: left 0.5s forwards 0.5s;
    transform: rotateX(180deg);
    background-position: top right;
    background-image: url(../images/S_pink_blue1.svg);
 }
.star1{
    position: absolute;
    top: 15%;
    right: 30%;
    opacity: 0;
    animation: doAni 2s infinite 0.25s;
}
.star2{
    position: absolute;
    bottom: 9%;
    right: 17%;
    opacity: 0;
    animation: doAni 2s infinite 1s;
}
 .media-banner .playfly{
    top: 25%;
    right: 7%;
    animation: fadein 2s forwards 0.5s;
 }
 .media-banner .toy-Block{
    top: inherit;
    bottom: 8%;
    right: inherit;
    left: 5%;
 }
 .media-banner .toy_orange{
    right: inherit;
    left: 17%;
    bottom: 23%;
    top: inherit;
    max-width: 50px;
 }
 .media-banner .toy_pink{
    top: inherit;
    bottom: 20%;
 }
.media-block{
    padding-top: 5rem;
    padding-bottom: 20rem;
    position: relative;
}
.graybox{
    background-color: #F0F0F0;
    border-radius: 20px;
    padding: 30px;
    border: none;
    height: 100%;
}
.graybox .card-body{
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.graybox figure{
    overflow: hidden;
    border-radius: 20px;
}
.graybox h5{
    font-weight: 600;
}
.media-block [class*='col-']{
    margin-bottom: 2rem;
}
.media-block .pencilbox{
    left: inherit;
    right: 7%;
    bottom: 20%;
}
.media-block .pinkangle{
    top: 37%;
    bottom: inherit;
    left: 13%;
}
.media-block .toy-Block{
    left: 3%;
    bottom: 37%;
    height: 115px;
    width: 170px;
}
.media-block .toy-Block .toy_1{
    opacity: 0;
    animation: none;
}
.media-block .toy-Block.active .toy_1{
    animation: arrangeBox 3.5s forwards;
}
.media-block .LetterS-block{
    top: 18%;
    height: 250px;
    width: 78px;
}
.media-block .toy_pink{
    right: 6%;
    top: 45%;
    max-width: 6rem;
    animation: none;
    opacity: 0;
}
.media-block .toy_pink.active{
    animation: fadein 5s forwards;
}
.media-block .bluedot{
    position: absolute;
    bottom: 40%;
    right: 11%;
}
.media-block .green-dot{
    left: inherit;
    right: 8%;
    top: 5%;
}
.mediapage .white-sun{
    background-image: url(../images/sun_face_yellow.svg);
}
/* media page */
/* career page */
.careerpage .about-section{
    padding-top: 9.5rem;
    padding-bottom: 22.7rem;
}
.careerpage .about-section .LetterS-block .blue-s{
    background-image: url(../images/yellow-s.svg);
}
.careerpage .about-content [class*="col-"]{
    overflow: hidden;
}
.careerpage .about-content .container.active .about-text{
    transform: translateX(0);
}
.careerpage .inner-sky-sec{
    padding-bottom: 5rem;
}
.careerpage .inner-sky-sec .container{
    position: relative;
    z-index: 1;
}
.careerpage .banner-img{
    max-width: 674px;
    margin-top: -22.2rem;
}
.careerpage .inner-sky-sec .rainbox-block{
    width: 360px;
    height: 240px;
    padding-bottom: 0;
}
.careerpage .inner-sky-sec .rainbow-img{
    background-size: 120%;
}
.careerpage .toy-Block{
    left: inherit;
    right: 15%;
    height: 120px;
    width: 178px;
}
.careerpage .about-section .green-dot{
    top: 50%;
    left: 20%;
    right: inherit;
    bottom: inherit;
}
.careerpage .about-section .green-dot.right{
    left: inherit;
    right: 15%;
    top:inherit;
    bottom: 20%;
    animation-delay: 0.25s;
}
.careerpage .pencilbox{
    bottom: 37%;
    left: 21%;
    max-width: 3.5rem;
}
.careerpage .yellow-dot{
    top:30%;
    right: 30%;
}
.careerpage .toy_pink{
    top: inherit;
    bottom: 3%;
}
.careerpage .about-content .blueBallon-img{
    top: 32%;
    max-width: 170px;
}
.careerpage .about-content .planfly{
    top: 9%;
    right: 42%;
    max-width: 160px;
    transform: rotateY(180deg);
}
.careerpage .about-content .green-dot{
    top: inherit;
    bottom: 17%;
    right: inherit;
    left: 30%;
}
.careerpage .about-content .confetti_yellow{
    top: 7%;
    left: 18%;
}
.careerpage .about-content{
    background-image: url(../images/grass1.png);
    background-size: 1500px;
    background-position: right calc(100% + 7rem);
}
.careerpage .readingboy{
    bottom: 0;
}
.careerpage .about-content .rainbox-block{
    width: 270px;
    height: 210px;
    padding-bottom: 0;
}
.careerpage .about-content .rainbow-img{
    background-size: 134%;
    animation: none;
}
.careerpage .about-content .rainbox-block.active .rainbow-img{
    animation: rainbow-ani 3s forwards ;
}
.careerpage .about-content .sun-block .sun-icon{
    animation: none;
}
.careerpage .about-content .sun-block.active .sun-icon{
    animation: width 1.5s forwards;
}
.goal-sec{
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #a1d064;
}
.goal-sec h2{
    font-weight: 700;
    transform: scale(0);
    transition: transform 1s linear;
}
.goal-sec.active h2{
    transform: scale(1);
}
.goal-content{
    display: flex;
    margin-top: 10rem;
    margin-bottom: 4rem;
    justify-content: center;
    align-items: center;
}
.goal-content .inner-cell{
    display: flex;
    position: relative;
    margin-left: 3.2rem;
    margin-right: 3.2rem;
    transition: transform 1s linear 1.5s;
}
.goal-content .inner-cell:nth-child(1){
    transform: translateX(141%);
}
.goal-content .inner-cell:nth-child(3){
    transform: translateX(-141%);
}
.goal-sec.active .goal-content .inner-cell:nth-child(1){
    transform:translateX(55%) translateY(-60%);
}
.goal-sec.active .goal-content .inner-cell:nth-child(3){
    transform: translateX(-55%) translateY(-60%);
}
.goal-content .inner-cell .white-box{
    background: linear-gradient(90deg, var(--bs-primary) 50%, transparent 50%), 
                linear-gradient(90deg, var(--bs-primary) 50%, transparent 50%), 
                linear-gradient(0deg, var(--bs-primary) 50%, transparent 50%), 
                linear-gradient(0deg, var(--bs-primary) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 12px 2px, 12px 2px, 2px 12px, 2px 12px;
    background-position: 0% 0%, 100% 100%, 0% 100%, 100% 0px;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 250px;
    height: 250px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: relative;
    animation: dash 5s linear infinite;
}
.goal-content .inner-cell .white-box:after{
    background: var(--bs-warning);
    top: 1rem;
    left: 1rem;
    bottom: 1rem;
    right: 1rem;
    content: "";
    position: absolute;
}
.goal-content .inner-cell .white-box span{
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: relative;
    z-index: 1;
    font-size: 20px;
    text-align: center;
    font-weight: 600;
    color: var(--bs-primary);
}
.workCulture{
    padding-top: 5rem;
    padding-bottom: 25rem;    
    position: relative;
}
.workCulture h2{
    margin-bottom: 4rem;
    font-weight: 600;
}
.culture-detail [class*="col"]{
    transform: translateY(150px);
    transition: transform 0.75s linear;
}
.culture-detail.active [class*="col"]{
    transform: translateY(0);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.culture-detail.active [class*="col"]:nth-child(1){
    transition-delay: 0.5s;
}
.culture-detail.active [class*="col"]:nth-child(2){
    transition-delay: 1s;
}
.culture-detail.active [class*="col"]:nth-child(3){
    transition-delay: 1.5s;
}
.culture-detail h4{
    font-weight: 600;
    font-size: 21px;
    min-height: 51px;
}
.culture-detail p{
    font-weight: 600;
}
.workCulture .planfly{
    right: 1%;
    top: 5%;
}
.underLine span{
    position: relative;
}
.underLine span:after{
    position: absolute;
    left: 0;
    bottom: -6px;
    content: "";
    background-color: var(--bs-primary);
    width: 0;
    height: 2px;
}
.underLine.active span:after{
    animation: width 2s forwards;
}
.jobposition-sec{
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.jobposition-sec h2{
    margin-bottom: 2rem;
    transform: scale(0);
    transition: transform 1s linear;
}
.jobposition-sec.active h2{
    transform: scale(1);
}
.jobtab{
    transform: translateY(100px);
    transition: transform 1s linear 0.1s;
}
.jobposition-sec.active .jobtab{
    transform: translateY(0);
}
.jobCatFilter{
    list-style: none;
    padding-left: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.jobCatFilter li{
    background-color: var(--bs-primary);
    color: #fff;
    border-radius:30px;
    padding: 0.5rem 1rem;
    margin-right: 0.5rem;
    cursor: pointer;
    margin-bottom: 0.5rem;

}
.jobCatFilter li.active{
    background-color: var(--bs-secondary);
}

.jobcatContent .jobtext{
    width: calc(50% - 0.5rem);
    box-shadow: 2px 2px 5px 1px rgb(49 65 150 / 20%);
    padding: 1rem 1rem;
    background-color: #fff;
    border-radius: 3px;
    margin-right: 1rem;
    margin-bottom: 1rem;
}
.jobcatContent .jobtext:nth-child(2n+2){
    margin-right: 0;
}
.jobcatContent [class*="col-"]{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.jobtext .job-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.jobtext .job-title h5{
    margin-bottom: 0;
}
.jobtext .jobDetail{
    display: none;
    margin-top: 1rem;
    font-size: 15px;
    border-top: var(--bs-primary) dashed 1px;
    padding-top: 1rem;
}

.jobtext .jobDetail h5{
    font-size: 20px;
    font-weight: 600;
}
/* career page */
/* contact page */
.contactpage .about-section {
    padding-top: 9.5rem;
    padding-bottom: 14.5rem;
}
.con-title{
    max-width: 380px;
    margin-left:auto;
    margin-right: auto;
    text-align: center;
}
.con-title h1{
    letter-spacing: 2px;
}
.con-title p{
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
    opacity: 0;
    animation: fadein 3s forwards 0.7s;
}
.contactpage .banner-img{
    max-width: 880px;
    margin-top: -25.3rem;
    position: relative;
    z-index: 1;
}
.contactpage .banner-img:after{
    content: "";
    background-color: transparent;
    width: 539px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    bottom: 25px;
    left: 171px;
    box-shadow: 0 13px 9px 1px rgb(0 0 0 / 50%);
}
.contactpage .banner-img img{
    position: relative;
}
.banner-img .contactDetail{
    position: absolute;
    top: 222px;
    left: 244px;
    display: flex;
    height: 254px;
    width: 398px;
    flex-direction: column;
    text-align: center;
    padding-top:3rem;
    align-items: center;
}
.banner-img .contactDetail a{
    color: #fff;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 2rem;
}
.banner-img .contactDetail a i{
    font-size: 30px;
}
.banner-img .contactDetail a.mail{
    font-size: 22px;   
    font-weight: 600;
    margin-bottom: 0;
}
.contactDetail a span{
    position: relative;
    overflow: hidden;
}
.contactDetail a span:after{
    content: "";
    background-color: #273570;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    animation: typing 3s infinite 1.5s;
}
.contactDetail a.mail span:after{
    animation-delay: 2.5s;
}
.contactpage .colorbox{
    left: 15%;
    bottom: 47%;
    opacity: 0;
    animation: scale 2s forwards 1.75s;
}
.contactpage .pencilbox{
    bottom: 77%;
    left: 6%;
}
.contactpage .toy_pink{
    right: 13%;
    top: 65%;
}
.contactpage .toy_orange{
    right: 28%;
    top: 10%;
    max-width: 62px;
}
.contactpage .inner-sky-sec{
    padding-bottom: 6rem;
}
.map-area{
    height: 450px;
}
.address-sec{
    padding-top: 3rem;
    padding-bottom: 25rem;
}
.address-sec h3{
    font-weight: 700;
    margin-bottom: 1rem;
}
.address-sec .contact{
    list-style-type:none;
    padding-left: 0;
    margin-bottom: 0;
}
.address-sec .contact li{
    display: flex;
    margin-bottom: 1rem;
}
.address-sec .contact li:last-child{
    margin-bottom: 0;
}
.address-sec .contact li .material-icons{
    margin-right: 0.5rem;
    color: var(--bs-primary);
    font-size: 30px;
}
.address-sec .contact li a{
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 18px;
}
.address-sec .contact li a:hover{
    color: var(--bs-primary);
}
.address-sec .contact li{
    color: #000;
    font-weight: 600;
    font-size: 18px;
}
.address-sec .contact address{
    margin-bottom: 0;
}
.address-sec .social-link{
    list-style: none;
    padding-left: 0;
    display: inline-flex;
    margin-left: 0;
    border-top: 1px solid #000;
    padding-top: 1rem;
    width: 284px;
    margin-top: 1rem;
}
.address-sec .social-link li{
    margin-right: 0.5rem;
}
.address-sec .social-link li a{
    color: #fff;
    font-size: 20px;
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    text-decoration: none;
}
.address-sec .social-link li a.facebook {
    background-color: #3b5998;
}
.address-sec .social-link li a.linkedin {
    background-color: #0077b5;
}
.address-sec .social-link li a.youtube {
    background-color: #cd201f;
}
.getForm input,.getForm textarea{
    background-color: transparent;
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    font-weight: 500;
    font-size: 1rem;
}
.getForm input:focus,.getForm textarea:focus{
    background-color: transparent;
    border-color: var(--bs-primary);
}
@keyframes typing{
    100%{
        left: 100%;
    }
}
/* contact page */

/* free demo */
.freedemo-banner{
     padding-top: 10rem;
     padding-bottom: 26rem;
     overflow: hidden;
     position: relative;
}
.freedemo-banner .round{
    height: 150%;
    position: absolute;
    top: 51rem;
    left: -40%;
    right: -40%;
    border-radius: 44%;

    background: #314395;
background: -moz-linear-gradient(top,  #314395 0%, #314395 9%, #f9ca18 31%, #f9ca18 100%);
background: -webkit-linear-gradient(top,  #314395 0%,#314395 9%,#f9ca18 31%,#f9ca18 100%);
background: linear-gradient(to bottom,  #314395 0%,#314395 9%,#f9ca18 31%,#f9ca18 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#314395', endColorstr='#f9ca18',GradientType=0 );
}
.freedemo-banner .container{
    position: relative;
    z-index: 2;
}
.freedemo-banner h1{
    font-size: 59px;
    font-weight: 600;
    margin-bottom: 5rem;
    text-align: center;
    opacity: 0;
    animation:fadein 2s forwards 0.5s;
}
.demoFrom{
    display: flex;
    justify-content: center;
    position: relative;
    opacity: 0;
    animation: fadein 2s forwards 1s;
}
.demoFrom .formbook{
    max-width: 594px;
    width: 100%;
    border-radius: 35px;
    padding: 2rem 4rem;
    color: #fff;
    box-shadow: 5px -5px 1px 0px rgb(0 0 0);
    position: relative;
    background-color: var(--bs-secondary);
    margin-bottom: 1rem;
    position: relative;
}
.formbook ul{
    list-style: none;
    padding-left: 0;
}
.formbook ul li{
    margin-bottom: 0.75rem;
}
.formbook .form .form-control{
    background-color: transparent;
    border-radius: 0;
    border:none;
    border-bottom: 3px solid #fff;
    font-weight: 500;
}
.formbook .form .form-control::-webkit-input-placeholder { 
    color: rgba(255,255,255,0.6);
} 
.formbook .form .form-control:-ms-input-placeholder { 
    color: rgba(255,255,255,0.6);
}
.formbook .form .form-control::placeholder {
    color: rgba(255,255,255,0.6);
}
.half-grp{
    display: flex;
}
.half-grp .half-cell{
    width: 50%;
    margin-right: 1rem;
}
.half-grp .half-cell:last-child{
    margin-right: 0;
}
.formOption{
     margin-bottom: 1rem;
}
.formOption h4{
    font-weight: 600;
    font-size: 20px;
}
.formOption .form-check{
    margin-bottom: 0.5rem;
}
.formOption .form-check-input{
    background-color: transparent;
    border:#fff solid 1px;
}
.formOption .form-check-label{
    font-weight: 600;
}
.formOption .form-check-input:focus{
    outline: 0;
    box-shadow: none;
}
.form-btn .btn{
    font-weight: bold;
    font-size: 20px;
    width: 100%;
}
.formbehindgirl{
    position: absolute;
    bottom: 10%;
    right: -33%;
    max-width: 200px;
    opacity: 0;
    animation: fadein 2s forwards 1.5s;
}
.freedemo-banner .blueBallon-img{
    top: 36%;
    left: 10%;
    z-index: 1;
    opacity: 0;
    animation: fadein 2s forwards 0.5s, ballonAni 7s infinite;
}
.freedemo-banner .pencilbox {
    top: 54%;
    left: 21%;
    max-width: 4rem;
    z-index: 1;
    bottom: inherit;
}
.freedemo-banner .toy-Block {
    right: 1%;
    left: inherit;
    top: 57%;
    bottom: inherit;
    z-index: 1;
}
.freedemo-banner .yellow-dot.bottom{
    top: 40%;
    animation-delay: 0.4s;
}
.formbook .pin-group{
    bottom: 30%;
}
.formbook .pin-group .pin:before{
    width: 22px;
    height: 10px;
}
.formbook .pin-group .pin:after{
    width: 12px;
    height: 14px;
    top: -2px;
    left: 11px;
}
.freedemo-banner .planfly{
    animation: fadein 2s forwards;
    max-width: 196px;
    top: 18%;
    right: 8%;
}

/* free demo */
/* term page */
.term-content{
    opacity: 0;
    animation: fadein 2s forwards 1s;
}
.termpg main .container{
    position: relative;
    z-index: 2;
}
.termpg main .toy_orange{
    right: 5%;
    top: 33%;
    max-width: 55px;
    animation: none;
}
.termpg main .toy_orange.active{
    animation: fadein 5s forwards;
}
.termpg main .thermometer{
    left: 5%;
    top: 38%;
    animation: none;
}
.termpg main .thermometer.active{
    animation: fadein 2s forwards 0.5s;
}
.termpg main .star1 {
    top: 30%;
    right: 40%;
}
.termpg main .star2 {
    bottom: 24%;
}
.termpg  main .toy_pink{
    top: 53%;
    max-width: 5rem;
    animation: none;
}
.termpg main .toy_pink.active{
    animation: fadein 5s forwards;
}
.termpg main .rocket-icon{
    bottom: inherit;
    top: 18rem;
}
.termpg main .apple{
    left: 22%;
    top: 11rem;
}
.termpg main .pencilbox{
    top: 65%;
    left: 4%;
}
.termpg main .toy-Block{
    right: 1%;
    top: inherit;
    bottom: 19%;
}
.termpg main .toy-Block .toy_1{
    animation: none;
}
.termpg main .toy-Block.active .toy_1{
    animation: arrangeBox 3.5s forwards 0.5s;
}
.termpg main .LetterS-block{
    right: inherit;
    left: 0;
    height: 222px;
    width: 70px;
    top: 20%;
}
.termpg main .LetterS-block .LetterS{
    animation: left 0.5s forwards 0.5s;
    transform: rotateX(180deg);
    background-position: top right;
}
/* term page */
/* lightbox */
.lightbox {
    width: 100%;
    height: 100%;
    padding-right: 10px;
    padding-left: 10px;
    background: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: z-index 0s 0.3s, opacity 0.3s, visibility 0s 0.3s;
  }
  @media all and (min-width: 768px) {
    .lightbox {
      padding-right: 35px;
      padding-left: 35px;
    }
  }
  .js-lightbox-loading .lightbox, .js-lightbox-active .lightbox {
    z-index: 10;
    opacity: 1;
    visibility: visible;
    transition: z-index 0s 0s, opacity 0.3s, visibility 0s 0s;
  }
  .lightbox:before {
    width: 18px;
    font-size: 3.2rem;
    line-height: 18px;
    color: #fff;
    position: absolute;
    top: 8px;
    right: 9px;
    cursor: pointer;
    content: "×";
  }
  .lightbox .lightbox-content {
    min-width: 80px;
    min-height: 80px;
    background: #fff;
    opacity: 0;
    transform: translateY(-80px);
    transition: opacity 0s, transform 0s ease-out;
    border: var(--bs-secondary) solid 10px;
    border-radius: 20px;
    overflow: hidden;
  }
  .js-lightbox-active .lightbox .lightbox-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s, transform 0.3s ease-out;
  }
  .js-lightbox-first .lightbox .lightbox-content {
    transform: translateX(40px);
    transition: transform 0.15s linear;
  }
  .js-lightbox-last .lightbox .lightbox-content {
    transform: translateX(-40px);
    transition: transform 0.15s linear;
  }
  .lightbox .lightbox-content img {
    min-width: 60px;
    min-height: 60px;
    max-height: calc(100vh - 90px);
  }
  .lightbox .lightbox-previous,
  .lightbox .lightbox-next {
    width: 50px;
    height: 50px;
    font-size: 5rem;
    line-height: 0.75;
    color: #fff;
    padding: 0 0 0.25em;
    background: rgba(255, 255, 255, 0);
    border: none;
    margin-top: -24px;
    position: absolute;
    top: 50%;
    outline: none;
  }
  .js-lightbox-loading .lightbox .lightbox-previous,
  .js-lightbox-loading .lightbox .lightbox-next {
    display: none;
  }
  .lightbox .lightbox-previous {
    left: 0;
  }
  .lightbox .lightbox-next {
    right: 0;
  }
  .lightbox .lightbox-loader {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(200, 200, 200, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.85);
    margin-top: -20px;
    margin-left: -20px;
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    -webkit-animation: spinner 1s linear infinite;
            animation: spinner 1s linear infinite;
  }
  .js-lightbox-loading .lightbox .lightbox-loader {
    display: block;
  }
  
  @-webkit-keyframes spinner {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  
  @keyframes spinner {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
/* lightbox */
/* img lightbox */
.img-modal{
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.img-modal.show{
    opacity: 1;
    visibility: visible;
}
.img-modal .img-dialog{
    max-width: 552px;
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem
}
.img-modal .img-content{
    position: relative;
    padding: 0;
    border-width: 10px;
    border-color: var(--bs-secondary);
    border-style: solid;
    border-radius: 20px;
    overflow: hidden;
}
.img-modal .close-btn{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    border: none;
    background: transparent;
    color: #fff;
    width: 32px;
    height: 32px;
    line-height: 1;
}
.img-modal .img-content img{
    width: 100%;
}
/* img lightbox */
@keyframes dash {
    to {
        background-position: 100% 0%, 0% 100%, 0% 0%, 100% 100%;
    }
}
@keyframes rocket-ani {
    0%{
        transform: translate(245%, 200%) scale(0);
    }
    5%{
        transform: translate(245%, 200%) scale(1);
    }
    100%{
        transform: translate(0%, 0%) scale(1);
    }
}
@keyframes scale {
    0%{
        transform: scale(0);
        opacity: 0;
    }
    100%{
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes doAni {
    0%, 100%{
        transform: scale(1);
        opacity: 1;
    }
    50%{
        transform: scale(0);
        opacity: 0;
    }
}
@keyframes doAni1 {
    0%, 100%{
        transform: scale(0);
        opacity: 0;
    }
    50%{
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes ballonAni {
    0%, 100%{
        transform: rotate(5deg);
        
    }
    50%{
        transform: rotate(-5deg);
        
    }
}
@keyframes  cloudAni{
    0%{
        left: -100%;
    }
    100%{
        left: 100%;
    }
}
@keyframes fadein {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}
@keyframes fadebg {
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0.4;
    }
    100%{
        opacity: 1;
    }
}
@keyframes arrangeBox {
    0%{
        height: 0;
    }
    10%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        height: 100%;
    }
}
@keyframes rainbow-ani {
    0%{
        height: 0;
        opacity: 0;
    }5%{
        opacity: 1;
    }
    100%{
        opacity: 1;
        height: 183%;
    }
}
@keyframes width {
    0%{
        width: 0;
    }
    100%{
        width: 100%;
    }
}
@keyframes pencileMove{
    0%{
        width: 100%;
    }
    80%{
        width: 0;
    }
    100%{
        width: 0;
    }
}
@keyframes pencil-move {
    0%{
        transform:translate(-215%, 203%) rotate(293deg);
        opacity: 1;
    }
    80%{
        transform:translate(156%, 203%) rotate(293deg);
        opacity: 1;
    }
    100%{
        transform:translate(-40%, 0) rotate(0deg);
        opacity: 1;
    }
}
@keyframes right {
    0%{
        right: -100%;
    }
    100%{
        right:0;
    }
}
@keyframes left {
    0%{
        left: -100%;
    }
    100%{
        left:0;
    }
}

@media (min-width: 992px){
    /*home page*/
    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
    /*home page*/
}
@media (min-width: 1200px){
    /*home page*/
    .navbar-expand-xl .menu-icon{
        display: none;
    }
    /*home page*/
}
@media (min-width: 1400px){
    /*home page*/
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
         max-width: 1164px;
     }
     /*home page*/
}
@media (max-width: 1440px){
    /*media*/
    .rocket-icon{
        right: 7%;
    }
    .media-block .pencilbox{
        bottom: 10%;
    }
    .media-block .toy-Block{
        bottom: 14%;
    }
    .media-block .blueSun-block{
        top: 0;
    }
    .media-block .green-dot{
        top: 1%;
    }
    .media-block .bluedot{
        right: 1%;
    }
    /*media*/
    /* career */
    .careerpage .about-section .LetterS-block{
        padding-left: 5%;
        padding-bottom: 19%;
    }
    .careerpage .inner-sky-sec .rainbox-block{
        width: inherit;
        height: inherit;    
        padding-left: 21%;
        padding-bottom: 16%;
    }
    .careerpage .toy_pink{
        bottom: 7%;
        max-width: 6%;
    }
    .careerpage .toy-Block {
        height: inherit;
        width: inherit;
        padding-bottom: 8%;
        padding-left: 11%;
    }
    .careerpage .pencilbox{
        max-width: 4%;
    }
    .careerpage .about-content .planfly{
        max-width: 11%;
    }
    .careerpage .about-content .blueBallon-img{
        max-width: 10%;
        bottom: inherit;
        left: 5%;
    }
    .careerpage .about-content .rainbox-block{
        padding-left: 18.5%;
        padding-bottom: 14.5%;
        width: inherit;
        height: inherit;
    }
    .workCulture .planfly{
        max-width: 9%;
    }
    .careerpage .readingboy{
        max-width: 14%;
    }
    /* career */
    /* contact */
    .contactpage .colorbox {
        left: 9%;
        max-width: 17%;
    }
    .contactpage .toy_orange{
        max-width: 5%;
        right: 24%;
    }
    .contactpage .toy_pink{
        max-width: 7%;
    }
    .contactpage .pencilbox{
        max-width: 5%;
    }
    .contactpage .about-section .LetterS-block{
        padding-left: 5%;
        padding-bottom: 22%;
    }
    /* contact */
    /* free demo */
    .freedemo-banner .toy-Block{
        padding-left: 11%;
        padding-bottom: 8%;
        width: inherit;
        height: inherit;
        top: 61%;
    }
    .freedemo-banner{
        padding-bottom: 24rem;
    }
    /* free demo */
    /* term */
    .term-content{
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .termpg main .LetterS-block{
        height: inherit;
        width: inherit;
        padding-left: 6%;
        padding-bottom: 19%;
    }
    .termpg main .green-dot, 
    .termpg main .yellow-dot,
    .termpg main .pink-dot
    {
        max-width: 2%;
    }
    .termpg main .pencilbox{
        left: 2%;
    }
    .termpg main .toy_pink{
        right: 2%;
        max-width: 5%;
    }
    .termpg main .toy_orange{
        right: 3%;
        max-width: 3.5%
    }
    .termpg main .apple{
        max-width: 5%;
    }
    .termpg main .rocket-icon{
        top: 13rem;
        right: 10%;
    }
    .termpg main .thermometer{
        left: 2%;
        max-width: 6%;
    }
    /* term */
}
@media (max-width: 1366px){
    /* home page */
    .banner-boy{
        right: 12%;
        bottom: 24%;
        max-width: 20.5%;
    }
    .toy_pink{
        max-width: 7%;
    }
    .toy_orange{
        max-width: 5%;
    }
    .toy-Block{
        height: 60%;
        width: 17%;
    }
    .sky-blue-sec{
        padding-bottom: 19%;
    }
    .blueBallon-img{
        left: 0;
    }
    .LetterS-block{
        height: 250px;
        width: 78px;
    }
    .testimonial-sec .first-ballon{
        bottom: 0;
        right: 0.75rem;
    }
    .deliverable-sec .LetterS-block{
        height: 170px;
        width: 52px;
        bottom: 22px;
        top: inherit;
    }
    .usp-sec .blueSun-block{
        width: 58px;
        height: 127px;
    }
    .usp-sec .blue-sun{
        background-size: 58px;
    }
    .usp-sec .blue-sun span:first-child{
        height: 23px;
        width: 15px;
    }
    .usp-sec .blue-sun span:nth-child(2){
        height: 19px;
        width: 17px;
    }
    .usp-sec .blue-sun span:nth-child(3){
        height: 17px;
        width: 18px;
    }
    .usp-sec .blue-sun span:last-child{
        height: 21px;
        width: 14px;
    }
    /* home page */
    /* about page */
    .about-content .blueSun-block{
        height: 203px;
        width: 91px;
        top: 0;
    }
    .about-content .blueSun-block .blue-sun{
        background-size: 92px;
    }
    .about-content .blueSun-block .blue-sun span:first-child {
        height: 17%;
        width: 24%;
    }
    .about-content .blueSun-block .blue-sun span:nth-child(2) {
        height: 14%;
        width: 26%;
    }
    .about-content .blueSun-block .blue-sun span:nth-child(3) {
        height: 12%;
        width: 27%;
    }
    .about-content .blueSun-block .blue-sun span:last-child {
        height: 16%;
        width: 24%;
    }
    .flyingstudent{
        max-width: 20%;
    }
    .mission-sec{
        padding-top: 24rem;
    }
    .mission-sec .LetterS-block{
        top: 4%;
        height: 24%;
        width: 5.5%;
    }
    .team-sec .LetterS-block{
        top: 8px;
        bottom: inherit;
        height: 197px;
        width: 59px;
    }
    .team-sec .blueSun-block{
        width: 95px;
        height: 197px;
    }
    .team-sec .blueSun-block .blue-sun{
        background-size: 95px;
    }
    .team-sec .blueSun-block .blue-sun span:first-child{
        height: 18%;
        width: 25%;
    }
    .team-sec .blueSun-block .blue-sun span:nth-child(2){
        height: 15%;
        width: 28%;
    }
    .team-sec .blueSun-block .blue-sun span:nth-child(3){
        height: 12%;
        width: 29%;
    }
    .team-sec .blueSun-block .blue-sun span:last-child{
        height: 16%;
        width: 25%;
    }
    .about-content .blueBallon-img{
        top: inherit;
        left: 0;
        max-width: 9%;
        bottom: -60px;
    }
    /* about page */
    /* product page */
    .productpage .toy_pink{
        top: 37%;
    }
    .outKitTab .blueSun-block .blue-sun{
        background-size: 72px
    }
    .outKitTab .blue-sun span:first-child{
        height: 26px;
        width: 18px;
    }
    .outKitTab .blue-sun span:nth-child(2){
        height: 23px;
        width: 20px;
    }
    .outKitTab .blue-sun span:nth-child(3){
        height: 21px;
        width: 21px;
    }
    .outKitTab .blue-sun span:last-child{
        height: 27px;
        width: 17px;
    }
    .outKitTab .LetterS-block{
        height: 190px;
        width: 59px;
        bottom: 8%;
    }
    .outKitTab .blueSun-block{
        width: 71px;
        height: 152px;
        top: 10%;
    }
    .studentKit-sec .rainbow-left, 
    .studentKit-sec .rainbow-right{
        background-size: 237px;
        height: 232px;
        width: 173px;
    }
    .teacherKit-sec .LetterS-block{
        height: 172px;
        width: 46px;
        top: 7px;
    }
    .lmsFeature-sec .raisingHandBoy{
        top: -15%;
        right: 24%;
        max-width: 19%;
    }
    .lmsFeature-sec .pencilbox{
        max-width: 5%;
        top: 7%;
    }
    .lmsFeature-sec .LetterS-block{
        bottom: 2%;
        height: 188px;
        width: 50px;
    }
    .ERPfeature-sec{
        padding-top: 8rem;
    }
    .ERPfeature-sec .playfly{
        top: 3%;
        right: 6%;
        max-width: 140px;
    }
    .ERPfeature-sec .blueSun-block{
        top: 3rem;
        width: 86px;
        height: 173px;
    }
    .ERPfeature-sec .blueSun-block .blue-sun{
        background-size: 88px;
    }
    .ERPfeature-sec .blue-sun span:first-child{
        height: 34px;
        width: 20px;
    }
    .ERPfeature-sec .blue-sun span:nth-child(2){
        height: 26px;
        width: 22px;
    }
    .ERPfeature-sec .blue-sun span:nth-child(3){
        height: 22px;
        width: 24px;
    }
    .ERPfeature-sec .blue-sun span:last-child{
        height: 34px;
        width: 20px;
    }
    .classType .toy-block{
        width: 158px;
        height: 110px;
    }
    .classType .pencilbox{
        max-width: 3.2rem;
    }
    .classType .blueSun-block{
        width: 94px;
        height: 188px;
    }
    .classType .blueSun-block .blue-sun{
        background-size: 94px;
    }
    .classType .blue-sun span:first-child{
        height: 36px;
        width: 22px;
    }
    .classType .blue-sun span:nth-child(2){
        height: 27px;
        width: 23px;
    }
    .classType .blue-sun span:nth-child(3){
        height: 22px;
        width: 24px;
    }
    .classType .blue-sun span:last-child{
        height: 32px;
        width: 20px;
    }
    .outKitTab .toy_orange{
        bottom: 14%;
    }
    /* product page */
    /* media */
    .media-banner .toy-Block{
        height: 20%;
    }
    .thermometer{
        top: 45%;
        left: 8%;
    }
    .rocket-icon{
        right: 5%;
        max-width: 8%;
    }
    .media-banner .toy-Block{
        height: 16%;
        width: 14%;
        bottom: 3%;
    }
    .media-banner .toy_orange{
        left: 14%;
    }
    .media-banner .toy_pink{
        bottom: 11%;
    }
    .media-banner .playfly{
        top: 20%;
        right: 3%;
    }
    /* media */
    /* career */
    .careerpage .pencilbox{
        left: 17%;
    }
    .careerpage .toy-Block{
        right: 4%;
        bottom: 49%;
    }
    .careerpage .inner-sky-sec .rainbox-block {
        padding-left: 17%;
        padding-bottom: 19%;
    }
    .careerpage .inner-sky-sec .rainbow-img {
        background-size: 140%;
    }
    .careerpage .about-content{
        background-size: 120%;
    }
    .workCulture .blueSun-block{
        top: 0;
        width: 82px;
        height: 174px;
    }
    .workCulture .blueSun-block .blue-sun{
        background-size: 83px;
    }
    .workCulture .blueSun-block span:first-child{
        height: 17%;
        width: 25%;
    }
    .workCulture .blueSun-block span:nth-child(2){
        height: 15%;
        width: 28%;
    }
    .workCulture .blueSun-block span:nth-child(3){
        height: 12%;
        width: 30%;
    }
    .workCulture .blueSun-block span:last-child{
        height: 16%;
        width: 25%;
    }
    .workCulture{
        padding-bottom: 25%;
    }
    /* career */
    /* contact */
    .address-sec{
        padding-bottom: 19rem;
    }
    /* contact */
    /* freedemo */
    .freedemo-banner .pencilbox{
        left: 12%;
        max-width: 5%;
        top: 56%;
    }
    .freedemo-banner .planfly{
        max-width: 12%;
    }
    .formbehindgirl{
        max-width: 30%;
        right: -30%;
    }
    .freedemo-banner{
        padding-bottom: 21rem;
    }
    .freedemo-banner .toy-Block{
        top: 65%;
    }
    /* freedemo */
}
@media (max-width: 1199.98px){
    /* home page*/
    header .logo{
        margin-right: 0.5rem;
    }
    .menu-icon{
        border:none;
        background-color: transparent;
        color: #fff;
    }
    .menu-icon .material-icons-round{
        font-size: 32px;
    }
    .navbar{
        position: static;
    }
    .navbar-collapse{
        position: absolute;
        top: 100%;
        left: 0px;
        right: 0px;
        background: var(--bs-primary);
        padding-bottom: 0.5rem;
    } 
    .nav-link:hover{
        transform: scale(1) translateX(15px);   
    }
    .rainbox-block{
        width: 30%;
    }
    .blueSun-block{
        top: 28%;
        width: 68px;
        height: 156px;
    }
    .blue-sun {
        background-size: 73px;
    }
    .blue-sun span:first-child{
        height: 26px;
        width: 17px;
    }
    .blue-sun span:nth-child(2){
        height: 20px;
        width: 18px;
    }
    .blue-sun span:nth-child(3){
        height: 18px;
        width: 21px;
    }
    .blue-sun span:last-child{
        height: 26px;
        width: 19px;
    }
    .LetterS-block {
        height: 190px;
        width: 59px;
    }
    .tab-sec .toy-block{
        width: 18%;
        height: 17.8%;
    }
    .pencilbox{
        max-width: 6%;
    }
    .blueBallon-img{
        max-width: 7.5%;
    }
    .deliverable-sec .raisingHandBoy{
        left: 12%;
        max-width: 20%;
    }
    .boxs h3{
        font-size: 32px;
    }
    .growth-sec h2{
        font-size: 60px;
    }
    .liveDemo-sec .demo-content h2{
        font-size: 60px;
    }
    .usp-sec .card img{
        max-width: 170px;
    }
    .rainbow-right,
    .rainbow-left{
        height: 185px;
        width: 177px;
        background-size: 183px;
    }
    .testimonial-sec h2{
        font-size: 60px;
    }
    .video-text{
        padding-right: 1rem;
    }
    /* home page*/
    /* about page */
    .aboutpage .rainbox-block {
        padding-bottom: 22%;
        width:inherit;
        padding-left: 27%;
    }
    .aboutpage .toy-Block{
        right: 0;
        top: 32%;
        height: inherit;
        width: 15%;
        padding-bottom: 10.5%;
    }
    .about-section .LetterS-block{
        top: 18%;
        height: inherit;
        width: 6%;
        padding-bottom: 23%;
    }
    .planfly{
        top: 7%;
        right: 24%;
    }
    .about-content .blueSun-block{
        height: 172px;
        width: 85px;
        top: 2%;
    }
    .about-content .blueSun-block .blue-sun{
        background-size: 86px;
    }
    .about-content{
        padding-top: 13rem;
        padding-bottom: 9rem;
    }
    .about-content .LetterS-block{
        bottom: 3%;
    }
    /* about page */
    /*Product page*/
    .product-banner .banner-middle{
        padding-top: 5rem;
    }
    .product-banner .banner-content{
        min-height: 300px;
    }
    .pro-img .banner-img{
        margin-top: -12.5rem;
    }
    .classType{
        padding-top: 5rem;
    }
    .ERPfeature-sec{
        padding-bottom: 17rem;
    }
    .outKitTab .nav-item .nav-link{
        padding-left: 4rem;
        padding-right: 4rem;    
    }
    .outKitTab .toy_orange{
        bottom: 12%;
    }
    /*Product page*/
    /* media */
    .apple{
        max-width: 5.5%;
    }
    .media-banner .LetterS-block{
        height: inherit;
        width: inherit;
        padding-left: 5.5%;
        padding-bottom: 17.5%;
    }
    .media-banner .playfly{
        max-width: 12%;
    }
    .media-banner .toy_pink{
        max-width: 6.5%;
    }
    .media-banner .toy-Block{
        width: inherit;
        height: inherit;
        padding-bottom: 10%;
        padding-left: 14%;
    }
    .thermometer{
        top: 54%;
        left: 5%;
        max-width: 7%;
    }
    .media-banner .toy_orange{
        max-width: 4%;
        left: 40%;
        bottom: 7%;
    }
    .media-banner .playfly{
        max-width: 11%;
    }
    .media-banner .green-dot, 
    .media-banner .yellow-dot{
        max-width: 3.5%;
    }
    .rocket-icon{
        bottom: 77%;
        right: 16%;
    }
    .media-block .LetterS-block{
        height: inherit;
        width: inherit;
        padding-bottom: 16%;
        padding-right: 5%;
    }
    .media-block .toy_pink{
        right: 0;
        max-width: 6%;
    }
    .media-block .toy-Block{
        padding-left: 13%;
        padding-bottom: 9%;
        bottom: 12%;
        width: inherit;
        height: inherit;
    }
    .media-block .pencilbox{
         max-width: 5%;
    }
    .star2,.star1{
        max-width: 4%;
    }
    /* media */
    /* career */
    .goal-content .inner-cell .white-box{
        width: 220px;
        height: 220px;
    }
    .goal-content .inner-cell{
        margin-left: 2.8rem;
        margin-right: 2.8rem;
    }
    .careerpage .pencilbox{
        left: 11%;
        bottom: 70%;
    }
    .confetti_yellow{
        max-width: 3%;
    }
    .careerpage .about-section .green-dot.right,
    .careerpage .about-section .green-dot,
    .careerpage .yellow-dot{
        max-width: 3%;
    }
    .careerpage .about-section .LetterS-block{
        width: inherit;
    }
    .careerpage .about-content{
        background-size: 130%;
    }
    /* career */
    /* contact */
    .address-sec{
        padding-bottom: 28%;
    }
    /* contact */
    /* freedemo */
    .freedemo-banner .pencilbox{
        left: 6%;
        top: 64%;
    }
    .freedemo-banner .toy-Block{
        top: 74%;
    }
    .formbehindgirl{
        max-width: 26%;
        right: -26%;
    }
    .freedemo-banner{
        padding-bottom: 18rem;
    }
    .freedemo-banner .round{
        height: 110%;
    }
    /* freedemo */
    /* term */
    .termpg main .toy-Block{
        bottom: 11%;
    }
    .termpg main .pencilbox{
        top: 85%;
    }
    /* term */
}
@media (max-width: 991.98px){
    /*home page*/
    .navbar-nav .nav-link {
        padding-right: 1rem;
        padding-left: 1rem;
    }
    .banner-content h1{
        font-size: 46px;
        line-height: 1;
    }
    .banner-middle{
        padding-top: 3rem;
        padding-bottom: 4rem;
    }
    .sun-block{
        width: 57px;
        height: 119px;
    }
    .sun-icon{
        background-size: 90px;
    }
    .sun-icon span:first-child{
        height: 24px;
        width: 18px;
    }
    .sun-icon span:nth-child(2){
        height: 17px;
        width: 19px;
    }
    .sun-icon span:nth-child(3){
        height: 18px;
        width: 21px;
    }
    .sun-icon span:nth-child(4){
        height: 20px;
        width: 17px;
    }
    .rainbox-block{
        width: 34%;
    }
    .tab-sec{
        padding-bottom: 10rem;
    }
    .tab-sec .round{
        top: 82%;
    }
    .colorbox{
        bottom: 15.5%;
        width: 190px;
    }
    .tab-sec .nav-item{
        margin-bottom: 0.25rem;
    }
    .video-text{
        padding-right: 0;
        padding-left: 1rem;
    }
    .video-text h3{
        font-size: 32px;
    }
    .video-text span{
        font-size: 38px;
    }
    .video-block{
        border: #FACC0F solid 10px;
    }
    .video-block img{
        border-radius: 20px;
    }
    .readingboy{
        max-width: 140px;
        bottom: -3.1rem;
        right: 4%;
    }
    .video-text h3{
        line-height: 1.4;
    }
    .video-sec{
        padding-bottom: 11rem;
    }
    .blueBallon-img{
        top: -6%;
        max-width: 9%;
    }
    .deliverable-sec .deliver-chart-content{
        padding-right: 1.5rem;
    }
    .deliverable-sec .raisingHandBoy{
        max-width: 25%;
    }
    .boxs h3{
        font-size: 28px;
    }
    .rainbow-right, .rainbow-left{
        height: 149px;
        width: 149px;
        background-size: 100%;
    }
    .growth-sec .map-story{
        flex-direction: column;
    }
    .growth-sec h2{
        position: relative;
        top: inherit;
        left: inherit;
        max-width: 100%;
        text-align: center;
    }
    .total-school-count{
        right: 10%;
        padding: 1.2rem 2.2rem;
        font-size: 22px;
    }
    .total-school-count .count-block{
        font-size: 30px;
    }
    .testimonial-sec{
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
    .recent-post h2{
        font-size: 48px;
        margin-bottom: 2rem;
    }
    .growth-sec h2{
        font-size: 54px;
    }
    .testimonial-sec h2{
        font-size: 54px;
    }
    .liveDemo-sec .demo-content h2{
        font-size: 54px;
    }
    /*home page*/
    /* about page */
    .about-text p{
        font-size:18px;
    }
    .mission-sec .telescopeboy{
        max-width: 252px;
        right: -17%;
    }
    .mission-sec{
        padding-top: 20rem;
        padding-bottom: 15rem;
    }
    .missionText{
        padding-left: 1rem;
        padding-right: 0;
    }
    .team-pic-grp h4{
        font-size: 20px;
    }
    .team-pic-grp p{
        font-size: 16px;
    }
    .team-sec{
        padding-top: 6rem;
    }
    .team-pic-grp .team-block:nth-child(1), 
    .team-pic-grp .team-block:nth-child(2), 
    .team-pic-grp .team-block:nth-child(3),
    .team-pic-grp .team-block:nth-child(4),
    .team-pic-grp .team-block{
        width: 33.33%;
    }
    .team-sec .team-pic-grp .team-block.active:nth-child(4){
        transition-delay: 0s;
    }
    .team-sec .team-pic-grp .team-block.active:nth-child(7){
        transition-delay: 0s;
    }
    .team-sec .team-pic-grp .team-block.active:nth-child(8){
        transition-delay: 0.5s;
    } 
    .team-sec .team-pic-grp .team-block.active:nth-child(9){
        transition-delay: 1s;
    }
    /* about page */
    /* product page */
    .product-banner .banner-middle{
        padding-bottom: 1rem;
        padding-top: 2rem;
    }
    .pro-img .banner-img{
        margin-top: -8.5rem;
    }
    .pro-img{
        padding-bottom: 5rem;
    }
    .product-banner .banner-content{
        min-height: 262px;
    }
    .productpage .toy_pink{
        max-width: 7%;
        top: 45%;
    }
    .productpage .inner-sky-sec .toy_orange{
        max-width: 5.5%;
    }
    .productpage .toy-Block{
        height: 66%;
        width: 15%;
        bottom: 13%;
    }
    .product-banner .yellow-dot,
    .product-banner .green-dot{
        max-width: 2.5%;
    }
    .product-img-block{
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    .classType{
        padding-bottom: 6rem;
    }
    .classType .round{
        top: 69%;
    }
    .classType .pencilbox{
        bottom: 1%;
    }
    .outKitTab .nav-item{
        margin-bottom: 0;
    }
    .wizzkit-book-grp h2{
        font-size: 34px;
    }
    .wizzkit-book-grp figure{
        padding: 1.5rem;
    }
    .teacherKit-sec{
        padding-bottom: 14rem;
    }
    .teacherKit-sec .sun-block{
        bottom: 10%;
    }
    .teacherKit-sec .playfly{
        top: inherit;
        bottom: 10%;
        right: 5%;
        max-width: 16%;
    }
    .lmsFeature-sec .raisingHandBoy{
        top: -13%;
        right: 19%;
    }
    .lmsFeature-sec h2{
        margin-bottom: 3rem;
    }
    .ERPstep .ERP-title span{
        font-size: 20px;
    }
    .ERPstep .ERP-title strong{
        font-size: 50px;
        margin-right: 5px;
    }
    .ERPfeature-sec{
        padding-bottom: 13rem;
    }
    .wizzkit-book-grp h2 br{
        display: none;
    }
    .ERPfeature-sec{
        padding-top: 5rem;
    }
    .outKitTab .toy_orange{
        bottom: 10%;
    }
    /* product page */
    /* media */
    .graybox{
        padding: 20px;
    }
    .media-block{
        padding-bottom: 16rem;
    }
    .media-banner h1{
        font-size: 52px;
    }
    .media-banner{
        padding-bottom: 8rem;
    }
    /* media */
    /* career */
    .culture-detail p{
        font-size: 15px;
    }
    .careerpage .about-section{
        padding-bottom: 22rem;
    }
    .careerpage .banner-img{
        margin-top: -21rem;
        max-width: 80%;
    }
    .careerpage .inner-sky-sec{
        padding-bottom: 9%;
    }
    .careerpage .about-content {
        background-size: 160%;
    }
    .careerpage .pencilbox{
        left: inherit;
        bottom: 84%;
        right: 2%;
    }
    .careerpage .toy-Block {
        right: 20%;
        bottom: 6%;
    }
    /* career */
    /* contact */
    .contactpage .toy_orange{
        right: 15%;
    }
    .contactpage .colorbox{
        bottom: 23%;
    }
    .contactpage .about-section{
        padding-bottom: 11.5rem;
    }
    .con-title{
        width: 343px;
    }
    .banner-img .contactDetail{
        top: 175px;
        left: 192px;
        height: 206px;
        width: 316px;
        padding-top: 1.5rem;
    }
    .contactpage .banner-img{
        margin-top: -20rem;
    }
    .contactpage .banner-img:after{
        width: 424px;
        bottom: 19px;
        left: 136px;
    }
    .banner-img .contactDetail a.mail{
        font-size: 20px;
    }
    .banner-img .contactDetail a{
        margin-bottom: 1.5rem;
        font-size: 24px;
    }
    .contactpage .inner-sky-sec{
        padding-bottom: 4rem;
    }
    .contactpage .pencilbox{
        left: 4%;
    }
    /* contact */
    /* freedemo */
    .freedemo-banner .toy-Block{
        top: 82%;
    }
    .freedemo-banner .pencilbox{
        left: 3%;
        top: 78%;
    }
    .freedemo-banner{
        padding-bottom: 12rem;
    }
    .freedemo-banner .blueBallon-img{
        top: 16%;
        left: 0%;
    }
    .freedemo-banner .yellow-dot.bottom, 
    .freedemo-banner .confetti_yellow,
    .freedemo-banner .green-dot{
        max-width: 3.2%;
    }
    .freedemo-banner .planfly{
        top: 18%;
        max-width: 14%;
    }
    .formbehindgirl {
        max-width: 17%;
        right: -12%;
    }
    .freedemo-banner h1{
        font-size: 48px;
        margin-bottom: 3rem;
    }
    /* freedemo */
    /* term */
    .termpg main .apple{
        left: 14%;
    }
    .termpg main .toy-Block{
        bottom: 3%;
    }
    /* term */
}
@media (max-width: 767.98px) {
    /*home page*/
    h2{
        font-size: 38px;
        line-height: 1;
    }
    .slick-slider .slick-arrow{
        height: 40px;
        width: 40px;
    }
    .slick-slider .slick-arrow:after{
        width: 25px;
        height: 25px;
    }

    .green-dot,
    .yellow-dot, 
    .pink-dot,
    .tab-sec .pinkangle,
    .bluedot,
    .testimonial-sec .yellow-dot,
    .testimonial-sec .blue-dot,
    .testimonial-sec .blue-triangle
    {
        max-width: 3%;
    }
    .banner-content h1{
        font-size: 38px;
    }
    .banner-content h6{
        font-size: 21px;
    }
    .banner-content p br{
        display: none;
    }
    .banner-middle{
        padding-bottom: 5rem;
    }
    .banner-content{
        min-height: 292px;
    }
    .banner-boy{
        right: 9%;
        bottom: 8%;
        max-width: 24%;
    }
    .rainbox-block{
        width: 34%;
        padding-bottom: 39%;
    }
    .toy-Block {
        height: 71%;
        width: 20%;
    }
    .tab-sec .toy-block{
        width: 20%;
        height: 13.5%;
    }
    .pencilbox{
        max-width: 7%;
    }
    .video-text{
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: 8rem;
        margin-top: 2rem;
    }
    .video-sec{
        padding-bottom: 5rem;
    }
    .video-sec .sun-block{
        top: -0.5rem;
    }
    .video-text h3{
        font-size: 28px;
    }
    .video-text span{
        font-size:32px;
    }
    .testimonial-sec{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .ourAcademic .prev-btn, .ourAcademic .next-btn{
        width: 40px;
        height: 40px;
    }
    .ourAcademic .prev-btn .material-icons-round, .ourAcademic .next-btn .material-icons-round{
        font-size: 20px;
    }
    .blueBallon-img{
        max-width: 11%;
    }
    .deliverable-sec h2 br{
        display: none;
    }
    .deliverable-sec h2{
        margin-bottom:1rem ;
    }
    .deliverable-sec .deliver-chart-content{
        padding-right: calc(var(--bs-gutter-x) * .5);
    }
    .deliverable-sec .deliver-chart-content p{
        text-align: left;
     }
     .growth-sec .LetterS-block {
        height: 120px;
        width: 37px;
        top: 16%;
    }
     .boxs ol li{
         font-size: 16px;    
     }
     .boxs h3{
         font-size: 24px;
     }
     .growth-sec h2{
         font-size: 48px;
     }
     .white-cloud{
        width: 177px;
        height: 40px;
     }
     .total-school-count{
         font-size: 20px;
         padding: 1rem 2rem;
     }
     .total-school-count .count-block{
         font-size: 24px;
     }
     .testimonial-sec h2{
         font-size: 48px;
         margin-bottom: 1.5rem;
     }
     .liveDemo-sec .demo-content h2{
         font-size: 48px;
     }
     .liveDemo-sec .demo-content h2:after{
         margin-left: 5px;
     }
     .charater img{
         width: 80%;
     }
     .recent-post{
         padding-top: 3.5rem;
         padding-bottom: 25%;
     }
     .recent-post h2{
         font-size: 38px;
         padding-top: 1.5rem;
     }
     .recent-post h2 span .pencil-icon{
        width: 64px;
        height: 11px;
     }
     .testimonial-sec .first-ballon{
         max-width: 14%;
     }
     .footer-bg{
         background-size: 800px;
         padding-top: 3rem;
     }
     footer .reading-boy{
        padding-bottom: 20%;
        padding-left: 12%;
        bottom: 3%;
     }
     footer .glob{
        padding-left: 8%;
        padding-top: 11%;
     }
     footer .alphA{
        padding-left: 4.5%;
        padding-top: 4.5%;
     }
     footer .alphC{
        padding-left: 4.5%;
        padding-top: 4.5%;
     }
     footer .book-icon{
        padding-left: 14%;
        padding-top: 6.5%;
     }
     footer .books{
        padding-left: 9%;
        padding-bottom: 7%;
     }
     footer .rainbow-left{
        padding-top: 23%;
        padding-right: 23%;
     }
     footer ul.link li a{
         font-size: 16px;
     }
     footer .contactus{
         font-size: 15px;
     }
     .copy-text{
         font-size: 16px;
     }
     /*home page*/
     /* about page */
     .about-section{
        padding-bottom: 32%;
        padding-top: 8rem;
     }
     .inner-sky-sec{
         padding-bottom: 11%;
     }
     .banner-img{
         margin-top: -33%;
     }
     .about-content .blueBallon-img{
         top: inherit;
         bottom: 1%;
         left: 0;
         max-width: 14%;
     }
     .planfly{
         top: 5%;
         right: 29%;
         max-width: 20%;
     }
     .aboutlabel{
         margin-bottom: 9rem;
         display: flex;
         justify-content: center;
     }
     .about-Img{
          margin-bottom: 2rem;
     }
     .about-text h3{
         text-align: center;
     }
     .about-text p{
          text-align: center;
     }
     .about-text h3{
         font-size: 32px;
     }
     .about-text p{
         font-size: 16px;
         line-height: 1.7;
     }
     .mission-sec .title h2{
         font-size: 38px;
         padding-bottom: 3rem;
     }
     .team-pic-grp .team-block:nth-child(1), 
     .team-pic-grp .team-block:nth-child(2), 
     .team-pic-grp .team-block:nth-child(3), 
     .team-pic-grp .team-block:nth-child(4), 
     .team-pic-grp .team-block{
        width: 50%;
     }
     .flyingstudent{
         max-width: 26%;
     }
     .about-content .blueSun-block{
        height: 104px;
        width: 49px;
     }
     .about-content .blueSun-block .blue-sun{
         background-size: 50px;
     }
     .about-content{
         padding-top: 10rem;
         padding-bottom: 7rem;
     }
     .about-content .LetterS-block{
        height: 158px;
        width: 30px;
     }
     .team-sec .LetterS-block{
        height: inherit;
        width: inherit;
        padding-left: 8%;
        padding-bottom: 26%;
     }
     .team-sec .blueSun-block{
        width: 65px;
        height: 137px;
     }
     .team-sec .blueSun-block .blue-sun {
        background-size: 65px;
    }
    .missionText{
        text-align: center;
        margin-bottom: 3rem;
    }
    .mission-sec{
        padding-bottom: 7rem;
    }
    .mission-sec .sun-block{
        bottom: 3%;
    }
    .missionText h2{
        font-size: 30px;
    }
    .missionText p {
        font-size: 16px;
        font-weight: 500;
    }
    .mission-sec .title h2:after{
        top: -40px;
        height: 210px;
    }
    .mission-sec .title{
        max-width: 290px;
    }
    .aboutpage .rainbox-block{
        padding-left: 31%;
        padding-bottom: 24%;
    }
    .about-section h1{
        font-size: 48px;
    }
    /* .team-sec .team-pic-grp .team-block.active:nth-child(2){
        transition-delay: 0.5s;
    } */
    .team-sec .team-pic-grp .team-block.active:nth-child(3){
        transition-delay: 0s;
    }
    .team-sec .team-pic-grp .team-block.active:nth-child(4){
        transition-delay: 0.5s;
    }
    .team-sec .team-pic-grp .team-block.active:nth-child(5){
        transition-delay: 0s;
    }
    .team-sec .team-pic-grp .team-block.active:nth-child(6){
        transition-delay: 0.5s;
    }
    .team-sec .team-pic-grp .team-block.active:nth-child(7){
        transition-delay: 0s;
    }
    .team-sec .team-pic-grp .team-block.active:nth-child(8){
        transition-delay: 0.5s;
    }
    .team-sec .team-pic-grp .team-block.active:nth-child(9){
        transition-delay: 0s;
    }
     /* about page */
     /* product */
     .productpage .toy-Block {
        height: 80%;
     }
     .product-banner .banner-content {
        min-height: 160px;
     }
     .pro-img .banner-img{
         margin-top: -5.5rem;
     }
     .classType{
         padding-top: 3rem;
     }
     .classType .blueSun-block{
        width: 80px;
        height: 170px;
        top: 8%;
     }
    .classType .blueSun-block .blue-sun{
        background-size: 80px;
    }
    .classType .blue-sun span:first-child {
        height: 15%;
        width: 21%;
    }
    .classType .blue-sun span:nth-child(2) {
        height: 13%;
        width: 23%;
    }
    .classType .blue-sun span:nth-child(3) {
        height: 12%;
        width: 25%;
    }
    .classType .blue-sun span:last-child {
        height: 17%;
        width: 21%;
    }
     .classType .LetterS-block{
         top: 7%;
     }
     
     .preProduct{
         flex-direction:column ;
     }
     .outKitTab .nav-item .nav-link{
        padding: 1rem 2.5rem;
        font-size: 18px;
     }
     .product-cell{
         margin-bottom: 1rem;
     }
     .product-cell:last-child{
        margin-bottom: 0;
    }
    .product-cell:last-child p{
        color: #fff;
    }
     .product-cell p{
         color:#000;
     }
     .classType .round{
         top: 88%;
     }
     .tab-sec .toy-block{
         height: 8.5%;
         bottom: 3%;
     }
     .outKitTab .blueSun-block{
        width: 49px;
        height: 108px;
     }
     .outKitTab .blueSun-block .blue-sun {
        background-size: 52px;
     }
     .outKitTab .blue-sun span:first-child {
        height: 21px;
        width: 13px;
     }
     .outKitTab .blue-sun span:nth-child(2) {
        height: 19px;
        width: 16px;
     }
     .outKitTab .blue-sun span:nth-child(3) {
        height: 16px;
        width: 16px;
     }
     .outKitTab .blue-sun span:last-child {
        height: 21px;
        width: 13px;
     }
     .outKitTab .LetterS-block{
        height: 28%;
        width: 6.2%;
     }
     .outKitTab{
         padding-bottom: 7rem;
     }
     .curriculum-list li{
         width: 100%;
     }
     .lmsFeature-sec .LetterS-block{
        height: 44%;
        width: 7.8%;
    }
    .ERPfeature-sec .blueSun-block{
        width: 69px;
        height: 145px;
    }
    .ERPfeature-sec .blueSun-block .blue-sun{
        background-size: 70px;
    }
    .ERPfeature-sec .blue-sun span:first-child {
        height: 15%;
        width: 21%;
    }
    .ERPfeature-sec .blue-sun span:nth-child(2) {
        height: 13%;
        width: 23%;
    }
    .ERPfeature-sec .blue-sun span:nth-child(3) {
        height: 12%;
        width: 25%;
    }
    .ERPfeature-sec .blue-sun span:last-child {
        height: 17%;
        width: 21%;
    }
    .ERPfeature-sec .playfly{
        max-width: 20%;
    }
    .ERPstep [class*='col-'] figure{
        max-width: 50%;
    }
    .ERPfeature-sec{
         padding-bottom: 26%;
    }
     /* product */
     /* media */
     .apple{
         top: 50%;
     }
     .rocket-icon{
         bottom: 68%;
     }
     .media-block{
         padding-bottom: 13rem;
     }
     .media-block .toy-Block{
        bottom: 5%;
        padding-left: 18%;
        padding-bottom: 12.5%;
     }
     .media-block .pencilbox{
         bottom: 5%;
         max-width: 6.5%;
     }
     .thermometer {
        top: 58%;
        left: 4%;
        max-width: 8%;
    }
     /* media */
     /* career */
     .careerpage .about-section{
        padding-bottom: 15rem;
     }
     .careerpage .banner-img{
         margin-top: -14rem;
     }
     .culture-detail [class*="col"]{
         margin-bottom: 1rem;
     }
     .culture-detail [class*="col"]:last-child{
         margin-bottom: 0;
     }
     .goal-sec.active .goal-content .inner-cell:nth-child(1){
        transform: translateX(141%) translateY(-141%)
     }
     .goal-sec.active .goal-content .inner-cell:nth-child(3){
        transform: translateX(-141%) translateY(141%)
     }
     .goal-content{
        margin-top: 24rem;
        margin-bottom: 22rem;
     }
     .culture-detail [class*="col"]{
        text-align: center;
    }
    .workCulture .planfly{
        max-width: 13%;
        top: 3%;
    }
    .workCulture .blueSun-block {
        width: 66px;
        height: 140px;
    }
    .workCulture .blueSun-block .blue-sun {
        background-size: 67px;
    }
    .workCulture .blueSun-block span:first-child {
        height: 17%;
        width: 22%;
    }
    .workCulture .blueSun-block span:nth-child(2) {
        height: 15%;
        width: 24%;
    }
    .workCulture .blueSun-block span:nth-child(3) {
        height: 12%;
        width: 26%;
    }
    .workCulture .blueSun-block span:last-child {
        height: 16%;
        width: 22%;
    }
    .culture-detail h4{
        min-height: inherit;
    }
     /* career */
     /* contact */
     .address-sec [class*="col"]:first-child{
        display: flex;
        flex-direction: column;
        align-items: center;
     }
     .address-sec .social-link{
         justify-content: center;
     }
     .address-sec .contact li, 
     .address-sec .contact li a{
         font-size: 16px;
     }
     .map-area{
         height: 350px;
     }
     .con-title p{
         font-size: 16px;
     }
     .con-title{
         width: 254px;
     }
     .contactpage .banner-img {
        margin-top: -14.8rem;
     }
     .contactpage .about-section{
        padding-bottom: 7.5rem;
        padding-top: 7.5rem;
     }
     .banner-img .contactDetail {
        top: 131px;
        left: 142px;
        height: 206px;
        width: 234px;
        padding-top: 0.5rem;
    }
    .banner-img .contactDetail a {
        margin-bottom: 1rem;
        font-size: 20px;
    }
    .banner-img .contactDetail a i {
        font-size: 22px;
    }
     .banner-img .contactDetail a.mail {
        font-size: 18px;
        word-break: break-word;
        line-height: 1rem;
    }
    .contactpage .banner-img:after {
        width: 314px;
        height: 10px;
        bottom: 13px;
        left: 103px;
    }
    .contactpage .pencilbox{
        bottom: 46%;
        max-width: 5.5%;
    }
    .contactpage .toy_pink {
        max-width: 9%;
        right: 8%;
    }
    .contactpage .toy_orange {
        right: 5%;
        max-width: 6%;
        top: 17%;
    }
    .contactpage .colorbox{
        bottom: 18%;
        max-width: 22%;
    }
    .address-sec .contact li .material-icons{
        font-size: 24px;
    }
     /* contact */
     /* free demo*/
     .demoFrom .formbook{
         padding-left: 3rem;
         padding-right: 3rem;
         width: 90%;
     }
     .formbehindgirl {
        right: -30px;
        max-width: 80px;
    }
    .freedemo-banner .pencilbox{
        top: 83%;
    }
    .freedemo-banner .toy-Block{
        top: 84%;
        padding-left: 15%;
        padding-bottom: 11%;
    }
     /* free demo */
     /* term */
     .termpg main .apple{
        top: 8rem;
     }
     .termpg main .toy-Block{
        bottom: 2%;
    }
    .termpg main .pencilbox{
        top: inherit;
        bottom: 2%;
    }
     /* term */
}
@media (max-width: 575.98px) {
    /*home page*/
    h2{
        font-size: 30px;
    }
    .menu-icon[aria-expanded="true"] span:first-child{
        transform: rotate(47deg) translate(8px, 7px);
    }
    .navbar-nav .nav-link{
        font-size: 15px;
    }
    .slick-slider .slick-arrow{
        width: 30px;
        height: 30px;
    }
    .slick-slider .slick-arrow:after{
        width: 25px;
        height: 25px;
    }
    .banner-middle{
        position:relative;
        z-index: 1;
        padding-bottom: 6rem;
    }
    .banner-content h1{
        font-size: 30px;
    }
    .banner-content h6{
        font-size: 18px;
        line-height: 1.2;
    }
    .banner-content p{
         font-size: 15px;
         margin-bottom: 0;
    }
    .banner-content{
        background-color: #26356F;
        background-image:none;
        position: relative;
        min-height: inherit;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .banner-content:after{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        content: "";
        background-image: url(../images/mobile-board-top.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center top;
    }
    .banner-content:before{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: "";
        background-image: url(../images/mobile-board1.png);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center bottom;
    }
    .recentpost .item{
        padding: 1rem;
    }
    .recentpost .item p{
        font-size: 14px;
    }
    header .logo{
        max-width: 114px;
        margin-right: 0.25rem;
    }
    .head-contact{
        font-size: 14px;
    }
    .head-contact a{ 
        font-size:16px;
    }
    .menu-icon{
        width: 32px;
    }
    .menu-icon span{
        margin-bottom: 5px;
    }
    .testimonial-slider .item h3{
        font-size: 20px;
    }
    .rainbow-img{
        background-size: 329px;
    }
    .blueSun-block{
        width: 43px;
        height: 95px;
    }
    .blue-sun {
        background-size: 46px;
    }
    .blue-sun span:first-child {
        height: 17px;
        width: 12px;
    }
    .blue-sun span:nth-child(2) {
        height: 16px;
        width: 13px;
    }
    .blue-sun span:nth-child(3) {
        height: 14px;
        width: 13px;
    }
    .blue-sun span:last-child {
        height: 19px;
        width: 11px;
    }
    .LetterS-block {
        height: 90px;
        width: 28px;
    }
    .sun-block {
        width: 33px;
        height: 77px;
    }
    .sun-icon {
        background-size: 60px;
    }
    .sun-icon span:first-child {
        height: 13px;
        width: 12px;
    }
    .sun-icon span:nth-child(2) {
        height: 12px;
        width: 13px;
    }
    .sun-icon span:nth-child(3) {
        height: 13px;
        width: 15px;
    }
    .sun-icon span:nth-child(4) {
        height: 16px;
        width: 12px;
    }
    .colorbox{
        width: 130px;
    }
    .tab-sec .toy-block{
        width: 24%;
        height: 11.5%;
    }
    .pencilbox{
        max-width: 9%;
    }
    .video-text{
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }
    .readingboy{
        max-width: 85px;
        bottom: -2rem;
        right: 3px;
    }
    .video-sec{ 
        padding-bottom: 4.5rem;
    }
    .video-text h3{
        font-size: 24px;
    }
    .video-text span{
        font-size: 26px;
    }
    .ourAcademic{
        padding-top: 3rem;
    }
    .ourAcademic .prev-btn, .ourAcademic .next-btn{
        width: 30px;
        height: 30px;
    }
    .ourAcademic .prev-btn .material-icons-round, 
    .ourAcademic .next-btn .material-icons-round{
        font-size: 18px;
    }
    .blueBallon-img{
        top: -4%;
        max-width: 47px;
    }
    .deliverable-sec .deliver-option select{
        padding: 12px 30px 12px;
        font-size: 16px;
    }
    .boxs{
        padding: 1rem 2rem;
    }
    .deliverable-sec .raisingHandBoy{
        max-width: 120px;
    }
    .deliverable-sec .LetterS-block{
        height: 117px;
        width: 36px;
        bottom: 37px;
    }
    .usp-sec h2{
        font-size: 30px;
    }
    .usp-sec h2::after{
        height: 58px;
        width: 116px;
        top: -50px;
    }
    .rainbow-right, .rainbow-left{
        width: 120px;
        height: 120px;
    }
    .usp-sec .blueSun-block {
        width: 35px;
        height: 83px;
    }
    .usp-sec .blue-sun{
        background-size: 43px;
    }
    .usp-sec .blue-sun span:first-child {
        height: 20px;
        width: 12px;
    }
    .usp-sec .blue-sun span:nth-child(2) {
        height: 17px;
        width: 13px;
    }
    .usp-sec .blue-sun span:nth-child(3) {
        height: 15px;
        width: 14px;
    }
    .usp-sec .blue-sun span:last-child {
        height: 20px;
        width: 12px;
    }
    .growth-sec h2{
        font-size: 38px;
    }
    .growth-sec .LetterS-block{
        height: 74px;
        width: 23px;
        top: 20%;
    }
    .testimonial-sec h2{
        font-size: 38px;
    }
    
    .deliverable-sec{
        padding-top: 3rem;
    }
    .testimonial-sec{
        padding-top: 2.5rem;
        padding-bottom: 2rem;
    }
    .testimonial-sec .first-ballon{
        max-width: 23%;
    }
    .liveDemo-sec .demo-content h2{
        font-size: 34px;
    }
    .liveDemo-sec{
        padding-top: 3rem;
    }
    
    .liveDemo-sec .demo-content h2:after{
        margin-left: 9px;
    }
    .charater-group{
        padding-left: 1rem;
        padding-right: 1rem; 
    }
    .recent-post h2{
        font-size: 30px;
        padding-top: 1rem;
        margin-bottom: 1rem;
    }
    .recent-post h2 span .pencil-icon{
        width: 45px;
    }
    footer{
        backface-visibility: hidden;
    }
    footer .rainbow-left{
        padding-top: 28%;
        padding-right: 28%;
    }
    footer .glob {
        padding-left: 11%;
        padding-top: 16%;
    }
    footer .book-icon{

        padding-left: 17%;
        padding-top: 8.5%;
    }
    footer .books {
        padding-left: 11%;
        padding-bottom: 8%;
        right: 5%;
    }
    footer .alphC {
        padding-left: 6%;
        padding-top: 6%;
        bottom: 1%;
    }
    footer .alphA {
        padding-left: 6%;
        padding-top: 6%;
        bottom: 6%;
    }
    footer .reading-boy{
        padding-bottom: 23.5%;
        padding-left: 14%;
    }
    .footer-bg{
        padding-bottom: 30%;
        padding-top: 1rem;
    }
    footer .pink-sun{
        left: inherit;
        right: 0;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        top: 17%;
    }
    footer .LetterS-block{
        top: 40%;
    }
    footer .books{
        bottom: 5%;
    }
    footer ul.link li{
        text-align: center;
    }
    footer ul.link li a{
        font-size: 14px;
    }
    footer .contactus{
        font-size: 14px;
        text-align: center;
    }
    footer .contactus a{
         font-size: 16px;
    }
    footer .social-link{
        justify-content: center;
    }
    footer .social-link li a{
        width: 34px;
        height: 34px;
        font-size: 18px;
    }
    .copy-text{
        font-size: 14px;
    }
    .total-school-count{
        font-size: 14px;
        padding: 0.5rem 1rem;
        line-height: 1;
        border-radius: 10px;
        bottom: 3%;
    }
    .total-school-count .count-block{
        font-size: 18px;
    }
    /*home page*/
    /* about page */
    .about-section h1{
        font-size: 38px;
    }
    .team-pic-grp{
        justify-content: center;
    }
    .team-pic-grp .team-block:nth-child(1), 
    .team-pic-grp .team-block:nth-child(2), 
    .team-pic-grp .team-block:nth-child(3), 
    .team-pic-grp .team-block:nth-child(4), 
    .team-pic-grp .team-block{
        width: 100%;
        max-width: 300px;
    }
    .about-section{
        padding-bottom: 36%;
    }
    .aboutpage .rainbox-block{
        padding-left: 22%;
        padding-bottom: 20%;
    }
    .inner-sky-sec{
        padding-bottom: 17%;
    }
    .about-section{
        padding-bottom: 36%;
    }
    .about-text h3{
        font-size: 26px;
    }
    .about-text p{
         font-size: 14px;
    }
    .about-content{
        padding-top: 7rem;
        padding-bottom: 5rem;
    }
    .about-content .blueSun-block{
        height: 71px;
        width: 31px;
    }
    .about-content .blueSun-block .blue-sun {
        background-size: 34px;
    }
    .about-content .LetterS-block{
        height: 113px;
        width: 21px;
        bottom: 1%;
    }
    .about-text{
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }
    .mission-sec{
        padding-top: 16rem;
    }
    .flyingstudent{
        max-width: 30%;
    }
    .mission-sec .title h2{
        font-size: 30px;
    }
    .team-sec{
         padding-top: 3rem;
    }
    .team-sec .blueSun-block {
        width: 41px;
        height: 91px;
    }
    .team-sec .blueSun-block .blue-sun {
        background-size: 43px;
    }
    .team-sec .team-pic-grp .team-block.active:nth-child(2),
    .team-sec .team-pic-grp .team-block.active:nth-child(3),
    .team-sec .team-pic-grp .team-block.active:nth-child(4),
    .team-sec .team-pic-grp .team-block.active:nth-child(5),
    .team-sec .team-pic-grp .team-block.active:nth-child(6),
    .team-sec .team-pic-grp .team-block.active:nth-child(7),
    .team-sec .team-pic-grp .team-block.active:nth-child(8),
    .team-sec .team-pic-grp .team-block.active:nth-child(9),
    .team-sec .team-pic-grp .team-block.active:nth-child(10),
    .team-sec .team-pic-grp .team-block.active:nth-child(11){
        transition-delay:0s;
    }
    /* about page */
    /* product */
    .wizzkit-book-grp figure{
        max-width: 100%;
    }
    .curriculum-block{
        flex-direction: column;
    }
    .curriculum-block .icon-block{
        margin-bottom: 1rem;
    }
    .curriculum-list li{
        font-size: 15px;
    }
    .curriculum-list li::marker{
        font-size: 16px;
    }
    .product-banner .banner-content:before, .product-banner .banner-content:after{
        display: none;
    }
    .product-banner .banner-middle{
        position: inherit;
        z-index: inherit;
    }
    .pro-img{
        padding-bottom: 3rem;
    }
    .product-banner{
        padding-top: 65px;
    }
    .product-cell.pink img{
        max-width: 100%;
    }
    .outKitTab .nav-item .nav-link {
        padding: 0.75rem 1.2rem;
        font-size: 17px;
    }
    .outKitTab .nav-tabs{ 
        margin-bottom: 2rem;
    }
    .studentKit-sec .rainbow-left, 
    .studentKit-sec .rainbow-right{
        background-size: 177px;
        height: 179px;
        width: 129px;
    }
    .studentKit-sec{
        padding-bottom: 11rem;
    }
    .teacherKit-sec{
        padding-top: 2rem;
        padding-bottom: 7rem;
    }
    .teacherKit-sec h2{
        margin-bottom: 1rem;
    }
    .stem-title-bar{
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .wizzkit-book-grp h2{
        font-size: 30px;
    }
    .lmsFeature-sec .raisingHandBoy{
        top: -19%;
        right: 15%;
        max-width: 26%;
    }
    .ERPfeature-sec h2{
        margin-bottom: 2rem;
    }
    .ERPfeature-sec .blueSun-block{
        width: 50px;
        height: 110px;
    }
    .ERPfeature-sec .blueSun-block .blue-sun{
        background-size: 52px;
    }
    .ERPstep [class*='col-'] figure{
        max-width: 30%;
    }
    .ERPstep .ERP-title span{
        font-size: 16px;
    }
    .ERPstep .ERP-title strong{
        font-size: 40px;
    }
    .ERPstep [class*='col-']:last-child{
        margin-bottom: 0;
    }
    .outKitTab .blueSun-block{
        top: 70%;
    }
    .outKitTab .toy_orange{
        right: 17%;
    }
    .stem-title-bar:after{
        left: 109px;
    }
    .classType .pencilbox{
        max-width: 9%;
    }
    .outKitTab .nav-item:first-child .nav-link{
        border-radius: 30px 0 0 0;
    }
    .outKitTab .nav-item:last-child .nav-link{
        border-radius: 0 30px 0 0;
    }
    .product-cell p{
        font-size: 18px;
        margin-top: 0.5rem;
    }
    .pattern-btn span{ 
        font-size:20px ;
    }
    .classType .blueSun-block{
        width: 46px;
        height: 96px;
    }
    .classType .blueSun-block .blue-sun{
        background-size: 45px;
    }
    /* product */
    /* media */ 
    .media-block{
        padding-bottom: 34%;
        padding-top: 3rem;
    }
    .media-block .toy-Block{
        bottom: 3%;
        padding-left: 23%;
        padding-bottom: 16%;
    }
    .media-block .pencilbox{
        bottom: 3%;
    }
    .media-banner h1{
        font-size: 30px;
    }
    .media-banner{
        padding-bottom: 5rem;
        padding-top: 6rem;
    }   
    .media-block .toy_pink{
        top: inherit;
        bottom: 4%;
        right: 28%;
        max-width: 8%;
    }
    .media-banner .toy-Block {
        padding-bottom: 13%;
        padding-left: 18%;
    }
    .rocket-icon{
        max-width: 10%;
    }
    .media-banner .toy_pink{
        max-width: 8%;
    }
    .media-banner .playfly{
        max-width: 14%;
    }
    .thermometer {
        top: 58%;
        left: 4%;
        max-width: 10%;
    }
    /* media */
    /* career */
    .goal-content .inner-cell .white-box {
        width: 200px;
        height: 200px;
    }
    .goal-sec .goal-content .inner-cell:nth-child(1) {
        transform: translateX(145%);
    }
    .goal-sec .goal-content .inner-cell:nth-child(3) {
        transform: translateX(-145%);
    }
    .goal-sec.active .goal-content .inner-cell:nth-child(1) {
        transform: translateX(145%) translateY(-141%);
    }
    .goal-sec.active .goal-content .inner-cell:nth-child(3) {
        transform: translateX(-145%) translateY(141%);
    }
    .goal-content .inner-cell .white-box span{
        font-size: 16px;
    }
    .careerpage .pencilbox{
        max-width: 5%;
    }
    .careerpage .about-section{
        padding-bottom: 11rem;
        padding-top: 7rem;
    }
    .careerpage .banner-img{
        margin-top: -10rem;
    }
    .careerpage .about-section .LetterS-block{
        top: 24%;
    }
    .jobposition-sec{
        padding-top: 2rem;
        padding-bottom:2rem;
    }
    .jobtext .job-title{
        flex-direction: column;
    }
    .jobtext .job-title h5{
        margin-bottom: 0.5rem;
    }
    .jobcatContent .jobtext{
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .careerpage .about-content{
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    .careerpage .about-content .planfly{
        max-width: 15%;
        top: 5%;
    }
    .goal-sec{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .goal-content{
        margin-top: 22rem;
    }
    .workCulture{
        padding-top: 3rem;
    }
    .workCulture h2{
        margin-bottom: 3rem;
    }
    .jobcatContent .jobtext{
        width: 100%;
        margin-right: 0;
    }
    .culture-detail h4{
        font-size: 18px;
    }
    /* career */
    /* contact */
    .map-area{
        height: 300px;
    }
    .contactpage .banner-img{
        max-width: 350px;
        margin-top: -10.1rem;
    }
    .banner-img .contactDetail {
        top: 89px;
        left: 97px;
        height: 100px;
        width: 158px;
        padding-top: 0.3rem;
    }
    .banner-img .contactDetail a {
        margin-bottom: 0.4rem;
        font-size: 14px;
    }
    .banner-img .contactDetail a i {
        font-size: 16px;
    }
    .banner-img .contactDetail a.mail {
        font-size: 13px;
    }
    .contactpage .banner-img:after {
        width: 215px;
        bottom: 9px;
        left: 68px;
    }
    /* contact */
    /* free demo */
    .demoFrom .formbook{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .half-grp{
        flex-direction: column;
    }
    .half-grp .half-cell{
        width: 100%;
        margin-right: 0;
    }
    .freedemo-banner{
        padding-bottom: 8rem;
        padding-top: 6rem;
    }
    .freedemo-banner h1{
         font-size: 38px;
         margin-bottom: 1rem;
    }
    .freedemo-banner .pencilbox{
        top: 89%;
    }
    .freedemo-banner .toy-Block{
        top: 89%;
    }
    .freedemo-banner .planfly{
        top: 13%;
    }
    .formOption .form-check-label{
        font-size: 14px;
    }
    /* free demo*/
    /* term */
    .term-content p{
        font-size: 15px;
    }
    /* term */
}
@media (max-width:374px){
    /* contact page */
    .contactpage .banner-img {
        max-width: 296px;
        margin-top: -8.5rem;
    }
    .banner-img .contactDetail {
        top: 75px;
        left: 82px;
        height: 84px;
        width: 133px;
        padding-top: 0;
    }
    .contactpage .about-section {
        padding-bottom: 7rem;
        padding-top: 6.5rem;
    }
    .con-title p {
        font-size: 14px;
    }
    .banner-img .contactDetail a i{
        display: none;
    }
    .banner-img .contactDetail a{
        margin-bottom: 0.5rem;
    }
    .banner-img .contactDetail{
        padding-top: 0.5rem;
    }
    .contactpage .banner-img:after{
        width: 176px;
        bottom: 11px;
        left: 61px;
        height: 4px;
    }
    .contactpage .inner-sky-sec {
        padding-bottom: 3rem;
    }
    /* contact page */
}