@charset "UTF-8";

@import url("bootstrap-grid.css");
@import url("slick.css");
@import url("typography.css");
@import url("header.css");
@import url("footer.css");



/*Banner*/
.banner {
    position: relative;
    height: 700px;
    max-height: 100dvh;
    background-color: var(--white);
    background-position: right bottom;
    background-size: 800px;
    background-repeat: no-repeat;
}
.bannerInner {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    z-index: 1;
}
.banner .boltText {
    background-color: var(--white);
    display: inline-flex;
    gap: 15px;
    align-items: center;
    font-size: 20px;
    margin: 0 0 30px;
    padding: 5px 20px 5px 8px;
    border-radius: 50px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 5px;
}
.banner .boltText .icon {
    background-color: var(--lightGrey);
    width: 40px;
    height: 40px;
    font-size: 20px;
    color: var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
}
.banner h1 {
    font-size: 60px;
}

@media only screen and (max-width: 1399px) {
    .banner {
        background-size: 650px;
        height: 550px;
    }
}

@media only screen and (max-width: 1199px) {
    .banner {
        height: 500px;
        background-size: 600px;
    }
    .banner .boltText .icon {
        width: 35px;
        height: 35px;
        font-size: 18px;
    }
    .banner .boltText {
        font-size: 18px;
    }
    .banner h1 {
        font-size: 50px;
    }
}
@media only screen and (max-width: 991px) {
    .banner {
        background-size: 450px;
    }
    .banner .boltText .icon {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    .banner .boltText {
        font-size: 16px;
    }
    .banner h1 {
        font-size: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .banner::before {
        content: "";
        background-color: rgba(27,21,64,0.6);
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .banner .boltText .icon {
        width: 26px;
        height: 26px;
        font-size: 15px;
    }
    .banner .boltText {
        font-size: 15px;
    }
    .banner h1 {
        font-size: 36px;
    }
    .banner h1,
    .banner p {
        color: var(--white);
    }
    .banner br {
        display: none;
    }
}

/*Spelling Success*/
.spellingSuccess {
    background-color: var(--green);
    padding: 40px;
    text-align: center;
    margin: 40px 0 0;
    border-radius: 10px;
}
.spellingSuccess p {
    margin-top: 20px;
}
@media only screen and (max-width: 991px) {
    .spellingSuccess {
        padding: 30px;
    }
}
@media only screen and (max-width: 767px) {
    .spellingSuccess {
        padding: 20px;
    }
}

ul#menu-main-footer-menu {
    display: flex;
    gap: 50px;
}
@media only screen and (max-width: 991px) {
    ul#menu-main-footer-menu {
        gap: 23px;
    }
}
/*Accordion Image*/
.accordionImageBlock {
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
}
.accordionImageBlock img {
    width: 100%;
}
.accordionContentBlock {
    padding-block: 20px;
}


/*Video*/
.video {
    background-color: var(--skyblue);
    padding: 15px;
    border-radius: 20px;
}
.videoBody {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
}
.video video,
.video iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    border: 0;
    vertical-align: middle;
    border-radius: 20px;
    object-fit: cover;
}
.videoBody img.poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    cursor: pointer;
    border-radius: 15px;
    z-index: 1;
}
.videoPlayBtn {
    width: 80px;
    height: 80px;
    background-color: var(--white);
    color: var(--blue);
    font-size: 25px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    z-index: 2;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.videoPlayBtn.pause {
    opacity: 0;
    visibility: hidden;
}
.videoBody:hover .videoPlayBtn {
    opacity: 1;
    visibility: visible;
}

.videoButton {
    padding-block: 10px;
}
.playerButton {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 20px;
    color: var(--white);
    text-align: left;
    margin: 10px auto;
    cursor: pointer;
}
.videoIcon {
    background-color: var(--white);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;   
    transition: all 0.3s ease-in-out; 
}
.videoIcon img {
    max-height: 30px;
}
@media only screen and (max-width: 1199px) {
    .playerButton {
        font-size: 18px;
        gap: 8px;
    }
}
@media only screen and (max-width: 991px) {
    .playerButton {
        margin-inline: 0;
    }
}
@media only screen and (max-width: 767px) {
    .videoPlayBtn {
        width: 60px;
        height: 60px;
        font-size: 20px;
    }
    .playerButton {
        font-size: 16px;
        gap: 5px;
    }
}
@media only screen and (max-width: 575px) {
    .video {
        padding: 10px;
    }
    .videoPlayBtn {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
    .videoIcon {
        width: 40px;
        height: 40px;
    }
    .videoIcon img {
        max-height: 20px;
    }
    .playerButton {
        font-size: 14px;
    }
}
@media only screen and (max-width: 479px) {
    .videoIcon {
        width: 35px;
        height: 35px;
    }
    .videoIcon img {
        max-width: 20px;
        max-height: 16px;
    }
    .playerButton {
        font-size: 13px;
    }
}

/*Parents And School*/
.parentsAndSchoolInner {
    padding-top: 3rem;
}
.parentsAndSchoolInner h5 {
    font-family: 'Sunflare Regular';
    font-weight: normal;
    margin-top: 30px;
}
.parentSlider {
    padding: 0 3rem;
}
.parentSlider .item {
    padding: 0 3rem;
    text-align: center;
}
.parentSlider .slick-arrow {
    background-color: transparent;
    width: 30px;
    height: 30px;
    background-size: 15px;
    top: 30%;
    color: var(--black);
    cursor: pointer;
    border-radius: 0;
    -ms-transform: translateY(-30%);
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%);
    -webkit-filter: invert(100%); /* Safari/Chrome */
    filter: invert(100%);
}
.parentSlider .slick-dots {
    position: relative;
    bottom: 0;
    gap: 15px;
    margin-top: 6rem;
}
.parentSlider .slick-dots li.slick-active {
    background-color: var(--greyTint1);
}
.parentSlider .slick-dots li {
    background-color: rgba(0,0,0,0.2);
    width: 10px;
    height: 10px;
    cursor: pointer;
    border-radius: 50%;
}
.parentSlider .slick-dots li button {
    text-indent: -1000%;
    overflow: hidden;
}
.choose_spellwiz .parentSlider .slick-dots {
    margin-top: 3rem;
}
@media only screen and (max-width: 991px) {
    .parentsAndSchoolInner {
        padding-top: 1rem;
    }
    .parentsAndSchoolInner h5 {
        font-size: 17px;
    }
    .parentSlider {
        padding: 0 2rem;
    }
    .parentSlider .item {
        padding: 0 1rem;
    }
    .parentSlider .slick-arrow {
        background-size: 12px;
    }
    .parentSlider .slick-dots {
        margin-top: 3rem;
    }
}
@media only screen and (max-width: 575px) {
    .choose_spellwiz .parentSlider .slick-dots ,
    .parentSlider .slick-dots {
        margin-top: 1rem;
    }
}


/*Free Trial*/
.freeTrial {
    position: relative;
}
.leftMinusImg {
    position: absolute;
    bottom: 0;
    max-width: 50%;
    max-height: 100%;
    padding-right: 12px;
}
/* .leftMinusImg {
    position: relative;
    left: -40px;
} */
.freeTrialContent * {
    color: var(--white);
}
.freeTrialContent ul,
.freeTrialContent ol {
    margin-top: 35px;
}
.freeTrialContent .buttonOuter {
    margin-top: 50px;
}
.freeTrialContent .commonButton {
    color: var(--darkGrey);
}
.freeTrialContent .commonButton:hover {
    color: var(--white);
}


/*Contact Us*/
.contactBio {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 40px;
    border-radius: 20px;
    overflow: hidden;
}
.contactBio::before {
    content: "";
    width: 250px;
    height: 250px;
    position: absolute;
    right: -50px;
    bottom: -60px;
    background-image: url('../images/icons/circle-icon.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
}
.contactBio p {
    color: var(--white);
}
.contactInfo__item {
    display: flex;
    gap: 20px;
    font-size: 22px;
    margin-top: 30px;
}
.contactInfo__item .icon {
    color: var(--white);
}
.contactInfo__item .text a {
    color: var(--white);
}
.contactInfo__item .text a:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 1299px) {
    .freeTrial br {
        display: none;
    }
}
@media only screen and (max-width: 1199px) {
    .contactInfo__item {
        font-size: 20px;
    }
}
@media only screen and (max-width: 991px) {
    .contactBio {
        margin-top: 50px;
        height: auto;
    }
    .contactInfo__item {
        font-size: 18px;
    }
}
@media only screen and (max-width: 767px) {
    .contactInfo__item {
        font-size: 16px;
    }
}

/*Free trial banner*/
.freeTrial_banner img {
    width: 100%;
    display: block;
} 

/*Subscription Include*/
.subscription_box {
    height: 100%;
    border: 1px solid var(--lightGreyTint2);
    border-radius: 20px;
    box-shadow: 0 4px 50px 0 var(--lightGreyTint2);
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.subscription_box:hover {
    box-shadow: 0 2px 10px 0 var(--lightGreyTint2);
}
.subscription_img img {
    width: 100%;
    display: block;
    transition: all 0.3s ease-in-out;
}
.subscription_title {
    padding: 20px;
}
.subscription_title h4 {
    font-weight: 500;
}
@media only screen and (max-width: 1199px) {
    .subscription_title h4 {
        font-size: 20px;
    }
}

/*Pricing*/
.classesPlans {
    position: relative;
    display: flex;
    flex-direction: column;
    background-clip: padding-box;
    height: 100%;
    margin-inline: auto;
    border: 2px solid transparent;
    border-radius: 15px;
}
.classesPlansChildren {
    max-width: 400px;    
}
.classesPlans.green {
    background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(to right, #6FC37E, #7CD0E3) border-box;
}
.classesPlans.blue {
    background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(to right, #61CCF4, #9F6CED) border-box;
}
.classesPlans.pink {
    background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(to right, #F50B9A, #FF839D) border-box;
}

.school-plans-color .classesPlans.green {
    background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(to right, #C98543, #CE8946) border-box;
}
.school-plans-color .classesPlans.blue {
    background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(to right, #B3B3B3, #9D9D9D) border-box;
}
.school-plans-color .classesPlans.pink {
    background: linear-gradient(var(--white), var(--white)) padding-box, linear-gradient(to right, #DFC537, #E0C325) border-box;
}

.ribbonBanner {
    width: 114%;
    position: relative;
    left: -7%;
    bottom: 6px;
}
img.ribbonImg {
    max-width: inherit;
    width: 100%;
}
.classesPlansHead {
    position: relative;
    top: -1px;
    left: -1px;
    width: 101%;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-bottom: 20px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    /* min-height: 250px; */
    /* clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); */   
}
.classesPlansHead * {
    color: var(--white);
}
.classesPlansHead__title {
    background-color: rgba(255,255,255,0.1);
    font-size: 36px;
    font-weight: 400;
    text-transform: uppercase;
    padding-block: 12px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}
.classesPlansHead h4 {
    font-size: 24px;
    font-weight: 500;
    margin: 15px 0 0;
}
.classesPlansHead h2 {
    font-size: 55px;
    padding-block: 20px;
    margin: auto 0;
}
.classesPlansHead.largeText h2 {
    font-size: 85px;
}

.classesPlansBody {
    padding: 25px;
}
.plandetail {
  margin-bottom: 15px;
}
.plandetail ul li {
  font-size: 18px;
  line-height: 24px;
  margin-bottom: 5px;
}
.classesPlansBody h5,
.classesPlansFooter h5 {
    font-size: 25px;
    font-weight: 400;
    text-align: center;
}
.classesPlansBody h5 > * {
    display: inline-block;
    vertical-align: middle;
}
.classesPlansBody h5 img {
    max-height: 28px;
    margin-right: 5px;
}

.classesPlansBody table th,
.classesPlansBody table td {
    font-size: 25px;
    font-weight: 400;
    border: 0;
    padding-inline: 0;
}
.classesPlansBody table td {
    text-align: right;
}

.classesPlansFooter {
    text-align: center;
    padding: 25px;
    margin-top: auto;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    position: relative;
}
.classesPlansChildren .classesPlansFooter {
    margin-top: 0;
}
.classesPlansFooter__info {
    position: relative;
}
.classesPlansFooter .commonButton {
    width: 100%;
}
.classesPlansFooter h5 {
    margin-top: 28px;
    text-decoration: underline;
}

.textButton {
    font-size: 18px;
    display: inline-block;
    color: var(--darkGrey);
    margin-top: 6px;
    cursor: pointer;
}
.textButton:hover {
    color: var(--blue);
}
.planInfoText {
    text-align: center;
    margin-top: 25px;
}
.planInfoText p {
    font-weight: 500;
}
@media only screen and (max-width: 1599px) {
    .classesPlansHead h2 {
        font-size: 55px;
    }
}
@media only screen and (max-width: 1199px) {
    .planInfoText br {
        display: none;
    }
    .classesPlansHead {
        min-height: 200px;
        padding-bottom: 20px;
    }
    .classesPlansHead__title {
        font-size: 25px;
        padding-block: 10px;
    }
    .classesPlansHead h4 {
        font-size: 20px;
    }
    .classesPlansHead h2 {
        font-size: 40px;
        padding-block: 15px;
    }
    .classesPlansHead.largeText h2 {
        font-size: 62px;
    }
    .classesPlansBody {
        padding: 20px;
    }
    .classesPlansBody h5,
    .classesPlansFooter h5 {
        font-size: 22px;
    }
    .classesPlansBody h5 img {
        max-height: 25px;
    }
    .classesPlansBody table th,
    .classesPlansBody table td {
        font-size: 18px;
    }
    .classesPlansFooter {
        padding: 20px;
    }
    .textButton {
        font-size: 16px;
    }
}


/* Home users form */
.text-center {
    text-align: center;
}
.userForm_wrap {
    max-width: 1170px;
    margin: 0 auto;
}
.userForm {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 7px 0 #61CCF440 ;
}
.userHead {
    position: relative;
}
.userHead .headingText * {
    margin-bottom: inherit;
}
.backButton  {
    width: 50px;
    position: absolute;
    left: 0;
    top: 0;
}
.backButton img {
    width: 100%;
}
.userForm_title {
    background-color: #E0F7FF;
    padding: 20px 15px;
}
.userForm_title p {
    font-weight: 500;
    line-height: normal;
}
.userForm .userForm_body {
    padding: 30px;
}

/*Quantity Selector*/
.quantity {
    text-align: center;
    margin-bottom: 40px;
}
.quantity p {
    font-weight: 500;
}
.quantity-container {
    display: inline-flex;
    width: 300px;
    height: 50px;
    align-items: center;
    gap: 0;
    border: 1px solid var(--blue);
    border-radius: 50px;
    overflow: hidden;
}
.quantity-container > * {
    width: 100%;
    height: 100%;
    font-size: 22px;
}
.quantity-input {
    text-align: center;
    border: 0;
}
.quantity-btn {
    background-color: var(--blue);
    color: var(--white);
    cursor: pointer;
    touch-action: manipulation;
}
#school-pricing
{
    scroll-margin-top: 150px;
}

@media screen and (max-width: 991px) {
    .quantity-container {
        width: 230px;
        height: 45px;
    }
    .quantity-container > * {
        font-size: 18px;
    }
   
}
@media screen and (max-width: 767px) {
    .quantity-container {
        width: 200px;
        height: 40px;
    }
    .quantity-container > * {
        font-size: 16px;
    }
}


/*Faq*/
.faqSection .accordion-item {
    border: 1px solid var(--lightGreyTint3);
    border-radius: 3px;
    padding-inline: 15px;
    margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
    .faqSection .accordion-item:last-child {
        margin-bottom: 0;
    }
}
.faqSection .accordion-header {
    padding-block: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.faqSection .accordion-header i {
    color: var(--darkGrey);
    font-size: 14px;
    transition: all 0.3s ease-in-out;
    margin-left: 5px;
    margin-top: 5px;
}
.faqSection .accordion-header.active i {
    transform: rotate(90deg);
}
.faqSection .accordion-header h3 {
    color: var(--darkGrey);
    font-family: "Fredoka", sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 100%;
}
.faqSection .accordion-header h3::before {
    content: none;
}
.faqSection .accordion-content {
    padding-bottom: 20px;
}
.faqSection .accordion-content p,
.faqSection .accordion-content li{
    font-size: 16px;
    line-height: 26px;
}


@media screen and (max-width: 767px) {
    .backButton {
        width: 35px;
    }
    .faqSection .accordion-item {
        margin-bottom: 15px;
    }

}
@media screen and (max-width: 575px) {
    .backButton {
        width: 30px;
    }
    .userForm_title {
        padding: 15px 10px;
    }
}

.pricingPlans form {
	height: 100%;
}
.error {
    color: red;
    font-size: 0.875em;
}
.contactUs .form-button .commonButton {
    text-align: left;
}
.contactUs .form-button::after {
    content: '';
    background: url('data:image/svg+xml,<svg width="29" height="26" viewBox="0 0 29 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.0769 12.0908L2.0775 0.0911373C1.66351 -0.096858 1.16952 0.0151393 0.881525 0.371131C0.740603 0.543566 0.66164 0.758315 0.657288 0.980967C0.652937 1.20362 0.723448 1.42129 0.857526 1.5991L9.40732 12.9988L0.857526 24.3985C0.581532 24.7645 0.591532 25.2725 0.879525 25.6265C1.07352 25.8685 1.36351 25.9985 1.65751 25.9985C1.7995 25.9985 1.9415 25.9685 2.0755 25.9065L28.0749 13.9068C28.4309 13.7428 28.6568 13.3888 28.6568 12.9988C28.6568 12.6088 28.4308 12.2548 28.0769 12.0908Z" fill="white"/></svg>');
    background-repeat: no-repeat;
    background-size: 24px 22px;
    position: absolute;
    top: 50%;
    right: 55px;
    transform: translateY(-50%);
    width: 24px;
    height: 22px;
    z-index: 2;
}
 @media screen and (max-width: 575px) {
    .contactUs .form-button::after {
        background-size: 20px 18px;
        width: 20px;    
        height: 18px;
        right: 50px;
    }
    
 }
 .form-loader {
    display: inline-block;
    background-color: #23282d;
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0 24px;
}
 .form-loader::after {
    content: '';
    position: absolute;
    background-color: #fbfbfc;
    top: 4px;
    left: 4px;
    width: 6px;
    height: 6px;
    border: none;
    border-radius: 100%;
    transform-origin: 8px 8px;
    animation-name: spin;
    animation-duration: 1000ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.form-loader,
.wpcf7-spinner {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20%;
    z-index: 3;
}
.form-loader {
    left: 20px;
}
span#success_msg {
    color: green;
  
}

/** login page**/
.login-card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 7px 0 #61CCF440;
    padding: 20px;
}

.login-card .form-button {
    text-align: center;
}
.login-card .form-button .commonButton  {
    width: auto;
}
.login-card .textLink {
    color: var(--darkGrey);
}
.login-card .textLink:hover {
    color: var(--skyblue);
}
.hide {
    display: none;
}

.mini-loader {
    width: 25px;
    height: 25px;
    border: 3px solid #ffffff;
    border-top: 3px solid #00aa5500;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
    right: 41px;
    position: absolute;
    z-index: 9;
    top: 38px;
}

  .cancelButton .mini-loader {
    display: none;
    position: absolute;
    width: 15px;
    height: 15px;
    right: 0;
}

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

 @media screen and (max-width: 1199px) {
   .mini-loader {
    right: 35px;
    top: 26px;
}
    
 }

.policyTerms.content.commonPT,
.faqSection.commonPT {
    padding-bottom: 85px;
}


@media only screen and (max-width: 767px) {
    .policyTerms.content.commonPT,
    .faqSection.commonPT {
        padding-bottom: 40px;
    }
}

@media only screen and (max-width: 1199px) {
    .policyTerms.content.commonPT,
    .faqSection.commonPT {
        padding-bottom: 55px;
    }
}

/* // jun 18 */

.no-hover:hover
{
    color: #323143;
}

@media only screen and (max-width: 1399px) {
    .classesPlansFooter .mini-loader {
        width: 18px;
        height: 18px;
    }
}
@media only screen and (max-width: 1199px) {
    .classesPlansFooter .mini-loader {
        width: 15px;
        height: 15px;
        top: 32px;
    }
}

.classwarningnote {
  margin-top: 10px;
  font-style: italic;
}

.form-button.center p#successmessageft {
  margin-top: 5px;
  text-align: center;
  color: #3f9b25;
}

.form-button.center p#errormessageft {
  margin-top: 5px;
  text-align: center;
  color: #ff0000;
}


/* New style */
.accordionImageBlock img,
.tab_imageBlock img {
    height: auto;
}

/*For School*/
.contentBlockInner+.contentBlockInner {
    margin-top: 5rem;
}

.contentBlockImage img {
    margin: auto;
    display: block;
}

.contentBlockInner .row {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.row-reverse {
    flex-direction: row-reverse;
}

.learnersBlock .accordion-item {
    border: none;
    margin-bottom: 10px;
}

.learnersBlock .accordion-item .accordion-content {
    display: none;
}

.learnersBlock .accordion-item .learnersBlock_button {
    padding-block: 20px;
    display: block;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.learnersBlock .accordion-item .learnersBlock_button h3 {
    transition: all 0.3s ease-in-out;
}

.learnersBlock .accordion-item .learnersBlock_button.active h3 {
    color: var(--purple);
}

.learnersBlock_image {
    margin-bottom: 20px;
}

.learnersBlock_image img {
    max-width: 550px;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .contentBlockInner .row {
        --bs-gutter-x: 5rem;
    }
}

@media only screen and (max-width: 1299px) {
    .learnersBlock_image img {
        max-width: 450px;
    }
}

@media only screen and (max-width: 767px) {
    .contentBlockInner+.contentBlockInner {
        margin-top: 4rem;
    }

    .contentBlockImage {
        text-align: center;
    }

    .contentBlockImage img {
        max-width: 400px;
        width: 100%;
    }

    .contentBlockContent {
        text-align: center;
        margin-top: 30px;
    }

    .contentBlockContent .buttonOuter {
        justify-content: center;
    }

    .learnersBlock .accordion-item .accordion-content {
        display: block !important;
        margin-bottom: 0;
    }

    .learnersBlock .accordion-item .learnersBlock_button,
    .learnersBlock .accordionImageBlock {
        display: none !important;
    }

    .learnersBlock .accordion-item {
        border: none !important;
    }

    .learnersBlock .accordion-item .accordion-content h2 {
        font-size: 30px;
    }

    .learnersBlock .accordion-item .accordion-content h3 {
        font-size: 20px;
    }

    .learnersBlock .accordionContentBlock {
        padding-block: 0;
    }

    .learnersBlock.commonPY {
        padding-bottom: 0;
    }
}

/* For Home */
.banner_for_home {
    background-size: 55%;
    background-position: right top;
}

.learnMeasureBlock {
    background-color: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 5px 5px 18px -2px rgba(0, 0, 0, 0.24);
}

.learnMeasureImage {
    padding-right: 50px;
}

.learningStepsBlockInner {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 150px;
}

.learningStepsBlockItem {
    margin: auto;
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.client_image {
    margin: 0 auto 10px;
    width: 100%;
    max-width: 60px;
    display: block;
}


@media only screen and (max-width: 767px) {
    .banner_for_home {
        background-size: 102%;
        height: auto;
        min-height: 100vw;
    }

    .banner.banner_for_home .bannerInner {
        padding-top: 70vw;
    }

    .banner.banner_for_home h1,
    .banner.banner_for_home p {
        color: inherit;
    }

    .banner.banner_for_home:before {
        display: none;
    }

    .learnMeasureBlock {
        padding: 20px;
    }

    .learningStepsBlockInner {
        padding: 0 15px 60px;
    }

    .contentBlockContent h2 {
        font-size: 30px;
    }
}


/** 28 Aug 2025 **/

.classesPlansHead h2 sup.star  {
    font-size: 45px;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;  
}
.classesPlansBody p {
    text-align: left;
    font-size: 15px;
    display: flex;
    align-items: center;
    padding-left: 28px;
    position: relative;
    margin-top: 10px;
}
.classesPlansBody p span.star {
    font-size: 45px;
    font-family: "Fredoka", sans-serif;
    font-weight: 500;
    margin-right: 6px;
    position: absolute;
    left: 0;
    top: 5px;
}

.school-plan-loader{
    top: calc(50% - 14px);
}

.modal_pop {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    max-width: 650px;
    width: 100%;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    animation: fadeIn 0.3s ease-in-out;
    position: relative;
    margin: 0 15px;
}

.close_modal {
    position: absolute;
    font-size: 40px;
    font-weight: normal;
    cursor: pointer;
    right: 20px;
    top: -4px;
}

.modal_pop.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.modal_pop button{
    width: 100%;
}
@media(max-width:750px) {
    .modal-content {
        max-width: 100%;
    }
}
.plan-color .quantity-btn 
{
    background-color: #E0C325;
}
.plan-color 
{
border: 1px solid #e3c33c;
}