body {
  font-family: 'Poppins';
}

.flex-container,
.fc {
  display: flex;
}

.f-vertical,
.fv,
.fdv {
  flex-direction: column;
}

.f-row,
.fr,
.fdr {
  flex-direction: row;
}

.j-space-around,
.jsa {
  justify-content: space-around;
}

.j-space-between,
.jsb {
  justify-content: space-between;
}

.j-space-evenly,
.jse {
  justify-content: space-evenly;
}

.j-center,
.jc {
  justify-content: center;
}

.j-flex-start,
.jfs {
  justify-content: flex-start;
}

.j-flex-end,
.jfe {
  justify-content: flex-end;
}

.a-space-around,
.asa {
  align-items: space-around;
}

.a-space-between,
.asb {
  align-items: space-between;
}

.a-space-evenly,
.ase {
  align-items: space-evenly;
}

.a-flex-start,
.afs {
  align-items: flex-start;
}

.a-flex-end,
.afe {
  align-items: flex-end;
}

.a-center,
.ac,
.aic {
  align-items: center;
}


.toggleKnobOn {
  transform: translateX(100%);
}

.loaderDiv {
  width: 100%;
  height: calc(0.99*var(--screen-y));
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  opacity: 0.85;
}

.loader {
  width: 120px;
  height: 120px;
  margin: -76px 0 0 -76px;
  border-radius: 50%;
  border-top: 16px solid #3aa9e8;
  border-right: 16px solid #FFB038;
  border-bottom: 16px solid #e05d5d;
  border-left: 16px solid rgba(128, 128, 128, 0.8);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

.loaderDiv h5 {
  width: 100%;
  padding-right: 5%;
}

Link {
  text-decoration: dotted;
}

.reportsPageDiv {
  margin-top: 60px;
  width: 100%;
  min-height: calc(100vh - 60px);
  padding-bottom: 150px;
}

.reportsPageMiddle {
  width: 100%;
}

.reportsProfileCard {
  color: #3AA9E8;
  border: 1px solid #A8D6F0;
  width: 250px;
  height: 230px;
  border-radius: 7px;
  padding: 10px 10px 30px 10px;
  font-size: 16px;
}

.reportsProfileCardHeader {
  width: 100%;
}

.reportsProfileCardInfo {
  width: 100%;
}

.reportsProfileCardIcon {
  color: #fff;
  border: 1px solid #3AA9E8;
  background-color: #3AA9E8;
  border-radius: 50%;
  font-variation-settings:
    'FILL' 1,
    'wght' 700,
    'GRAD' 0,
    'opsz' 24
}

.reportsProfileCardInfoLabel {
  font-weight: bold;
}

.reportsSummaryHeaderText1 {
  font-size: 50px;
  font-weight: bold;
  color: #3AA9E8;
  width: 300px;
}

.reportsSummaryHeaderText2 {
  color: #DB5858;
}

.reportsSummaryBoxes {
  width: 200px;
  height: 170px;
  border: 1px solid #E6E6E6;
  border-radius: 7px;
  padding: 10px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}

.reportsSummaryBoxes1 {
  background-color: #DB5858;
}

.reportsSummaryBoxes2 {
  background-color: #3AAD76;
  margin: 0px 10px;
}

.reportsSummaryBoxes3 {
  background-color: #CCC653;
}

.reportsSummaryBoxesIcon {
  font-size: 50px;
  font-variation-settings:
    'FILL' 1,
    'wght' 100,
    'GRAD' -25,
    'opsz' 20
}

.reportsSummaryBoxesText1 {
  width: 100%;
  text-align: center;
}

.reportsSummaryBoxesText3 {
  opacity: 0.6;
  margin-top: 10px;
}

.reportsCarouselDiv {
  width: 100%;
  margin-top: 100px;
}

.carouselDiv {
  width: 150px;
  height: 150px;
}

.mySlides {
  display: none;
}

.carouselButton {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  color: #fff;
  background-color: #3AA9E8;
}

.otherSubjectDropDown {
  height: 35px;
  width: 150px;
  border-radius: 5px;
  margin-left: 15px;
  border: 1px solid lightgray;
}

.otherSubjectDropDown:focus {
  outline: none;
  border: 1px solid #3AA9E8;
}



.kidsGradeLevelDiv {
  width: 350px;
  margin: 50px auto;
}

.kidsGradeLevelDiv label {
  font-size: 16px;
  font-weight: 400;
}

.kidsgradeLevelSelect
{
  width: 200px;
  height: 50px;
  font-size: 25px;
  border-color: lightgray;
  border-radius: 5px;
}

.kidsCurriculumCountryDropDown,
.kidsCurriculumProvinceOrStateDropDown
{
  width: 200px;
  height: 50px;
  font-size: 20px;
  border-color: lightgray;
  border-radius: 5px;
  margin: 10px auto;
  outline: none;
}

.ontario_grades_1_6_math_topics_div,
.nevada_grades_1_6_math_topics_div
{
  width: 100%;
  padding: 0;
}

.kids_strand_div, .kids_strand_div1 {
  width: 60%;
  padding: 50px;
  margin: 20px auto;
}

.kids_strand_subtrandDiv {
  width: 100%;
  align-items: flex-start;
}

.kids_strand_subtrandDiv1 {
  width: 100%;
}

.kids_strand_subtrand_h5 {
  width: 100%;
  padding: 5px 20px;
  margin-top: 50px;
  cursor: pointer;
}

.kids_strand_subtrand_h5_2 {
  width: 100%;
  padding: 5px 20px;
  margin-top: 50px;
  cursor: pointer;
  font-weight: 600;
}

.kids_strand_subtrand_h5:hover,
.kids_strand_subtrand_h5_2:hover
{
  background-color: burlywood;
  opacity: 0.75;
}


.kids_strand_subtrand_p_div_p1 {
  font-weight: 600;
  margin-left: 50px;
  width: 80%;
}

.kids_strand_substrand_p_div_p2 {
  margin-left: 100px;
  width: 80%;
}

.kids_strand_subtrand_p_div {
  width: 100%;
  cursor: pointer;
}

.kids_strand_subtrand_p_div:hover {
  background-color: #f0f0f0;
  text-decoration: underline;
}

.kids_strand_subtrandDiv1_separator {
  width: 90%;
  height: 5px;
  background-color: #3AAD76;
  margin: 20px auto;
  border-radius: 10px;
  opacity: 0.5;
}

@media screen and (orientation: landscape) {
  .reportsSummary {
    width: 50%;
    padding: 50px;
    margin-left: 200px;
  }
}

@media screen and (orientation: portrait) {
  
  .reportsPageMiddle {
    width: 100%;
    flex-direction: column;
  }
  .reportsSummary {
    width: 100%;
    padding: 5px;
  }
  
  .reportsSummaryHeader {
    justify-content: center;
  }
}

@media screen and (max-width: 319.99px) {
  .reportsPageDiv {
    padding-bottom: 50px;
  }

  .reportsSummaryHeaderText1 {
    font-size: 30px;
    font-weight: bold;
    color: #3AA9E8;
    width: 300px;
    text-align: center;
  }

  .reportsSummaryBoxesDiv {
    flex-direction: column;
  }

  .reportsSummaryBoxes2 {
    margin: 10px auto;
  }

  .carouselDiv {
    width: 100px;
    height: 100px;
  }
}

@media screen and (min-width: 320px) and (max-width: 767px) {
  .reportsPageDiv {
    padding-bottom: 50px;
  }

  .reportsSummaryHeaderText1 {
    font-size: 30px;
    font-weight: bold;
    color: #3AA9E8;
    width: 300px;
    text-align: center;
  }

  .reportsSummaryBoxesDiv {
    flex-direction: column;
  }

  .reportsSummaryBoxes2 {
    margin: 10px auto;
  }
  
}/***default or shared ***/


@media screen and (orientation: landscape) {
  .defaultHeroImagePortrait {
    display: none;
  }

  .defaultHeroImagePortraitBottom {
    display: none;
  }

  .loginDiv,
  .registrationDiv {
    width: 100%;
    margin-top: 20vh;
  }

  .loginTelescopeDiv {
    width: 100%;
  }

  .loginTelescope {
    opacity: 0.9;
  }

  .registrationSelect {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    outline: none;
    border: none;
    background-color: #3aa9e826;
  }

  .loginHeading span {
    color: #3aa9e8;
  }

  .googleLoginDiv {
    width: 250px;
    margin: 10px auto;
    justify-content: space-around;
    align-items: center;
  }

  .googleSignInDiv {
    width: 150px;
    height: 44px;
    background-color: #b5c5cd;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* margin-top: 2rem; */
    padding: 10px;
    cursor: pointer;
  }

  .googleSignInDiv:hover {
    background-color: #122e3b;
  }

  .loginMiddleDiv {
    width: 100%;
  }

  .loginCard {
    width: 600px;
    height: 450px;
    border-radius: 20px;
    background: #ffffff;
    border: 0.3px solid #b5c5cd;
  }

  .registrationCard {
    width: 600px;
    min-height: 450px;
    padding: 10px 0px;
    border-radius: 20px;
    background: #ffffff;
    border: 0.3px solid #b5c5cd;
    margin-bottom: 20px;
  }

  .emailLabel,
  .passwordLabel {
    width: 250px;
    font-size: 12px;
  }

  .loginCardInputDiv input,
  .registrationDiv input {
    background-color: #b5c5cd;
    width: 250px;
    height: 40px;
    margin-bottom: 10px;
    border: none;
    padding-left: 10px;
    margin-bottom: 20px;
  }

  .loginCardButton,
  .registrationButton {
    background-color: #122e3b;
    width: 175px;
    height: 40px;
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
    margin-top: 20px;
    font-size: 12px;
  }

  .orLoginRegisterDiv {
    margin: 20px auto;
  }

  .orLoginButton {
    width: 150px;
    height: 40px;
    background-color: #ffb038;
    color: #fff;
    font-weight: 500;
    margin-top: 20px;
    border-radius: 5px;
  }

  /**** Dashboard ****/
  .dashboardMainDiv {
    margin-top: 150px;
    width: 100%;
    min-height: calc(100vh - 60px);
  }

  .dashboardTopDiv {
    width: 90%;
    padding-right: 5px;
  }

  .dashboardTopDiv span {
    font-size: 1rem;
    color: #122e3b;
    font-weight: 400;
    cursor: pointer;
  }

  .dashboardMainContentDiv {
    min-height: 700px;
    width: 100%;
    flex-direction: row;
  }

  .dashboardSideOrTopDiv {
    width: 300px;
    height: inherit;
    background-color: #b5c5cd;
    justify-content: center;
  }

  .dashboardSideHeaderDiv {
    width: 80%;
    color: #122e3b;
    font-size: 16px;
    margin-bottom: 25px;
    box-shadow: 0px 4px 4px 0px #00000040;
    background-color: #fff;
    padding: 10px;
  }

  .dashboardSideContentDiv {
    color: #434343;
    width: 60%;
    padding: 10px;
  }

  .dashboardSideContentDiv div {
    margin-bottom: 10px;
    width: 100%;
    cursor: pointer;
  }

  .dashboardSideContentDiv div span {
    font-size: 16px;
    font-weight: 500;
  }

  .dashboardSideContentDiv div:hover {
    background-color: #fff;
  }

  .dashboardContentDiv {
    width: 80%;
  }

  .dashboardContentProfileDiv {
    width: 100%;
  }

  .dashboardContentProfileDiv div {
    width: 300px;
    color: #434343;
    font-size: 16px;
    margin-bottom: 20px;
  }

  .dashboardContentRosterDiv {
    width: 50%;
    border: #b5c5cd 1px solid;
  }

  .childrenRosterHeader {
    width: 100%;
    background-color: #b5c5cd;
    color: #fff;
  }

  .childrenRosterHeader div,
  .childrenRosterContent div {
    flex: 1;
    justify-content: center;
    padding: 10px;
  }

  .childrenRosterContent {
    width: 100%;
    border-top: #b5c5cd 1px solid;
  }

  .childrenRosterContent div:hover {
    background-color: #3aa9e8;
    color: #fff;
    cursor: pointer;
  }

  .editButton,
  .editProfileButton {
    background-color: #122e3b;
    color: #fff;
  }

  /*** End of Dashboard ***/

  /*** Mobile Dropdown ***/

  .mobileDropDown {
    width: 100%;
    background-color: #122e3b;
    color: #fff;
    position: fixed;
    top: 60px;
    z-index: 10;
  }

  .mobileDropDown div {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-bottom: 0.1px solid #fff;
  }

  .mobileDropDown div > span {
    margin-right: 10px;
  }

  /*** End Mobile Dropdown ***/

  .privacyPolicyDiv,
  .termsOfServiceDiv {
    width: 100%;
    min-height: calc(100vh - 50px);
    margin-top: 50px;
    background-color: #122e3b;
    color: #fff;
    padding: 50px 100px;
  }

  @media screen and (min-width: 320px) and (max-width: 767px) {
    /* CSS styles for mobile landscape go here */
    .topNav {
      height: 60px;
      width: 100%;
      background: #122e3b;
      position: absolute;
      top: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 10;
    }

    .logoDiv {
      width: 33%;
      height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 1rem;
    }

    .logo {
      display: flex;
      flex-direction: row;
      font-size: 1rem;
    }

    .logo:hover {
      opacity: 0.7;
      cursor: pointer;
    }

    .logoI {
      display: flex;
      flex-direction: column;
      width: 0.2rem;
      height: 1.5rem;
      position: relative;
      top: 0;
    }

    .logoITop {
      width: 0.2rem;
      height: 20%;
      background-color: #5e5656;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      position: relative;
      top: 1px;
    }

    .logoIMiddle {
      width: inherit;
      height: 60%;
      border-radius: 2px;
      background-color: #fffa83;
      z-index: 1;
    }

    .logoIBottom {
      display: inline;
      width: inherit;
      height: 20%;
      margin-top: 0;
      background-color: #e05d5d;
      clip-path: ellipse(45% 45% at 50% 50%);
      position: relative;
      top: -2.5px;
    }

    .logoLearn {
      color: #fff;
    }

    .logoS {
      color: #ffb038;
      font-weight: 900;
    }

    .logoT {
      color: #fffa83;
      font-weight: 900;
    }

    .logoE {
      color: #c7282d;
      font-weight: 900;
    }

    .logoM {
      color: #9c06c1;
      font-weight: 900;
    }

    .navToggleDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 33%;
      height: 60px;
      min-height: 45px;
      color: #fff;
    }

    .navToggleInnerDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 25vw;
      height: 59px;
      color: #fff;
    }

    .navToggleDiv span {
      font-size: 0.6rem;
    }

    .toggleSwitch {
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 25px;
      width: 48px;
      height: 25px;
      border: 1px solid #938b8b;
      background-color: #fff;
    }

    .toggleKnob {
      width: 23px;
      height: 23px;
      background-color: #b5c5cd;
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 50%;
      position: relative;
      left: 0px;
      transition: 1s;
    }

    .toggleKnob:hover {
      cursor: pointer;
    }

    .chosenApp {
      font-weight: 600;
      text-decoration: underline;
      transition: 1.3s;
    }

    .notChosenApp {
      font-weight: 600;
      opacity: 0.5;
    }

    .navLoginSignUpDiv {
      width: 33%;
      height: 45px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 1rem;
      font-size: 0.85rem;
    }

    .navSignUpButton {
      width: 85px;
      height: 30px;
      background: #fff;
      color: #477f90;
      margin-left: 1rem;
      border-radius: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.7rem;
    }

    .navLoginButton {
      width: 85px;
      height: 30px;
      border: 1px solid #fff;
      border-radius: 3px;
      background: inherit;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.7rem;
    }

    .topBarProfileDiv {
      color: #fff;
      width: 150px;
      font-size: 0.8rem;
      font-weight: 200;
      position: relative;
      display: inline-block;
    }

    .topBarProfileDivInner {
      border: 0.3px solid #ffffff;
      border-radius: 5px 5px 0 0;
      padding: 0 0.3rem;
    }

    .topBarProfileDivInner:hover {
      cursor: pointer;
    }

    .topBarProfileDivContent {
      position: absolute;
      background-color: #3aa9e8;
      border-left: 0.3px solid #ffffff;
      border-right: 0.3px solid #ffffff;
      border-bottom: 0.3px solid #ffffff;
      border-radius: 0px 0px 5px 5px;
      min-width: 150px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 0;
      z-index: 1;
    }

    .topBarProfileDivContent button {
      font-size: 0.8rem;
      width: 100%;
      background: none;
      border: none;
      margin-top: 0.2rem;
      color: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0.3px solid rgba(255, 255, 255, 0.2);
    }

    .topBarProfileDivContent button:hover {
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
    }

    .topBarProfileDivContentButtonDiv {
      width: 120px;
    }

    .topBarProfileDivContent i {
      font-size: 0.6rem;
      margin-left: 0.1rem;
    }

    .dropDownBarsDiv {
      width: 33%;
      height: 50%;
      display: flex;
      justify-content: flex-end;
      padding: 0.5px;
      padding-right: 1rem;
      visibility: visible;
    }

    .dropDownBarsArea {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-end;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropDownBars {
      width: 15px;
      height: 1px;
      background-color: #fff;
    }

    .defaultHomeTop {
      width: 100%;
      background-color: #122e3b;
      margin-top: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 50;
      margin-bottom: 0;
    }

    /** same as .defaultHomeTop, but top layer ***/
    .defaultHomeTop1 {
      width: 100%;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      padding: 1rem 0 3rem 0;
    }

    /** Practice and learn div**/
    .practiceAndLearnDiv {
      width: auto;
      margin-top: 0;
    }

    .homePageHeaderPractice {
      font-size: 1.25rem;
      color: #3aa9e8;
      font-weight: 600;
      margin-right: 1rem;
    }

    .homePageHeaderAnd {
      font-size: 1.25rem;
      color: #3aa9e8;
    }

    .homePageHeaderLearn {
      font-size: 1.25rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .homePageHeaderSTEM {
      font-size: 1.25rem;
      color: #ffb038;
      font-weight: 600;
      margin: 0 1rem;
    }

    .homePageHeaderAnywhere {
      font-size: 1.25rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .homePageTopP {
      width: 55%;
      text-align: center;
      color: rgba(58, 169, 232, 0.8);
      font-size: 0.8rem;
    }

    .defaultHomeGetStartedButton {
      color: #fff;
      background-color: #e05d5d;
      border-color: #e05d5d;
      width: 10rem;
      height: 2.5rem;
      border-radius: 5px;
      margin-right: 1rem;
      z-index: 100;
    }

    .defaultHomePreviewButton {
      color: #fff;
      background-color: #ffb038;
      width: 10rem;
      height: 2.5rem;
      border-radius: 5px;
      margin-left: 1rem;
      z-index: 100;
    }

    .spiralPlane {
      height: 110px;
      position: absolute;
      top: 120px;
      left: 30px;
      z-index: 2;
      opacity: 1;
    }

    .defaultHomePageImageCard {
      width: 90%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      top: -10px;
      z-index: 5;
    }

    .defaultHomePageImageCardBottom {
      display: none;
    }

    .defaultSubjectCardsMainDiv {
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      background-color: #b5c5cd;
      padding: 2rem 0;
    }

    .defaultHomePageImageCard {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      top: -5vh;
      z-index: 5;
    }

    .defaultHeroImageLandscape {
      width: 60%;
    }

    /*** Subjects Cards ***/

    .defaultSubjectCardsMainDiv {
      padding: 40px 10px;
      background: linear-gradient(to bottom, #f9fafb, #ffffff);
    }

    .defaultSubjectCardsDiv {
      flex-direction: column;
      min-width: 100%;
    }

    .subjectCardsHeader {
      text-align: center;
      margin-bottom: 60px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .subjectCardsTitle {
      font-size: 2.5rem;
      font-weight: 700;
      color: #111827;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .subjectCardsSubtitle {
      font-size: 1.125rem;
      color: #6b7280;
      line-height: 1.75;
    }

    .subjectCard {
      background: white;
      border-radius: 16px;
      padding: 40px 32px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      width: 50%;
      min-width: 300px;
      margin: 20px auto;
    }

    .subjectCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--card-color);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .subjectCard:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.08);
    }

    .subjectCard:hover::before {
      transform: scaleX(1);
    }

    .subjectCardIconWrapper {
      width: 64px;
      height: 64px;
      background: linear-gradient(
        135deg,
        var(--card-color) 20,
        var(--card-color) 10
      );
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }

    .subjectIcon {
      width: 32px;
      height: 32px;
      color: var(--card-color);
    }

    .subjectCardsHeading {
      font-size: 1.5rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 16px;
    }

    .subjectCardDescription {
      font-size: 0.975rem;
      line-height: 1.6;
      color: #4b5563;
      margin-bottom: 24px;
      flex-grow: 1;
    }

    .subjectCardTopics {
      margin-bottom: 32px;
    }

    .topicsTitle {
      font-size: 0.875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #6b7280;
      margin-bottom: 12px;
    }

    .topicsList {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .topicItem {
      display: flex;
      align-items: center;
      font-size: 0.875rem;
      color: #374151;
      margin-bottom: 8px;
    }

    .topicBullet {
      color: var(--card-color);
      margin-right: 8px;
      font-weight: 700;
    }

    .subjectCardFooter {
      margin-top: auto;
    }

    .exploreButton {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: var(--card-color);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 0.975rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .exploreButton:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .exploreIcon {
      transition: transform 0.2s ease;
    }

    .exploreButton:hover .exploreIcon {
      transform: translateX(4px);
    }

    /** End of Subjects Cards ***/

    /*** Notes and Practice Home Page ***/
    .notesAndPracticeHomeInfoDiv {
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100px 20px;
      background: #f8fafc;
      position: relative;
      overflow: hidden;
    }

    .sectionHeaderStyle {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .sectionTitleStyle {
      font-size: 3rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    .sectionSubtitleStyle {
      font-size: 1.25rem;
      color: #64748b;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .featuresGridStyle {
      width: 100%;
      flex-direction: column;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .getFeatureCardStyle {
      background-color: #fff;
      width: 60%;
      border-radius: 24px;
      padding: 48px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      margin: 20px auto;
    }

    .cardHeaderStyle {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 24px;
    }

    .featureTitleStyle {
      font-size: 1.5rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0;
    }

    .featureDescriptionStyle {
      font-size: 1.0625rem;
      line-height: 1.7;
      color: #475569;
      margin-bottom: 32px;
    }

    .featuresListStyle {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 40px;
    }

    .featureItemStyle {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .featureItemTextStyle {
      font-size: 0.9375rem;
      color: #334155;
      font-weight: 500;
    }

    /* End of Notes and Practice Home Page ***/

    /*** Personalized Adaptive Flexible Component ***/
    .pafMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
      position: relative;
      overflow: hidden;
    }

    .pafMainContainer::before {
      content: "";
      position: absolute;
      top: -40%;
      left: -40%;
      width: 180%;
      height: 180%;
      background: radial-gradient(
        circle,
        rgba(139, 92, 246, 0.03) 0%,
        transparent 60%
      );
      animation: pafFloat 25s ease-in-out infinite;
    }

    @keyframes pafFloat {
      0%,
      100% {
        transform: translate(0, 0) rotate(0deg);
      }
      33% {
        transform: translate(30px, -30px) rotate(120deg);
      }
      66% {
        transform: translate(-20px, 20px) rotate(240deg);
      }
    }

    .pafHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pafTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #111827;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    .pafSubtitle {
      font-size: 1.25rem;
      color: #6b7280;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pafFeaturesGrid {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 1400px;
      margin: 50px auto;
      z-index: 1;
    }

    .pafFeatureCard {
      background: white;
      width: 60%;
      border-radius: 20px;
      padding: 50px 40px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      cursor: pointer;
      animation: pafSlideUp 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateX(40px);
      margin: 20px auto;
    }

    @keyframes pafSlideUp {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .pafFeatureCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--feature-gradient);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 0;
    }

    .pafFeatureCard::after {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: var(--feature-gradient);
      border-radius: 20px;
      opacity: 0;
      z-index: -1;
      transition: opacity 0.4s ease;
    }

    .pafFeatureCard:hover {
      transform: translateY(-12px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .pafFeatureCard:hover::before {
      opacity: 0.05;
    }

    .pafFeatureCard:hover::after {
      opacity: 0.3;
    }

    .pafFeatureCard:hover .pafIconWrapper {
      transform: scale(1.1) rotate(10deg);
    }

    .pafFeatureCard:hover .pafFeatureTitle {
      color: var(--feature-color);
    }

    .pafCardNumber {
      position: absolute;
      top: 30px;
      right: 30px;
      font-size: 4rem;
      font-weight: 900;
      color: var(--feature-color);
      opacity: 0.1;
      letter-spacing: -0.02em;
      z-index: 1;
    }

    .pafIconWrapper {
      width: 80px;
      height: 80px;
      background: var(--feature-gradient);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      position: relative;
      z-index: 1;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .pafFeatureIcon {
      width: 40px;
      height: 40px;
      color: white;
    }

    .pafFeatureTitle {
      font-size: 1.75rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
    }

    .pafFeatureDescription {
      font-size: 1.125rem;
      line-height: 1.8;
      color: #4b5563;
      margin-bottom: 35px;
      position: relative;
      z-index: 1;
    }

    .pafHighlights {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      z-index: 1;
    }

    .pafHighlightItem {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .pafHighlightDot {
      width: 8px;
      height: 8px;
      background: var(--feature-gradient);
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
    }

    .pafHighlightDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
    }

    .pafHighlightItem span {
      font-size: 1rem;
      color: #374151;
      font-weight: 500;
      line-height: 1.6;
    }
    /* End of Personalized Adaptive Flexible Component ***/

    /*** Pricing Cards Component ***/
    .pcMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
      position: relative;
      overflow: hidden;
    }

    .pcMainContainer::before {
      content: "";
      position: absolute;
      top: -30%;
      right: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(245, 87, 108, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite;
    }

    .pcMainContainer::after {
      content: "";
      position: absolute;
      bottom: -30%;
      left: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(79, 172, 254, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite reverse;
    }

    @keyframes pcFloat {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(50px, -50px) scale(1.1);
      }
    }

    .pcHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pcTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
      background: linear-gradient(135deg, #667eea 0%, #f5576c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .pcSubtitle {
      font-size: 1.375rem;
      color: #64748b;
      max-width: 650px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pcCardsWrapper {
      position: relative;
      z-index: 1;
    }

    .pcCardsGrid {
      display: grid;
      grid-template-columns: repeat(1, 3fr);
      gap: 40px;
      max-width: 400px;
      margin: 0 auto;
      align-items: stretch;
    }

    .pcCard {
      background: white;
      border-radius: 24px;
      padding: 48px 40px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 20px var(--shadow-color);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: pcCardSlide 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateY(40px);
    }

    @keyframes pcCardSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pcCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: var(--card-gradient);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .pcCard:hover {
      transform: translateY(-12px);
      box-shadow: 0 20px 40px var(--shadow-color);
    }

    .pcCard:hover::before {
      transform: scaleX(1);
    }

    .pcCard:hover .pcCtaButton {
      transform: scale(1.05);
    }

    .pcCardHighlighted {
      border: 2px solid transparent;
      background: linear-gradient(white, white) padding-box,
        var(--card-gradient) border-box;
      transform: scale(1.05);
    }

    .pcCardHighlighted:hover {
      transform: scale(1.08) translateY(-12px);
    }

    .pcBadge {
      position: absolute;
      top: 0px;
      right: 32px;
      background: var(--card-gradient);
      color: white;
      padding: 6px 20px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      animation: pcBadgePulse 2s ease-in-out infinite;
    }

    @keyframes pcBadgePulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }

    .pcCardHeader {
      text-align: center;
      margin-bottom: 40px;
    }

    .pcPlanName {
      font-size: 1.875rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 20px;
    }

    .pcPriceWrapper {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
      margin-bottom: 16px;
    }

    .pcPrice {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1;
    }

    .pcPeriod {
      font-size: 1.25rem;
      color: #64748b;
      font-weight: 500;
    }

    .pcDescription {
      font-size: 1rem;
      color: #64748b;
      line-height: 1.6;
    }

    .pcFeatures {
      flex-grow: 1;
      margin-bottom: 40px;
    }

    .pcFeaturesList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pcFeatureItem {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pcCheckIcon {
      width: 20px;
      height: 20px;
      color: #10b981;
      flex-shrink: 0;
    }

    .pcFeatureItem span {
      font-size: 0.975rem;
      color: #475569;
      line-height: 1.5;
    }

    .pcCardFooter {
      margin-top: auto;
    }

    .pcCtaButton {
      width: 100%;
      padding: 16px 32px;
      background: #e5e7eb;
      color: #374151;
      border: none;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .pcCtaButton::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--card-gradient);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pcCtaButton:hover {
      background: #d1d5db;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .pcCtaHighlighted {
      background: var(--card-gradient);
      color: white;
    }

    .pcCtaHighlighted:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 24px var(--shadow-color);
    }

    .pcCtaHighlighted:hover::before {
      opacity: 0.2;
    }

    .pcArrowIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .pcCtaButton:hover .pcArrowIcon {
      transform: translateX(4px);
    }

    .pcCardGlow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150%;
      height: 150%;
      background: radial-gradient(
        circle,
        var(--shadow-color) 0%,
        transparent 70%
      );
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .pcCard:hover .pcCardGlow {
      opacity: 0.3;
    }

    .pcFooter {
      text-align: center;
      margin-top: 80px;
      position: relative;
      z-index: 1;
    }

    .pcGuarantee {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 0.975rem;
      color: #64748b;
      background: white;
      padding: 16px 32px;
      border-radius: 50px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .pcShieldIcon {
      width: 24px;
      height: 24px;
      color: #10b981;
    }
    /* End of Pricing Cards Component ***/

    /*** IlearnSTEM Description Component ***/
    .isdMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
      position: relative;
      overflow: hidden;
    }

    .isdContentWrapper {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .isdTextSection {
      animation: isdSlideInLeft 0.8s ease-out;
    }

    @keyframes isdSlideInLeft {
      from {
        opacity: 0;
        transform: translateX(-40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .isdHeaderBadge {
      display: inline-block;
      margin-bottom: 24px;
    }

    .isdHeaderBadge span {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 8px 20px;
      border-radius: 30px;
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .isdTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
      margin-bottom: 24px;
      letter-spacing: -0.03em;
    }

    .isdTitleHighlight {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .isdDescription {
      font-size: 1.25rem;
      line-height: 1.8;
      color: #475569;
      margin-bottom: 40px;
    }

    .isdFeatures {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 48px;
    }

    .isdFeatureItem {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      opacity: 0;
      animation: isdFadeInUp 0.6s ease-out forwards;
      animation-delay: calc(var(--feature-index, 0) * 0.1s);
    }

    .isdFeatureItem:nth-child(1) {
      --feature-index: 0;
    }
    .isdFeatureItem:nth-child(2) {
      --feature-index: 1;
    }
    .isdFeatureItem:nth-child(3) {
      --feature-index: 2;
    }

    @keyframes isdFadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
      from {
        opacity: 0;
        transform: translateY(20px);
      }
    }

    .isdFeatureDot {
      width: 12px;
      height: 12px;
      background: var(--feature-color);
      border-radius: 50%;
      margin-top: 6px;
      flex-shrink: 0;
      position: relative;
    }

    .isdFeatureDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
      animation: isdPulse 2s ease-in-out infinite;
    }

    @keyframes isdPulse {
      0%,
      100% {
        transform: scale(1);
        opacity: 0.2;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.1;
      }
    }

    .isdFeatureContent {
      flex: 1;
    }

    .isdFeatureTitle {
      font-size: 1.125rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .isdFeatureDesc {
      font-size: 0.975rem;
      color: #64748b;
      line-height: 1.5;
    }

    .isdCta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .isdCtaButton {
      padding: 16px 32px;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .isdCtaPrimary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
    }

    .isdCtaPrimary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }

    .isdCtaSecondary {
      background: white;
      color: #475569;
      border: 2px solid #e5e7eb;
    }

    .isdCtaSecondary:hover {
      border-color: #667eea;
      color: #667eea;
      background: #f3f4f6;
    }

    .isdCtaIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
    }

    .isdCtaButton:hover .isdCtaIcon {
      transform: translateX(4px);
    }

    .isdVisualSection {
      position: relative;
      animation: isdSlideInRight 0.8s ease-out;
    }

    @keyframes isdSlideInRight {
      from {
        opacity: 0;
        transform: translateX(40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .isdGraphicContainer {
      position: relative;
      width: 100%;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdFloatingCard {
      position: absolute;
      background: white;
      border-radius: 16px;
      padding: 20px 24px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      color: #1e293b;
      animation: isdFloat 4s ease-in-out infinite;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .isdFloatingCard:hover {
      transform: scale(1.05);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .isdCard1 {
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }

    .isdCard2 {
      top: 60%;
      right: 15%;
      animation-delay: 1.3s;
    }

    .isdCard3 {
      bottom: 20%;
      left: 20%;
      animation-delay: 2.6s;
    }

    @keyframes isdFloat {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    .isdCardIcon {
      width: 32px;
      height: 32px;
      color: #667eea;
    }

    .isdCentralOrb {
      position: relative;
      width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdOrbCore {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%;
      box-shadow: 0 0 60px rgba(102, 126, 234, 0.6);
      animation: isdOrbPulse 3s ease-in-out infinite;
    }

    @keyframes isdOrbPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
    }

    .isdOrbRing {
      position: absolute;
      border: 2px solid rgba(102, 126, 234, 0.2);
      border-radius: 50%;
      animation: isdRingExpand 4s ease-out infinite;
    }

    .isdRing1 {
      width: 120px;
      height: 120px;
      animation-delay: 0s;
    }

    .isdRing2 {
      width: 160px;
      height: 160px;
      animation-delay: 1s;
    }

    .isdRing3 {
      width: 200px;
      height: 200px;
      animation-delay: 2s;
    }

    @keyframes isdRingExpand {
      0% {
        transform: scale(0.8);
        opacity: 1;
      }
      100% {
        transform: scale(1.3);
        opacity: 0;
      }
    }

    .isdStatsSection {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 80px 40px;
      margin-top: 100px;
      position: relative;
      overflow: hidden;
    }

    .isdStatsSection::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .isdStatsGrid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      gap: 40px;
      position: relative;
      z-index: 1;
    }

    .isdStatCard {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      padding: 32px;
      text-align: center;
      transition: all 0.3s ease;
      animation: isdStatSlide 0.8s ease-out forwards;
      animation-delay: var(--stat-delay);
      opacity: 0;
      transform: translateY(30px);
    }

    @keyframes isdStatSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .isdStatCard:hover {
      transform: translateY(-8px);
      background: rgba(255, 255, 255, 0.15);
    }

    .isdStatIconWrapper {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      margin-bottom: 16px;
    }

    .isdStatIcon {
      width: 32px;
      height: 32px;
      color: white;
    }

    .isdStatValue {
      font-size: 2.5rem;
      font-weight: 800;
      color: white;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    .isdStatLabel {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }
    /* End of IlearnSTEM Description Component ***/

    /*** Default Home Footer Component ***/
    .dhfMainContainer {
      width: 100%;
      background: #0f172a;
      position: relative;
      overflow: hidden;
      margin-top: 100px;
    }

    /* Partners Section */
    .dhfPartnersSection {
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      padding: 80px 40px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dhfPartnersWrapper {
      max-width: 1400px;
      margin: 0 auto;
    }

    .dhfPartnersTitle {
      text-align: center;
      font-size: 2rem;
      font-weight: 700;
      color: white;
      margin-bottom: 50px;
      opacity: 0;
      animation: dhfFadeInDown 0.8s ease-out forwards;
    }

    @keyframes dhfFadeInDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dhfPartnersGrid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 40px;
      align-items: center;
    }

    .dhfPartnerCard {
      text-align: center;
      opacity: 0;
      animation: dhfPartnerSlide 0.6s ease-out forwards;
      animation-delay: var(--partner-delay);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    @keyframes dhfPartnerSlide {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dhfPartnerCard:hover {
      transform: translateY(-5px);
    }

    .dhfPartnerLogo {
      width: 80px;
      height: 80px;
      margin: 0 auto 16px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
    }

    .dhfPartnerCard:hover .dhfPartnerLogo {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .dhfPartnerInitial {
      font-size: 1.5rem;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: -0.02em;
    }

    .platinumPartner .dhfPartnerInitial {
      color: #e5e7eb;
    }
    .goldPartner .dhfPartnerInitial {
      color: #fbbf24;
    }
    .silverPartner .dhfPartnerInitial {
      color: #9ca3af;
    }

    .dhfPartnerName {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 4px;
    }

    .dhfPartnerLevel {
      display: block;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Main Footer Content */
    .dhfContentSection {
      padding: 80px 40px 40px;
      position: relative;
      z-index: 1;
    }

    .dhfContentWrapper {
      max-width: 1400px;
      margin: 0 auto;
    }

    .dhfTopSection {
      display: grid;
      grid-template-columns: 2fr 3fr;
      gap: 80px;
      margin-bottom: 80px;
    }

    /* Brand Column */
    .dhfBrandColumn {
      opacity: 0;
      animation: dhfSlideInLeft 0.8s ease-out 0.2s forwards;
    }

    @keyframes dhfSlideInLeft {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .dhfLogo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }

    .dhfLogoIcon {
      width: 40px;
      height: 40px;
      color: #667eea;
    }

    .dhfLogoText {
      font-size: 1.5rem;
      font-weight: 700;
      color: white;
      letter-spacing: -0.02em;
    }

    .dhfBrandDesc {
      font-size: 12px;
      line-height: 1.7;
      color: #94a3b8;
      margin-bottom: 32px;
      max-width: 400px;
    }

    .dhfNewsletterForm {
      display: flex;
      gap: 12px;
      max-width: 400px;
    }

    .dhfNewsletterInput {
      flex: 1;
      padding: 14px 20px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      color: white;
      font-size: 0.75rem;
      transition: all 0.3s ease;
    }

    .dhfNewsletterInput::placeholder {
      color: #64748b;
    }

    .dhfNewsletterInput:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.08);
      border-color: #667eea;
    }

    .dhfNewsletterButton {
      padding: 10px 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .dhfNewsletterButton:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    }

    .dhfNewsletterIcon {
      width: 16px;
      height: 16px;
    }

    /* Links Grid */
    .dhfLinksGrid {
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      gap: 10px;
      opacity: 0;
      animation: dhfSlideInRight 0.8s ease-out 0.4s forwards;
    }

    @keyframes dhfSlideInRight {
      from {
        opacity: 0;
        transform: translateX(30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .dhfLinkColumn {
      display: flex;
      flex-direction: column;
    }

    .dhfLinkColumnTitle {
      font-size: 0.75rem;
      font-weight: 700;
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 20px;
    }

    .dhfLinkList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dhfLinkItem {
      position: relative;
    }

    .dhfLink {
      color: #94a3b8;
      text-decoration: none;
      font-size: 12px;
      transition: all 0.3s ease;
      position: relative;
      display: inline-block;
    }

    .dhfLink::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: #667eea;
      transition: width 0.3s ease;
    }

    .dhfLink:hover {
      color: white;
    }

    .dhfLink:hover::after {
      width: 100%;
    }

    /* Bottom Section */
    .dhfBottomSection {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 40px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      opacity: 0;
      animation: dhfFadeInUp 0.8s ease-out 0.6s forwards;
    }

    @keyframes dhfFadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dhfCopyright p {
      color: #94a3b8;
      font-size: 0.875rem;
      margin: 0;
    }

    .dhfTagline {
      margin-top: 4px;
      font-size: 0.75rem;
      color: #64748b;
    }

    .dhfSocialLinks {
      display: flex;
      gap: 16px;
    }

    .dhfSocialLink {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .dhfSocialLink:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: #667eea;
      transform: translateY(-3px);
    }

    .dhfSocialIcon {
      width: 20px;
      height: 20px;
      color: #94a3b8;
      transition: color 0.3s ease;
    }

    .dhfSocialLink:hover .dhfSocialIcon {
      color: white;
    }

    /* Decorative Elements */
    .dhfDecorativeGradient {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        #667eea 50%,
        transparent 100%
      );
      opacity: 0.5;
    }

    .dhfFloatingOrbs {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .dhfOrb {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(102, 126, 234, 0.1) 0%,
        transparent 70%
      );
      filter: blur(40px);
    }

    .dhfOrb1 {
      width: 400px;
      height: 400px;
      top: -200px;
      right: -200px;
      animation: dhfOrbFloat1 20s ease-in-out infinite;
    }

    .dhfOrb2 {
      width: 300px;
      height: 300px;
      bottom: -150px;
      left: -150px;
      animation: dhfOrbFloat2 25s ease-in-out infinite;
    }

    .dhfOrb3 {
      width: 250px;
      height: 250px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: dhfOrbFloat3 30s ease-in-out infinite;
    }

    @keyframes dhfOrbFloat1 {
      0%,
      100% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(-100px, 50px);
      }
    }

    @keyframes dhfOrbFloat2 {
      0%,
      100% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(50px, -100px);
      }
    }

    @keyframes dhfOrbFloat3 {
      0%,
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
      }
    }
    /* End of Default Home Footer Component ***/

    .settingsDiv {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-top: 50px;
      padding-top: 5rem;
    }

    .settingsBack {
      position: absolute;
      left: 1rem;
      top: 5rem;
      color: #122e3b;
    }

    .settingsBack:hover {
      cursor: pointer;
    }

    .curriculumCountryDiv {
      margin: 20px auto;
    }

    .curriculumCountryDropDown,
    .curriculumProvinceOrStateDropDown,
    .notesOrPracticeSelect {
      display: flex;
      flex-direction: row;
      width: 150px;
      height: 1.5rem;
      align-items: center;
      color: #aeaeae;
      border: 0.3px solid #aeaeae;
      margin: 0px 10px;
      font-size: 0.8rem;
    }

    .settingsSubjectsDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 2rem;
    }

    .settingsSubjectsDiv button {
      width: 100px;
      height: 100px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #122e3b;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
    }

    .settingsPhysicsButton {
      background-color: rgba(153, 217, 255, 0.5);
    }

    .settingsChemistryButton {
      background: rgba(0, 128, 128, 0.15);
      margin: 0 1rem;
    }

    .settingsEarthAndSpaceSciencesButton {
      background: rgba(255, 255, 0, 0.5);
    }

    .settingsMathematicsButton1,
    .settingsMathematicsButton2 {
      background: rgba(132, 31, 39, 0.25);
    }

    .settingsMathematicsButton2 {
      margin: 0 1rem;
    }

    .settingsSubjectsDiv button:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .otherSubjectDropDownDiv {
      width: 85px;
      height: 85px;
      justify-content: center;
      align-items: center;
      background-color: rgba(197, 205, 216, 1);
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-left: 20px;
    }

    .otherSubjectSelect {
      background-color: inherit;
      width: 85px;
      height: 35px;
      border: none;
      outline: none;
    }

    .otherSubjectDropDownDiv:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .settingsTopicsMainDiv {
      width: 100%;
      margin-top: 50px;
    }

    .settingsTopicsMainDiv h3 {
      color: #122e3b;
    }

    .settingsTopicsMainDiv span {
      color: #ffb038;
    }

    .settingsGradeLevelAndCurriculaMainDiv {
      width: 85%;
      margin: 50px auto;
    }

    .settingsGradeLevelSelect {
      height: 35px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 1rem;
    }

    .settingsCurriculumSelect {
      width: 50%;
      height: 35px;
      margin: 0px 30px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 1rem;
    }

    .settings_strand_div,
    .settings_strand_div1 {
      width: 90%;
      padding: 20px;
      margin: 20px auto;
    }

    .settings_strand_subtrand_p_div {
      width: 100%;
      cursor: pointer;
    }

    .settings_strand_subtrand_p_div:hover {
      background-color: #f0f0f0;
      text-decoration: underline;
    }

    .settings_strand_subtrand_p_div_p1 {
      font-weight: 600;
      margin-left: 20px;
      width: 80%;
      margin-top: 50px;
    }

    .settings_strand_substrand_p_div_p2 {
      margin-left: 40px;
      margin-top: 25px;
    }

    /* .navBarDropDownDiv {
      display: none;
    } */

    .dashboardMainContentDiv {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .dashboardSideOrTopDiv {
      display: none;
    }

    .dashboardTopHeaderDiv {
      width: 80%;
      height: 100px;
      background-color: #b5c5cd;
      margin-bottom: 20px;
      position: absolute;
      top: 100px;
    }

    .dashboardTopHeaderTopDiv {
      width: 100%;
      color: #122e3b;
      margin-top: 10px;
    }

    .dashboardScreenSelectionsSelect {
      background-color: #b5c5cd;
      color: #122e3b;
      border: none;
    }

    .navLoginSignUpDiv {
      display: none;
    }

    /* Default Settings Styles */
    .defaultSettingsContainer {
      min-height: calc(100vh - 50px);
      margin-top: 50px;
      background-color: #f5f7fa;
      padding: 20px;
    }

    .defaultSettingsHeader {
      width: 100%;
      margin: 0 auto 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .defaultSettingsBackButton {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #1976d2;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .defaultSettingsBackButton:hover {
      color: #1565c0;
      transform: translateX(-5px);
    }

    .defaultSettingsTitle {
      font-size: 20px;
      color: #1a237e;
      margin: 0;
      font-weight: 700;
    }

    .defaultSettingsCard {
      width: 100%;
      margin: 0 auto;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      padding: 20px;
    }

    .defaultSettingsRow {
      display: grid;
      grid-template-columns: 1fr 1fr; /* 2 equal columns */
      grid-template-rows: 1fr 1fr; /* 2 equal rows */
      gap: 10px;
      margin-bottom: 40px;
    }

    .defaultSettingsSection {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .defaultSettingsLabel {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .defaultSettingsCountrySelect {
      display: flex;
      gap: 20px;
    }

    .defaultSettingsCountryOption {
      flex: 1;
      padding: 10px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }

    .defaultSettingsCountryActive {
      border-color: #1976d2;
      background-color: #e3f2fd;
    }

    .defaultSettingsCountryDisabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .defaultSettingsFlag {
      font-size: 10px;
    }

    .defaultSettingsComingSoon {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #ff6b6b;
      color: white;
      font-size: 10px;
      padding: 4px 8px;
      border-radius: 12px;
      font-weight: 600;
    }

    .defaultSettingsProvinceBox {
      padding: 10px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f8fafc;
      font-weight: 500;
      font-size: 10px;
      width: 200px;
      margin-left: 50px;
    }

    .defaultSettingsProvinceIcon {
      font-size: 12px;
    }

    .defaultSettingsModeToggle {
      display: flex;
      background: #f1f5f9;
      border-radius: 12px;
      padding: 4px;
    }

    .defaultSettingsModeButton {
      flex: 1;
      padding: 12px 24px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-weight: 500;
      font-size: 10px;
      border-radius: 8px;
      transition: all 0.3s ease;
      color: #64748b;
    }

    .defaultSettingsModeActive {
      background: white;
      color: #1976d2;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectSection {
      margin-bottom: 30px;
    }

    .defaultSettingsSectionTitle {
      font-size: 20px;
      color: #334155;
      margin-bottom: 20px;
      font-weight: 600;
    }

    .defaultSettingsSubjectGrid {
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      gap: 16px;
    }

    .defaultSettingsSubjectCard {
      padding: 10px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      background: white;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    .defaultSettingsSubjectCard:hover {
      border-color: var(--subject-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectActive {
      border-color: var(--subject-color);
      background: linear-gradient(to bottom, white, rgba(33, 150, 243, 0.05));
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectIcon {
      font-size: 20px;
    }

    .defaultSettingsSubjectName {
      font-weight: 600;
      color: #334155;
      font-size: 12px;
    }

    .defaultSettingsSubjectGrades {
      font-size: 12px;
      color: #94a3b8;
    }

    .defaultSettingsGradeSection {
      border-top: 1px solid #e5e7eb;
      padding-top: 30px;
    }

    .defaultSettingsGradeRow {
      display: flex;
      gap: 20px;
    }

    .defaultSettingsGradeSelect,
    .defaultSettingsCurriculumSelect {
      width: 200px;
    }

    .defaultSettingsSelect {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: border-color 0.3s ease;
    }

    .defaultSettingsSelect:hover,
    .defaultSettingsSelect:focus {
      border-color: #1976d2;
      outline: none;
    }

    .defaultSettingsTopicsSection {
      max-width: 1200px;
      margin: 0 auto;
    }

    .defaultSettingsTopicsTitle {
      font-size: 24px;
      color: #1a237e;
      margin-bottom: 20px;
      text-align: center;
    }

    .defaultSettingsPracticeAllButton {
      display: block;
      margin: 0 auto 30px;
      padding: 12px 32px;
      background: #1976d2;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultSettingsPracticeAllButton:hover {
      background: #1565c0;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
    }

    .defaultSettingsTopicsList {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .defaultSettingsStrandCard {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .defaultSettingsStrandCard:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsStrandHeader {
      padding: 20px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      background: linear-gradient(to right, #f8fafc, #f1f5f9);
    }

    .defaultSettingsStrandTitle {
      font-size: 18px;
      color: #334155;
      margin: 0;
      font-weight: 600;
    }

    .defaultSettingsStrandActions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .defaultSettingsPracticeButton {
      padding: 8px 20px;
      background: #1976d2;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultSettingsPracticeButton:hover {
      background: #1565c0;
    }

    .defaultSettingsExpandIcon {
      color: #64748b;
      transition: transform 0.3s ease;
    }

    .defaultSettingsSubstrands {
      padding: 0 24px 20px;
      animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .defaultSettingsSubstrand {
      margin-top: 20px;
      padding-left: 20px;
      border-left: 3px solid #e5e7eb;
    }

    .defaultSettingsSubstrandTitle {
      font-size: 16px;
      color: #475569;
      margin: 0 0 12px;
      font-weight: 600;
    }

    .defaultSettingsTopicItem {
      padding: 12px 16px;
      margin: 8px 0;
      background: #f8fafc;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .defaultSettingsTopicItem:hover {
      background: #e3f2fd;
      transform: translateX(4px);
    }

    .defaultSettingsTopicCode {
      font-weight: 600;
      color: #1976d2;
      font-size: 14px;
    }

    .defaultSettingsTopicName {
      color: #334155;
      font-size: 15px;
    }
    /* End of Default Settings Component - Landscape */

    /* Sidebar Styles */
    .defaultDashboardSidebar {
      width: 280px;
      background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
      color: white;
      display: flex;
      flex-direction: column;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
      position: relative;
      left: 0;
    }

    .defaultDashboardUserInfo {
      padding: 30px 20px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
    }

    .defaultUserAvatar {
      width: 80px;
      height: 80px;
      margin: 0 auto 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      border: 3px solid rgba(255, 255, 255, 0.2);
    }

    .defaultUserAvatar i {
      font-size: 48px;
      color: #e2e8f0;
    }

    .defaultUserDetails {
      text-align: center;
    }

    .defaultUserDetails h3 {
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 600;
    }

    .defaultUserDetails p {
      margin: 0 0 8px;
      font-size: 14px;
      color: #cbd5e1;
    }

    .defaultUserRole {
      display: inline-block;
      padding: 4px 12px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      font-size: 12px;
      color: #e2e8f0;
    }

    /* Navigation Menu */
    .defaultDashboardNav {
      flex: 1;
      padding: 20px 0;
    }

    .defaultNavItem {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 24px;
      background: none;
      border: none;
      color: #cbd5e1;
      font-size: 15px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }

    .defaultNavItem:hover {
      background: rgba(255, 255, 255, 0.05);
      color: white;
    }

    .defaultNavItem i {
      font-size: 20px;
    }
  }

  /** media screen and (min-width: 320px) and (max-width: 767px) **/

  /* Desktop - Landscape */
  @media screen and (min-width: 1025px) {
    .defaultHomeTop {
      width: 100%;
      height: calc(100vh - 60px);
      background-color: #122e3b;
      margin-top: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 50;
      margin-bottom: 0;
    }

    /** same as .defaultHomeTop, but top layer ***/
    .defaultHomeTop1 {
      width: 100%;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      padding: 10rem 0 15rem 0;
    }

    /** Practice and learn div**/
    .practiceAndLearnDiv {
      width: auto;
      margin-top: 0;
    }

    .homePageHeaderPractice {
      font-size: 3rem;
      color: #3aa9e8;
      font-weight: 600;
      margin-right: 1rem;
    }

    .homePageHeaderAnd {
      font-size: 2.5rem;
      color: #3aa9e8;
    }

    .homePageHeaderLearn {
      font-size: 3rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .homePageHeaderSTEM {
      font-size: 3rem;
      color: #ffb038;
      font-weight: 600;
      margin: 0 1rem;
    }

    .homePageHeaderSubjects {
      font-size: 2rem;
    }

    .homePageHeaderAnywhere {
      font-size: 2rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .homePageTopP {
      width: 55%;
      font-size: 1.25rem;
      text-align: center;
      color: rgba(58, 169, 232, 0.8);
    }

    .defaultHomeGetStartedButton {
      color: #fff;
      background-color: #e05d5d;
      border-color: #e05d5d;
      width: 200px;
      height: 3rem;
      border-radius: 5px;
      margin-right: 1rem;
      z-index: 100;
    }

    .defaultHomePreviewButton {
      color: #fff;
      background-color: #ffb038;
      width: 200px;
      height: 3rem;
      border-radius: 5px;
      margin-left: 1rem;
    }

    .spiralPlane {
      height: 35vh;
      position: absolute;
      top: 60vh;
      left: 80px;
      z-index: 2;
      opacity: 1;
    }

    .defaultHomePageImageCard {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      top: -55vh;
      z-index: 5;
    }

    .defaultHomePageImageCardInnerDiv {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    }

    .defaultHeroImageLandscape {
      width: 80%;
      margin: auto;
    }

    #heroImageDiv {
      width: 50%;
      -webkit-clip-path: inset(10px round 30px 30px 30px 30px);
      clip-path: inset(10px round 30px 30px 30px 30px);
      background-color: #ffb038;
      align-items: center;
      justify-content: flex-start;
    }

    .defaultHomePageImageCardLeft {
      flex: 1;
      background-color: #ffb038;
    }

    .defaultHomePageImageCardLeft1 {
      width: 100%;
      margin-bottom: 0.5rem;
    }

    .homeCheckmarkImage {
      width: 50px;
      margin-left: 25%;
    }

    .defaultHomePageImageCardLeft1 span {
      color: rgba(98, 98, 98, 0.8);
      font-weight: 100;
      font-size: 0.8rem;
      /* border: 1px solid yellow; */
    }

    #homeMainImage {
      flex: 2;
      -webkit-clip-path: inset(10px round 0px 30px 30px 0px);
      clip-path: inset(10px round 0px 30px 30px 0px);
    }

    .defaultHomePageImageCardBottom {
      display: none;
    }

    /*** Subjects Cards ***/

    .defaultSubjectCardsMainDiv {
      padding: 80px 20px;
      background: linear-gradient(to bottom, #f9fafb, #ffffff);
    }

    .defaultSubjectCardsDiv {
      min-width: 80%;
    }

    .subjectCardsHeader {
      text-align: center;
      margin-bottom: 60px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .subjectCardsTitle {
      font-size: 2.5rem;
      font-weight: 700;
      color: #111827;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .subjectCardsSubtitle {
      font-size: 1.125rem;
      color: #6b7280;
      line-height: 1.75;
    }

    .subjectCard {
      background: white;
      border-radius: 16px;
      padding: 40px 32px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      width: 33%;
      max-width: 400px;
    }

    .subjectCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--card-color);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .subjectCard:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.08);
    }

    .subjectCard:hover::before {
      transform: scaleX(1);
    }

    .subjectCardIconWrapper {
      width: 64px;
      height: 64px;
      background: linear-gradient(
        135deg,
        var(--card-color) 20,
        var(--card-color) 10
      );
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }

    .subjectIcon {
      width: 32px;
      height: 32px;
      color: var(--card-color);
    }

    .subjectCardsHeading {
      font-size: 1.5rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 16px;
    }

    .subjectCardDescription {
      font-size: 0.975rem;
      line-height: 1.6;
      color: #4b5563;
      margin-bottom: 24px;
      flex-grow: 1;
    }

    .subjectCardTopics {
      margin-bottom: 32px;
    }

    .topicsTitle {
      font-size: 0.875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #6b7280;
      margin-bottom: 12px;
    }

    .topicsList {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .topicItem {
      display: flex;
      align-items: center;
      font-size: 0.875rem;
      color: #374151;
      margin-bottom: 8px;
    }

    .topicBullet {
      color: var(--card-color);
      margin-right: 8px;
      font-weight: 700;
    }

    .subjectCardFooter {
      margin-top: auto;
    }

    .exploreButton {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: var(--card-color);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 0.975rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .exploreButton:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .exploreIcon {
      transition: transform 0.2s ease;
    }

    .exploreButton:hover .exploreIcon {
      transform: translateX(4px);
    }

    /** End of Subjects Cards ***/

    /*** Notes and Practice Home Page ***/
    .notesAndPracticeHomeInfoDiv {
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100px 20px;
      background: #f8fafc;
      position: relative;
      overflow: hidden;
    }

    .sectionHeaderStyle {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .sectionTitleStyle {
      font-size: 3rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    .sectionSubtitleStyle {
      font-size: 1.25rem;
      color: #64748b;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .featuresGridStyle {
      width: 60%;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .getFeatureCardStyle {
      background-color: #fff;
      width: 70%;
      max-width: 500px;
      border-radius: 24px;
      padding: 48px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      margin: 0 20px;
    }

    .cardHeaderStyle {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 24px;
    }

    .featureTitleStyle {
      font-size: 1.5rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0;
    }

    .featureDescriptionStyle {
      font-size: 1.0625rem;
      line-height: 1.7;
      color: #475569;
      margin-bottom: 32px;
    }

    .featuresListStyle {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 40px;
    }

    .featureItemStyle {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .featureItemTextStyle {
      font-size: 0.9375rem;
      color: #334155;
      font-weight: 500;
    }

    /* End of Notes and Practice Home Page ***/

    /*** Personalized Adaptive Flexible Component ***/
    .pafMainContainer {
      width: 100%;
      padding: 100px 60px;
      background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
      position: relative;
      overflow: hidden;
    }

    .pafMainContainer::before {
      content: "";
      position: absolute;
      top: -40%;
      left: -40%;
      width: 180%;
      height: 180%;
      background: radial-gradient(
        circle,
        rgba(139, 92, 246, 0.03) 0%,
        transparent 60%
      );
      animation: pafFloat 25s ease-in-out infinite;
    }

    @keyframes pafFloat {
      0%,
      100% {
        transform: translate(0, 0) rotate(0deg);
      }
      33% {
        transform: translate(30px, -30px) rotate(120deg);
      }
      66% {
        transform: translate(-20px, 20px) rotate(240deg);
      }
    }

    .pafHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pafTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #111827;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    .pafSubtitle {
      font-size: 1.25rem;
      color: #6b7280;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pafFeaturesGrid {
      z-index: 1;
    }

    .pafFeatureCard {
      background: white;
      width: 25%;
      max-width: 400px;
      flex: 1;
      height: 550px;
      border-radius: 20px;
      padding: 20px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      cursor: pointer;
      animation: pafSlideUp 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateY(40px);
      margin: 0px 20px;
    }

    @keyframes pafSlideUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pafFeatureCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--feature-gradient);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 0;
    }

    .pafFeatureCard::after {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: var(--feature-gradient);
      border-radius: 20px;
      opacity: 0;
      z-index: -1;
      transition: opacity 0.4s ease;
    }

    .pafFeatureCard:hover {
      transform: translateY(-12px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .pafFeatureCard:hover::before {
      opacity: 0.05;
    }

    .pafFeatureCard:hover::after {
      opacity: 0.3;
    }

    .pafFeatureCard:hover .pafIconWrapper {
      transform: scale(1.1) rotate(10deg);
    }

    .pafFeatureCard:hover .pafFeatureTitle {
      color: var(--feature-color);
    }

    .pafCardNumber {
      position: absolute;
      top: 30px;
      right: 30px;
      font-size: 4rem;
      font-weight: 900;
      color: var(--feature-color);
      opacity: 0.1;
      letter-spacing: -0.02em;
      z-index: 1;
    }

    .pafIconWrapper {
      width: 80px;
      height: 80px;
      background: var(--feature-gradient);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      position: relative;
      z-index: 1;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .pafFeatureIcon {
      width: 40px;
      height: 40px;
      color: white;
    }

    .pafFeatureTitle {
      font-size: 1.75rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
    }

    .pafFeatureDescription {
      font-size: 1.125rem;
      line-height: 1.8;
      color: #4b5563;
      margin-bottom: 35px;
      position: relative;
      z-index: 1;
    }

    .pafHighlights {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      z-index: 1;
    }

    .pafHighlightItem {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .pafHighlightDot {
      width: 8px;
      height: 8px;
      background: var(--feature-gradient);
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
    }

    .pafHighlightDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
    }

    .pafHighlightItem span {
      font-size: 1rem;
      color: #374151;
      font-weight: 500;
      line-height: 1.6;
    }
    /* End of Personalized Adaptive Flexible Component ***/

    /*** Pricing Cards Component ***/
    .pcMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
      position: relative;
      overflow: hidden;
    }

    .pcMainContainer::before {
      content: "";
      position: absolute;
      top: -30%;
      right: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(245, 87, 108, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite;
    }

    .pcMainContainer::after {
      content: "";
      position: absolute;
      bottom: -30%;
      left: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(79, 172, 254, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite reverse;
    }

    @keyframes pcFloat {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(50px, -50px) scale(1.1);
      }
    }

    .pcHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pcTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
      background: linear-gradient(135deg, #667eea 0%, #f5576c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .pcSubtitle {
      font-size: 1.375rem;
      color: #64748b;
      max-width: 650px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pcCardsWrapper {
      position: relative;
      z-index: 1;
    }

    .pcCardsGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      max-width: 1300px;
      margin: 0 auto;
      align-items: stretch;
    }

    .pcCard {
      background: white;
      border-radius: 24px;
      padding: 48px 40px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 20px var(--shadow-color);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: pcCardSlide 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateY(40px);
    }

    @keyframes pcCardSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pcCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: var(--card-gradient);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .pcCard:hover {
      transform: translateY(-12px);
      box-shadow: 0 20px 40px var(--shadow-color);
    }

    .pcCard:hover::before {
      transform: scaleX(1);
    }

    .pcCard:hover .pcCtaButton {
      transform: scale(1.05);
    }

    .pcCardHighlighted {
      border: 2px solid transparent;
      background: linear-gradient(white, white) padding-box,
        var(--card-gradient) border-box;
      transform: scale(1.05);
    }

    .pcCardHighlighted:hover {
      transform: scale(1.08) translateY(-12px);
    }

    .pcBadge {
      position: absolute;
      top: 0px;
      right: 32px;
      background: var(--card-gradient);
      color: white;
      padding: 6px 20px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      animation: pcBadgePulse 2s ease-in-out infinite;
    }

    @keyframes pcBadgePulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }

    .pcCardHeader {
      text-align: center;
      margin-bottom: 40px;
    }

    .pcPlanName {
      font-size: 1.875rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 20px;
    }

    .pcPriceWrapper {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
      margin-bottom: 16px;
    }

    .pcPrice {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1;
    }

    .pcPeriod {
      font-size: 1.25rem;
      color: #64748b;
      font-weight: 500;
    }

    .pcDescription {
      font-size: 1rem;
      color: #64748b;
      line-height: 1.6;
    }

    .pcFeatures {
      flex-grow: 1;
      margin-bottom: 40px;
    }

    .pcFeaturesList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pcFeatureItem {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pcCheckIcon {
      width: 20px;
      height: 20px;
      color: #10b981;
      flex-shrink: 0;
    }

    .pcFeatureItem span {
      font-size: 0.975rem;
      color: #475569;
      line-height: 1.5;
    }

    .pcCardFooter {
      margin-top: auto;
    }

    .pcCtaButton {
      width: 100%;
      padding: 16px 32px;
      background: #e5e7eb;
      color: #374151;
      border: none;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .pcCtaButton::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--card-gradient);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pcCtaButton:hover {
      background: #d1d5db;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .pcCtaHighlighted {
      background: var(--card-gradient);
      color: white;
    }

    .pcCtaHighlighted:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 24px var(--shadow-color);
    }

    .pcCtaHighlighted:hover::before {
      opacity: 0.2;
    }

    .pcArrowIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .pcCtaButton:hover .pcArrowIcon {
      transform: translateX(4px);
    }

    .pcCardGlow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150%;
      height: 150%;
      background: radial-gradient(
        circle,
        var(--shadow-color) 0%,
        transparent 70%
      );
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .pcCard:hover .pcCardGlow {
      opacity: 0.3;
    }

    .pcFooter {
      text-align: center;
      margin-top: 80px;
      position: relative;
      z-index: 1;
    }

    .pcGuarantee {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 0.975rem;
      color: #64748b;
      background: white;
      padding: 16px 32px;
      border-radius: 50px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .pcShieldIcon {
      width: 24px;
      height: 24px;
      color: #10b981;
    }
    /* End of Pricing Cards Component ***/

    /*** IlearnSTEM Description Component ***/
    .isdMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
      position: relative;
      overflow: hidden;
    }

    .isdContentWrapper {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .isdTextSection {
      animation: isdSlideInLeft 0.8s ease-out;
    }

    @keyframes isdSlideInLeft {
      from {
        opacity: 0;
        transform: translateX(-40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .isdHeaderBadge {
      display: inline-block;
      margin-bottom: 24px;
    }

    .isdHeaderBadge span {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 8px 20px;
      border-radius: 30px;
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .isdTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
      margin-bottom: 24px;
      letter-spacing: -0.03em;
    }

    .isdTitleHighlight {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .isdDescription {
      font-size: 1.25rem;
      line-height: 1.8;
      color: #475569;
      margin-bottom: 40px;
    }

    .isdFeatures {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 48px;
    }

    .isdFeatureItem {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      opacity: 0;
      animation: isdFadeInUp 0.6s ease-out forwards;
      animation-delay: calc(var(--feature-index, 0) * 0.1s);
    }

    .isdFeatureItem:nth-child(1) {
      --feature-index: 0;
    }
    .isdFeatureItem:nth-child(2) {
      --feature-index: 1;
    }
    .isdFeatureItem:nth-child(3) {
      --feature-index: 2;
    }

    @keyframes isdFadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
      from {
        opacity: 0;
        transform: translateY(20px);
      }
    }

    .isdFeatureDot {
      width: 12px;
      height: 12px;
      background: var(--feature-color);
      border-radius: 50%;
      margin-top: 6px;
      flex-shrink: 0;
      position: relative;
    }

    .isdFeatureDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
      animation: isdPulse 2s ease-in-out infinite;
    }

    @keyframes isdPulse {
      0%,
      100% {
        transform: scale(1);
        opacity: 0.2;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.1;
      }
    }

    .isdFeatureContent {
      flex: 1;
    }

    .isdFeatureTitle {
      font-size: 1.125rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .isdFeatureDesc {
      font-size: 0.975rem;
      color: #64748b;
      line-height: 1.5;
    }

    .isdCta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .isdCtaButton {
      padding: 16px 32px;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .isdCtaPrimary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
    }

    .isdCtaPrimary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }

    .isdCtaSecondary {
      background: white;
      color: #475569;
      border: 2px solid #e5e7eb;
    }

    .isdCtaSecondary:hover {
      border-color: #667eea;
      color: #667eea;
      background: #f3f4f6;
    }

    .isdCtaIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
    }

    .isdCtaButton:hover .isdCtaIcon {
      transform: translateX(4px);
    }

    .isdVisualSection {
      position: relative;
      animation: isdSlideInRight 0.8s ease-out;
    }

    @keyframes isdSlideInRight {
      from {
        opacity: 0;
        transform: translateX(40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .isdGraphicContainer {
      position: relative;
      width: 100%;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdFloatingCard {
      position: absolute;
      background: white;
      border-radius: 16px;
      padding: 20px 24px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      color: #1e293b;
      animation: isdFloat 4s ease-in-out infinite;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .isdFloatingCard:hover {
      transform: scale(1.05);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .isdCard1 {
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }

    .isdCard2 {
      top: 60%;
      right: 15%;
      animation-delay: 1.3s;
    }

    .isdCard3 {
      bottom: 20%;
      left: 20%;
      animation-delay: 2.6s;
    }

    @keyframes isdFloat {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    .isdCardIcon {
      width: 32px;
      height: 32px;
      color: #667eea;
    }

    .isdCentralOrb {
      position: relative;
      width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdOrbCore {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%;
      box-shadow: 0 0 60px rgba(102, 126, 234, 0.6);
      animation: isdOrbPulse 3s ease-in-out infinite;
    }

    @keyframes isdOrbPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
    }

    .isdOrbRing {
      position: absolute;
      border: 2px solid rgba(102, 126, 234, 0.2);
      border-radius: 50%;
      animation: isdRingExpand 4s ease-out infinite;
    }

    .isdRing1 {
      width: 120px;
      height: 120px;
      animation-delay: 0s;
    }

    .isdRing2 {
      width: 160px;
      height: 160px;
      animation-delay: 1s;
    }

    .isdRing3 {
      width: 200px;
      height: 200px;
      animation-delay: 2s;
    }

    @keyframes isdRingExpand {
      0% {
        transform: scale(0.8);
        opacity: 1;
      }
      100% {
        transform: scale(1.3);
        opacity: 0;
      }
    }

    .isdStatsSection {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 80px 40px;
      margin-top: 100px;
      position: relative;
      overflow: hidden;
    }

    .isdStatsSection::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .isdStatsGrid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      position: relative;
      z-index: 1;
    }

    .isdStatCard {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      padding: 32px;
      text-align: center;
      transition: all 0.3s ease;
      animation: isdStatSlide 0.8s ease-out forwards;
      animation-delay: var(--stat-delay);
      opacity: 0;
      transform: translateY(30px);
    }

    @keyframes isdStatSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .isdStatCard:hover {
      transform: translateY(-8px);
      background: rgba(255, 255, 255, 0.15);
    }

    .isdStatIconWrapper {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      margin-bottom: 16px;
    }

    .isdStatIcon {
      width: 32px;
      height: 32px;
      color: white;
    }

    .isdStatValue {
      font-size: 2.5rem;
      font-weight: 800;
      color: white;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    .isdStatLabel {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }
    /* End of IlearnSTEM Description Component ***/

    /*** Default Home Footer Component ***/
    .dhfMainContainer {
      width: 100%;
      background: #0f172a;
      position: relative;
      overflow: hidden;
      margin-top: 100px;
    }

    /* Partners Section */
    .dhfPartnersSection {
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      padding: 80px 40px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dhfPartnersWrapper {
      max-width: 1400px;
      margin: 0 auto;
    }

    .dhfPartnersTitle {
      text-align: center;
      font-size: 2rem;
      font-weight: 700;
      color: white;
      margin-bottom: 50px;
      opacity: 0;
      animation: dhfFadeInDown 0.8s ease-out forwards;
    }

    @keyframes dhfFadeInDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dhfPartnersGrid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 40px;
      align-items: center;
    }

    .dhfPartnerCard {
      text-align: center;
      opacity: 0;
      animation: dhfPartnerSlide 0.6s ease-out forwards;
      animation-delay: var(--partner-delay);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    @keyframes dhfPartnerSlide {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dhfPartnerCard:hover {
      transform: translateY(-5px);
    }

    .dhfPartnerLogo {
      width: 80px;
      height: 80px;
      margin: 0 auto 16px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
    }

    .dhfPartnerCard:hover .dhfPartnerLogo {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .dhfPartnerInitial {
      font-size: 1.5rem;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: -0.02em;
    }

    .platinumPartner .dhfPartnerInitial {
      color: #e5e7eb;
    }
    .goldPartner .dhfPartnerInitial {
      color: #fbbf24;
    }
    .silverPartner .dhfPartnerInitial {
      color: #9ca3af;
    }

    .dhfPartnerName {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 4px;
    }

    .dhfPartnerLevel {
      display: block;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Main Footer Content */
    .dhfContentSection {
      padding: 80px 40px 40px;
      position: relative;
      z-index: 1;
    }

    .dhfContentWrapper {
      max-width: 1400px;
      margin: 0 auto;
    }

    .dhfTopSection {
      display: grid;
      grid-template-columns: 2fr 3fr;
      gap: 80px;
      margin-bottom: 80px;
    }

    /* Brand Column */
    .dhfBrandColumn {
      opacity: 0;
      animation: dhfSlideInLeft 0.8s ease-out 0.2s forwards;
    }

    @keyframes dhfSlideInLeft {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .dhfLogo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }

    .dhfLogoIcon {
      width: 40px;
      height: 40px;
      color: #667eea;
    }

    .dhfLogoText {
      font-size: 1.5rem;
      font-weight: 700;
      color: white;
      letter-spacing: -0.02em;
    }

    .dhfBrandDesc {
      font-size: 1rem;
      line-height: 1.7;
      color: #94a3b8;
      margin-bottom: 32px;
      max-width: 400px;
    }

    .dhfNewsletterForm {
      display: flex;
      gap: 12px;
      max-width: 400px;
    }

    .dhfNewsletterInput {
      flex: 1;
      padding: 14px 20px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      color: white;
      font-size: 0.975rem;
      transition: all 0.3s ease;
    }

    .dhfNewsletterInput::placeholder {
      color: #64748b;
    }

    .dhfNewsletterInput:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.08);
      border-color: #667eea;
    }

    .dhfNewsletterButton {
      padding: 14px 24px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 0.975rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .dhfNewsletterButton:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    }

    .dhfNewsletterIcon {
      width: 16px;
      height: 16px;
    }

    /* Links Grid */
    .dhfLinksGrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      opacity: 0;
      animation: dhfSlideInRight 0.8s ease-out 0.4s forwards;
    }

    @keyframes dhfSlideInRight {
      from {
        opacity: 0;
        transform: translateX(30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .dhfLinkColumn {
      display: flex;
      flex-direction: column;
    }

    .dhfLinkColumnTitle {
      font-size: 0.875rem;
      font-weight: 700;
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 20px;
    }

    .dhfLinkList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dhfLinkItem {
      position: relative;
    }

    .dhfLink {
      color: #94a3b8;
      text-decoration: none;
      font-size: 0.975rem;
      transition: all 0.3s ease;
      position: relative;
      display: inline-block;
    }

    .dhfLink::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: #667eea;
      transition: width 0.3s ease;
    }

    .dhfLink:hover {
      color: white;
    }

    .dhfLink:hover::after {
      width: 100%;
    }

    /* Bottom Section */
    .dhfBottomSection {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 40px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      opacity: 0;
      animation: dhfFadeInUp 0.8s ease-out 0.6s forwards;
    }

    @keyframes dhfFadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dhfCopyright p {
      color: #94a3b8;
      font-size: 0.875rem;
      margin: 0;
    }

    .dhfTagline {
      margin-top: 4px;
      font-size: 0.75rem;
      color: #64748b;
    }

    .dhfSocialLinks {
      display: flex;
      gap: 16px;
    }

    .dhfSocialLink {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .dhfSocialLink:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: #667eea;
      transform: translateY(-3px);
    }

    .dhfSocialIcon {
      width: 20px;
      height: 20px;
      color: #94a3b8;
      transition: color 0.3s ease;
    }

    .dhfSocialLink:hover .dhfSocialIcon {
      color: white;
    }

    /* Decorative Elements */
    .dhfDecorativeGradient {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        #667eea 50%,
        transparent 100%
      );
      opacity: 0.5;
    }

    .dhfFloatingOrbs {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .dhfOrb {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(102, 126, 234, 0.1) 0%,
        transparent 70%
      );
      filter: blur(40px);
    }

    .dhfOrb1 {
      width: 400px;
      height: 400px;
      top: -200px;
      right: -200px;
      animation: dhfOrbFloat1 20s ease-in-out infinite;
    }

    .dhfOrb2 {
      width: 300px;
      height: 300px;
      bottom: -150px;
      left: -150px;
      animation: dhfOrbFloat2 25s ease-in-out infinite;
    }

    .dhfOrb3 {
      width: 250px;
      height: 250px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: dhfOrbFloat3 30s ease-in-out infinite;
    }

    @keyframes dhfOrbFloat1 {
      0%,
      100% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(-100px, 50px);
      }
    }

    @keyframes dhfOrbFloat2 {
      0%,
      100% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(50px, -100px);
      }
    }

    @keyframes dhfOrbFloat3 {
      0%,
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
      }
    }
    /* End of Default Home Footer Component ***/

    .settingsDiv {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding-top: 5rem;
      margin-top: 50px;
    }

    .settingsBack {
      position: absolute;
      left: 5rem;
      top: 5rem;
      color: #122e3b;
    }

    .settingsBack:hover {
      cursor: pointer;
    }

    .settingsTopDiv {
      width: 550px;
      padding: 5px 20px;
    }

    .curriculumCountryDiv {
      margin: 20px auto;
    }

    .curriculumCountryDropDown,
    .curriculumProvinceOrStateDropDown,
    .notesOrPracticeSelect {
      display: flex;
      flex-direction: row;
      width: 150px;
      height: 35px;
      align-items: center;
      color: #aeaeae;
      margin-bottom: 20px;
      border: 0.3px solid #aeaeae;
      font-size: 0.8rem;
      border-radius: 5px;
    }

    .settingsSubjectsDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 2rem;
    }

    .settingsSubjectsDiv button {
      width: 125px;
      height: 125px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #122e3b;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
    }

    .settingsPhysicsButton {
      background-color: rgba(153, 217, 255, 0.5);
    }

    .settingsChemistryButton {
      background: rgba(0, 128, 128, 0.15);
      margin: 0 1rem;
    }

    .settingsMathematicsButton1,
    .settingsMathematicsButton2 {
      background: rgba(132, 31, 39, 0.25);
    }

    .settingsMathematicsButton2 {
      margin: 0 1rem;
    }

    .settingsEarthAndSpaceSciencesButton {
      background: rgba(255, 255, 0, 0.5);
    }

    .settingsSubjectsDiv button:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .otherSubjectDropDownDiv {
      width: 115px;
      height: 115px;
      justify-content: center;
      align-items: center;
      background-color: rgba(197, 205, 216, 1);
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-left: 20px;
    }

    .otherSubjectSelect {
      background-color: inherit;
      width: 95px;
      height: 35px;
      border: none;
      outline: none;
    }

    .otherSubjectDropDownDiv:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .settingsTopicsMainDiv {
      width: 100%;
      margin-top: 50px;
    }

    .settingsTopicsMainDiv h3 {
      color: #122e3b;
    }

    .settingsTopicsMainDiv span {
      color: #ffb038;
    }

    .settingsGradeLevelAndCurriculaMainDiv {
      width: 50%;
      margin: 50px auto;
    }

    .settingsGradeLevelSelect {
      height: 35px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 1rem;
    }

    .settingsCurriculumSelect {
      width: 50%;
      height: 35px;
      margin: 0px 30px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 1rem;
    }

    .settings_strand_div,
    .settings_strand_div1 {
      width: 45%;
      min-width: 800px;
      padding: 50px;
      margin: 20px auto;
    }

    .settings_strand_subtrand_p_div {
      width: 100%;
      cursor: pointer;
    }

    .settings_strand_subtrand_p_div:hover {
      background-color: #f0f0f0;
      text-decoration: underline;
    }

    .settings_strand_subtrand_p_div_p1 {
      font-weight: 600;
      margin-left: 50px;
      width: 80%;
      margin-top: 50px;
    }

    .settings_strand_substrand_p_div_p2 {
      margin-left: 100px;
      margin-top: 25px;
    }

    /* Default Settings Styles */
    .defaultSettingsContainer {
      min-height: calc(100vh - 50px);
      margin-top: 50px;
      background-color: #f5f7fa;
      padding: 20px;
    }

    .defaultSettingsHeader {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .defaultSettingsBackButton {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #1976d2;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .defaultSettingsBackButton:hover {
      color: #1565c0;
      transform: translateX(-5px);
    }

    .defaultSettingsTitle {
      font-size: 32px;
      color: #1a237e;
      margin: 0;
      font-weight: 700;
    }

    .defaultSettingsCard {
      max-width: 1200px;
      margin: 0 auto 40px;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      padding: 30px;
    }

    .defaultSettingsRow {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 30px;
      margin-bottom: 40px;
    }

    .defaultSettingsSection {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .defaultSettingsLabel {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .defaultSettingsCountrySelect {
      display: flex;
      gap: 12px;
    }

    .defaultSettingsCountryOption {
      flex: 1;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }

    .defaultSettingsCountryActive {
      border-color: #1976d2;
      background-color: #e3f2fd;
    }

    .defaultSettingsCountryDisabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .defaultSettingsFlag {
      font-size: 24px;
    }

    .defaultSettingsComingSoon {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #ff6b6b;
      color: white;
      font-size: 10px;
      padding: 4px 8px;
      border-radius: 12px;
      font-weight: 600;
    }

    .defaultSettingsProvinceBox {
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f8fafc;
      font-weight: 500;
    }

    .defaultSettingsProvinceIcon {
      font-size: 20px;
    }

    .defaultSettingsModeToggle {
      display: flex;
      background: #f1f5f9;
      border-radius: 12px;
      padding: 4px;
    }

    .defaultSettingsModeButton {
      flex: 1;
      padding: 12px 24px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-weight: 500;
      border-radius: 8px;
      transition: all 0.3s ease;
      color: #64748b;
    }

    .defaultSettingsModeActive {
      background: white;
      color: #1976d2;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectSection {
      margin-bottom: 30px;
    }

    .defaultSettingsSectionTitle {
      font-size: 20px;
      color: #334155;
      margin-bottom: 20px;
      font-weight: 600;
    }

    .defaultSettingsSubjectGrid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }

    .defaultSettingsSubjectCard {
      padding: 20px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      background: white;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    .defaultSettingsSubjectCard:hover {
      border-color: var(--subject-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectActive {
      border-color: var(--subject-color);
      background: linear-gradient(to bottom, white, rgba(33, 150, 243, 0.05));
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectIcon {
      font-size: 32px;
    }

    .defaultSettingsSubjectName {
      font-weight: 600;
      color: #334155;
      font-size: 16px;
    }

    .defaultSettingsSubjectGrades {
      font-size: 12px;
      color: #94a3b8;
    }

    .defaultSettingsGradeSection {
      border-top: 1px solid #e5e7eb;
      padding-top: 30px;
    }

    .defaultSettingsGradeRow {
      display: flex;
      gap: 20px;
    }

    .defaultSettingsGradeSelect,
    .defaultSettingsCurriculumSelect {
      flex: 1;
    }

    .defaultSettingsSelect {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: border-color 0.3s ease;
    }

    .defaultSettingsSelect:hover,
    .defaultSettingsSelect:focus {
      border-color: #1976d2;
      outline: none;
    }

    .defaultSettingsTopicsSection {
      max-width: 1200px;
      margin: 0 auto;
    }

    .defaultSettingsTopicsTitle {
      font-size: 24px;
      color: #1a237e;
      margin-bottom: 20px;
      text-align: center;
    }

    .defaultSettingsPracticeAllButton {
      display: block;
      margin: 0 auto 30px;
      padding: 12px 32px;
      background: #1976d2;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultSettingsPracticeAllButton:hover {
      background: #1565c0;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
    }

    .defaultSettingsTopicsList {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .defaultSettingsStrandCard {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .defaultSettingsStrandCard:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsStrandHeader {
      padding: 20px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      background: linear-gradient(to right, #f8fafc, #f1f5f9);
    }

    .defaultSettingsStrandTitle {
      font-size: 18px;
      color: #334155;
      margin: 0;
      font-weight: 600;
    }

    .defaultSettingsStrandActions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .defaultSettingsPracticeButton {
      padding: 8px 20px;
      background: #1976d2;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultSettingsPracticeButton:hover {
      background: #1565c0;
    }

    .defaultSettingsExpandIcon {
      color: #64748b;
      transition: transform 0.3s ease;
    }

    .defaultSettingsSubstrands {
      padding: 0 24px 20px;
      animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .defaultSettingsSubstrand {
      margin-top: 20px;
      padding-left: 20px;
      border-left: 3px solid #e5e7eb;
    }

    .defaultSettingsSubstrandTitle {
      font-size: 16px;
      color: #475569;
      margin: 0 0 12px;
      font-weight: 600;
    }

    .defaultSettingsTopicItem {
      padding: 12px 16px;
      margin: 8px 0;
      background: #f8fafc;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .defaultSettingsTopicItem:hover {
      background: #e3f2fd;
      transform: translateX(4px);
    }

    .defaultSettingsTopicCode {
      font-weight: 600;
      color: #1976d2;
      font-size: 14px;
    }

    .defaultSettingsTopicName {
      color: #334155;
      font-size: 15px;
    }
    /* End of Default Settings Component - Landscape */
  }

  /**media screen and (min-width: 1025px)  **/

  @media screen and (min-width: 1025px) and (max-width: 1290px) {
    .defaultHomeTop {
      width: 100%;
      height: calc(100vh - 60px);
      background-color: #122e3b;
      margin-top: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 50;
      margin-bottom: 0;
    }

    /** same as .defaultHomeTop, but top layer ***/
    .defaultHomeTop1 {
      width: 100%;
      height: 45vh;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      padding: 2rem 0 15rem 0;
    }

    .spiralPlane {
      height: 30vh;
      position: absolute;
      top: 60vh;
      left: 60px;
      z-index: 2;
      opacity: 1;
    }

    .defaultHomePageImageCard {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      top: -8vh;
      z-index: 5;
      margin-top: 20px;
    }

    /*** Subjects Cards ***/

    .defaultSubjectCardsMainDiv {
      padding: 80px 20px;
      background: linear-gradient(to bottom, #f9fafb, #ffffff);
    }

    .defaultSubjectCardsDiv {
      min-width: 80%;
    }

    .subjectCardsHeader {
      text-align: center;
      margin-bottom: 60px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .subjectCardsTitle {
      font-size: 2.5rem;
      font-weight: 700;
      color: #111827;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .subjectCardsSubtitle {
      font-size: 1.125rem;
      color: #6b7280;
      line-height: 1.75;
    }

    .subjectCard {
      background: white;
      border-radius: 16px;
      padding: 40px 32px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      width: 25%;
    }

    .subjectCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--card-color);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .subjectCard:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.08);
    }

    .subjectCard:hover::before {
      transform: scaleX(1);
    }

    .subjectCardIconWrapper {
      width: 64px;
      height: 64px;
      background: linear-gradient(
        135deg,
        var(--card-color) 20,
        var(--card-color) 10
      );
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }

    .subjectIcon {
      width: 32px;
      height: 32px;
      color: var(--card-color);
    }

    .subjectCardsHeading {
      font-size: 1.5rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 16px;
    }

    .subjectCardDescription {
      font-size: 0.975rem;
      line-height: 1.6;
      color: #4b5563;
      margin-bottom: 24px;
      flex-grow: 1;
    }

    .subjectCardTopics {
      margin-bottom: 32px;
    }

    .topicsTitle {
      font-size: 0.875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #6b7280;
      margin-bottom: 12px;
    }

    .topicsList {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .topicItem {
      display: flex;
      align-items: center;
      font-size: 0.875rem;
      color: #374151;
      margin-bottom: 8px;
    }

    .topicBullet {
      color: var(--card-color);
      margin-right: 8px;
      font-weight: 700;
    }

    .subjectCardFooter {
      margin-top: auto;
    }

    .exploreButton {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: var(--card-color);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 0.975rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .exploreButton:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .exploreIcon {
      transition: transform 0.2s ease;
    }

    .exploreButton:hover .exploreIcon {
      transform: translateX(4px);
    }

    /** End of Subjects Cards ***/
  }

  @media screen and (min-device-width: 1290.1px) and (max-device-width: 1400px) {
    .defaultHomeTop1 {
      width: 100%;
      height: 45vh;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      padding: 2rem 0 15rem 0;
    }

    .defaultHomePageImageCard {
      width: 70%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      top: -10vh;
      z-index: 5;
      margin-top: 20px;
    }
  }

  @media screen and (min-device-width: 1400.1px) {
    .defaultHomeTop1 {
      width: 100%;
      height: 40vh;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      padding: 2rem 0 15rem 0;
    }

    .defaultHomePageImageCard {
      width: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      top: -10vh;
      z-index: 5;
      margin-top: 20px;
    }
  }

  /* iMac 27-inch - Landscape */
  @media screen and (min-device-width: 5120px) and (max-device-width: 2880px) {
    /* CSS styles for iMac 27-inch landscape go here */
    .dropDownBarsDiv {
      display: none;
    }
  }

  @media screen and (max-device-height: 500px) {
    .defaultHomePageImageCard {
      display: none;
    }

    
  }

  /* Modern DefaultHomeTop Styles - Landscape */
  .main-heading-container {
    margin-bottom: 2rem;
  }

  .main-heading {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
  }

  .gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .gradient-text-secondary {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .subtitle-container {
    margin-bottom: 2rem;
  }

  .subtitle {
    font-size: 1.5rem;
    font-weight: 500;
    color: #4a5568;
    margin: 0 0 0.75rem 0;
  }

  .subtitle-highlight {
    color: #667eea;
    font-weight: 700;
  }

  .rotating-text-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    height: 2.5rem;
    overflow: hidden;
  }

  .static-text {
    color: #4a5568;
  }

  .rotating-words {
    position: relative;
    height: 2.5rem;
    overflow: hidden;
    min-width: 200px;
  }

  .rotating-word {
    position: absolute;
    left: 0;
    top: 2.5rem;
    font-weight: 700;
    animation: word-rotate 10s infinite;
    white-space: nowrap;
  }

  @keyframes word-rotate {
    0%,
    20% {
      top: 2.5rem;
    }
    25%,
    45% {
      top: 0;
    }
    50%,
    100% {
      top: -2.5rem;
    }
  }

  .enhanced-description {
    font-size: 1.125rem;
    color: #718096;
    line-height: 1.7;
    margin: 2rem 0;
    max-width: 600px;
  }

  .stats-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 2.5rem;
    margin: 3rem 0;
    padding: 2rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 1.25rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: fit-content;
  }

  .stat-item {
    text-align: center;
  }

  .stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #667eea;
    margin-bottom: 0.5rem;
  }

  .stat-label {
    font-size: 0.875rem;
    color: #4a5568;
  }

  .stat-divider {
    width: 1px;
    height: 3rem;
    background: #cbd5e0;
  }

  .button-container {
    gap: 1.5rem;
    margin: 3rem 0;
  }

  .modern-button {
    padding: 1rem 2.5rem;
    border-radius: 0.625rem;
    font-weight: 600;
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
  }

  .primary-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  }

  .primary-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
  }

  .secondary-button {
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
  }

  .secondary-button:hover {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
  }

  .button-arrow,
  .play-icon {
    transition: transform 0.3s ease;
  }

  .button-hover .button-arrow {
    transform: translateX(4px);
  }

  .button-hover .play-icon {
    transform: scale(1.2);
  }

  .trust-badges {
    margin-top: 3rem;
  }

  .trust-text {
    font-size: 0.875rem;
    color: #718096;
    display: block;
    margin-bottom: 0.5rem;
  }

  .rating-stars {
    color: #fbbf24;
    font-size: 1.25rem;
  }

  .rating-text {
    color: #4a5568;
    font-size: 0.875rem;
    margin-left: 0.5rem;
  }

  .hero-image-section {
    position: relative;
  }

  .floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .floating-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: float 20s infinite ease-in-out;
  }

  .shape-1 {
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }

  .shape-2 {
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    top: 50%;
    right: 10%;
    animation-delay: 5s;
  }

  .shape-3 {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    bottom: 10%;
    left: 15%;
    animation-delay: 10s;
  }

  @keyframes float {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    33% {
      transform: translateY(-30px) rotate(120deg);
    }
    66% {
      transform: translateY(30px) rotate(240deg);
    }
  }

  .animated-spiral {
    animation: spiral-move 30s infinite linear;
  }

  @keyframes spiral-move {
    0% {
      transform: translateX(0) translateY(0) rotate(0deg);
    }
    100% {
      transform: translateX(100px) translateY(-100px) rotate(360deg);
    }
  }

  /* Animation Classes */
  .animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
  }

  .animate-slide-up {
    animation: slideUp 0.8s ease-out forwards;
  }

  .animate-fade-in-delayed {
    animation: fadeIn 0.8s ease-out 0.3s forwards;
    opacity: 0;
  }

  .animate-buttons {
    animation: fadeIn 0.8s ease-out forwards;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  /* End of Modern DefaultHomeTop Styles - Landscape */

  /* Default Login Component Styles */
  .dlMainContainer {
    width: 100%;
    min-height: calc(100vh - 50px);
    margin-top: 50px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  /* Animated background */
  .dlBackgroundAnimation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  .dlParticle {
    position: absolute;
    background: rgba(58, 169, 232, 0.1);
    border-radius: 50%;
    animation: dlFloat 20s linear infinite;
  }

  @keyframes dlFloat {
    0% {
      transform: translateY(100vh) rotate(0deg);
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      transform: translateY(-100vh) rotate(360deg);
      opacity: 0;
    }
  }

  .dlGradientOrb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    animation: dlOrbitFloat 30s ease-in-out infinite;
  }

  .dlOrb1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #3aa9e8 0%, transparent 70%);
    top: -200px;
    left: -200px;
  }

  .dlOrb2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #ffb038 0%, transparent 70%);
    bottom: -150px;
    right: -150px;
    animation-delay: -10s;
  }

  .dlOrb3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #667eea 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: -20s;
  }

  @keyframes dlOrbitFloat {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -30px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
  }

  .dlContentWrapper {
    width: 100%;
    max-width: 1400px;
    padding: 2rem;
    position: relative;
    z-index: 1;
  }

  /* Header Section */
  .dlHeaderSection {
    text-align: center;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.8s ease-out;
  }

  .dlHeaderSection.dlVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .dlMainTitle {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .dlWelcome {
    font-size: 1.5rem;
    color: #64748b;
    font-weight: 400;
  }

  .dlBrandName {
    font-size: 3.5rem;
    font-weight: 800;
    color: #1e293b;
    letter-spacing: -0.02em;
  }

  .dlHighlight {
    background: linear-gradient(135deg, #3aa9e8 0%, #667eea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .dlSubtitle {
    font-size: 1.125rem;
    color: #64748b;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Form Container */
  .dlFormContainer {
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out 0.2s;
  }

  .dlFormContainer.dlFormVisible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Login Card */
  .dlLoginCard {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 3rem;
    width: 450px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    overflow: hidden;
  }

  .dlLoginCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3aa9e8 0%, #667eea 50%, #ffb038 100%);
  }

  .dlCardHeader {
    text-align: center;
    margin-bottom: 2rem;
  }

  .dlCardTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
  }

  .dlCardSubtitle {
    font-size: 1rem;
    color: #64748b;
  }

  /* Error Message */
  .dlErrorMessage {
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: dlShake 0.5s ease-out;
  }

  @keyframes dlShake {
    0%,
    100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-5px);
    }
    75% {
      transform: translateX(5px);
    }
  }

  .dlErrorIcon {
    font-size: 1.25rem;
  }

  .dlErrorText {
    color: #dc2626;
    font-size: 0.875rem;
  }

  /* Form Group */
  .dlFormGroup {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .dlInputWrapper {
    position: relative;
    transition: all 0.3s ease;
  }

  .dlInputWrapper.dlInputFocused {
    transform: translateY(-2px);
  }

  .dlLabel {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.5rem;
  }

  .dlInputContainer {
    position: relative;
    display: flex;
    align-items: center;
  }

  .dlInputIcon {
    position: absolute;
    left: 1rem;
    font-size: 1.25rem;
    z-index: 1;
  }

  .dlInput {
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 3rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f9fafb;
  }

  .dlInput:focus {
    outline: none;
    border-color: #3aa9e8;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(58, 169, 232, 0.1);
  }

  .dlPasswordToggle {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s ease;
  }

  .dlPasswordToggle:hover {
    opacity: 1;
  }

  .dlForgotPassword {
    text-align: right;
    margin-top: -0.5rem;
  }

  .dlForgotLink {
    font-size: 0.875rem;
    color: #3aa9e8;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .dlForgotLink:hover {
    color: #667eea;
    text-decoration: underline;
  }

  /* Submit Button */
  .dlSubmitButton {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #3aa9e8 0%, #667eea 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .dlSubmitButton:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(58, 169, 232, 0.3);
  }

  .dlSubmitButton:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  .dlLoadingSpinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: dlSpin 1s linear infinite;
  }

  @keyframes dlSpin {
    to {
      transform: rotate(360deg);
    }
  }

  .dlButtonText {
    position: relative;
    z-index: 1;
  }

  .dlButtonArrow {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
  }

  .dlSubmitButton:hover .dlButtonArrow {
    transform: translateX(4px);
  }

  .dlButtonShine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 100%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent
    );
    transform: skewX(-45deg);
    transition: left 0.5s ease;
  }

  .dlSubmitButton:hover .dlButtonShine {
    left: 100%;
  }

  /* Divider */
  .dlDivider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
  }

  .dlDividerLine {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
  }

  .dlDividerText {
    font-size: 0.875rem;
    color: #9ca3af;
    font-weight: 500;
  }

  /* Social Login */
  .dlGoogleButton {
    width: 100%;
    padding: 0.875rem;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .dlGoogleButton:hover:not(:disabled) {
    border-color: #4285f4;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15);
    transform: translateY(-2px);
  }

  .dlGoogleIcon {
    width: 20px;
    height: 20px;
  }

  .dlGoogleText {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
  }

  .dlGoogleShine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 100%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(66, 133, 244, 0.1),
      transparent
    );
    transform: skewX(-45deg);
    transition: left 0.5s ease;
  }

  .dlGoogleButton:hover .dlGoogleShine {
    left: 100%;
  }

  /* Signup Prompt */
  .dlSignupPrompt {
    text-align: center;
    margin-top: 2rem;
    z-index: 5;
    cursor: pointer;
  }

  .dlSignupText {
    font-size: 0.875rem;
    color: #64748b;
  }

  .dlSignupLink {
    color: #3aa9e8;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }

  .dlSignupLink:hover {
    color: #667eea;
  }

  .dlLinkArrow {
    transition: transform 0.3s ease;
  }

  .dlSignupLink:hover .dlLinkArrow {
    transform: translateX(4px);
  }

  /* Features Sidebar */
  .dlFeatures {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.8s ease-out 0.4s;
  }

  .dlFeatures.dlFeaturesVisible {
    opacity: 1;
    transform: translateX(0);
  }

  .dlFeatureCard {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.5);
  }

  .dlFeatureCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.9);
  }

  .dlFeatureIcon {
    font-size: 2rem;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3aa9e8 0%, #667eea 100%);
    border-radius: 12px;
    flex-shrink: 0;
  }

  .dlFeatureTitle {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.25rem;
  }

  .dlFeatureDesc {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
  }

  /* Bottom Decoration */
  .dlBottomDecoration {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    /* overflow: hidden; */
    opacity: 0;
    transform: translateY(0px);
    transition: all 0.8s ease-out 0.6s;
  }

  .dlBottomDecoration.dlDecorationVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .dlWave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    animation: dlWaveMove 20s linear infinite;
  }

  .dlWave1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%233aa9e8' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 1200px 120px;
  }

  .dlWave2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23667eea' opacity='0.1'/%3E%3C/svg%3E");
    background-size: 1200px 120px;
    animation-delay: -5s;
  }

  .dlWave3 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffb038' opacity='0.05'/%3E%3C/svg%3E");
    background-size: 1200px 120px;
    animation-delay: -10s;
  }

  @keyframes dlWaveMove {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  /* Default Registration Component - Landscape */
  .drMainContainer {
    min-height: calc(100vh - 50px);
    margin-top: 50px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f1419 0%, #1a2332 100%);
  }

  .drBackgroundAnimation {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .drGradientOrb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    transition: transform 0.3s ease-out;
  }

  .drOrb1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #3aa9e8 0%, transparent 70%);
    top: -200px;
    right: -200px;
    animation: drOrbFloat 15s ease-in-out infinite;
  }

  .drOrb2 {
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, #667eea 0%, transparent 70%);
    bottom: -300px;
    left: -300px;
    animation: drOrbFloat 20s ease-in-out infinite reverse;
  }

  @keyframes drOrbFloat {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -30px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
  }

  .drGrid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.03) 1px,
        transparent 1px
      ),
      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: drGridMove 20s linear infinite;
  }

  @keyframes drGridMove {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(50px, 50px);
    }
  }

  .drFloatingShape {
    position: absolute;
    opacity: 0.1;
    animation: drShapeFloat linear infinite;
  }

  .drShape-circle {
    border-radius: 50%;
    background: linear-gradient(45deg, #3aa9e8, #667eea);
  }

  .drShape-hexagon {
    background: linear-gradient(45deg, #667eea, #ffb038);
    clip-path: polygon(
      30% 0%,
      70% 0%,
      100% 30%,
      100% 70%,
      70% 100%,
      30% 100%,
      0% 70%,
      0% 30%
    );
  }

  .drShape-triangle {
    background: linear-gradient(45deg, #ffb038, #3aa9e8);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }

  @keyframes drShapeFloat {
    from {
      transform: translateY(100vh) rotate(0deg);
    }
    to {
      transform: translateY(-100px) rotate(360deg);
    }
  }

  .drContentWrapper {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
    padding-top: 120px;
  }

  .drHeaderSection {
    text-align: center;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .drHeaderSection.drVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .drMainTitle {
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1rem 0;
    line-height: 1.2;
  }

  .drHighlight {
    background: linear-gradient(135deg, #3aa9e8, #667eea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
  }

  .drSubtitle {
    font-size: 1.25rem;
    color: #a0aec0;
    margin: 0;
    font-weight: 400;
  }

  .drProgressSteps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
    gap: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out 0.2s;
  }

  .drProgressSteps.drStepsVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .drStepItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .drStepCircle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
  }

  .drStepActive .drStepCircle {
    background: linear-gradient(135deg, #3aa9e8, #667eea);
    border-color: transparent;
    box-shadow: 0 0 20px rgba(58, 169, 232, 0.5);
  }

  .drStepNumber {
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    transition: all 0.3s ease;
  }

  .drStepCheckmark {
    position: absolute;
    width: 24px;
    height: 24px;
    fill: #ffffff;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
  }

  .drStepActive .drStepNumber {
    opacity: 0;
    transform: scale(0);
  }

  .drStepActive .drStepCheckmark {
    opacity: 1;
    transform: scale(1);
  }

  .drStepLabel {
    font-size: 0.9rem;
    color: #a0aec0;
    font-weight: 500;
  }

  .drStepActive .drStepLabel {
    color: #3aa9e8;
  }

  .drStepLine {
    width: 100px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
  }

  .drStepLine::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3aa9e8, transparent);
    animation: drLineProgress 2s ease-in-out infinite;
  }

  @keyframes drLineProgress {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
  }

  .drFormContainer {
    width: 100%;
    max-width: 900px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.4s;
  }

  .drFormContainer.drFormVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .drFormCard {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
  }

  .drFormCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    animation: drBorderGlow 3s ease-in-out infinite;
  }

  @keyframes drBorderGlow {
    0%,
    100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }

  .drErrorAlert {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .drErrorIcon {
    width: 24px;
    height: 24px;
    fill: #ef4444;
    flex-shrink: 0;
  }

  .drErrorAlert span {
    color: #fca5a5;
    font-size: 0.95rem;
  }

  .drStepContent {
    animation: drFadeInUp 0.6s ease-out;
  }

  @keyframes drFadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .drStepTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 2rem 0;
    text-align: center;
  }

  .drFormGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .drFullWidth {
    grid-column: 1 / -1;
  }

  .drInputGroup {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .drLabel {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
  }

  .drLabelText {
    font-size: 0.95rem;
    font-weight: 500;
    color: #e2e8f0;
  }

  .drRequired {
    color: #ef4444;
    font-size: 0.9rem;
  }

  .drInputWrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .drInputIcon {
    position: absolute;
    left: 1.25rem;
    width: 20px;
    height: 20px;
    fill: #64748b;
    pointer-events: none;
    transition: fill 0.3s ease;
  }

  .drInput,
  .drSelect {
    width: 100%;
    padding: 1rem 1.25rem 1rem 3.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    color: #ffffff;
    transition: all 0.3s ease;
  }

  .drInput::placeholder {
    color: #64748b;
  }

  .drInput:focus,
  .drSelect:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: #3aa9e8;
    box-shadow: 0 0 0 3px rgba(58, 169, 232, 0.1);
  }

  .drInput:focus ~ .drInputIcon,
  .drSelect:focus ~ .drInputIcon {
    fill: #3aa9e8;
  }

  .drInputError {
    border-color: #ef4444 !important;
  }

  .drInputError ~ .drInputIcon {
    fill: #ef4444 !important;
  }

  .drPasswordToggle {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  .drPasswordToggle:hover {
    opacity: 0.7;
  }

  .drPasswordToggle svg {
    width: 20px;
    height: 20px;
    fill: #64748b;
  }

  .drErrorText {
    font-size: 0.85rem;
    color: #fca5a5;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .drSelect {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 20px;
    padding-right: 3rem;
  }

  .drSelect option {
    background: #1a2332;
    color: #ffffff;
  }

  .drPlanCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
  }

  .drPlanCard {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .drPlanCard:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  .drPlanSelected {
    background: rgba(58, 169, 232, 0.1) !important;
    border-color: #3aa9e8 !important;
  }

  .drPlanHeader {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .drPlanName {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
  }

  .drPlanPrice {
    font-size: 1.1rem;
    color: #3aa9e8;
    margin: 0;
    font-weight: 600;
  }

  .drPlanBadge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, #3aa9e8, #667eea);
    color: #ffffff;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .drPlanFeatures {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .drPlanFeature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    color: #cbd5e1;
  }

  .drFeatureIcon {
    width: 16px;
    height: 16px;
    fill: #3aa9e8;
    flex-shrink: 0;
  }

  .drButtonGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    gap: 1rem;
  }

  .drButton {
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
  }

  .drButtonPrimary {
    background: linear-gradient(135deg, #3aa9e8, #667eea);
    color: #ffffff;
    box-shadow: 0 4px 20px rgba(58, 169, 232, 0.3);
  }

  .drButtonPrimary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(58, 169, 232, 0.4);
  }

  .drButtonPrimary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  .drButtonSecondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .drButtonSecondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .drButtonIcon {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  .drLoadingSpinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: drSpin 0.8s linear infinite;
  }

  @keyframes drSpin {
    to {
      transform: rotate(360deg);
    }
  }

  .drLoginPrompt {
    text-align: center;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .drLoginText {
    font-size: 0.95rem;
    color: #a0aec0;
    margin: 0;
  }

  .drLoginLink {
    color: #3aa9e8;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
  }

  .drLoginLink:hover {
    color: #667eea;
  }

  .drLoginLink::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #667eea;
    transition: width 0.3s ease;
  }

  .drLoginLink:hover::after {
    width: 100%;
  }
  /* End of Default Registration Component - Landscape */

  /* Default Dashboard Styles - Landscape */
  .defaultDashboardContainer {
    display: flex;
    min-height: calc(100vh - 50px);
    background: #f8fafc;
    margin-top: 50px;
  }

  /* Hide mobile menu toggle in landscape */
  .defaultMobileMenuToggle {
    display: none !important;
  }

  .defaultMobileOverlay {
    display: none !important;
  }

  /* Sidebar Styles */
  .defaultDashboardSidebar {
    width: 200px;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    position: relative;
    left: 0;
  }

  .defaultDashboardUserInfo {
    padding: 30px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
  }

  .defaultUserAvatar {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.2);
  }

  .defaultUserAvatar i {
    font-size: 48px;
    color: #e2e8f0;
  }

  .defaultUserDetails {
    text-align: center;
  }

  .defaultUserDetails h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
  }

  .defaultUserDetails p {
    margin: 0 0 8px;
    font-size: 14px;
    color: #cbd5e1;
  }

  .defaultUserRole {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 12px;
    color: #e2e8f0;
  }

  /* Navigation Menu */
  .defaultDashboardNav {
    flex: 1;
    padding: 20px 0;
  }

  .defaultNavItem {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: none;
    border: none;
    color: #cbd5e1;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

  .defaultNavItem:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
  }

  .defaultNavItem i {
    font-size: 20px;
  }

  .defaultNavActive {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
  }

  .defaultNavActive::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #667eea;
  }

  .defaultDashboardFooter {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .defaultLogoutButton {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultLogoutButton:hover {
    background: rgba(239, 68, 68, 0.2);
    color: white;
  }

  /* Main Content Area */
  .defaultDashboardMain {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
  }

  .defaultDashboardContent {
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Overview Section */
  .defaultDashboardOverview {
    animation: fadeInUp 0.5s ease;
  }

  .defaultStatsGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 40px;
  }

  .defaultStatCard {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
  }

  .defaultStatCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .defaultStatIcon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .defaultStatIcon i {
    font-size: 28px;
    color: white;
  }

  .defaultStatContent h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
  }

  .defaultStatContent p {
    margin: 4px 0 0;
    font-size: 14px;
    color: #64748b;
  }

  /* Subject Progress Section */
  .defaultSubjectProgressSection {
    margin-bottom: 40px;
  }

  .defaultSubjectProgressSection h2 {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultSubjectCards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .defaultSubjectCard {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .defaultSubjectCard h3 {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultSubjectStats {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
  }

  .defaultSubjectStat {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .defaultSubjectStatLabel {
    font-size: 14px;
    color: #64748b;
  }

  .defaultSubjectStatValue {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultProgressBarContainer {
    flex: 1;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-left: 16px;
    position: relative;
  }

  .defaultProgressBarFill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
    position: relative;
  }

  .defaultProgressBarText {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: white;
    font-weight: 600;
  }

  .defaultSubjectButton {
    width: 100%;
    padding: 12px 24px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultSubjectButton:hover {
    background: #5a67d8;
    transform: translateY(-2px);
  }

  /* Activity Section */
  .defaultActivitySection {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .defaultRecentActivity,
  .defaultUpcomingTasks {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .defaultRecentActivity h2,
  .defaultUpcomingTasks h2 {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultAchievementsList,
  .defaultTasksList {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .defaultAchievementItem {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
  }

  .defaultAchievementItem:hover {
    background: #f1f5f9;
  }

  .defaultAchievementIcon {
    font-size: 32px;
    line-height: 1;
  }

  .defaultAchievementContent h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultAchievementContent p {
    margin: 0 0 8px;
    font-size: 14px;
    color: #64748b;
  }

  .defaultAchievementDate {
    font-size: 12px;
    color: #94a3b8;
  }

  .defaultTaskItem {
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 4px solid transparent;
    transition: all 0.3s ease;
  }

  .defaultTaskhigh {
    border-left-color: #ef4444;
  }

  .defaultTaskmedium {
    border-left-color: #f59e0b;
  }

  .defaultTasklow {
    border-left-color: #10b981;
  }

  .defaultTaskSubject {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 4px;
  }

  .defaultTaskTopic {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 8px;
  }

  .defaultTaskDue {
    font-size: 14px;
    color: #94a3b8;
  }

  /* Profile Section */
  .defaultDashboardProfile {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.5s ease;
  }

  .defaultProfileHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
  }

  .defaultProfileHeader h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultEditButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultEditButton:hover {
    background: #5a67d8;
  }

  .defaultEditButton i {
    font-size: 18px;
  }

  .defaultProfileContent {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .defaultProfileSection {
    display: flex;
    gap: 32px;
  }

  .defaultProfileAvatar {
    width: 120px;
    height: 120px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .defaultProfileAvatar i {
    font-size: 64px;
    color: #94a3b8;
  }

  .defaultProfileInfo {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .defaultProfileField {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .defaultProfileField label {
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .defaultProfileField span {
    font-size: 16px;
    color: #1e293b;
    font-weight: 500;
  }

  .defaultStatusActive {
    color: #10b981 !important;
  }

  .defaultSubscriptionInfo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .defaultProfileActions {
    display: flex;
    gap: 16px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
  }

  .defaultActionButton {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
  }

  .defaultPrimaryButton {
    background: #667eea;
    color: white;
  }

  .defaultPrimaryButton:hover {
    background: #5a67d8;
  }

  .defaultSecondaryButton {
    background: #e2e8f0;
    color: #64748b;
  }

  .defaultSecondaryButton:hover {
    background: #cbd5e1;
    color: #475569;
  }

  /* Progress Section */
  .defaultDashboardProgress {
    animation: fadeInUp 0.5s ease;
  }

  .defaultProgressHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
  }

  .defaultProgressHeader h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultProgressFilters {
    display: flex;
    gap: 16px;
  }

  .defaultFilterSelect {
    padding: 8px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultFilterSelect:hover {
    border-color: #cbd5e1;
  }

  .defaultFilterSelect:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  }

  .defaultProgressCharts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 32px;
  }

  .defaultChartCard {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .defaultChartCard h3 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultChartPlaceholder {
    height: 300px;
    background: #f8fafc;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .defaultChartPlaceholder i {
    font-size: 48px;
    color: #cbd5e1;
  }

  .defaultChartPlaceholder p {
    margin: 0;
    font-size: 14px;
    color: #94a3b8;
  }

  .defaultTopicProgress {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .defaultTopicProgress h3 {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultTopicList {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .defaultTopicItem {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .defaultTopicItem span:first-child {
    min-width: 180px;
    font-size: 16px;
    color: #475569;
  }

  /* Default Practice Questions Page Styles */
  .defaultPracticeContainer {
    position: relative;
    min-height: 100vh;
    background: #f8fafc;
    overflow-x: hidden;
  }

  /* Animated Background */
  .defaultPracticeBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }

  .defaultFloatingShape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.05;
    animation: defaultFloat 20s ease-in-out infinite;
  }

  .defaultShape1 {
    width: 300px;
    height: 300px;
    background: #2196f3;
    top: 10%;
    left: -150px;
    animation-duration: 25s;
  }

  .defaultShape2 {
    width: 200px;
    height: 200px;
    background: #9c27b0;
    bottom: 20%;
    right: -100px;
    animation-duration: 30s;
    animation-delay: 5s;
  }

  .defaultShape3 {
    width: 150px;
    height: 150px;
    background: #ff5722;
    top: 50%;
    right: 10%;
    animation-duration: 35s;
    animation-delay: 10s;
  }

  @keyframes defaultFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(30px, -30px) rotate(90deg);
    }
    50% {
      transform: translate(-20px, 20px) rotate(180deg);
    }
    75% {
      transform: translate(40px, -10px) rotate(270deg);
    }
  }

  /* Header Section */
  .defaultPracticeHeader {
    position: relative;
    z-index: 10;
    background: white;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
  }

  .defaultHeaderLeft,
  .defaultHeaderRight {
    flex: 0 0 auto;
  }

  .defaultHeaderCenter {
    flex: 1;
    text-align: center;
  }

  .defaultSettingsButton,
  .defaultExitButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultSettingsButton {
    background: #f1f5f9;
    color: #475569;
  }

  .defaultSettingsButton:hover {
    background: #e2e8f0;
    color: #334155;
  }

  .defaultExitButton {
    background: #fee2e2;
    color: #dc2626;
  }

  .defaultExitButton:hover {
    background: #fecaca;
    color: #b91c1c;
  }

  .defaultSubjectInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  .defaultSubjectIcon {
    font-size: 32px;
  }

  .defaultSubjectName {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
  }

  .defaultGradeLevel {
    background: #e0f2fe;
    color: #0369a1;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
  }

  .defaultTopicName {
    margin: 0;
    font-size: 16px;
    color: #64748b;
  }

  /* Settings Panel */
  .defaultSettingsPanel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
  }

  .defaultSettingsPanelContent {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
  }

  .defaultSettingsPanelContent h3 {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
  }

  .defaultSettingGroup {
    margin-bottom: 24px;
  }

  .defaultSettingGroup label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #475569;
  }

  .defaultModeButtons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .defaultModeButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultModeButton:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .defaultModeButton.active {
    border-color: #2196f3;
    background: #eff6ff;
    color: #2196f3;
  }

  .defaultModeButton i {
    font-size: 24px;
  }

  .defaultDifficultySelect {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    background: white;
    cursor: pointer;
  }

  .defaultToggleOptions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .defaultToggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
  }

  .defaultToggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .defaultSettingsActions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
  }

  .defaultActionButton {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultRestartButton {
    background: #fef3c7;
    color: #d97706;
  }

  .defaultRestartButton:hover {
    background: #fde68a;
  }

  .defaultCloseButton {
    background: #f3f4f6;
    color: #6b7280;
  }

  .defaultCloseButton:hover {
    background: #e5e7eb;
  }

  /* Progress Section */
  .defaultProgressSection {
    padding: 0 40px;
    margin-bottom: 16px;
    position: relative;
    z-index: 10;
  }

  .defaultProgressBar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }

  .defaultProgressFill {
    height: 100%;
    background: #2196f3;
    transition: width 0.5s ease;
    position: relative;
  }

  .defaultProgressText {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 600;
    color: white;
  }

  /* Stats Bar */
  .defaultStatsBar {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 16px 40px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 32px;
    position: relative;
    z-index: 10;
  }

  .defaultStatItem {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #64748b;
  }

  .defaultStatItem i {
    font-size: 20px;
  }

  /* Question Section */
  .defaultQuestionSection {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 10;
  }

  .defaultQuestionHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .defaultQuestionNumber {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .defaultQuestionLabel {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
  }

  .defaultQuestionValue {
    font-size: 36px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
  }

  .defaultQuestionActions {
    display: flex;
    gap: 12px;
  }

  .defaultHintButton,
  .defaultFormulaButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultHintButton:hover:not(:disabled),
  .defaultFormulaButton:hover {
    border-color: #2196f3;
    color: #2196f3;
    background: #eff6ff;
  }

  .defaultHintButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Hint and Formula Boxes */
  .defaultHintBox,
  .defaultFormulaBox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border-radius: 8px;
    animation: slideDown 0.3s ease;
  }

  .defaultHintBox {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
  }

  .defaultFormulaBox {
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    color: #075985;
  }

  .defaultHintBox i,
  .defaultFormulaBox i {
    font-size: 20px;
    margin-top: 2px;
  }

  /* Question Content */
  .defaultQuestionContent {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
  }

  .defaultCanvasContainer {
    text-align: center;
    margin-bottom: 24px;
  }

  #physics_canvas {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 16px;
  }

  .defaultDemoButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: #2196f3;
    color: white;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultDemoButton:hover {
    background: #1976d2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
  }

  .defaultQuestionText {
    font-size: 18px;
    line-height: 1.8;
    color: #334155;
    margin-bottom: 32px;
  }

  /* Answer Options */
  .defaultAnswerOptions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .defaultAnswerOption {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

  .defaultAnswerOption:hover:not(.correct):not(.incorrect) {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .defaultAnswerOption.correct {
    border-color: #10b981;
    background: #ecfdf5;
  }

  .defaultAnswerOption.incorrect {
    border-color: #ef4444;
    background: #fef2f2;
  }

  .defaultAnswerOption input[type="radio"] {
    position: absolute;
    opacity: 0;
  }

  .defaultRadioButton {
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    margin-right: 16px;
    position: relative;
    flex-shrink: 0;
  }

  .defaultAnswerOption input[type="radio"]:checked ~ .defaultRadioButton {
    border-color: #2196f3;
  }

  .defaultAnswerOption
    input[type="radio"]:checked
    ~ .defaultRadioButton::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #2196f3;
    border-radius: 50%;
  }

  .defaultAnswerText {
    font-size: 16px;
    color: #334155;
    flex: 1;
  }

  .defaultAnswerUnits {
    color: #64748b;
    font-style: italic;
  }

  .defaultCorrectIcon {
    margin-left: auto;
    color: #10b981;
    font-size: 24px;
  }

  /* Submit Section */
  .defaultSubmitSection {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
  }

  .defaultSubmitButton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 48px;
    border: none;
    border-radius: 12px;
    background: #10b981;
    color: white;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultSubmitButton:hover:not(:disabled) {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
  }

  .defaultSubmitButton:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  /* Navigation Section */
  .defaultNavigationSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
  }

  .defaultNavButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 16px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultNavButton:hover:not(:disabled) {
    border-color: #2196f3;
    color: #2196f3;
    background: #eff6ff;
  }

  .defaultNavButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .defaultQuestionIndicators {
    display: flex;
    gap: 8px;
  }

  .defaultQuestionIndicator {
    width: 40px;
    height: 40px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 16px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultQuestionIndicator:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .defaultQuestionIndicator.active {
    border-color: #2196f3;
    background: #2196f3;
    color: white;
  }

  .defaultQuestionIndicator.completed {
    border-color: #10b981;
    background: #ecfdf5;
    color: #10b981;
  }

  /* Explanation */
  .defaultExplanation {
    text-align: center;
  }

  .defaultExplanation p {
    margin: 0 0 12px;
    font-size: 16px;
    color: #64748b;
  }

  .defaultCorrectAnswerDisplay {
    font-size: 20px;
    font-weight: 600;
    color: #10b981;
  }

  .defaultCorrectAnswer {
    color: #2196f3;
    font-weight: 600;
  }

  /* Animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideDown {
    from {
      transform: translateY(-10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* End of Default Practice Questions Page Styles */

  /* NavBar1 Styles */
  .navbar1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    z-index: 1000;
  }

  .navbar1-scrolled {
    height: 64px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
  }

  .navbar1-container {
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Logo Section */
  .navbar1-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-logo:hover {
    transform: translateX(2px);
  }

  .navbar1-logo-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.25);
  }

  .navbar1-logo-text {
    color: white;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }

  .navbar1-logo-name {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
  }

  /* Desktop Navigation */
  .navbar1-desktop {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
    justify-content: flex-end;
  }

  /* Version Toggle */
  .navbar1-version-toggle {
    display: flex;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
  }

  .navbar1-version-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-version-btn:hover {
    color: #475569;
  }

  .navbar1-version-btn.active {
    background: white;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .navbar1-version-icon {
    font-size: 16px;
  }

  /* Navigation Items */
  .navbar1-nav-items {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .navbar1-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-nav-btn:hover {
    background: #f8fafc;
    color: #1e293b;
  }

  .navbar1-nav-btn i {
    font-size: 20px;
  }

  /* Auth Section */
  .navbar1-auth {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .navbar1-login-btn {
    padding: 8px 20px;
    border: 2px solid #e2e8f0;
    background: transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-login-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .navbar1-signup-btn {
    padding: 8px 20px;
    border: none;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.25);
  }

  .navbar1-signup-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.35);
  }

  /* Profile Section */
  .navbar1-profile {
    position: relative;
  }

  .navbar1-profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: none;
    background: #f8fafc;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-profile-btn:hover {
    background: #f1f5f9;
  }

  .navbar1-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
  }

  .navbar1-username {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar1-profile-btn i {
    font-size: 20px;
    color: #64748b;
  }

  /* Profile Dropdown */
  .navbar1-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: dropdownSlide 0.3s ease;
  }

  @keyframes dropdownSlide {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .navbar1-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
  }

  .navbar1-dropdown-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
  }

  .navbar1-dropdown-info {
    flex: 1;
    overflow: hidden;
  }

  .navbar1-dropdown-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar1-dropdown-email {
    margin: 2px 0 0;
    font-size: 13px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar1-dropdown-divider {
    height: 1px;
    background: #e2e8f0;
  }

  .navbar1-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
  }

  .navbar1-dropdown-item:hover {
    background: #f8fafc;
    color: #1e293b;
  }

  .navbar1-dropdown-item i {
    font-size: 20px;
    color: #64748b;
  }

  .navbar1-logout {
    color: #dc2626;
  }

  .navbar1-logout i {
    color: #dc2626;
  }

  .navbar1-logout:hover {
    background: #fef2f2;
    color: #b91c1c;
  }

  /* Mobile Toggle */
  .navbar1-mobile-toggle {
    display: none;
    padding: 8px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-mobile-toggle:hover {
    background: #f8fafc;
  }

  .navbar1-mobile-toggle i {
    font-size: 24px;
    color: #475569;
  }

  /* Mobile Menu */
  .navbar1-mobile-menu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    overflow-y: auto;
    animation: mobileSlide 0.3s ease;
  }

  .navbar1-scrolled .navbar1-mobile-menu {
    top: 64px;
  }

  @keyframes mobileSlide {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  .navbar1-mobile-version {
    display: flex;
    gap: 8px;
    padding: 16px;
  }

  .navbar1-mobile-version-btn {
    flex: 1;
    padding: 12px;
    border: 2px solid #e2e8f0;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-mobile-version-btn.active {
    background: #f8fafc;
    border-color: #2196f3;
    color: #2196f3;
  }

  .navbar1-mobile-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 8px 0;
  }

  .navbar1-mobile-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 24px;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
  }

  .navbar1-mobile-item:hover {
    background: #f8fafc;
    color: #1e293b;
  }

  .navbar1-mobile-item i {
    font-size: 24px;
    color: #64748b;
  }

  .navbar1-mobile-signup {
    background: #f0f9ff;
    color: #2196f3;
  }

  .navbar1-mobile-signup i {
    color: #2196f3;
  }

  .navbar1-mobile-logout {
    color: #dc2626;
  }

  .navbar1-mobile-logout i {
    color: #dc2626;
  }

  .navbar1-mobile-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: #f8fafc;
  }

  .navbar1-mobile-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
  }

  .navbar1-mobile-user-info {
    flex: 1;
    overflow: hidden;
  }

  .navbar1-mobile-user-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
  }

  .navbar1-mobile-user-email {
    margin: 2px 0 0;
    font-size: 13px;
    color: #64748b;
  }

  /* Spacer */
  .navbar1-spacer {
    height: 70px;
  }

  .navbar1-scrolled + .navbar1-spacer {
    height: 64px;
  }

  /* Kids Theme Override */
  .navbar1-kids .navbar1-logo-icon {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
  }

  .navbar1-kids .navbar1-version-btn.active {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
  }

  .navbar1-kids .navbar1-signup-btn {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
  }

  .navbar1-kids .navbar1-signup-btn:hover {
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
  }

  .navbar1-kids .navbar1-avatar,
  .navbar1-kids .navbar1-dropdown-avatar,
  .navbar1-kids .navbar1-mobile-avatar {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  }

  .navbar1-kids .navbar1-mobile-version-btn.active {
    border-color: #f97316;
    color: #f97316;
  }

  .navbar1-kids .navbar1-mobile-signup {
    background: #fff7ed;
    color: #f97316;
  }

  .navbar1-kids .navbar1-mobile-signup i {
    color: #f97316;
  }

  /* Responsive */
  @media (max-width: 1280px) {
    .navbar1-version-toggle {
      margin-right: auto;
      margin-left: 16px;
    }

    .navbar1-nav-items {
      display: none;
    }

    .navbar1-desktop {
      display: none;
    }

    .navbar1-mobile-toggle {
      display: block;
    }

    .navbar1-mobile-menu {
      display: block;
    }

    .navbar1-container {
      padding: 0 16px;
    }

    
  }

  /* Generic Section */
  .defaultDashboardSection {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.5s ease;
  }

  .defaultDashboardSection h2 {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultDashboardSection p {
    margin: 0;
    font-size: 16px;
    color: #64748b;
  }

  /* Animations */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Responsive adjustments for smaller landscape screens */
  @media (max-width: 1400px) {
    .defaultStatsGrid {
      grid-template-columns: repeat(2, 1fr);
    }

    .defaultSubjectCards {
      grid-template-columns: 1fr;
    }

    .defaultActivitySection {
      grid-template-columns: 1fr;
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1024.9px) {
    /* CSS styles for tablet landscape go here */
    .topNav {
      height: 60px;
      width: 100%;
      background: #122e3b;
      position: absolute;
      top: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      z-index: 10;
    }

    .logoDiv {
      width: 33%;
      height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding-left: 1rem;
    }

    .logo {
      display: flex;
      flex-direction: row;
      font-size: 1rem;
    }

    .logo:hover {
      opacity: 0.7;
      cursor: pointer;
    }

    .logoI {
      display: flex;
      flex-direction: column;
      width: 0.2rem;
      height: 1.5rem;
      position: relative;
      top: 0;
    }

    .logoITop {
      width: 0.2rem;
      height: 20%;
      background-color: #5e5656;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      position: relative;
      top: 1px;
    }

    .logoIMiddle {
      width: inherit;
      height: 60%;
      border-radius: 2px;
      background-color: #fffa83;
      z-index: 1;
    }

    .logoIBottom {
      display: inline;
      width: inherit;
      height: 20%;
      margin-top: 0;
      background-color: #e05d5d;
      clip-path: ellipse(45% 45% at 50% 50%);
      position: relative;
      top: -2.5px;
    }

    .logoLearn {
      color: #fff;
    }

    .logoS {
      color: #ffb038;
      font-weight: 900;
    }

    .logoT {
      color: #fffa83;
      font-weight: 900;
    }

    .logoE {
      color: #c7282d;
      font-weight: 900;
    }

    .logoM {
      color: #9c06c1;
      font-weight: 900;
    }

    .navToggleDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 33%;
      height: 60px;
      min-height: 45px;
      color: #fff;
      margin-right: 0;
    }

    .dropDownBarsDiv {
      width: 33%;
      height: 50%;
      display: flex;
      justify-content: flex-end;
      padding: 0.5px;
      padding-right: 1rem;
      visibility: visible;
      margin-left: 0;
    }

    .navLoginSignUpDiv {
      width: 33%;
      height: 45px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 1rem;
      font-size: 0.85rem;
    }

    .navToggleInnerDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 25vw;
      height: 59px;
      color: #fff;
    }

    .navToggleDiv span {
      font-size: 0.9rem;
    }

    .toggleSwitch {
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 25px;
      width: 48px;
      height: 25px;
      border: 1px solid #938b8b;
      background-color: #fff;
    }

    .toggleKnob {
      width: 23px;
      height: 23px;
      background-color: #b5c5cd;
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 50%;
      position: relative;
      left: 0px;
      transition: 1s;
    }

    .toggleKnob:hover {
      cursor: pointer;
    }

    .chosenApp {
      font-weight: 600;
      text-decoration: underline;
      transition: 1.3s;
    }

    .notChosenApp {
      font-weight: 600;
      opacity: 0.5;
    }

    .navSignUpButton {
      width: 105px;
      height: 60%;
      background: #fff;
      color: #477f90;
      margin-left: 1rem;
      border-radius: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.7rem;
    }

    .navLoginButton {
      width: 89px;
      height: 60%;
      border: 1px solid #fff;
      border-radius: 3px;
      background: inherit;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 0.7rem;
    }

    .topBarProfileDiv {
      color: #fff;
      width: 150px;
      font-size: 0.8rem;
      font-weight: 200;
      position: relative;
      display: inline-block;
    }

    .topBarProfileDivInner {
      border: 0.3px solid #ffffff;
      border-radius: 5px 5px 0 0;
      padding: 0 0.3rem;
    }

    .topBarProfileDivInner:hover {
      cursor: pointer;
    }

    .topBarProfileDivContent {
      position: absolute;
      background-color: #3aa9e8;
      border-left: 0.3px solid #ffffff;
      border-right: 0.3px solid #ffffff;
      border-bottom: 0.3px solid #ffffff;
      border-radius: 0px 0px 5px 5px;
      min-width: 150px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 0;
      z-index: 1;
    }

    .topBarProfileDivContent button {
      font-size: 0.8rem;
      width: 100%;
      background: none;
      border: none;
      margin-top: 0.2rem;
      color: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0.3px solid rgba(255, 255, 255, 0.2);
    }

    .topBarProfileDivContent button:hover {
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
    }

    .topBarProfileDivContentButtonDiv {
      width: 120px;
    }

    .topBarProfileDivContent i {
      font-size: 0.6rem;
      margin-left: 0.1rem;
    }

    .dropDownBarsArea {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-end;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropDownBars {
      width: 15px;
      height: 1px;
      background-color: #fff;
    }

    .defaultHomeTop {
      width: 100%;
      background-color: #122e3b;
      margin-top: 60px;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 50;
      margin-bottom: 0;
    }

    /** same as .defaultHomeTop, but top layer ***/
    .defaultHomeTop1 {
      width: 100%;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      padding: 1rem 0 5rem 0;
    }

    /** Practice and learn div**/
    .practiceAndLearnDiv {
      width: auto;
      margin-top: 1rem;
    }

    .homePageHeaderPractice {
      font-size: 1.75rem;
      color: #3aa9e8;
      font-weight: 600;
      margin-right: 1rem;
    }

    .homePageHeaderAnd {
      font-size: 1.5rem;
      color: #3aa9e8;
    }

    .homePageHeaderLearn {
      font-size: 1.75rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .homePageHeaderSTEM {
      font-size: 1.5rem;
      color: #ffb038;
      font-weight: 600;
      margin: 0 1rem;
    }

    .homePageHeaderSubjects {
      font-size: 1.25rem;
    }

    .homePageHeaderAnywhere {
      font-size: 1.25rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .homePageTopP {
      width: 55%;
      text-align: center;
      color: rgba(58, 169, 232, 0.8);
      font-size: 0.9rem;
    }

    .defaultHomeGetStartedButton {
      color: #fff;
      background-color: #e05d5d;
      border-color: #e05d5d;
      width: 10rem;
      height: 3rem;
      border-radius: 5px;
      margin-right: 1rem;
    }

    .defaultHomePreviewButton {
      color: #fff;
      background-color: #ffb038;
      width: 10rem;
      height: 3rem;
      border-radius: 5px;
      margin-left: 1rem;
    }

    .spiralPlane {
      height: 150px;
      position: absolute;
      top: 120px;
      left: 50px;
      z-index: 2;
      opacity: 1;
    }

    .defaultHomePageImageCard {
      width: 90%;
      display: flex;
      justify-content: center;
      position: relative;
      top: -5vh;
      z-index: 2;
    }

    .defaultHeroImageLandscape {
      width: 60%;
    }

    /*** Subjects Cards ***/

    .defaultSubjectCardsMainDiv {
      padding: 40px 10px;
      background: linear-gradient(to bottom, #f9fafb, #ffffff);
    }

    .defaultSubjectCardsDiv {
      flex-direction: column;
      min-width: 100%;
    }

    .subjectCardsHeader {
      text-align: center;
      margin-bottom: 60px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .subjectCardsTitle {
      font-size: 2.5rem;
      font-weight: 700;
      color: #111827;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .subjectCardsSubtitle {
      font-size: 1.125rem;
      color: #6b7280;
      line-height: 1.75;
    }

    .subjectCard {
      background: white;
      border-radius: 16px;
      padding: 40px 32px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      width: 40%;
      margin: 20px auto;
    }

    .subjectCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--card-color);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .subjectCard:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.08);
    }

    .subjectCard:hover::before {
      transform: scaleX(1);
    }

    .subjectCardIconWrapper {
      width: 64px;
      height: 64px;
      background: linear-gradient(
        135deg,
        var(--card-color) 20,
        var(--card-color) 10
      );
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }

    .subjectIcon {
      width: 32px;
      height: 32px;
      color: var(--card-color);
    }

    .subjectCardsHeading {
      font-size: 1.5rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 16px;
    }

    .subjectCardDescription {
      font-size: 0.975rem;
      line-height: 1.6;
      color: #4b5563;
      margin-bottom: 24px;
      flex-grow: 1;
    }

    .subjectCardTopics {
      margin-bottom: 32px;
    }

    .topicsTitle {
      font-size: 0.875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #6b7280;
      margin-bottom: 12px;
    }

    .topicsList {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .topicItem {
      display: flex;
      align-items: center;
      font-size: 0.875rem;
      color: #374151;
      margin-bottom: 8px;
    }

    .topicBullet {
      color: var(--card-color);
      margin-right: 8px;
      font-weight: 700;
    }

    .subjectCardFooter {
      margin-top: auto;
    }

    .exploreButton {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: var(--card-color);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 0.975rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .exploreButton:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .exploreIcon {
      transition: transform 0.2s ease;
    }

    .exploreButton:hover .exploreIcon {
      transform: translateX(4px);
    }

    /** End of Subjects Cards ***/

    /*** Notes and Practice Home Page ***/
    .notesAndPracticeHomeInfoDiv {
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100px 20px;
      background: #f8fafc;
      position: relative;
      overflow: hidden;
    }

    .sectionHeaderStyle {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .sectionTitleStyle {
      font-size: 2.5rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    .sectionSubtitleStyle {
      font-size: 1.25rem;
      color: #64748b;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .featuresGridStyle {
      width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .getFeatureCardStyle {
      background-color: #fff;
      width: 45%;
      max-width: 350px;
      height: 650px;
      border-radius: 24px;
      padding: 48px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      margin: 0 20px;
    }

    .cardHeaderStyle {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 24px;
    }

    .featureTitleStyle {
      font-size: 1.5rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0;
    }

    .featureDescriptionStyle {
      font-size: 1.0625rem;
      line-height: 1.7;
      color: #475569;
      margin-bottom: 32px;
    }

    .featuresListStyle {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 40px;
    }

    .featureItemStyle {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .featureItemTextStyle {
      font-size: 0.9375rem;
      color: #334155;
      font-weight: 500;
    }

    /* End of Notes and Practice Home Page ***/

    /*** Personalized Adaptive Flexible Component ***/
    .pafMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
      position: relative;
      overflow: hidden;
    }

    .pafMainContainer::before {
      content: "";
      position: absolute;
      top: -40%;
      left: -40%;
      width: 180%;
      height: 180%;
      background: radial-gradient(
        circle,
        rgba(139, 92, 246, 0.03) 0%,
        transparent 60%
      );
      animation: pafFloat 25s ease-in-out infinite;
    }

    @keyframes pafFloat {
      0%,
      100% {
        transform: translate(0, 0) rotate(0deg);
      }
      33% {
        transform: translate(30px, -30px) rotate(120deg);
      }
      66% {
        transform: translate(-20px, 20px) rotate(240deg);
      }
    }

    .pafHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pafTitle {
      font-size: 2.5rem;
      font-weight: 800;
      color: #111827;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    .pafSubtitle {
      font-size: 1rem;
      color: #6b7280;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pafFeaturesGrid {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin: 50px auto;
      z-index: 1;
    }

    .pafFeatureCard {
      background: white;
      width: 60%;
      max-width: 400px;
      border-radius: 20px;
      padding: 50px 40px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      cursor: pointer;
      animation: pafSlideUp 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateX(40px);
      margin: 20px auto;
    }

    @keyframes pafSlideUp {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .pafFeatureCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--feature-gradient);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 0;
    }

    .pafFeatureCard::after {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: var(--feature-gradient);
      border-radius: 20px;
      opacity: 0;
      z-index: -1;
      transition: opacity 0.4s ease;
    }

    .pafFeatureCard:hover {
      transform: translateY(-12px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .pafFeatureCard:hover::before {
      opacity: 0.05;
    }

    .pafFeatureCard:hover::after {
      opacity: 0.3;
    }

    .pafFeatureCard:hover .pafIconWrapper {
      transform: scale(1.1) rotate(10deg);
    }

    .pafFeatureCard:hover .pafFeatureTitle {
      color: var(--feature-color);
    }

    .pafCardNumber {
      position: absolute;
      top: 30px;
      right: 30px;
      font-size: 4rem;
      font-weight: 900;
      color: var(--feature-color);
      opacity: 0.1;
      letter-spacing: -0.02em;
      z-index: 1;
    }

    .pafIconWrapper {
      width: 80px;
      height: 80px;
      background: var(--feature-gradient);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      position: relative;
      z-index: 1;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .pafFeatureIcon {
      width: 40px;
      height: 40px;
      color: white;
    }

    .pafFeatureTitle {
      font-size: 1.75rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
    }

    .pafFeatureDescription {
      font-size: 1.125rem;
      line-height: 1.8;
      color: #4b5563;
      margin-bottom: 35px;
      position: relative;
      z-index: 1;
    }

    .pafHighlights {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      z-index: 1;
    }

    .pafHighlightItem {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .pafHighlightDot {
      width: 8px;
      height: 8px;
      background: var(--feature-gradient);
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
    }

    .pafHighlightDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
    }

    .pafHighlightItem span {
      font-size: 1rem;
      color: #374151;
      font-weight: 500;
      line-height: 1.6;
    }
    /* End of Personalized Adaptive Flexible Component ***/

    /*** Pricing Cards Component ***/
    .pcMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
      position: relative;
      overflow: hidden;
    }

    .pcMainContainer::before {
      content: "";
      position: absolute;
      top: -30%;
      right: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(245, 87, 108, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite;
    }

    .pcMainContainer::after {
      content: "";
      position: absolute;
      bottom: -30%;
      left: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(79, 172, 254, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite reverse;
    }

    @keyframes pcFloat {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(50px, -50px) scale(1.1);
      }
    }

    .pcHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pcTitle {
      font-size: 2.5rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
      background: linear-gradient(135deg, #667eea 0%, #f5576c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .pcSubtitle {
      font-size: 1rem;
      color: #64748b;
      max-width: 650px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pcCardsWrapper {
      position: relative;
      z-index: 1;
    }

    .pcCardsGrid {
      display: grid;
      grid-template-columns: repeat(1, 3fr);
      gap: 40px;
      /* max-width: 600px; */
      margin: 0 auto;
      align-items: center;
    }

    .pcCard {
      background: white;
      border-radius: 24px;
      padding: 48px 40px;
      /* position: relative; */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 20px var(--shadow-color);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: pcCardSlide 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateY(40px);
      width: 60%;
      max-width: 400px;
      margin: auto;
    }

    @keyframes pcCardSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pcCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: var(--card-gradient);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .pcCard:hover {
      transform: translateY(-12px);
      box-shadow: 0 20px 40px var(--shadow-color);
    }

    .pcCard:hover::before {
      transform: scaleX(1);
    }

    .pcCard:hover .pcCtaButton {
      transform: scale(1.05);
    }

    .pcCardHighlighted {
      border: 2px solid transparent;
      background: linear-gradient(white, white) padding-box,
        var(--card-gradient) border-box;
      transform: scale(1.05);
    }

    .pcCardHighlighted:hover {
      transform: scale(1.08) translateY(-12px);
    }

    .pcBadge {
      position: absolute;
      top: 0px;
      right: 32px;
      background: var(--card-gradient);
      color: white;
      padding: 6px 20px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      animation: pcBadgePulse 2s ease-in-out infinite;
    }

    @keyframes pcBadgePulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }

    .pcCardHeader {
      text-align: center;
      margin-bottom: 40px;
    }

    .pcPlanName {
      font-size: 1.875rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 20px;
    }

    .pcPriceWrapper {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
      margin-bottom: 16px;
    }

    .pcPrice {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1;
    }

    .pcPeriod {
      font-size: 1.25rem;
      color: #64748b;
      font-weight: 500;
    }

    .pcDescription {
      font-size: 1rem;
      color: #64748b;
      line-height: 1.6;
    }

    .pcFeatures {
      flex-grow: 1;
      margin-bottom: 40px;
    }

    .pcFeaturesList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pcFeatureItem {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pcCheckIcon {
      width: 20px;
      height: 20px;
      color: #10b981;
      flex-shrink: 0;
    }

    .pcFeatureItem span {
      font-size: 0.975rem;
      color: #475569;
      line-height: 1.5;
    }

    .pcCardFooter {
      margin-top: auto;
    }

    .pcCtaButton {
      width: 100%;
      padding: 16px 32px;
      background: #e5e7eb;
      color: #374151;
      border: none;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .pcCtaButton::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--card-gradient);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pcCtaButton:hover {
      background: #d1d5db;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .pcCtaHighlighted {
      background: var(--card-gradient);
      color: white;
    }

    .pcCtaHighlighted:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 24px var(--shadow-color);
    }

    .pcCtaHighlighted:hover::before {
      opacity: 0.2;
    }

    .pcArrowIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .pcCtaButton:hover .pcArrowIcon {
      transform: translateX(4px);
    }

    .pcCardGlow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150%;
      height: 150%;
      background: radial-gradient(
        circle,
        var(--shadow-color) 0%,
        transparent 70%
      );
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .pcCard:hover .pcCardGlow {
      opacity: 0.3;
    }

    .pcFooter {
      text-align: center;
      margin-top: 80px;
      position: relative;
      z-index: 1;
    }

    .pcGuarantee {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 0.975rem;
      color: #64748b;
      background: white;
      padding: 16px 32px;
      border-radius: 50px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .pcShieldIcon {
      width: 24px;
      height: 24px;
      color: #10b981;
    }
    /* End of Pricing Cards Component ***/

    /*** IlearnSTEM Description Component ***/
    .isdMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
      position: relative;
      overflow: hidden;
    }

    .isdContentWrapper {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .isdTextSection {
      animation: isdSlideInLeft 0.8s ease-out;
    }

    @keyframes isdSlideInLeft {
      from {
        opacity: 0;
        transform: translateX(-40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .isdHeaderBadge {
      display: inline-block;
      margin-bottom: 24px;
    }

    .isdHeaderBadge span {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 8px 20px;
      border-radius: 30px;
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .isdTitle {
      font-size: 2.5rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
      margin-bottom: 24px;
      letter-spacing: -0.03em;
    }

    .isdTitleHighlight {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .isdDescription {
      font-size: 1rem;
      line-height: 1.8;
      color: #475569;
      margin-bottom: 40px;
    }

    .isdFeatures {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 48px;
    }

    .isdFeatureItem {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      opacity: 0;
      animation: isdFadeInUp 0.6s ease-out forwards;
      animation-delay: calc(var(--feature-index, 0) * 0.1s);
    }

    .isdFeatureItem:nth-child(1) {
      --feature-index: 0;
    }
    .isdFeatureItem:nth-child(2) {
      --feature-index: 1;
    }
    .isdFeatureItem:nth-child(3) {
      --feature-index: 2;
    }

    @keyframes isdFadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
      from {
        opacity: 0;
        transform: translateY(20px);
      }
    }

    .isdFeatureDot {
      width: 12px;
      height: 12px;
      background: var(--feature-color);
      border-radius: 50%;
      margin-top: 6px;
      flex-shrink: 0;
      position: relative;
    }

    .isdFeatureDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
      animation: isdPulse 2s ease-in-out infinite;
    }

    @keyframes isdPulse {
      0%,
      100% {
        transform: scale(1);
        opacity: 0.2;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.1;
      }
    }

    .isdFeatureContent {
      flex: 1;
    }

    .isdFeatureTitle {
      font-size: 1.125rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .isdFeatureDesc {
      font-size: 0.975rem;
      color: #64748b;
      line-height: 1.5;
    }

    .isdCta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .isdCtaButton {
      padding: 16px 32px;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .isdCtaPrimary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
    }

    .isdCtaPrimary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }

    .isdCtaSecondary {
      background: white;
      color: #475569;
      border: 2px solid #e5e7eb;
    }

    .isdCtaSecondary:hover {
      border-color: #667eea;
      color: #667eea;
      background: #f3f4f6;
    }

    .isdCtaIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
    }

    .isdCtaButton:hover .isdCtaIcon {
      transform: translateX(4px);
    }

    .isdVisualSection {
      position: relative;
      animation: isdSlideInRight 0.8s ease-out;
    }

    @keyframes isdSlideInRight {
      from {
        opacity: 0;
        transform: translateX(40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .isdGraphicContainer {
      position: relative;
      width: 100%;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdFloatingCard {
      position: absolute;
      background: white;
      border-radius: 16px;
      padding: 20px 24px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      color: #1e293b;
      animation: isdFloat 4s ease-in-out infinite;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .isdFloatingCard:hover {
      transform: scale(1.05);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .isdCard1 {
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }

    .isdCard2 {
      top: 60%;
      right: 15%;
      animation-delay: 1.3s;
    }

    .isdCard3 {
      bottom: 20%;
      left: 20%;
      animation-delay: 2.6s;
    }

    @keyframes isdFloat {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    .isdCardIcon {
      width: 32px;
      height: 32px;
      color: #667eea;
    }

    .isdCentralOrb {
      position: relative;
      width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdOrbCore {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%;
      box-shadow: 0 0 60px rgba(102, 126, 234, 0.6);
      animation: isdOrbPulse 3s ease-in-out infinite;
    }

    @keyframes isdOrbPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
    }

    .isdOrbRing {
      position: absolute;
      border: 2px solid rgba(102, 126, 234, 0.2);
      border-radius: 50%;
      animation: isdRingExpand 4s ease-out infinite;
    }

    .isdRing1 {
      width: 120px;
      height: 120px;
      animation-delay: 0s;
    }

    .isdRing2 {
      width: 160px;
      height: 160px;
      animation-delay: 1s;
    }

    .isdRing3 {
      width: 200px;
      height: 200px;
      animation-delay: 2s;
    }

    @keyframes isdRingExpand {
      0% {
        transform: scale(0.8);
        opacity: 1;
      }
      100% {
        transform: scale(1.3);
        opacity: 0;
      }
    }

    .isdStatsSection {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 80px 40px;
      margin-top: 100px;
      position: relative;
      overflow: hidden;
    }

    .isdStatsSection::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .isdStatsGrid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      position: relative;
      z-index: 1;
    }

    .isdStatCard {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      padding: 32px;
      text-align: center;
      transition: all 0.3s ease;
      animation: isdStatSlide 0.8s ease-out forwards;
      animation-delay: var(--stat-delay);
      opacity: 0;
      transform: translateY(30px);
    }

    @keyframes isdStatSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .isdStatCard:hover {
      transform: translateY(-8px);
      background: rgba(255, 255, 255, 0.15);
    }

    .isdStatIconWrapper {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      margin-bottom: 16px;
    }

    .isdStatIcon {
      width: 32px;
      height: 32px;
      color: white;
    }

    .isdStatValue {
      font-size: 2.5rem;
      font-weight: 800;
      color: white;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    .isdStatLabel {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }
    /* End of IlearnSTEM Description Component ***/

    /*** Default Home Footer Component ***/
    .dhfMainContainer {
      width: 100%;
      background: #0f172a;
      position: relative;
      overflow: hidden;
      margin-top: 100px;
    }

    /* Partners Section */
    .dhfPartnersSection {
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      padding: 80px 40px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dhfPartnersWrapper {
      max-width: 1400px;
      margin: 0 auto;
    }

    .dhfPartnersTitle {
      text-align: center;
      font-size: 2rem;
      font-weight: 700;
      color: white;
      margin-bottom: 50px;
      opacity: 0;
      animation: dhfFadeInDown 0.8s ease-out forwards;
    }

    @keyframes dhfFadeInDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dhfPartnersGrid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 40px;
      align-items: center;
    }

    .dhfPartnerCard {
      text-align: center;
      opacity: 0;
      animation: dhfPartnerSlide 0.6s ease-out forwards;
      animation-delay: var(--partner-delay);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    @keyframes dhfPartnerSlide {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dhfPartnerCard:hover {
      transform: translateY(-5px);
    }

    .dhfPartnerLogo {
      width: 80px;
      height: 80px;
      margin: 0 auto 16px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
    }

    .dhfPartnerCard:hover .dhfPartnerLogo {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .dhfPartnerInitial {
      font-size: 1.5rem;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: -0.02em;
    }

    .platinumPartner .dhfPartnerInitial {
      color: #e5e7eb;
    }
    .goldPartner .dhfPartnerInitial {
      color: #fbbf24;
    }
    .silverPartner .dhfPartnerInitial {
      color: #9ca3af;
    }

    .dhfPartnerName {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 4px;
    }

    .dhfPartnerLevel {
      display: block;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Main Footer Content */
    .dhfContentSection {
      padding: 80px 40px 40px;
      position: relative;
      z-index: 1;
    }

    .dhfContentWrapper {
      max-width: 1400px;
      margin: 0 auto;
    }

    .dhfTopSection {
      display: grid;
      grid-template-columns: 2fr 3fr;
      gap: 80px;
      margin-bottom: 80px;
    }

    /* Brand Column */
    .dhfBrandColumn {
      opacity: 0;
      animation: dhfSlideInLeft 0.8s ease-out 0.2s forwards;
    }

    @keyframes dhfSlideInLeft {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .dhfLogo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }

    .dhfLogoIcon {
      width: 40px;
      height: 40px;
      color: #667eea;
    }

    .dhfLogoText {
      font-size: 1.5rem;
      font-weight: 700;
      color: white;
      letter-spacing: -0.02em;
    }

    .dhfBrandDesc {
      font-size: 13px;
      line-height: 1.7;
      color: #94a3b8;
      margin-bottom: 32px;
      max-width: 400px;
    }

    .dhfNewsletterForm {
      display: flex;
      gap: 12px;
      max-width: 400px;
    }

    .dhfNewsletterInput {
      flex: 1;
      padding: 10px 20px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      color: white;
      font-size: 0.75rem;
      transition: all 0.3s ease;
    }

    .dhfNewsletterInput::placeholder {
      color: #64748b;
    }

    .dhfNewsletterInput:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.08);
      border-color: #667eea;
    }

    .dhfNewsletterButton {
      padding: 14px 24px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .dhfNewsletterButton:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    }

    .dhfNewsletterIcon {
      width: 16px;
      height: 16px;
    }

    /* Links Grid */
    .dhfLinksGrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      opacity: 0;
      animation: dhfSlideInRight 0.8s ease-out 0.4s forwards;
    }

    @keyframes dhfSlideInRight {
      from {
        opacity: 0;
        transform: translateX(30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .dhfLinkColumn {
      display: flex;
      flex-direction: column;
    }

    .dhfLinkColumnTitle {
      font-size: 0.8rem;
      font-weight: 700;
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 20px;
    }

    .dhfLinkList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dhfLinkItem {
      position: relative;
    }

    .dhfLink {
      color: #94a3b8;
      text-decoration: none;
      font-size: 13px;
      transition: all 0.3s ease;
      position: relative;
      display: inline-block;
    }

    .dhfLink::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: #667eea;
      transition: width 0.3s ease;
    }

    .dhfLink:hover {
      color: white;
    }

    .dhfLink:hover::after {
      width: 100%;
    }

    /* Bottom Section */
    .dhfBottomSection {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 40px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      opacity: 0;
      animation: dhfFadeInUp 0.8s ease-out 0.6s forwards;
    }

    @keyframes dhfFadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dhfCopyright p {
      color: #94a3b8;
      font-size: 0.875rem;
      margin: 0;
    }

    .dhfTagline {
      margin-top: 4px;
      font-size: 0.75rem;
      color: #64748b;
    }

    .dhfSocialLinks {
      display: flex;
      gap: 16px;
    }

    .dhfSocialLink {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .dhfSocialLink:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: #667eea;
      transform: translateY(-3px);
    }

    .dhfSocialIcon {
      width: 20px;
      height: 20px;
      color: #94a3b8;
      transition: color 0.3s ease;
    }

    .dhfSocialLink:hover .dhfSocialIcon {
      color: white;
    }

    /* Decorative Elements */
    .dhfDecorativeGradient {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        #667eea 50%,
        transparent 100%
      );
      opacity: 0.5;
    }

    .dhfFloatingOrbs {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .dhfOrb {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(102, 126, 234, 0.1) 0%,
        transparent 70%
      );
      filter: blur(40px);
    }

    .dhfOrb1 {
      width: 400px;
      height: 400px;
      top: -200px;
      right: -200px;
      animation: dhfOrbFloat1 20s ease-in-out infinite;
    }

    .dhfOrb2 {
      width: 300px;
      height: 300px;
      bottom: -150px;
      left: -150px;
      animation: dhfOrbFloat2 25s ease-in-out infinite;
    }

    .dhfOrb3 {
      width: 250px;
      height: 250px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: dhfOrbFloat3 30s ease-in-out infinite;
    }

    @keyframes dhfOrbFloat1 {
      0%,
      100% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(-100px, 50px);
      }
    }

    @keyframes dhfOrbFloat2 {
      0%,
      100% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(50px, -100px);
      }
    }

    @keyframes dhfOrbFloat3 {
      0%,
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
      }
    }
    /* End of Default Home Footer Component ***/

    .settingsDiv {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-top: 50px;
      padding-top: 5rem;
    }

    .settingsBack {
      position: absolute;
      left: 1.5rem;
      top: 5rem;
      color: #122e3b;
    }

    .settingsBack:hover {
      cursor: pointer;
    }

    .settingsTopDiv {
      width: 550px;
      padding: 5px 20px;
    }

    .curriculumCountryDiv {
      margin: 20px auto;
    }

    .curriculumCountryDropDown,
    .curriculumProvinceOrStateDropDown,
    .notesOrPracticeSelect {
      display: flex;
      flex-direction: row;
      width: 150px;
      height: 1.5rem;
      align-items: center;
      color: #aeaeae;
      margin: 0px 10px;
      border: 0.3px solid #aeaeae;
      font-size: 0.8rem;
    }

    .settingsSubjectsDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 2rem;
    }

    .settingsSubjectsDiv button {
      width: 115px;
      height: 115px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #122e3b;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
    }

    .settingsPhysicsButton {
      background-color: rgba(153, 217, 255, 0.5);
    }

    .settingsChemistryButton {
      background: rgba(0, 128, 128, 0.15);
      margin: 0 1rem;
    }

    .settingsEarthAndSpaceSciencesButton {
      background: rgba(255, 255, 0, 0.5);
    }

    .settingsMathematicsButton1,
    .settingsMathematicsButton2 {
      background: rgba(132, 31, 39, 0.25);
    }

    .settingsMathematicsButton2 {
      margin: 0 1rem;
    }

    .settingsSubjectsDiv button:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .otherSubjectDropDownDiv {
      width: 115px;
      height: 115px;
      justify-content: center;
      align-items: center;
      background-color: rgba(197, 205, 216, 1);
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-left: 20px;
    }

    .otherSubjectSelect {
      background-color: inherit;
      width: 95px;
      height: 35px;
      border: none;
      outline: none;
    }

    .otherSubjectDropDownDiv:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .settingsTopicsMainDiv {
      width: 100%;
      margin-top: 50px;
    }

    .settingsTopicsMainDiv h3 {
      color: #122e3b;
    }

    .settingsTopicsMainDiv span {
      color: #ffb038;
    }

    .settingsGradeLevelAndCurriculaMainDiv {
      width: 85%;
      margin: 50px auto;
    }

    .settingsGradeLevelSelect {
      height: 35px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 1rem;
    }

    .settingsCurriculumSelect {
      width: 50%;
      height: 35px;
      margin: 0px 30px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 1rem;
    }

    .settings_strand_div,
    .settings_strand_div1 {
      width: 45%;
      min-width: 800px;
      padding: 50px;
      margin: 20px auto;
    }

    .settings_strand_subtrand_p_div {
      width: 100%;
      cursor: pointer;
    }

    .settings_strand_subtrand_p_div:hover {
      background-color: #f0f0f0;
      text-decoration: underline;
    }

    .settings_strand_subtrand_p_div_p1 {
      font-weight: 600;
      margin-left: 50px;
      width: 80%;
      margin-top: 50px;
    }

    .settings_strand_substrand_p_div_p2 {
      margin-left: 100px;
      margin-top: 25px;
    }

    /* .navBarDropDownDiv {
      display: none;
    }

    .navBarDropDownSelections {
      display: none;
    }

    .navBarDropDownSelections option {
      display: none;
    } */

    .dashboardMainContentDiv {
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .dashboardSideOrTopDiv {
      display: none;
    }

    .dashboardTopHeaderDiv {
      width: 80%;
      height: 100px;
      background-color: #b5c5cd;
      margin-bottom: 20px;
      position: absolute;
      top: 100px;
    }

    .dashboardTopHeaderTopDiv {
      width: 100%;
      color: #122e3b;
      margin-top: 10px;
    }

    .dashboardScreenSelectionsSelect {
      background-color: #b5c5cd;
      color: #122e3b;
      border: none;
    }

    .navLoginSignUpDiv {
      display: none;
    }

    /* Default Settings Styles */
    .defaultSettingsContainer {
      min-height: calc(100vh - 50px);
      margin-top: 50px;
      background-color: #f5f7fa;
      padding: 20px;
    }

    .defaultSettingsHeader {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .defaultSettingsBackButton {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #1976d2;
      text-decoration: none;
      font-weight: 500;
      transition: all 0.3s ease;
    }

    .defaultSettingsBackButton:hover {
      color: #1565c0;
      transform: translateX(-5px);
    }

    .defaultSettingsTitle {
      font-size: 32px;
      color: #1a237e;
      margin: 0;
      font-weight: 700;
    }

    .defaultSettingsCard {
      max-width: 1200px;
      margin: 0 auto 40px;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      padding: 30px;
    }

    .defaultSettingsRow {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 30px;
      margin-bottom: 40px;
    }

    .defaultSettingsSection {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .defaultSettingsLabel {
      font-size: 14px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .defaultSettingsCountrySelect {
      display: flex;
      gap: 12px;
    }

    .defaultSettingsCountryOption {
      flex: 1;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }

    .defaultSettingsCountryActive {
      border-color: #1976d2;
      background-color: #e3f2fd;
    }

    .defaultSettingsCountryDisabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .defaultSettingsFlag {
      font-size: 24px;
    }

    .defaultSettingsComingSoon {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #ff6b6b;
      color: white;
      font-size: 10px;
      padding: 4px 8px;
      border-radius: 12px;
      font-weight: 600;
    }

    .defaultSettingsProvinceBox {
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f8fafc;
      font-weight: 500;
    }

    .defaultSettingsProvinceIcon {
      font-size: 20px;
    }

    .defaultSettingsModeToggle {
      display: flex;
      background: #f1f5f9;
      border-radius: 12px;
      padding: 4px;
    }

    .defaultSettingsModeButton {
      flex: 1;
      padding: 12px 24px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-weight: 500;
      border-radius: 8px;
      transition: all 0.3s ease;
      color: #64748b;
    }

    .defaultSettingsModeActive {
      background: white;
      color: #1976d2;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectSection {
      margin-bottom: 30px;
    }

    .defaultSettingsSectionTitle {
      font-size: 20px;
      color: #334155;
      margin-bottom: 20px;
      font-weight: 600;
    }

    .defaultSettingsSubjectGrid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }

    .defaultSettingsSubjectCard {
      padding: 20px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      background: white;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    .defaultSettingsSubjectCard:hover {
      border-color: var(--subject-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectActive {
      border-color: var(--subject-color);
      background: linear-gradient(to bottom, white, rgba(33, 150, 243, 0.05));
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectIcon {
      font-size: 32px;
    }

    .defaultSettingsSubjectName {
      font-weight: 600;
      color: #334155;
      font-size: 16px;
    }

    .defaultSettingsSubjectGrades {
      font-size: 12px;
      color: #94a3b8;
    }

    .defaultSettingsGradeSection {
      border-top: 1px solid #e5e7eb;
      padding-top: 30px;
    }

    .defaultSettingsGradeRow {
      display: flex;
      gap: 20px;
    }

    .defaultSettingsGradeSelect,
    .defaultSettingsCurriculumSelect {
      flex: 1;
    }

    .defaultSettingsSelect {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: border-color 0.3s ease;
    }

    .defaultSettingsSelect:hover,
    .defaultSettingsSelect:focus {
      border-color: #1976d2;
      outline: none;
    }

    .defaultSettingsTopicsSection {
      max-width: 1200px;
      margin: 0 auto;
    }

    .defaultSettingsTopicsTitle {
      font-size: 24px;
      color: #1a237e;
      margin-bottom: 20px;
      text-align: center;
    }

    .defaultSettingsPracticeAllButton {
      display: block;
      margin: 0 auto 30px;
      padding: 12px 32px;
      background: #1976d2;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultSettingsPracticeAllButton:hover {
      background: #1565c0;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
    }

    .defaultSettingsTopicsList {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .defaultSettingsStrandCard {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .defaultSettingsStrandCard:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsStrandHeader {
      padding: 20px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      background: linear-gradient(to right, #f8fafc, #f1f5f9);
    }

    .defaultSettingsStrandTitle {
      font-size: 18px;
      color: #334155;
      margin: 0;
      font-weight: 600;
    }

    .defaultSettingsStrandActions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .defaultSettingsPracticeButton {
      padding: 8px 20px;
      background: #1976d2;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultSettingsPracticeButton:hover {
      background: #1565c0;
    }

    .defaultSettingsExpandIcon {
      color: #64748b;
      transition: transform 0.3s ease;
    }

    .defaultSettingsSubstrands {
      padding: 0 24px 20px;
      animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .defaultSettingsSubstrand {
      margin-top: 20px;
      padding-left: 20px;
      border-left: 3px solid #e5e7eb;
    }

    .defaultSettingsSubstrandTitle {
      font-size: 16px;
      color: #475569;
      margin: 0 0 12px;
      font-weight: 600;
    }

    .defaultSettingsTopicItem {
      padding: 12px 16px;
      margin: 8px 0;
      background: #f8fafc;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .defaultSettingsTopicItem:hover {
      background: #e3f2fd;
      transform: translateX(4px);
    }

    .defaultSettingsTopicCode {
      font-weight: 600;
      color: #1976d2;
      font-size: 14px;
    }

    .defaultSettingsTopicName {
      color: #334155;
      font-size: 15px;
    }
    /* End of Default Settings Component - Landscape */

    /* Default Upgrade Modal - Landscape */
    .defaultUpgradeModal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      animation: fadeIn 0.3s ease-out;
    }

    .defaultUpgradeModalContent {
      background: #ffffff;
      border-radius: 20px;
      padding: 40px;
      max-width: 600px;
      width: 90%;
      position: relative;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      animation: slideUp 0.3s ease-out;
      text-align: center;
    }

    .defaultCloseModalButton {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      color: #64748b;
      cursor: pointer;
      padding: 8px;
      border-radius: 8px;
      transition: all 0.2s;
    }

    .defaultCloseModalButton:hover {
      background: #f1f5f9;
      color: #475569;
    }

    .defaultUpgradeIcon {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px;
      color: white;
      font-size: 40px;
      box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.3);
    }

    .defaultUpgradeModalContent h2 {
      color: #1e293b;
      font-size: 28px;
      margin-bottom: 16px;
      font-weight: 700;
    }

    .defaultUpgradeModalContent p {
      color: #64748b;
      font-size: 16px;
      margin-bottom: 12px;
      line-height: 1.5;
    }

    .defaultUpgradeOptions {
      display: flex;
      gap: 20px;
      margin: 30px 0;
      justify-content: center;
    }

    .defaultUpgradeButton {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 16px;
      padding: 24px;
      flex: 1;
      max-width: 200px;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .defaultUpgradeButton:hover {
      border-color: #3b82f6;
      transform: translateY(-4px);
      box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2);
    }

    .defaultUpgradeButton i {
      font-size: 36px;
      color: #3b82f6;
    }

    .defaultUpgradeButton span {
      font-size: 18px;
      font-weight: 600;
      color: #1e293b;
    }

    .defaultUpgradeButton small {
      font-size: 14px;
      color: #64748b;
    }

    .defaultStudentPlan i {
      color: #8b5cf6;
    }

    .defaultFamilyPlan i {
      color: #10b981;
    }

    .defaultContinueTomorrowButton {
      background: none;
      border: none;
      color: #64748b;
      font-size: 16px;
      cursor: pointer;
      text-decoration: underline;
      padding: 10px 20px;
      margin-top: 10px;
      transition: color 0.2s;
    }

    .defaultContinueTomorrowButton:hover {
      color: #475569;
    }

    .defaultQuestionLimit {
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      border: 1px solid #fbbf24;
      color: #92400e;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes slideUp {
      from {
        transform: translateY(20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    /* End of Default Upgrade Modal - Landscape */

    /* Subscription Status in Dashboard */
    .defaultSubscriptionSection {
      margin-bottom: 2rem;
      max-width: 400px;
    }

    /* Subscription Status in NavBar */
    .navbar1-subscription {
      margin-right: 1rem;
    }

  }

  /** media screen and (min-width: 768px) and (max-width: 1024px) **/
  
}/*** default Landsape ***/



@media screen and (orientation: portrait) {
  /* ----- Portrait mode ----- */
  /* Mobile - Portrait */

  .loginDiv,
  .registrationDiv {
    width: 100%;
    margin-top: 15vh;
  }

  .registrationSelect {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    outline: none;
    border: none;
    background-color: #3aa9e826;
  }

  .loginHeading {
    text-align: center;
  }

  .loginHeading span {
    color: #3aa9e8;
  }

  .googleSignInDiv {
    width: 150px;
    height: 44px;
    background-color: #b5c5cd;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 2rem;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 25px;
  }

  .googleSignInDiv:hover {
    background-color: #122e3b;
  }

  .loginCard {
    width: 300px;
    height: 400px;
    border-radius: 20px;
    background: #ffffff;
    border: 0.3px solid #b5c5cd;
  }

  .emailLabel,
  .passwordLabel {
    width: 250px;
    font-size: 12px;
  }

  .loginTelescopeDiv {
    width: 100%;
  }

  .loginTelescope {
    opacity: 0.9;
  }

  .registrationCard {
    width: 300px;
    border-radius: 20px;
    background: #ffffff;
    border: 0.3px solid #b5c5cd;
    padding: 10px 5px;
  }

  .loginCardInputDiv input,
  .registrationDiv input {
    background-color: #b5c5cd;
    width: 250px;
    height: 40px;
    margin-bottom: 10px;
    border: none;
    padding-left: 10px;
    margin-bottom: 20px;
  }

  .loginCardButton,
  .registrationButton {
    background-color: #122e3b;
    width: 175px;
    height: 40px;
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
    margin-top: 20px;
    font-size: 12px;
  }

  .orLoginRegisterDiv {
    margin: 20px auto;
  }

  .orLoginButton {
    width: 150px;
    height: 40px;
    background-color: #ffb038;
    color: #fff;
    font-weight: 500;
    margin-top: 20px;
    border-radius: 5px;
  }

  .googleLoginDiv {
    width: 250px;
    margin-top: 10px;
    justify-content: space-around;
    align-items: center;
  }

  /**** Dashboard ****/
  .dashboardMainDiv {
    margin-top: 60px;
    width: 100%;
    min-height: calc(100vh - 60px);
  }

  .dashboardTopDiv {
    width: 90%;
    padding-right: 5px;
  }

  .dashboardTopDiv span {
    font-size: 1rem;
    color: #122e3b;
    font-weight: 400;
  }

  .dashboardMainContentDiv {
    min-height: calc(100vh - 160px);
    width: 90%;
    background-color: #f3f3f3;
    flex-direction: column;
  }

  .dashboardSideOrTopDiv {
    display: none;
  }

  .dashboardTopHeaderDiv {
    width: 100%;
    height: 100px;
    background-color: #b5c5cd;
  }

  .dashboardTopHeaderTopDiv {
    width: 100%;
    color: #122e3b;
  }

  .dashboardScreenSelectionsSelect {
    margin-top: 20px;
    background-color: #b5c5cd;
    color: #122e3b;
    border: none;
  }

  .dashboardContentDiv {
    width: 100%;
    margin-top: 20px;
  }

  .dashboardContentProfileDiv {
    width: 100%;
  }

  .dashboardContentProfileDiv div {
    width: 300px;
    color: #434343;
    font-size: 16px;
    margin-bottom: 20px;
  }

  .editButton,
  .editProfileButton {
    background-color: #122e3b;
    color: #fff;
  }

  .dashboardContentRosterDiv {
    width: 90%;
    border: #b5c5cd 1px solid;
  }

  .childrenRosterHeader {
    width: 100%;
    background-color: #b5c5cd;
    color: #fff;
  }

  .childrenRosterHeader div,
  .childrenRosterContent div {
    flex: 1;
    justify-content: center;
    padding: 10px;
  }

  .childrenRosterContent {
    width: 100%;
    border-top: #b5c5cd 1px solid;
  }

  .childrenRosterContent div:hover {
    background-color: #3aa9e8;
    color: #fff;
    cursor: pointer;
  }

  /*** End of Dashboard ***/

  .privacyPolicyDiv,
  .termsOfServiceDiv {
    width: 100%;
    min-height: calc(100vh - 50px);
    margin-top: 50px;
    background-color: #122e3b;
    color: #fff;
    padding: 20px 50px;
  }

  /* NavBar1 Styles */
  .navbar1 {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    z-index: 1000;
  }

  .navbar1-scrolled {
    height: 64px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
  }

  .navbar1-container {
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Logo Section */
  .navbar1-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-logo:hover {
    transform: translateX(2px);
  }

  .navbar1-logo-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.25);
  }

  .navbar1-logo-text {
    color: white;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
  }

  .navbar1-logo-name {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.5px;
  }

  /* Desktop Navigation */
  .navbar1-desktop {
    display: flex;
    align-items: center;
    gap: 32px;
    flex: 1;
    justify-content: flex-end;
  }

  /* Version Toggle */
  .navbar1-version-toggle {
    display: flex;
    background: #f1f5f9;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
  }

  .navbar1-version-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-version-btn:hover {
    color: #475569;
  }

  .navbar1-version-btn.active {
    background: white;
    color: #1e293b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .navbar1-version-icon {
    font-size: 16px;
  }

  /* Navigation Items */
  .navbar1-nav-items {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .navbar1-nav-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-nav-btn:hover {
    background: #f8fafc;
    color: #1e293b;
  }

  .navbar1-nav-btn i {
    font-size: 20px;
  }

  /* Auth Section */
  .navbar1-auth {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .navbar1-login-btn {
    padding: 8px 20px;
    border: 2px solid #e2e8f0;
    background: transparent;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-login-btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .navbar1-signup-btn {
    padding: 8px 20px;
    border: none;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.25);
  }

  .navbar1-signup-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.35);
  }

  /* Profile Section */
  .navbar1-profile {
    position: relative;
  }

  .navbar1-profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: none;
    background: #f8fafc;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-profile-btn:hover {
    background: #f1f5f9;
  }

  .navbar1-avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
  }

  .navbar1-username {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar1-profile-btn i {
    font-size: 20px;
    color: #64748b;
  }

  /* Profile Dropdown */
  .navbar1-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    animation: dropdownSlide 0.3s ease;
  }

  @keyframes dropdownSlide {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .navbar1-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
  }

  .navbar1-dropdown-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
  }

  .navbar1-dropdown-info {
    flex: 1;
    overflow: hidden;
  }

  .navbar1-dropdown-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar1-dropdown-email {
    margin: 2px 0 0;
    font-size: 13px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .navbar1-dropdown-divider {
    height: 1px;
    background: #e2e8f0;
  }

  .navbar1-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
  }

  .navbar1-dropdown-item:hover {
    background: #f8fafc;
    color: #1e293b;
  }

  .navbar1-dropdown-item i {
    font-size: 20px;
    color: #64748b;
  }

  .navbar1-logout {
    color: #dc2626;
  }

  .navbar1-logout i {
    color: #dc2626;
  }

  .navbar1-logout:hover {
    background: #fef2f2;
    color: #b91c1c;
  }

  /* Mobile Toggle */
  .navbar1-mobile-toggle {
    display: none;
    padding: 8px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-mobile-toggle:hover {
    background: #f8fafc;
  }

  .navbar1-mobile-toggle i {
    font-size: 24px;
    color: #475569;
  }

  /* Mobile Menu */
  .navbar1-mobile-menu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    overflow-y: auto;
    animation: mobileSlide 0.3s ease;
  }

  .navbar1-scrolled .navbar1-mobile-menu {
    top: 64px;
  }

  @keyframes mobileSlide {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(0);
    }
  }

  .navbar1-mobile-version {
    display: flex;
    gap: 8px;
    padding: 16px;
  }

  .navbar1-mobile-version-btn {
    flex: 1;
    padding: 12px;
    border: 2px solid #e2e8f0;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .navbar1-mobile-version-btn.active {
    background: #f8fafc;
    border-color: #2196f3;
    color: #2196f3;
  }

  .navbar1-mobile-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 8px 0;
  }

  .navbar1-mobile-item {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 24px;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
  }

  .navbar1-mobile-item:hover {
    background: #f8fafc;
    color: #1e293b;
  }

  .navbar1-mobile-item i {
    font-size: 24px;
    color: #64748b;
  }

  .navbar1-mobile-signup {
    background: #f0f9ff;
    color: #2196f3;
  }

  .navbar1-mobile-signup i {
    color: #2196f3;
  }

  .navbar1-mobile-logout {
    color: #dc2626;
  }

  .navbar1-mobile-logout i {
    color: #dc2626;
  }

  .navbar1-mobile-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: #f8fafc;
  }

  .navbar1-mobile-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
  }

  .navbar1-mobile-user-info {
    flex: 1;
    overflow: hidden;
  }

  .navbar1-mobile-user-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
  }

  .navbar1-mobile-user-email {
    margin: 2px 0 0;
    font-size: 13px;
    color: #64748b;
  }

  /* Spacer */
  .navbar1-spacer {
    height: 70px;
  }

  .navbar1-scrolled + .navbar1-spacer {
    height: 64px;
  }

  /* Kids Theme Override */
  .navbar1-kids .navbar1-logo-icon {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
  }

  .navbar1-kids .navbar1-version-btn.active {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #d97706;
  }

  .navbar1-kids .navbar1-signup-btn {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.25);
  }

  .navbar1-kids .navbar1-signup-btn:hover {
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
  }

  .navbar1-kids .navbar1-avatar,
  .navbar1-kids .navbar1-dropdown-avatar,
  .navbar1-kids .navbar1-mobile-avatar {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  }

  .navbar1-kids .navbar1-mobile-version-btn.active {
    border-color: #f97316;
    color: #f97316;
  }

  .navbar1-kids .navbar1-mobile-signup {
    background: #fff7ed;
    color: #f97316;
  }

  .navbar1-kids .navbar1-mobile-signup i {
    color: #f97316;
  }

  /* Default Practice Questions Page Styles */
  .defaultPracticeContainer {
    position: relative;
    min-height: 100vh;
    background: #f8fafc;
    overflow-x: hidden;
  }

  /* Animated Background */
  .defaultPracticeBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }

  .defaultFloatingShape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.05;
    animation: defaultFloat 20s ease-in-out infinite;
  }

  .defaultShape1 {
    width: 300px;
    height: 300px;
    background: #2196f3;
    top: 10%;
    left: -150px;
    animation-duration: 25s;
  }

  .defaultShape2 {
    width: 200px;
    height: 200px;
    background: #9c27b0;
    bottom: 20%;
    right: -100px;
    animation-duration: 30s;
    animation-delay: 5s;
  }

  .defaultShape3 {
    width: 150px;
    height: 150px;
    background: #ff5722;
    top: 50%;
    right: 10%;
    animation-duration: 35s;
    animation-delay: 10s;
  }

  @keyframes defaultFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(30px, -30px) rotate(90deg);
    }
    50% {
      transform: translate(-20px, 20px) rotate(180deg);
    }
    75% {
      transform: translate(40px, -10px) rotate(270deg);
    }
  }

  /* Header Section */
  .defaultPracticeHeader {
    position: relative;
    z-index: 10;
    background: white;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
  }

  .defaultHeaderLeft,
  .defaultHeaderRight {
    flex: 0 0 auto;
  }

  .defaultHeaderCenter {
    flex: 1;
    text-align: center;
  }

  .defaultSettingsButton,
  .defaultExitButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultSettingsButton {
    background: #f1f5f9;
    color: #475569;
  }

  .defaultSettingsButton:hover {
    background: #e2e8f0;
    color: #334155;
  }

  .defaultExitButton {
    background: #fee2e2;
    color: #dc2626;
  }

  .defaultExitButton:hover {
    background: #fecaca;
    color: #b91c1c;
  }

  .defaultSubjectInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
  }

  .defaultSubjectIcon {
    font-size: 32px;
  }

  .defaultSubjectName {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
  }

  .defaultGradeLevel {
    background: #e0f2fe;
    color: #0369a1;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
  }

  .defaultTopicName {
    margin: 0;
    font-size: 16px;
    color: #64748b;
  }

  /* Settings Panel */
  .defaultSettingsPanel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
  }

  .defaultSettingsPanelContent {
    background: white;
    border-radius: 16px;
    padding: 32px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
  }

  .defaultSettingsPanelContent h3 {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
  }

  .defaultSettingGroup {
    margin-bottom: 24px;
  }

  .defaultSettingGroup label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #475569;
  }

  .defaultModeButtons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .defaultModeButton {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultModeButton:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .defaultModeButton.active {
    border-color: #2196f3;
    background: #eff6ff;
    color: #2196f3;
  }

  .defaultModeButton i {
    font-size: 24px;
  }

  .defaultDifficultySelect {
    width: 100%;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    background: white;
    cursor: pointer;
  }

  .defaultToggleOptions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .defaultToggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
  }

  .defaultToggle input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .defaultSettingsActions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
  }

  .defaultActionButton {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultRestartButton {
    background: #fef3c7;
    color: #d97706;
  }

  .defaultRestartButton:hover {
    background: #fde68a;
  }

  .defaultCloseButton {
    background: #f3f4f6;
    color: #6b7280;
  }

  .defaultCloseButton:hover {
    background: #e5e7eb;
  }

  /* Progress Section */
  .defaultProgressSection {
    padding: 0 40px;
    margin-bottom: 16px;
    position: relative;
    z-index: 10;
  }

  .defaultProgressBar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }

  .defaultProgressFill {
    height: 100%;
    background: #2196f3;
    transition: width 0.5s ease;
    position: relative;
  }

  .defaultProgressText {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    font-weight: 600;
    color: white;
  }

  /* Stats Bar */
  .defaultStatsBar {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 16px 40px;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 32px;
    position: relative;
    z-index: 10;
  }

  .defaultStatItem {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #64748b;
  }

  .defaultStatItem i {
    font-size: 20px;
  }

  /* Question Section */
  .defaultQuestionSection {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 10;
  }

  .defaultQuestionHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .defaultQuestionNumber {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: white;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .defaultQuestionLabel {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
  }

  .defaultQuestionValue {
    font-size: 36px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
  }

  .defaultQuestionActions {
    display: flex;
    gap: 12px;
  }

  .defaultHintButton,
  .defaultFormulaButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultHintButton:hover:not(:disabled),
  .defaultFormulaButton:hover {
    border-color: #2196f3;
    color: #2196f3;
    background: #eff6ff;
  }

  .defaultHintButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Hint and Formula Boxes */
  .defaultHintBox,
  .defaultFormulaBox {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-bottom: 24px;
    border-radius: 8px;
    animation: slideDown 0.3s ease;
  }

  .defaultHintBox {
    background: #fef3c7;
    border: 1px solid #fde68a;
    color: #92400e;
  }

  .defaultFormulaBox {
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    color: #075985;
  }

  .defaultHintBox i,
  .defaultFormulaBox i {
    font-size: 20px;
    margin-top: 2px;
  }

  /* Question Content */
  .defaultQuestionContent {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
  }

  .defaultCanvasContainer {
    text-align: center;
    margin-bottom: 24px;
  }

  #physics_canvas {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 16px;
  }

  .defaultDemoButton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: #2196f3;
    color: white;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultDemoButton:hover {
    background: #1976d2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
  }

  .defaultQuestionText {
    font-size: 18px;
    line-height: 1.8;
    color: #334155;
    margin-bottom: 32px;
  }

  /* Answer Options */
  .defaultAnswerOptions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .defaultAnswerOption {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

  .defaultAnswerOption:hover:not(.correct):not(.incorrect) {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .defaultAnswerOption.correct {
    border-color: #10b981;
    background: #ecfdf5;
  }

  .defaultAnswerOption.incorrect {
    border-color: #ef4444;
    background: #fef2f2;
  }

  .defaultAnswerOption input[type="radio"] {
    position: absolute;
    opacity: 0;
  }

  .defaultRadioButton {
    width: 24px;
    height: 24px;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    margin-right: 16px;
    position: relative;
    flex-shrink: 0;
  }

  .defaultAnswerOption input[type="radio"]:checked ~ .defaultRadioButton {
    border-color: #2196f3;
  }

  .defaultAnswerOption
    input[type="radio"]:checked
    ~ .defaultRadioButton::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    background: #2196f3;
    border-radius: 50%;
  }

  .defaultAnswerText {
    font-size: 16px;
    color: #334155;
    flex: 1;
  }

  .defaultAnswerUnits {
    color: #64748b;
    font-style: italic;
  }

  .defaultCorrectIcon {
    margin-left: auto;
    color: #10b981;
    font-size: 24px;
  }

  /* Submit Section */
  .defaultSubmitSection {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
  }

  .defaultSubmitButton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 48px;
    border: none;
    border-radius: 12px;
    background: #10b981;
    color: white;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultSubmitButton:hover:not(:disabled) {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
  }

  .defaultSubmitButton:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  /* Navigation Section */
  .defaultNavigationSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
  }

  .defaultNavButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 16px;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultNavButton:hover:not(:disabled) {
    border-color: #2196f3;
    color: #2196f3;
    background: #eff6ff;
  }

  .defaultNavButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .defaultQuestionIndicators {
    display: flex;
    gap: 8px;
  }

  .defaultQuestionIndicator {
    width: 40px;
    height: 40px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 16px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultQuestionIndicator:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
  }

  .defaultQuestionIndicator.active {
    border-color: #2196f3;
    background: #2196f3;
    color: white;
  }

  .defaultQuestionIndicator.completed {
    border-color: #10b981;
    background: #ecfdf5;
    color: #10b981;
  }

  /* Explanation */
  .defaultExplanation {
    text-align: center;
  }

  .defaultExplanation p {
    margin: 0 0 12px;
    font-size: 16px;
    color: #64748b;
  }

  .defaultCorrectAnswerDisplay {
    font-size: 20px;
    font-weight: 600;
    color: #10b981;
  }

  .defaultCorrectAnswer {
    color: #2196f3;
    font-weight: 600;
  }

  /* Animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideDown {
    from {
      transform: translateY(-10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* End of Default Practice Questions Page Styles */

  @media screen and (min-width: 320px) and (max-width: 767px) {
    /* CSS styles for mobile portrait go here */
    .topNav {
      height: 50px;
      width: 100%;
      background: #122e3b;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logoDiv {
      width: 33%;
      display: flex;
      justify-content: flex-start;
      padding-left: 1rem;
    }

    .logo {
      display: flex;
      flex-direction: row;
      font-size: 0.75rem;
    }

    .logo:hover {
      opacity: 0.7;
      cursor: pointer;
    }

    .logoI {
      display: flex;
      flex-direction: column;
      width: 0.2rem;
      height: 0.9rem;
      position: relative;
      top: 0.1rem;
    }

    .logoITop {
      width: 0.2rem;
      height: 20%;
      background-color: #5e5656;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      position: relative;
      top: 1px;
    }

    .logoIMiddle {
      width: inherit;
      height: 60%;
      border-radius: 2px;
      background-color: #fffa83;
      z-index: 1;
    }

    .logoIBottom {
      display: inline;
      width: inherit;
      height: 20%;
      margin-top: 0;
      background-color: #e05d5d;
      clip-path: ellipse(45% 45% at 50% 50%);
      position: relative;
      top: -2.5px;
    }

    .logoLearn {
      color: #fff;
    }

    .logoS {
      color: #ffb038;
      font-weight: 900;
    }

    .logoT {
      color: #fffa83;
      font-weight: 900;
    }

    .logoE {
      color: #c7282d;
      font-weight: 900;
    }

    .logoM {
      color: #9c06c1;
      font-weight: 900;
    }

    .toggleSwitch {
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 25px;
      width: 48px;
      height: 25px;
      border: 1px solid #938b8b;
      background-color: #fff;
    }

    .toggleKnob {
      width: 23px;
      height: 23px;
      background-color: #b5c5cd;
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 50%;
      position: relative;
      left: 0px;
      transition: 1s;
    }

    .navToggleDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 34%;
      height: 50px;
      color: #fff;
    }

    .navToggleInnerDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 49px;
      color: #fff;
    }

    .navToggleDiv span {
      font-size: 0.75rem;
    }

    .chosenApp {
      font-weight: 600;
      text-decoration: underline;
      transition: 1.3s;
    }

    .notChosenApp {
      font-weight: 600;
      opacity: 0.5;
    }

    .navLoginSignUpDiv {
      display: none;
    }

    .navLoginButton {
      width: 50px;
      height: 30px;
      border: 1px solid #fff;
      border-radius: 3px;
      background: inherit;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .navSignUpButton {
      width: 75px;
      height: 30px;
      background: #fff;
      color: #477f90;
      margin-left: 1rem;
      border-radius: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .dropDownBarsDiv {
      width: 33%;
      height: 50%;
      display: flex;
      justify-content: flex-end;
      padding: 0.5px;
      padding-right: 1rem;
      visibility: visible;
    }

    .dropDownBarsArea {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-end;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropDownBars {
      width: 15px;
      height: 1px;
      background-color: #fff;
    }

    .dropDownMenuDiv {
      background-color: #3aa9e8;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: auto;
      position: absolute;
      top: 50px;
      left: 0;
      z-index: 5;
      padding: 1rem 0;
    }

    .dropDownMenuItemDiv {
      color: #fff;
      height: 33%;
      width: 100%;
      display: flex;
      justify-content: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 1rem 0;
    }

    .dropDownMenuDivHidden {
      display: none;
    }

    .topBarProfileDiv {
      color: #fff;
      width: 150px;
      font-size: 0.8rem;
      font-weight: 200;
      position: relative;
      display: inline-block;
      margin-top: 0;
    }

    .topBarProfileDivInner {
      border: 0.3px solid #ffffff;
      border-radius: 5px 5px 0 0;
      padding: 0 0.3rem;
    }

    .topBarProfileDivInner:hover {
      cursor: pointer;
    }

    .topBarProfileDivContent {
      /* display: none; */
      position: absolute;
      background-color: #3aa9e8;
      border-left: 0.3px solid #ffffff;
      border-right: 0.3px solid #ffffff;
      border-bottom: 0.3px solid #ffffff;
      border-radius: 0px 0px 5px 5px;
      min-width: 150px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 0;
      z-index: 1;
    }

    .topBarProfileDivContent button {
      width: 100%;
      background: none;
      border: none;
      margin-top: 0.2rem;
      color: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0.3px solid rgba(255, 255, 255, 0.2);
      font-size: 0.8rem;
    }

    .topBarProfileDivContent button:hover {
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
    }

    .topBarProfileDivContentButtonDiv {
      width: 120px;
    }

    .topBarProfileDivContent i {
      font-size: 0.6rem;
      margin-left: 0.1rem;
    }

    /* whole top of home page*/
    .defaultHomeTop {
      height: calc(100vh - 50px);
      background-color: #122e3b;
      margin: 50px auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /** same as .defaultHomeTop, but top layer ***/
    .defaultHomeTop1 {
      width: 100%;
      min-height: calc(35vh - 50px);
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      border: 1px solid #f1f1f1;
      padding: 1rem 0 3rem 0;
    }

    .defaultHomePageImageCard {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      top: -80px;
    }

    .defaultHeroImagePortrait {
      width: 80%;
      margin-top: 3rem;
    }

    .defaultHeroImagePortraitBottom {
      width: 100%;
      padding: 1rem 0;
      margin: 1rem auto;
    }

    .homePageTopP {
      width: 80%;
      text-align: center;
      font-size: 0.8rem;
      color: #3aa9e8;
      position: relative;
      top: -1.5rem;
    }

    /** Practice and learn div**/
    .practiceAndLearnDiv {
      width: auto;
      margin-top: 0;
    }

    .headertextDiv {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .homePageHeaderPractice {
      font-size: 1.75rem;
      color: #3aa9e8;
      font-weight: 600;
      margin-right: 0.5rem;
    }

    .homePageHeaderAnd {
      font-size: 1.5rem;
      color: #3aa9e8;
    }

    .homePageHeaderLearn {
      font-size: 1.75rem;
      color: #3aa9e8;
      margin-left: 0.5rem;
    }

    .homePageHeaderSTEM {
      font-size: 1.5rem;
      color: #ffb038;
      font-weight: 600;
      margin: 0 1rem;
      width: 100%;
    }

    .homePageHeaderSubjects {
      font-size: 1rem;
      color: #3aa9e8;
      margin-left: 1rem;
      position: relative;
      top: -1.5rem;
    }

    .homePageHeaderAnywhere {
      font-size: 1rem;
      color: #3aa9e8;
      margin-left: 1rem;
      position: relative;
      top: -1.5rem;
    }

    .defaultHomeGetStartedButton {
      color: #fff;
      background-color: #e05d5d;
      border-color: #e05d5d;
      width: 130px;
      height: 2.5rem;
      border-radius: 5px;
      margin-right: 0.5rem;
      font-size: 0.65rem;
    }

    .defaultHomePreviewButton {
      color: #fff;
      background-color: #ffb038;
      width: 130px;
      height: 2.5rem;
      border-radius: 5px;
      margin-left: 0.5rem;
      font-size: 0.65rem;
    }

    .spiralPlane {
      position: absolute;
      top: 130px;
      left: 10px;
      z-index: 20;
      opacity: 1;
      width: 25%;
    }

    .defaultHomeTopDivSeparator {
      width: 100%;
      min-height: 50px;
      background-color: #696868;
      border: 1px solid #f1f1f1;
      margin-top: 0px;
    }

    .defaultHeroImageLandscape {
      display: none;
    }

    .defaultHeroImagePortraitBottom2 {
      width: 15%;
      position: absolute;
      bottom: 20px;
    }

    /*** Subjects Cards ***/

    .defaultSubjectCardsMainDiv {
      padding: 40px 10px;
      background: linear-gradient(to bottom, #f9fafb, #ffffff);
    }

    .defaultSubjectCardsDiv {
      flex-direction: column;
      min-width: 100%;
    }

    .subjectCardsHeader {
      text-align: center;
      margin-bottom: 60px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .subjectCardsTitle {
      font-size: 1.8rem;
      font-weight: 700;
      color: #111827;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .subjectCardsSubtitle {
      font-size: 1.125rem;
      color: #6b7280;
      line-height: 1.75;
    }

    .subjectCard {
      background: white;
      border-radius: 16px;
      padding: 40px 32px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      width: 90%;
      min-width: 300px;
      margin: 20px auto;
    }

    .subjectCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--card-color);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .subjectCard:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.08);
    }

    .subjectCard:hover::before {
      transform: scaleX(1);
    }

    .subjectCardIconWrapper {
      width: 64px;
      height: 64px;
      background: linear-gradient(
        135deg,
        var(--card-color) 20,
        var(--card-color) 10
      );
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }

    .subjectIcon {
      width: 32px;
      height: 32px;
      color: var(--card-color);
    }

    .subjectCardsHeading {
      font-size: 1.5rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 16px;
    }

    .subjectCardDescription {
      font-size: 0.975rem;
      line-height: 1.6;
      color: #4b5563;
      margin-bottom: 24px;
      flex-grow: 1;
    }

    .subjectCardTopics {
      margin-bottom: 32px;
    }

    .topicsTitle {
      font-size: 0.875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #6b7280;
      margin-bottom: 12px;
    }

    .topicsList {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .topicItem {
      display: flex;
      align-items: center;
      font-size: 0.875rem;
      color: #374151;
      margin-bottom: 8px;
    }

    .topicBullet {
      color: var(--card-color);
      margin-right: 8px;
      font-weight: 700;
    }

    .subjectCardFooter {
      margin-top: auto;
    }

    .exploreButton {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: var(--card-color);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 0.975rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .exploreButton:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .exploreIcon {
      transition: transform 0.2s ease;
    }

    .exploreButton:hover .exploreIcon {
      transform: translateX(4px);
    }

    /** End of Subjects Cards ***/

    /*** Notes and Practice Home Page ***/
    .notesAndPracticeHomeInfoDiv {
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100px 20px;
      background: #f8fafc;
      position: relative;
      overflow: hidden;
    }

    .sectionHeaderStyle {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .sectionTitleStyle {
      font-size: 2rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    .sectionSubtitleStyle {
      font-size: 1rem;
      color: #64748b;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .featuresGridStyle {
      width: 100%;
      flex-direction: column;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .getFeatureCardStyle {
      background-color: #fff;
      border-radius: 24px;
      padding: 48px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      margin: 20px auto;
    }

    .cardHeaderStyle {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 24px;
    }

    .featureTitleStyle {
      font-size: 1.5rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0;
    }

    .featureDescriptionStyle {
      font-size: 1.0625rem;
      line-height: 1.7;
      color: #475569;
      margin-bottom: 32px;
    }

    .featuresListStyle {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 40px;
    }

    .featureItemStyle {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .featureItemTextStyle {
      font-size: 0.9375rem;
      color: #334155;
      font-weight: 500;
    }

    /* End of Notes and Practice Home Page ***/

    /*** Personalized Adaptive Flexible Component ***/
    .pafMainContainer {
      width: 100%;
      padding: 10px 20px;
      background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
      position: relative;
      overflow: hidden;
    }

    .pafMainContainer::before {
      content: "";
      position: absolute;
      top: -40%;
      left: -40%;
      width: 180%;
      height: 180%;
      background: radial-gradient(
        circle,
        rgba(139, 92, 246, 0.03) 0%,
        transparent 60%
      );
      animation: pafFloat 25s ease-in-out infinite;
    }

    @keyframes pafFloat {
      0%,
      100% {
        transform: translate(0, 0) rotate(0deg);
      }
      33% {
        transform: translate(30px, -30px) rotate(120deg);
      }
      66% {
        transform: translate(-20px, 20px) rotate(240deg);
      }
    }

    .pafHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pafTitle {
      font-size: 2rem;
      font-weight: 800;
      color: #111827;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    .pafSubtitle {
      font-size: 1rem;
      color: #6b7280;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pafFeaturesGrid {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 1400px;
      margin: 50px auto;
      z-index: 1;
    }

    .pafFeatureCard {
      background: white;
      width: 100%;
      border-radius: 20px;
      padding: 50px 40px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      cursor: pointer;
      animation: pafSlideUp 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateX(40px);
      margin: 20px auto;
    }

    @keyframes pafSlideUp {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .pafFeatureCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--feature-gradient);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 0;
    }

    .pafFeatureCard::after {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: var(--feature-gradient);
      border-radius: 20px;
      opacity: 0;
      z-index: -1;
      transition: opacity 0.4s ease;
    }

    .pafFeatureCard:hover {
      transform: translateY(-12px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .pafFeatureCard:hover::before {
      opacity: 0.05;
    }

    .pafFeatureCard:hover::after {
      opacity: 0.3;
    }

    .pafFeatureCard:hover .pafIconWrapper {
      transform: scale(1.1) rotate(10deg);
    }

    .pafFeatureCard:hover .pafFeatureTitle {
      color: var(--feature-color);
    }

    .pafCardNumber {
      position: absolute;
      top: 30px;
      right: 30px;
      font-size: 4rem;
      font-weight: 900;
      color: var(--feature-color);
      opacity: 0.1;
      letter-spacing: -0.02em;
      z-index: 1;
    }

    .pafIconWrapper {
      width: 80px;
      height: 80px;
      background: var(--feature-gradient);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      position: relative;
      z-index: 1;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .pafFeatureIcon {
      width: 40px;
      height: 40px;
      color: white;
    }

    .pafFeatureTitle {
      font-size: 1.75rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
    }

    .pafFeatureDescription {
      font-size: 1.125rem;
      line-height: 1.8;
      color: #4b5563;
      margin-bottom: 35px;
      position: relative;
      z-index: 1;
    }

    .pafHighlights {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      z-index: 1;
    }

    .pafHighlightItem {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .pafHighlightDot {
      width: 8px;
      height: 8px;
      background: var(--feature-gradient);
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
    }

    .pafHighlightDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
    }

    .pafHighlightItem span {
      font-size: 1rem;
      color: #374151;
      font-weight: 500;
      line-height: 1.6;
    }
    /* End of Personalized Adaptive Flexible Component ***/

    /*** Pricing Cards Component ***/
    .pcMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
      position: relative;
      overflow: hidden;
    }

    .pcMainContainer::before {
      content: "";
      position: absolute;
      top: -30%;
      right: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(245, 87, 108, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite;
    }

    .pcMainContainer::after {
      content: "";
      position: absolute;
      bottom: -30%;
      left: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(79, 172, 254, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite reverse;
    }

    @keyframes pcFloat {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(50px, -50px) scale(1.1);
      }
    }

    .pcHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pcTitle {
      font-size: 2rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
      background: linear-gradient(135deg, #667eea 0%, #f5576c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .pcSubtitle {
      font-size: 1rem;
      color: #64748b;
      max-width: 650px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pcCardsWrapper {
      position: relative;
      z-index: 1;
    }

    .pcCardsGrid {
      display: grid;
      grid-template-columns: repeat(1, 3fr);
      gap: 40px;
      max-width: 310px;
      margin: 0 auto;
      align-items: stretch;
    }

    .pcCard {
      background: white;
      border-radius: 24px;
      padding: 18px 10px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 20px var(--shadow-color);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: pcCardSlide 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateY(40px);
    }

    @keyframes pcCardSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pcCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: var(--card-gradient);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .pcCard:hover {
      transform: translateY(-12px);
      box-shadow: 0 20px 40px var(--shadow-color);
    }

    .pcCard:hover::before {
      transform: scaleX(1);
    }

    .pcCard:hover .pcCtaButton {
      transform: scale(1.05);
    }

    .pcCardHighlighted {
      border: 2px solid transparent;
      background: linear-gradient(white, white) padding-box,
        var(--card-gradient) border-box;
      transform: scale(1.05);
    }

    .pcCardHighlighted:hover {
      transform: scale(1.08) translateY(-12px);
    }

    .pcBadge {
      position: absolute;
      top: 0px;
      right: 32px;
      background: var(--card-gradient);
      color: white;
      padding: 6px 20px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      animation: pcBadgePulse 2s ease-in-out infinite;
    }

    @keyframes pcBadgePulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }

    .pcCardHeader {
      text-align: center;
      margin-bottom: 40px;
    }

    .pcPlanName {
      font-size: 1.875rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 20px;
    }

    .pcPriceWrapper {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
      margin-bottom: 16px;
    }

    .pcPrice {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1;
    }

    .pcPeriod {
      font-size: 1.25rem;
      color: #64748b;
      font-weight: 500;
    }

    .pcDescription {
      font-size: 1rem;
      color: #64748b;
      line-height: 1.6;
    }

    .pcFeatures {
      flex-grow: 1;
      margin-bottom: 40px;
    }

    .pcFeaturesList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pcFeatureItem {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pcCheckIcon {
      width: 20px;
      height: 20px;
      color: #10b981;
      flex-shrink: 0;
    }

    .pcFeatureItem span {
      font-size: 0.975rem;
      color: #475569;
      line-height: 1.5;
    }

    .pcCardFooter {
      margin-top: auto;
    }

    .pcCtaButton {
      width: 100%;
      padding: 16px 32px;
      background: #e5e7eb;
      color: #374151;
      border: none;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .pcCtaButton::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--card-gradient);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pcCtaButton:hover {
      background: #d1d5db;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .pcCtaHighlighted {
      background: var(--card-gradient);
      color: white;
    }

    .pcCtaHighlighted:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 24px var(--shadow-color);
    }

    .pcCtaHighlighted:hover::before {
      opacity: 0.2;
    }

    .pcArrowIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .pcCtaButton:hover .pcArrowIcon {
      transform: translateX(4px);
    }

    .pcCardGlow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150%;
      height: 150%;
      background: radial-gradient(
        circle,
        var(--shadow-color) 0%,
        transparent 70%
      );
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .pcCard:hover .pcCardGlow {
      opacity: 0.3;
    }

    .pcFooter {
      text-align: center;
      margin-top: 80px;
      position: relative;
      z-index: 1;
    }

    .pcGuarantee {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 0.975rem;
      color: #64748b;
      background: white;
      padding: 16px 32px;
      border-radius: 50px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .pcShieldIcon {
      width: 24px;
      height: 24px;
      color: #10b981;
    }
    /* End of Pricing Cards Component ***/

    /*** IlearnSTEM Description Component ***/
    .isdMainContainer {
      width: 100%;
      padding: 20px 10%;
      background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .isdContentWrapper {
      width: 100%;
      margin: 0 auto;
      align-items: center;
      position: relative;
      z-index: 1;
      height: auto;
    }

    .isdTextSection {
      width: 100%;
      animation: isdSlideInLeft 0.8s ease-out;
    }

    @keyframes isdSlideInLeft {
      from {
        opacity: 0;
        transform: translateX(-40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .isdHeaderBadge {
      width: 100%;
      display: inline-block;
      margin-bottom: 24px;
    }

    .isdHeaderBadge span {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 8px 20px;
      border-radius: 30px;
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .isdTitle {
      font-size: 2rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
      margin-bottom: 24px;
      letter-spacing: -0.03em;
      width: 100%;
    }

    .isdTitleHighlight {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .isdDescription {
      font-size: 1.25rem;
      line-height: 1.8;
      color: #475569;
      margin-bottom: 40px;
    }

    .isdFeatures {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 48px;
    }

    .isdFeatureItem {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      opacity: 0;
      animation: isdFadeInUp 0.6s ease-out forwards;
      animation-delay: calc(var(--feature-index, 0) * 0.1s);
    }

    .isdFeatureItem:nth-child(1) {
      --feature-index: 0;
    }
    .isdFeatureItem:nth-child(2) {
      --feature-index: 1;
    }
    .isdFeatureItem:nth-child(3) {
      --feature-index: 2;
    }

    @keyframes isdFadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
      from {
        opacity: 0;
        transform: translateY(20px);
      }
    }

    .isdFeatureDot {
      width: 12px;
      height: 12px;
      background: var(--feature-color);
      border-radius: 50%;
      margin-top: 6px;
      flex-shrink: 0;
      position: relative;
    }

    .isdFeatureDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
      animation: isdPulse 2s ease-in-out infinite;
    }

    @keyframes isdPulse {
      0%,
      100% {
        transform: scale(1);
        opacity: 0.2;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.1;
      }
    }

    .isdFeatureContent {
      flex: 1;
    }

    .isdFeatureTitle {
      font-size: 1.125rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .isdFeatureDesc {
      font-size: 0.975rem;
      color: #64748b;
      line-height: 1.5;
    }

    .isdCta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .isdCtaButton {
      padding: 16px 32px;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .isdCtaPrimary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
    }

    .isdCtaPrimary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }

    .isdCtaSecondary {
      background: white;
      color: #475569;
      border: 2px solid #e5e7eb;
    }

    .isdCtaSecondary:hover {
      border-color: #667eea;
      color: #667eea;
      background: #f3f4f6;
    }

    .isdCtaIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
    }

    .isdCtaButton:hover .isdCtaIcon {
      transform: translateX(4px);
    }

    .isdVisualSection {
      position: relative;
      animation: isdSlideInRight 0.8s ease-out;
    }

    @keyframes isdSlideInRight {
      from {
        opacity: 0;
        transform: translateX(40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .isdGraphicContainer {
      position: relative;
      width: 100%;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdFloatingCard {
      position: absolute;
      background: white;
      border-radius: 16px;
      padding: 20px 24px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      color: #1e293b;
      animation: isdFloat 4s ease-in-out infinite;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .isdFloatingCard:hover {
      transform: scale(1.05);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .isdCard1 {
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }

    .isdCard2 {
      top: 45%;
      right: 15%;
      animation-delay: 1.3s;
    }

    .isdCard3 {
      bottom: 20%;
      left: 20%;
      animation-delay: 2.6s;
    }

    @keyframes isdFloat {
      0%,
      100% {
        transform: translateY(50px);
      }
      50% {
        transform: translateY(0px);
      }
    }

    .isdCardIcon {
      width: 32px;
      height: 32px;
      color: #667eea;
    }

    .isdCentralOrb {
      position: relative;
      width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      /* display: none; */
    }

    .isdOrbCore {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%;
      box-shadow: 0 0 60px rgba(102, 126, 234, 0.6);
      animation: isdOrbPulse 3s ease-in-out infinite;
      /* display: none; */
    }

    @keyframes isdOrbPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
    }

    .isdOrbRing {
      position: absolute;
      border: 2px solid rgba(102, 126, 234, 0.2);
      border-radius: 50%;
      animation: isdRingExpand 4s ease-out infinite;
      /* display: none; */
    }

    .isdRing1 {
      width: 120px;
      height: 120px;
      animation-delay: 0s;
      /* display: none; */
    }

    .isdRing2 {
      width: 160px;
      height: 160px;
      animation-delay: 1s;
      /* display: none; */
    }

    .isdRing3 {
      width: 200px;
      height: 200px;
      animation-delay: 2s;
      /* display: none; */
    }

    @keyframes isdRingExpand {
      0% {
        transform: scale(0.8);
        opacity: 1;
      }
      100% {
        transform: scale(1.3);
        opacity: 0;
      }
    }

    .isdStatsSection {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 80px 40px;
      margin-top: 100px;
      position: relative;
      overflow: hidden;
    }

    .isdStatsSection::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .isdStatsGrid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(1, 4fr);
      gap: 40px;
      position: relative;
      z-index: 1;
    }

    .isdStatCard {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      padding: 32px;
      text-align: center;
      transition: all 0.3s ease;
      animation: isdStatSlide 0.8s ease-out forwards;
      animation-delay: var(--stat-delay);
      opacity: 0;
      transform: translateY(30px);
    }

    @keyframes isdStatSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .isdStatCard:hover {
      transform: translateY(-8px);
      background: rgba(255, 255, 255, 0.15);
    }

    .isdStatIconWrapper {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      margin-bottom: 16px;
    }

    .isdStatIcon {
      width: 32px;
      height: 32px;
      color: white;
    }

    .isdStatValue {
      font-size: 2.5rem;
      font-weight: 800;
      color: white;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    .isdStatLabel {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }
    /* End of IlearnSTEM Description Component ***/

    /* ===== DefaultHomeFooter Component - Portrait ===== */
    .dhfMainContainer {
      width: 100%;
      background-color: #0f172a;
      color: white;
      position: relative;
      overflow: hidden;
    }

    .dhfPartnersSection {
      background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
      padding: 40px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .dhfPartnersWrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
    }

    .dhfPartnersTitle {
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 24px;
      background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .dhfPartnersGrid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .dhfPartnerCard {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      transition: all 0.3s ease;
      animation: fadeInUp 0.6s ease-out forwards;
      animation-delay: var(--partner-delay, 0s);
      opacity: 0;
    }

    .dhfPartnerCard:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.05);
    }

    .platinumPartner {
      border-color: rgba(168, 85, 247, 0.3);
      background: linear-gradient(
        135deg,
        rgba(168, 85, 247, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
      );
    }

    .goldPartner {
      border-color: rgba(251, 191, 36, 0.3);
      background: linear-gradient(
        135deg,
        rgba(251, 191, 36, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
      );
    }

    .silverPartner {
      border-color: rgba(156, 163, 175, 0.3);
      background: linear-gradient(
        135deg,
        rgba(156, 163, 175, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
      );
    }

    .dhfPartnerLogo {
      width: 48px;
      height: 48px;
      margin: 0 auto 8px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .dhfPartnerInitial {
      font-size: 1.125rem;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.9);
      z-index: 1;
    }

    .dhfPartnerName {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 4px;
      color: rgba(255, 255, 255, 0.9);
    }

    /* Main Footer Content */
    .dhfPartnerLevel {
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.6);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .dhfContentSection {
      padding: 40px 0;
      position: relative;
      z-index: 1;
    }

    .dhfContentWrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
    }

    .dhfTopSection {
      display: flex;
      flex-direction: column;
      gap: 32px;
      margin-bottom: 32px;
    }

    .dhfBrandColumn {
      flex: 1;
    }

    .dhfLogo {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .dhfLogoIcon {
      width: 32px;
      height: 32px;
      color: #8b5cf6;
    }

    .dhfLogoText {
      font-size: 1.5rem;
      font-weight: 700;
      background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .dhfBrandDesc {
      font-size: 0.875rem;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 20px;
    }

    .dhfNewsletterForm {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 100%;
    }

    .dhfNewsletterInput {
      flex: 1;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 0.875rem;
      color: white;
      transition: all 0.3s ease;
      width: 100%;
    }

    .dhfNewsletterInput:focus {
      outline: none;
      border-color: #8b5cf6;
      background: rgba(255, 255, 255, 0.08);
    }

    .dhfNewsletterButton {
      background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
      border: none;
      border-radius: 8px;
      padding: 12px 20px;
      font-size: 0.875rem;
      font-weight: 600;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.3s ease;
      width: 100%;
    }

    .dhfNewsletterButton:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 20px -5px rgba(139, 92, 246, 0.3);
    }

    .dhfNewsletterIcon {
      width: 16px;
      height: 16px;
    }

    .dhfLinksGrid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .dhfLinkColumn h4 {
      font-size: 0.875rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: rgba(255, 255, 255, 0.9);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .dhfLinkList {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .dhfLinkItem {
      margin-bottom: 8px;
    }

    .dhfLink {
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      font-size: 0.875rem;
      transition: color 0.3s ease;
      display: inline-block;
    }

    .dhfLink:hover {
      color: #8b5cf6;
    }

    .dhfBottomSection {
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .dhfCopyright {
      text-align: center;
    }

    .dhfCopyright p {
      margin: 0;
      font-size: 0.875rem;
      color: rgba(255, 255, 255, 0.6);
    }

    .dhfTagline {
      margin-top: 4px;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.4);
    }

    .dhfSocialLinks {
      display: flex;
      gap: 12px;
    }

    .dhfSocialLink {
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .dhfSocialLink:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-2px);
    }

    .dhfSocialIcon {
      width: 18px;
      height: 18px;
      color: rgba(255, 255, 255, 0.7);
    }

    .dhfDecorativeGradient {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 150%;
      height: 600px;
      background: radial-gradient(
        ellipse at center,
        rgba(139, 92, 246, 0.1) 0%,
        transparent 70%
      );
      pointer-events: none;
    }

    .dhfFloatingOrbs {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
    }

    .dhfOrb {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
      opacity: 0.3;
    }

    .dhfOrb1 {
      width: 150px;
      height: 150px;
      background: #8b5cf6;
      top: 10%;
      left: -50px;
      animation: float1 20s infinite ease-in-out;
    }

    .dhfOrb2 {
      width: 200px;
      height: 200px;
      background: #3b82f6;
      bottom: 10%;
      right: -100px;
      animation: float2 25s infinite ease-in-out;
    }

    .dhfOrb3 {
      width: 100px;
      height: 100px;
      background: #10b981;
      top: 50%;
      right: 10%;
      animation: float3 30s infinite ease-in-out;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes float1 {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      33% {
        transform: translate(30px, -30px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
    }

    @keyframes float2 {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      33% {
        transform: translate(-30px, -20px) scale(0.9);
      }
      66% {
        transform: translate(20px, 30px) scale(1.1);
      }
    }

    @keyframes float3 {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      33% {
        transform: translate(20px, 30px) scale(1.1);
      }
      66% {
        transform: translate(-30px, -20px) scale(0.9);
      }
    }
    /* End of DefaultHomeFooter Component - Portrait ***/

    /* Default Login Component Styles - Portrait */
    .dlMainContainer {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 50px;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding: 1rem;
    }

    /* Animated background */
    .dlBackgroundAnimation {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
    }

    .dlParticle {
      position: absolute;
      background: rgba(58, 169, 232, 0.1);
      border-radius: 50%;
      animation: dlFloat 20s linear infinite;
    }

    .dlGradientOrb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0.2;
      animation: dlOrbitFloat 30s ease-in-out infinite;
    }

    .dlOrb1 {
      width: 250px;
      height: 250px;
      background: radial-gradient(circle, #3aa9e8 0%, transparent 70%);
      top: -100px;
      left: -100px;
    }

    .dlOrb2 {
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, #ffb038 0%, transparent 70%);
      bottom: -100px;
      right: -100px;
      animation-delay: -10s;
    }

    .dlOrb3 {
      width: 150px;
      height: 150px;
      background: radial-gradient(circle, #667eea 0%, transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation-delay: -20s;
    }

    .dlContentWrapper {
      width: 100%;
      max-width: 500px;
      padding: 1rem;
      position: relative;
      z-index: 1;
    }

    /* Header Section */
    .dlHeaderSection {
      text-align: center;
      margin-bottom: 2rem;
      opacity: 0;
      transform: translateY(-20px);
      transition: all 0.8s ease-out;
    }

    .dlHeaderSection.dlVisible {
      opacity: 1;
      transform: translateY(0);
    }

    .dlMainTitle {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      margin-bottom: 0.75rem;
    }

    .dlWelcome {
      font-size: 1.125rem;
      color: #64748b;
      font-weight: 400;
    }

    .dlBrandName {
      font-size: 2.25rem;
      font-weight: 800;
      color: #1e293b;
      letter-spacing: -0.02em;
    }

    .dlHighlight {
      background: linear-gradient(135deg, #3aa9e8 0%, #667eea 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .dlSubtitle {
      font-size: 0.875rem;
      color: #64748b;
      max-width: 300px;
      margin: 0 auto;
      line-height: 1.5;
    }

    /* Form Container */
    .dlFormContainer {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.8s ease-out 0.2s;
    }

    .dlFormContainer.dlFormVisible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Login Card */
    .dlLoginCard {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 2rem 1.5rem;
      width: 100%;
      max-width: 400px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.5);
      position: relative;
      overflow: hidden;
    }

    .dlLoginCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #3aa9e8 0%, #667eea 50%, #ffb038 100%);
    }

    .dlCardHeader {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .dlCardTitle {
      font-size: 1.5rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 0.25rem;
    }

    .dlCardSubtitle {
      font-size: 0.875rem;
      color: #64748b;
    }

    /* Error Message */
    .dlErrorMessage {
      background: #fee2e2;
      border: 1px solid #fecaca;
      border-radius: 10px;
      padding: 0.75rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      animation: dlShake 0.5s ease-out;
      font-size: 0.875rem;
    }

    .dlErrorIcon {
      font-size: 1rem;
    }

    .dlErrorText {
      color: #dc2626;
      font-size: 0.75rem;
    }

    /* Form Group */
    .dlFormGroup {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .dlInputWrapper {
      position: relative;
      transition: all 0.3s ease;
    }

    .dlLabel {
      display: block;
      font-size: 0.75rem;
      font-weight: 600;
      color: #475569;
      margin-bottom: 0.375rem;
    }

    .dlInputContainer {
      position: relative;
      display: flex;
      align-items: center;
    }

    .dlInputIcon {
      position: absolute;
      left: 0.875rem;
      font-size: 1rem;
      z-index: 1;
    }

    .dlInput {
      width: 100%;
      padding: 0.75rem 2.5rem 0.75rem 2.5rem;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      background: #f9fafb;
    }

    .dlInput:focus {
      outline: none;
      border-color: #3aa9e8;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(58, 169, 232, 0.1);
    }

    .dlPasswordToggle {
      position: absolute;
      right: 0.875rem;
      background: none;
      border: none;
      font-size: 1rem;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.3s ease;
    }

    .dlForgotPassword {
      text-align: right;
      margin-top: -0.5rem;
    }

    .dlForgotLink {
      font-size: 0.75rem;
      color: #3aa9e8;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    /* Submit Button */
    .dlSubmitButton {
      width: 100%;
      padding: 0.875rem;
      background: linear-gradient(135deg, #3aa9e8 0%, #667eea 100%);
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }

    .dlSubmitButton:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(58, 169, 232, 0.3);
    }

    .dlLoadingSpinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: dlSpin 1s linear infinite;
    }

    .dlButtonText {
      position: relative;
      z-index: 1;
    }

    .dlButtonArrow {
      font-size: 1rem;
      transition: transform 0.3s ease;
    }

    .dlButtonShine {
      position: absolute;
      top: -50%;
      left: -100%;
      width: 100%;
      height: 200%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      transform: skewX(-45deg);
      transition: left 0.5s ease;
    }

    /* Divider */
    .dlDivider {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin: 1.5rem 0;
    }

    .dlDividerLine {
      flex: 1;
      height: 1px;
      background: #e5e7eb;
    }

    .dlDividerText {
      font-size: 0.75rem;
      color: #9ca3af;
      font-weight: 500;
    }

    /* Social Login */
    .dlGoogleButton {
      width: 100%;
      padding: 0.75rem;
      background: white;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      font-size: 0.875rem;
    }

    .dlGoogleButton:hover:not(:disabled) {
      border-color: #4285f4;
      box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15);
      transform: translateY(-2px);
    }

    .dlGoogleIcon {
      width: 18px;
      height: 18px;
    }

    .dlGoogleText {
      font-size: 0.875rem;
      font-weight: 600;
      color: #1e293b;
    }

    /* Signup Prompt */
    .dlSignupPrompt {
      text-align: center;
      margin-top: 1.5rem;
    }

    .dlSignupText {
      font-size: 0.75rem;
      color: #64748b;
    }

    .dlSignupLink {
      color: #3aa9e8;
      text-decoration: none;
      font-weight: 600;
      position: relative;
      transition: color 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    .dlLinkArrow {
      transition: transform 0.3s ease;
      font-size: 0.875rem;
    }

    /* Features Section - Hidden on mobile */
    .dlFeatures {
      display: none;
    }

    /* Bottom Decoration */
    .dlBottomDecoration {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      overflow: hidden;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.8s ease-out 0.6s;
    }

    .dlBottomDecoration.dlDecorationVisible {
      opacity: 1;
      transform: translateY(0);
    }

    .dlWave {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 200%;
      height: 100%;
      background-repeat: repeat-x;
      animation: dlWaveMove 20s linear infinite;
    }

    .dlWave1 {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%233aa9e8' opacity='0.1'/%3E%3C/svg%3E");
      background-size: 1200px 80px;
    }

    .dlWave2 {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23667eea' opacity='0.1'/%3E%3C/svg%3E");
      background-size: 1200px 80px;
      animation-delay: -5s;
    }

    .dlWave3 {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffb038' opacity='0.05'/%3E%3C/svg%3E");
      background-size: 1200px 80px;
      animation-delay: -10s;
    }
    /*** End of Default login ***/

    .settingsDiv {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-top: 50px;
      padding-top: 3rem;
    }

    .settingsBack {
      position: absolute;
      left: 1rem;
      top: 55px;
      color: #122e3b;
    }

    .settingsBack:hover {
      cursor: pointer;
    }

    .settingsTopDiv {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .curriculumCountryDiv {
      margin: 2px auto;
    }

    .curriculumCountryDropDown,
    .curriculumProvinceOrStateDropDown,
    .notesOrPracticeSelect {
      display: flex;
      flex-direction: row;
      width: 90px;
      height: 35px;
      align-items: center;
      color: #aeaeae;
      margin-bottom: 0px;
      font-size: 0.6rem;
      border: 0.3px solid #aeaeae;
      border-radius: 0;
      margin: 0px 10px;
    }

    .settingsSubjectsDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 2rem;
    }

    .settingsSubjectsDiv button {
      width: 70px;
      height: 70px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #122e3b;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
    }

    .settingsPhysicsButton {
      background-color: rgba(153, 217, 255, 0.5);
    }

    .settingsChemistryButton {
      background: rgba(0, 128, 128, 0.15);
      margin: 0px 0px 0px 5px;
    }

    .settingsEarthAndSpaceSciencesButton {
      background: rgba(255, 255, 0, 0.5);
      margin-left: 5px;
    }

    .settingsMathematicsButton1,
    .settingsMathematicsButton2 {
      background: rgba(132, 31, 39, 0.25);
      margin-left: 5px;
    }

    .settingsSubjectsDiv button:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .otherSubjectDropDownDiv {
      width: 85px;
      height: 85px;
      justify-content: center;
      align-items: center;
      background-color: rgba(197, 205, 216, 1);
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-left: 5px;
    }

    .otherSubjectSelect {
      background-color: inherit;
      width: 85px;
      height: 35px;
      border: none;
      outline: none;
    }

    .otherSubjectDropDownDiv:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .settingsTopicsMainDiv {
      width: 100%;
      margin-top: 50px;
    }

    .settingsGradeLevelAndCurriculaMainDiv {
      width: 100%;
      margin: 20px auto;
      flex-direction: column;
    }

    .settingsGradeLevelSelect {
      height: 35px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
    }

    .settingsCurriculumSelect {
      width: 90%;
      height: 35px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-top: 10px;
    }

    .settingsTopicsMainDiv h3 {
      font-size: 1.3rem;
      padding: 0px 10px;
      text-align: center;
      color: #122e3b;
    }

    .settingsTopicsMainDiv span {
      color: #ffb038;
    }

    .settingsTopicsMainDiv h2 {
      font-size: 1.3rem;
      text-align: center;
    }

    .settings_strand_div,
    .settings_strand_div1 {
      width: 90%;
      padding: 20px;
      margin: 20px auto;
    }

    .settings_strand_subtrand_p_div {
      width: 100%;
      cursor: pointer;
    }

    .settings_strand_subtrand_p_div:hover {
      background-color: #f0f0f0;
      text-decoration: underline;
    }

    .settings_strand_subtrand_p_div_p1 {
      font-weight: 600;
      margin-left: 20px;
      width: 80%;
      margin-top: 50px;
    }

    .settings_strand_substrand_p_div_p2 {
      margin-left: 40px;
      margin-top: 25px;
    }

    .registrationCard {
      max-width: 315px;
    }

    .loginTelescope {
      width: 50px;
    }

    /* Default Settings Portrait Styles */
    .defaultSettingsContainer {
      min-height: calc(100vh - 50px);
      margin-top: 50px;
      background-color: #f5f7fa;
      padding: 20px;
    }

    .defaultSettingsHeader {
      width: 100%;
      margin: 0 auto 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .defaultSettingsBackButton {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #1976d2;
      text-decoration: none;
      font-weight: 500;
      font-size: 10px;
      transition: all 0.3s ease;
    }

    .defaultSettingsBackButton:hover {
      color: #1565c0;
      transform: translateX(-5px);
    }

    .defaultSettingsTitle {
      font-size: 14px;
      color: #1a237e;
      margin-right: 20px;
      font-weight: 700;
    }

    .defaultSettingsCard {
      width: 100%;
      margin: 0 auto;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      padding: 20px;
    }

    .defaultSettingsRow {
      display: grid;
      grid-template-columns: 1fr; /* 1 equal columns */
      grid-template-rows: 1fr 1fr 1fr; /* 3 equal rows */
      gap: 10px;
      margin-bottom: 40px;
    }

    .defaultSettingsSection {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .defaultSettingsLabel {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .defaultSettingsCountrySelect {
      display: flex;
      gap: 20px;
    }

    .defaultSettingsCountryOption {
      flex: 1;
      padding: 10px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }

    .defaultSettingsCountryActive {
      border-color: #1976d2;
      background-color: #e3f2fd;
    }

    .defaultSettingsCountryDisabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .defaultSettingsFlag {
      font-size: 10px;
    }

    .defaultSettingsComingSoon {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #ff6b6b;
      color: white;
      font-size: 10px;
      padding: 4px 8px;
      border-radius: 12px;
      font-weight: 600;
    }

    .defaultSettingsProvinceBox {
      padding: 10px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f8fafc;
      font-weight: 500;
      font-size: 10px;
      width: 200px;
      margin-left: 50px;
    }

    .defaultSettingsProvinceIcon {
      font-size: 12px;
    }

    .defaultSettingsModeToggle {
      display: flex;
      background: #f1f5f9;
      border-radius: 12px;
      padding: 4px;
    }

    .defaultSettingsModeButton {
      flex: 1;
      padding: 12px 24px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-weight: 500;
      font-size: 10px;
      border-radius: 8px;
      transition: all 0.3s ease;
      color: #64748b;
    }

    .defaultSettingsModeActive {
      background: white;
      color: #1976d2;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectSection {
      margin-bottom: 30px;
    }

    .defaultSettingsSectionTitle {
      font-size: 20px;
      color: #334155;
      margin-bottom: 20px;
      font-weight: 600;
    }

    .defaultSettingsSubjectGrid {
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      gap: 16px;
    }

    .defaultSettingsSubjectCard {
      padding: 10px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      background: white;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    .defaultSettingsSubjectCard:hover {
      border-color: var(--subject-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectActive {
      border-color: var(--subject-color);
      background: linear-gradient(to bottom, white, rgba(33, 150, 243, 0.05));
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectIcon {
      font-size: 20px;
    }

    .defaultSettingsSubjectName {
      font-weight: 600;
      color: #334155;
      font-size: 12px;
    }

    .defaultSettingsSubjectGrades {
      font-size: 12px;
      color: #94a3b8;
    }

    .defaultSettingsGradeSection {
      border-top: 1px solid #e5e7eb;
      padding-top: 30px;
    }

    .defaultSettingsGradeRow {
      display: flex;
      gap: 20px;
    }

    .defaultSettingsGradeSelect,
    .defaultSettingsCurriculumSelect {
      width: 200px;
    }

    .defaultSettingsSelect {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: border-color 0.3s ease;
    }

    .defaultSettingsSelect:hover,
    .defaultSettingsSelect:focus {
      border-color: #1976d2;
      outline: none;
    }

    .defaultSettingsTopicsSection {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }

    .defaultSettingsTopicsTitle {
      font-size: 20px;
      color: #1a237e;
      margin-bottom: 20px;
      text-align: center;
    }

    .defaultSettingsPracticeAllButton {
      display: block;
      margin: 0 auto 30px;
      padding: 12px 32px;
      background: #1976d2;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultSettingsPracticeAllButton:hover {
      background: #1565c0;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
    }

    .defaultSettingsTopicsList {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .defaultSettingsStrandCard {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .defaultSettingsStrandCard:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsStrandHeader {
      padding: 20px 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      background: linear-gradient(to right, #f8fafc, #f1f5f9);
    }

    .defaultSettingsStrandTitle {
      font-size: 18px;
      color: #334155;
      margin: 0;
      font-weight: 600;
    }

    .defaultSettingsStrandActions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .defaultSettingsPracticeButton {
      padding: 8px 20px;
      background: #1976d2;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultSettingsPracticeButton:hover {
      background: #1565c0;
    }

    .defaultSettingsExpandIcon {
      color: #64748b;
      transition: transform 0.3s ease;
    }

    .defaultSettingsSubstrands {
      padding: 0 24px 20px;
      animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .defaultSettingsSubstrand {
      margin-top: 20px;
      padding-left: 20px;
      border-left: 3px solid #e5e7eb;
    }

    .defaultSettingsSubstrandTitle {
      font-size: 16px;
      color: #475569;
      margin: 0 0 12px;
      font-weight: 600;
    }

    .defaultSettingsTopicItem {
      padding: 12px 16px;
      margin: 8px 0;
      background: #f8fafc;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .defaultSettingsTopicItem:hover {
      background: #e3f2fd;
      transform: translateX(4px);
    }

    .defaultSettingsTopicCode {
      font-weight: 600;
      color: #1976d2;
      font-size: 14px;
    }

    .defaultSettingsTopicName {
      color: #334155;
      font-size: 15px;
    }
    /* End of Default Settings Component - Portrait */

    /*** Navbar ***/

    .navbar1-version-toggle {
      margin-right: auto;
      margin-left: 16px;
    }

    .navbar1-nav-items {
      display: none;
    }

    .navbar1-desktop {
      display: none;
    }

    .navbar1-mobile-toggle {
      display: block;
    }

    .navbar1-mobile-menu {
      display: block;
    }

    .navbar1-container {
      padding: 0 16px;
    }
    /**** End of Navbar **/

    .defaultQuestionNumber {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: white;
      padding: 6px 12px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .defaultQuestionLabel {
      display: none;
    }

    .defaultQuestionValue {
      font-size: 16px;
    }

    .defaultHintButton,
    .defaultFormulaButton {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 5px 8px;
      font-size: 12px;
    }

    .defaultHintButton:hover:not(:disabled),
    .defaultFormulaButton:hover {
      border-color: #2196f3;
      color: #2196f3;
      background: #eff6ff;
    }

    .defaultHintButton:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* Hint and Formula Boxes */
    .defaultHintBox,
    .defaultFormulaBox {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 16px;
      margin-bottom: 24px;
      border-radius: 8px;
      animation: slideDown 0.3s ease;
    }

    /* Header Section */
    .defaultPracticeHeader {
      position: relative;
      z-index: 10;
      background: white;
      padding: 10px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      margin-bottom: 14px;
    }

    .defaultHeaderLeft,
    .defaultHeaderRight {
      flex: 0 0 auto;
    }

    .defaultHeaderCenter {
      flex: 1;
      text-align: center;
    }

    .defaultSettingsButton,
    .defaultExitButton {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 4px 10px;
      border: none;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultSubjectInfo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .defaultSubjectIcon {
      font-size: 16px;
    }

    .defaultSubjectName {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      color: #1e293b;
    }

    .defaultGradeLevel {
      background: #e0f2fe;
      color: #0369a1;
      padding: 4px 8px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
    }

    .defaultTopicName {
      margin: 0;
      font-size: 10px;
      color: #64748b;
    }

    /* Stats Bar */
    .defaultStatsBar {
      display: flex;
      justify-content: center;
      gap: 16px;
      padding: 6px 10px;
      background: white;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      margin-bottom: 12px;
      position: relative;
      z-index: 10;
    }

    .defaultStatItem {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #64748b;
    }

    .defaultStatItem i {
      font-size: 20px;
    }

    /* Question Section */
  .defaultQuestionSection {
    width: 100%;
    padding: 0 4px;
    position: relative;
    z-index: 10;
  }

    /* Question Content */
    .defaultQuestionContent {
      background: white;
      width: 100%;
      border-radius: 16px;
      padding: 5px 5px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      margin-bottom: 24px;
    }

    .defaultCanvasContainer {
      text-align: center;
      margin-bottom: 14px;
    }

    #physics_canvas {
      width: 80%;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      margin-bottom: 16px;
    }

    .defaultDemoButton {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 5px 10px;
      border: none;
      border-radius: 8px;
      background: #2196f3;
      color: white;
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultDemoButton:hover {
      background: #1976d2;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
    }

    .defaultQuestionText {
      font-size: 14px;
      line-height: 1.8;
      color: #334155;
      margin-bottom: 32px;
      width: 98%;
      padding: 0px 10px;
    }

    /* Answer Options */
    .defaultAnswerOptions {
      display: grid;
      grid-template-columns: repeat(1, 4fr);
      gap: 16px;
    }

    .defaultAnswerOption {
      display: flex;
      align-items: center;
      padding: 10px 24px;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      background: white;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }

    .defaultAnswerOption:hover:not(.correct):not(.incorrect) {
      border-color: #cbd5e1;
      background: #f8fafc;
    }

    .defaultAnswerOption.correct {
      border-color: #10b981;
      background: #ecfdf5;
    }

    .defaultAnswerOption.incorrect {
      border-color: #ef4444;
      background: #fef2f2;
    }

    .defaultAnswerOption input[type="radio"] {
      position: absolute;
      opacity: 0;
    }

    .defaultRadioButton {
      width: 20px;
      height: 20px;
      border: 2px solid #cbd5e1;
      border-radius: 50%;
      margin-right: 16px;
      position: relative;
      flex-shrink: 0;
    }

    .defaultAnswerOption input[type="radio"]:checked ~ .defaultRadioButton {
      border-color: #2196f3;
    }

    .defaultAnswerOption
      input[type="radio"]:checked
      ~ .defaultRadioButton::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 12px;
      height: 12px;
      background: #2196f3;
      border-radius: 50%;
    }

    .defaultAnswerText {
      font-size: 14px;
      color: #334155;
      flex: 1;
    }

    .defaultAnswerUnits {
      color: #64748b;
      font-style: italic;
    }

    .defaultCorrectIcon {
      margin-left: auto;
      color: #10b981;
      font-size: 24px;
    }

    /* Submit Section */
    .defaultSubmitSection {
      display: flex;
      justify-content: center;
      margin-bottom: 12px;
    }

    .defaultSubmitButton {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 10px;
      border: none;
      border-radius: 12px;
      background: #10b981;
      color: white;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultSubmitButton:hover:not(:disabled) {
      background: #059669;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
    }

    .defaultSubmitButton:disabled {
      background: #cbd5e1;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* Navigation Section */
    .defaultNavigationSection {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 60px;
    }

    .defaultNavButton {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 10px;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      background: white;
      font-size: 12px;
      font-weight: 500;
      color: #475569;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultNavButton:hover:not(:disabled) {
      border-color: #2196f3;
      color: #2196f3;
      background: #eff6ff;
    }

    .defaultNavButton:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .defaultQuestionIndicators {
      display: flex;
      gap: 8px;
      display: none;
      border: 3px solid blue;
    }

    .defaultQuestionIndicator {
      width: 40px;
      height: 40px;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      background: white;
      font-size: 16px;
      font-weight: 500;
      color: #64748b;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultQuestionIndicator:hover {
      border-color: #cbd5e1;
      background: #f8fafc;
    }

    .defaultQuestionIndicator.active {
      border-color: #2196f3;
      background: #2196f3;
      color: white;
    }

    .defaultQuestionIndicator.completed {
      border-color: #10b981;
      background: #ecfdf5;
      color: #10b981;
    }

    /* Explanation */
    .defaultExplanation {
      text-align: center;
    }

    .defaultExplanation p {
      margin: 0 0 12px;
      font-size: 16px;
      color: #64748b;
    }

    .defaultCorrectAnswerDisplay {
      font-size: 20px;
      font-weight: 600;
      color: #10b981;
    }

    .defaultCorrectAnswer {
      color: #2196f3;
      font-weight: 600;
    }
  } /* End of (min-width: 320px) and (max-width: 767px) */

  @media screen and (max-device-height: 700px) {
    .defaultHomeTop1 {
      width: 100%;
      min-height: calc(45vh - 50px);
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      border: 1px solid #f1f1f1;
      padding: 1rem 0 3rem 0;
    }
  }

  @media screen and (min-device-width: 500px) and (max-device-width: 600px) {
    .defaultHomeTop1 {
      width: 100%;
      min-height: calc(45vh - 50px);
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      border: 1px solid #f1f1f1;
      padding: 1rem 0 3rem 0;
    }
  }

  /* Tablet - Portrait */
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    /* CSS styles for tablet portrait go here */
    .topNav {
      height: 50px;
      width: 100%;
      background: #122e3b;
      position: absolute;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logoDiv {
      width: 33%;
      display: flex;
      justify-content: flex-start;
      padding-left: 1rem;
    }

    .logo {
      display: flex;
      flex-direction: row;
      font-size: 1.2rem;
    }

    .logo:hover {
      opacity: 0.7;
      cursor: pointer;
    }

    .logoI {
      display: flex;
      flex-direction: column;
      width: 0.2rem;
      height: 1.5rem;
      position: relative;
      top: 0.25rem;
    }

    .logoITop {
      width: 0.2rem;
      height: 20%;
      background-color: #5e5656;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      position: relative;
      top: 1px;
    }

    .logoIMiddle {
      width: inherit;
      height: 60%;
      border-radius: 2px;
      background-color: #fffa83;
      z-index: 1;
    }

    .logoIBottom {
      display: inline;
      width: inherit;
      height: 20%;
      margin-top: 0;
      background-color: #e05d5d;
      clip-path: ellipse(45% 45% at 50% 50%);
      position: relative;
      top: -2.5px;
    }

    .logoLearn {
      color: #fff;
    }

    .logoS {
      color: #ffb038;
      font-weight: 900;
    }

    .logoT {
      color: #fffa83;
      font-weight: 900;
    }

    .logoE {
      color: #c7282d;
      font-weight: 900;
    }

    .logoM {
      color: #9c06c1;
      font-weight: 900;
    }

    .toggleSwitch {
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 25px;
      width: 48px;
      height: 25px;
      border: 1px solid #938b8b;
      background-color: #fff;
    }

    .toggleKnob {
      width: 23px;
      height: 23px;
      background-color: #b5c5cd;
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 50%;
      position: relative;
      left: 0px;
      transition: 1s;
    }

    .navToggleDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 34%;
      height: 50px;
      color: #fff;
    }

    .navToggleInnerDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 49px;
      color: #fff;
    }

    .navToggleDiv span {
      font-size: 0.9rem;
    }

    .chosenApp {
      font-weight: 600;
      text-decoration: underline;
      transition: 1.3s;
    }

    .notChosenApp {
      font-weight: 600;
      opacity: 0.5;
    }

    .dropDownBarsDiv {
      width: 33%;
      height: 50%;
      display: flex;
      justify-content: flex-end;
      padding: 0.5px;
      padding-right: 1rem;
      visibility: visible;
    }

    .dropDownBarsArea {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-end;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropDownBars {
      width: 15px;
      height: 1px;
      background-color: #fff;
    }

    .dropDownMenuDiv {
      background-color: #3aa9e8;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: auto;
      position: absolute;
      top: 50px;
      left: 0;
      z-index: 5;
      padding: 1rem 0;
    }

    .dropDownMenuItemDiv {
      color: #fff;
      height: 33%;
      width: 100%;
      display: flex;
      justify-content: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 1rem 0;
    }

    .dropDownMenuDivHidden {
      display: none;
    }

    .topBarProfileDiv {
      color: #fff;
      width: 150px;
      font-size: 1rem;
      font-weight: 200;
      position: relative;
      display: inline-block;
      margin-top: 0;
    }

    .topBarProfileDivInner {
      border: 0.3px solid #ffffff;
      border-radius: 5px 5px 0 0;
      padding: 0 0.3rem;
    }

    .topBarProfileDivInner:hover {
      cursor: pointer;
    }

    .topBarProfileDivContent {
      position: absolute;
      background-color: #3aa9e8;
      border-left: 0.3px solid #ffffff;
      border-right: 0.3px solid #ffffff;
      border-bottom: 0.3px solid #ffffff;
      border-radius: 0px 0px 5px 5px;
      min-width: 150px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 0;
      z-index: 1;
    }

    .topBarProfileDivContent button {
      font-size: 1rem;
      width: 100%;
      background: none;
      border: none;
      margin-top: 0.2rem;
      color: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0.3px solid rgba(255, 255, 255, 0.2);
    }

    .topBarProfileDivContent button:hover {
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
    }

    .topBarProfileDivContentButtonDiv {
      width: 120px;
    }

    .topBarProfileDivContent i {
      font-size: 0.6rem;
      margin-left: 0.1rem;
    }

    .defaultHomeTop {
      height: auto;
      width: 100%;
      background-color: #122e3b;
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /** same as .defaultHomeTop, but top layer ***/
    .defaultHomeTop1 {
      height: auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      border: 1px solid #f1f1f1;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 1rem 0 5rem 0;
    }

    .homePageTopP {
      width: 60%;
      text-align: center;
      font-size: 1rem;
      color: #3aa9e8;
    }

    /** Practice and learn div**/
    .practiceAndLearnDiv {
      width: auto;
      margin-top: 0;
    }

    .homePageHeaderPractice {
      font-size: 2rem;
      color: #3aa9e8;
      font-weight: 600;
      margin-right: 1rem;
    }

    .homePageHeaderAnd {
      font-size: 1.75rem;
      color: #3aa9e8;
    }

    .homePageHeaderLearn {
      font-size: 2rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .homePageHeaderSTEM {
      font-size: 1.75rem;
      color: #ffb038;
      font-weight: 600;
      margin: 0 1rem;
    }

    .homePageHeaderSubjects {
      font-size: 1.5rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .homePageHeaderAnywhere {
      font-size: 1.5rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .defaultHomeGetStartedButton {
      color: #fff;
      background-color: #e05d5d;
      border-color: #e05d5d;
      width: 120px;
      height: 2.5rem;
      border-radius: 5px;
      margin-right: 1rem;
      font-size: 0.8rem;
    }

    .defaultHomePreviewButton {
      color: #fff;
      background-color: #ffb038;
      width: 120px;
      height: 2.5rem;
      border-radius: 5px;
      margin-left: 1rem;
      font-size: 0.8rem;
    }

    .spiralPlane {
      position: absolute;
      top: 130px;
      left: 10px;
      z-index: 20;
      opacity: 1;
      width: 20%;
    }

    .defaultHomeTopDivSeparator {
      width: 100%;
      min-height: 50px;
      background-color: #696868;
      border: 1px solid #f1f1f1;
      margin-top: 0px;
    }

    .defaultHeroImagePortrait {
      display: none;
    }

    .defaultHeroImagePortraitBottom {
      display: none;
    }

    .defaultHomePageImageCard {
      width: 90%;
      display: flex;
      justify-content: center;
      position: relative;
      top: -50px;
      z-index: 5;
    }

    .defaultHeroImageLandscape {
      width: 80%;
    }

    /*** Subjects Cards ***/

    .defaultSubjectCardsMainDiv {
      padding: 40px 10px;
      background: linear-gradient(to bottom, #f9fafb, #ffffff);
    }

    .defaultSubjectCardsDiv {
      flex-direction: column;
      min-width: 100%;
    }

    .subjectCardsHeader {
      text-align: center;
      margin-bottom: 60px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .subjectCardsTitle {
      font-size: 1.8rem;
      font-weight: 700;
      color: #111827;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .subjectCardsSubtitle {
      font-size: 1.125rem;
      color: #6b7280;
      line-height: 1.75;
    }

    .subjectCard {
      background: white;
      border-radius: 16px;
      padding: 40px 32px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      width: 60%;
      margin: 20px auto;
    }

    .subjectCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--card-color);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .subjectCard:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.08);
    }

    .subjectCard:hover::before {
      transform: scaleX(1);
    }

    .subjectCardIconWrapper {
      width: 64px;
      height: 64px;
      background: linear-gradient(
        135deg,
        var(--card-color) 20,
        var(--card-color) 10
      );
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }

    .subjectIcon {
      width: 32px;
      height: 32px;
      color: var(--card-color);
    }

    .subjectCardsHeading {
      font-size: 1.5rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 16px;
    }

    .subjectCardDescription {
      font-size: 0.975rem;
      line-height: 1.6;
      color: #4b5563;
      margin-bottom: 24px;
      flex-grow: 1;
    }

    .subjectCardTopics {
      margin-bottom: 32px;
    }

    .topicsTitle {
      font-size: 0.875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #6b7280;
      margin-bottom: 12px;
    }

    .topicsList {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .topicItem {
      display: flex;
      align-items: center;
      font-size: 0.875rem;
      color: #374151;
      margin-bottom: 8px;
    }

    .topicBullet {
      color: var(--card-color);
      margin-right: 8px;
      font-weight: 700;
    }

    .subjectCardFooter {
      margin-top: auto;
    }

    .exploreButton {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: var(--card-color);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 0.975rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .exploreButton:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .exploreIcon {
      transition: transform 0.2s ease;
    }

    .exploreButton:hover .exploreIcon {
      transform: translateX(4px);
    }

    /** End of Subjects Cards ***/

    /*** Notes and Practice Home Page ***/
    .notesAndPracticeHomeInfoDiv {
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100px 20px;
      background: #f8fafc;
      position: relative;
      overflow: hidden;
    }

    .sectionHeaderStyle {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .sectionTitleStyle {
      font-size: 3rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    .sectionSubtitleStyle {
      font-size: 1.25rem;
      color: #64748b;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .featuresGridStyle {
      width: 100%;
      flex-direction: column;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .getFeatureCardStyle {
      background-color: #fff;
      width: 60%;
      border-radius: 24px;
      padding: 48px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      margin: 20px auto;
    }

    .cardHeaderStyle {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 24px;
    }

    .featureTitleStyle {
      font-size: 1.5rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0;
    }

    .featureDescriptionStyle {
      font-size: 1.0625rem;
      line-height: 1.7;
      color: #475569;
      margin-bottom: 32px;
    }

    .featuresListStyle {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 40px;
    }

    .featureItemStyle {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .featureItemTextStyle {
      font-size: 0.9375rem;
      color: #334155;
      font-weight: 500;
    }

    /* End of Notes and Practice Home Page ***/

    /*** Personalized Adaptive Flexible Component ***/
    .pafMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
      position: relative;
      overflow: hidden;
    }

    .pafMainContainer::before {
      content: "";
      position: absolute;
      top: -40%;
      left: -40%;
      width: 180%;
      height: 180%;
      background: radial-gradient(
        circle,
        rgba(139, 92, 246, 0.03) 0%,
        transparent 60%
      );
      animation: pafFloat 25s ease-in-out infinite;
    }

    @keyframes pafFloat {
      0%,
      100% {
        transform: translate(0, 0) rotate(0deg);
      }
      33% {
        transform: translate(30px, -30px) rotate(120deg);
      }
      66% {
        transform: translate(-20px, 20px) rotate(240deg);
      }
    }

    .pafHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pafTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #111827;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    .pafSubtitle {
      font-size: 1.25rem;
      color: #6b7280;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pafFeaturesGrid {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 1400px;
      margin: 50px auto;
      z-index: 1;
    }

    .pafFeatureCard {
      background: white;
      width: 60%;
      border-radius: 20px;
      padding: 50px 40px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      cursor: pointer;
      animation: pafSlideUp 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateX(40px);
      margin: 20px auto;
    }

    @keyframes pafSlideUp {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .pafFeatureCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--feature-gradient);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 0;
    }

    .pafFeatureCard::after {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: var(--feature-gradient);
      border-radius: 20px;
      opacity: 0;
      z-index: -1;
      transition: opacity 0.4s ease;
    }

    .pafFeatureCard:hover {
      transform: translateY(-12px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .pafFeatureCard:hover::before {
      opacity: 0.05;
    }

    .pafFeatureCard:hover::after {
      opacity: 0.3;
    }

    .pafFeatureCard:hover .pafIconWrapper {
      transform: scale(1.1) rotate(10deg);
    }

    .pafFeatureCard:hover .pafFeatureTitle {
      color: var(--feature-color);
    }

    .pafCardNumber {
      position: absolute;
      top: 30px;
      right: 30px;
      font-size: 4rem;
      font-weight: 900;
      color: var(--feature-color);
      opacity: 0.1;
      letter-spacing: -0.02em;
      z-index: 1;
    }

    .pafIconWrapper {
      width: 80px;
      height: 80px;
      background: var(--feature-gradient);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      position: relative;
      z-index: 1;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .pafFeatureIcon {
      width: 40px;
      height: 40px;
      color: white;
    }

    .pafFeatureTitle {
      font-size: 1.75rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
    }

    .pafFeatureDescription {
      font-size: 1.125rem;
      line-height: 1.8;
      color: #4b5563;
      margin-bottom: 35px;
      position: relative;
      z-index: 1;
    }

    .pafHighlights {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      z-index: 1;
    }

    .pafHighlightItem {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .pafHighlightDot {
      width: 8px;
      height: 8px;
      background: var(--feature-gradient);
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
    }

    .pafHighlightDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
    }

    .pafHighlightItem span {
      font-size: 1rem;
      color: #374151;
      font-weight: 500;
      line-height: 1.6;
    }
    /* End of Personalized Adaptive Flexible Component ***/

    /*** Pricing Cards Component ***/
    .pcMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
      position: relative;
      overflow: hidden;
    }

    .pcMainContainer::before {
      content: "";
      position: absolute;
      top: -30%;
      right: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(245, 87, 108, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite;
    }

    .pcMainContainer::after {
      content: "";
      position: absolute;
      bottom: -30%;
      left: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(79, 172, 254, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite reverse;
    }

    @keyframes pcFloat {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(50px, -50px) scale(1.1);
      }
    }

    .pcHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pcTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
      background: linear-gradient(135deg, #667eea 0%, #f5576c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .pcSubtitle {
      font-size: 1.375rem;
      color: #64748b;
      max-width: 650px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pcCardsWrapper {
      position: relative;
      z-index: 1;
    }

    .pcCardsGrid {
      display: grid;
      grid-template-columns: repeat(1, 3fr);
      gap: 40px;
      max-width: 450px;
      margin: 0 auto;
      align-items: stretch;
    }

    .pcCard {
      background: white;
      border-radius: 24px;
      padding: 48px 40px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 20px var(--shadow-color);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: pcCardSlide 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateY(40px);
    }

    @keyframes pcCardSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pcCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: var(--card-gradient);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .pcCard:hover {
      transform: translateY(-12px);
      box-shadow: 0 20px 40px var(--shadow-color);
    }

    .pcCard:hover::before {
      transform: scaleX(1);
    }

    .pcCard:hover .pcCtaButton {
      transform: scale(1.05);
    }

    .pcCardHighlighted {
      border: 2px solid transparent;
      background: linear-gradient(white, white) padding-box,
        var(--card-gradient) border-box;
      transform: scale(1.05);
    }

    .pcCardHighlighted:hover {
      transform: scale(1.08) translateY(-12px);
    }

    .pcBadge {
      position: absolute;
      top: 0px;
      right: 32px;
      background: var(--card-gradient);
      color: white;
      padding: 6px 20px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      animation: pcBadgePulse 2s ease-in-out infinite;
    }

    @keyframes pcBadgePulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }

    .pcCardHeader {
      text-align: center;
      margin-bottom: 40px;
    }

    .pcPlanName {
      font-size: 1.875rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 20px;
    }

    .pcPriceWrapper {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
      margin-bottom: 16px;
    }

    .pcPrice {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1;
    }

    .pcPeriod {
      font-size: 1.25rem;
      color: #64748b;
      font-weight: 500;
    }

    .pcDescription {
      font-size: 1rem;
      color: #64748b;
      line-height: 1.6;
    }

    .pcFeatures {
      flex-grow: 1;
      margin-bottom: 40px;
    }

    .pcFeaturesList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pcFeatureItem {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pcCheckIcon {
      width: 20px;
      height: 20px;
      color: #10b981;
      flex-shrink: 0;
    }

    .pcFeatureItem span {
      font-size: 0.975rem;
      color: #475569;
      line-height: 1.5;
    }

    .pcCardFooter {
      margin-top: auto;
    }

    .pcCtaButton {
      width: 100%;
      padding: 16px 32px;
      background: #e5e7eb;
      color: #374151;
      border: none;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .pcCtaButton::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--card-gradient);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pcCtaButton:hover {
      background: #d1d5db;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .pcCtaHighlighted {
      background: var(--card-gradient);
      color: white;
    }

    .pcCtaHighlighted:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 24px var(--shadow-color);
    }

    .pcCtaHighlighted:hover::before {
      opacity: 0.2;
    }

    .pcArrowIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .pcCtaButton:hover .pcArrowIcon {
      transform: translateX(4px);
    }

    .pcCardGlow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150%;
      height: 150%;
      background: radial-gradient(
        circle,
        var(--shadow-color) 0%,
        transparent 70%
      );
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .pcCard:hover .pcCardGlow {
      opacity: 0.3;
    }

    .pcFooter {
      text-align: center;
      margin-top: 80px;
      position: relative;
      z-index: 1;
    }

    .pcGuarantee {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 0.975rem;
      color: #64748b;
      background: white;
      padding: 16px 32px;
      border-radius: 50px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .pcShieldIcon {
      width: 24px;
      height: 24px;
      color: #10b981;
    }
    /* End of Pricing Cards Component ***/

    /*** IlearnSTEM Description Component ***/
    .isdMainContainer {
      width: 100%;
      padding: 100px 40px 0;
      background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
      position: relative;
      overflow: hidden;
    }

    .isdContentWrapper {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .isdTextSection {
      animation: isdSlideInLeft 0.8s ease-out;
    }

    @keyframes isdSlideInLeft {
      from {
        opacity: 0;
        transform: translateX(-40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .isdHeaderBadge {
      display: inline-block;
      margin-bottom: 24px;
    }

    .isdHeaderBadge span {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 8px 20px;
      border-radius: 30px;
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .isdTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
      margin-bottom: 24px;
      letter-spacing: -0.03em;
    }

    .isdTitleHighlight {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .isdDescription {
      font-size: 1.25rem;
      line-height: 1.8;
      color: #475569;
      margin-bottom: 40px;
    }

    .isdFeatures {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 48px;
    }

    .isdFeatureItem {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      opacity: 0;
      animation: isdFadeInUp 0.6s ease-out forwards;
      animation-delay: calc(var(--feature-index, 0) * 0.1s);
    }

    .isdFeatureItem:nth-child(1) {
      --feature-index: 0;
    }
    .isdFeatureItem:nth-child(2) {
      --feature-index: 1;
    }
    .isdFeatureItem:nth-child(3) {
      --feature-index: 2;
    }

    @keyframes isdFadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
      from {
        opacity: 0;
        transform: translateY(20px);
      }
    }

    .isdFeatureDot {
      width: 12px;
      height: 12px;
      background: var(--feature-color);
      border-radius: 50%;
      margin-top: 6px;
      flex-shrink: 0;
      position: relative;
    }

    .isdFeatureDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
      animation: isdPulse 2s ease-in-out infinite;
    }

    @keyframes isdPulse {
      0%,
      100% {
        transform: scale(1);
        opacity: 0.2;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.1;
      }
    }

    .isdFeatureContent {
      flex: 1;
    }

    .isdFeatureTitle {
      font-size: 1.125rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .isdFeatureDesc {
      font-size: 0.975rem;
      color: #64748b;
      line-height: 1.5;
    }

    .isdCta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .isdCtaButton {
      padding: 16px 32px;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .isdCtaPrimary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
    }

    .isdCtaPrimary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }

    .isdCtaSecondary {
      background: white;
      color: #475569;
      border: 2px solid #e5e7eb;
    }

    .isdCtaSecondary:hover {
      border-color: #667eea;
      color: #667eea;
      background: #f3f4f6;
    }

    .isdCtaIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
    }

    .isdCtaButton:hover .isdCtaIcon {
      transform: translateX(4px);
    }

    .isdVisualSection {
      position: relative;
      animation: isdSlideInRight 0.8s ease-out;
    }

    @keyframes isdSlideInRight {
      from {
        opacity: 0;
        transform: translateX(40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .isdGraphicContainer {
      position: relative;
      width: 100%;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdFloatingCard {
      position: absolute;
      background: white;
      border-radius: 16px;
      padding: 20px 24px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      color: #1e293b;
      animation: isdFloat 4s ease-in-out infinite;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .isdFloatingCard:hover {
      transform: scale(1.05);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .isdCard1 {
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }

    .isdCard2 {
      top: 60%;
      right: 15%;
      animation-delay: 1.3s;
    }

    .isdCard3 {
      bottom: 20%;
      left: 20%;
      animation-delay: 2.6s;
    }

    @keyframes isdFloat {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    .isdCardIcon {
      width: 32px;
      height: 32px;
      color: #667eea;
    }

    .isdCentralOrb {
      position: relative;
      width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdOrbCore {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%;
      box-shadow: 0 0 60px rgba(102, 126, 234, 0.6);
      animation: isdOrbPulse 3s ease-in-out infinite;
    }

    @keyframes isdOrbPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
    }

    .isdOrbRing {
      position: absolute;
      border: 2px solid rgba(102, 126, 234, 0.2);
      border-radius: 50%;
      animation: isdRingExpand 4s ease-out infinite;
    }

    .isdRing1 {
      width: 120px;
      height: 120px;
      animation-delay: 0s;
    }

    .isdRing2 {
      width: 160px;
      height: 160px;
      animation-delay: 1s;
    }

    .isdRing3 {
      width: 200px;
      height: 200px;
      animation-delay: 2s;
    }

    @keyframes isdRingExpand {
      0% {
        transform: scale(0.8);
        opacity: 1;
      }
      100% {
        transform: scale(1.3);
        opacity: 0;
      }
    }

    .isdStatsSection {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 80px 40px;
      margin-top: 100px;
      position: relative;
      overflow: hidden;
    }

    .isdStatsSection::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .isdStatsGrid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      gap: 40px;
      position: relative;
      z-index: 1;
    }

    .isdStatCard {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      padding: 32px;
      text-align: center;
      transition: all 0.3s ease;
      animation: isdStatSlide 0.8s ease-out forwards;
      animation-delay: var(--stat-delay);
      opacity: 0;
      transform: translateY(30px);
    }

    @keyframes isdStatSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .isdStatCard:hover {
      transform: translateY(-8px);
      background: rgba(255, 255, 255, 0.15);
    }

    .isdStatIconWrapper {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      margin-bottom: 16px;
    }

    .isdStatIcon {
      width: 32px;
      height: 32px;
      color: white;
    }

    .isdStatValue {
      font-size: 2.5rem;
      font-weight: 800;
      color: white;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    .isdStatLabel {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }
    /* End of IlearnSTEM Description Component ***/

    /*** Default Home Footer Component ***/
    .dhfMainContainer {
      width: 100%;
      background: #0f172a;
      position: relative;
      overflow: hidden;
      margin-top: 100px;
    }

    /* Partners Section */
    .dhfPartnersSection {
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
      padding: 80px 40px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dhfPartnersWrapper {
      max-width: 1400px;
      margin: 0 auto;
    }

    .dhfPartnersTitle {
      text-align: center;
      font-size: 2rem;
      font-weight: 700;
      color: white;
      margin-bottom: 50px;
      opacity: 0;
      animation: dhfFadeInDown 0.8s ease-out forwards;
    }

    @keyframes dhfFadeInDown {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dhfPartnersGrid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 40px;
      align-items: center;
    }

    .dhfPartnerCard {
      text-align: center;
      opacity: 0;
      animation: dhfPartnerSlide 0.6s ease-out forwards;
      animation-delay: var(--partner-delay);
      transition: all 0.3s ease;
      cursor: pointer;
    }

    @keyframes dhfPartnerSlide {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dhfPartnerCard:hover {
      transform: translateY(-5px);
    }

    .dhfPartnerLogo {
      width: 80px;
      height: 80px;
      margin: 0 auto 16px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
    }

    .dhfPartnerCard:hover .dhfPartnerLogo {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
    }

    .dhfPartnerInitial {
      font-size: 1.5rem;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.6);
      letter-spacing: -0.02em;
    }

    .platinumPartner .dhfPartnerInitial {
      color: #e5e7eb;
    }
    .goldPartner .dhfPartnerInitial {
      color: #fbbf24;
    }
    .silverPartner .dhfPartnerInitial {
      color: #9ca3af;
    }

    .dhfPartnerName {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.9);
      margin-bottom: 4px;
    }

    .dhfPartnerLevel {
      display: block;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.5);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* Main Footer Content */
    .dhfContentSection {
      padding: 80px 40px 40px;
      position: relative;
      z-index: 1;
    }

    .dhfContentWrapper {
      max-width: 1400px;
      margin: 0 auto;
    }

    .dhfTopSection {
      display: grid;
      grid-template-columns: 2fr 3fr;
      gap: 80px;
      margin-bottom: 80px;
    }

    /* Brand Column */
    .dhfBrandColumn {
      opacity: 0;
      animation: dhfSlideInLeft 0.8s ease-out 0.2s forwards;
    }

    @keyframes dhfSlideInLeft {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .dhfLogo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
    }

    .dhfLogoIcon {
      width: 40px;
      height: 40px;
      color: #667eea;
    }

    .dhfLogoText {
      font-size: 1.5rem;
      font-weight: 700;
      color: white;
      letter-spacing: -0.02em;
    }

    .dhfBrandDesc {
      font-size: 12px;
      line-height: 1.7;
      color: #94a3b8;
      margin-bottom: 32px;
      max-width: 400px;
    }

    .dhfNewsletterForm {
      display: flex;
      gap: 12px;
      max-width: 400px;
    }

    .dhfNewsletterInput {
      flex: 1;
      padding: 14px 20px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      color: white;
      font-size: 0.75rem;
      transition: all 0.3s ease;
    }

    .dhfNewsletterInput::placeholder {
      color: #64748b;
    }

    .dhfNewsletterInput:focus {
      outline: none;
      background: rgba(255, 255, 255, 0.08);
      border-color: #667eea;
    }

    .dhfNewsletterButton {
      padding: 10px 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .dhfNewsletterButton:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    }

    .dhfNewsletterIcon {
      width: 16px;
      height: 16px;
    }

    /* Links Grid */
    .dhfLinksGrid {
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      gap: 10px;
      opacity: 0;
      animation: dhfSlideInRight 0.8s ease-out 0.4s forwards;
    }

    @keyframes dhfSlideInRight {
      from {
        opacity: 0;
        transform: translateX(30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .dhfLinkColumn {
      display: flex;
      flex-direction: column;
    }

    .dhfLinkColumnTitle {
      font-size: 0.75rem;
      font-weight: 700;
      color: white;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 20px;
    }

    .dhfLinkList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dhfLinkItem {
      position: relative;
    }

    .dhfLink {
      color: #94a3b8;
      text-decoration: none;
      font-size: 12px;
      transition: all 0.3s ease;
      position: relative;
      display: inline-block;
    }

    .dhfLink::after {
      content: "";
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: #667eea;
      transition: width 0.3s ease;
    }

    .dhfLink:hover {
      color: white;
    }

    .dhfLink:hover::after {
      width: 100%;
    }

    /* Bottom Section */
    .dhfBottomSection {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 40px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      opacity: 0;
      animation: dhfFadeInUp 0.8s ease-out 0.6s forwards;
    }

    @keyframes dhfFadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .dhfCopyright p {
      color: #94a3b8;
      font-size: 0.875rem;
      margin: 0;
    }

    .dhfTagline {
      margin-top: 4px;
      font-size: 0.75rem;
      color: #64748b;
    }

    .dhfSocialLinks {
      display: flex;
      gap: 16px;
    }

    .dhfSocialLink {
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .dhfSocialLink:hover {
      background: rgba(255, 255, 255, 0.1);
      border-color: #667eea;
      transform: translateY(-3px);
    }

    .dhfSocialIcon {
      width: 20px;
      height: 20px;
      color: #94a3b8;
      transition: color 0.3s ease;
    }

    .dhfSocialLink:hover .dhfSocialIcon {
      color: white;
    }

    /* Decorative Elements */
    .dhfDecorativeGradient {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        #667eea 50%,
        transparent 100%
      );
      opacity: 0.5;
    }

    .dhfFloatingOrbs {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .dhfOrb {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(102, 126, 234, 0.1) 0%,
        transparent 70%
      );
      filter: blur(40px);
    }

    .dhfOrb1 {
      width: 400px;
      height: 400px;
      top: -200px;
      right: -200px;
      animation: dhfOrbFloat1 20s ease-in-out infinite;
    }

    .dhfOrb2 {
      width: 300px;
      height: 300px;
      bottom: -150px;
      left: -150px;
      animation: dhfOrbFloat2 25s ease-in-out infinite;
    }

    .dhfOrb3 {
      width: 250px;
      height: 250px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: dhfOrbFloat3 30s ease-in-out infinite;
    }

    @keyframes dhfOrbFloat1 {
      0%,
      100% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(-100px, 50px);
      }
    }

    @keyframes dhfOrbFloat2 {
      0%,
      100% {
        transform: translate(0, 0);
      }
      50% {
        transform: translate(50px, -100px);
      }
    }

    @keyframes dhfOrbFloat3 {
      0%,
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
      50% {
        transform: translate(-50%, -50%) scale(1.2);
      }
    }
    /* End of Default Home Footer Component ***/

    /* Default Login Component Styles - Portrait */
    .dlMainContainer {
      width: 100%;
      min-height: calc(100vh - 50px);
      margin-top: 50px;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding: 1rem;
    }

    /* Animated background */
    .dlBackgroundAnimation {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
    }

    .dlParticle {
      position: absolute;
      background: rgba(58, 169, 232, 0.1);
      border-radius: 50%;
      animation: dlFloat 20s linear infinite;
    }

    .dlGradientOrb {
      position: absolute;
      border-radius: 50%;
      filter: blur(60px);
      opacity: 0.2;
      animation: dlOrbitFloat 30s ease-in-out infinite;
    }

    .dlOrb1 {
      width: 250px;
      height: 250px;
      background: radial-gradient(circle, #3aa9e8 0%, transparent 70%);
      top: -100px;
      left: -100px;
    }

    .dlOrb2 {
      width: 200px;
      height: 200px;
      background: radial-gradient(circle, #ffb038 0%, transparent 70%);
      bottom: -100px;
      right: -100px;
      animation-delay: -10s;
    }

    .dlOrb3 {
      width: 150px;
      height: 150px;
      background: radial-gradient(circle, #667eea 0%, transparent 70%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation-delay: -20s;
    }

    .dlContentWrapper {
      width: 100%;
      max-width: 500px;
      padding: 1rem;
      position: relative;
      z-index: 1;
    }

    /* Header Section */
    .dlHeaderSection {
      text-align: center;
      margin-bottom: 2rem;
      opacity: 0;
      transform: translateY(-20px);
      transition: all 0.8s ease-out;
    }

    .dlHeaderSection.dlVisible {
      opacity: 1;
      transform: translateY(0);
    }

    .dlMainTitle {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      margin-bottom: 0.75rem;
    }

    .dlWelcome {
      font-size: 1.125rem;
      color: #64748b;
      font-weight: 400;
    }

    .dlBrandName {
      font-size: 2.25rem;
      font-weight: 800;
      color: #1e293b;
      letter-spacing: -0.02em;
    }

    .dlHighlight {
      background: linear-gradient(135deg, #3aa9e8 0%, #667eea 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .dlSubtitle {
      font-size: 0.875rem;
      color: #64748b;
      max-width: 300px;
      margin: 0 auto;
      line-height: 1.5;
    }

    /* Form Container */
    .dlFormContainer {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.8s ease-out 0.2s;
    }

    .dlFormContainer.dlFormVisible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Login Card */
    .dlLoginCard {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      padding: 2rem 1.5rem;
      width: 100%;
      max-width: 400px;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.5);
      position: relative;
      overflow: hidden;
    }

    .dlLoginCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #3aa9e8 0%, #667eea 50%, #ffb038 100%);
    }

    .dlCardHeader {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .dlCardTitle {
      font-size: 1.5rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 0.25rem;
    }

    .dlCardSubtitle {
      font-size: 0.875rem;
      color: #64748b;
    }

    /* Error Message */
    .dlErrorMessage {
      background: #fee2e2;
      border: 1px solid #fecaca;
      border-radius: 10px;
      padding: 0.75rem;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      animation: dlShake 0.5s ease-out;
      font-size: 0.875rem;
    }

    .dlErrorIcon {
      font-size: 1rem;
    }

    .dlErrorText {
      color: #dc2626;
      font-size: 0.75rem;
    }

    /* Form Group */
    .dlFormGroup {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .dlInputWrapper {
      position: relative;
      transition: all 0.3s ease;
    }

    .dlLabel {
      display: block;
      font-size: 0.75rem;
      font-weight: 600;
      color: #475569;
      margin-bottom: 0.375rem;
    }

    .dlInputContainer {
      position: relative;
      display: flex;
      align-items: center;
    }

    .dlInputIcon {
      position: absolute;
      left: 0.875rem;
      font-size: 1rem;
      z-index: 1;
    }

    .dlInput {
      width: 100%;
      padding: 0.75rem 2.5rem 0.75rem 2.5rem;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      font-size: 0.875rem;
      transition: all 0.3s ease;
      background: #f9fafb;
    }

    .dlInput:focus {
      outline: none;
      border-color: #3aa9e8;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(58, 169, 232, 0.1);
    }

    .dlPasswordToggle {
      position: absolute;
      right: 0.875rem;
      background: none;
      border: none;
      font-size: 1rem;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity 0.3s ease;
    }

    .dlForgotPassword {
      text-align: right;
      margin-top: -0.5rem;
    }

    .dlForgotLink {
      font-size: 0.75rem;
      color: #3aa9e8;
      text-decoration: none;
      transition: color 0.3s ease;
    }

    /* Submit Button */
    .dlSubmitButton {
      width: 100%;
      padding: 0.875rem;
      background: linear-gradient(135deg, #3aa9e8 0%, #667eea 100%);
      color: white;
      border: none;
      border-radius: 10px;
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 0.5rem;
    }

    .dlSubmitButton:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(58, 169, 232, 0.3);
    }

    .dlLoadingSpinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: dlSpin 1s linear infinite;
    }

    .dlButtonText {
      position: relative;
      z-index: 1;
    }

    .dlButtonArrow {
      font-size: 1rem;
      transition: transform 0.3s ease;
    }

    .dlButtonShine {
      position: absolute;
      top: -50%;
      left: -100%;
      width: 100%;
      height: 200%;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
      );
      transform: skewX(-45deg);
      transition: left 0.5s ease;
    }

    /* Divider */
    .dlDivider {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin: 1.5rem 0;
    }

    .dlDividerLine {
      flex: 1;
      height: 1px;
      background: #e5e7eb;
    }

    .dlDividerText {
      font-size: 0.75rem;
      color: #9ca3af;
      font-weight: 500;
    }

    /* Social Login */
    .dlGoogleButton {
      width: 100%;
      padding: 0.75rem;
      background: white;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      font-size: 0.875rem;
    }

    .dlGoogleButton:hover:not(:disabled) {
      border-color: #4285f4;
      box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15);
      transform: translateY(-2px);
    }

    .dlGoogleIcon {
      width: 18px;
      height: 18px;
    }

    .dlGoogleText {
      font-size: 0.875rem;
      font-weight: 600;
      color: #1e293b;
    }

    /* Signup Prompt */
    .dlSignupPrompt {
      text-align: center;
      margin-top: 1.5rem;
    }

    .dlSignupText {
      font-size: 0.75rem;
      color: #64748b;
    }

    .dlSignupLink {
      color: #3aa9e8;
      text-decoration: none;
      font-weight: 600;
      position: relative;
      transition: color 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
    }

    .dlLinkArrow {
      transition: transform 0.3s ease;
      font-size: 0.875rem;
    }

    /* Features Section - Hidden on mobile */
    .dlFeatures {
      display: none;
    }

    /* Bottom Decoration */
    .dlBottomDecoration {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 50px;
      overflow: hidden;
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.8s ease-out 0.6s;
    }

    .dlBottomDecoration.dlDecorationVisible {
      opacity: 1;
      transform: translateY(0);
    }

    .dlWave {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 200%;
      height: 100%;
      background-repeat: repeat-x;
      animation: dlWaveMove 20s linear infinite;
    }

    .dlWave1 {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%233aa9e8' opacity='0.1'/%3E%3C/svg%3E");
      background-size: 1200px 80px;
    }

    .dlWave2 {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23667eea' opacity='0.1'/%3E%3C/svg%3E");
      background-size: 1200px 80px;
      animation-delay: -5s;
    }

    .dlWave3 {
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23ffb038' opacity='0.05'/%3E%3C/svg%3E");
      background-size: 1200px 80px;
      animation-delay: -10s;
    }

    .settingsDiv {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-top: 50px;
      padding-top: 3rem;
    }

    .settingsBack {
      position: absolute;
      left: 1rem;
      top: 55px;
      color: #122e3b;
    }

    .settingsBack:hover {
      cursor: pointer;
    }

    .settingsTopDiv {
      width: 500px;
      height: 50px;
      margin-top: 10px;
      padding: 0px 20px;
    }

    .curriculumCountryDropDown,
    .curriculumProvinceOrStateDropDown,
    .notesOrPracticeSelect {
      display: flex;
      flex-direction: row;
      width: 150px;
      height: 35px;
      align-items: center;
      color: #aeaeae;
      margin-bottom: 20px;
      margin: 0px 10px;
      font-size: 0.8rem;
      border: 0.3px solid #aeaeae;
      border-radius: 0;
    }

    .settingsSubjectsDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 2rem;
    }

    .settingsSubjectsDiv button {
      width: 115px;
      height: 115px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #122e3b;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
    }

    .settingsPhysicsButton {
      background-color: rgba(153, 217, 255, 0.5);
    }

    .settingsChemistryButton {
      background: rgba(0, 128, 128, 0.15);
      margin-left: 1rem;
    }

    .settingsEarthAndSpaceSciencesButton {
      background: rgba(255, 255, 0, 0.5);
      margin-left: 1rem;
    }

    .settingsMathematicsButton1,
    .settingsMathematicsButton2 {
      background: rgba(132, 31, 39, 0.25);
      margin-left: 1rem;
    }

    .settingsSubjectsDiv button:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .otherSubjectDropDownDiv {
      justify-content: center;
      align-items: center;
      background-color: rgba(197, 205, 216, 1);
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-left: 20px;
    }

    .otherSubjectSelect {
      background-color: inherit;
      width: 85px;
      height: 35px;
      border: none;
      outline: none;
    }

    .otherSubjectDropDownDiv:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .settingsTopicsMainDiv {
      width: 100%;
      margin-top: 50px;
    }

    .settingsGradeLevelAndCurriculaMainDiv {
      width: 100%;
      margin: 20px auto;
      flex-direction: row;
    }

    .settingsGradeLevelSelect {
      height: 35px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-right: 10px;
    }

    .settingsCurriculumSelect {
      width: 60%;
      height: 35px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-left: 10px;
    }

    .settingsTopicsMainDiv h3 {
      font-size: 1.3rem;
      padding: 0px 10px;
      text-align: center;
      color: #122e3b;
    }

    .settingsTopicsMainDiv span {
      color: #ffb038;
    }

    .settingsTopicsMainDiv h2 {
      font-size: 1.3rem;
      text-align: center;
    }

    .settings_strand_div,
    .settings_strand_div1 {
      width: 90%;
      padding: 20px;
      margin: 20px auto;
    }

    .settings_strand_subtrand_p_div {
      width: 100%;
      cursor: pointer;
    }

    .settings_strand_subtrand_p_div:hover {
      background-color: #f0f0f0;
      text-decoration: underline;
    }

    .settings_strand_subtrand_p_div_p1 {
      font-weight: 600;
      margin-left: 20px;
      width: 80%;
      margin-top: 50px;
    }

    .settings_strand_substrand_p_div_p2 {
      margin-left: 40px;
      margin-top: 25px;
    }

    .section_strand_select,
    .section_super_strand_select,
    .curriculum_select {
      color: #777777;
      border: 1px solid rgba(119, 119, 119, 0.4);
      border-radius: 5px;
      padding: 7px;
      font-size: 0.8rem;
      width: 80%;
      margin: 5px auto;
    }

    .loginCard {
      width: 600px;
      height: 450px;
      border-radius: 20px;
      background: #ffffff;
      border: 0.3px solid #b5c5cd;
    }

    .registrationCard {
      width: 600px;
      height: 450px;
      border-radius: 20px;
      background: #ffffff;
      border: 0.3px solid #b5c5cd;
    }

    .loginCardInputDiv input,
    .registrationDiv input {
      background-color: #b5c5cd;
      width: 250px;
      height: 40px;
      margin-bottom: 10px;
      border: none;
      padding-left: 10px;
      margin-bottom: 20px;
    }

    /* Default Settings Portrait Styles */
    .defaultSettingsContainer {
      min-height: calc(100vh - 50px);
      margin-top: 50px;
      background-color: #f5f7fa;
      padding: 20px;
    }

    .defaultSettingsHeader {
      width: 80%;
      margin: 0 auto 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .defaultSettingsBackButton {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #1976d2;
      text-decoration: none;
      font-weight: 500;
      font-size: 10px;
      transition: all 0.3s ease;
    }

    .defaultSettingsBackButton:hover {
      color: #1565c0;
      transform: translateX(-5px);
    }

    .defaultSettingsTitle {
      font-size: 14px;
      color: #1a237e;
      margin-right: 20px;
      font-weight: 700;
    }

    .defaultSettingsCard {
      width: 80%;
      margin: 0 auto;
      background: white;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      padding: 20px;
    }

    .defaultSettingsRow {
      display: grid;
      grid-template-columns: 1fr; /* 1 equal columns */
      grid-template-rows: 1fr 1fr 1fr; /* 3 equal rows */
      gap: 10px;
      margin-bottom: 40px;
    }

    .defaultSettingsSection {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .defaultSettingsLabel {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .defaultSettingsCountrySelect {
      display: flex;
      gap: 20px;
    }

    .defaultSettingsCountryOption {
      flex: 1;
      padding: 10px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      transition: all 0.3s ease;
      position: relative;
    }

    .defaultSettingsCountryActive {
      border-color: #1976d2;
      background-color: #e3f2fd;
    }

    .defaultSettingsCountryDisabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .defaultSettingsFlag {
      font-size: 10px;
    }

    .defaultSettingsComingSoon {
      position: absolute;
      top: -8px;
      right: -8px;
      background: #ff6b6b;
      color: white;
      font-size: 10px;
      padding: 4px 8px;
      border-radius: 12px;
      font-weight: 600;
    }

    .defaultSettingsProvinceBox {
      padding: 10px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #f8fafc;
      font-weight: 500;
      font-size: 10px;
      width: 200px;
      margin-left: 50px;
    }

    .defaultSettingsProvinceIcon {
      font-size: 12px;
    }

    .defaultSettingsModeToggle {
      display: flex;
      background: #f1f5f9;
      border-radius: 12px;
      padding: 4px;
    }

    .defaultSettingsModeButton {
      flex: 1;
      padding: 12px 24px;
      border: none;
      background: transparent;
      cursor: pointer;
      font-weight: 500;
      font-size: 10px;
      border-radius: 8px;
      transition: all 0.3s ease;
      color: #64748b;
    }

    .defaultSettingsModeActive {
      background: white;
      color: #1976d2;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectSection {
      margin-bottom: 30px;
    }

    .defaultSettingsSectionTitle {
      font-size: 20px;
      color: #334155;
      margin-bottom: 20px;
      font-weight: 600;
    }

    .defaultSettingsSubjectGrid {
      display: grid;
      grid-template-columns: repeat(2, 2fr);
      gap: 16px;
    }

    .defaultSettingsSubjectCard {
      padding: 10px;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      background: white;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
    }

    .defaultSettingsSubjectCard:hover {
      border-color: var(--subject-color);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectActive {
      border-color: var(--subject-color);
      background: linear-gradient(to bottom, white, rgba(33, 150, 243, 0.05));
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsSubjectIcon {
      font-size: 20px;
    }

    .defaultSettingsSubjectName {
      font-weight: 600;
      color: #334155;
      font-size: 12px;
    }

    .defaultSettingsSubjectGrades {
      font-size: 12px;
      color: #94a3b8;
    }

    .defaultSettingsGradeSection {
      border-top: 1px solid #e5e7eb;
      padding-top: 30px;
    }

    .defaultSettingsGradeRow {
      display: flex;
      gap: 20px;
    }

    .defaultSettingsGradeSelect,
    .defaultSettingsCurriculumSelect {
      width: 200px;
    }

    .defaultSettingsSelect {
      width: 100%;
      padding: 12px 16px;
      border: 2px solid #e5e7eb;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: border-color 0.3s ease;
    }

    .defaultSettingsSelect:hover,
    .defaultSettingsSelect:focus {
      border-color: #1976d2;
      outline: none;
    }

    .defaultSettingsTopicsSection {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }

    .defaultSettingsTopicsTitle {
      font-size: 20px;
      color: #1a237e;
      margin-bottom: 20px;
      text-align: center;
    }

    .defaultSettingsPracticeAllButton {
      display: block;
      margin: 0 auto 30px;
      padding: 12px 32px;
      background: #1976d2;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultSettingsPracticeAllButton:hover {
      background: #1565c0;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
    }

    .defaultSettingsTopicsList {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .defaultSettingsStrandCard {
      background: white;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      overflow: hidden;
      transition: all 0.3s ease;
      width: 80%;
      margin: auto;
    }

    .defaultSettingsStrandCard:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .defaultSettingsStrandHeader {
      padding: 20px 4px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      background: linear-gradient(to right, #f8fafc, #f1f5f9);
    }

    .defaultSettingsStrandTitle {
      font-size: 18px;
      color: #334155;
      margin: 0;
      font-weight: 600;
    }

    .defaultSettingsStrandActions {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .defaultSettingsPracticeButton {
      padding: 8px 20px;
      background: #1976d2;
      color: white;
      border: none;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .defaultSettingsPracticeButton:hover {
      background: #1565c0;
    }

    .defaultSettingsExpandIcon {
      color: #64748b;
      transition: transform 0.3s ease;
    }

    .defaultSettingsSubstrands {
      padding: 0 24px 20px;
      animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .defaultSettingsSubstrand {
      margin-top: 20px;
      padding-left: 20px;
      border-left: 3px solid #e5e7eb;
    }

    .defaultSettingsSubstrandTitle {
      font-size: 16px;
      color: #475569;
      margin: 0 0 12px;
      font-weight: 600;
    }

    .defaultSettingsTopicItem {
      padding: 12px 16px;
      margin: 8px 0;
      background: #f8fafc;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }

    .defaultSettingsTopicItem:hover {
      background: #e3f2fd;
      transform: translateX(4px);
    }

    .defaultSettingsTopicCode {
      font-weight: 600;
      color: #1976d2;
      font-size: 14px;
    }

    .defaultSettingsTopicName {
      color: #334155;
      font-size: 15px;
    }
    /* End of Default Settings Component - Portrait */

    /*** Navbar ***/

    .navbar1-version-toggle {
      margin-right: auto;
      margin-left: 16px;
    }

    .navbar1-nav-items {
      display: none;
    }

    .navbar1-desktop {
      display: none;
    }

    .navbar1-mobile-toggle {
      display: block;
    }

    .navbar1-mobile-menu {
      display: block;
    }

    .navbar1-container {
      padding: 0 16px;
    }

    /**** End of Navbar **/
  }

  /* End of (min-width: 768px) and (max-width: 1024px) */

  @media screen and (min-width: 1024.1px) {
    /* CSS styles for tablet portrait go here */
    .topNav {
      height: 50px;
      width: 100%;
      background: #122e3b;
      position: absolute;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logoDiv {
      width: 33%;
      display: flex;
      justify-content: flex-start;
      padding-left: 1rem;
    }

    .logo {
      display: flex;
      flex-direction: row;
      font-size: 1.2rem;
    }

    .logo:hover {
      opacity: 0.7;
      cursor: pointer;
    }

    .logoI {
      display: flex;
      flex-direction: column;
      width: 0.2rem;
      height: 1.5rem;
      position: relative;
      top: 0.25rem;
    }

    .logoITop {
      width: 0.2rem;
      height: 20%;
      background-color: #5e5656;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      position: relative;
      top: 1px;
    }

    .logoIMiddle {
      width: inherit;
      height: 60%;
      border-radius: 2px;
      background-color: #fffa83;
      z-index: 1;
    }

    .logoIBottom {
      display: inline;
      width: inherit;
      height: 20%;
      margin-top: 0;
      background-color: #e05d5d;
      clip-path: ellipse(45% 45% at 50% 50%);
      position: relative;
      top: -2.5px;
    }

    .logoLearn {
      color: #fff;
    }

    .logoS {
      color: #ffb038;
      font-weight: 900;
    }

    .logoT {
      color: #fffa83;
      font-weight: 900;
    }

    .logoE {
      color: #c7282d;
      font-weight: 900;
    }

    .logoM {
      color: #9c06c1;
      font-weight: 900;
    }

    .toggleSwitch {
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 25px;
      width: 48px;
      height: 25px;
      border: 1px solid #938b8b;
      background-color: #fff;
    }

    .toggleKnob {
      width: 23px;
      height: 23px;
      background-color: #b5c5cd;
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 50%;
      position: relative;
      left: 0px;
      transition: 1s;
    }

    .navToggleDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 34%;
      height: 50px;
      color: #fff;
    }

    .navToggleInnerDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 49px;
      color: #fff;
    }

    .navToggleDiv span {
      font-size: 0.9rem;
    }

    .chosenApp {
      font-weight: 600;
      text-decoration: underline;
      transition: 1.3s;
    }

    .notChosenApp {
      font-weight: 600;
      opacity: 0.5;
    }

    .dropDownBarsDiv {
      width: 33%;
      height: 50%;
      display: flex;
      justify-content: flex-end;
      padding: 0.5px;
      padding-right: 1rem;
      visibility: visible;
    }

    .dropDownBarsArea {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-end;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropDownBars {
      width: 15px;
      height: 1px;
      background-color: #fff;
    }

    .dropDownMenuDiv {
      background-color: #3aa9e8;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: auto;
      position: absolute;
      top: 50px;
      left: 0;
      z-index: 5;
      padding: 1rem 0;
    }

    .dropDownMenuItemDiv {
      color: #fff;
      height: 33%;
      width: 100%;
      display: flex;
      justify-content: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 1rem 0;
    }

    .dropDownMenuDivHidden {
      display: none;
    }

    .topBarProfileDiv {
      color: #fff;
      width: 150px;
      font-size: 1rem;
      font-weight: 200;
      position: relative;
      display: inline-block;
      margin-top: 0;
    }

    .topBarProfileDivInner {
      border: 0.3px solid #ffffff;
      border-radius: 5px 5px 0 0;
      padding: 0 0.3rem;
    }

    .topBarProfileDivInner:hover {
      cursor: pointer;
    }

    .topBarProfileDivContent {
      position: absolute;
      background-color: #3aa9e8;
      border-left: 0.3px solid #ffffff;
      border-right: 0.3px solid #ffffff;
      border-bottom: 0.3px solid #ffffff;
      border-radius: 0px 0px 5px 5px;
      min-width: 150px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 0;
      z-index: 1;
    }

    .topBarProfileDivContent button {
      font-size: 1rem;
      width: 100%;
      background: none;
      border: none;
      margin-top: 0.2rem;
      color: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0.3px solid rgba(255, 255, 255, 0.2);
    }

    .topBarProfileDivContent button:hover {
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
    }

    .topBarProfileDivContentButtonDiv {
      width: 120px;
    }

    .topBarProfileDivContent i {
      font-size: 0.6rem;
      margin-left: 0.1rem;
    }

    .defaultHomeTop {
      height: auto;
      width: 100%;
      background-color: #122e3b;
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /** same as .defaultHomeTop, but top layer ***/
    .defaultHomeTop1 {
      height: 40vh;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      border: 1px solid #f1f1f1;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 1rem 0 5rem 0;
    }

    .homePageTopP {
      width: 70%;
      text-align: center;
      font-size: 1.5rem;
      color: #3aa9e8;
    }

    /** Practice and learn div**/
    .practiceAndLearnDiv {
      width: auto;
      margin-top: 50px;
    }

    .homePageHeaderPractice {
      font-size: 3.5rem;
      color: #3aa9e8;
      font-weight: 600;
      margin-right: 1rem;
    }

    .homePageHeaderAnd {
      font-size: 3rem;
      color: #3aa9e8;
    }

    .homePageHeaderLearn {
      font-size: 3.5rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .homePageHeaderSTEM {
      font-size: 2.75rem;
      color: #ffb038;
      font-weight: 600;
      margin: 0 1rem;
    }

    .homePageHeaderSubjects {
      font-size: 2.75rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .homePageHeaderAnywhere {
      font-size: 2.75rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .defaultHomeGetStartedButton {
      color: #fff;
      background-color: #e05d5d;
      border-color: #e05d5d;
      width: 120px;
      height: 3.5rem;
      border-radius: 5px;
      margin-right: 1rem;
      font-size: 0.8rem;
    }

    .defaultHomePreviewButton {
      color: #fff;
      background-color: #ffb038;
      width: 120px;
      height: 3.5rem;
      border-radius: 5px;
      margin-left: 1rem;
      font-size: 0.8rem;
    }

    .spiralPlane {
      position: absolute;
      top: 130px;
      left: 10px;
      z-index: 20;
      opacity: 1;
      width: 20%;
    }

    .defaultHomeTopDivSeparator {
      width: 100%;
      min-height: 50px;
      background-color: #696868;
      border: 1px solid #f1f1f1;
      margin-top: 0px;
    }

    .defaultHeroImagePortrait {
      display: none;
    }

    .defaultHeroImagePortraitBottom {
      display: none;
    }

    .defaultHomePageImageCard {
      width: 90%;
      display: flex;
      justify-content: center;
      position: relative;
      top: -50px;
      z-index: 5;
    }

    .defaultHeroImageLandscape {
      width: 80%;
    }

    /*** Subjects Cards ***/

    .defaultSubjectCardsMainDiv {
      padding: 40px 10px;
      background: linear-gradient(to bottom, #f9fafb, #ffffff);
    }

    .defaultSubjectCardsDiv {
      flex-direction: column;
      min-width: 100%;
    }

    .subjectCardsHeader {
      text-align: center;
      margin-bottom: 60px;
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;
    }

    .subjectCardsTitle {
      font-size: 1.8rem;
      font-weight: 700;
      color: #111827;
      margin-bottom: 16px;
      letter-spacing: -0.02em;
    }

    .subjectCardsSubtitle {
      font-size: 1.125rem;
      color: #6b7280;
      line-height: 1.75;
    }

    .subjectCard {
      background: white;
      border-radius: 16px;
      padding: 40px 32px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      width: 60%;
      margin: 20px auto;
    }

    .subjectCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--card-color);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s ease;
    }

    .subjectCard:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 6px 10px rgba(0, 0, 0, 0.08);
    }

    .subjectCard:hover::before {
      transform: scaleX(1);
    }

    .subjectCardIconWrapper {
      width: 64px;
      height: 64px;
      background: linear-gradient(
        135deg,
        var(--card-color) 20,
        var(--card-color) 10
      );
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
    }

    .subjectIcon {
      width: 32px;
      height: 32px;
      color: var(--card-color);
    }

    .subjectCardsHeading {
      font-size: 1.5rem;
      font-weight: 600;
      color: #111827;
      margin-bottom: 16px;
    }

    .subjectCardDescription {
      font-size: 0.975rem;
      line-height: 1.6;
      color: #4b5563;
      margin-bottom: 24px;
      flex-grow: 1;
    }

    .subjectCardTopics {
      margin-bottom: 32px;
    }

    .topicsTitle {
      font-size: 0.875rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #6b7280;
      margin-bottom: 12px;
    }

    .topicsList {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .topicItem {
      display: flex;
      align-items: center;
      font-size: 0.875rem;
      color: #374151;
      margin-bottom: 8px;
    }

    .topicBullet {
      color: var(--card-color);
      margin-right: 8px;
      font-weight: 700;
    }

    .subjectCardFooter {
      margin-top: auto;
    }

    .exploreButton {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 24px;
      background: var(--card-color);
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 0.975rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .exploreButton:hover {
      transform: translateX(4px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .exploreIcon {
      transition: transform 0.2s ease;
    }

    .exploreButton:hover .exploreIcon {
      transform: translateX(4px);
    }

    /** End of Subjects Cards ***/

    /*** Notes and Practice Home Page ***/
    .notesAndPracticeHomeInfoDiv {
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 100px 20px;
      background: #f8fafc;
      position: relative;
      overflow: hidden;
    }

    .sectionHeaderStyle {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .sectionTitleStyle {
      font-size: 3rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    .sectionSubtitleStyle {
      font-size: 1.25rem;
      color: #64748b;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }

    .featuresGridStyle {
      width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .getFeatureCardStyle {
      background-color: #fff;
      width: 60%;
      border-radius: 24px;
      padding: 48px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      margin: 20px auto;
    }

    .cardHeaderStyle {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 24px;
    }

    .featureTitleStyle {
      font-size: 1.5rem;
      font-weight: 700;
      color: #0f172a;
      margin: 0;
    }

    .featureDescriptionStyle {
      font-size: 1.0625rem;
      line-height: 1.7;
      color: #475569;
      margin-bottom: 32px;
    }

    .featuresListStyle {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 40px;
    }

    .featureItemStyle {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .featureItemTextStyle {
      font-size: 0.9375rem;
      color: #334155;
      font-weight: 500;
    }

    /* End of Notes and Practice Home Page ***/
    /*** Personalized Adaptive Flexible Component ***/
    .pafMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
      position: relative;
      overflow: hidden;
    }

    .pafMainContainer::before {
      content: "";
      position: absolute;
      top: -40%;
      left: -40%;
      width: 180%;
      height: 180%;
      background: radial-gradient(
        circle,
        rgba(139, 92, 246, 0.03) 0%,
        transparent 60%
      );
      animation: pafFloat 25s ease-in-out infinite;
    }

    @keyframes pafFloat {
      0%,
      100% {
        transform: translate(0, 0) rotate(0deg);
      }
      33% {
        transform: translate(30px, -30px) rotate(120deg);
      }
      66% {
        transform: translate(-20px, 20px) rotate(240deg);
      }
    }

    .pafHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pafTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #111827;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    .pafSubtitle {
      font-size: 1.25rem;
      color: #6b7280;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pafFeaturesGrid {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 1400px;
      margin: 50px auto;
      z-index: 1;
    }

    .pafFeatureCard {
      background: white;
      width: 60%;
      border-radius: 20px;
      padding: 50px 40px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      cursor: pointer;
      animation: pafSlideUp 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateX(40px);
      margin: 20px auto;
    }

    @keyframes pafSlideUp {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .pafFeatureCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--feature-gradient);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 0;
    }

    .pafFeatureCard::after {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: var(--feature-gradient);
      border-radius: 20px;
      opacity: 0;
      z-index: -1;
      transition: opacity 0.4s ease;
    }

    .pafFeatureCard:hover {
      transform: translateY(-12px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .pafFeatureCard:hover::before {
      opacity: 0.05;
    }

    .pafFeatureCard:hover::after {
      opacity: 0.3;
    }

    .pafFeatureCard:hover .pafIconWrapper {
      transform: scale(1.1) rotate(10deg);
    }

    .pafFeatureCard:hover .pafFeatureTitle {
      color: var(--feature-color);
    }

    .pafCardNumber {
      position: absolute;
      top: 30px;
      right: 30px;
      font-size: 4rem;
      font-weight: 900;
      color: var(--feature-color);
      opacity: 0.1;
      letter-spacing: -0.02em;
      z-index: 1;
    }

    .pafIconWrapper {
      width: 80px;
      height: 80px;
      background: var(--feature-gradient);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      position: relative;
      z-index: 1;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .pafFeatureIcon {
      width: 40px;
      height: 40px;
      color: white;
    }

    .pafFeatureTitle {
      font-size: 1.75rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
    }

    .pafFeatureDescription {
      font-size: 1.125rem;
      line-height: 1.8;
      color: #4b5563;
      margin-bottom: 35px;
      position: relative;
      z-index: 1;
    }

    .pafHighlights {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      z-index: 1;
    }

    .pafHighlightItem {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .pafHighlightDot {
      width: 8px;
      height: 8px;
      background: var(--feature-gradient);
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
    }

    .pafHighlightDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
    }

    .pafHighlightItem span {
      font-size: 1rem;
      color: #374151;
      font-weight: 500;
      line-height: 1.6;
    }
    /* End of Personalized Adaptive Flexible Component ***/

    /*** Pricing Cards Component ***/
    .pcMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
      position: relative;
      overflow: hidden;
    }

    .pcMainContainer::before {
      content: "";
      position: absolute;
      top: -30%;
      right: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(245, 87, 108, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite;
    }

    .pcMainContainer::after {
      content: "";
      position: absolute;
      bottom: -30%;
      left: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(79, 172, 254, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite reverse;
    }

    @keyframes pcFloat {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(50px, -50px) scale(1.1);
      }
    }

    .pcHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pcTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
      background: linear-gradient(135deg, #667eea 0%, #f5576c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .pcSubtitle {
      font-size: 1.375rem;
      color: #64748b;
      max-width: 650px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pcCardsWrapper {
      position: relative;
      z-index: 1;
    }

    .pcCardsGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      max-width: 1300px;
      margin: 0 auto;
      align-items: stretch;
    }

    .pcCard {
      background: white;
      border-radius: 24px;
      padding: 48px 40px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 20px var(--shadow-color);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: pcCardSlide 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateY(40px);
    }

    @keyframes pcCardSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pcCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: var(--card-gradient);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .pcCard:hover {
      transform: translateY(-12px);
      box-shadow: 0 20px 40px var(--shadow-color);
    }

    .pcCard:hover::before {
      transform: scaleX(1);
    }

    .pcCard:hover .pcCtaButton {
      transform: scale(1.05);
    }

    .pcCardHighlighted {
      border: 2px solid transparent;
      background: linear-gradient(white, white) padding-box,
        var(--card-gradient) border-box;
      transform: scale(1.05);
    }

    .pcCardHighlighted:hover {
      transform: scale(1.08) translateY(-12px);
    }

    .pcBadge {
      position: absolute;
      top: 0px;
      right: 32px;
      background: var(--card-gradient);
      color: white;
      padding: 6px 20px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      animation: pcBadgePulse 2s ease-in-out infinite;
    }

    @keyframes pcBadgePulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }

    .pcCardHeader {
      text-align: center;
      margin-bottom: 40px;
    }

    .pcPlanName {
      font-size: 1.875rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 20px;
    }

    .pcPriceWrapper {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
      margin-bottom: 16px;
    }

    .pcPrice {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1;
    }

    .pcPeriod {
      font-size: 1.25rem;
      color: #64748b;
      font-weight: 500;
    }

    .pcDescription {
      font-size: 1rem;
      color: #64748b;
      line-height: 1.6;
    }

    .pcFeatures {
      flex-grow: 1;
      margin-bottom: 40px;
    }

    .pcFeaturesList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pcFeatureItem {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pcCheckIcon {
      width: 20px;
      height: 20px;
      color: #10b981;
      flex-shrink: 0;
    }

    .pcFeatureItem span {
      font-size: 0.975rem;
      color: #475569;
      line-height: 1.5;
    }

    .pcCardFooter {
      margin-top: auto;
    }

    .pcCtaButton {
      width: 100%;
      padding: 16px 32px;
      background: #e5e7eb;
      color: #374151;
      border: none;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .pcCtaButton::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--card-gradient);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pcCtaButton:hover {
      background: #d1d5db;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .pcCtaHighlighted {
      background: var(--card-gradient);
      color: white;
    }

    .pcCtaHighlighted:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 24px var(--shadow-color);
    }

    .pcCtaHighlighted:hover::before {
      opacity: 0.2;
    }

    .pcArrowIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .pcCtaButton:hover .pcArrowIcon {
      transform: translateX(4px);
    }

    .pcCardGlow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150%;
      height: 150%;
      background: radial-gradient(
        circle,
        var(--shadow-color) 0%,
        transparent 70%
      );
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .pcCard:hover .pcCardGlow {
      opacity: 0.3;
    }

    .pcFooter {
      text-align: center;
      margin-top: 80px;
      position: relative;
      z-index: 1;
    }

    .pcGuarantee {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 0.975rem;
      color: #64748b;
      background: white;
      padding: 16px 32px;
      border-radius: 50px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .pcShieldIcon {
      width: 24px;
      height: 24px;
      color: #10b981;
    }
    /* End of Pricing Cards Component ***/

    /*** IlearnSTEM Description Component ***/
    .isdMainContainer {
      width: 100%;
      padding: 100px 40px 0;
      background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
      position: relative;
      overflow: hidden;
    }

    .isdContentWrapper {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .isdTextSection {
      animation: isdSlideInLeft 0.8s ease-out;
    }

    @keyframes isdSlideInLeft {
      from {
        opacity: 0;
        transform: translateX(-40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .isdHeaderBadge {
      display: inline-block;
      margin-bottom: 24px;
    }

    .isdHeaderBadge span {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 8px 20px;
      border-radius: 30px;
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .isdTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
      margin-bottom: 24px;
      letter-spacing: -0.03em;
    }

    .isdTitleHighlight {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .isdDescription {
      font-size: 1.25rem;
      line-height: 1.8;
      color: #475569;
      margin-bottom: 40px;
    }

    .isdFeatures {
      display: flex;
      flex-direction: column;
      gap: 20px;
      margin-bottom: 48px;
    }

    .isdFeatureItem {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      opacity: 0;
      animation: isdFadeInUp 0.6s ease-out forwards;
      animation-delay: calc(var(--feature-index, 0) * 0.1s);
    }

    .isdFeatureItem:nth-child(1) {
      --feature-index: 0;
    }
    .isdFeatureItem:nth-child(2) {
      --feature-index: 1;
    }
    .isdFeatureItem:nth-child(3) {
      --feature-index: 2;
    }

    @keyframes isdFadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
      from {
        opacity: 0;
        transform: translateY(20px);
      }
    }

    .isdFeatureDot {
      width: 12px;
      height: 12px;
      background: var(--feature-color);
      border-radius: 50%;
      margin-top: 6px;
      flex-shrink: 0;
      position: relative;
    }

    .isdFeatureDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
      animation: isdPulse 2s ease-in-out infinite;
    }

    @keyframes isdPulse {
      0%,
      100% {
        transform: scale(1);
        opacity: 0.2;
      }
      50% {
        transform: scale(1.2);
        opacity: 0.1;
      }
    }

    .isdFeatureContent {
      flex: 1;
    }

    .isdFeatureTitle {
      font-size: 1.125rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 4px;
    }

    .isdFeatureDesc {
      font-size: 0.975rem;
      color: #64748b;
      line-height: 1.5;
    }

    .isdCta {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }

    .isdCtaButton {
      padding: 16px 32px;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .isdCtaPrimary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
    }

    .isdCtaPrimary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }

    .isdCtaSecondary {
      background: white;
      color: #475569;
      border: 2px solid #e5e7eb;
    }

    .isdCtaSecondary:hover {
      border-color: #667eea;
      color: #667eea;
      background: #f3f4f6;
    }

    .isdCtaIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
    }

    .isdCtaButton:hover .isdCtaIcon {
      transform: translateX(4px);
    }

    .isdVisualSection {
      position: relative;
      animation: isdSlideInRight 0.8s ease-out;
    }

    @keyframes isdSlideInRight {
      from {
        opacity: 0;
        transform: translateX(40px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .isdGraphicContainer {
      position: relative;
      width: 100%;
      height: 500px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdFloatingCard {
      position: absolute;
      background: white;
      border-radius: 16px;
      padding: 20px 24px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 600;
      color: #1e293b;
      animation: isdFloat 4s ease-in-out infinite;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .isdFloatingCard:hover {
      transform: scale(1.05);
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    }

    .isdCard1 {
      top: 20%;
      left: 10%;
      animation-delay: 0s;
    }

    .isdCard2 {
      top: 60%;
      right: 15%;
      animation-delay: 1.3s;
    }

    .isdCard3 {
      bottom: 20%;
      left: 20%;
      animation-delay: 2.6s;
    }

    @keyframes isdFloat {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    .isdCardIcon {
      width: 32px;
      height: 32px;
      color: #667eea;
    }

    .isdCentralOrb {
      position: relative;
      width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdOrbCore {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%;
      box-shadow: 0 0 60px rgba(102, 126, 234, 0.6);
      animation: isdOrbPulse 3s ease-in-out infinite;
    }

    @keyframes isdOrbPulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
      }
    }

    .isdOrbRing {
      position: absolute;
      border: 2px solid rgba(102, 126, 234, 0.2);
      border-radius: 50%;
      animation: isdRingExpand 4s ease-out infinite;
    }

    .isdRing1 {
      width: 120px;
      height: 120px;
      animation-delay: 0s;
    }

    .isdRing2 {
      width: 160px;
      height: 160px;
      animation-delay: 1s;
    }

    .isdRing3 {
      width: 200px;
      height: 200px;
      animation-delay: 2s;
    }

    @keyframes isdRingExpand {
      0% {
        transform: scale(0.8);
        opacity: 1;
      }
      100% {
        transform: scale(1.3);
        opacity: 0;
      }
    }

    .isdStatsSection {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 80px 40px;
      margin-top: 100px;
      position: relative;
      overflow: hidden;
    }

    .isdStatsSection::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .isdStatsGrid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 40px;
      position: relative;
      z-index: 1;
    }

    .isdStatCard {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      padding: 32px;
      text-align: center;
      transition: all 0.3s ease;
      animation: isdStatSlide 0.8s ease-out forwards;
      animation-delay: var(--stat-delay);
      opacity: 0;
      transform: translateY(30px);
    }

    @keyframes isdStatSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .isdStatCard:hover {
      transform: translateY(-8px);
      background: rgba(255, 255, 255, 0.15);
    }

    .isdStatIconWrapper {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 16px;
      margin-bottom: 16px;
    }

    .isdStatIcon {
      width: 32px;
      height: 32px;
      color: white;
    }

    .isdStatValue {
      font-size: 2.5rem;
      font-weight: 800;
      color: white;
      margin-bottom: 8px;
      letter-spacing: -0.02em;
    }

    .isdStatLabel {
      font-size: 1rem;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }
    /* End of IlearnSTEM Description Component ***/

    .defaultHomeFooterDiv {
      width: 100%;
      background-color: #fff;
      color: #565656;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      font-size: 2.5rem;
    }

    .DefaultHomeFooterLogos {
      width: 80%;
      margin-bottom: 5rem;
    }

    .subscribeOuterDiv1 {
      width: 100%;
      height: 600px;
      margin-bottom: 3rem;
    }

    .subscribeOuterDiv {
      width: 100%;
      height: 600px;
      background-color: #3aa9e8;
      margin-bottom: 0;
      clip-path: polygon(0 0, 100% 0, 55% 100%, 0 100%);
    }

    .subscribeMainDiv {
      width: 80%;
      height: 400px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(180deg, #565656 0%, rgba(86, 86, 86, 0) 100%);
      border: 1px solid #b0b0b0;
      border-radius: 8px;
      display: absolute;
      z-index: 20;
      margin-top: -500px;
      padding: 1rem;
    }

    .adjectiveButtons {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2rem;
      background: rgba(201, 201, 201, 0.17);
      border: 1px solid #545353;
      border-radius: 0px 7px 7px 0px;
      height: 30px;
    }

    .adjectiveButton {
      width: 16.75%;
      height: 100%;
      border: 0.3px solid #545353;
      color: #fff;
      font-size: 0.5rem;
      color: #545353;
    }

    .adjectiveButton:hover {
      cursor: pointer;
      background-color: #545353;
      color: #fff;
    }

    .adjectiveButtonAll {
      background-color: #545353;
      color: #fff;
      font-weight: 600;
    }

    .adjectiveButtonAll:hover {
      cursor: pointer;
      background: none;
      color: #545353;
    }

    #subScribeImageDiv {
      width: 100%;
    }

    .subscribeImage {
      position: relative;
      left: -4rem;
      top: -7rem;
    }

    #subscribeFormH1 {
      color: #fff;
      font-size: 2.5rem;
      font-weight: 900;
    }

    #subscribeFormP1 {
      width: 100%;
      color: #fff;
      font-size: 0.85rem;
    }

    .subscribeNowButton {
      background: #ffffff;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      width: 150px;
      height: 40px;
      padding: 0.5rem;
    }

    .finalFooterMainDiv {
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      width: 100%;
      height: auto;
      min-height: 550px;
      font-size: 0.7rem;
    }

    .finalFooterMainDiv1 {
      width: 33%;
      justify-content: center;
      align-items: center;
      color: rgba(255, 255, 255, 0.8);
    }

    .finalFooterMainDiv2 {
      width: 100%;
      justify-content: space-around;
      align-items: center;
      color: rgba(255, 255, 255, 0.8);
    }

    .finalFooterMainDiv1 h3,
    .finalFooterMainDiv2 h3 {
      font-size: 20px;
      color: #78cbfa;
    }

    #subscribeEmailInput,
    #subscribeEmailInput1 {
      height: 1.5rem;
      width: 70%;
    }

    #subscribeSignupButton,
    #subscribeSignupButton1 {
      height: 1.5rem;
      width: 40px;
      background-color: #3aa9e8;
      border: 1px solid #bebebe;
      color: #fff;
      font-size: 0.6rem;
      border-radius: 5px;
    }

    .settingsDiv {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-top: 50px;
      padding-top: 3rem;
    }

    .settingsBack {
      position: absolute;
      left: 1rem;
      top: 55px;
      color: #122e3b;
    }

    .settingsBack:hover {
      cursor: pointer;
    }

    .settingsTopDiv {
      width: 500px;
      height: 50px;
      margin-top: 10px;
      padding: 0px 20px;
    }

    .curriculumCountryDropDown,
    .curriculumProvinceOrStateDropDown,
    .notesOrPracticeSelect {
      display: flex;
      flex-direction: row;
      width: 150px;
      height: 35px;
      align-items: center;
      color: #aeaeae;
      margin-bottom: 20px;
      margin: 0px 10px;
      font-size: 0.8rem;
      border: 0.3px solid #aeaeae;
      border-radius: 0;
    }

    .settingsSubjectsDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 2rem;
    }

    .settingsSubjectsDiv button {
      width: 115px;
      height: 115px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #122e3b;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
    }

    .settingsPhysicsButton {
      background-color: rgba(153, 217, 255, 0.5);
    }

    .settingsChemistryButton {
      background: rgba(0, 128, 128, 0.15);
      margin-left: 1rem;
    }

    .settingsEarthAndSpaceSciencesButton {
      background: rgba(255, 255, 0, 0.5);
      margin-left: 1rem;
    }

    .settingsMathematicsButton1,
    .settingsMathematicsButton2 {
      background: rgba(132, 31, 39, 0.25);
      margin-left: 1rem;
    }

    .settingsSubjectsDiv button:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .otherSubjectDropDownDiv {
      justify-content: center;
      align-items: center;
      background-color: rgba(197, 205, 216, 1);
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-left: 20px;
    }

    .otherSubjectSelect {
      background-color: inherit;
      width: 85px;
      height: 35px;
      border: none;
      outline: none;
    }

    .otherSubjectDropDownDiv:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .settingsTopicsMainDiv {
      width: 100%;
      margin-top: 50px;
    }

    .settingsGradeLevelAndCurriculaMainDiv {
      width: 100%;
      margin: 20px auto;
      flex-direction: row;
    }

    .settingsGradeLevelSelect {
      height: 35px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-right: 10px;
    }

    .settingsCurriculumSelect {
      width: 60%;
      height: 35px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-left: 10px;
    }

    .settingsTopicsMainDiv h3 {
      font-size: 1.3rem;
      padding: 0px 10px;
      text-align: center;
      color: #122e3b;
    }

    .settingsTopicsMainDiv span {
      color: #ffb038;
    }

    .settingsTopicsMainDiv h2 {
      font-size: 1.3rem;
      text-align: center;
    }

    .settings_strand_div,
    .settings_strand_div1 {
      width: 90%;
      padding: 20px;
      margin: 20px auto;
    }

    .settings_strand_subtrand_p_div {
      width: 100%;
      cursor: pointer;
    }

    .settings_strand_subtrand_p_div:hover {
      background-color: #f0f0f0;
      text-decoration: underline;
    }

    .settings_strand_subtrand_p_div_p1 {
      font-weight: 600;
      margin-left: 20px;
      width: 80%;
      margin-top: 50px;
    }

    .settings_strand_substrand_p_div_p2 {
      margin-left: 40px;
      margin-top: 25px;
    }

    .section_strand_select,
    .section_super_strand_select,
    .curriculum_select {
      color: #777777;
      border: 1px solid rgba(119, 119, 119, 0.4);
      border-radius: 5px;
      padding: 7px;
      font-size: 0.8rem;
      width: 80%;
      margin: 5px auto;
    }

    .loginCard {
      width: 600px;
      height: 450px;
      border-radius: 20px;
      background: #ffffff;
      border: 0.3px solid #b5c5cd;
    }

    .registrationCard {
      width: 600px;
      height: 450px;
      border-radius: 20px;
      background: #ffffff;
      border: 0.3px solid #b5c5cd;
    }

    .loginCardInputDiv input,
    .registrationDiv input {
      background-color: #b5c5cd;
      width: 250px;
      height: 40px;
      margin-bottom: 10px;
      border: none;
      padding-left: 10px;
      margin-bottom: 20px;
    }

    /*** Personalized Adaptive Flexible Component - Portrait ***/
    .pafMainContainer {
      width: 100%;
      padding: 60px 20px;
      background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
      position: relative;
      overflow: hidden;
    }

    .pafMainContainer::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle,
        rgba(139, 92, 246, 0.03) 0%,
        transparent 60%
      );
      animation: pafFloat 25s ease-in-out infinite;
    }

    @keyframes pafFloat {
      0%,
      100% {
        transform: translate(0, 0) rotate(0deg);
      }
      33% {
        transform: translate(20px, -20px) rotate(120deg);
      }
      66% {
        transform: translate(-10px, 10px) rotate(240deg);
      }
    }

    .pafHeader {
      text-align: center;
      margin-bottom: 50px;
      position: relative;
      z-index: 1;
    }

    .pafTitle {
      font-size: 2.25rem;
      font-weight: 800;
      color: #111827;
      margin-bottom: 16px;
      letter-spacing: -0.03em;
      line-height: 1.2;
    }

    .pafSubtitle {
      font-size: 1.125rem;
      color: #6b7280;
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.6;
      padding: 0 10px;
    }

    .pafFeaturesGrid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      max-width: 600px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .pafFeatureCard {
      background: white;
      border-radius: 16px;
      padding: 32px 24px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      cursor: pointer;
      animation: pafSlideUp 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateY(30px);
    }

    @keyframes pafSlideUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pafFeatureCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--feature-gradient);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 0;
    }

    .pafFeatureCard::after {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: var(--feature-gradient);
      border-radius: 16px;
      opacity: 0;
      z-index: -1;
      transition: opacity 0.4s ease;
    }

    .pafCardNumber {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 3rem;
      font-weight: 900;
      color: var(--feature-color);
      opacity: 0.1;
      letter-spacing: -0.02em;
      z-index: 1;
    }

    .pafIconWrapper {
      width: 64px;
      height: 64px;
      background: var(--feature-gradient);
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      position: relative;
      z-index: 1;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    .pafFeatureIcon {
      width: 32px;
      height: 32px;
      color: white;
    }

    .pafFeatureTitle {
      font-size: 1.5rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
    }

    .pafFeatureDescription {
      font-size: 1rem;
      line-height: 1.7;
      color: #4b5563;
      margin-bottom: 28px;
      position: relative;
      z-index: 1;
    }

    .pafHighlights {
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      z-index: 1;
    }

    .pafHighlightItem {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pafHighlightDot {
      width: 6px;
      height: 6px;
      background: var(--feature-gradient);
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
    }

    .pafHighlightDot::after {
      content: "";
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
    }

    .pafHighlightItem span {
      font-size: 0.9375rem;
      color: #374151;
      font-weight: 500;
      line-height: 1.5;
    }
    /* End of Personalized Adaptive Flexible Component - Portrait ***/

    /*** Pricing Cards Component - Portrait ***/
    .pcMainContainer {
      width: 100%;
      padding: 60px 20px;
      background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
      position: relative;
      overflow: hidden;
    }

    .pcMainContainer::before {
      content: "";
      position: absolute;
      top: -40%;
      right: -40%;
      width: 80%;
      height: 80%;
      background: radial-gradient(
        circle,
        rgba(245, 87, 108, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite;
    }

    .pcMainContainer::after {
      content: "";
      position: absolute;
      bottom: -40%;
      left: -40%;
      width: 80%;
      height: 80%;
      background: radial-gradient(
        circle,
        rgba(79, 172, 254, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite reverse;
    }

    @keyframes pcFloat {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(30px, -30px) scale(1.05);
      }
    }

    .pcHeader {
      text-align: center;
      margin-bottom: 50px;
      position: relative;
      z-index: 1;
    }

    .pcTitle {
      font-size: 2.25rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 16px;
      letter-spacing: -0.03em;
      line-height: 1.2;
      background: linear-gradient(135deg, #667eea 0%, #f5576c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .pcSubtitle {
      font-size: 1.125rem;
      color: #64748b;
      max-width: 500px;
      margin: 0 auto;
      line-height: 1.6;
      padding: 0 10px;
    }

    .pcCardsWrapper {
      position: relative;
      z-index: 1;
    }

    .pcCardsGrid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      max-width: 400px;
      margin: 0 auto;
    }

    .pcCard {
      background: white;
      border-radius: 20px;
      padding: 32px 24px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 20px var(--shadow-color);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: pcCardSlide 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateY(30px);
    }

    @keyframes pcCardSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pcCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: var(--card-gradient);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .pcCardHighlighted {
      border: 2px solid transparent;
      background: linear-gradient(white, white) padding-box,
        var(--card-gradient) border-box;
      transform: scale(1.02);
    }

    .pcBadge {
      position: absolute;
      top: -10px;
      right: 24px;
      background: var(--card-gradient);
      color: white;
      padding: 4px 16px;
      border-radius: 16px;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .pcCardHeader {
      text-align: center;
      margin-bottom: 32px;
    }

    .pcPlanName {
      font-size: 1.5rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 16px;
    }

    .pcPriceWrapper {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
      margin-bottom: 12px;
    }

    .pcPrice {
      font-size: 2.75rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1;
    }

    .pcPeriod {
      font-size: 1.125rem;
      color: #64748b;
      font-weight: 500;
    }

    .pcDescription {
      font-size: 0.9375rem;
      color: #64748b;
      line-height: 1.5;
    }

    .pcFeatures {
      flex-grow: 1;
      margin-bottom: 32px;
    }

    .pcFeaturesList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .pcFeatureItem {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .pcCheckIcon {
      width: 18px;
      height: 18px;
      color: #10b981;
      flex-shrink: 0;
    }

    .pcFeatureItem span {
      font-size: 0.875rem;
      color: #475569;
      line-height: 1.4;
    }

    .pcCardFooter {
      margin-top: auto;
    }

    .pcCtaButton {
      width: 100%;
      padding: 14px 24px;
      background: #e5e7eb;
      color: #374151;
      border: none;
      border-radius: 10px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .pcCtaHighlighted {
      background: var(--card-gradient);
      color: white;
    }

    .pcArrowIcon {
      width: 18px;
      height: 18px;
      transition: transform 0.3s ease;
    }

    .pcCardGlow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150%;
      height: 150%;
      background: radial-gradient(
        circle,
        var(--shadow-color) 0%,
        transparent 70%
      );
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .pcFooter {
      text-align: center;
      margin-top: 50px;
      position: relative;
      z-index: 1;
    }

    .pcGuarantee {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      font-size: 0.875rem;
      color: #64748b;
      background: white;
      padding: 12px 20px;
      border-radius: 40px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      margin: 0 auto;
      max-width: 90%;
    }

    .pcShieldIcon {
      width: 20px;
      height: 20px;
      color: #10b981;
    }
    /* End of Pricing Cards Component - Portrait ***/

    /*** IlearnSTEM Description Component - Portrait ***/
    .isdMainContainer {
      width: 100%;
      padding: 60px 20px 0;
      background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
      position: relative;
      overflow: hidden;
    }

    .isdContentWrapper {
      max-width: 600px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 50px;
      position: relative;
      z-index: 1;
    }

    .isdTextSection {
      order: 2;
      animation: isdSlideInUp 0.8s ease-out;
    }

    @keyframes isdSlideInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .isdHeaderBadge {
      display: inline-block;
      margin-bottom: 20px;
    }

    .isdHeaderBadge span {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      padding: 6px 16px;
      border-radius: 25px;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .isdTitle {
      font-size: 2.25rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
    }

    .isdTitleHighlight {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .isdDescription {
      font-size: 1.125rem;
      line-height: 1.7;
      color: #475569;
      margin-bottom: 32px;
    }

    .isdFeatures {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 36px;
    }

    .isdFeatureItem {
      display: flex;
      align-items: flex-start;
      gap: 12px;
    }

    .isdFeatureDot {
      width: 10px;
      height: 10px;
      background: var(--feature-color);
      border-radius: 50%;
      margin-top: 5px;
      flex-shrink: 0;
      position: relative;
    }

    .isdFeatureDot::after {
      content: "";
      position: absolute;
      top: -3px;
      left: -3px;
      right: -3px;
      bottom: -3px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
    }

    .isdFeatureContent {
      flex: 1;
    }

    .isdFeatureTitle {
      font-size: 1rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 2px;
    }

    .isdFeatureDesc {
      font-size: 0.875rem;
      color: #64748b;
      line-height: 1.4;
    }

    .isdCta {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .isdCtaButton {
      padding: 14px 24px;
      border-radius: 10px;
      font-size: 1rem;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
    }

    .isdCtaPrimary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 4px 14px rgba(102, 126, 234, 0.4);
    }

    .isdCtaSecondary {
      background: white;
      color: #475569;
      border: 2px solid #e5e7eb;
    }

    .isdCtaIcon {
      width: 18px;
      height: 18px;
    }

    .isdVisualSection {
      order: 1;
      position: relative;
      height: 300px;
      animation: isdSlideInDown 0.8s ease-out;
    }

    @keyframes isdSlideInDown {
      from {
        opacity: 0;
        transform: translateY(-30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .isdGraphicContainer {
      position: relative;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdFloatingCard {
      position: absolute;
      background: white;
      border-radius: 12px;
      padding: 12px 16px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.875rem;
      font-weight: 600;
      color: #1e293b;
      animation: isdFloat 4s ease-in-out infinite;
    }

    .isdCard1 {
      top: 10%;
      left: 5%;
      animation-delay: 0s;
    }

    .isdCard2 {
      top: 40%;
      right: 10%;
      animation-delay: 1.3s;
    }

    .isdCard3 {
      bottom: 15%;
      left: 15%;
      animation-delay: 2.6s;
    }

    @keyframes isdFloat {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-15px);
      }
    }

    .isdCardIcon {
      width: 24px;
      height: 24px;
      color: #667eea;
    }

    .isdCentralOrb {
      position: relative;
      width: 120px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .isdOrbCore {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 50%;
      box-shadow: 0 0 40px rgba(102, 126, 234, 0.6);
    }

    .isdOrbRing {
      position: absolute;
      border: 2px solid rgba(102, 126, 234, 0.2);
      border-radius: 50%;
      animation: isdRingExpand 4s ease-out infinite;
    }

    .isdRing1 {
      width: 80px;
      height: 80px;
      animation-delay: 0s;
    }

    .isdRing2 {
      width: 100px;
      height: 100px;
      animation-delay: 1s;
    }

    .isdRing3 {
      width: 120px;
      height: 120px;
      animation-delay: 2s;
    }

    .isdStatsSection {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 60px 20px;
      margin-top: 60px;
      position: relative;
      overflow: hidden;
    }

    .isdStatsGrid {
      max-width: 500px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      position: relative;
      z-index: 1;
    }

    .isdStatCard {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      padding: 24px;
      text-align: center;
      transition: all 0.3s ease;
    }

    .isdStatIconWrapper {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 12px;
      margin-bottom: 12px;
    }

    .isdStatIcon {
      width: 24px;
      height: 24px;
      color: white;
    }

    .isdStatValue {
      font-size: 1.875rem;
      font-weight: 800;
      color: white;
      margin-bottom: 4px;
      letter-spacing: -0.02em;
    }

    .isdStatLabel {
      font-size: 0.875rem;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
    }
    /* End of IlearnSTEM Description Component - Portrait ***/

    /* Modern DefaultHomeTop Styles - Portrait */
    .main-heading-container {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .main-heading {
      font-size: 2.5rem;
      font-weight: 800;
      line-height: 1.2;
      margin: 0;
    }

    .gradient-text {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .gradient-text-secondary {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .subtitle-container {
      text-align: center;
      margin-bottom: 1.5rem;
    }

    .subtitle {
      font-size: 1.25rem;
      font-weight: 500;
      color: #4a5568;
      margin: 0 0 0.5rem 0;
    }

    .subtitle-highlight {
      color: #667eea;
      font-weight: 700;
    }

    .rotating-text-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.5rem;
      font-size: 1.25rem;
      height: 2rem;
      overflow: hidden;
    }

    .static-text {
      color: #4a5568;
    }

    .rotating-words {
      position: relative;
      height: 2rem;
      overflow: hidden;
      min-width: 150px;
    }

    .rotating-word {
      position: absolute;
      left: 0;
      top: 2rem;
      font-weight: 700;
      animation: word-rotate 10s infinite;
      white-space: nowrap;
    }

    @keyframes word-rotate {
      0%,
      20% {
        top: 2rem;
      }
      25%,
      45% {
        top: 0;
      }
      50%,
      100% {
        top: -2rem;
      }
    }

    .enhanced-description {
      font-size: 1rem;
      color: #718096;
      text-align: center;
      line-height: 1.6;
      margin: 1.5rem 0;
      max-width: 90%;
    }

    .stats-container {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1.5rem;
      margin: 2rem 0;
      padding: 1.5rem;
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      border-radius: 1rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .stat-item {
      text-align: center;
    }

    .stat-number {
      display: block;
      font-size: 1.5rem;
      font-weight: 800;
      color: #667eea;
      margin-bottom: 0.25rem;
    }

    .stat-label {
      font-size: 0.75rem;
      color: #4a5568;
    }

    .stat-divider {
      width: 1px;
      height: 2.5rem;
      background: #cbd5e0;
    }

    .button-container {
      gap: 1rem;
      margin: 2rem 0;
      flex-wrap: wrap;
    }

    .modern-button {
      padding: 0.875rem 1.75rem;
      border-radius: 0.5rem;
      font-weight: 600;
      font-size: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      transition: all 0.3s ease;
      cursor: pointer;
      border: none;
      position: relative;
      overflow: hidden;
    }

    .primary-button {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

    .primary-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }

    .secondary-button {
      background: transparent;
      color: #667eea;
      border: 2px solid #667eea;
    }

    .secondary-button:hover {
      background: #667eea;
      color: white;
      transform: translateY(-2px);
    }

    .button-arrow,
    .play-icon {
      transition: transform 0.3s ease;
    }

    .button-hover .button-arrow {
      transform: translateX(4px);
    }

    .button-hover .play-icon {
      transform: scale(1.2);
    }

    .trust-badges {
      text-align: center;
      margin-top: 2rem;
    }

    .trust-text {
      font-size: 0.875rem;
      color: #718096;
      display: block;
      margin-bottom: 0.5rem;
    }

    .rating-stars {
      color: #fbbf24;
      font-size: 1.125rem;
    }

    .rating-text {
      color: #4a5568;
      font-size: 0.875rem;
      margin-left: 0.5rem;
    }

    .hero-image-section {
      position: relative;
      margin-top: 2rem;
    }

    .floating-elements {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .floating-shape {
      position: absolute;
      border-radius: 50%;
      opacity: 0.1;
      animation: float 20s infinite ease-in-out;
    }

    .shape-1 {
      width: 100px;
      height: 100px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      top: 10%;
      left: 5%;
      animation-delay: 0s;
    }

    .shape-2 {
      width: 150px;
      height: 150px;
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      top: 50%;
      right: 5%;
      animation-delay: 5s;
    }

    .shape-3 {
      width: 80px;
      height: 80px;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      bottom: 10%;
      left: 10%;
      animation-delay: 10s;
    }

    @keyframes float {
      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }
      33% {
        transform: translateY(-20px) rotate(120deg);
      }
      66% {
        transform: translateY(20px) rotate(240deg);
      }
    }

    .animated-spiral {
      animation: spiral-move 30s infinite linear;
    }

    @keyframes spiral-move {
      0% {
        transform: translateX(0) translateY(0) rotate(0deg);
      }
      100% {
        transform: translateX(50px) translateY(-50px) rotate(360deg);
      }
    }

    /* Animation Classes */
    .animate-fade-in {
      animation: fadeIn 0.8s ease-out forwards;
    }

    .animate-slide-up {
      animation: slideUp 0.8s ease-out forwards;
    }

    .animate-fade-in-delayed {
      animation: fadeIn 0.8s ease-out 0.3s forwards;
      opacity: 0;
    }

    .animate-buttons {
      animation: fadeIn 0.8s ease-out forwards;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    /* End of Modern DefaultHomeTop Styles - Portrait */
  }

  /* Default Registration Component - Portrait */
  .drMainContainer {
    min-height: calc(100vh - 50px);
    margin-top: 50px;
    width: 100%;
    position: relative;
    overflow-x: hidden;
    background: linear-gradient(135deg, #0f1419 0%, #1a2332 100%);
  }

  .drBackgroundAnimation {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .drGradientOrb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.3;
    transition: transform 0.3s ease-out;
  }

  .drOrb1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #3aa9e8 0%, transparent 70%);
    top: -100px;
    right: -100px;
    animation: drOrbFloat 15s ease-in-out infinite;
  }

  .drOrb2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #667eea 0%, transparent 70%);
    bottom: -150px;
    left: -150px;
    animation: drOrbFloat 20s ease-in-out infinite reverse;
  }

  @keyframes drOrbFloat {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(20px, -20px) scale(1.05);
    }
    66% {
      transform: translate(-10px, 10px) scale(0.95);
    }
  }

  .drGrid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
        rgba(255, 255, 255, 0.02) 1px,
        transparent 1px
      ),
      linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 30px 30px;
    animation: drGridMove 20s linear infinite;
  }

  @keyframes drGridMove {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(30px, 30px);
    }
  }

  .drFloatingShape {
    position: absolute;
    opacity: 0.08;
    animation: drShapeFloat linear infinite;
  }

  .drShape-circle {
    border-radius: 50%;
    background: linear-gradient(45deg, #3aa9e8, #667eea);
  }

  .drShape-hexagon {
    background: linear-gradient(45deg, #667eea, #ffb038);
    clip-path: polygon(
      30% 0%,
      70% 0%,
      100% 30%,
      100% 70%,
      70% 100%,
      30% 100%,
      0% 70%,
      0% 30%
    );
  }

  .drShape-triangle {
    background: linear-gradient(45deg, #ffb038, #3aa9e8);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }

  @keyframes drShapeFloat {
    from {
      transform: translateY(100vh) rotate(0deg);
    }
    to {
      transform: translateY(-100px) rotate(360deg);
    }
  }

  .drContentWrapper {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    padding-top: 80px;
  }

  .drHeaderSection {
    text-align: center;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
  }

  .drHeaderSection.drVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .drMainTitle {
    font-size: 2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
  }

  .drHighlight {
    background: linear-gradient(135deg, #3aa9e8, #667eea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .drSubtitle {
    font-size: 1rem;
    color: #a0aec0;
    margin: 0;
    font-weight: 400;
  }

  .drProgressSteps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    gap: 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out 0.2s;
  }

  .drProgressSteps.drStepsVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .drStepItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .drStepCircle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
  }

  .drStepActive .drStepCircle {
    background: linear-gradient(135deg, #3aa9e8, #667eea);
    border-color: transparent;
    box-shadow: 0 0 15px rgba(58, 169, 232, 0.5);
  }

  .drStepNumber {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    transition: all 0.3s ease;
  }

  .drStepCheckmark {
    position: absolute;
    width: 20px;
    height: 20px;
    fill: #ffffff;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
  }

  .drStepActive .drStepNumber {
    opacity: 0;
    transform: scale(0);
  }

  .drStepActive .drStepCheckmark {
    opacity: 1;
    transform: scale(1);
  }

  .drStepLabel {
    font-size: 0.75rem;
    color: #a0aec0;
    font-weight: 500;
    text-align: center;
  }

  .drStepActive .drStepLabel {
    color: #3aa9e8;
  }

  .drStepLine {
    width: 50px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
  }

  .drStepLine::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #3aa9e8, transparent);
    animation: drLineProgress 2s ease-in-out infinite;
  }

  @keyframes drLineProgress {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
  }

  .drFormContainer {
    width: 100%;
    max-width: 500px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out 0.4s;
  }

  .drFormContainer.drFormVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .drFormCard {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
  }

  .drFormCard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    animation: drBorderGlow 3s ease-in-out infinite;
  }

  @keyframes drBorderGlow {
    0%,
    100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }

  .drErrorAlert {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
  }

  .drErrorIcon {
    width: 20px;
    height: 20px;
    fill: #ef4444;
    flex-shrink: 0;
  }

  .drErrorAlert span {
    color: #fca5a5;
  }

  .drStepContent {
    animation: drFadeInUp 0.5s ease-out;
  }

  @keyframes drFadeInUp {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .drStepTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 1.5rem 0;
    text-align: center;
  }

  .drFormGrid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .drInputGroup {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .drLabel {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
  }

  .drLabelText {
    font-size: 0.85rem;
    font-weight: 500;
    color: #e2e8f0;
  }

  .drRequired {
    color: #ef4444;
    font-size: 0.8rem;
  }

  .drInputWrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .drInputIcon {
    position: absolute;
    left: 1rem;
    width: 18px;
    height: 18px;
    fill: #64748b;
    pointer-events: none;
    transition: fill 0.3s ease;
  }

  .drInput,
  .drSelect {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    font-size: 0.9rem;
    color: #ffffff;
    transition: all 0.3s ease;
  }

  .drInput::placeholder {
    color: #64748b;
  }

  .drInput:focus,
  .drSelect:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: #3aa9e8;
    box-shadow: 0 0 0 3px rgba(58, 169, 232, 0.1);
  }

  .drInput:focus ~ .drInputIcon,
  .drSelect:focus ~ .drInputIcon {
    fill: #3aa9e8;
  }

  .drInputError {
    border-color: #ef4444 !important;
  }

  .drInputError ~ .drInputIcon {
    fill: #ef4444 !important;
  }

  .drPasswordToggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  .drPasswordToggle:hover {
    opacity: 0.7;
  }

  .drPasswordToggle svg {
    width: 18px;
    height: 18px;
    fill: #64748b;
  }

  .drErrorText {
    font-size: 0.75rem;
    color: #fca5a5;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .drSelect {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 18px;
    padding-right: 2.5rem;
  }

  .drSelect option {
    background: #1a2332;
    color: #ffffff;
  }

  .drPlanCards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.75rem;
  }

  .drPlanCard {
    background: rgba(255, 255, 255, 0.03);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .drPlanCard:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  }

  .drPlanSelected {
    background: rgba(58, 169, 232, 0.1) !important;
    border-color: #3aa9e8 !important;
  }

  .drPlanHeader {
    text-align: center;
    margin-bottom: 1rem;
  }

  .drPlanName {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
  }

  .drPlanPrice {
    font-size: 0.95rem;
    color: #3aa9e8;
    margin: 0;
    font-weight: 600;
  }

  .drPlanBadge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: linear-gradient(135deg, #3aa9e8, #667eea);
    color: #ffffff;
    padding: 0.2rem 0.6rem;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: 600;
  }

  .drPlanFeatures {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .drPlanFeature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: #cbd5e1;
  }

  .drFeatureIcon {
    width: 14px;
    height: 14px;
    fill: #3aa9e8;
    flex-shrink: 0;
  }

  .drButtonGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    gap: 0.75rem;
  }

  .drButton {
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
  }

  .drButtonPrimary {
    background: linear-gradient(135deg, #3aa9e8, #667eea);
    color: #ffffff;
    box-shadow: 0 3px 15px rgba(58, 169, 232, 0.3);
    flex: 1;
  }

  .drButtonPrimary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(58, 169, 232, 0.4);
  }

  .drButtonPrimary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
  }

  .drButtonSecondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .drButtonSecondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
  }

  .drButtonIcon {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  .drLoadingSpinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: drSpin 0.8s linear infinite;
  }

  @keyframes drSpin {
    to {
      transform: rotate(360deg);
    }
  }

  .drLoginPrompt {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .drLoginText {
    font-size: 0.85rem;
    color: #a0aec0;
    margin: 0;
  }

  .drLoginLink {
    color: #3aa9e8;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .drLoginLink:hover {
    color: #667eea;
  }

  /* Responsive adjustments for smaller screens */
  @media (max-width: 480px) {
    .main-heading {
      font-size: 2rem;
    }

    .subtitle {
      font-size: 1rem;
    }

    .rotating-text-container {
      font-size: 1rem;
    }

    .stats-container {
      flex-direction: column;
      gap: 1rem;
    }

    .stat-divider {
      width: 3rem;
      height: 1px;
    }

    .modern-button {
      width: 100%;
      justify-content: center;
    }
  }

  /* Small screens adjustments */
  @media screen and (max-width: 380px) {
    .drMainTitle {
      font-size: 1.75rem;
    }

    .drSubtitle {
      font-size: 0.875rem;
    }

    .drStepCircle {
      width: 35px;
      height: 35px;
    }

    .drStepNumber {
      font-size: 0.875rem;
    }

    .drStepLabel {
      font-size: 0.7rem;
    }

    .drFormCard {
      padding: 1.5rem 1rem;
    }

    .drStepTitle {
      font-size: 1.25rem;
    }

    .drInput,
    .drSelect {
      padding: 0.75rem 0.875rem 0.75rem 2.5rem;
      font-size: 0.85rem;
    }

    .drButton {
      padding: 0.75rem 1.25rem;
      font-size: 0.85rem;
    }

    .dlMainTitle {
      gap: 0.125rem;
    }

    .dlWelcome {
      font-size: 1rem;
    }

    .dlBrandName {
      font-size: 2rem;
    }

    .dlSubtitle {
      font-size: 0.75rem;
    }

    .dlLoginCard {
      padding: 1.5rem 1rem;
    }

    .dlCardTitle {
      font-size: 1.25rem;
    }
  }
  /* End of Default Registration Component - Portrait */

  /* Default Dashboard Styles - Portrait */
  .defaultDashboardContainer {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #f8fafc;
    padding-top: 60px;
  }

  /* Mobile Navigation Toggle */
  .defaultMobileMenuToggle {
    position: fixed;
    top: 70px;
    left: 20px;
    z-index: 1000;
    width: 44px;
    height: 44px;
    background: white;
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .defaultMobileMenuToggle i {
    font-size: 24px;
    color: #1e293b;
  }

  /* Sidebar Styles for Mobile */
  .defaultDashboardSidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    transition: left 0.3s ease;
    z-index: 999;
  }

  .defaultDashboardSidebar.mobileMenuOpen {
    left: 0;
  }

  .defaultDashboardUserInfo {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    margin-top: 60px;
  }

  .defaultUserAvatar {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
  }

  .defaultUserAvatar i {
    font-size: 36px;
    color: #e2e8f0;
  }

  .defaultUserDetails {
    text-align: center;
  }

  .defaultUserDetails h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
  }

  .defaultUserDetails p {
    margin: 0 0 6px;
    font-size: 13px;
    color: #cbd5e1;
  }

  .defaultUserRole {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    font-size: 11px;
    color: #e2e8f0;
  }

  /* Navigation Menu */
  .defaultDashboardNav {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
  }

  .defaultNavItem {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: none;
    border: none;
    color: #cbd5e1;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

  .defaultNavItem:hover {
    background: rgba(255, 255, 255, 0.05);
    color: white;
  }

  .defaultNavItem i {
    font-size: 18px;
  }

  .defaultNavActive {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
  }

  .defaultNavActive::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #667eea;
  }

  .defaultDashboardFooter {
    padding: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .defaultLogoutButton {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    color: #fca5a5;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultLogoutButton:hover {
    background: rgba(239, 68, 68, 0.2);
    color: white;
  }

  /* Overlay for mobile menu */
  .defaultMobileOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    display: none;
  }

  .defaultMobileOverlay.show {
    display: block;
  }

  /* Main Content Area */
  .defaultDashboardMain {
    flex: 1;
    padding: 80px 16px 20px;
    overflow-y: auto;
  }

  .defaultDashboardContent {
    max-width: 100%;
    margin: 0 auto;
  }

  /* Overview Section */
  .defaultDashboardOverview {
    animation: fadeInUp 0.5s ease;
  }

  .defaultStatsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
  }

  .defaultStatCard {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    transition: all 0.3s ease;
  }

  .defaultStatCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .defaultStatIcon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .defaultStatIcon i {
    font-size: 24px;
    color: white;
  }

  .defaultStatContent h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
  }

  .defaultStatContent p {
    margin: 2px 0 0;
    font-size: 12px;
    color: #64748b;
  }

  /* Subject Progress Section */
  .defaultSubjectProgressSection {
    margin-bottom: 24px;
  }

  .defaultSubjectProgressSection h2 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultSubjectCards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .defaultSubjectCard {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .defaultSubjectCard h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultSubjectStats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  .defaultSubjectStat {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .defaultSubjectStatLabel {
    font-size: 13px;
    color: #64748b;
  }

  .defaultSubjectStatValue {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultProgressBarContainer {
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-left: 12px;
    position: relative;
  }

  .defaultProgressBarFill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
    position: relative;
  }

  .defaultProgressBarText {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    color: white;
    font-weight: 600;
  }

  .defaultSubjectButton {
    width: 100%;
    padding: 10px 20px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultSubjectButton:hover {
    background: #5a67d8;
    transform: translateY(-1px);
  }

  /* Activity Section */
  .defaultActivitySection {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .defaultRecentActivity,
  .defaultUpcomingTasks {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .defaultRecentActivity h2,
  .defaultUpcomingTasks h2 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultAchievementsList,
  .defaultTasksList {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .defaultAchievementItem {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    transition: all 0.3s ease;
  }

  .defaultAchievementItem:hover {
    background: #f1f5f9;
  }

  .defaultAchievementIcon {
    font-size: 28px;
    line-height: 1;
  }

  .defaultAchievementContent h4 {
    margin: 0 0 2px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultAchievementContent p {
    margin: 0 0 6px;
    font-size: 12px;
    color: #64748b;
  }

  .defaultAchievementDate {
    font-size: 11px;
    color: #94a3b8;
  }

  .defaultTaskItem {
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
  }

  .defaultTaskhigh {
    border-left-color: #ef4444;
  }

  .defaultTaskmedium {
    border-left-color: #f59e0b;
  }

  .defaultTasklow {
    border-left-color: #10b981;
  }

  .defaultTaskSubject {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 2px;
  }

  .defaultTaskTopic {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
  }

  .defaultTaskDue {
    font-size: 12px;
    color: #94a3b8;
  }

  /* Profile Section */
  .defaultDashboardProfile {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.5s ease;
  }

  .defaultProfileHeader {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }

  .defaultProfileHeader h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultEditButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .defaultEditButton:hover {
    background: #5a67d8;
  }

  .defaultEditButton i {
    font-size: 16px;
  }

  .defaultProfileContent {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .defaultProfileSection {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .defaultProfileAvatar {
    width: 100px;
    height: 100px;
    background: #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .defaultProfileAvatar i {
    font-size: 56px;
    color: #94a3b8;
  }

  .defaultProfileInfo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .defaultProfileField {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .defaultProfileField label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .defaultProfileField span {
    font-size: 14px;
    color: #1e293b;
    font-weight: 500;
  }

  .defaultStatusActive {
    color: #10b981 !important;
  }

  .defaultSubscriptionInfo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .defaultProfileActions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
  }

  .defaultActionButton {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    width: 100%;
  }

  .defaultPrimaryButton {
    background: #667eea;
    color: white;
  }

  .defaultPrimaryButton:hover {
    background: #5a67d8;
  }

  .defaultSecondaryButton {
    background: #e2e8f0;
    color: #64748b;
  }

  .defaultSecondaryButton:hover {
    background: #cbd5e1;
    color: #475569;
  }

  /* Progress Section */
  .defaultDashboardProgress {
    animation: fadeInUp 0.5s ease;
  }

  .defaultProgressHeader {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
  }

  .defaultProgressHeader h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultProgressFilters {
    display: flex;
    gap: 12px;
  }

  .defaultFilterSelect {
    padding: 6px 12px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
  }

  .defaultFilterSelect:hover {
    border-color: #cbd5e1;
  }

  .defaultFilterSelect:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
  }

  .defaultProgressCharts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }

  .defaultChartCard {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .defaultChartCard h3 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultChartPlaceholder {
    height: 200px;
    background: #f8fafc;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .defaultChartPlaceholder i {
    font-size: 40px;
    color: #cbd5e1;
  }

  .defaultChartPlaceholder p {
    margin: 0;
    font-size: 12px;
    color: #94a3b8;
  }

  .defaultTopicProgress {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  .defaultTopicProgress h3 {
    margin: 0 0 16px;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultTopicList {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .defaultTopicItem {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .defaultTopicItem span:first-child {
    font-size: 14px;
    color: #475569;
    font-weight: 500;
  }

  /* Generic Section */
  .defaultDashboardSection {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    animation: fadeInUp 0.5s ease;
  }

  .defaultDashboardSection h2 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
  }

  .defaultDashboardSection p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
  }

  /* Animations */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Small phone adjustments */
  @media (max-width: 360px) {
    .defaultStatsGrid {
      grid-template-columns: 1fr;
    }

    .defaultStatCard {
      flex-direction: row;
      text-align: left;
      gap: 16px;
    }

    .defaultDashboardMain {
      padding: 80px 12px 16px;
    }
  }

  @media screen and (max-width: 319px) {
    /* CSS styles for mobile portrait go here */
    .topNav {
      height: 50px;
      width: 100%;
      background: #122e3b;
      position: absolute;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logoDiv {
      width: 33%;
      display: flex;
      justify-content: flex-start;
      padding-left: 1rem;
    }

    .logo {
      display: flex;
      flex-direction: row;
      font-size: 0.75rem;
    }

    .logo:hover {
      opacity: 0.7;
      cursor: pointer;
    }

    .logoI {
      display: flex;
      flex-direction: column;
      width: 0.2rem;
      height: 1rem;
      position: relative;
      top: 0.15rem;
    }

    .logoITop {
      width: 0.2rem;
      height: 20%;
      background-color: #5e5656;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
      position: relative;
      top: 1px;
    }

    .logoIMiddle {
      width: inherit;
      height: 60%;
      border-radius: 2px;
      background-color: #fffa83;
      z-index: 1;
    }

    .logoIBottom {
      display: inline;
      width: inherit;
      height: 20%;
      margin-top: 0;
      background-color: #e05d5d;
      clip-path: ellipse(45% 45% at 50% 50%);
      position: relative;
      top: -2.5px;
    }

    .logoLearn {
      color: #fff;
    }

    .logoS {
      color: #ffb038;
      font-weight: 900;
    }

    .logoT {
      color: #fffa83;
      font-weight: 900;
    }

    .logoE {
      color: #c7282d;
      font-weight: 900;
    }

    .logoM {
      color: #9c06c1;
      font-weight: 900;
    }

    .toggleSwitch {
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 25px;
      width: 48px;
      height: 25px;
      border: 1px solid #938b8b;
      background-color: #fff;
    }

    .toggleKnob {
      width: 23px;
      height: 23px;
      background-color: #b5c5cd;
      box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 50%;
      position: relative;
      left: 0px;
      transition: 1s;
    }

    .navToggleDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 34%;
      height: 50px;
      color: #fff;
    }

    .navToggleInnerDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 100%;
      height: 49px;
      color: #fff;
    }

    .navToggleDiv span {
      font-size: 0.4rem;
    }

    .chosenApp {
      font-weight: 600;
      text-decoration: underline;
      transition: 1.3s;
    }

    .notChosenApp {
      font-weight: 600;
      opacity: 0.5;
    }

    .navLoginSignUpDiv {
      display: none;
    }

    .navLoginButton {
      width: 50px;
      height: 30px;
      border: 1px solid #fff;
      border-radius: 3px;
      background: inherit;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .navSignUpButton {
      width: 75px;
      height: 30px;
      background: #fff;
      color: #477f90;
      margin-left: 1rem;
      border-radius: 3px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .dropDownBarsDiv {
      width: 33%;
      height: 50%;
      display: flex;
      justify-content: flex-end;
      padding: 0.5px;
      padding-right: 1rem;
      visibility: visible;
    }

    .dropDownBarsArea {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: flex-end;
      border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropDownBars {
      width: 15px;
      height: 1px;
      background-color: #fff;
    }

    .dropDownMenuDiv {
      background-color: #3aa9e8;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: auto;
      position: absolute;
      top: 50px;
      left: 0;
      z-index: 5;
      padding: 1rem 0;
    }

    .dropDownMenuItemDiv {
      color: #fff;
      height: 33%;
      width: 100%;
      display: flex;
      justify-content: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 1rem 0;
    }

    .dropDownMenuDivHidden {
      display: none;
    }

    .topBarProfileDiv {
      color: #fff;
      width: 150px;
      font-size: 0.8rem;
      font-weight: 200;
      position: relative;
      display: inline-block;
      margin-top: 0;
    }

    .topBarProfileDivInner {
      border: 0.3px solid #ffffff;
      border-radius: 5px 5px 0 0;
      padding: 0 0.3rem;
    }

    .topBarProfileDivInner:hover {
      cursor: pointer;
    }

    .topBarProfileDivContent {
      position: absolute;
      background-color: #3aa9e8;
      border-left: 0.3px solid #ffffff;
      border-right: 0.3px solid #ffffff;
      border-bottom: 0.3px solid #ffffff;
      border-radius: 0px 0px 5px 5px;
      min-width: 150px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      padding: 12px 0;
      z-index: 1;
    }

    .topBarProfileDivContent button {
      font-size: 0.8rem;
      width: 100%;
      background: none;
      border: none;
      margin-top: 0.2rem;
      color: rgba(255, 255, 255, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      border: 0.3px solid rgba(255, 255, 255, 0.2);
    }

    .topBarProfileDivContent button:hover {
      color: rgba(255, 255, 255, 1);
      cursor: pointer;
    }

    .topBarProfileDivContentButtonDiv {
      width: 120px;
    }

    .topBarProfileDivContent i {
      font-size: 0.6rem;
      margin-left: 0.1rem;
    }

    /* whole top of home page*/
    .defaultHomeTop {
      width: 100%;
      background-color: #122e3b;
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /** same as .defaultHomeTop, but top layer ***/
    .defaultHomeTop1 {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f8f8f8;
      border: 1px solid #f1f1f1;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 1rem 0 3rem 0;
    }

    .homePageTopP {
      width: 80%;
      text-align: center;
      font-size: 0.6rem;
      color: #3aa9e8;
      margin: 1rem auto;
    }

    /** Practice and learn div**/
    .practiceAndLearnDiv {
      width: auto;
      margin-top: 0;
    }

    .homePageHeaderPractice {
      font-size: 1.25rem;
      color: #3aa9e8;
      font-weight: 600;
      margin-right: 1rem;
    }

    .homePageHeaderAnd {
      font-size: 1rem;
      color: #3aa9e8;
    }

    .homePageHeaderLearn {
      font-size: 1.25rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .homePageHeaderSTEM {
      font-size: 0.8rem;
      color: #ffb038;
      font-weight: 600;
      margin: 0 1rem;
    }

    .homePageHeaderSubjects {
      font-size: 0.8rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .homePageHeaderAnywhere {
      font-size: 0.8rem;
      color: #3aa9e8;
      margin-left: 1rem;
    }

    .defaultHomeGetStartedButton {
      color: #fff;
      background-color: #e05d5d;
      border-color: #e05d5d;
      width: 40vmin;
      height: 2rem;
      border-radius: 5px;
      margin-right: 0.5rem;
      font-size: 0.4rem;
    }

    .defaultHomePreviewButton {
      color: #fff;
      background-color: #ffb038;
      width: 40vmin;
      height: 2rem;
      border-radius: 5px;
      margin-left: 0.5rem;
      font-size: 0.4rem;
    }

    .spiralPlane {
      position: absolute;
      top: 120px;
      left: 10px;
      z-index: 20;
      opacity: 1;
      width: 40%;
    }

    .defaultHomeTopDivSeparator {
      width: 100%;
      min-height: 50px;
      background-color: #696868;
      border: 1px solid #f1f1f1;
      margin-top: 0px;
    }

    .defaultHeroImageLandscape {
      display: none;
    }

    .defaultHomePageImageCard {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      top: -80px;
    }

    .defaultHeroImagePortrait {
      width: 95%;
      margin-top: 4rem;
    }

    .defaultHeroImagePortraitBottom {
      width: 100%;
      margin-top: 1rem;
    }

    .defaultHeroImagePortraitBottom2 {
      width: 15%;
      position: absolute;
      bottom: 30px;
    }

    /*** Personalized Adaptive Flexible Component ***/
    .pafMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
      position: relative;
      overflow: hidden;
    }

    .pafMainContainer::before {
      content: "";
      position: absolute;
      top: -40%;
      left: -40%;
      width: 180%;
      height: 180%;
      background: radial-gradient(
        circle,
        rgba(139, 92, 246, 0.03) 0%,
        transparent 60%
      );
      animation: pafFloat 25s ease-in-out infinite;
    }

    @keyframes pafFloat {
      0%,
      100% {
        transform: translate(0, 0) rotate(0deg);
      }
      33% {
        transform: translate(30px, -30px) rotate(120deg);
      }
      66% {
        transform: translate(-20px, 20px) rotate(240deg);
      }
    }

    .pafHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pafTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #111827;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
    }

    .pafSubtitle {
      font-size: 1.25rem;
      color: #6b7280;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pafFeaturesGrid {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 1400px;
      margin: 50px auto;
      z-index: 1;
    }

    .pafFeatureCard {
      background: white;
      width: 60%;
      border-radius: 20px;
      padding: 50px 40px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      cursor: pointer;
      animation: pafSlideUp 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateX(40px);
      margin: 20px auto;
    }

    @keyframes pafSlideUp {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .pafFeatureCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--feature-gradient);
      opacity: 0;
      transition: opacity 0.4s ease;
      z-index: 0;
    }

    .pafFeatureCard::after {
      content: "";
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      background: var(--feature-gradient);
      border-radius: 20px;
      opacity: 0;
      z-index: -1;
      transition: opacity 0.4s ease;
    }

    .pafFeatureCard:hover {
      transform: translateY(-12px) scale(1.02);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .pafFeatureCard:hover::before {
      opacity: 0.05;
    }

    .pafFeatureCard:hover::after {
      opacity: 0.3;
    }

    .pafFeatureCard:hover .pafIconWrapper {
      transform: scale(1.1) rotate(10deg);
    }

    .pafFeatureCard:hover .pafFeatureTitle {
      color: var(--feature-color);
    }

    .pafCardNumber {
      position: absolute;
      top: 30px;
      right: 30px;
      font-size: 4rem;
      font-weight: 900;
      color: var(--feature-color);
      opacity: 0.1;
      letter-spacing: -0.02em;
      z-index: 1;
    }

    .pafIconWrapper {
      width: 80px;
      height: 80px;
      background: var(--feature-gradient);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;
      position: relative;
      z-index: 1;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    }

    .pafFeatureIcon {
      width: 40px;
      height: 40px;
      color: white;
    }

    .pafFeatureTitle {
      font-size: 1.75rem;
      font-weight: 700;
      color: #1f2937;
      margin-bottom: 20px;
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
    }

    .pafFeatureDescription {
      font-size: 1.125rem;
      line-height: 1.8;
      color: #4b5563;
      margin-bottom: 35px;
      position: relative;
      z-index: 1;
    }

    .pafHighlights {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      z-index: 1;
    }

    .pafHighlightItem {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .pafHighlightDot {
      width: 8px;
      height: 8px;
      background: var(--feature-gradient);
      border-radius: 50%;
      flex-shrink: 0;
      position: relative;
    }

    .pafHighlightDot::after {
      content: "";
      position: absolute;
      top: -4px;
      left: -4px;
      right: -4px;
      bottom: -4px;
      background: var(--feature-color);
      opacity: 0.2;
      border-radius: 50%;
    }

    .pafHighlightItem span {
      font-size: 1rem;
      color: #374151;
      font-weight: 500;
      line-height: 1.6;
    }
    /* End of Personalized Adaptive Flexible Component ***/

    /*** Pricing Cards Component ***/
    .pcMainContainer {
      width: 100%;
      padding: 100px 40px;
      background: linear-gradient(180deg, #fafbfc 0%, #f0f2f5 100%);
      position: relative;
      overflow: hidden;
    }

    .pcMainContainer::before {
      content: "";
      position: absolute;
      top: -30%;
      right: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(245, 87, 108, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite;
    }

    .pcMainContainer::after {
      content: "";
      position: absolute;
      bottom: -30%;
      left: -30%;
      width: 60%;
      height: 60%;
      background: radial-gradient(
        circle,
        rgba(79, 172, 254, 0.05) 0%,
        transparent 70%
      );
      animation: pcFloat 30s ease-in-out infinite reverse;
    }

    @keyframes pcFloat {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      50% {
        transform: translate(50px, -50px) scale(1.1);
      }
    }

    .pcHeader {
      text-align: center;
      margin-bottom: 80px;
      position: relative;
      z-index: 1;
    }

    .pcTitle {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      margin-bottom: 20px;
      letter-spacing: -0.03em;
      line-height: 1.1;
      background: linear-gradient(135deg, #667eea 0%, #f5576c 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .pcSubtitle {
      font-size: 1.375rem;
      color: #64748b;
      max-width: 650px;
      margin: 0 auto;
      line-height: 1.7;
    }

    .pcCardsWrapper {
      position: relative;
      z-index: 1;
    }

    .pcCardsGrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      max-width: 1300px;
      margin: 0 auto;
      align-items: stretch;
    }

    .pcCard {
      background: white;
      border-radius: 24px;
      padding: 48px 40px;
      position: relative;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 10px 20px var(--shadow-color);
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: pcCardSlide 0.8s ease-out forwards;
      animation-delay: var(--card-delay);
      opacity: 0;
      transform: translateY(40px);
    }

    @keyframes pcCardSlide {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .pcCard::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 5px;
      background: var(--card-gradient);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

    .pcCard:hover {
      transform: translateY(-12px);
      box-shadow: 0 20px 40px var(--shadow-color);
    }

    .pcCard:hover::before {
      transform: scaleX(1);
    }

    .pcCard:hover .pcCtaButton {
      transform: scale(1.05);
    }

    .pcCardHighlighted {
      border: 2px solid transparent;
      background: linear-gradient(white, white) padding-box,
        var(--card-gradient) border-box;
      transform: scale(1.05);
    }

    .pcCardHighlighted:hover {
      transform: scale(1.08) translateY(-12px);
    }

    .pcBadge {
      position: absolute;
      top: 0px;
      right: 32px;
      background: var(--card-gradient);
      color: white;
      padding: 6px 20px;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.05em;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      animation: pcBadgePulse 2s ease-in-out infinite;
    }

    @keyframes pcBadgePulse {
      0%,
      100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05);
      }
    }

    .pcCardHeader {
      text-align: center;
      margin-bottom: 40px;
    }

    .pcPlanName {
      font-size: 1.875rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 20px;
    }

    .pcPriceWrapper {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
      margin-bottom: 16px;
    }

    .pcPrice {
      font-size: 3.5rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1;
    }

    .pcPeriod {
      font-size: 1.25rem;
      color: #64748b;
      font-weight: 500;
    }

    .pcDescription {
      font-size: 1rem;
      color: #64748b;
      line-height: 1.6;
    }

    .pcFeatures {
      flex-grow: 1;
      margin-bottom: 40px;
    }

    .pcFeaturesList {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .pcFeatureItem {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .pcCheckIcon {
      width: 20px;
      height: 20px;
      color: #10b981;
      flex-shrink: 0;
    }

    .pcFeatureItem span {
      font-size: 0.975rem;
      color: #475569;
      line-height: 1.5;
    }

    .pcCardFooter {
      margin-top: auto;
    }

    .pcCtaButton {
      width: 100%;
      padding: 16px 32px;
      background: #e5e7eb;
      color: #374151;
      border: none;
      border-radius: 12px;
      font-size: 1.0625rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .pcCtaButton::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--card-gradient);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pcCtaButton:hover {
      background: #d1d5db;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .pcCtaHighlighted {
      background: var(--card-gradient);
      color: white;
    }

    .pcCtaHighlighted:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 24px var(--shadow-color);
    }

    .pcCtaHighlighted:hover::before {
      opacity: 0.2;
    }

    .pcArrowIcon {
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .pcCtaButton:hover .pcArrowIcon {
      transform: translateX(4px);
    }

    .pcCardGlow {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150%;
      height: 150%;
      background: radial-gradient(
        circle,
        var(--shadow-color) 0%,
        transparent 70%
      );
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .pcCard:hover .pcCardGlow {
      opacity: 0.3;
    }

    .pcFooter {
      text-align: center;
      margin-top: 80px;
      position: relative;
      z-index: 1;
    }

    .pcGuarantee {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-size: 0.975rem;
      color: #64748b;
      background: white;
      padding: 16px 32px;
      border-radius: 50px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .pcShieldIcon {
      width: 24px;
      height: 24px;
      color: #10b981;
    }
    /* End of Pricing Cards Component ***/

    .ilearnstemDescriptionDiv {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 2rem 0;
      background-color: #f3f3f3;
    }

    .ilearnstemDescriptionDiv1 {
      width: 100%;
    }

    .ilearnstemDescriptionDiv h1 {
      color: #3f3f3f;
      font-weight: 700;
      font-size: 1.5rem;
    }

    .ilearnstemDescriptionParagraph {
      color: #6b6b6b;
      font-weight: 400;
      width: 90%;
      font-size: 0.85rem;
      margin: 1rem auto;
      padding: 1rem;
    }

    .ilearnstemDescriptionDiv img {
      width: 200px;
    }

    /* ===== DefaultHomeFooter Component - Portrait ===== */
    .dhfMainContainer {
      width: 100%;
      background-color: #0f172a;
      color: white;
      position: relative;
      overflow: hidden;
    }

    .dhfPartnersSection {
      background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
      padding: 40px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .dhfPartnersWrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
    }

    .dhfPartnersTitle {
      font-size: 1.5rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 24px;
      background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .dhfPartnersGrid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }

    .dhfPartnerCard {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 12px;
      padding: 16px;
      text-align: center;
      transition: all 0.3s ease;
      animation: fadeInUp 0.6s ease-out forwards;
      animation-delay: var(--partner-delay, 0s);
      opacity: 0;
    }

    .dhfPartnerCard:hover {
      transform: translateY(-2px);
      background: rgba(255, 255, 255, 0.05);
    }

    .platinumPartner {
      border-color: rgba(168, 85, 247, 0.3);
      background: linear-gradient(
        135deg,
        rgba(168, 85, 247, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
      );
    }

    .goldPartner {
      border-color: rgba(251, 191, 36, 0.3);
      background: linear-gradient(
        135deg,
        rgba(251, 191, 36, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
      );
    }

    .silverPartner {
      border-color: rgba(156, 163, 175, 0.3);
      background: linear-gradient(
        135deg,
        rgba(156, 163, 175, 0.05) 0%,
        rgba(255, 255, 255, 0.02) 100%
      );
    }

    .dhfPartnerLogo {
      width: 48px;
      height: 48px;
      margin: 0 auto 8px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .dhfPartnerInitial {
      font-size: 1.125rem;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.9);
      z-index: 1;
    }

    .dhfPartnerName {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 4px;
      color: rgba(255, 255, 255, 0.9);
    }

    /* Main Footer Content */
    .dhfPartnerLevel {
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.6);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .dhfContentSection {
      padding: 40px 0;
      position: relative;
      z-index: 1;
    }

    .dhfContentWrapper {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 16px;
    }

    .dhfTopSection {
      display: flex;
      flex-direction: column;
      gap: 32px;
      margin-bottom: 32px;
    }

    .dhfBrandColumn {
      flex: 1;
    }

    .dhfLogo {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .dhfLogoIcon {
      width: 32px;
      height: 32px;
      color: #8b5cf6;
    }

    .dhfLogoText {
      font-size: 1.5rem;
      font-weight: 700;
      background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .dhfBrandDesc {
      font-size: 0.875rem;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.7);
      margin-bottom: 20px;
    }

    .dhfNewsletterForm {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-width: 100%;
    }

    .dhfNewsletterInput {
      flex: 1;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 0.875rem;
      color: white;
      transition: all 0.3s ease;
      width: 100%;
    }

    .dhfNewsletterInput:focus {
      outline: none;
      border-color: #8b5cf6;
      background: rgba(255, 255, 255, 0.08);
    }

    .dhfNewsletterButton {
      background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
      border: none;
      border-radius: 8px;
      padding: 12px 20px;
      font-size: 0.875rem;
      font-weight: 600;
      color: white;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.3s ease;
      width: 100%;
    }

    .dhfNewsletterButton:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 20px -5px rgba(139, 92, 246, 0.3);
    }

    .dhfNewsletterIcon {
      width: 16px;
      height: 16px;
    }

    .dhfLinksGrid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }

    .dhfLinkColumn h4 {
      font-size: 0.875rem;
      font-weight: 700;
      margin-bottom: 12px;
      color: rgba(255, 255, 255, 0.9);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .dhfLinkList {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .dhfLinkItem {
      margin-bottom: 8px;
    }

    .dhfLink {
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      font-size: 0.875rem;
      transition: color 0.3s ease;
      display: inline-block;
    }

    .dhfLink:hover {
      color: #8b5cf6;
    }

    .dhfBottomSection {
      padding-top: 24px;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
    }

    .dhfCopyright {
      text-align: center;
    }

    .dhfCopyright p {
      margin: 0;
      font-size: 0.875rem;
      color: rgba(255, 255, 255, 0.6);
    }

    .dhfTagline {
      margin-top: 4px;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.4);
    }

    .dhfSocialLinks {
      display: flex;
      gap: 12px;
    }

    .dhfSocialLink {
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.05);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
    }

    .dhfSocialLink:hover {
      background: rgba(255, 255, 255, 0.1);
      transform: translateY(-2px);
    }

    .dhfSocialIcon {
      width: 18px;
      height: 18px;
      color: rgba(255, 255, 255, 0.7);
    }

    .dhfDecorativeGradient {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 150%;
      height: 600px;
      background: radial-gradient(
        ellipse at center,
        rgba(139, 92, 246, 0.1) 0%,
        transparent 70%
      );
      pointer-events: none;
    }

    .dhfFloatingOrbs {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      pointer-events: none;
    }

    .dhfOrb {
      position: absolute;
      border-radius: 50%;
      filter: blur(40px);
      opacity: 0.3;
    }

    .dhfOrb1 {
      width: 150px;
      height: 150px;
      background: #8b5cf6;
      top: 10%;
      left: -50px;
      animation: float1 20s infinite ease-in-out;
    }

    .dhfOrb2 {
      width: 200px;
      height: 200px;
      background: #3b82f6;
      bottom: 10%;
      right: -100px;
      animation: float2 25s infinite ease-in-out;
    }

    .dhfOrb3 {
      width: 100px;
      height: 100px;
      background: #10b981;
      top: 50%;
      right: 10%;
      animation: float3 30s infinite ease-in-out;
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes float1 {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      33% {
        transform: translate(30px, -30px) scale(1.1);
      }
      66% {
        transform: translate(-20px, 20px) scale(0.9);
      }
    }

    @keyframes float2 {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      33% {
        transform: translate(-30px, -20px) scale(0.9);
      }
      66% {
        transform: translate(20px, 30px) scale(1.1);
      }
    }

    @keyframes float3 {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      33% {
        transform: translate(20px, 30px) scale(1.1);
      }
      66% {
        transform: translate(-30px, -20px) scale(0.9);
      }
    }
    /* End of DefaultHomeFooter Component - Portrait ***/

    .settingsDiv {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-top: 50px;
      padding-top: 3rem;
    }

    .settingsBack {
      position: absolute;
      left: 1rem;
      top: 55px;
      color: #122e3b;
    }

    .settingsBack:hover {
      cursor: pointer;
    }

    .settingsTopDiv {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 0px 30px;
    }

    .curriculumCountryDiv {
      margin: 2px auto;
    }

    .curriculumCountryDropDown,
    .curriculumProvinceOrStateDropDown,
    .notesOrPracticeSelect {
      display: flex;
      flex-direction: row;
      width: 90px;
      height: 35px;
      align-items: center;
      color: #aeaeae;
      margin-bottom: 0px;
      font-size: 0.6rem;
      border: 0.3px solid #aeaeae;
      border-radius: 0;
    }

    .settingsSubjectsDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 2rem;
    }

    .settingsSubjectsDiv button {
      width: 70px;
      height: 70px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #122e3b;
      font-size: 0.8rem;
      font-weight: 500;
      cursor: pointer;
    }

    .settingsPhysicsButton {
      background-color: rgba(153, 217, 255, 0.5);
    }

    .settingsChemistryButton {
      background: rgba(0, 128, 128, 0.15);
      margin: 0 5px;
    }

    .settingsEarthAndSpaceSciencesButton {
      background: rgba(255, 255, 0, 0.5);
    }

    .settingsMathematicsButton1,
    .settingsMathematicsButton2 {
      background: rgba(132, 31, 39, 0.25);
    }

    .settingsMathematicsButton2 {
      margin: 0 1rem;
    }

    .settingsSubjectsDiv button:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .otherSubjectDropDownDiv {
      width: 85px;
      height: 85px;
      justify-content: center;
      align-items: center;
      background-color: rgba(197, 205, 216, 1);
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-left: 5px;
    }

    .otherSubjectSelect {
      background-color: inherit;
      width: 85px;
      height: 35px;
      border: none;
      outline: none;
    }

    .otherSubjectDropDownDiv:hover {
      background-color: rgba(58, 169, 232, 0.2);
    }

    .settingsTopicsMainDiv {
      width: 100%;
      margin-top: 50px;
    }

    .settingsGradeLevelAndCurriculaMainDiv {
      width: 100%;
      margin: 20px auto;
      flex-direction: column;
    }

    .settingsGradeLevelSelect {
      height: 35px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
    }

    .settingsCurriculumSelect {
      width: 90%;
      height: 35px;
      border: 0.3px solid #aeaeae;
      border-radius: 5px;
      color: #777777;
      font-size: 0.8rem;
      margin-top: 10px;
    }

    .settingsTopicsMainDiv h3 {
      font-size: 1.3rem;
      padding: 0px 10px;
      text-align: center;
      color: #122e3b;
    }

    .settingsTopicsMainDiv span {
      color: #ffb038;
    }

    .settingsTopicsMainDiv h2 {
      font-size: 1.3rem;
      text-align: center;
    }

    .settings_strand_div,
    .settings_strand_div1 {
      width: 90%;
      padding: 20px;
      margin: 20px auto;
    }

    .settings_strand_subtrand_p_div {
      width: 100%;
      cursor: pointer;
    }

    .settings_strand_subtrand_p_div:hover {
      background-color: #f0f0f0;
      text-decoration: underline;
    }

    .settings_strand_subtrand_p_div_p1 {
      font-weight: 600;
      margin-left: 20px;
      width: 80%;
      margin-top: 50px;
    }

    .settings_strand_substrand_p_div_p2 {
      margin-left: 40px;
      margin-top: 25px;
    }

    .loginCard {
      width: 275px;
      height: 400px;
      border-radius: 20px;
      background: #ffffff;
      border: 0.3px solid #b5c5cd;
    }

    .loginTelescope {
      width: 50px;
    }

    .registrationCard {
      width: 275px;
      height: 400px;
      border-radius: 20px;
      background: #ffffff;
      border: 0.3px solid #b5c5cd;
    }

    .loginCardInputDiv input,
    .registrationDiv input {
      background-color: #b5c5cd;
      width: 250px;
      height: 40px;
      margin-bottom: 10px;
      border: none;
      padding-left: 10px;
      margin-bottom: 20px;
    }

    .loginCardButton,
    .registrationButton {
      background-color: #122e3b;
      width: 175px;
      height: 40px;
      border-radius: 5px;
      color: #fff;
      font-weight: 500;
      margin-top: 20px;
      font-size: 12px;
    }

    .orLoginRegisterDiv {
      margin: 20px auto;
    }

    .orLoginButton {
      width: 150px;
      height: 40px;
      background-color: #ffb038;
      color: #fff;
      font-weight: 500;
      margin-top: 20px;
      border-radius: 5px;
    }

    /* Default Upgrade Modal - Portrait */
    .defaultUpgradeModal {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10000;
      animation: fadeIn 0.3s ease-out;
      padding: 20px;
    }

    .defaultUpgradeModalContent {
      background: #ffffff;
      border-radius: 20px;
      padding: 30px 20px;
      max-width: 400px;
      width: 100%;
      position: relative;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
      animation: slideUp 0.3s ease-out;
      text-align: center;
    }

    .defaultCloseModalButton {
      position: absolute;
      top: 15px;
      right: 15px;
      background: none;
      border: none;
      color: #64748b;
      cursor: pointer;
      padding: 6px;
      border-radius: 6px;
      transition: all 0.2s;
    }

    .defaultCloseModalButton:hover {
      background: #f1f5f9;
      color: #475569;
    }

    .defaultUpgradeIcon {
      width: 60px;
      height: 60px;
      background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 15px;
      color: white;
      font-size: 30px;
      box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.3);
    }

    .defaultUpgradeModalContent h2 {
      color: #1e293b;
      font-size: 22px;
      margin-bottom: 12px;
      font-weight: 700;
    }

    .defaultUpgradeModalContent p {
      color: #64748b;
      font-size: 14px;
      margin-bottom: 10px;
      line-height: 1.5;
    }

    .defaultUpgradeOptions {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin: 25px 0;
    }

    .defaultUpgradeButton {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      padding: 18px;
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 15px;
    }

    .defaultUpgradeButton:hover {
      border-color: #3b82f6;
      transform: translateY(-2px);
      box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2);
    }

    .defaultUpgradeButton i {
      font-size: 28px;
      color: #3b82f6;
    }

    .defaultUpgradeButton span {
      font-size: 16px;
      font-weight: 600;
      color: #1e293b;
      text-align: left;
    }

    .defaultUpgradeButton small {
      font-size: 12px;
      color: #64748b;
      display: block;
      margin-top: 2px;
    }

    .defaultStudentPlan i {
      color: #8b5cf6;
    }

    .defaultFamilyPlan i {
      color: #10b981;
    }

    .defaultContinueTomorrowButton {
      background: none;
      border: none;
      color: #64748b;
      font-size: 14px;
      cursor: pointer;
      text-decoration: underline;
      padding: 8px 16px;
      margin-top: 5px;
      transition: color 0.2s;
    }

    .defaultContinueTomorrowButton:hover {
      color: #475569;
    }

    .defaultQuestionLimit {
      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      border: 1px solid #fbbf24;
      color: #92400e;
      font-size: 12px;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    @keyframes slideUp {
      from {
        transform: translateY(20px);
        opacity: 0;
      }
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    /* End of Default Upgrade Modal - Portrait */
  }
} /***End of Default Portrait***/


@media screen and (orientation: landscape) {
  .account_circle {
    color: #fff;
    padding: 2px;
    cursor: pointer;
    font-size: 30px;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
  }

  /* Settings Kids Page - Enhanced Styles */
  .settingsKidsDiv {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
    overflow-x: hidden;
  }

  /* Floating Background Shapes */
  .kidsSettingsFloatingShapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .kidsFloatingShape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: kidsFloat 20s ease-in-out infinite;
  }

  .kidsFloatingShape1 {
    width: 150px;
    height: 150px;
    background: #ffb038;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .kidsFloatingShape2 {
    width: 200px;
    height: 200px;
    background: #3cb3f6;
    top: 60%;
    right: 10%;
    animation-delay: 3s;
  }

  .kidsFloatingShape3 {
    width: 100px;
    height: 100px;
    background: #9c06c1;
    bottom: 20%;
    left: 15%;
    animation-delay: 6s;
  }

  .kidsFloatingShape4 {
    width: 120px;
    height: 120px;
    background: #1fbe4c;
    top: 30%;
    right: 25%;
    animation-delay: 9s;
  }

  .kidsFloatingShape5 {
    width: 80px;
    height: 80px;
    background: #ff6b6b;
    bottom: 30%;
    right: 5%;
    animation-delay: 12s;
  }

  @keyframes kidsFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    25% {
      transform: translateY(-20px) rotate(90deg);
    }
    50% {
      transform: translateY(10px) rotate(180deg);
    }
    75% {
      transform: translateY(-15px) rotate(270deg);
    }
  }

  /* Header Section */
  .settingsKidsHeaderDiv {
    width: 100%;
    margin-top: 80px;
    padding: 20px 40px;
    position: relative;
    z-index: 10;
  }

  .kidsSettingsBack {
    position: absolute;
    left: 40px;
    top: 0px;
    font-size: 16px;
    color: #5a67d8;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 10;
  }

  .kidsBackArrow {
    font-size: 20px;
    transition: transform 0.3s ease;
  }

  .kidsSettingsBack:hover .kidsBackArrow {
    transform: translateX(-5px);
  }

  .settingsKidsMainHeaderInnerDiv {
    width: 100%;
    text-align: center;
    padding: 20px 0;
  }

  .settingsKidsMainHeader {
    font-size: 48px;
    font-weight: 800;
    margin: 0;
    position: relative;
    display: inline-block;
  }

  .kidsHeaderWord {
    display: inline-block;
    margin: 0 8px;
    opacity: 0;
    transform: translateY(20px);
    animation: kidsWordAppear 0.6s ease-out forwards;
  }

  .kidsHeaderWord1 {
    animation-delay: 0.1s;
    color: #ff6b6b;
  }
  .kidsHeaderWord2 {
    animation-delay: 0.2s;
    color: #5a67d8;
  }
  .kidsHeaderWord3 {
    animation-delay: 0.3s;
    color: #ffb038;
  }
  .kidsHeaderWord4 {
    animation-delay: 0.4s;
    color: #1fbe4c;
  }
  .kidsHeaderWord5 {
    animation-delay: 0.5s;
    color: #9c06c1;
  }

  .kidsSparkleEmoji {
    position: absolute;
    top: -10px;
    right: -40px;
    font-size: 30px;
    animation: kidsSparkle 2s ease-in-out infinite;
  }

  @keyframes kidsWordAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes kidsSparkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
    }
    50% {
      transform: scale(1.2) rotate(180deg);
    }
  }

  /* Location Section */
  .kidsLocationSection {
    margin: 40px auto;
    max-width: 600px;
    text-align: center;
    position: relative;
    z-index: 10;
  }

  .kidsLocationTitle {
    font-size: 24px;
    color: #2d3748;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .kidsLocationIcon {
    margin-right: 10px;
    animation: kidsLocationBounce 2s ease-in-out infinite;
  }

  @keyframes kidsLocationBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  /* Select Wrappers */
  .kidsCurriculumCountryDiv,
  .kidsCurriculumProvinceOrStateDiv {
    margin: 15px auto;
    position: relative;
    z-index: 10;
  }

  .kidsSelectWrapper {
    position: relative;
    display: inline-block;
    background: white;
    border-radius: 50px;
    padding: 5px 20px 5px 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .kidsSelectWrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  }

  .kidsSelectEmoji {
    font-size: 24px;
    margin-right: 10px;
    vertical-align: middle;
  }

  .kidsCurriculumCountryDropDown,
  .kidsCurriculumProvinceOrStateDropDown {
    border: none;
    background: transparent;
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    padding: 10px 40px 10px 5px;
    cursor: pointer;
    appearance: none;
    outline: none;
  }

  .kidsCurriculumCountryDropDown option:disabled {
    color: #a0aec0;
    font-style: italic;
  }

  .kidsSelectArrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #5a67d8;
    font-size: 14px;
    pointer-events: none;
    transition: transform 0.3s ease;
  }

  .kidsSelectWrapper:hover .kidsSelectArrow {
    transform: translateY(-50%) translateY(2px);
  }

  /* Action Cards Section */
  .settingsKidsMiddleDiv {
    width: 100%;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
  }

  .kidsActionTitle {
    font-size: 32px;
    color: #2d3748;
    margin-bottom: 40px;
    font-weight: 700;
    text-align: center;
  }

  .settingsKidsBoxes {
    display: flex;
    gap: 60px;
    margin-top: 0;
  }

  .settingsKidsLearnBox,
  .settingsKidsGamesBox {
    width: 280px;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    padding: 30px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .settingsKidsLearnBox {
    background: linear-gradient(135deg, #e0f7fa 0%, #b2dfdb 100%);
  }

  .settingsKidsGamesBox {
    background: linear-gradient(135deg, #fff3e0 0%, #ffccbc 100%);
  }

  .kidsBoxContent {
    position: relative;
    z-index: 2;
    text-align: center;
  }

  .kidsBoxEmoji {
    font-size: 60px;
    display: block;
    margin-bottom: 20px;
    animation: kidsEmojiFloat 3s ease-in-out infinite;
  }

  @keyframes kidsEmojiFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .kidsBoxTitle {
    font-size: 28px;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: #2d3748;
  }

  .kidsBoxDescription {
    font-size: 16px;
    color: #4a5568;
    margin: 0 0 20px 0;
  }

  .kidsBoxStars {
    display: flex;
    justify-content: center;
    gap: 5px;
  }

  .kidsStar {
    font-size: 20px;
    animation: kidsStarTwinkle 2s ease-in-out infinite;
  }

  .kidsStar:nth-child(2) {
    animation-delay: 0.3s;
  }
  .kidsStar:nth-child(3) {
    animation-delay: 0.6s;
  }

  @keyframes kidsStarTwinkle {
    0%,
    100% {
      opacity: 0.5;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.2);
    }
  }

  /* Box Glow Effects */
  .kidsBoxGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .kidsLearnGlow {
    background: radial-gradient(
      circle,
      rgba(31, 190, 76, 0.3) 0%,
      transparent 70%
    );
  }

  .kidsGamesGlow {
    background: radial-gradient(
      circle,
      rgba(255, 107, 107, 0.3) 0%,
      transparent 70%
    );
  }

  /* Hover Effects */
  .settingsKidsLearnBox:hover,
  .settingsKidsGamesBox:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  }

  .kidsBoxHovered .kidsBoxGlow {
    opacity: 1;
  }

  .kidsBoxHovered .kidsBoxEmoji {
    animation-duration: 0.5s;
  }

  /* Selected State */
  .kidsBoxSelected {
    transform: scale(0.95);
    opacity: 0.8;
  }

  /* Footer Section */
  .kidsSettingsFooter {
    margin-top: 60px;
    margin-bottom: 40px;
    text-align: center;
    position: relative;
    z-index: 10;
  }

  .kidsEncouragement {
    font-size: 20px;
    margin: 0;
  }

  .kidsRainbowText {
    background: linear-gradient(
      to right,
      #ff6b6b,
      #ffb038,
      #ffe66d,
      #1fbe4c,
      #3cb3f6,
      #9c06c1
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    animation: kidsRainbowMove 5s ease-in-out infinite;
  }

  @keyframes kidsRainbowMove {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  .kidsLearnTopStatement {
    font-size: 25px;
    font-weight: 700;
    padding: 14px;
    margin-top: 100px;
  }

  .kidsLearnTopStatement .learn {
    color: #ffb038;
  }

  .kidsLearnTopStatement .fun {
    color: #3cb3f7;
  }

  .kidsLearnSubjectsButtonDiv {
    width: 100%;
    max-width: 1200px;
    height: 50%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 30px;
    margin-top: 50px;
  }

  .kidsLearnMathDiv:hover,
  .kidsLearnEnglishDiv:hover,
  .kidsLearnScienceDiv:hover {
    cursor: pointer;
    background-color: #f2f2f2;
  }

  .kidsLearnSubjectsButtonDiv1Div1 {
    height: 200px;
    justify-content: flex-start;
  }

  .kidsLearnSubjectsButtonDiv1Div2 {
    width: 200px;
    height: 200px;
  }

  .kidsLearnDiv2Div1 {
    width: 50%;
    height: 100%;
  }

  .kidsLearnDiv2Div2 {
    width: 50%;
    height: 100%;
  }

  .kidsLearnDiv1Div1 {
    width: 50%;
    height: 100%;
  }

  .kidsLearnScienceDiv {
    /** square of width 40% of parent width and height is same as width; with 5px gray border radius; white background **/
    width: 200px;
    height: 200px;
    padding-bottom: 30%;
    border-radius: 5px;
    margin-left: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid #b5c5cd;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
  }

  /** red circle centered in square; circle diameter is 80% of square width **/
  .kidsLearnScienceDivCircle {
    position: absolute;
    width: 50%;
    padding-bottom: 50%;
    border-radius: 50%;
    margin: 0 auto;
    background-color: #eadb52;
    top: 25%;
  }

  .kidsLearnScienceDivCircleImage {
    position: absolute;
    width: 50%;
    padding-bottom: 50%;
    margin: 0 auto;
    top: 25%;
    left: 25%;
  }

  .kidsLearnEnglishDiv {
    /** square of width 40% of parent width and height is same as width; with 5px gray border radius; white background **/
    width: 200px;
    height: 200px;
    padding-bottom: 30%;
    border-radius: 5px;
    margin-left: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid #b5c5cd;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
  }

  .kidsLearnEnglishDivCircle {
    position: absolute;
    width: 50%;
    padding-bottom: 50%;
    border-radius: 50%;
    margin: 0 auto;
    background-color: #3aad76;
    top: 25%;
  }

  .kidsLearnEnglishDivCircle h3 {
    position: absolute;
    padding-bottom: 50%;
    margin: 0 auto;
    top: 35%;
    font-family: "Oldenburg";
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: #ffffff;
  }

  .kidsLearnMathDiv {
    width: 200px;
    height: 200px;
    padding-bottom: 30%;
    border-radius: 5px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid #b5c5cd;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
  }

  /** red circle centered in square; circle diameter is 80% of square width **/
  .kidsLearnMathDivCircle {
    position: absolute;
    width: 50%;
    padding-bottom: 50%;
    border-radius: 50%;
    margin: 0 auto;
    background-color: #bb1717;
    top: 25%;
  }

  .kidsLearnMathDivCircleImage {
    position: absolute;
    width: 50%;
    padding-bottom: 50%;
    margin: 0 auto;
    top: 25%;
    left: 25%;
  }

  .kidsLearnMathDiv span,
  .kidsLearnEnglishDiv span,
  .kidsLearnScienceDiv span {
    /** place at bottom of parent div **/
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #122e3b;
    font-weight: 400;
  }

  .kids_current_settings {
    width: 100%;
    margin-top: 50px;
    font-size: 16px;
  }

  .kids_current_settings span {
    color: #122e3b;
    font-weight: 700;
    margin: 0px 10px;
  }

  /* Enhanced KidsLearn Styles - Landscape */
  .kidsLearnMainDiv {
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #ebf2ff 100%);
    overflow-x: hidden;
  }

  /* Floating Background Shapes */
  .kidsLearnFloatingShapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .kidsLearnFloatingShape {
    position: absolute;
    opacity: 0.08;
    animation: kidsLearnFloat 25s ease-in-out infinite;
  }

  .kidsLearnFloatingShape1 {
    width: 200px;
    height: 200px;
    background: #ff6b6b;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .kidsLearnFloatingShape2 {
    width: 150px;
    height: 150px;
    background: #4ecdc4;
    border-radius: 50%;
    top: 60%;
    right: 10%;
    animation-delay: 5s;
  }

  .kidsLearnFloatingShape3 {
    width: 100px;
    height: 100px;
    background: #ffd93d;
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    bottom: 20%;
    left: 20%;
    animation-delay: 10s;
  }

  .kidsLearnFloatingShape4 {
    width: 80px;
    height: 80px;
    background: #95e1d3;
    border-radius: 50%;
    top: 40%;
    right: 30%;
    animation-delay: 15s;
  }

  @keyframes kidsLearnFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
    33% {
      transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
      transform: translate(-20px, 20px) rotate(240deg);
    }
  }

  /* Header Section */
  .kidsLearnHeaderSection {
    width: 100%;
    padding: 20px 60px;
    margin-top: 70px;
    position: relative;
    z-index: 10;
  }

  .kidsLearnMainTitle {
    font-size: 52px;
    font-weight: 800;
    text-align: center;
    margin: 30px 0;
    position: relative;
  }

  .kidsLearnTitleWord {
    display: inline-block;
    margin: 0 10px;
    opacity: 0;
    transform: translateY(30px);
    animation: kidsLearnWordAppear 0.8s ease-out forwards;
  }

  .kidsLearnTitleWord1 {
    animation-delay: 0.1s;
    color: #ff6b6b;
  }
  .kidsLearnTitleWord2 {
    animation-delay: 0.3s;
    color: #4ecdc4;
  }
  .kidsLearnTitleWord3 {
    animation-delay: 0.5s;
    color: #ffd93d;
  }

  .kidsLearnSparkle {
    position: absolute;
    top: -15px;
    right: -50px;
    font-size: 36px;
    animation: kidsLearnSparkle 3s ease-in-out infinite;
  }

  @keyframes kidsLearnWordAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes kidsLearnSparkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.3) rotate(180deg);
      opacity: 1;
    }
  }

  .kids_current_settings {
    text-align: center;
    margin-top: 20px;
  }

  .kidsLocationEmoji {
    font-size: 24px;
    margin-right: 8px;
    animation: kidsLocationPulse 2s ease-in-out infinite;
  }

  @keyframes kidsLocationPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .kidsLocationText {
    font-size: 18px;
    color: #5a67d8;
    font-weight: 600;
  }

  /* Subject Cards Container */
  .kidsLearnSubjectsContainer {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin: 60px auto;
    max-width: 1200px;
    position: relative;
    z-index: 10;
  }

  .kidsLearnSubjectCard {
    width: 300px;
    height: 380px;
    background: white;
    border-radius: 30px;
    padding: 30px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }

  .kidsSubjectsVisible .kidsLearnSubjectCard {
    animation: kidsSubjectCardAppear 0.6s ease-out forwards;
  }

  @keyframes kidsSubjectCardAppear {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kidsLearnMathCard {
    background: linear-gradient(135deg, #ffe5e5 0%, #ffd4e5 100%);
  }

  .kidsLearnEnglishCard {
    background: linear-gradient(135deg, #e5f3ff 0%, #e5e5ff 100%);
  }

  .kidsLearnScienceCard {
    background: linear-gradient(135deg, #fffde5 0%, #ffe5f5 100%);
  }

  .kidsSubjectCardContent {
    position: relative;
    z-index: 2;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .kidsSubjectIconWrapper {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kidsSubjectEmoji {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 48px;
    animation: kidsEmojiFloat 4s ease-in-out infinite;
  }

  @keyframes kidsEmojiFloat {
    0%,
    100% {
      transform: translateY(0) rotate(-5deg);
    }
    50% {
      transform: translateY(-15px) rotate(5deg);
    }
  }

  .kidsSubjectImage {
    width: 100px;
    height: 100px;
    object-fit: contain;
  }

  .kidsEnglishHello {
    width: 120px;
    height: 120px;
    background: #4ecdc4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kidsEnglishHello h3 {
    color: white;
    font-size: 24px;
    font-weight: 800;
    margin: 0;
  }

  .kidsSubjectTitle {
    font-size: 32px;
    font-weight: 800;
    color: #2d3748;
    margin: 20px 0 10px;
  }

  .kidsSubjectDescription {
    font-size: 16px;
    color: #718096;
    margin: 0 0 20px;
  }

  .kidsSubjectStars {
    display: flex;
    justify-content: center;
    gap: 8px;
  }

  .kidsSubjectStar {
    font-size: 24px;
    animation: kidsStarTwinkle 2s ease-in-out infinite;
  }

  .kidsSubjectStar:nth-child(2) {
    animation-delay: 0.4s;
  }
  .kidsSubjectStar:nth-child(3) {
    animation-delay: 0.8s;
  }

  /* Card Glow Effect */
  .kidsSubjectCardGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  /* Hover States */
  .kidsLearnSubjectCard:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  }

  .kidsSubjectHovered .kidsSubjectCardGlow {
    opacity: 0.3;
  }

  .kidsSubjectHovered .kidsSubjectEmoji {
    animation-duration: 1s;
  }

  /* Selected State */
  .kidsSubjectSelected {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  }

  .kidsSubjectSelected::after {
    content: "✓";
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: #48bb78;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
  }

  /* Click Animation */
  .kidsSubjectClicked {
    animation: kidsCardClick 0.6s ease;
  }

  @keyframes kidsCardClick {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Grade Selection Section */
  .kidsGradeLevelSection {
    margin: 40px auto 60px;
    max-width: 600px;
    position: relative;
    z-index: 10;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
  }

  .kidsGradeVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kidsGradeSelectionWrapper {
    text-align: center;
  }

  .kidsGradeTitle {
    font-size: 28px;
    color: #2d3748;
    margin-bottom: 30px;
    font-weight: 700;
  }

  .kidsGradeIcon {
    margin-right: 10px;
    animation: kidsGradeIconBounce 2s ease-in-out infinite;
  }

  @keyframes kidsGradeIconBounce {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-5px) rotate(5deg);
    }
  }

  .kidsGradeSelectWrapper {
    position: relative;
    display: inline-block;
    background: white;
    border-radius: 50px;
    padding: 5px 25px 5px 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .kidsGradeSelectWrapper:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  }

  .kidsGradeEmoji {
    font-size: 28px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .kidsgradeLevelSelect {
    border: none;
    background: transparent;
    height: 60px;
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    padding: 15px 50px 15px 10px;
    cursor: pointer;
    appearance: none;
    outline: none;
    min-width: 250px;
  }

  .kidsGradeSelectArrow {
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    color: #5a67d8;
    font-size: 16px;
    pointer-events: none;
    transition: transform 0.3s ease;
  }

  .kidsGradeSelectWrapper:hover .kidsGradeSelectArrow {
    transform: translateY(-50%) translateY(3px);
  }

  /* Coming Soon Message */
  .kidsComingSoonMessage {
    text-align: center;
    padding: 40px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .kidsComingSoonEmoji {
    font-size: 60px;
    display: block;
    margin-bottom: 20px;
    animation: kidsComingSoonBounce 2s ease-in-out infinite;
  }

  @keyframes kidsComingSoonBounce {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .kidsComingSoonMessage p {
    font-size: 20px;
    color: #4a5568;
    margin: 0;
  }

  .kidsComingSoonHighlight {
    color: #ffb038;
    font-weight: 700;
  }

  .kidsComingSoonSubtext {
    font-size: 16px;
    color: #718096;
  }

  /* Footer Section */
  .kidsLearnFooter {
    margin-top: 60px;
    text-align: center;
    position: relative;
    z-index: 10;
  }

  .kidsLearnEncouragement {
    font-size: 24px;
    margin: 0;
  }

  /* Enhanced KidsGames Styles - Landscape */
  .kidsGamesMainDiv {
    min-height: calc(100vh - 50px);
    position: relative;
    background: linear-gradient(135deg, #ffefd5 0%, #ffe4e1 100%);
    overflow-x: hidden;
    margin-top: 50px;
  }

  /* Floating Background Shapes */
  .kidsGamesFloatingShapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .kidsGamesFloatingShape {
    position: absolute;
    opacity: 0.1;
    animation: kidsGamesFloat 30s ease-in-out infinite;
  }

  .kidsGamesFloatingShape1 {
    width: 150px;
    height: 150px;
    background: #ff6b6b;
    border-radius: 50%;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .kidsGamesFloatingShape2 {
    width: 200px;
    height: 200px;
    background: #4ecdc4;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    top: 50%;
    right: 5%;
    animation-delay: 6s;
  }

  .kidsGamesFloatingShape3 {
    width: 120px;
    height: 120px;
    background: #ffd93d;
    border-radius: 50%;
    bottom: 20%;
    left: 10%;
    animation-delay: 12s;
  }

  .kidsGamesFloatingShape4 {
    width: 100px;
    height: 100px;
    background: #95e1d3;
    border-radius: 50%;
    top: 30%;
    right: 20%;
    animation-delay: 18s;
  }

  .kidsGamesFloatingShape5 {
    width: 80px;
    height: 80px;
    background: #c7ceea;
    border-radius: 50%;
    bottom: 30%;
    right: 15%;
    animation-delay: 24s;
  }

  @keyframes kidsGamesFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
      transform: translate(50px, -30px) rotate(90deg) scale(1.1);
    }
    50% {
      transform: translate(-30px, 50px) rotate(180deg) scale(0.9);
    }
    75% {
      transform: translate(30px, 30px) rotate(270deg) scale(1.05);
    }
  }

  /* Header Section */
  .kidsGamesHeaderSection {
    width: 100%;
    padding: 20px 60px;
    margin-top: 20px;
    position: relative;
    z-index: 10;
    text-align: center;
  }

  .kidsGamesBack {
    position: absolute;
    left: 60px;
    top: 20px;
    font-size: 16px;
    color: #5a67d8;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .kidsBackArrow {
    font-size: 20px;
    transition: transform 0.3s ease;
  }

  .kidsGamesBack:hover .kidsBackArrow {
    transform: translateX(-5px);
  }

  .kidsGamesMainTitle {
    font-size: 56px;
    font-weight: 800;
    margin: 30px 0 20px;
    position: relative;
    display: inline-block;
  }

  .kidsGamesTitleWord {
    display: inline-block;
    margin: 0 12px;
    opacity: 0;
    transform: translateY(30px);
    animation: kidsGamesWordAppear 0.8s ease-out forwards;
  }

  .kidsGamesTitleWord1 {
    animation-delay: 0.1s;
    color: #ff6b6b;
  }
  .kidsGamesTitleWord2 {
    animation-delay: 0.3s;
    color: #4ecdc4;
  }
  .kidsGamesTitleWord3 {
    animation-delay: 0.5s;
    color: #ffd93d;
  }

  .kidsGamesSparkle {
    position: absolute;
    top: -20px;
    right: -60px;
    font-size: 40px;
    animation: kidsGamesSparkle 3s ease-in-out infinite;
  }

  @keyframes kidsGamesWordAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes kidsGamesSparkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
    }
    25% {
      transform: scale(1.1) rotate(15deg);
    }
    50% {
      transform: scale(1.2) rotate(-15deg);
    }
    75% {
      transform: scale(1.1) rotate(10deg);
    }
  }

  .kidsGamesSubtitle {
    font-size: 20px;
    color: #718096;
    margin: 0;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.8s forwards;
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Category Section */
  .kidsGamesCategorySection {
    margin: 40px auto;
    max-width: 1200px;
    position: relative;
    z-index: 10;
  }

  .kidsGamesCategoryContainer {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0 20px;
  }

  .kidsGamesCategoryBtn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: white;
    border: 3px solid transparent;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: categoryAppear 0.6s ease-out forwards;
  }

  @keyframes categoryAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsGamesCategoryBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .kidsCategorySelected {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  }

  .kidsCategoryEmoji {
    font-size: 24px;
    animation: emojiPulse 2s ease-in-out infinite;
  }

  @keyframes emojiPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.15);
    }
  }

  .kidsCategoryName {
    font-size: 16px;
  }

  /* Games Container */
  .kidsGamesContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 0 40px;
    position: relative;
    z-index: 10;
  }

  .kidsGameCard {
    background: white;
    border-radius: 25px;
    padding: 25px;
    min-height: 280px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }

  .kidsGamesVisible .kidsGameCard {
    animation: gameCardAppear 0.6s ease-out forwards;
  }

  @keyframes gameCardAppear {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kidsGameCardContent {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  .kidsGameEmoji {
    font-size: 60px;
    margin-bottom: 15px;
    animation: gameEmojiFloat 3s ease-in-out infinite;
  }

  @keyframes gameEmojiFloat {
    0%,
    100% {
      transform: translateY(0) rotate(-5deg);
    }
    50% {
      transform: translateY(-10px) rotate(5deg);
    }
  }

  .kidsGameTitle {
    font-size: 24px;
    font-weight: 800;
    color: white;
    margin: 0 0 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }

  .kidsGameDescription {
    font-size: 16px;
    color: white;
    margin: 0 0 20px;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  }

  .kidsGameDifficulty {
    margin-bottom: 20px;
  }

  .kidsDifficultyLabel {
    font-size: 14px;
    color: white;
    opacity: 0.8;
    display: block;
    margin-bottom: 5px;
  }

  .kidsGameStars {
    display: flex;
    justify-content: center;
    gap: 5px;
  }

  .kidsGameStar {
    font-size: 20px;
    transition: all 0.3s ease;
  }

  .kidsStarFilled {
    animation: starTwinkle 2s ease-in-out infinite;
  }

  @keyframes starTwinkle {
    0%,
    100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.8;
    }
  }

  .kidsGamePlayBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 12px 24px;
    margin: 0 auto;
    transition: all 0.3s ease;
  }

  .kidsPlayIcon {
    font-size: 16px;
    color: white;
  }

  .kidsPlayText {
    font-size: 16px;
    font-weight: 700;
    color: white;
  }

  /* Hover Effects */
  .kidsGameCard:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  }

  .kidsGameCardHovered .kidsGameEmoji {
    animation-duration: 0.8s;
  }

  .kidsGameCardHovered .kidsGamePlayBtn {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
  }

  /* Click Animation */
  .kidsGameCardClicked {
    animation: gameCardClick 0.4s ease;
  }

  @keyframes gameCardClick {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Card Glow */
  .kidsGameCardGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .kidsGameCardHovered .kidsGameCardGlow {
    opacity: 1;
  }

  /* Empty State */
  .kidsGamesEmptyState {
    text-align: center;
    padding: 60px 20px;
    position: relative;
    z-index: 10;
  }

  .kidsEmptyEmoji {
    font-size: 80px;
    display: block;
    margin-bottom: 20px;
    animation: emptyBounce 2s ease-in-out infinite;
  }

  @keyframes emptyBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }

  .kidsGamesEmptyState p {
    font-size: 20px;
    color: #718096;
    margin: 0 0 30px;
  }

  .kidsShowAllBtn {
    padding: 15px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
  }

  .kidsShowAllBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.5);
  }

  /* Footer */
  .kidsGamesFooter {
    text-align: center;
    margin: 60px 0 40px;
    position: relative;
    z-index: 10;
  }

  .kidsGamesEncouragement {
    font-size: 24px;
    margin: 0;
  }

  /********** Kids Practice Page **************/

  .kidsPracticeMainDiv {
    width: 100%;
    margin-top: 50px;
  }

  .kidsPracticeMainDivHeaderDiv {
    width: 100%;
    margin-top: 20px;
    padding: 0 50px;
  }

  .kidsPracticeMainDivHeaderDiv > span {
    color: #122e3b;
    cursor: pointer;
    font-size: 1rem;
  }

  .kidsMathTopicMainDiv h2,
  .kidsEnglishTopicMainDiv h2,
  .kidsScienceTopicMainDiv h2 {
    color: #ffb038;
    text-align: center;
  }

  .kidsMathTopicMainDivLocation,
  .kidsScienceTopicMainDivLocation,
  .kidsEnglishTopicMainDivLocation {
    font-size: 16px;
    color: #122e3b;
  }

  .kidsTopicBox {
    width: 200px;
    height: 200px;
    border: 1px solid #fafafa;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px #b5c5cd;
    margin: 20px;
    text-align: center;
  }

  .kidsTopicBox:hover {
    cursor: pointer;
    background-color: #b5c5cd;
  }

  .kidsTopicBox > div {
    height: 70%;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: 24px;
  }

  .kidsTopicBox span {
    font-size: 25px;
  }

  .kidsTopicBox p {
    color: #122e3b;
    font-size: 16px;
  }

  .kidsQuestionOuterDiv {
    width: 100%;
  }

  .kidsQuestionDiv {
    width: 90%;
    min-height: 800px;
    margin-top: 5px;
  }

  .kidsQuestionsDivHeader {
    width: 100%;
    margin-top: 5px;
    padding: 10px 50px;
  }

  .kidsQuestionsDivHeader h1 {
    color: #545454;
    font-weight: 400;
  }

  .kidsPrevNextOuterDiv {
    margin-top: 50px;
  }

  .kidsPrevNextOuterDiv {
    width: 100%;
  }

  .kidsPrevNextDiv {
    width: 300px;
  }

  .kidsPrevButton,
  .kidsNextButton {
    width: 150px;
    height: 50px;
    border-radius: 5px;
    margin: 10px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    background: #b4b4b499;
    color: #fff;
  }

  .kidsNextPrevButtonEnabled {
    background: #3cb3f699;
    color: #686767;
  }

  .kidsPracticeFooterDiv {
    width: 100%;
    height: 60px;
    margin-top: 50px;
  }

  .kidsPracticeFooterDivLeft {
    width: 200px;
    height: 60px;
    position: relative;
  }

  .kidsPracticeFooterDivRight {
    width: 850px;
    height: 60px;
  }

  .kidsPracticeFooterButton {
    width: 200px;
    height: 50px;
    border-radius: 5px;
    margin: 10px;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    background-color: #dfdfdf;
    color: #686767;
  }

  .kidsPracticeFooterExitButton {
    width: 200px;
    height: 50px;
    border-radius: 5px;
    margin: 10px;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    background-color: #ffb038;
    color: #fff;
  }

  .kidsQuestionsSection {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 600px;
  }

  .kidsMathsQuestionText,
  .kidsEnglishQuestionText {
    color: #545454;
    font-size: 36px;
    padding: 20px;
  }

  .kids_input_answer {
    width: 250px;
    height: 80px;
    border-radius: 7px;
    font-size: 36px;
    border: 1px solid #545454;
    background: #eaeaea;
  }

  .buttonOptions {
    width: 150px;
    height: 50px;
    border: 1px solid #545454;
  }

  .kidsPracticeStarsDiv {
    height: auto;
  }

  .starImageDiv {
    width: 70px;
    height: 70px;
    background-color: #d9d9d9;
    margin-bottom: 5px;
    cursor: pointer;
  }

  /***** End of Kids Practice Page *********/

  .topicsCardDiv {
    min-width: 70vw;
    padding: 50px;
    margin-top: 50px;
    border-radius: 10px;
    box-shadow: 0px 1px 1px 0px #b5c5cd;
  }

  .topicsLabel {
    text-align: center;
  }

  .topicsListDiv {
    width: 500px;
    margin-bottom: 20px;
    cursor: pointer;
  }

  .topicsToggleDiv {
    width: 50vw;
    padding: 10px 0px;
  }

  .list_or_grid_icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .gridIcon,
  .listIcon {
    cursor: pointer;
  }

  .topicsListHeader {
    width: 500px;
    padding: 20px 10px;
    background-color: lightgray;
    margin-bottom: 30px;
    margin-top: 30px;
    font-size: 20px;
  }

  .topicsListLeft {
    width: 30%;
  }

  .topicsListRight {
    width: 70%;
  }

  /********** Kids Registration Page **************/

  .kidsRegistrationHeader {
    margin-top: 60px;
  }

  .kidsRegistrationHeaderP {
    color: #122e3b;
    font-weight: 600;
  }

  .kidsRegistrationHeaderSpan {
    color: #ffb038;
    margin: 0px 5px;
  }

  .kidsRegistrationHeaderRolesDiv1 {
    width: 600px;
    height: 150px;
    border: 0.3px solid #b3b3b3;
    border-radius: 10px;
    padding: 0;
  }

  .kidsRegistrationHeaderRolesButtonsDiv0 {
    width: 450px;
  }

  .kidsRegistrationHeaderRolesDiv1 p {
    font-weight: bold;
    color: #656565;
  }

  .kidsRegistrationHeaderRolesButtonsDiv button:hover {
    opacity: 0.75;
    cursor: pointer;
  }

  .kidsRegistrationRolesButtonTeacher {
    width: 200px;
    height: 50px;
    border-radius: 5px;
    color: #fff;
    margin-right: 10px;
    background-color: #b5c5cd;
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
  }

  .kidsRegistrationRolesButtonStudent {
    width: 200px;
    height: 50px;
    border-radius: 5px;
    color: #fff;
    margin-left: 10px;
    background-color: #122e3b;
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
  }

  .kidsRegistrationRolesButtonNotChosen {
    width: 200px;
    height: 50px;
    border-radius: 5px;
    color: #fff;
    margin-left: 10px;
    background-color: #e4e3e3;
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
  }

  .kidsRegistrationHeaderRolesDiv2 {
    width: 100px;
    margin-left: 0;
  }

  .kidsRegistrationRibbonsDiv {
    width: 150px;
    height: 150px;
    margin-right: 0;
    clip-path: polygon(0% 0%, 40% 0%, 100% 40%, 100% 70%, 0% 0%);
  }

  .teachercolor {
    background-color: #b5c5cd;
  }

  .studentcolor {
    background-color: #122e3b;
  }

  .notChosenColor {
    background-color: #e4e3e3;
  }

  .registrationMiddleDiv {
    width: 600px;
  }

  .registrationMiddleDiv1 {
    width: 800px;
    align-items: center;
    justify-content: space-around;
    padding-right: 30px;
  }

  .registrationMiddleDiv2 {
    justify-content: space-around;
  }

  .registrationCheckMarkBoxDiv1 {
    margin-right: 20px;
  }

  .registrationCheckMarkBoxDiv2 {
    margin-left: 20px;
  }

  .registrationCheckMarkBoxDiv1 > span,
  .registrationCheckMarkBoxDiv2 > span {
    color: #969696;
  }

  .registrationCheckMarkBox,
  .registrationBottomDivCheckmarkBox {
    width: 40px;
    height: 40px;
    background-color: #e4e3e3;
    margin-left: 10px;
    cursor: pointer;
  }

  .registrationCheckMarkBox:hover,
  .registrationBottomDivCheckmarkBox:hover {
    opacity: 0.75;
  }

  .registrationCheckMarkBox span,
  .registrationBottomDivCheckmarkBox span {
    width: 30px;
  }

  .kidsRegistrationTeacherParent {
    color: #969696;
  }

  .kidsRegistrationNumKids {
    padding: 10px 5px;
    margin-top: 10px;
  }

  .kidsRegistrationNumKids span,
  .kidsRegistrationNumKids input {
    padding: 0;
    margin: 0;
    line-height: normal;
  }

  .kidsRegistrationNumKids span {
    margin-right: 10px;
    color: #969696;
  }

  .kidsRegistrationNumKids input {
    width: 50px;
    border: 0.3px solid #b3b3b3;
    color: #969696;
    text-align: center;
  }

  .kidsRegistrationNumKidsDetails {
    padding: 10px 5px;
    margin-top: 10px;
  }

  .kidsRegistrationNumKidsDetails1 {
    min-width: 500px;
    border: 0.3px solid #b3b3b3;
    border-radius: 10px;
    padding: 20px 10px;
    margin: 10px auto;
    margin-right: 100px;
  }

  .childInfoMainLabel {
    width: 70px;
    height: 50px;
    box-shadow: 0px 4px 4px 0px #3aa9e8;
    border-radius: 5px;
    color: #969696;
    font-size: 12px;
    margin-right: 15px;
  }

  .childInfoMainInputDiv span,
  .childInfoMainInputDiv1 span {
    color: #969696;
    font-size: 12px;
    margin-right: 5px;
  }

  .kidsRegistrationNumKidsDetails1 > input {
    padding: 0;
    margin: 0;
    line-height: normal;
    width: 70px;
    border: 0.3px solid #b3b3b3;
    color: #969696;
    text-align: center;
  }

  .childInfoMainInputDiv1 {
    margin-left: 10px;
  }

  .childInfoMainInputDiv1 input {
    border: 0.3px solid #b3b3b3;
    color: #969696;
    margin-left: 10px;
  }

  .kidsRegistrationButton {
    width: 175px;
    height: 40px;
    color: #fff;
    background-color: #122e3b;
    border-radius: 5px;
  }

  .kidsRegistrationBottomDiv1Span {
    color: #969696;
    font-size: 12px;
    font-weight: 500;
    margin-top: 18px;
  }

  .registrationBottomDiv1Div1 {
    margin: 0px 10px;
  }

  .registrationBottomDiv1Div1 > span {
    color: #969696;
  }

  .registrationBottomDiv2 {
    margin: 20px auto;
  }

  .kidsRegistrationHeader1 {
    width: 600px;
    margin-right: 100px;
    margin-bottom: 20px;
    border: 1px solid #b3b3b3;
    border-radius: 10px;
  }

  .kidsRegistrationHeader1Div1 {
    width: 300px;
    margin: 5px auto;
  }

  .kidsRegistrationHeader1Div1 > span {
    color: #969696;
    margin-right: 10px;
  }

  .kidsRegistrationHeader1Div1 input {
    height: 25px;
    border: 1px solid #b3b3b3;
    font-size: 12px;
  }

  .kidsRegistrationHeader1Select {
    width: 300px;
    margin: 5px auto;
    outline: none;
    border: 1px solid #b3b3b3;
    font-size: 12px;
  }

  /*** End of Kids Registration Page ***/

  /* Tablet - Landscape */

  /* Desktop - Landscape */
  @media screen and (min-width: 1025px) {
    /* CSS styles for desktop landscape go here */
    .kidsHomeTopDiv1 {
      width: 100%;
      background: #ffffff;
      border: 1px solid #f1f1f1;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 0px;
      min-height: calc(100vh - 60px);
      margin-top: 60px;
      padding: 0 0 10rem 0;
    }

    .kidsHomeTopDiv1a {
      width: 100%;
      height: 60%;
      padding-top: 1rem;
    }

    .kidsHomeTopDiv1a1 h1 {
      color: #726d6d;
      width: 100%;
      text-align: center;
      font-family: "Noto Sans Tai Tham";
      font-style: normal;
      font-weight: 700;
      font-size: 4rem;
    }

    .ilearnSTEM {
      margin: 0 1rem;
    }

    .i,
    .t {
      color: #838131;
    }

    .s {
      color: #ffb038;
    }

    .e {
      color: #c7282d;
    }

    .learn {
      color: #3cb3f7;
    }

    .m {
      color: #9c06c1;
    }

    .fun_adaptive {
      font-size: 1.5rem;
    }

    .kidsHomeTopDiv1a2 {
      width: 100%;
      height: 100%;
    }

    .kidsHomeTopDiv1a2a {
      width: 50%;
    }

    .kidsTakeoffImage {
      width: 80%;
      margin: 50px auto 100px auto;
    }

    .kidsHomeTopDiv1a2b1 {
      height: 50%;
    }

    .kidsHomeTopDiv1a2b1aGetStartedButton {
      width: 200px;
      height: 50px;
      background: #e05d5d;
      border-radius: 5px;
      border: none;
      margin-right: 1rem;
      color: #fff;
      font-size: 1rem;
    }

    .kidsHomeTopDiv1a2b1aPreviewButton {
      width: 200px;
      height: 50px;
      background: #ffb038;
      border: 1px solid #ffb038;
      border-radius: 5px;
      margin-left: 1rem;
      color: #fff;
      font-size: 1rem;
    }

    .kidsWhatWeOfferMainDiv {
      width: 100%;
      background-color: #b5c5cd;
      padding: 5rem 0 10rem 0;
    }

    .kidsWhatWeOfferMainDiv h1 {
      color: #122e3b;
      margin-bottom: 3rem;
      font-size: 40px;
    }

    .kidsWhatWeOfferDiv1 {
      min-width: 60%;
      height: 50%;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
    }

    .kidsWhatWeOfferDiv1Div1 {
      width: 50%;
      height: 100%;
      margin: 0px 10px;
    }

    .kidsWhatWeOfferMathDiv {
      width: 250px;
      height: 250px;
      border-radius: 5px;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      margin-right: 20px;
    }

    /** red circle centered in square; circle diameter is 80% of square width **/
    .kidsWhatWeOfferMathDivCircle {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      margin: 0 auto;
      background-color: #bb1717;
      top: 25%;
    }

    .kidsWhatWeOfferMathDivCircleImage {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      margin: 0 auto;
      top: 25%;
      left: 25%;
    }

    .kidsWhatWeOfferMathDiv span,
    .kidsWhatWeOfferEnglishDiv span,
    .kidsWhatWeOfferScienceDiv span,
    .kidsWhatWeOfferEduGamesDiv span {
      /** place at bottom of parent div **/
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      color: #545353;
      font-size: 18px;
    }

    .kidsWhatWeOfferEnglishDiv {
      /** square of width 40% of parent width and height is same as width; with 5px gray border radius; white background **/
      width: 250px;
      height: 250px;
      background-color: #fff;
      border-radius: 5px;
      margin: 0 auto;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      margin: 0px 20px;
    }

    /** red circle centered in square; circle diameter is 80% of square width **/
    .kidsWhatWeOfferEnglishDivCircle {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      margin: 0 auto;
      background-color: #3aad76;
      top: 25%;
    }

    .kidsWhatWeOfferEnglishDivCircle h3 {
      position: absolute;
      padding-bottom: 50%;
      margin: 0 auto;
      top: 45%;
      font-family: "Oldenburg";
      font-style: normal;
      font-weight: 400;
      font-size: 24px;
      line-height: 30px;
      color: #ffffff;
    }

    .kidsWhatWeOfferScienceDiv {
      /** square of width 40% of parent width and height is same as width; with 5px gray border radius; white background **/
      width: 250px;
      height: 250px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      margin: 0px 20px;
    }

    /** red circle centered in square; circle diameter is 80% of square width **/
    .kidsWhatWeOfferScienceDivCircle {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      margin: 0 auto;
      background-color: #eadb52;
      top: 25%;
    }

    .kidsWhatWeOfferScienceDivCircleImage {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      margin: 0 auto;
      top: 25%;
      left: 25%;
    }

    .kidsWhatWeOfferEduGamesDiv {
      /** square of width 40% of parent width and height is same as width; with 5px gray border radius; white background **/
      width: 250px;
      height: 250px;
      background-color: #fff;
      border-radius: 10px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      margin-left: 20px;
    }

    /** red circle centered in square; circle diameter is 80% of square width **/
    .kidsWhatWeOfferEduGamesDivCircle {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      margin: 0 auto;
      background-color: rgba(58, 169, 232, 0.5);
      top: 25%;
    }

    .kidsWhatWeOfferEduGamesDivCircleImage {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      margin: 0 auto;
      top: 40%;
      left: 25%;
    }

    .kidsWhatWeOfferMathDiv:hover,
    .kidsWhatWeOfferEnglishDiv:hover,
    .kidsWhatWeOfferScienceDiv:hover,
    .kidsWhatWeOfferEduGamesDiv:hover {
      cursor: pointer;
      background-color: #f2f2f2;
    }

    .kidsWhatWeOfferDiv1Div2 {
      width: 50%;
      height: 100%;
    }

    .kidsWhatWeOfferDiv2 {
      width: 100%;
      height: 50%;
    }

    .kidsWhatWeOfferDiv2Div1 {
      width: 50%;
      height: 100%;
    }

    .kidsWhatWeOfferDiv2Div2 {
      width: 50%;
      height: 100%;
    }

    .kidsPracticeAndGamesCardsDiv {
      width: 66.7%;
      margin: auto;
      background-color: #fff;
      justify-content: space-around;
      align-items: stretch;
      padding: 10rem 0;
    }

    .kidsPracticeCardDiv {
      width: 500px;
      background: #ffffff;
      border: 1px solid #b5b5b5;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      padding: 1rem 0;
      margin: 0px 20px;
    }

    .kidsGamesCardDiv {
      width: 500px;
      background: #ffffff;
      border: 1px solid #b5b5b5;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      padding: 1rem 0;
      margin: 0px 20px;
    }

    .kidsPracticeCardDiv p,
    .kidsGamesCardDiv p {
      font-family: "Oldenburg";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      width: 80%;
      color: #545353;
      padding: 1rem;
      margin-left: 1rem;
    }

    .kidsGamesCardDiv h2 {
      color: #e05d5d;
    }

    .kidsPracticeCardDiv h2 {
      color: #ffaf38;
    }

    .kidspersonalizedAdaptiveFlexibleDiv {
      width: 100%;
      padding: 5rem 0;
      background-color: #fafafa;
      justify-content: center;
      padding: 10rem 0;
    }

    .kidspersonalizedCardWrapperDiv {
      width: 100%;
      justify-content: center;
    }

    .kidspersonalizedCardWrapperDiv1 {
      justify-content: center;
    }

    .kidspersonalizedCard {
      width: 300px;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      padding: 20px 0px;
      margin: 0px 10px;
    }

    .kidsadaptiveCard {
      width: 300px;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      padding: 20px 0px;
      margin: 0px 10px;
    }

    .kidsflexibleCard {
      width: 300px;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      padding: 20px 0px;
      margin: 0px 10px;
    }

    .kidspersonalizedCard h2,
    .kidsadaptiveCard h2,
    .kidsflexibleCard h2 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 1.5rem;
      color: #ffffff;
    }

    .kidspersonalizedCard p,
    .kidsadaptiveCard p,
    .kidsflexibleCard p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: rgba(255, 255, 255, 0.8);
      width: 80%;
      padding-bottom: 2rem;
    }

    .kidsPricingCardsDiv {
      background: #ffffff;
      border: 1px solid #ededed;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 5rem 0 10rem 0;
    }

    .kidsPricingCardsDiv h1 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 500;
      font-size: 40px;
      line-height: 64px;
      color: #3f3f3f;
      margin-bottom: 2rem;
    }

    .kidsPricingCardsDiv ul {
      width: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 2rem;
    }

    .kidsPricingCardsDiv li {
      list-style-type: none;
    }

    .kidsPricingCardsDiv1 {
      min-width: 50%;
      justify-content: center;
    }

    .kidsPricingCardsDiv2 {
      align-items: center;
      justify-content: flex-end;
    }

    .kidFreePricingCard {
      width: 300px;
      border: 1px solid #828282;
      border-radius: 7px;
      justify-content: flex-start;
      padding: 4rem 0;
      margin: 0px 10px;
    }

    .kidFreePricingCard h2 {
      width: 60%;
      background-color: #ffb038;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #fff;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 44px;
    }

    .kidFreePricingCard p {
      width: 70%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #5a5757;
    }

    .kidFreePricingCard li {
      color: #5a5757;
      line-height: 40px;
    }

    .kidMonthlyPricingCard {
      width: 300px;
      background-color: #ffb038;
      border-radius: 7px;
      padding: 4rem 0;
      margin: 0px 10px;
    }

    .kidMonthlyPricingCard h2 {
      width: 60%;
      background-color: #f9f9f9;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #545353;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 44px;
    }

    .kidMonthlyPricingCard p {
      width: 80%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #565656;
    }

    .kidMonthlyPricingCard li {
      color: #565656;
      line-height: 40px;
    }

    .kidYearlyPricingCard {
      width: 300px;
      background-color: #379cd5;
      border-radius: 7px;
      padding: 4rem 0;
      margin: 0px 10px;
    }

    .kidYearlyPricingCard h2 {
      width: 60%;
      background-color: #ffaf38;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #545353;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 44px;
    }

    .kidYearlyPricingCard p {
      width: 80%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #fff;
    }

    .kidYearlyPricingCard li {
      color: #fff;
      line-height: 40px;
    }

    .kidsWhatDoWeDoDiv {
      width: 100%;
      background-color: #f6f6f6;
      padding: 10rem 2rem;
    }

    .kidsWhatDoWeDoDiv1 {
      width: 60%;
      justify-content: space-around;
    }

    .kidsWhatDoWeDoDiv1 p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 15px;
      line-height: 25px;
      color: #6b6b6b;
      width: 60%;
    }

    .kidsWhatDoWeDoDiv1 h1 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 700;
      font-size: 30px;
      line-height: 42px;
      color: #3f3f3f;
    }

    .kidsWhatDoWeDoDiv1 h1 > span {
      color: #ffaf38;
    }

    .kidsWhatDoWeDoGrades18span {
      color: #e26969;
    }

    .kidsSupportedByDiv {
      width: 100%;
      background-color: #fff;
      padding: 10rem 0;
      color: #565656;
    }

    .kidsHomeSubscribeDiv {
      width: 100%;
      height: 800px;
      margin: 5rem auto;
    }

    .kidsHomeSubscribeDiv1 {
      width: 100%;
      height: 797px;
      background: linear-gradient(
        251.4deg,
        #ffb038 15.16%,
        #d4dcc5 54.77%,
        #3aa9e8 98.62%
      );
      clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%);
      position: absolute;
    }

    .kidsHomeSubscribeCard {
      width: 80%;
      height: 700px;
      background-color: #ffffff;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 8px;
      position: absolute;
      z-index: 3;
      margin: 3rem auto;
    }

    .kidsHomeSubscribeCardHeader {
      width: 100%;
    }

    .kidsHomeSubscribeCardHeader1 {
      width: 60%;
      height: 100%;
    }

    .kidsHomeSubscribeCardHeader1 h1 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 700;
      font-size: 64px;
      line-height: 96px;
      color: #de535e;
    }

    .kidsHomeSubscribeCard p {
      font-family: "Poppins";
      font-style: normal;
      width: 80%;
      font-weight: 400;
      font-size: 16px;
      line-height: 64px;
      color: rgba(222, 83, 94, 0.8);
    }

    .kidsHomeSubscribeButton {
      background-color: rgba(58, 169, 232, 0.8);
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      width: 400px;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 20px;
      line-height: 64px;
      color: #ffffff;
      margin: 2rem auto;
      padding: 2rem 0;
    }

    .kidsHomeSubscribeKeywordsRow {
      width: 80%;
      height: 50px;
      background: rgba(255, 255, 255, 0.17);
      border: 1px solid #de535e;
      border-radius: 7px;
      margin: 5rem auto 15rem auto;
    }

    .kidsHomeSubscribeKeywordsRow div {
      width: 16.66666666666667%;
      height: 100%;
      border: 1px solid #de535e;
      padding: 1rem 0;
    }

    .kidsHomeSubscribeKeywordsRow2,
    .kidsHomeSubscribeKeywordsRow3,
    .kidsHomeSubscribeKeywordsRow4,
    .kidsHomeSubscribeKeywordsRow5,
    .kidsHomeSubscribeKeywordsRow6 {
      color: #de535e;
      font-size: 14px;
    }

    .kidsHomeSubscribeKeywordsRow1 {
      background-color: #de535e;
      border-radius: 7px 0px 0px 7px;
      color: #fff;
    }

    .kidsSpiralOrange {
      position: absolute;
      right: 5%;
      top: 20%;
    }

    .kidsSmilingCartoon {
      z-index: 5;
      width: 30%;
      position: relative;
      left: -35%;
      top: 40%;
      display: none;
    }

    .defaultHomeFooterDiv {
      width: 100%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }

    .defaultHomeFooterDiv1 {
      width: 100%;
      align-items: stretch;
    }

    .defaultHomeFooterDiv2a {
      width: 50%;
    }

    .defaultHomeFooterDiv2b {
      width: 50%;
    }

    .defaultHomeFooterDiv h5 {
      color: #5eb5e7;
    }

    .defaultHomeFooterDiv1a,
    .defaultHomeFooterDiv1b,
    .defaultHomeFooterDiv1c,
    .defaultHomeFooterDiv1d {
      width: 25%;
      padding: 5rem 0;
      flex-grow: 1;
    }

    .defaultHomeFooterDiv1aInputDiv {
      width: 90%;
      height: 40px;
      border-radius: 5px;
    }

    .defaultHomeFooterDiv1aInputDiv button {
      width: 20%;
      height: 100%;
      background-color: #ffb038;
      border-radius: 0 5px 5px 0;
      color: #fff;
      border: none;
      font-size: 0.6rem;
    }

    .defaultHomeFooterDiv1aInputDiv input {
      width: 80%;
      height: 100%;
      font-size: 0.8rem;
      border-radius: 5px 0 0 5px;
      border: none;
      text-align: center;
    }

    .defaultHomeFooterDiv1aSocialMediaDiv {
      width: 30%;
      justify-content: space-around;
      margin: 1rem auto;
    }

    .defaultHomeFooterDiv1a p {
      font-size: 1rem;
      color: #fff;
    }

    .defaultHomeFooterDiv1b h3,
    .defaultHomeFooterDiv1c h3,
    .defaultHomeFooterDiv1d h3 {
      color: #ffb038;
    }

    .defaultHomeFooterDiv1a div,
    .defaultHomeFooterDiv1b div,
    .defaultHomeFooterDiv1c div,
    .defaultHomeFooterDiv1d div {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 64px;
      color: rgba(255, 255, 255, 0.8);
    }

    .defaultHomeFooterDiv1a_i_text {
      color: #fffa83;
    }

    .defaultHomeFooterDiv1a_learn_text {
      color: #fff;
    }

    .defaultHomeFooterDiv1a_s_text {
      color: #ffb038;
    }

    .defaultHomeFooterDiv1a_t_text {
      color: #fffa83;
    }

    .defaultHomeFooterDiv1a_e_text {
      color: #c7282d;
    }

    .defaultHomeFooterDiv1a_m_text {
      color: #9c06c1;
    }

    .kidsMobileMenuToggle {
      display: none !important;
    }

    .kidsMobileOverlay {
      display: none !important;
    }

    /* Sidebar Styles */
    .kidsDashboardSidebar {
      width: 260px;
      background: linear-gradient(
        180deg,
        #9c06c1 0%,
        #7c3aed 50%,
        #2563eb 100%
      );
      color: white;
      display: flex;
      flex-direction: column;
      box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
      position: relative;
      z-index: 10;
      overflow: hidden;
    }

    .kidsDashboardSidebar::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 70%
      );
      animation: rotateBg 30s linear infinite;
    }

    @keyframes rotateBg {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .kidsSidebarHeader {
      padding: 30px 20px;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .kidsUserAvatar {
      font-size: 64px;
      display: block;
      margin-bottom: 16px;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
      animation: bounceAvatar 2s ease-in-out infinite;
    }

    @keyframes bounceAvatar {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }

    .kidsSidebarHeader h3 {
      margin: 0 0 12px;
      font-size: 20px;
      font-weight: 700;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .kidsUserLevel {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, 0.2);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 600;
      backdrop-filter: blur(10px);
    }

    .kidsLevelIcon {
      font-size: 16px;
    }
  } /** End of min-width: 1025px **/

  @media screen and (min-width: 2000px) {
    .kidspersonalizedCard {
      width: 350px;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      padding: 20px 0px;
    }

    .kidsadaptiveCard {
      width: 350px;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      padding: 20px 0px;
    }

    .kidsflexibleCard {
      width: 350px;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      padding: 20px 0px;
    }

    .kidsPricingCardsDiv {
      background: #ffffff;
      border: 1px solid #ededed;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 5rem 0 10rem 0;
    }

    .kidsPricingCardsDiv1 {
      min-width: 50%;
      justify-content: center;
    }

    .kidsPricingCardsDiv2 {
      align-items: center;
      justify-content: flex-end;
    }

    .kidFreePricingCard {
      width: 350px;
      border: 1px solid #828282;
      border-radius: 7px;
      justify-content: flex-start;
      padding: 4rem 0;
    }

    .kidMonthlyPricingCard {
      width: 350px;
      background-color: #ffb038;
      border-radius: 7px;
      padding: 4rem 0;
    }

    .kidYearlyPricingCard {
      width: 350px;
      background-color: #379cd5;
      border-radius: 7px;
      padding: 4rem 0;
    }
  }

  /* iMac 27-inch - Landscape */
  @media screen and (min-device-width: 5120px) and (max-device-width: 2880px) {
    /* CSS styles for iMac 27-inch landscape go here */
  }

  /*** Kids What We Offer Component - Landscape ***/
  .kwoMainContainer {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(180deg, #e8f4fd 0%, #fff9e6 50%, #ffe8f5 100%);
    position: relative;
    overflow: hidden;
    padding: 80px 40px;
  }

  /* Floating Elements */
  .kwoFloatingElements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .kwoStar {
    position: absolute;
    width: 30px;
    height: 30px;
    background: linear-gradient(45deg, #ffd700 0%, #ffa500 100%);
    clip-path: polygon(
      50% 0%,
      61% 35%,
      98% 35%,
      68% 57%,
      79% 91%,
      50% 70%,
      21% 91%,
      32% 57%,
      2% 35%,
      39% 35%
    );
    animation: kwoStarFloat 20s ease-in-out infinite;
  }

  .kwoStar1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .kwoStar2 {
    top: 20%;
    right: 10%;
    animation-delay: 7s;
    width: 20px;
    height: 20px;
  }

  .kwoStar3 {
    bottom: 30%;
    left: 15%;
    animation-delay: 14s;
    width: 25px;
    height: 25px;
  }

  @keyframes kwoStarFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-30px) rotate(180deg);
    }
  }

  .kwoCloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 100px;
    opacity: 0.7;
  }

  .kwoCloud::before,
  .kwoCloud::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 100px;
  }

  .kwoCloud1 {
    width: 100px;
    height: 40px;
    top: 15%;
    right: 20%;
    animation: kwoCloudMove 30s ease-in-out infinite;
  }

  .kwoCloud1::before {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 10px;
  }

  .kwoCloud1::after {
    width: 60px;
    height: 40px;
    top: -15px;
    right: 10px;
  }

  .kwoCloud2 {
    width: 80px;
    height: 35px;
    bottom: 20%;
    left: 10%;
    animation: kwoCloudMove 25s ease-in-out infinite reverse;
  }

  .kwoCloud2::before {
    width: 40px;
    height: 40px;
    top: -20px;
    left: 15px;
  }

  .kwoCloud2::after {
    width: 50px;
    height: 35px;
    top: -10px;
    right: 15px;
  }

  @keyframes kwoCloudMove {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(50px);
    }
  }

  .kwoRainbow {
    position: absolute;
    width: 300px;
    height: 150px;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(
      180deg,
      #ff0000 0%,
      #ff7f00 14%,
      #ffff00 28%,
      #00ff00 42%,
      #0000ff 57%,
      #4b0082 71%,
      #9400d3 85%,
      transparent 100%
    );
    border-radius: 150px 150px 0 0;
    opacity: 0.2;
    animation: kwoRainbowPulse 10s ease-in-out infinite;
  }

  @keyframes kwoRainbowPulse {
    0%,
    100% {
      opacity: 0.2;
      transform: translateX(-50%) scale(1);
    }
    50% {
      opacity: 0.3;
      transform: translateX(-50%) scale(1.1);
    }
  }

  /* Content Wrapper */
  .kwoContentWrapper {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Header Section */
  .kwoHeaderSection {
    text-align: center;
    margin-bottom: 80px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .kwoHeaderSection.kwoVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kwoMainTitle {
    font-size: 4rem;
    font-weight: 800;
    margin: 0 0 20px 0;
    position: relative;
    display: inline-block;
  }

  .kwoTitleWord {
    display: inline-block;
    margin: 0 15px;
    animation: kwoWordBounce 2s ease-in-out infinite;
  }

  .kwoTitleWord1 {
    color: #ff6b6b;
    animation-delay: 0s;
  }

  .kwoTitleWord2 {
    color: #4ecdc4;
    animation-delay: 0.2s;
  }

  .kwoTitleWord3 {
    color: #ffd93d;
    animation-delay: 0.4s;
  }

  @keyframes kwoWordBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .kwoSparkle {
    position: absolute;
    top: -10px;
    right: -40px;
    font-size: 2rem;
    animation: kwoSparkleRotate 3s linear infinite;
  }

  @keyframes kwoSparkleRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .kwoSubtitle {
    font-size: 1.5rem;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
  }

  /* Cards Grid */
  .kwoCardsGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-bottom: 100px;
  }

  /* Card Styles */
  .kwoCard {
    background: white;
    border-radius: 30px;
    padding: 40px 30px;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(50px) scale(0.9);
    overflow: hidden;
  }

  .kwoCard.kwoCardVisible {
    animation: kwoCardAppear 0.6s ease-out forwards;
  }

  @keyframes kwoCardAppear {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kwoCard:hover {
    transform: translateY(-10px) scale(1.05);
  }

  /* Card Gradients */
  .kwoMathGradient {
    background: linear-gradient(135deg, #ffe5e5 0%, #ffd4e5 100%);
  }

  .kwoEnglishGradient {
    background: linear-gradient(135deg, #e5f3ff 0%, #e5e5ff 100%);
  }

  .kwoScienceGradient {
    background: linear-gradient(135deg, #e5ffe5 0%, #e5fff5 100%);
  }

  .kwoGamesGradient {
    background: linear-gradient(135deg, #fff5e5 0%, #ffe5f5 100%);
  }

  /* Card Glow Effect */
  .kwoCardGlow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .kwoCard:hover .kwoCardGlow {
    opacity: 0.3;
  }

  .kwoMathShadow {
    background: radial-gradient(circle, #ff6b6b 0%, transparent 70%);
  }

  .kwoEnglishShadow {
    background: radial-gradient(circle, #4ecdc4 0%, transparent 70%);
  }

  .kwoScienceShadow {
    background: radial-gradient(circle, #6bcf7f 0%, transparent 70%);
  }

  .kwoGamesShadow {
    background: radial-gradient(circle, #ffd93d 0%, transparent 70%);
  }

  /* Icon Wrapper */
  .kwoIconWrapper {
    width: 120px;
    height: 120px;
    margin: 0 auto 30px;
    position: relative;
  }

  .kwoIcon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
  }

  .kwoHelloIcon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: #4ecdc4;
    background: rgba(78, 205, 196, 0.1);
    border-radius: 50%;
    position: relative;
    z-index: 2;
  }

  .kwoIconBg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    z-index: 1;
  }

  /* Icon Animations */
  .kwoBounce {
    animation: kwoBounceAnim 2s ease-in-out infinite;
  }

  @keyframes kwoBounceAnim {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }

  .kwoWiggle {
    animation: kwoWiggleAnim 2s ease-in-out infinite;
  }

  @keyframes kwoWiggleAnim {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-10deg);
    }
    75% {
      transform: rotate(10deg);
    }
  }

  .kwoFloat {
    animation: kwoFloatAnim 3s ease-in-out infinite;
  }

  @keyframes kwoFloatAnim {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-10px) scale(1.05);
    }
  }

  .kwoSpin {
    animation: kwoSpinAnim 8s linear infinite;
  }

  @keyframes kwoSpinAnim {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* Card Content */
  .kwoCardTitle {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 10px 0;
    text-align: center;
  }

  .kwoCardSubtitle {
    font-size: 1.125rem;
    color: #6b7280;
    margin: 0 0 25px 0;
    text-align: center;
  }

  /* Features */
  .kwoFeatures {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 30px;
  }

  .kwoFeatureItem {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .kwoFeatureStar {
    font-size: 1rem;
  }

  .kwoFeatureText {
    font-size: 0.95rem;
    color: #4b5563;
  }

  /* Explore Button */
  .kwoExploreBtn {
    width: 100%;
    padding: 15px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
  }

  .kwoExploreBtn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%
    );
    transition: left 0.5s ease;
  }

  .kwoExploreBtn:hover::before {
    left: 100%;
  }

  .kwoExploreBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
  }

  .kwoExploreBtnIcon {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
  }

  .kwoExploreBtn:hover .kwoExploreBtnIcon {
    transform: translateX(5px);
  }

  /* Card Decorations */
  .kwoCardDecoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .kwoBubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: kwoBubbleFloat 10s ease-in-out infinite;
  }

  .kwoBubble1 {
    width: 60px;
    height: 60px;
    top: -30px;
    right: -30px;
    animation-delay: 0s;
  }

  .kwoBubble2 {
    width: 40px;
    height: 40px;
    bottom: -20px;
    left: -20px;
    animation-delay: 3s;
  }

  .kwoBubble3 {
    width: 30px;
    height: 30px;
    top: 50%;
    right: -15px;
    animation-delay: 6s;
  }

  @keyframes kwoBubbleFloat {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(-20px, -20px) scale(1.1);
    }
    66% {
      transform: translate(20px, -10px) scale(0.9);
    }
  }

  /* CTA Section */
  .kwoCTASection {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 40px;
    padding: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
  }

  .kwoCTASection.kwoCTAVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kwoCTAContent {
    flex: 1;
    color: white;
  }

  .kwoCTATitle {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 15px 0;
  }

  .kwoCTAText {
    font-size: 1.25rem;
    margin: 0 0 30px 0;
    opacity: 0.9;
  }

  .kwoCTAButton {
    padding: 18px 40px;
    background: white;
    color: #667eea;
    border: none;
    border-radius: 25px;
    font-size: 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }

  .kwoCTAButton:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  .kwoCTAButtonStars {
    font-size: 1.5rem;
    animation: kwoStarsRotate 2s linear infinite;
  }

  @keyframes kwoStarsRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .kwoCTACharacter {
    width: 200px;
    height: 200px;
    position: relative;
  }

  .kwoCharacter {
    width: 100%;
    height: 100%;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 70%
    );
    border-radius: 50%;
    position: relative;
    animation: kwoCharacterBounce 2s ease-in-out infinite;
  }

  .kwoCharacter::before {
    content: "😊";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4rem;
  }

  @keyframes kwoCharacterBounce {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-20px) scale(1.1);
    }
  }
  /* End of Kids What We Offer Component - Landscape ***/

  /*** Kids Practice And Games Cards Component - Landscape ***/
  .kpgMainContainer {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(135deg, #ffeaa7 0%, #dfe6e9 50%, #fdcb6e 100%);
    position: relative;
    overflow: hidden;
    padding: 80px 40px;
  }

  /* Background Decorations */
  .kpgBackgroundDecor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .kpgSparkle {
    position: absolute;
    font-size: 1.5rem;
    animation: kpgSparkleFloat 4s ease-in-out infinite;
    opacity: 0.6;
  }

  @keyframes kpgSparkleFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
      opacity: 0.6;
    }
    50% {
      transform: translateY(-30px) rotate(180deg);
      opacity: 1;
    }
  }

  .kpgFloatingBalloon {
    position: absolute;
    font-size: 3rem;
    animation: kpgBalloonFloat 15s ease-in-out infinite;
  }

  .kpgBalloon1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
    color: #ff6b6b;
  }

  .kpgBalloon2 {
    top: 60%;
    right: 5%;
    animation-delay: 5s;
    color: #4ecdc4;
  }

  .kpgBalloon3 {
    bottom: 10%;
    left: 50%;
    animation-delay: 10s;
    color: #ffd93d;
  }

  @keyframes kpgBalloonFloat {
    0%,
    100% {
      transform: translateY(0) translateX(0) rotate(-5deg);
    }
    25% {
      transform: translateY(-20px) translateX(10px) rotate(5deg);
    }
    50% {
      transform: translateY(-10px) translateX(-10px) rotate(-3deg);
    }
    75% {
      transform: translateY(-30px) translateX(5px) rotate(3deg);
    }
  }

  /* Content Wrapper */
  .kpgContentWrapper {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Header Section */
  .kpgHeaderSection {
    text-align: center;
    margin-bottom: 80px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .kpgHeaderSection.kpgVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kpgMainTitle {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }

  .kpgTitleIcon {
    font-size: 2.5rem;
    animation: kpgIconRotate 4s linear infinite;
  }

  @keyframes kpgIconRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .kpgTitleText {
    display: flex;
    gap: 15px;
  }

  .kpgTitleWord1 {
    color: #6c5ce7;
    animation: kpgWordJump 2s ease-in-out infinite;
  }

  .kpgTitleWord2 {
    color: #00b894;
    animation: kpgWordJump 2s ease-in-out infinite;
    animation-delay: 0.2s;
  }

  .kpgTitleWord3 {
    color: #fd79a8;
    animation: kpgWordJump 2s ease-in-out infinite;
    animation-delay: 0.4s;
  }

  @keyframes kpgWordJump {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }

  .kpgSubheading {
    font-size: 1.5rem;
    color: #2d3436;
    font-weight: 500;
    margin: 0;
  }

  /* Cards Container */
  .kpgCardsContainer {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 100px;
  }

  /* Card Styles */
  .kpgCard {
    background: white;
    border-radius: 40px;
    padding: 50px;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .kpgCard.kpgCardVisible {
    animation: kpgCardSlideIn 0.8s ease-out forwards;
  }

  @keyframes kpgCardSlideIn {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kpgCard:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }

  .kpgCard.kpgCardActive {
    transform: translateY(-10px) scale(1.02);
  }

  /* Card Patterns */
  .kpgPracticePattern {
    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
  }

  .kpgGamesPattern {
    background: linear-gradient(135deg, #e5f9f6 0%, #d4efdf 100%);
  }

  /* Floating Icons */
  .kpgFloatingIcons {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .kpgFloatingIcon {
    position: absolute;
    font-size: 2rem;
    opacity: 0.3;
    animation: kpgIconFloat 10s ease-in-out infinite;
  }

  .kpgFloatingIcon1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }

  .kpgFloatingIcon2 {
    top: 10%;
    right: 10%;
    animation-delay: 2.5s;
  }

  .kpgFloatingIcon3 {
    bottom: 10%;
    left: 10%;
    animation-delay: 5s;
  }

  .kpgFloatingIcon4 {
    bottom: 10%;
    right: 10%;
    animation-delay: 7.5s;
  }

  @keyframes kpgIconFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(20px, -20px) rotate(90deg);
    }
    50% {
      transform: translate(-20px, -40px) rotate(180deg);
    }
    75% {
      transform: translate(-40px, -20px) rotate(270deg);
    }
  }

  /* Card Content */
  .kpgCardContent {
    position: relative;
    z-index: 2;
  }

  .kpgCardHeader {
    text-align: center;
    margin-bottom: 30px;
  }

  .kpgEmojiContainer {
    width: 100px;
    height: 100px;
    margin: 0 auto 20px;
    position: relative;
  }

  .kpgMainEmoji {
    font-size: 4rem;
    display: block;
    animation: kpgEmojiPulse 2s ease-in-out infinite;
  }

  @keyframes kpgEmojiPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .kpgEmojiGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(
      circle,
      var(--primary-color) 0%,
      transparent 70%
    );
    opacity: 0.3;
    border-radius: 50%;
    animation: kpgGlowPulse 2s ease-in-out infinite;
  }

  @keyframes kpgGlowPulse {
    0%,
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.3;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.3);
      opacity: 0.1;
    }
  }

  .kpgCardTitle {
    font-size: 2.5rem;
    font-weight: 800;
    color: #2d3436;
    margin: 0 0 10px 0;
  }

  .kpgCardSubtitle {
    font-size: 1.25rem;
    color: var(--primary-color);
    font-weight: 600;
    margin: 0;
  }

  .kpgCardDescription {
    font-size: 1.125rem;
    color: #636e72;
    line-height: 1.6;
    margin: 0 0 30px 0;
    text-align: center;
  }

  /* Features List */
  .kpgFeaturesList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 40px;
  }

  .kpgFeatureItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-20px);
  }

  .kpgCard.kpgCardVisible .kpgFeatureItem {
    animation: kpgFeatureSlide 0.5s ease-out forwards;
  }

  @keyframes kpgFeatureSlide {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .kpgFeatureItem:hover {
    background: white;
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .kpgFeatureIcon {
    font-size: 1.5rem;
  }

  .kpgFeatureText {
    font-size: 1rem;
    color: #2d3436;
    font-weight: 500;
  }

  /* Action Button */
  .kpgActionButton {
    width: 100%;
    padding: 20px 40px;
    background: linear-gradient(
      135deg,
      var(--primary-color) 0%,
      var(--secondary-color) 100%
    );
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
    overflow: hidden;
  }

  .kpgButtonShine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    transition: left 0.6s ease;
  }

  .kpgActionButton:hover .kpgButtonShine {
    left: 100%;
  }

  .kpgActionButton:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  .kpgButtonArrow {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
  }

  .kpgActionButton:hover .kpgButtonArrow {
    transform: translateX(5px);
  }

  /* Card Decorations */
  .kpgCardDecoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .kpgCornerDecor {
    position: absolute;
    width: 60px;
    height: 60px;
    opacity: 0.1;
  }

  .kpgCornerTL {
    top: 20px;
    left: 20px;
    background: radial-gradient(
      circle at top left,
      var(--primary-color) 0%,
      transparent 70%
    );
  }

  .kpgCornerTR {
    top: 20px;
    right: 20px;
    background: radial-gradient(
      circle at top right,
      var(--secondary-color) 0%,
      transparent 70%
    );
  }

  .kpgCornerBL {
    bottom: 20px;
    left: 20px;
    background: radial-gradient(
      circle at bottom left,
      var(--secondary-color) 0%,
      transparent 70%
    );
  }

  .kpgCornerBR {
    bottom: 20px;
    right: 20px;
    background: radial-gradient(
      circle at bottom right,
      var(--primary-color) 0%,
      transparent 70%
    );
  }

  /* Bottom CTA Section */
  .kpgBottomCTA {
    background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
    border-radius: 40px;
    padding: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
    box-shadow: 0 15px 40px rgba(108, 92, 231, 0.3);
  }

  .kpgBottomCTA.kpgCTAVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kpgCTAContent {
    flex: 1;
    color: white;
  }

  .kpgCTATitle {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 15px 0;
  }

  .kpgCTAText {
    font-size: 1.25rem;
    margin: 0 0 30px 0;
    opacity: 0.9;
  }

  .kpgCTAButtons {
    display: flex;
    gap: 20px;
  }

  .kpgCTAButton {
    padding: 18px 35px;
    border-radius: 25px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
  }

  .kpgCTAPrimary {
    background: white;
    color: #6c5ce7;
  }

  .kpgCTAPrimary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }

  .kpgCTASecondary {
    background: transparent;
    color: white;
    border: 2px solid white;
  }

  .kpgCTASecondary:hover {
    background: white;
    color: #6c5ce7;
    transform: translateY(-2px);
  }

  .kpgCTAIcon {
    font-size: 1.25rem;
  }

  /* CTA Characters */
  .kpgCTACharacters {
    display: flex;
    gap: 30px;
    margin-right: 40px;
  }

  .kpgCharacter {
    font-size: 4rem;
    animation: kpgCharacterBounce 2s ease-in-out infinite;
  }

  .kpgChar1 {
    animation-delay: 0s;
  }

  .kpgChar2 {
    animation-delay: 0.3s;
  }

  .kpgChar3 {
    animation-delay: 0.6s;
  }

  @keyframes kpgCharacterBounce {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-20px) rotate(10deg);
    }
  }
  /* End of Kids Practice And Games Cards Component - Landscape ***/

  /*** Kids Personalized Adaptive Flexible Component - Landscape ***/
  .kpafMainContainer {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(135deg, #fff0f5 0%, #e6e6fa 50%, #f0f8ff 100%);
    position: relative;
    overflow: hidden;
    padding: 80px 40px;
  }

  /* Background Decorations */
  .kpafBackgroundDecor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .kpafParticle {
    position: absolute;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.8) 0%,
      transparent 70%
    );
    border-radius: 50%;
    animation: kpafParticleFloat 15s ease-in-out infinite;
  }

  @keyframes kpafParticleFloat {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
      opacity: 0.6;
    }
    25% {
      transform: translate(50px, -100px) scale(1.2);
      opacity: 0.8;
    }
    50% {
      transform: translate(-50px, -150px) scale(0.8);
      opacity: 0.4;
    }
    75% {
      transform: translate(100px, -50px) scale(1.1);
      opacity: 0.7;
    }
  }

  .kpafMagicWand {
    position: absolute;
    top: 10%;
    right: 5%;
    font-size: 3rem;
    animation: kpafWandWave 4s ease-in-out infinite;
  }

  @keyframes kpafWandWave {
    0%,
    100% {
      transform: rotate(0deg) translateX(0);
    }
    25% {
      transform: rotate(-20deg) translateX(-10px);
    }
    75% {
      transform: rotate(20deg) translateX(10px);
    }
  }

  .kpafStarCluster {
    position: absolute;
    font-size: 2rem;
    animation: kpafStarTwinkle 3s ease-in-out infinite;
  }

  .kpafCluster1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
  }

  .kpafCluster2 {
    bottom: 20%;
    right: 15%;
    animation-delay: 1s;
  }

  .kpafCluster3 {
    top: 50%;
    left: 50%;
    animation-delay: 2s;
  }

  @keyframes kpafStarTwinkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.3) rotate(180deg);
      opacity: 1;
    }
  }

  /* Content Wrapper */
  .kpafContentWrapper {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Header Section */
  .kpafHeaderSection {
    text-align: center;
    margin-bottom: 80px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .kpafHeaderSection.kpafVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kpafMainTitle {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }

  .kpafTitleIcon {
    font-size: 3rem;
    animation: kpafIconSpin 8s linear infinite;
  }

  @keyframes kpafIconSpin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .kpafTitleText {
    display: flex;
    gap: 15px;
  }

  .kpafWord1 {
    color: #ff6b9d;
    animation: kpafWordBounce 2s ease-in-out infinite;
  }

  .kpafWord2 {
    color: #4ecdc4;
    animation: kpafWordBounce 2s ease-in-out infinite;
    animation-delay: 0.2s;
  }

  .kpafWord3 {
    color: #a29bfe;
    animation: kpafWordBounce 2s ease-in-out infinite;
    animation-delay: 0.4s;
  }

  .kpafWord4 {
    color: #fd79a8;
    animation: kpafWordBounce 2s ease-in-out infinite;
    animation-delay: 0.6s;
  }

  @keyframes kpafWordBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }

  .kpafSubtitle {
    font-size: 1.5rem;
    color: #5f3dc4;
    font-weight: 500;
    margin: 0;
  }

  /* Cards Container */
  .kpafCardsContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 100px;
  }

  /* Card Styles */
  .kpafCard {
    border-radius: 40px;
    padding: 50px 40px;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .kpafCard.kpafCardVisible {
    animation: kpafCardAppear 0.8s ease-out forwards;
  }

  @keyframes kpafCardAppear {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kpafCard:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }

  .kpafCard.kpafCardActive {
    transform: translateY(-10px) scale(1.03);
  }

  /* Floating Icons */
  .kpafFloatingIcons {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .kpafFloatingIcon {
    position: absolute;
    font-size: 2rem;
    opacity: 0.3;
    animation: kpafIconFloat 12s ease-in-out infinite;
  }

  .kpafIcon1 {
    top: 10%;
    left: 10%;
  }

  .kpafIcon2 {
    top: 10%;
    right: 10%;
  }

  .kpafIcon3 {
    bottom: 10%;
    left: 10%;
  }

  .kpafIcon4 {
    bottom: 10%;
    right: 10%;
  }

  @keyframes kpafIconFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(20px, -20px) rotate(90deg);
    }
    50% {
      transform: translate(-20px, -40px) rotate(180deg);
    }
    75% {
      transform: translate(30px, -10px) rotate(270deg);
    }
  }

  /* Card Header */
  .kpafCardHeader {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    position: relative;
  }

  .kpafNumberBadge {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }

  .kpafEmojiBox {
    position: relative;
    width: 80px;
    height: 80px;
  }

  .kpafMainEmoji {
    font-size: 4rem;
    display: block;
    animation: kpafEmojiDance 2s ease-in-out infinite;
  }

  @keyframes kpafEmojiDance {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
    }
    25% {
      transform: scale(1.1) rotate(-5deg);
    }
    75% {
      transform: scale(1.1) rotate(5deg);
    }
  }

  .kpafEmojiGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    animation: kpafGlowPulse 2s ease-in-out infinite;
  }

  @keyframes kpafGlowPulse {
    0%,
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.5;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.5);
      opacity: 0.2;
    }
  }

  .kpafCharacter {
    font-size: 3rem;
    position: absolute;
    right: 40px;
    top: 20px;
    animation: kpafCharacterFloat 3s ease-in-out infinite;
  }

  @keyframes kpafCharacterFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-10px) rotate(10deg);
    }
  }

  /* Card Content */
  .kpafCardContent {
    position: relative;
    z-index: 2;
  }

  .kpafCardTitle {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    line-height: 1.2;
  }

  .kpafCardSubtitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 20px 0;
  }

  .kpafCardDescription {
    font-size: 1.125rem;
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 30px 0;
  }

  /* Highlights */
  .kpafHighlights {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 40px;
  }

  .kpafHighlightItem {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-20px);
  }

  .kpafCard.kpafCardVisible .kpafHighlightItem {
    animation: kpafHighlightSlide 0.5s ease-out forwards;
  }

  @keyframes kpafHighlightSlide {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .kpafHighlightItem:hover {
    background: white;
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .kpafHighlightIcon {
    font-size: 1.5rem;
  }

  .kpafHighlightText {
    font-size: 1rem;
    color: #374151;
    font-weight: 500;
  }

  /* Action Button */
  .kpafActionBtn {
    width: 100%;
    padding: 18px 35px;
    border: none;
    border-radius: 25px;
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
  }

  .kpafBtnShine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    transition: left 0.6s ease;
  }

  .kpafActionBtn:hover .kpafBtnShine {
    left: 100%;
  }

  .kpafActionBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  .kpafBtnArrow {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
  }

  .kpafActionBtn:hover .kpafBtnArrow {
    transform: translateX(5px);
  }

  /* Card Decorations */
  .kpafCardDecor {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .kpafCornerStar {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.5;
    animation: kpafStarRotate 4s linear infinite;
  }

  @keyframes kpafStarRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .kpafStarTL {
    top: 20px;
    left: 20px;
  }

  .kpafStarTR {
    top: 20px;
    right: 20px;
    animation-delay: 1s;
  }

  .kpafStarBL {
    bottom: 20px;
    left: 20px;
    animation-delay: 2s;
  }

  .kpafStarBR {
    bottom: 20px;
    right: 20px;
    animation-delay: 3s;
  }

  /* Bottom Section */
  .kpafBottomSection {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 40px;
    padding: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.3);
  }

  .kpafBottomSection.kpafBottomVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kpafCTABox {
    flex: 1;
    color: white;
  }

  .kpafCTATitle {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 15px 0;
  }

  .kpafCTAText {
    font-size: 1.25rem;
    margin: 0 0 30px 0;
    opacity: 0.9;
  }

  .kpafCTAButtons {
    display: flex;
    gap: 20px;
  }

  .kpafCTABtn {
    padding: 18px 35px;
    border-radius: 25px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    border: none;
  }

  .kpafPrimaryBtn {
    background: white;
    color: #667eea;
  }

  .kpafPrimaryBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }

  .kpafSecondaryBtn {
    background: transparent;
    color: white;
    border: 2px solid white;
  }

  .kpafSecondaryBtn:hover {
    background: white;
    color: #667eea;
    transform: translateY(-2px);
  }

  .kpafCTAEmoji {
    font-size: 1.25rem;
  }

  /* Character Group */
  .kpafCharacterGroup {
    display: flex;
    gap: 30px;
    margin-right: 40px;
  }

  .kpafGroupChar {
    font-size: 4rem;
    animation: kpafCharBounce 2s ease-in-out infinite;
  }

  .kpafChar1 {
    animation-delay: 0s;
  }

  .kpafChar2 {
    animation-delay: 0.3s;
  }

  .kpafChar3 {
    animation-delay: 0.6s;
  }

  @keyframes kpafCharBounce {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-20px) scale(1.1);
    }
  }
  /* End of Kids Personalized Adaptive Flexible Component - Landscape ***/

  /* Kids Pricing Cards Component - Landscape */
  .kpcMainContainer {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
      135deg,
      #fff0f5 0%,
      #f0f8ff 25%,
      #fffaf0 50%,
      #f0fff0 75%,
      #fff0f5 100%
    );
    background-size: 400% 400%;
    animation: kpcGradientFlow 25s ease-in-out infinite;
    padding: 60px 40px;
  }

  @keyframes kpcGradientFlow {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  /* Background decorations */
  .kpcBackgroundDecor {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
  }

  .kpcConfetti {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    /* animation: kpcConfettiFall 10s linear infinite; */
    display: none; /* Hiding falling decorations */
  }

  @keyframes kpcConfettiFall {
    0% {
      transform: translateY(-100vh) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: translateY(100vh) rotate(720deg);
      opacity: 0;
    }
  }

  .kpcRainbow {
    position: absolute;
    top: -50px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: conic-gradient(
      from 0deg,
      #ff6b6b,
      #ffa502,
      #ffd93d,
      #4ecdc4,
      #a29bfe,
      #ff6b6b
    );
    border-radius: 50%;
    opacity: 0.1;
    animation: kpcRainbowSpin 30s linear infinite;
  }

  @keyframes kpcRainbowSpin {
    to {
      transform: rotate(360deg);
    }
  }

  .kpcCloudLeft,
  .kpcCloudRight {
    position: absolute;
    width: 150px;
    height: 60px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 100px;
    opacity: 0.8;
  }

  .kpcCloudLeft::before,
  .kpcCloudRight::before {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 100px;
  }

  .kpcCloudLeft {
    top: 20%;
    left: -50px;
    animation: kpcCloudFloat 20s ease-in-out infinite;
  }

  .kpcCloudLeft::before {
    width: 50px;
    height: 50px;
    top: -25px;
    left: 20px;
  }

  .kpcCloudRight {
    bottom: 30%;
    right: -50px;
    animation: kpcCloudFloat 25s ease-in-out infinite reverse;
  }

  .kpcCloudRight::before {
    width: 70px;
    height: 70px;
    top: -35px;
    right: 30px;
  }

  @keyframes kpcCloudFloat {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(100px);
    }
  }

  /* Content wrapper */
  .kpcContentWrapper {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Header section */
  .kpcHeaderSection {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .kpcHeaderSection.kpcVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kpcMainTitle {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
  }

  .kpcTitleIcon {
    font-size: 3rem;
    animation: kpcIconBounce 2s ease-in-out infinite;
  }

  @keyframes kpcIconBounce {
    0%,
    100% {
      transform: translateY(0) rotate(-5deg);
    }
    50% {
      transform: translateY(-10px) rotate(5deg);
    }
  }

  .kpcTitleText {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .kpcWord1 {
    color: #ff6b6b;
    animation: kpcWordWave 2s ease-in-out infinite;
  }
  .kpcWord2 {
    color: #4ecdc4;
    animation: kpcWordWave 2s ease-in-out 0.2s infinite;
  }
  .kpcWord3 {
    color: #ffd93d;
    animation: kpcWordWave 2s ease-in-out 0.4s infinite;
  }
  .kpcWord4 {
    color: #a29bfe;
    animation: kpcWordWave 2s ease-in-out 0.6s infinite;
  }

  @keyframes kpcWordWave {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .kpcSubtitle {
    font-size: 1.5rem;
    color: #666;
    margin: 0;
  }

  /* Cards grid */
  .kpcCardsGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
  }

  /* Individual cards */
  .kpcCard {
    border-radius: 24px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: all 0.6s ease-out;
    cursor: pointer;
  }

  .kpcCard.kpcCardVisible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .kpcCard:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  }

  .kpcCard.kpcCardSelected {
    border: 3px solid #ffd93d;
    transform: scale(1.05);
  }

  .kpcCard.kpcPopular {
    position: relative;
    transform: scale(1.05);
    z-index: 2;
  }

  /* Popular badge */
  .kpcPopularBadge {
    position: absolute;
    top: -15px;
    right: 20px;
    background: linear-gradient(135deg, #ffd93d 0%, #ffa502 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(255, 165, 0, 0.3);
    animation: kpcPopularPulse 2s ease-in-out infinite;
  }

  @keyframes kpcPopularPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  .kpcPopularText {
    font-size: 0.875rem;
  }

  .kpcPopularStars {
    font-size: 0.75rem;
    margin-top: 2px;
  }

  /* Card header */
  .kpcCardHeader {
    text-align: center;
    margin-bottom: 2rem;
  }

  .kpcCharacterBox {
    position: relative;
    display: inline-block;
    margin-bottom: 1rem;
  }

  .kpcCharacter {
    font-size: 4rem;
    display: block;
    animation: kpcCharacterFloat 3s ease-in-out infinite;
  }

  @keyframes kpcCharacterFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .kpcCharacterGlow {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: kpcGlowPulse 2s ease-in-out infinite;
  }

  @keyframes kpcGlowPulse {
    0%,
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.3;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.3);
      opacity: 0.1;
    }
  }

  .kpcPlanTitle {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.5rem 0;
  }

  .kpcPlanEmoji {
    font-size: 2rem;
    animation: kpcEmojiSpin 3s ease-in-out infinite;
  }

  @keyframes kpcEmojiSpin {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(10deg);
    }
    75% {
      transform: rotate(-10deg);
    }
  }

  /* Pricing box */
  .kpcPricingBox {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
  }

  .kpcPriceWrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
  }

  .kpcPrice {
    font-size: 3rem;
    font-weight: 800;
    color: #333;
  }

  .kpcPeriod {
    font-size: 1.125rem;
    color: #666;
  }

  .kpcSavingsBadge {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    color: white;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.875rem;
    font-weight: 700;
    animation: kpcSavingsBounce 2s ease-in-out infinite;
  }

  @keyframes kpcSavingsBounce {
    0%,
    100% {
      transform: translateX(-50%) translateY(0);
    }
    50% {
      transform: translateX(-50%) translateY(-5px);
    }
  }

  .kpcSavingsGlow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 70%
    );
    border-radius: 15px;
    animation: kpcSavingsGlow 2s ease-in-out infinite;
  }

  @keyframes kpcSavingsGlow {
    0%,
    100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }

  /* Features */
  .kpcFeatures {
    margin-bottom: 2rem;
  }

  .kpcFeatureItem {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    opacity: 0;
    transform: translateX(-20px);
    animation: kpcFeatureSlide 0.5s ease-out forwards;
  }

  @keyframes kpcFeatureSlide {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .kpcFeatureIcon {
    font-size: 1.5rem;
  }

  .kpcFeatureText {
    font-size: 1rem;
    color: #333;
  }

  /* Limitations */
  .kpcLimitations {
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(255, 165, 0, 0.1);
    border-radius: 12px;
  }

  .kpcLimitationItem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }

  .kpcLimitationIcon {
    font-size: 1rem;
  }

  .kpcLimitationText {
    font-size: 0.875rem;
    color: #666;
  }

  /* Action button */
  .kpcActionButton {
    width: 100%;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .kpcActionButton:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  }

  .kpcButtonText {
    position: relative;
    z-index: 1;
  }

  .kpcButtonArrow {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
  }

  .kpcActionButton:hover .kpcButtonArrow {
    transform: translateX(5px);
  }

  .kpcButtonShine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    transform: rotate(45deg);
    transition: left 0.5s ease;
  }

  .kpcActionButton:hover .kpcButtonShine {
    left: 100%;
  }

  /* Hover decorations */
  .kpcHoverDecor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .kpcSparkle {
    position: absolute;
    font-size: 1.5rem;
    animation: kpcSparkleFloat 2s ease-in-out infinite;
  }

  .kpcSparkle1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }
  .kpcSparkle2 {
    top: 20%;
    right: 10%;
    animation-delay: 0.5s;
  }
  .kpcSparkle3 {
    bottom: 20%;
    left: 15%;
    animation-delay: 1s;
  }
  .kpcSparkle4 {
    bottom: 10%;
    right: 15%;
    animation-delay: 1.5s;
  }

  @keyframes kpcSparkleFloat {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
      opacity: 0;
    }
    50% {
      transform: translate(20px, -20px) scale(1.2);
      opacity: 1;
    }
  }

  /* Bottom section */
  .kpcBottomSection {
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.5s;
  }

  .kpcBottomSection.kpcBottomVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kpcGuaranteeBox {
    background: linear-gradient(135deg, #e5f5ff 0%, #ffe5f1 100%);
    border-radius: 24px;
    padding: 3rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  }

  .kpcGuaranteeIcon {
    font-size: 4rem;
    animation: kpcShieldPulse 2s ease-in-out infinite;
  }

  @keyframes kpcShieldPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .kpcGuaranteeContent {
    text-align: left;
    flex: 1;
  }

  .kpcGuaranteeTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
  }

  .kpcGuaranteeText {
    font-size: 1.125rem;
    color: #666;
    margin: 0;
  }

  .kpcTestimonialBox {
    background: white;
    border-radius: 24px;
    padding: 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  .kpcTestimonialQuote {
    position: absolute;
    top: 20px;
    left: 30px;
    font-size: 4rem;
    color: #ffd93d;
    opacity: 0.3;
  }

  .kpcTestimonialText {
    font-size: 1.5rem;
    color: #333;
    font-style: italic;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
  }

  .kpcTestimonialAuthor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .kpcAuthorName {
    font-size: 1.125rem;
    color: #666;
    font-weight: 600;
  }

  .kpcRatingStars {
    font-size: 1.25rem;
  }

  /* Character parade */
  .kpcCharacterParade {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
  }

  .kpcParadeChar {
    font-size: 4rem;
    animation: kpcCharDance 3s ease-in-out infinite;
  }

  .kpcChar1 {
    animation-delay: 0s;
  }
  .kpcChar2 {
    animation-delay: 0.3s;
  }
  .kpcChar3 {
    animation-delay: 0.6s;
  }
  .kpcChar4 {
    animation-delay: 0.9s;
  }
  .kpcChar5 {
    animation-delay: 1.2s;
  }

  @keyframes kpcCharDance {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    25% {
      transform: translateY(-15px) rotate(-10deg);
    }
    75% {
      transform: translateY(-15px) rotate(10deg);
    }
  }
  /* End of Kids Pricing Cards Component - Landscape ***/

  /* Kids What Do We Do Component - Landscape */
  .kwdMainContainer {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
      135deg,
      #ffe5cc 0%,
      #e5f5ff 25%,
      #ffe5f1 50%,
      #e5ffe5 75%,
      #ffe5cc 100%
    );
    background-size: 400% 400%;
    animation: kwdGradientShift 30s ease-in-out infinite;
    padding: 60px 40px;
  }

  @keyframes kwdGradientShift {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  /* Background animations */
  .kwdBackgroundAnimation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
  }

  .kwdBubble {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.4) 100%
    );
    animation: kwdBubbleFloat 20s ease-in-out infinite;
  }

  @keyframes kwdBubbleFloat {
    0%,
    100% {
      transform: translateY(100vh) scale(0);
      opacity: 0;
    }
    10% {
      transform: translateY(90vh) scale(1);
      opacity: 0.8;
    }
    90% {
      transform: translateY(-10vh) scale(1);
      opacity: 0.8;
    }
  }

  .kwdRocket {
    position: absolute;
    font-size: 3rem;
    top: 70%;
    right: 10%;
    animation: kwdRocketFly 15s ease-in-out infinite;
  }

  @keyframes kwdRocketFly {
    0%,
    100% {
      transform: translate(0, 0) rotate(-45deg);
    }
    50% {
      transform: translate(-200px, -300px) rotate(-45deg);
    }
  }

  .kwdStar {
    position: absolute;
    animation: kwdStarTwinkle 3s ease-in-out infinite;
  }

  .kwdStar1 {
    font-size: 2rem;
    top: 15%;
    left: 20%;
    animation-delay: 0s;
  }

  .kwdStar2 {
    font-size: 2.5rem;
    top: 25%;
    right: 25%;
    animation-delay: 1s;
  }

  .kwdStar3 {
    font-size: 1.5rem;
    bottom: 30%;
    left: 30%;
    animation-delay: 2s;
  }

  @keyframes kwdStarTwinkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.3) rotate(180deg);
      opacity: 1;
    }
  }

  /* Content wrapper */
  .kwdContentWrapper {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Header section */
  .kwdHeaderSection {
    text-align: center;
    margin-bottom: 4rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .kwdHeaderSection.kwdVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kwdMainTitle {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.3;
  }

  .kwdTitlePrefix {
    color: #666;
    display: block;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
  }

  .kwdTitleHighlight {
    position: relative;
    display: inline-block;
  }

  .kwdBrandName {
    background: linear-gradient(135deg, #ff6b9d 0%, #4ecdc4 50%, #ffd93d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 4rem;
  }

  .kwdTitleDecor {
    position: absolute;
    top: -20px;
    right: -40px;
    animation: kwdDecorBounce 2s ease-in-out infinite;
  }

  .kwdDecorIcon {
    font-size: 2rem;
  }

  @keyframes kwdDecorBounce {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-10px) rotate(10deg);
    }
  }

  .kwdTitleSuffix {
    display: block;
    margin-top: 0.5rem;
    color: #666;
    font-size: 2.5rem;
  }

  .kwdMagicWord {
    color: #ffd93d;
    font-weight: 800;
    animation: kwdWordPulse 2s ease-in-out infinite;
  }

  @keyframes kwdWordPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  .kwdSubtitleBox {
    margin-top: 1rem;
  }

  .kwdSubtitle {
    font-size: 1.5rem;
    color: #666;
    margin: 0;
  }

  .kwdGradesBadge {
    display: inline-block;
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    color: white;
    padding: 5px 20px;
    border-radius: 25px;
    font-weight: 700;
    margin: 0 10px;
    animation: kwdBadgePulse 3s ease-in-out infinite;
  }

  @keyframes kwdBadgePulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 5px 15px rgba(78, 205, 196, 0.3);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 8px 25px rgba(78, 205, 196, 0.5);
    }
  }

  /* Main grid */
  .kwdMainGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
    margin-bottom: 4rem;
  }

  /* Features section */
  .kwdFeaturesSection {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s ease-out 0.3s;
  }

  .kwdFeaturesSection.kwdFeaturesVisible {
    opacity: 1;
    transform: translateX(0);
  }

  .kwdFeaturesHeader {
    margin-bottom: 2rem;
  }

  .kwdSectionTitle {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .kwdSectionIcon {
    font-size: 2rem;
    animation: kwdIconSpin 3s ease-in-out infinite;
  }

  @keyframes kwdIconSpin {
    0%,
    100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(360deg);
    }
  }

  /* Features grid */
  .kwdFeaturesGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  .kwdFeatureCard {
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: kwdFeatureAppear 0.6s ease-out forwards;
  }

  @keyframes kwdFeatureAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kwdFeatureCard:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  }

  .kwdFeatureCard.kwdFeatureActive {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  }

  .kwdFeatureIcon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: kwdIconFloat 3s ease-in-out infinite;
  }

  @keyframes kwdIconFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  .kwdFeatureTitle {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }

  .kwdFeatureDesc {
    font-size: 1rem;
    color: #666;
    margin: 0;
  }

  .kwdFeatureGlow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .kwdFeatureCard:hover .kwdFeatureGlow {
    opacity: 0.3;
  }

  /* Subjects section */
  .kwdSubjectsSection {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .kwdSubjectsTitle {
    font-size: 1.75rem;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .kwdSubjectsList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .kwdSubjectItem {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 15px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-20px);
    animation: kwdSubjectSlide 0.5s ease-out forwards;
  }

  @keyframes kwdSubjectSlide {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .kwdSubjectItem:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  }

  .kwdSubjectEmoji {
    font-size: 2rem;
  }

  .kwdSubjectName {
    font-size: 1.25rem;
    font-weight: 600;
  }

  /* Image section */
  .kwdImageSection {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s ease-out 0.5s;
  }

  .kwdImageSection.kwdImageVisible {
    opacity: 1;
    transform: translateX(0);
  }

  .kwdImageContainer {
    position: relative;
    margin-bottom: 2rem;
  }

  .kwdMainImage {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  }

  .kwdImageOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .kwdFloatingElement {
    position: absolute;
    font-size: 2.5rem;
    animation: kwdElementFloat 10s ease-in-out infinite;
  }

  .kwdElement1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }

  .kwdElement2 {
    top: 20%;
    right: 10%;
    animation-delay: 2.5s;
  }

  .kwdElement3 {
    bottom: 20%;
    left: 15%;
    animation-delay: 5s;
  }

  .kwdElement4 {
    bottom: 10%;
    right: 15%;
    animation-delay: 7.5s;
  }

  @keyframes kwdElementFloat {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
      opacity: 0;
    }
    25%,
    75% {
      opacity: 1;
    }
    50% {
      transform: translate(30px, -30px) scale(1.2);
      opacity: 1;
    }
  }

  .kwdImageFrame {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border: 3px solid #4ecdc4;
    border-radius: 25px;
    opacity: 0.5;
    animation: kwdFramePulse 3s ease-in-out infinite;
  }

  @keyframes kwdFramePulse {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.5;
    }
    50% {
      transform: scale(1.02);
      opacity: 0.8;
    }
  }

  /* CTA Box */
  .kwdCTABox {
    background: linear-gradient(135deg, #ffe5f1 0%, #e5f5ff 100%);
    border-radius: 20px;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  }

  .kwdCTATitle {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
  }

  .kwdCTAText {
    font-size: 1.25rem;
    color: #666;
    margin-bottom: 1.5rem;
  }

  .kwdCTAButton {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .kwdCTAButton:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(255, 107, 157, 0.3);
  }

  .kwdCTAButtonText {
    position: relative;
    z-index: 1;
  }

  .kwdCTAButtonIcon {
    font-size: 1.5rem;
    animation: kwdIconBounce 2s ease-in-out infinite;
  }

  .kwdCTAButtonShine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    transform: rotate(45deg);
    transition: left 0.5s ease;
  }

  .kwdCTAButton:hover .kwdCTAButtonShine {
    left: 100%;
  }

  /* Stats section */
  .kwdStatsSection {
    background: white;
    border-radius: 30px;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.8s;
  }

  .kwdStatsSection.kwdStatsVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kwdStatsGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .kwdStatCard {
    text-align: center;
    padding: 2rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    transition: all 0.3s ease;
  }

  .kwdStatCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .kwdStatIcon {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: kwdStatIconPulse 3s ease-in-out infinite;
  }

  @keyframes kwdStatIconPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .kwdStatNumber {
    font-size: 2.5rem;
    font-weight: 800;
    color: #333;
    margin-bottom: 0.5rem;
  }

  .kwdStatLabel {
    font-size: 1.125rem;
    color: #666;
    font-weight: 600;
  }
  /* End of Kids What Do We Do Component - Landscape ***/

  /* Kids Home Footer Component - Landscape */
  .khfMainContainer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffe5f1 0%, #e5f5ff 50%, #f0e5ff 100%);
    padding: 60px 0 0 0;
    margin-top: 80px;
  }

  /* Background decorations */
  .khfBackgroundDecor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
  }

  .khfFloatingElement {
    position: absolute;
    font-size: 2rem;
    opacity: 0.3;
    animation: khfFloat 20s ease-in-out infinite;
  }

  @keyframes khfFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    25% {
      transform: translateY(-30px) rotate(90deg);
    }
    50% {
      transform: translateY(0) rotate(180deg);
    }
    75% {
      transform: translateY(30px) rotate(270deg);
    }
  }

  /* Wave decorations */
  .khfWaveTop,
  .khfWaveMiddle,
  .khfWaveBottom {
    position: absolute;
    width: 100%;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.2' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E")
      repeat-x;
  }

  .khfWaveTop {
    top: -50px;
    animation: khfWaveMove 20s ease-in-out infinite;
  }

  .khfWaveMiddle {
    top: -30px;
    opacity: 0.5;
    animation: khfWaveMove 25s ease-in-out infinite reverse;
  }

  .khfWaveBottom {
    top: -10px;
    opacity: 0.3;
    animation: khfWaveMove 30s ease-in-out infinite;
  }

  @keyframes khfWaveMove {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-100px);
    }
  }

  /* Content wrapper */
  .khfContentWrapper {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
  }

  /* Mascot section */
  .khfMascotSection {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .khfMascotSection.khfMascotVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .khfMascot {
    font-size: 4rem;
    animation: khfMascotBounce 3s ease-in-out infinite;
  }

  @keyframes khfMascotBounce {
    0%,
    100% {
      transform: translateY(0) rotate(-5deg);
    }
    50% {
      transform: translateY(-10px) rotate(5deg);
    }
  }

  .khfMascotMessage {
    text-align: center;
  }

  .khfMascotTitle {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
  }

  .khfMascotText {
    font-size: 1.25rem;
    color: #666;
    margin: 0;
  }

  /* Main content */
  .khfMainContent {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.3s;
  }

  .khfMainContent.khfContentVisible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Sections grid */
  .khfSectionsGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3rem;
    margin-bottom: 4rem;
  }

  .khfSection {
    opacity: 0;
    transform: translateY(20px);
    animation: khfSectionAppear 0.6s ease-out forwards;
  }

  @keyframes khfSectionAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .khfSectionHeader {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .khfSectionIcon {
    font-size: 2rem;
    animation: khfIconSpin 3s ease-in-out infinite;
  }

  @keyframes khfIconSpin {
    0%,
    100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(360deg);
    }
  }

  .khfSectionTitle {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
  }

  .khfLinksList {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .khfLinkItem {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .khfLinkItem:hover {
    transform: translateX(5px);
    background: rgba(255, 255, 255, 0.8);
  }

  .khfLinkIcon {
    font-size: 1.25rem;
  }

  .khfLinkText {
    font-size: 1rem;
    color: #555;
    font-weight: 500;
  }

  .khfLinkGlow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    transition: left 0.5s ease;
  }

  .khfLinkItem:hover .khfLinkGlow {
    left: 0;
  }

  /* Newsletter section */
  .khfNewsletterSection {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: khfSectionAppear 0.6s ease-out forwards;
  }

  .khfNewsletterHeader {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .khfNewsletterIcon {
    font-size: 2rem;
    animation: khfNewsletterBounce 2s ease-in-out infinite;
  }

  @keyframes khfNewsletterBounce {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .khfNewsletterTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0;
  }

  .khfNewsletterText {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1.5rem;
  }

  .khfNewsletterForm {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
  }

  .khfEmailInput {
    flex: 1;
    padding: 0.875rem 1.25rem;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    font-size: 1rem;
    outline: none;
    transition: all 0.3s ease;
  }

  .khfEmailInput:focus {
    border-color: #4ecdc4;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.2);
  }

  .khfSubscribeBtn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .khfSubscribeBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 157, 0.3);
  }

  .khfBtnText {
    position: relative;
    z-index: 1;
  }

  .khfBtnIcon {
    font-size: 1.25rem;
    position: relative;
    z-index: 1;
  }

  .khfBtnShine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    transform: rotate(45deg);
    transition: left 0.5s ease;
  }

  .khfSubscribeBtn:hover .khfBtnShine {
    left: 100%;
  }

  .khfNewsletterCharacters {
    position: absolute;
    bottom: -10px;
    right: 20px;
    display: flex;
    gap: 0.5rem;
  }

  .khfChar {
    font-size: 1.5rem;
    animation: khfCharDance 2s ease-in-out infinite;
  }

  .khfChar1 {
    animation-delay: 0s;
  }
  .khfChar2 {
    animation-delay: 0.3s;
  }
  .khfChar3 {
    animation-delay: 0.6s;
  }

  @keyframes khfCharDance {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-5px) rotate(10deg);
    }
  }

  /* Bottom section */
  .khfBottomSection {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 30px 30px 0 0;
    padding: 3rem 2rem 2rem;
    margin: 0 -40px;
  }

  /* Social section */
  .khfSocialSection {
    text-align: center;
    margin-bottom: 2rem;
  }

  .khfSocialTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .khfSocialIcon {
    font-size: 1.5rem;
    animation: khfStarTwinkle 2s ease-in-out infinite;
  }

  @keyframes khfStarTwinkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
    }
    50% {
      transform: scale(1.2) rotate(180deg);
    }
  }

  .khfSocialLinks {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
  }

  .khfSocialLink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: khfSocialAppear 0.5s ease-out forwards;
  }

  @keyframes khfSocialAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .khfSocialLink:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  }

  .khfSocialLinkIcon {
    font-size: 1.75rem;
    position: relative;
    z-index: 1;
  }

  .khfSocialGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--hover-color);
    opacity: 0.3;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
  }

  .khfSocialLink:hover .khfSocialGlow {
    width: 100%;
    height: 100%;
  }

  /* Divider */
  .khfDivider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
  }

  .khfDividerLine {
    flex: 1;
    height: 2px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      #e0e0e0 50%,
      transparent 100%
    );
  }

  .khfDividerIcon {
    font-size: 1.5rem;
    animation: khfDividerSpin 3s linear infinite;
  }

  @keyframes khfDividerSpin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Copyright */
  .khfCopyright {
    text-align: center;
    margin-bottom: 60px;
  }

  .khfCopyrightContent {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
  }

  .khfCopyrightIcon {
    font-size: 1.5rem;
    animation: khfCopyrightBounce 3s ease-in-out infinite;
  }

  @keyframes khfCopyrightBounce {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .khfCopyrightText {
    font-size: 1rem;
    color: #666;
    margin: 0;
  }

  .khfMadeWith {
    font-size: 0.875rem;
    color: #999;
  }

  .khfHeart {
    color: #ff6b9d;
    animation: khfHeartBeat 1.5s ease-in-out infinite;
  }

  @keyframes khfHeartBeat {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }

  /* Character parade */
  .khfCharacterParade {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2rem;
    opacity: 0;
    transition: opacity 0.8s ease-out 1s;
  }

  .khfCharacterParade.khfParadeVisible {
    opacity: 1;
  }

  .khfParadeChar {
    font-size: 2.5rem;
    animation: khfParadeBounce 3s ease-in-out infinite;
  }

  .khfParade1 {
    animation-delay: 0s;
  }
  .khfParade2 {
    animation-delay: 0.2s;
  }
  .khfParade3 {
    animation-delay: 0.4s;
  }
  .khfParade4 {
    animation-delay: 0.6s;
  }
  .khfParade5 {
    animation-delay: 0.8s;
  }
  .khfParade6 {
    animation-delay: 1s;
  }
  .khfParade7 {
    animation-delay: 1.2s;
  }

  @keyframes khfParadeBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  /* End of Kids Home Footer Component - Landscape ***/

  /* Kids Login Component Styles */
  .klMainContainer {
    width: 100%;
    min-height: calc(100vh - 50px);
    /* margin-top: 50px; */
    background: linear-gradient(180deg, #87ceeb 0%, #98fb98 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  /* Animated background */
  .klBackgroundAnimation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    display: none;
  }

  .klFloatingElement {
    position: absolute;
    animation: klFloat 20s ease-in-out infinite;
    opacity: 0.7;
    display: none;
  }

  @keyframes klFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    25% {
      transform: translateY(-20px) rotate(5deg);
    }
    50% {
      transform: translateY(0) rotate(-5deg);
    }
    75% {
      transform: translateY(20px) rotate(3deg);
    }
  }

  .klCloud {
    position: absolute;
    font-size: 60px;
    opacity: 0.8;
    animation: klCloudMove 40s linear infinite;
    display: none;
  }

  .klCloud1 {
    top: 10%;
    left: -10%;
  }

  .klCloud2 {
    top: 20%;
    left: -10%;
    animation-delay: -15s;
    font-size: 50px;
  }

  .klCloud3 {
    top: 5%;
    left: -10%;
    animation-delay: -30s;
    font-size: 70px;
  }

  @keyframes klCloudMove {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(100vw + 200px));
    }
  }

  .klSun {
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 80px;
    animation: klSunPulse 4s ease-in-out infinite;
  }

  @keyframes klSunPulse {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
    }
    50% {
      transform: scale(1.1) rotate(180deg);
    }
  }

  /* Confetti */
  .klConfettiContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    display: none;
  }

  .klConfettiPiece {
    position: absolute;
    width: 10px;
    height: 10px;
    /* animation: klConfettiFall 3s ease-out forwards; */
    display: none; /* Hiding falling decorations */
  }

  @keyframes klConfettiFall {
    0% {
      transform: translateY(-100vh) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: translateY(100vh) rotate(720deg);
      opacity: 0;
    }
  }

  .klContentWrapper {
    width: 100%;
    max-width: 1400px;
    padding: 2rem;
    position: relative;
    z-index: 1;
  }

  /* Header Section */
  .klHeaderSection {
    text-align: center;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.8s ease-out;
  }

  .klHeaderSection.klVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .klMainTitle {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .klWelcome {
    font-size: 1.5rem;
    color: #ff6b6b;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .klBrandName {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .klBrandText {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .klKidsText {
    font-size: 3rem;
    font-weight: 800;
    color: #ffd93d;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .klEmoji {
    font-size: 2.5rem;
    animation: klBounce 2s ease-in-out infinite;
  }

  @keyframes klBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .klSubtitle {
    font-size: 1.25rem;
    color: #2d3748;
    font-weight: 500;
  }

  /* Character Selection */
  .klCharacterSelection {
    text-align: center;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out 0.2s;
  }

  .klCharacterSelection.klCharactersVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .klCharacterPrompt {
    font-size: 1.25rem;
    color: #2d3748;
    font-weight: 600;
    margin-bottom: 1rem;
  }

  .klCharacterGrid {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .klCharacterButton {
    background: white;
    border: 3px solid #e5e7eb;
    border-radius: 20px;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .klCharacterButton:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .klCharacterButton.klCharacterSelected {
    border-color: var(--char-color);
    background: linear-gradient(
      135deg,
      white 0%,
      rgba(255, 255, 255, 0.9) 100%
    );
    transform: scale(1.05);
  }

  .klCharacterEmoji {
    font-size: 2.5rem;
  }

  .klCharacterName {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2d3748;
  }

  .klCharacterGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--char-color) 0%, transparent 70%);
    opacity: 0.2;
    transform: translate(-50%, -50%);
    animation: klPulse 2s ease-in-out infinite;
  }

  @keyframes klPulse {
    0%,
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      transform: translate(-50%, -50%) scale(1.2);
    }
  }

  /* Form Container */
  .klFormContainer {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out 0.4s;
  }

  .klFormContainer.klFormVisible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Login Card */
  .klLoginCard {
    background: white;
    border-radius: 30px;
    padding: 2rem 3rem 3rem;
    width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    border: 3px solid #ffd93d;
    position: relative;
    overflow: visible;
  }

  .klCardCharacter {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  .klBigCharacter {
    font-size: 5rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    display: block;
    animation: klCharacterBounce 3s ease-in-out infinite;
  }

  @keyframes klCharacterBounce {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-10px) scale(1.05);
    }
  }

  .klCharacterBubble {
    background: #ffd93d;
    color: #2d3748;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: -10px;
    position: relative;
  }

  .klCharacterBubble::before {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffd93d;
  }

  .klCardHeader {
    text-align: center;
    margin-bottom: 1.5rem;
    margin-top: 2rem;
  }

  .klCardTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.5rem;
  }

  .klCardSubtitle {
    font-size: 1rem;
    color: #64748b;
  }

  /* Error Message */
  .klErrorMessage {
    background: #fee2e2;
    border: 2px solid #fca5a5;
    border-radius: 15px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    text-align: center;
    animation: klShake 0.5s ease-out;
  }

  @keyframes klShake {
    0%,
    100% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-5px) rotate(-1deg);
    }
    75% {
      transform: translateX(5px) rotate(1deg);
    }
  }

  .klErrorText {
    color: #dc2626;
    font-size: 0.875rem;
    font-weight: 600;
  }

  /* Form Group */
  .klFormGroup {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .klInputWrapper {
    position: relative;
    transition: all 0.3s ease;
  }

  .klInputWrapper.klInputFocused {
    transform: scale(1.02);
  }

  .klLabel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.5rem;
  }

  .klLabelIcon {
    font-size: 1.25rem;
  }

  .klInputContainer {
    position: relative;
  }

  .klInput {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-right: 3rem;
    border: 3px solid #e5e7eb;
    border-radius: 15px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f9fafb;
  }

  .klInput:focus {
    outline: none;
    border-color: #ffd93d;
    background: white;
    box-shadow: 0 0 0 4px rgba(255, 217, 61, 0.2);
  }

  .klInputDecoration {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .klInputStar {
    font-size: 1.5rem;
    opacity: 0;
    transition: all 0.3s ease;
  }

  .klInputWrapper.klInputFocused .klInputStar {
    opacity: 1;
    animation: klStarSpin 1s ease-out;
  }

  @keyframes klStarSpin {
    from {
      transform: rotate(0deg) scale(0);
    }
    to {
      transform: rotate(360deg) scale(1);
    }
  }

  .klPasswordToggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .klPasswordToggle:hover {
    transform: translateY(-50%) scale(1.1);
  }

  .klForgotPassword {
    text-align: right;
    margin-top: -0.5rem;
  }

  .klForgotLink {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: #4ecdc4;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .klForgotLink:hover {
    color: #ff6b6b;
    transform: translateX(-4px);
  }

  .klForgotIcon {
    font-size: 1rem;
  }

  /* Submit Button */
  .klSubmitButton {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
  }

  .klSubmitButton:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);
  }

  .klSubmitButton:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  .klButtonText {
    position: relative;
    z-index: 1;
  }

  .klButtonIcon {
    font-size: 1.5rem;
    margin-left: 0.5rem;
    display: inline-block;
    animation: klRocket 2s ease-in-out infinite;
  }

  @keyframes klRocket {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-5px) rotate(-5deg);
    }
  }

  .klButtonSparkles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .klSparkle {
    position: absolute;
    font-size: 1rem;
    opacity: 0;
    animation: klSparkle 2s ease-out infinite;
  }

  .klSparkle:nth-child(1) {
    top: -20px;
    left: -20px;
    animation-delay: 0s;
  }

  .klSparkle:nth-child(2) {
    top: -20px;
    right: -20px;
    animation-delay: 0.4s;
  }

  .klSparkle:nth-child(3) {
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0.8s;
  }

  @keyframes klSparkle {
    0% {
      opacity: 0;
      transform: scale(0) rotate(0deg);
    }
    50% {
      opacity: 1;
      transform: scale(1) rotate(180deg);
    }
    100% {
      opacity: 0;
      transform: scale(0) rotate(360deg);
    }
  }

  .klLoadingContainer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
  }

  .klLoadingText {
    font-size: 1rem;
  }

  .klLoadingBounce {
    display: flex;
    gap: 0.25rem;
  }

  .klBounceBall {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: klBounceBall 1.4s ease-in-out infinite;
  }

  .klBounceBall:nth-child(1) {
    animation-delay: 0s;
  }

  .klBounceBall:nth-child(2) {
    animation-delay: 0.2s;
  }

  .klBounceBall:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes klBounceBall {
    0%,
    80%,
    100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-10px);
    }
  }

  .klButtonShine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 100%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transform: skewX(-45deg);
    transition: left 0.5s ease;
  }

  .klSubmitButton:hover .klButtonShine {
    left: 100%;
  }

  /* Divider */
  .klDivider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
  }

  .klDividerLine {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  }

  .klDividerContent {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .klDividerIcon {
    font-size: 1.25rem;
    animation: klTwinkle 2s ease-in-out infinite;
  }

  @keyframes klTwinkle {
    0%,
    100% {
      opacity: 0.5;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.2);
    }
  }

  .klDividerText {
    font-size: 0.875rem;
    color: #9ca3af;
    font-weight: 600;
  }

  /* Social Login */
  .klGoogleButton {
    width: 100%;
    padding: 0.875rem;
    background: white;
    border: 3px solid #4285f4;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .klGoogleButton:hover:not(:disabled) {
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(66, 133, 244, 0.2);
  }

  .klGoogleIcon {
    width: 20px;
    height: 20px;
  }

  .klGoogleText {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2d3748;
  }

  .klGoogleEmoji {
    font-size: 1.25rem;
  }

  .klGoogleShine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 100%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(66, 133, 244, 0.2),
      transparent
    );
    transform: skewX(-45deg);
    transition: left 0.5s ease;
  }

  .klGoogleButton:hover .klGoogleShine {
    left: 100%;
  }

  /* Signup Prompt */
  .klSignupPrompt {
    text-align: center;
    margin-top: 1.5rem;
  }

  .klSignupText {
    font-size: 0.875rem;
    color: #64748b;
    font-weight: 500;
  }

  .klSignupLink {
    color: #ff6b6b;
    text-decoration: none;
    font-weight: 700;
    margin-left: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
  }

  .klSignupLink:hover {
    color: #4ecdc4;
    transform: scale(1.05);
  }

  .klLinkIcon {
    font-size: 1.25rem;
  }

  /* Card Decorations */
  .klCardDecorations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .klDecor {
    position: absolute;
    font-size: 2rem;
    opacity: 0.3;
    animation: klDecorFloat 10s ease-in-out infinite;
  }

  .klDecor1 {
    top: 10%;
    right: 5%;
    animation-delay: 0s;
  }

  .klDecor2 {
    bottom: 15%;
    left: 5%;
    animation-delay: 2.5s;
  }

  .klDecor3 {
    top: 60%;
    right: 10%;
    animation-delay: 5s;
  }

  .klDecor4 {
    bottom: 30%;
    left: 10%;
    animation-delay: 7.5s;
  }

  @keyframes klDecorFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-20px) rotate(180deg);
    }
  }

  /* Fun Facts Sidebar */
  .klFunFacts {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.8s ease-out 0.6s;
  }

  .klFunFacts.klFunFactsVisible {
    opacity: 1;
    transform: translateX(0);
  }

  .klFunFactCard {
    background: white;
    border: 3px solid #ffd93d;
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .klFunFactCard:hover {
    transform: translateY(-4px) rotate(-1deg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }

  .klFunFactCard::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(255, 217, 61, 0.1) 0%,
      transparent 70%
    );
    transform: rotate(45deg);
    transition: all 0.5s ease;
  }

  .klFunFactCard:hover::before {
    transform: rotate(225deg);
  }

  .klFactIcon {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
  }

  .klFactTitle {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.5rem;
  }

  .klFactText {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.5;
  }

  /* Bottom Decoration */
  .klBottomDecoration {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 150px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out 0.8s;
  }

  .klBottomDecoration.klDecorationVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .klGround {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: #8b7355;
  }

  .klGrass {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    height: 30px;
    background: #90ee90;
    clip-path: polygon(
      0% 100%,
      5% 60%,
      10% 100%,
      15% 70%,
      20% 100%,
      25% 65%,
      30% 100%,
      35% 75%,
      40% 100%,
      45% 60%,
      50% 100%,
      55% 70%,
      60% 100%,
      65% 65%,
      70% 100%,
      75% 75%,
      80% 100%,
      85% 60%,
      90% 100%,
      95% 70%,
      100% 100%
    );
  }

  .klFlowers {
    position: absolute;
    bottom: 70px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    padding: 0 10%;
  }

  .klFlower {
    font-size: 2rem;
    animation: klFlowerSway 3s ease-in-out infinite;
  }

  .klFlower1 {
    animation-delay: 0s;
  }
  .klFlower2 {
    animation-delay: 0.5s;
  }
  .klFlower3 {
    animation-delay: 1s;
  }
  .klFlower4 {
    animation-delay: 1.5s;
  }
  .klFlower5 {
    animation-delay: 2s;
  }

  @keyframes klFlowerSway {
    0%,
    100% {
      transform: rotate(-5deg);
    }
    50% {
      transform: rotate(5deg);
    }
  }
  /* End of Kids Login Component - Landscape */

  /* Kids Registration Component - Landscape */
  .krMainContainer {
    min-height: calc(100vh - 50px);
    margin-top: 50px;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #87ceeb 0%, #ffb6c1 50%, #f0e68c 100%);
  }

  .krBackgroundAnimation {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .krFloatingElement {
    position: absolute;
    animation: krFloat linear infinite;
    opacity: 0.7;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  }

  @keyframes krFloat {
    from {
      transform: translateY(100vh) rotate(0deg);
    }
    to {
      transform: translateY(-100px) rotate(360deg);
    }
  }

  .krRainbow {
    position: absolute;
    top: 10%;
    left: -100px;
    width: 400px;
    height: 200px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(255, 0, 0, 0.3) 16.66%,
      rgba(255, 127, 0, 0.3) 33.33%,
      rgba(255, 255, 0, 0.3) 50%,
      rgba(0, 255, 0, 0.3) 66.66%,
      rgba(0, 0, 255, 0.3) 83.33%,
      rgba(139, 0, 255, 0.3) 100%
    );
    border-radius: 100px 100px 0 0;
    transform: rotate(-15deg);
    opacity: 0.8;
  }

  .krContentWrapper {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem;
  }

  .krHeaderSection {
    text-align: center;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s ease-out;
  }

  .krHeaderSection.krVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .krMainTitle {
    font-size: 3rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .krWelcome {
    font-size: 2rem;
    color: #ff6b6b;
    font-weight: 500;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .krBrandName {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 3.5rem;
    font-weight: 800;
  }

  .krBrandText {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .krKidsText {
    color: #ffd93d;
    text-shadow: 3px 3px 0 #ffa502;
  }

  .krEmoji {
    font-size: 3rem;
    animation: krBounce 2s ease-in-out infinite;
  }

  @keyframes krBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .krAdventure {
    font-size: 2rem;
    color: #a29bfe;
    font-weight: 600;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .krProgressSection {
    width: 100%;
    max-width: 1200px;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out 0.2s;
  }

  .krProgressSection.krProgressVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .krProgressBar {
    height: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 2rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .krProgressFill {
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #ffd93d);
    border-radius: 6px;
    transition: width 0.5s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .krStepsContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
  }

  .krStep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
  }

  .krStep:hover .krStepCircle {
    transform: scale(1.1);
  }

  .krStepCircle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    border: 3px solid transparent;
  }

  .krStepActive .krStepCircle {
    background: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .krStepCurrent .krStepCircle {
    border-color: #ff6b6b;
    animation: krPulse 2s ease-in-out infinite;
  }

  @keyframes krPulse {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
    }
    50% {
      box-shadow: 0 0 0 15px rgba(255, 107, 107, 0);
    }
  }

  .krStepIcon {
    font-size: 1.5rem;
  }

  .krStepNumber {
    position: absolute;
    bottom: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    background: #ff6b6b;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
  }

  .krStepTitle {
    font-size: 0.9rem;
    color: #333;
    font-weight: 600;
    text-align: center;
  }

  .krFormContainer {
    width: 100%;
    max-width: 1200px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out 0.4s;
  }

  .krFormContainer.krFormVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .krFormCard {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
  }

  .krFormCard::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(255, 107, 107, 0.1) 0%,
      transparent 70%
    );
    pointer-events: none;
  }

  .krAnimalSection {
    margin-bottom: 2rem;
    text-align: center;
  }

  .krAnimalPrompt {
    font-size: 1.2rem;
    color: #4ecdc4;
    font-weight: 600;
    margin-bottom: 1rem;
  }

  .krAnimalGrid {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .krAnimalButton {
    padding: 1rem 1.5rem;
    border: 3px solid transparent;
    border-radius: 16px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .krAnimalButton:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  }

  .krAnimalButton.krAnimalSelected {
    border-color: var(--animal-color);
    background: linear-gradient(145deg, white, #f8f8f8);
    transform: scale(1.05);
  }

  .krAnimalEmoji {
    font-size: 2rem;
  }

  .krAnimalName {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
  }

  .krErrorMessage {
    background: #ffe5e5;
    border: 2px solid #ff6b6b;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
  }

  .krErrorText {
    color: #d32f2f;
    font-weight: 500;
  }

  .krStepContent {
    animation: krFadeIn 0.5s ease-out;
  }

  @keyframes krFadeIn {
    from {
      opacity: 0;
      transform: translateX(20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .krStepHeading {
    font-size: 2rem;
    color: #333;
    margin-bottom: 2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .krStepEmoji {
    font-size: 2.5rem;
    animation: krRotate 3s ease-in-out infinite;
  }

  @keyframes krRotate {
    0%,
    100% {
      transform: rotate(-10deg);
    }
    50% {
      transform: rotate(10deg);
    }
  }

  /* Step 1 - Role Selection */
  .krRoleCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
  }

  .krRoleCard {
    padding: 2rem;
    background: white;
    border: 3px solid transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }

  .krRoleCard:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }

  .krRoleCard.krRoleSelected {
    border-color: #ff6b6b;
    background: linear-gradient(145deg, #fff, #fff5f5);
  }

  .krRoleIcon {
    font-size: 3rem;
  }

  .krRoleTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
  }

  .krRoleDesc {
    font-size: 1rem;
    color: #666;
    text-align: center;
  }

  .krRoleGlow {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.3;
    filter: blur(40px);
  }

  /* Step 2 - User Information */
  .krFormFields {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .krFormRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .krInputWrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .krLabel {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .krLabelIcon {
    font-size: 1.2rem;
  }

  .krInput,
  .krSelect {
    padding: 1rem 1.25rem;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: white;
  }

  .krInput:focus,
  .krSelect:focus {
    outline: none;
    border-color: #4ecdc4;
    box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.1);
  }

  .krInputWrapper.krInputError .krInput,
  .krInputWrapper.krInputError .krSelect {
    border-color: #ff6b6b;
  }

  .krErrorHint {
    font-size: 0.85rem;
    color: #ff6b6b;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .krPasswordContainer {
    position: relative;
    display: flex;
    align-items: center;
  }

  .krPasswordContainer .krInput {
    padding-right: 3rem;
    flex: 1;
  }

  .krPasswordToggle {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .krPasswordToggle:hover {
    transform: scale(1.1);
  }

  /* Step 3 - Children Information */
  .krChildrenCount {
    text-align: center;
    margin-bottom: 2rem;
  }

  .krCounterButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
  }

  .krCounterBtn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background: #4ecdc4;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .krCounterBtn:hover:not(:disabled) {
    transform: scale(1.1);
    background: #3ba99c;
  }

  .krCounterBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .krCounterValue {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    min-width: 50px;
    text-align: center;
  }

  .krChildrenList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }

  .krChildCard {
    background: linear-gradient(145deg, #fff, #f8f8f8);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .krChildTitle {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .krChildIcon {
    font-size: 1.5rem;
  }

  .krChildFields {
    display: flex;
    gap: 1rem;
  }

  .krChildFields .krInputWrapper {
    flex: 1;
  }

  /* Step 4 - Subscription */
  .krSubscriptionCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
  }

  .krSubCard {
    padding: 2rem;
    background: white;
    border: 3px solid #e0e0e0;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .krSubCard:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  }

  .krSubCard.krSubSelected {
    border-color: #4ecdc4;
    background: linear-gradient(145deg, #fff, #f0ffff);
  }

  .krSubHeader {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .krSubEmoji {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
  }

  .krSubTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0.5rem 0;
  }

  .krSubPrice {
    font-size: 1.1rem;
    color: #666;
    font-weight: 500;
  }

  .krPopularBadge,
  .krSavingsBadge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ff6b6b;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    transform: rotate(15deg);
  }

  .krSavingsBadge {
    background: #4ecdc4;
  }

  .krSubFeatures {
    margin: 1.5rem 0;
  }

  .krSubFeatures p {
    margin: 0.75rem 0;
    color: #555;
    font-size: 0.95rem;
  }

  .krSubFooter {
    text-align: center;
    padding-top: 1rem;
    border-top: 2px dashed #e0e0e0;
  }

  .krPriceTag {
    font-size: 1.3rem;
    font-weight: 700;
    color: #4ecdc4;
  }

  /* Navigation Buttons */
  .krButtonGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
    gap: 1rem;
  }

  .krBackButton,
  .krNextButton,
  .krSubmitButton {
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
  }

  .krBackButton {
    background: #e0e0e0;
    color: #666;
  }

  .krBackButton:hover {
    background: #d0d0d0;
    transform: translateX(-4px);
  }

  .krNextButton,
  .krSubmitButton {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
    margin-left: auto;
  }

  .krSubmitButton {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
  }

  .krNextButton:hover,
  .krSubmitButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }

  .krBackIcon,
  .krNextIcon,
  .krSubmitIcon {
    font-size: 1.3rem;
  }

  .krButtonShine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent 30%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 70%
    );
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.6s ease;
  }

  .krNextButton:hover .krButtonShine,
  .krSubmitButton:hover .krButtonShine {
    transform: rotate(45deg) translateX(100%);
  }

  .krLoadingContainer {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .krLoadingText {
    font-size: 1.1rem;
  }

  .krLoadingDots {
    display: flex;
    gap: 0.3rem;
  }

  .krDot {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: krDotBounce 1.4s ease-in-out infinite;
  }

  .krDot:nth-child(2) {
    animation-delay: 0.2s;
  }
  .krDot:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes krDotBounce {
    0%,
    80%,
    100% {
      transform: scale(0.8);
      opacity: 0.5;
    }
    40% {
      transform: scale(1.2);
      opacity: 1;
    }
  }

  .krButtonSparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .krSparkle {
    position: absolute;
    font-size: 1rem;
    animation: krSparkle 2s ease-in-out infinite;
  }

  .krSparkle:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
  }
  .krSparkle:nth-child(2) {
    top: 80%;
    right: 20%;
    animation-delay: 0.7s;
  }
  .krSparkle:nth-child(3) {
    bottom: 20%;
    left: 50%;
    animation-delay: 1.4s;
  }

  @keyframes krSparkle {
    0%,
    100% {
      opacity: 0;
      transform: scale(0) rotate(0deg);
    }
    50% {
      opacity: 1;
      transform: scale(1) rotate(180deg);
    }
  }

  /* Helper Character */
  .krHelperCharacter {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 10;
  }

  .krHelperEmoji {
    font-size: 3rem;
    display: block;
    animation: krHelperBounce 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  }

  @keyframes krHelperBounce {
    0%,
    100% {
      transform: translateY(0) rotate(-5deg);
    }
    25% {
      transform: translateY(-10px) rotate(5deg);
    }
    75% {
      transform: translateY(-5px) rotate(-3deg);
    }
  }

  .krHelperBubble {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: white;
    padding: 1rem 1.5rem;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.5rem;
    min-width: 200px;
    opacity: 0;
    transform: translateY(10px);
    animation: krBubbleFadeIn 0.5s ease-out 1s forwards;
  }

  @keyframes krBubbleFadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .krHelperBubble::after {
    content: "";
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: white;
    transform: rotate(45deg);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  /* Login Prompt */
  .krLoginPrompt {
    text-align: center;
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
  }

  .krLoginText {
    font-size: 1.1rem;
    color: #333;
    margin: 0;
  }

  .krLoginLink {
    color: #4ecdc4;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
  }

  .krLoginLink:hover {
    color: #3ba99c;
    transform: translateX(4px);
  }

  .krLinkIcon {
    font-size: 1.3rem;
  }

  /* Success Overlay */
  .krSuccessOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: krOverlayFadeIn 0.5s ease-out;
  }

  @keyframes krOverlayFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .krSuccessContent {
    background: white;
    padding: 3rem;
    border-radius: 24px;
    text-align: center;
    position: relative;
    animation: krSuccessBounceIn 0.5s ease-out;
  }

  @keyframes krSuccessBounceIn {
    0% {
      transform: scale(0.8) translateY(20px);
      opacity: 0;
    }
    50% {
      transform: scale(1.05) translateY(-10px);
    }
    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }

  .krSuccessIcon {
    font-size: 5rem;
    display: block;
    margin-bottom: 1rem;
    animation: krSuccessRotate 1s ease-out;
  }

  @keyframes krSuccessRotate {
    from {
      transform: rotate(0deg) scale(0);
    }
    to {
      transform: rotate(360deg) scale(1);
    }
  }

  .krSuccessTitle {
    font-size: 2.5rem;
    color: #333;
    margin: 1rem 0;
    font-weight: 700;
  }

  .krSuccessText {
    font-size: 1.3rem;
    color: #666;
    margin: 0;
  }

  .krSuccessConfetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .krConfettiPiece {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -10px;
    animation: krConfettiFall 3s ease-out forwards;
  }

  @keyframes krConfettiFall {
    to {
      transform: translateY(calc(100vh + 20px)) rotate(720deg);
      opacity: 0;
    }
  }
  /* End of Kids Registration Component - Landscape */

  /* Kids English Topics Page Styles */
  .kidsEnglishTopicMainDiv {
    width: 100%;
    min-height: calc(100vh - 50px);
    background: linear-gradient(
      135deg,
      #ffecd2 0%,
      #fcb69f 25%,
      #ff9a9e 50%,
      #fecfef 75%,
      #fecfef 100%
    );
    position: relative;
    overflow-x: hidden;
    padding-bottom: 50px;
  }

  /* Floating Background Shapes */
  .kidsEnglishFloatingShapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .kidsEnglishFloatingShape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: kidsEnglishFloat 20s ease-in-out infinite;
  }

  .kidsEnglishFloatingShape1 {
    width: 150px;
    height: 150px;
    background: #667eea;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .kidsEnglishFloatingShape2 {
    width: 200px;
    height: 200px;
    background: #f093fb;
    top: 50%;
    right: 10%;
    animation-delay: 5s;
  }

  .kidsEnglishFloatingShape3 {
    width: 100px;
    height: 100px;
    background: #4facfe;
    bottom: 20%;
    left: 15%;
    animation-delay: 10s;
  }

  .kidsEnglishFloatingShape4 {
    width: 120px;
    height: 120px;
    background: #fa709a;
    top: 30%;
    right: 20%;
    animation-delay: 15s;
  }

  @keyframes kidsEnglishFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
      transform: translateY(-30px) rotate(90deg) scale(1.1);
    }
    50% {
      transform: translateY(20px) rotate(180deg) scale(0.9);
    }
    75% {
      transform: translateY(-20px) rotate(270deg) scale(1.05);
    }
  }

  /* Header Section */
  .kidsEnglishHeaderSection {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-top: 100px;
    padding: 30px 20px;
    animation: kidsEnglishHeaderSlide 0.8s ease-out;
  }

  @keyframes kidsEnglishHeaderSlide {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsEnglishMainTitle {
    font-size: 3.5rem;
    font-weight: 900;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }

  .kidsEnglishTitleIcon {
    font-size: 3rem;
    animation: kidsEnglishBounce 2s ease-in-out infinite;
  }

  .kidsEnglishTitleWord {
    display: inline-block;
    animation: kidsEnglishWordFloat 3s ease-in-out infinite;
  }

  .kidsEnglishTitleWord1 {
    color: #667eea;
    animation-delay: 0s;
  }

  .kidsEnglishTitleWord2 {
    color: #f093fb;
    animation-delay: 0.2s;
  }

  .kidsEnglishSparkle {
    font-size: 2.5rem;
    animation: kidsEnglishSparkle 1.5s ease-in-out infinite;
  }

  @keyframes kidsEnglishBounce {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-10px) scale(1.1);
    }
  }

  @keyframes kidsEnglishWordFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  @keyframes kidsEnglishSparkle {
    0%,
    100% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }
    50% {
      opacity: 0.7;
      transform: scale(1.2) rotate(180deg);
    }
  }

  .kidsEnglishGradeInfo {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  .kidsEnglishGradeLabel {
    font-size: 1.5rem;
    font-weight: 700;
    color: #5a67d8;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 25px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .kidsEnglishLocation {
    font-size: 1.2rem;
    color: #e53e3e;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px 20px;
    border-radius: 30px;
  }

  .kidsLocationIcon {
    font-size: 1.3rem;
  }

  /* View Toggle */
  .kidsEnglishViewToggle {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 30px 0;
    position: relative;
    z-index: 10;
  }

  .kidsViewBtn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    border: none;
    border-radius: 30px;
    background: white;
    color: #4a5568;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .kidsViewBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }

  .kidsViewBtn.kidsViewActive {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: scale(1.05);
  }

  .kidsViewIcon {
    width: 20px;
    height: 20px;
  }

  .kidsViewText {
    font-size: 1rem;
  }

  /* Topics Container */
  .kidsEnglishTopicsContainer {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 10;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
  }

  .kidsTopicsVisible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Grid View - Category Section */
  .kidsEnglishCategorySection {
    margin-bottom: 50px;
    opacity: 0;
    animation: kidsEnglishFadeIn 0.8s ease forwards;
  }

  @keyframes kidsEnglishFadeIn {
    to {
      opacity: 1;
    }
  }

  .kidsEnglishCategoryTitle {
    font-size: 2.2rem;
    font-weight: 800;
    color: #2d3748;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
  }

  .kidsCategoryIcon {
    font-size: 2rem;
    animation: kidsEnglishRotate 3s linear infinite;
  }

  @keyframes kidsEnglishRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .kidsEnglishTopicsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
  }

  .kidsEnglishTopicCard {
    background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
    border-radius: 20px;
    padding: 25px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    opacity: 0;
    animation: kidsTopicCardAppear 0.6s ease forwards;
  }

  @keyframes kidsTopicCardAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsEnglishTopicCard::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(102, 126, 234, 0.1) 0%,
      transparent 70%
    );
    transform: rotate(45deg);
    transition: all 0.5s ease;
    opacity: 0;
  }

  .kidsEnglishTopicCard:hover::before,
  .kidsTopicHovered::before {
    opacity: 1;
  }

  .kidsEnglishTopicCard:hover,
  .kidsTopicHovered {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 40px rgba(102, 126, 234, 0.2);
  }

  .kidsTopicSelected {
    animation: kidsTopicSelect 0.4s ease;
  }

  @keyframes kidsTopicSelect {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }

  .kidsTopicCardContent {
    position: relative;
    z-index: 1;
  }

  .kidsTopicEmoji {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
    animation: kidsEmojiPulse 2s ease-in-out infinite;
  }

  @keyframes kidsEmojiPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .kidsTopicName {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 10px;
  }

  .kidsTopicDesc {
    font-size: 1rem;
    color: #718096;
    line-height: 1.5;
  }

  .kidsTopicCardGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle,
      rgba(102, 126, 234, 0.3) 0%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .kidsEnglishTopicCard:hover .kidsTopicCardGlow {
    opacity: 1;
  }

  /* List View Styles */
  .kidsEnglishListSection {
    margin-bottom: 30px;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    opacity: 0;
    animation: kidsListSectionAppear 0.6s ease forwards;
  }

  @keyframes kidsListSectionAppear {
    to {
      opacity: 1;
    }
  }

  .kidsEnglishListHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    width: 100%;
    text-align: left;
  }

  .kidsEnglishListHeader:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
  }

  .kidsListHeaderIcon {
    font-size: 1.5rem;
  }

  .kidsListHeaderText {
    flex-grow: 1;
    margin: 0 15px;
  }

  .kidsListHeaderArrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
  }

  .kidsListExpanded .kidsListHeaderArrow {
    transform: rotate(90deg);
  }

  .kidsEnglishListContent {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
  }

  .kidsListContentExpanded {
    max-height: 1000px;
  }

  .kidsEnglishListItem {
    display: flex;
    align-items: center;
    padding: 15px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid #e2e8f0;
  }

  .kidsEnglishListItem:last-child {
    border-bottom: none;
  }

  .kidsEnglishListItem:hover,
  .kidsListItemHovered {
    background: rgba(102, 126, 234, 0.05);
    padding-left: 40px;
  }

  .kidsListItemSelected {
    animation: kidsListItemSelect 0.4s ease;
  }

  @keyframes kidsListItemSelect {
    0% {
      background: rgba(102, 126, 234, 0.2);
    }
    100% {
      background: rgba(102, 126, 234, 0.05);
    }
  }

  .kidsListItemNumber {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 15px;
  }

  .kidsListItemEmoji {
    font-size: 1.5rem;
    margin-right: 15px;
  }

  .kidsListItemText {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
  }

  /* Curriculum Section */
  .kidsEnglishCurriculumSection {
    margin-top: 50px;
  }

  .kidsEnglishCurriculumTitle {
    font-size: 2.5rem;
    font-weight: 800;
    color: #2d3748;
    text-align: center;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }

  .kidsCurriculumIcon {
    font-size: 2.2rem;
    animation: kidsEnglishSpin 2s ease-in-out infinite;
  }

  @keyframes kidsEnglishSpin {
    0%,
    100% {
      transform: rotate(0deg) scale(1);
    }
    50% {
      transform: rotate(10deg) scale(1.1);
    }
  }

  .kidsEnglishStrandsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 30px;
  }

  .kidsEnglishStrandCard {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: kidsStrandCardAppear 0.6s ease forwards;
  }

  @keyframes kidsStrandCardAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsStrandTitle {
    font-size: 1.6rem;
    font-weight: 700;
    color: #5a67d8;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .kidsStrandTitle:hover,
  .kidsStrandTitleHovered {
    color: #667eea;
    transform: translateX(5px);
  }

  .kidsStrandIcon {
    font-size: 1.4rem;
  }

  .kidsStrandContent {
    margin-top: 20px;
  }

  .kidsSubstrandSection {
    margin-bottom: 25px;
  }

  .kidsSubstrandTitle {
    font-size: 1.2rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 3px solid #667eea;
  }

  .kidsSubstrandItems {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .kidsSubstrandItem {
    padding: 12px 20px;
    background: #f7fafc;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .kidsSubstrandItem:hover,
  .kidsSubstrandHovered {
    background: linear-gradient(
      135deg,
      rgba(102, 126, 234, 0.1) 0%,
      rgba(118, 75, 162, 0.1) 100%
    );
    transform: translateX(5px);
  }

  .kidsSubstrandSelected {
    animation: kidsSubstrandSelect 0.4s ease;
  }

  @keyframes kidsSubstrandSelect {
    0% {
      background: rgba(102, 126, 234, 0.3);
    }
    100% {
      background: rgba(102, 126, 234, 0.1);
    }
  }

  .kidsSubstrandCode {
    font-weight: 700;
    color: #667eea;
    font-size: 0.9rem;
  }

  .kidsSubstrandText {
    color: #2d3748;
    font-size: 1rem;
    flex-grow: 1;
  }

  /* Footer */
  .kidsEnglishFooter {
    text-align: center;
    padding: 40px 20px;
    position: relative;
    z-index: 10;
  }

  .kidsEnglishEncouragement {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
  }

  .kidsRainbowText {
    background: linear-gradient(
      45deg,
      #f093fb 0%,
      #f5576c 25%,
      #feca57 50%,
      #48dbfb 75%,
      #ff6b9d 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: kidsRainbowMove 3s ease-in-out infinite;
  }

  @keyframes kidsRainbowMove {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  /* End of Kids English Topics Page Styles */

  /* Kids Science Topics Page Styles - Matching English Topics */
  .kidsScienceTopicMainDiv {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #e8f5e9 0%, #e3f2fd 100%);
    overflow: hidden;
    padding-top: 50px;
  }

  /* Floating Background Shapes */
  .kidsScienceFloatingShapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .kidsScienceFloatingShape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: kidsScienceFloat 20s ease-in-out infinite;
  }

  .kidsScienceFloatingShape1 {
    width: 200px;
    height: 200px;
    background: #4caf50;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }

  .kidsScienceFloatingShape2 {
    width: 150px;
    height: 150px;
    background: #2196f3;
    top: 60%;
    right: 10%;
    animation-delay: 5s;
  }

  .kidsScienceFloatingShape3 {
    width: 100px;
    height: 100px;
    background: #ff9800;
    bottom: 20%;
    left: 20%;
    animation-delay: 10s;
  }

  .kidsScienceFloatingShape4 {
    width: 120px;
    height: 120px;
    background: #9c27b0;
    top: 30%;
    right: 30%;
    animation-delay: 15s;
  }

  @keyframes kidsScienceFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(30px, -30px) rotate(90deg);
    }
    50% {
      transform: translate(-20px, 20px) rotate(180deg);
    }
    75% {
      transform: translate(20px, -10px) rotate(270deg);
    }
  }

  /* Header Section */
  .kidsScienceHeaderSection {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 10;
    animation: kidsScienceHeaderSlide 0.8s ease-out;
  }

  @keyframes kidsScienceHeaderSlide {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsScienceMainTitle {
    font-size: 48px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }

  .kidsScienceTitleIcon {
    font-size: 50px;
    animation: kidsScienceBounce 2s ease-in-out infinite;
  }

  @keyframes kidsScienceBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .kidsScienceTitleWord {
    background: linear-gradient(45deg, #4caf50, #2196f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: 2px;
  }

  .kidsScienceTitleWord1 {
    animation: kidsScienceTitlePop 0.8s ease-out 0.2s both;
  }

  .kidsScienceTitleWord2 {
    animation: kidsScienceTitlePop 0.8s ease-out 0.4s both;
  }

  @keyframes kidsScienceTitlePop {
    from {
      transform: scale(0);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .kidsScienceSparkle {
    font-size: 30px;
    animation: kidsScienceSparkle 1.5s ease-in-out infinite;
  }

  @keyframes kidsScienceSparkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.2) rotate(180deg);
      opacity: 1;
    }
  }

  .kidsScienceGradeInfo {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  .kidsScienceGradeLabel {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    animation: kidsScienceGradePulse 2s ease-in-out infinite;
  }

  @keyframes kidsScienceGradePulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
    }
  }

  .kidsScienceLocation {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 18px;
  }

  .kidsLocationIcon {
    font-size: 20px;
  }

  /* View Toggle */
  .kidsScienceViewToggle {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
  }

  .kidsViewBtn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsViewBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .kidsViewActive {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    border-color: transparent;
  }

  .kidsViewIcon svg {
    width: 20px;
    height: 20px;
  }

  .kidsViewText {
    font-weight: 600;
  }

  /* Topics Container */
  .kidsScienceTopicsContainer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .kidsTopicsVisible {
    opacity: 1;
  }

  /* Category Section */
  .kidsScienceCategorySection {
    margin-bottom: 40px;
    opacity: 0;
    animation: kidsScienceFadeInUp 0.6s ease-out forwards;
  }

  .kidsScienceCategorySection:nth-child(1) {
    animation-delay: 0.1s;
  }
  .kidsScienceCategorySection:nth-child(2) {
    animation-delay: 0.2s;
  }
  .kidsScienceCategorySection:nth-child(3) {
    animation-delay: 0.3s;
  }
  .kidsScienceCategorySection:nth-child(4) {
    animation-delay: 0.4s;
  }
  .kidsScienceCategorySection:nth-child(5) {
    animation-delay: 0.5s;
  }

  @keyframes kidsScienceFadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsScienceCategoryTitle {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .kidsCategoryIcon {
    font-size: 32px;
  }

  /* Topics Grid */
  .kidsScienceTopicsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }

  .kidsScienceTopicCard {
    background: white;
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: kidsScienceCardFadeIn 0.5s ease-out forwards;
  }

  @keyframes kidsScienceCardFadeIn {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kidsTopicHovered {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .kidsTopicSelected {
    animation: kidsScienceTopicSelect 0.5s ease-out;
  }

  @keyframes kidsScienceTopicSelect {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
      opacity: 0.7;
    }
  }

  .kidsTopicCardContent {
    position: relative;
    z-index: 2;
  }

  .kidsTopicEmoji {
    font-size: 50px;
    margin-bottom: 15px;
    display: block;
    animation: kidsScienceEmojiFloat 3s ease-in-out infinite;
  }

  @keyframes kidsScienceEmojiFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  .kidsTopicName {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
  }

  .kidsTopicCardGlow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(76, 175, 80, 0.3) 0%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .kidsScienceTopicCard:hover .kidsTopicCardGlow {
    opacity: 1;
  }

  /* List View */
  .kidsScienceListSection {
    margin-bottom: 20px;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    opacity: 0;
    animation: kidsScienceFadeInLeft 0.5s ease-out forwards;
  }

  .kidsScienceListSection:nth-child(1) {
    animation-delay: 0.1s;
  }
  .kidsScienceListSection:nth-child(2) {
    animation-delay: 0.2s;
  }
  .kidsScienceListSection:nth-child(3) {
    animation-delay: 0.3s;
  }
  .kidsScienceListSection:nth-child(4) {
    animation-delay: 0.4s;
  }
  .kidsScienceListSection:nth-child(5) {
    animation-delay: 0.5s;
  }

  @keyframes kidsScienceFadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .kidsScienceListHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsScienceListHeader:hover {
    background: linear-gradient(135deg, #45a049 0%, #388e3c 100%);
  }

  .kidsListExpanded {
    background: linear-gradient(135deg, #45a049 0%, #388e3c 100%);
  }

  .kidsListHeaderIcon {
    font-size: 24px;
  }

  .kidsListHeaderText {
    font-size: 20px;
    font-weight: 600;
    flex-grow: 1;
    text-align: left;
    margin-left: 15px;
  }

  .kidsListHeaderArrow {
    font-size: 18px;
    transition: transform 0.3s ease;
  }

  .kidsScienceListContent {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
  }

  .kidsListContentExpanded {
    max-height: 1000px;
  }

  .kidsScienceListItem {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .kidsScienceListItem:last-child {
    border-bottom: none;
  }

  .kidsListItemHovered {
    background: #f8f9fa;
    padding-left: 30px;
  }

  .kidsListItemSelected {
    animation: kidsScienceListSelect 0.5s ease-out;
  }

  @keyframes kidsScienceListSelect {
    0% {
      background: white;
    }
    50% {
      background: #e8f5e9;
    }
    100% {
      background: white;
    }
  }

  .kidsListItemNumber {
    width: 30px;
    height: 30px;
    background: #4caf50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .kidsListItemEmoji {
    font-size: 24px;
    margin-right: 15px;
  }

  .kidsListItemText {
    font-size: 16px;
    color: #2c3e50;
    font-weight: 500;
  }

  /* Curriculum Section */
  .kidsScienceCurriculumSection {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px dashed #e0e0e0;
  }

  .kidsScienceCurriculumTitle {
    font-size: 32px;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .kidsCurriculumIcon {
    font-size: 36px;
  }

  .kidsScienceStrandsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
  }

  .kidsScienceStrandCard {
    background: white;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: kidsScienceStrandFadeIn 0.5s ease-out forwards;
  }

  @keyframes kidsScienceStrandFadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsStrandTitle {
    font-size: 22px;
    color: #2c3e50;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 10px;
  }

  .kidsStrandTitleHovered {
    background: #f0f9ff;
    transform: translateX(5px);
  }

  .kidsStrandIcon {
    font-size: 26px;
  }

  .kidsStrandContent {
    margin-top: 15px;
  }

  .kidsSubstrandSection {
    margin-bottom: 20px;
  }

  .kidsSubstrandTitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
    padding-left: 35px;
    font-weight: 600;
  }

  .kidsSubstrandItems {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .kidsSubstrandItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 35px;
  }

  .kidsSubstrandHovered {
    background: #e8f5e9;
    transform: translateX(5px);
  }

  .kidsSubstrandSelected {
    animation: kidsScienceSubstrandSelect 0.5s ease-out;
  }

  @keyframes kidsScienceSubstrandSelect {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }

  .kidsSubstrandCode {
    font-size: 12px;
    color: #999;
    font-weight: 600;
  }

  .kidsSubstrandText {
    font-size: 14px;
    color: #2c3e50;
  }

  /* Footer */
  .kidsScienceFooter {
    margin-top: 60px;
    text-align: center;
    padding-bottom: 40px;
  }

  .kidsScienceEncouragement {
    font-size: 24px;
    margin: 0;
  }

  .kidsRainbowText {
    background: linear-gradient(
      45deg,
      #f44336,
      #ff9800,
      #ffeb3b,
      #4caf50,
      #2196f3,
      #9c27b0
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    animation: kidsRainbowAnimation 3s ease-in-out infinite;
  }

  @keyframes kidsRainbowAnimation {
    0%,
    100% {
      filter: hue-rotate(0deg);
    }
    50% {
      filter: hue-rotate(30deg);
    }
  }

  /* End of Kids Science Topics Page Styles */

  /* Kids Math Topics Page Styles - Matching English and Science Topics */
  .kidsMathTopicMainDiv {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 100%);
    overflow: hidden;
    padding-top: 50px;
  }

  /* Floating Background Shapes */
  .kidsMathFloatingShapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .kidsMathFloatingShape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    animation: kidsMathFloat 20s ease-in-out infinite;
  }

  .kidsMathFloatingShape1 {
    width: 200px;
    height: 200px;
    background: #e91e63;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }

  .kidsMathFloatingShape2 {
    width: 150px;
    height: 150px;
    background: #3f51b5;
    top: 60%;
    right: 10%;
    animation-delay: 5s;
  }

  .kidsMathFloatingShape3 {
    width: 100px;
    height: 100px;
    background: #ff5722;
    bottom: 20%;
    left: 20%;
    animation-delay: 10s;
  }

  .kidsMathFloatingShape4 {
    width: 120px;
    height: 120px;
    background: #673ab7;
    top: 30%;
    right: 30%;
    animation-delay: 15s;
  }

  @keyframes kidsMathFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(30px, -30px) rotate(90deg);
    }
    50% {
      transform: translate(-20px, 20px) rotate(180deg);
    }
    75% {
      transform: translate(20px, -10px) rotate(270deg);
    }
  }

  /* Header Section */
  .kidsMathHeaderSection {
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    z-index: 10;
    animation: kidsMathHeaderSlide 0.8s ease-out;
  }

  @keyframes kidsMathHeaderSlide {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsMathMainTitle {
    font-size: 48px;
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }

  .kidsMathTitleIcon {
    font-size: 50px;
    animation: kidsMathBounce 2s ease-in-out infinite;
  }

  @keyframes kidsMathBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .kidsMathTitleWord {
    background: linear-gradient(45deg, #e91e63, #3f51b5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: 2px;
  }

  .kidsMathTitleWord1 {
    animation: kidsMathTitlePop 0.8s ease-out 0.2s both;
  }

  .kidsMathTitleWord2 {
    animation: kidsMathTitlePop 0.8s ease-out 0.4s both;
  }

  @keyframes kidsMathTitlePop {
    from {
      transform: scale(0);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .kidsMathSparkle {
    font-size: 30px;
    animation: kidsMathSparkle 1.5s ease-in-out infinite;
  }

  @keyframes kidsMathSparkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.2) rotate(180deg);
      opacity: 1;
    }
  }

  .kidsMathGradeInfo {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  .kidsMathGradeLabel {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    color: white;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 20px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
    animation: kidsMathGradePulse 2s ease-in-out infinite;
  }

  @keyframes kidsMathGradePulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(233, 30, 99, 0.4);
    }
  }

  .kidsMathLocation {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 18px;
  }

  /* View Toggle */
  .kidsMathViewToggle {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
  }

  /* Topics Container */
  .kidsMathTopicsContainer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .kidsTopicsVisible {
    opacity: 1;
  }

  /* Category Section */
  .kidsMathCategorySection {
    margin-bottom: 40px;
    opacity: 0;
    animation: kidsMathFadeInUp 0.6s ease-out forwards;
  }

  .kidsMathCategorySection:nth-child(1) {
    animation-delay: 0.1s;
  }
  .kidsMathCategorySection:nth-child(2) {
    animation-delay: 0.2s;
  }
  .kidsMathCategorySection:nth-child(3) {
    animation-delay: 0.3s;
  }
  .kidsMathCategorySection:nth-child(4) {
    animation-delay: 0.4s;
  }

  @keyframes kidsMathFadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsMathCategoryTitle {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Topics Grid */
  .kidsMathTopicsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }

  .kidsMathTopicCard {
    background: white;
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: kidsMathCardFadeIn 0.5s ease-out forwards;
  }

  @keyframes kidsMathCardFadeIn {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kidsTopicHovered {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .kidsTopicSelected {
    animation: kidsMathTopicSelect 0.5s ease-out;
  }

  @keyframes kidsMathTopicSelect {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
      opacity: 0.7;
    }
  }

  .kidsTopicCardContent {
    position: relative;
    z-index: 2;
  }

  .kidsTopicEmoji {
    font-size: 50px;
    margin-bottom: 15px;
    display: block;
    animation: kidsMathEmojiFloat 3s ease-in-out infinite;
  }

  @keyframes kidsMathEmojiFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  .kidsTopicName {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin: 0;
  }

  .kidsTopicCardGlow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(233, 30, 99, 0.3) 0%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .kidsMathTopicCard:hover .kidsTopicCardGlow {
    opacity: 1;
  }

  /* List View */
  .kidsMathListSection {
    margin-bottom: 20px;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    opacity: 0;
    animation: kidsMathFadeInLeft 0.5s ease-out forwards;
  }

  .kidsMathListSection:nth-child(1) {
    animation-delay: 0.1s;
  }
  .kidsMathListSection:nth-child(2) {
    animation-delay: 0.2s;
  }
  .kidsMathListSection:nth-child(3) {
    animation-delay: 0.3s;
  }
  .kidsMathListSection:nth-child(4) {
    animation-delay: 0.4s;
  }

  @keyframes kidsMathFadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-20px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .kidsMathListHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsMathListHeader:hover {
    background: linear-gradient(135deg, #c2185b 0%, #ad1457 100%);
  }

  .kidsListExpanded {
    background: linear-gradient(135deg, #c2185b 0%, #ad1457 100%);
  }

  .kidsListHeaderIcon {
    font-size: 24px;
  }

  .kidsListHeaderText {
    font-size: 20px;
    font-weight: 600;
    flex-grow: 1;
    text-align: left;
    margin-left: 15px;
  }

  .kidsListHeaderArrow {
    font-size: 18px;
    transition: transform 0.3s ease;
  }

  .kidsMathListContent {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
  }

  .kidsListContentExpanded {
    max-height: 1000px;
  }

  .kidsMathListItem {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .kidsMathListItem:last-child {
    border-bottom: none;
  }

  .kidsListItemHovered {
    background: #f8f9fa;
    padding-left: 30px;
  }

  .kidsListItemSelected {
    animation: kidsMathListSelect 0.5s ease-out;
  }

  @keyframes kidsMathListSelect {
    0% {
      background: white;
    }
    50% {
      background: #fce4ec;
    }
    100% {
      background: white;
    }
  }

  .kidsListItemNumber {
    width: 30px;
    height: 30px;
    background: #e91e63;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 15px;
    flex-shrink: 0;
  }

  .kidsListItemEmoji {
    font-size: 24px;
    margin-right: 15px;
  }

  .kidsListItemText {
    font-size: 16px;
    color: #2c3e50;
    font-weight: 500;
  }

  /* Curriculum Section */
  .kidsMathCurriculumSection {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px dashed #e0e0e0;
  }

  .kidsMathCurriculumTitle {
    font-size: 32px;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .kidsCurriculumIcon {
    font-size: 36px;
  }

  .kidsMathStrandsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 25px;
  }

  .kidsMathStrandCard {
    background: white;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: kidsMathStrandFadeIn 0.5s ease-out forwards;
  }

  @keyframes kidsMathStrandFadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsStrandTitle {
    font-size: 22px;
    color: #2c3e50;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 10px;
  }

  .kidsStrandTitleHovered {
    background: #fce4ec;
    transform: translateX(5px);
  }

  .kidsStrandIcon {
    font-size: 26px;
  }

  .kidsStrandContent {
    margin-top: 15px;
  }

  .kidsSubstrandSection {
    margin-bottom: 20px;
  }

  .kidsSubstrandTitle {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
    padding-left: 35px;
    font-weight: 600;
  }

  .kidsSubstrandItems {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .kidsSubstrandItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: #f8f9fa;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 35px;
  }

  .kidsSubstrandHovered {
    background: #fce4ec;
    transform: translateX(5px);
  }

  .kidsSubstrandSelected {
    animation: kidsMathSubstrandSelect 0.5s ease-out;
  }

  @keyframes kidsMathSubstrandSelect {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }

  .kidsSubstrandCode {
    font-size: 12px;
    color: #999;
    font-weight: 600;
  }

  .kidsSubstrandText {
    font-size: 14px;
    color: #2c3e50;
  }

  /* Footer */
  .kidsMathFooter {
    margin-top: 60px;
    text-align: center;
    padding-bottom: 40px;
  }

  .kidsMathEncouragement {
    font-size: 24px;
    margin: 0;
  }

  .kidsRainbowText {
    background: linear-gradient(
      45deg,
      #f44336,
      #ff9800,
      #ffeb3b,
      #4caf50,
      #2196f3,
      #9c27b0
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    animation: kidsRainbowAnimation 3s ease-in-out infinite;
  }

  @keyframes kidsRainbowAnimation {
    0%,
    100% {
      filter: hue-rotate(0deg);
    }
    50% {
      filter: hue-rotate(30deg);
    }
  }

  /* End of Kids Math Topics Page Styles */

  /* Kids Dashboard Styles - Landscape */
  .kidsDashboardContainer {
    display: flex;
    min-height: 100vh;
    background: linear-gradient(135deg, #fff5f5 0%, #f0f9ff 50%, #f0fdf4 100%);
    padding-top: 60px;
    position: relative;
    overflow: hidden;
  }

  /* Background decorations */
  .kidsDashboardContainer::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(
      circle,
      rgba(255, 184, 56, 0.1) 0%,
      transparent 70%
    );
    border-radius: 50%;
    animation: floatBubble 20s ease-in-out infinite;
  }

  .kidsDashboardContainer::after {
    content: "";
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(
      circle,
      rgba(60, 179, 246, 0.1) 0%,
      transparent 70%
    );
    border-radius: 50%;
    animation: floatBubble 25s ease-in-out infinite reverse;
  }

  @keyframes floatBubble {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -30px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
  }

  /* Mobile Menu Toggle */
  .kidsMobileMenuToggle {
    position: fixed;
    top: 70px;
    left: 20px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    background: white;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .kidsMenuIcon {
    font-size: 24px;
  }

  /* Mobile Overlay */
  .kidsMobileOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    display: none;
  }

  .kidsMobileOverlay.show {
    display: block;
  }

  /* Hide mobile menu toggle in landscape */

  /* Navigation */
  .kidsDashboardNav {
    flex: 1;
    padding: 20px 0;
    position: relative;
    z-index: 1;
  }

  .kidsNavItem {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

  .kidsNavItem:hover {
    background: rgba(255, 255, 255, 0.1);
    padding-left: 32px;
  }

  .kidsNavIcon {
    font-size: 24px;
    min-width: 24px;
  }

  .kidsNavLabel {
    white-space: nowrap;
  }

  .kidsNavActive {
    background: rgba(255, 255, 255, 0.2) !important;
    border-left: 4px solid white;
    font-weight: 700;
  }

  .kidsSidebarFooter {
    padding: 20px;
    position: relative;
    z-index: 1;
  }

  .kidsLogoutButton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsLogoutButton:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
  }

  /* Main Content Area */
  .kidsDashboardMain {
    flex: 1;
    padding: 30px;
    overflow-y: auto;
    position: relative;
  }

  .kidsDashboardContent {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* Home Section */
  .kidsDashboardHome {
    animation: fadeInUp 0.5s ease;
  }

  .kidsWelcomeSection {
    background: white;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
  }

  .kidsWelcomeSection::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(
      circle,
      rgba(255, 184, 56, 0.2) 0%,
      transparent 70%
    );
    border-radius: 50%;
  }

  .kidsWelcomeContent {
    flex: 1;
  }

  .kidsWelcomeTitle {
    font-size: 32px;
    margin: 0 0 8px;
    color: #1e293b;
    font-weight: 800;
  }

  .kidsWaveEmoji {
    display: inline-block;
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
    margin-left: 8px;
  }

  @keyframes wave {
    0%,
    100% {
      transform: rotate(0deg);
    }
    20%,
    60% {
      transform: rotate(-25deg);
    }
    40%,
    80% {
      transform: rotate(10deg);
    }
  }

  .kidsWelcomeMessage {
    font-size: 18px;
    color: #64748b;
    margin: 0;
  }

  .kidsAvatarDisplay {
    position: relative;
    z-index: 1;
  }

  .kidsMainAvatar {
    font-size: 80px;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.1));
  }

  .kidsLevelBadge {
    position: absolute;
    bottom: -10px;
    right: -10px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
  }

  /* Stats Overview */
  .kidsStatsOverview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 30px;
  }

  .kidsStatCard {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .kidsStatCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }

  .kidsStatIcon {
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 20px;
  }

  .kidsStatStars .kidsStatIcon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  }

  .kidsStatBadges .kidsStatIcon {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  }

  .kidsStatStreak .kidsStatIcon {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  }

  .kidsStatContent h3 {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    color: #1e293b;
  }

  .kidsStatContent p {
    margin: 4px 0 0;
    font-size: 16px;
    color: #64748b;
    font-weight: 500;
  }

  /* Subject Cards */
  .kidsSubjectsSection {
    margin-bottom: 30px;
  }

  .kidsSectionTitle {
    font-size: 28px;
    margin: 0 0 24px;
    color: #1e293b;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .kidsTitleIcon {
    font-size: 32px;
  }

  .kidsSubjectCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .kidsSubjectCard {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }

  .kidsSubjectCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }

  .kidsSubjectHeader {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }

  .kidsSubjectEmoji {
    font-size: 40px;
  }

  .kidsSubjectHeader h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    flex: 1;
  }

  .kidsSubjectLevel {
    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 16px;
  }

  .kidsProgressBar {
    height: 12px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
  }

  .kidsProgressFill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 6px;
    transition: width 0.5s ease;
    position: relative;
  }

  .kidsProgressText {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: white;
    font-weight: 700;
  }

  .kidsLastPlayed {
    font-size: 14px;
    color: #94a3b8;
    margin: 0 0 16px;
  }

  .kidsPlayButton {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .kidsPlayButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
  }

  .kidsPlayIcon {
    font-size: 18px;
  }

  /* Weekly Progress */
  .kidsWeeklyProgress {
    background: white;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
  }

  .kidsWeekDays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
  }

  .kidsWeekDay {
    text-align: center;
    padding: 16px 8px;
    background: #f8fafc;
    border-radius: 16px;
    transition: all 0.3s ease;
  }

  .kidsWeekDay.completed {
    background: linear-gradient(135deg, #c7f9cc 0%, #a8e6cf 100%);
  }

  .kidsDayName {
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 8px;
  }

  .kidsWeekDay.completed .kidsDayName {
    color: #059669;
  }

  .kidsDayIcon {
    font-size: 32px;
    margin-bottom: 8px;
  }

  .kidsDayStars {
    font-size: 12px;
    letter-spacing: 2px;
  }

  /* Recent Achievements */
  .kidsRecentAchievements {
    background: white;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .kidsAchievementsList {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .kidsAchievementItem {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
  }

  .kidsAchievementItem::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 70%
    );
    animation: shimmer 3s ease-in-out infinite;
  }

  @keyframes shimmer {
    0%,
    100% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
      transform: translate(-30%, -30%) rotate(180deg);
    }
  }

  .kidsAchievementIcon {
    font-size: 48px;
    position: relative;
    z-index: 1;
  }

  .kidsAchievementDetails {
    flex: 1;
    position: relative;
    z-index: 1;
  }

  .kidsAchievementDetails h4 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #92400e;
  }

  .kidsAchievementDetails p {
    margin: 0;
    font-size: 14px;
    color: #b45309;
  }

  .kidsNewBadge {
    background: #ef4444;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    animation: pulse 2s ease-in-out infinite;
  }

  @keyframes pulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  /* Profile Section */
  .kidsDashboardProfile {
    animation: fadeInUp 0.5s ease;
  }

  .kidsPageTitle {
    font-size: 32px;
    margin: 0 0 30px;
    color: #1e293b;
    font-weight: 800;
  }

  .kidsAvatarSection {
    background: white;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
  }

  .kidsAvatarSection h3 {
    font-size: 24px;
    margin: 0 0 20px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsAvatarGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
  }

  .kidsAvatarOption {
    aspect-ratio: 1;
    background: #f1f5f9;
    border: 3px solid transparent;
    border-radius: 20px;
    font-size: 48px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kidsAvatarOption:hover {
    transform: scale(1.1);
    background: #e2e8f0;
  }

  .kidsAvatarOption.selected {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    border-color: #7c3aed;
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
  }

  .kidsProfileInfo {
    background: white;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .kidsProfileCard {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
  }

  .kidsSelectedAvatar {
    font-size: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 30px;
    box-shadow: 0 12px 24px rgba(251, 191, 36, 0.2);
  }

  .kidsProfileDetails h3 {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
  }

  .kidsProfileEmail {
    font-size: 16px;
    color: #64748b;
    margin: 0 0 20px;
  }

  .kidsProfileStats {
    display: flex;
    gap: 30px;
  }

  .kidsProfileStat {
    text-align: center;
  }

  .kidsStatLabel {
    display: block;
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 4px;
  }

  .kidsStatValue {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
  }

  .kidsExperienceSection {
    padding-top: 30px;
    border-top: 1px solid #e2e8f0;
  }

  .kidsExperienceSection h4 {
    font-size: 20px;
    margin: 0 0 16px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsXPBar {
    height: 24px;
    background: #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
  }

  .kidsXPFill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    border-radius: 12px;
    transition: width 0.5s ease;
    position: relative;
  }

  .kidsXPFill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%
    );
    animation: slideShine 3s ease-in-out infinite;
  }

  @keyframes slideShine {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  .kidsXPText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsXPMessage {
    font-size: 16px;
    color: #64748b;
    margin: 0;
  }

  /* Floating Action Buttons */
  .kidsFloatingActions {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 100;
  }

  .kidsFloatingBtn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  .kidsFloatingBtn:hover {
    transform: scale(1.1);
  }

  .kidsHelpBtn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  }

  .kidsQuickPlayBtn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }

  /* Animations */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Progress Section */
  .kidsDashboardProgress {
    animation: fadeInUp 0.5s ease;
  }

  .kidsProgressOverview {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 30px;
  }

  .kidsProgressCard {
    background: white;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    text-align: center;
  }

  .kidsProgressCard h3 {
    font-size: 20px;
    margin: 0 0 20px;
    color: #64748b;
    font-weight: 600;
  }

  .kidsStarDisplay,
  .kidsTopicDisplay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .kidsBigNumber {
    font-size: 56px;
    font-weight: 800;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .kidsStarIcon,
  .kidsCheckIcon {
    font-size: 48px;
  }

  .kidsSubjectProgressDetails {
    background: white;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
  }

  .kidsSubjectProgressDetails h3 {
    font-size: 24px;
    margin: 0 0 24px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsSubjectProgressItem {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 16px;
  }

  .kidsSubjectInfo {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 200px;
  }

  .kidsSubjectIcon {
    font-size: 32px;
  }

  .kidsSubjectName {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
  }

  .kidsSubjectLevel {
    background: #e2e8f0;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
  }

  .kidsFullProgressBar {
    flex: 1;
    height: 16px;
    background: #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
  }

  .kidsFullProgressFill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 8px;
    transition: width 0.5s ease;
  }

  .kidsProgressPercent {
    min-width: 50px;
    text-align: right;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsLearningPath {
    background: white;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .kidsLearningPath h3 {
    font-size: 24px;
    margin: 0 0 30px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsPathSteps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }

  .kidsPathStep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
  }

  .kidsStepIcon {
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: #e2e8f0;
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  .kidsPathStep.completed .kidsStepIcon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }

  .kidsPathStep.current .kidsStepIcon {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    animation: pulseGlow 2s ease-in-out infinite;
  }

  @keyframes pulseGlow {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
      box-shadow: 0 0 0 20px rgba(245, 158, 11, 0);
    }
  }

  .kidsPathStep p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
  }

  .kidsPathStep.completed p {
    color: #10b981;
  }

  .kidsPathStep.current p {
    color: #f59e0b;
  }

  .kidsPathLine {
    flex: 1;
    height: 4px;
    background: #e2e8f0;
    margin: 0 -20px;
    position: relative;
    z-index: 1;
  }

  .kidsPathLine.completed {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
  }

  /* Achievements Section */
  .kidsDashboardAchievements {
    animation: fadeInUp 0.5s ease;
  }

  .kidsAchievementCategories {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    flex-wrap: wrap;
  }

  .kidsCategoryTab {
    padding: 12px 24px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsCategoryTab:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
  }

  .kidsCategoryTab.active {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    border-color: transparent;
    color: white;
  }

  .kidsAchievementGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-bottom: 30px;
  }

  .kidsBadgeItem {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .kidsBadgeItem:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }

  .kidsBadgeIcon {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
  }

  .kidsBadgeIcon.locked {
    filter: grayscale(1);
    opacity: 0.5;
  }

  .kidsBadgeItem h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsBadgeItem p {
    margin: 0 0 16px;
    font-size: 14px;
    color: #64748b;
  }

  .kidsBadgeStatus {
    display: inline-block;
    padding: 6px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
  }

  .kidsBadgeProgress {
    display: inline-block;
    padding: 6px 16px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
  }

  .kidsBadgeItem.earned::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(16, 185, 129, 0.1) 0%,
      transparent 70%
    );
    animation: rotateBg 20s linear infinite;
  }

  .kidsSpecialAchievements {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.2);
  }

  .kidsSpecialAchievements h3 {
    font-size: 24px;
    margin: 0 0 24px;
    color: #92400e;
    font-weight: 700;
  }

  .kidsSpecialBadges {
    display: flex;
    gap: 24px;
  }

  .kidsSpecialBadge {
    flex: 1;
    background: white;
    border-radius: 20px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .kidsRainbowBadge,
  .kidsGoldBadge {
    font-size: 72px;
    display: block;
    margin-bottom: 16px;
  }

  .kidsSpecialBadge p {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
  }

  /* Friends Section */
  .kidsDashboardFriends {
    animation: fadeInUp 0.5s ease;
  }

  .kidsFriendsList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 30px;
  }

  .kidsFriendCard {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
  }

  .kidsFriendCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }

  .kidsFriendAvatar {
    font-size: 48px;
  }

  .kidsFriendInfo {
    flex: 1;
  }

  .kidsFriendInfo h4 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsFriendInfo p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
  }

  .kidsOnlineStatus {
    font-size: 14px;
    font-weight: 600;
  }

  .kidsOnlineStatus.online {
    color: #10b981;
  }

  .kidsOnlineStatus.offline {
    color: #94a3b8;
  }

  .kidsLeaderboard {
    background: white;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  }

  .kidsLeaderboard h3 {
    font-size: 24px;
    margin: 0 0 24px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsLeaderboardList {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .kidsLeaderboardItem {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 16px;
    transition: all 0.3s ease;
  }

  .kidsLeaderboardItem.current {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
  }

  .kidsRank {
    font-size: 32px;
    min-width: 40px;
  }

  .kidsLeaderAvatar {
    font-size: 40px;
  }

  .kidsLeaderName {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsLeaderScore {
    font-size: 18px;
    font-weight: 700;
    color: #f59e0b;
  }

  /* Rewards Section */
  .kidsDashboardRewards {
    animation: fadeInUp 0.5s ease;
    position: relative;
  }

  .kidsPointsBalance {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
    text-align: center;
    margin-bottom: 30px;
  }

  .kidsPointsBalance h3 {
    font-size: 24px;
    margin: 0 0 16px;
    color: white;
    font-weight: 700;
  }

  .kidsPointsDisplay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }

  .kidsPointsNumber {
    font-size: 64px;
    font-weight: 800;
    color: white;
  }

  .kidsPointsIcon {
    font-size: 56px;
  }

  .kidsRewardsGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  .kidsRewardItem {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s ease;
  }

  .kidsRewardItem:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  }

  .kidsRewardIcon {
    font-size: 64px;
    display: block;
    margin-bottom: 16px;
  }

  .kidsRewardItem h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsRewardItem p {
    margin: 0 0 16px;
    font-size: 14px;
    color: #64748b;
  }

  .kidsRewardButton {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsRewardButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
  }

  .kidsCelebration {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 30px;
    padding: 40px 60px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 1000;
    animation: celebrationBounce 0.5s ease;
  }

  @keyframes celebrationBounce {
    0% {
      transform: translate(-50%, -50%) scale(0);
    }
    50% {
      transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  .kidsCelebrationEmoji {
    font-size: 80px;
    display: inline-block;
    margin: 0 10px;
    animation: spin 1s ease-in-out;
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .kidsCelebration h3 {
    margin: 20px 0 0;
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(
      45deg,
      #f44336,
      #ff9800,
      #ffeb3b,
      #4caf50,
      #2196f3,
      #9c27b0
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Parent Zone */
  .kidsDashboardParents {
    animation: fadeInUp 0.5s ease;
  }

  .kidsChildrenOverview {
    background: white;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
  }

  .kidsChildrenOverview h3 {
    font-size: 24px;
    margin: 0 0 24px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsChildCard {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: #f8fafc;
    border-radius: 16px;
    margin-bottom: 16px;
  }

  .kidsChildAvatar {
    font-size: 48px;
  }

  .kidsChildInfo {
    flex: 1;
  }

  .kidsChildInfo h4 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsChildInfo p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
  }

  .kidsViewProgressBtn {
    padding: 10px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsViewProgressBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
  }

  .kidsWeeklyReport {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  }

  .kidsWeeklyReport h3 {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsReportStats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .kidsReportStat {
    text-align: center;
    padding: 20px;
    background: #f8fafc;
    border-radius: 16px;
  }

  .kidsReportStat h4 {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .kidsReportStat p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
  }

  .kidsParentSettings {
    display: flex;
    gap: 12px;
  }

  .kidsSettingButton {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsSettingButton:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
  }

  .kidsSettingButton span {
    font-size: 20px;
  }

  .kidsParentMessage {
    text-align: center;
    padding: 60px;
  }

  .kidsLockIcon {
    font-size: 64px;
    margin-bottom: 20px;
    display: block;
  }

  .kidsParentMessage h3 {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsParentMessage p {
    margin: 0;
    font-size: 16px;
    color: #64748b;
  }

  /* Kids Dashboard - Floating Action Buttons */
  .kidsFloatingActions {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 100;
  }

  .kidsFloatingBtn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .kidsHelpBtn {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
  }

  .kidsHelpBtn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
  }

  .kidsQuickPlayBtn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
  }

  .kidsQuickPlayBtn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
  }

  /* End of Kids Dashboard Styles */

  /* Kids Practice Questions Page Styles */
  .kidsPracticeContainer {
    min-height: 100vh;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
    overflow: hidden;
    margin-bottom: 0;
  }

  /* Animated Background */
  .kidsPracticeBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }

  /* Confetti Animation */
  .kidsConfettiContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
  }

  .confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ff6b6b;
    top: -10px;
    animation: confettiFall 3s ease-in-out;
  }

  .confetti0 {
    background: #ff6b6b;
    left: 10%;
    animation-delay: 0s;
  }
  .confetti1 {
    background: #4ecdc4;
    left: 30%;
    animation-delay: 0.2s;
  }
  .confetti2 {
    background: #45b7d1;
    left: 50%;
    animation-delay: 0.4s;
  }
  .confetti3 {
    background: #96ceb4;
    left: 70%;
    animation-delay: 0.6s;
  }
  .confetti4 {
    background: #feca57;
    left: 90%;
    animation-delay: 0.8s;
  }

  @keyframes confettiFall {
    0% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: translateY(100vh) rotate(720deg);
      opacity: 0;
    }
  }

  /* Header */
  .kidsPracticeHeader {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
  }

  .kidsHeaderLeft,
  .kidsHeaderRight {
    flex: 0 0 auto;
  }

  .kidsHeaderCenter {
    flex: 1;
    text-align: center;
  }

  .kidsBackButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsBackButton:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
    transform: translateX(-4px);
  }

  .kidsSubjectBadge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 50px;
    color: white;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: 8px;
  }

  .kidsSubjectIcon {
    font-size: 28px;
  }

  .kidsTopicName {
    font-size: 16px;
    color: #6b7280;
    font-weight: 500;
  }

  .kidsSettingsButton {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsSettingsButton:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    transform: rotate(90deg);
  }

  /* Stats Bar */
  .kidsStatsBar {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 0px;
    background: white;
    margin: 0 40px 24px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 10;
  }

  .kidsStatItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .kidsStatIcon {
    font-size: 32px;
  }

  .kidsStatValue {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsStatLabel {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
  }

  /* Progress Section */
  .kidsProgressSection {
    margin: 0 40px 24px;
    position: relative;
    z-index: 10;
  }

  .kidsProgressBar {
    height: 30px;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  .kidsProgressFill {
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b 0%, #ff8787 100%);
    transition: width 0.5s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
  }

  .kidsProgressStars {
    display: flex;
    gap: 2px;
    font-size: 16px;
  }

  .kidsProgressText {
    text-align: center;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
  }

  /* Main Content */
  .kidsPracticeMain {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 10;
  }

  /* Character Section */
  .kidsCharacterSection {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
  }

  .kidsCharacterBubble {
    display: flex;
    align-items: center;
    gap: 16px;
    animation: kidsBounce 2s ease-in-out infinite;
  }

  @keyframes kidsBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .kidsCharacterEmoji {
    font-size: 64px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  }

  .kidsCharacterSpeech {
    background: white;
    padding: 12px 20px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .kidsCharacterSpeech::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid white;
  }

  .kidsCharacterSpeech p {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
  }

  /* Question Section */
  .kidsQuestionSection {
    margin-bottom: 32px;
  }

  .kidsQuestionCard {
    background: white;
    height: 40vh;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow-y: auto;/*** may have to fix this later ***/
  }

  .kidsQuestionHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .kidsQuestionNumber {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
  }

  .kidsQuestionLabel {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
  }

  .kidsQuestionValue {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
  }

  .kidsHintButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fef3c7;
    border: 2px solid #fde68a;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #d97706;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsHintButton:hover:not(:disabled) {
    background: #fde68a;
    transform: scale(1.05);
  }

  .kidsHintButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Hint Box */
  .kidsHintBox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fef3c7;
    border: 2px solid #fde68a;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: slideDown 0.3s ease;
  }

  .kidsHintIcon {
    font-size: 24px;
  }

  .kidsHintBox p {
    margin: 0;
    font-size: 16px;
    color: #92400e;
  }

  /* Question Content */
  .kidsQuestionContent {
    margin-bottom: 32px;
  }

  .kidsQuestionText {
    font-size: 22px;
    line-height: 1.6;
    color: #1f2937;
    margin-bottom: 24px;
    font-weight: 500;
  }

  /* Number Input */
  .kidsAnswerInputSection {
    display: flex;
    justify-content: center;
  }

  .kidsNumberInput {
    min-width: 200px;
    padding: 16px 24px;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    background: #f9fafb;
    color: #1f2937;
    transition: all 0.3s ease;
  }

  .kidsNumberInput:focus {
    outline: none;
    border-color: #fbbf24;
    background: white;
    transform: scale(1.05);
  }

  .kidsNumberInput:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Button Options */
  .kidsButtonOptions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .kidsOptionButton {
    padding: 20px;
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    background: white;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: scale(1);
  }

  .kidsOptionButton:hover:not(:disabled) {
    border-color: #4ecdc4;
    background: #f0fdfa;
    transform: scale(1.05);
  }

  .kidsOptionButton.selected {
    border-color: #4ecdc4;
    background: #4ecdc4;
    color: white;
    animation: optionSelect 0.4s ease;
  }

  .kidsOptionButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  @keyframes optionSelect {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Submit Section */
  .kidsSubmitSection {
    display: flex;
    justify-content: center;
  }

  .kidsSubmitButton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 48px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
  }

  .kidsSubmitButton:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
  }

  .kidsSubmitButton:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .kidsSubmitIcon {
    font-size: 24px;
  }

  /* Encouragement Message */
  .kidsEncouragementMessage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px 48px;
    border-radius: 20px;
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    animation: encouragePop 0.5s ease;
  }

  @keyframes encouragePop {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }

  /* Navigation Section */
  .kidsNavigationSection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
  }

  .kidsNavButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: white;
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsNavButton:hover:not(:disabled) {
    border-color: #fbbf24;
    color: #f59e0b;
    background: #fef3c7;
  }

  .kidsNavButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .kidsQuestionDots {
    display: flex;
    gap: 8px;
  }

  .kidsQuestionDot {
    width: 48px;
    height: 48px;
    border: 3px solid #e5e7eb;
    border-radius: 50%;
    background: white;
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsQuestionDot:hover {
    border-color: #fbbf24;
    transform: scale(1.1);
  }

  .kidsQuestionDot.active {
    border-color: #fbbf24;
    background: #fbbf24;
    color: white;
    transform: scale(1.15);
  }

  .kidsQuestionDot.completed {
    border-color: #10b981;
    background: #10b981;
    color: white;
    font-size: 20px;
  }

  /* Settings Panel */
  .kidsSettingsPanel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
  }

  .kidsSettingsPanelContent {
    background: white;
    border-radius: 24px;
    padding: 32px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
  }

  .kidsSettingsPanelContent h3 {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
  }

  .kidsSettingGroup {
    margin-bottom: 24px;
  }

  .kidsSettingGroup label {
    display: block;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #4b5563;
  }

  .kidsCharacterGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
  }

  .kidsCharacterOption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsCharacterOption:hover {
    border-color: #fbbf24;
    background: #fef3c7;
  }

  .kidsCharacterOption.selected {
    border-color: #fbbf24;
    background: #fbbf24;
    color: white;
  }

  .kidsCharEmoji {
    font-size: 36px;
  }

  .kidsCharName {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }

  .kidsToggleOptions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .kidsToggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 16px;
  }

  .kidsToggle input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  .kidsSettingsActions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
  }

  .kidsActionButton {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsRestartButton {
    background: #fef3c7;
    color: #d97706;
  }

  .kidsRestartButton:hover {
    background: #fde68a;
  }

  .kidsHomeButton {
    background: #dbeafe;
    color: #2563eb;
  }

  .kidsHomeButton:hover {
    background: #bfdbfe;
  }

  .kidsCloseButton {
    background: #f3f4f6;
    color: #6b7280;
  }

  .kidsCloseButton:hover {
    background: #e5e7eb;
  }

  /* Explanation */
  .kidsExplanation {
    text-align: center;
  }

  .kidsCorrectMessage {
    font-size: 24px;
    font-weight: 700;
    color: #10b981;
    margin: 0;
  }

  .kidsIncorrectMessage {
    font-size: 18px;
    color: #6b7280;
    margin: 0 0 12px;
  }

  .kidsCorrectAnswer {
    font-size: 24px;
    font-weight: 700;
    color: #ff6b6b;
  }

  /* Animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideDown {
    from {
      transform: translateY(-10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* End of Kids Practice Questions Page Styles */

  .kidsWeeklyReport h3 {
    font-size: 24px;
    margin: 0 0 24px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsReportStats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .kidsReportStat {
    text-align: center;
    padding: 20px;
    background: #f8fafc;
    border-radius: 16px;
  }

  .kidsReportStat h4 {
    margin: 0 0 8px;
    font-size: 36px;
    font-weight: 800;
    color: #8b5cf6;
  }

  .kidsReportStat p {
    margin: 0;
    font-size: 16px;
    color: #64748b;
    font-weight: 500;
  }

  .kidsParentSettings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .kidsSettingButton {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 20px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .kidsSettingButton:hover {
    border-color: #8b5cf6;
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.2);
  }

  .kidsSettingButton span {
    font-size: 48px;
  }

  .kidsSettingButton {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
  }

  .kidsParentMessage {
    background: white;
    border-radius: 24px;
    padding: 60px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    text-align: center;
  }

  .kidsLockIcon {
    font-size: 80px;
    display: block;
    margin-bottom: 24px;
  }

  .kidsParentMessage h3 {
    font-size: 28px;
    margin: 0 0 16px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsParentMessage p {
    font-size: 18px;
    color: #64748b;
    margin: 0;
  }

  /* Responsive for smaller screens */
  @media (max-width: 1400px) {
    .kidsStatsOverview {
      grid-template-columns: repeat(3, 1fr);
    }

    .kidsSubjectCards {
      grid-template-columns: repeat(2, 1fr);
    }

    .kidsAchievementGrid {
      grid-template-columns: repeat(3, 1fr);
    }

    .kidsRewardsGrid {
      grid-template-columns: repeat(3, 1fr);
    }
  } /*** End of (max-width: 1400px) ***/

  @media (max-width: 1200px) {
    .kidsFriendsList {
      grid-template-columns: repeat(2, 1fr);
    }
  } /*** End of (max-width: 1200px) ***/

  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .kidsPracticeMainDiv {
      width: 100%;
      margin-top: 60px;
    }

    .kidsPracticeMainDivHeaderDiv {
      width: 100%;
      margin-top: 20px;
      padding: 10px 50px;
    }

    .kidsPracticeMainDivHeaderDiv > span {
      color: #122e3b;
      cursor: pointer;
      font-size: 1rem;
    }

    /* CSS styles for tablet landscape go here */

    .kidsHomeTopDiv1 {
      width: 100%;
      background: #ffffff;
      border: 1px solid #f1f1f1;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      min-height: calc(100vh - 60px);
      margin-top: 60px;
      padding: 0 0 8rem 0;
    }

    .kidsHomeTopDiv1a {
      width: 100%;
      height: 75%;
      padding-top: 1rem;
    }

    .kidsHomeTopDiv1b {
      width: 100%;
      height: 40%;
      background-color: #545353;
      border: 1px solid #ec8989;
      border-radius: 0px;
      padding-right: 5rem;
    }

    .starsHomePage6 {
      margin-top: -5%;
    }

    .starsHomePage5 {
      margin-top: -10%;
    }

    .kidsHomeTopDiv1a1 h1 {
      color: #726d6d;
      width: 100%;
      text-align: center;
      font-family: "Noto Sans Tai Tham";
      font-style: normal;
      font-weight: 700;
    }

    .ilearnSTEM {
      margin: 0 1rem;
    }

    .i,
    .t {
      color: #838131;
    }

    .s {
      color: #ffb038;
    }

    .e {
      color: #c7282d;
    }

    .learn {
      color: #3cb3f7;
    }

    .m {
      color: #9c06c1;
    }

    .fun_adaptive {
      font-size: 1.25rem;
    }

    .kidsHomeTopDiv1a2 {
      width: 100%;
      height: 100%;
    }

    .kidsHomeTopDiv1a2a {
      width: 50%;
    }

    .rabbitHomePage1 {
      width: 45%;
      position: absolute;
      left: 50px;
      margin-bottom: -100px;
    }

    .kidsHomeTopDiv1a2b {
      width: 50%;
      height: 100%;
    }

    .kidsHomeTopDiv1a2b1 {
      height: 50%;
    }

    .kidsHomeTopDiv1a2b1aGetStartedButton {
      width: 150px;
      height: 40px;
      background: #e05d5d;
      border-radius: 5px;
      border: none;
      margin-right: 1rem;
      color: #fff;
      font-size: 0.8rem;
      margin-top: 20px;
    }

    .kidsHomeTopDiv1a2b1aPreviewButton {
      width: 150px;
      height: 40px;
      background: #ffb038;
      border: 1px solid #ffb038;
      border-radius: 5px;
      margin-left: 1rem;
      color: #fff;
      font-size: 0.8rem;
      margin-top: 20px;
    }

    .kidsWhatWeOfferMainDiv {
      width: 100%;
      background-color: #b5c5cd;
      padding: 5rem 0;
    }

    .kidsWhatWeOfferMainDiv h1 {
      color: #122e3b;
      margin-bottom: 3rem;
    }

    .kidsWhatWeOfferDiv1 {
      width: 100%;
      height: 50%;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
    }

    .kidsWhatWeOfferDiv1Div1 {
      width: 50%;
      height: 100%;
    }

    .kidsWhatWeOfferMathDiv {
      width: 40%;
      padding-bottom: 40%;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

    /** red circle centered in square; circle diameter is 80% of square width **/
    .kidsWhatWeOfferMathDivCircle {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      margin: 0 auto;
      background-color: #bb1717;
      top: 25%;
    }

    .kidsWhatWeOfferMathDivCircleImage {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      margin: 0 auto;
      top: 25%;
      left: 25%;
    }

    .kidsWhatWeOfferMathDiv span,
    .kidsWhatWeOfferEnglishDiv span,
    .kidsWhatWeOfferScienceDiv span,
    .kidsWhatWeOfferEduGamesDiv span {
      /** place at bottom of parent div **/
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      color: #545353;
      font-size: 16px;
    }

    .kidsWhatWeOfferEnglishDiv {
      width: 40%;
      padding-bottom: 40%;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

    /** red circle centered in square; circle diameter is 80% of square width **/
    .kidsWhatWeOfferEnglishDivCircle {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      margin: 0 auto;
      background-color: #3aad76;
      top: 25%;
    }

    .kidsWhatWeOfferEnglishDivCircle h3 {
      position: absolute;
      padding-bottom: 50%;
      margin: 0 auto;
      top: 35%;
      font-family: "Oldenburg";
      font-style: normal;
      font-weight: 400;
      font-size: 18px;
      line-height: 30px;
      color: #ffffff;
    }

    .kidsWhatWeOfferScienceDiv {
      /** square of width 40% of parent width and height is same as width; with 5px gray border radius; white background **/
      width: 40%;
      padding-bottom: 40%;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

    /** red circle centered in square; circle diameter is 80% of square width **/
    .kidsWhatWeOfferScienceDivCircle {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      margin: 0 auto;
      background-color: #eadb52;
      top: 25%;
    }

    .kidsWhatWeOfferScienceDivCircleImage {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      margin: 0 auto;
      top: 25%;
      left: 25%;
    }

    .kidsWhatWeOfferEduGamesDiv {
      /** square of width 40% of parent width and height is same as width; with 5px gray border radius; white background **/
      width: 40%;
      padding-bottom: 40%;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

    /** red circle centered in square; circle diameter is 80% of square width **/
    .kidsWhatWeOfferEduGamesDivCircle {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      margin: 0 auto;
      background-color: rgba(58, 169, 232, 0.5);
      top: 25%;
    }

    .kidsWhatWeOfferEduGamesDivCircleImage {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      margin: 0 auto;
      top: 40%;
      left: 25%;
    }

    .kidsWhatWeOfferMathDiv:hover,
    .kidsWhatWeOfferEnglishDiv:hover,
    .kidsWhatWeOfferScienceDiv:hover,
    .kidsWhatWeOfferEduGamesDiv:hover {
      cursor: pointer;
      background-color: #f2f2f2;
    }

    .kidsWhatWeOfferDiv1Div2 {
      width: 50%;
      height: 100%;
    }

    .kidsWhatWeOfferDiv2 {
      width: 100%;
      height: 50%;
    }

    .kidsWhatWeOfferDiv2Div1 {
      width: 50%;
      height: 100%;
    }

    .kidsWhatWeOfferDiv2Div2 {
      width: 50%;
      height: 100%;
    }

    .kidsPracticeAndGamesCardsDiv {
      width: 100%;
      background-color: #fff;
      justify-content: center;
      align-items: stretch;
    }

    .kidsPracticeCardDiv {
      width: 25%;
      background: #ffffff;
      border: 1px solid #b5b5b5;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      margin-right: 1rem;
      padding: 4rem 0;
    }

    .kidsGamesCardDiv {
      width: 25%;
      background: #ffffff;
      border: 1px solid #b5b5b5;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      padding: 4rem 0;
    }

    .kidsPracticeCardDiv p,
    .kidsGamesCardDiv p {
      font-family: "Oldenburg";
      font-style: normal;
      font-weight: 400;
      font-size: 24px;
      line-height: 30px;
      color: #545353;
      padding: 1rem;
      margin-left: 1rem;
    }

    .kidsGamesCardDiv h2 {
      color: #e05d5d;
    }

    .kidsPracticeCardDiv h2 {
      color: #ffaf38;
    }

    .kidspersonalizedAdaptiveFlexibleDiv {
      width: 100%;
      background-color: #fafafa;
      justify-content: center;
      padding: 2rem 0;
    }

    .kidspersonalizedCardWrapperDiv {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .kidspersonalizedCardWrapperDiv1 {
      width: 100%;
      justify-content: space-around;
    }

    .kidspersonalizedCard {
      width: 45%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      height: 100%;
    }

    .kidsadaptiveCard {
      width: 45%;
      height: 100%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
    }

    .kidsflexibleCard {
      width: 45%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      margin-top: 2rem;
    }

    .kidspersonalizedCard h2,
    .kidsadaptiveCard h2,
    .kidsflexibleCard h2 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 1.5rem;
      line-height: 30px;
      color: #ffffff;
      padding-top: 4rem;
    }

    .kidspersonalizedCard p,
    .kidsadaptiveCard p,
    .kidsflexibleCard p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 25px;
      color: rgba(255, 255, 255, 0.8);
      width: 80%;
      padding: 2rem 0;
    }

    .kidsPricingCardsDiv {
      background: #ffffff;
      border: 1px solid #ededed;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 5rem 0 10rem 0;
    }

    .kidsPricingCardsDiv ul {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      margin: 0;
    }

    .kidsPricingCardsDiv li {
      list-style-type: none;
    }

    .kidsPricingCardsDiv1 {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .kidsPricingCardsDiv2 {
      width: 100%;
      align-items: center;
      justify-content: space-around;
    }

    .kidFreePricingCard {
      width: 37.5%;
      border: 1px solid #828282;
      border-radius: 7px;
      justify-content: flex-start;
      margin-right: 1rem;
      padding: 4rem 0;
    }

    .kidFreePricingCard h2 {
      width: 60%;
      background-color: #ffb038;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #fff;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 16px;
      line-height: 44px;
    }

    .kidFreePricingCard p {
      width: 70%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #5a5757;
    }

    .kidFreePricingCard li {
      color: #5a5757;
      line-height: 40px;
    }

    .kidMonthlyPricingCard {
      width: 37.5%;
      background-color: #ffb038;
      border-radius: 7px;
      margin: 0 1rem;
      padding: 4rem 0;
    }

    .kidMonthlyPricingCard h2 {
      width: 60%;
      background-color: #f9f9f9;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #545353;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 44px;
    }

    .kidMonthlyPricingCard p {
      width: 80%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #565656;
    }

    .kidMonthlyPricingCard li {
      color: #565656;
      line-height: 40px;
    }

    .kidYearlyPricingCard {
      width: 37.5%;
      background-color: #379cd5;
      border-radius: 7px;
      margin: 2rem auto;
      padding: 4rem 0;
    }

    .kidYearlyPricingCard h2 {
      width: 60%;
      background-color: #ffaf38;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #545353;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 18px;
      line-height: 44px;
    }

    .kidYearlyPricingCard p {
      width: 80%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #fff;
    }

    .kidYearlyPricingCard li {
      color: #fff;
      line-height: 40px;
    }

    .kidsWhatDoWeDoDiv {
      width: 100%;
      background-color: #f6f6f6;
      flex-direction: column;
      align-items: center;
      padding: 5rem 0;
    }

    .kidsWhatDoWeDoDiv1 {
      width: 100%;
      justify-content: space-around;
    }

    .kidsWhatDoWeDoDiv1 p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 15px;
      line-height: 25px;
      color: #6b6b6b;
      width: 60%;
    }

    .kidsWhatDoWeDoDiv1 h1 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 700;
      font-size: 25px;
      line-height: 42px;
      color: #3f3f3f;
    }

    .kidsWhatDoWeDoDiv1 h1 > span {
      color: #ffaf38;
    }

    .kidsWhatDoWeDoGrades18span {
      color: #e26969;
    }

    .kidsWhatDoWeDoImage {
      width: 100%;
    }

    .kidsSupportedByDiv {
      width: 100%;
      background-color: #fff;
      padding: 10rem 0;
    }

    .kidsHomeSubscribeDiv {
      width: 100%;
      height: 800px;
      margin: 5rem auto;
    }

    .kidsHomeSubscribeDiv1 {
      width: 100%;
      height: 797px;
      background: linear-gradient(
        251.4deg,
        #ffb038 15.16%,
        #d4dcc5 54.77%,
        #3aa9e8 98.62%
      );
      clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%);
      position: absolute;
    }

    .kidsHomeSubscribeCard {
      width: 80%;
      height: 700px;
      background-color: #ffffff;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 8px;
      position: absolute;
      z-index: 3;
      margin: 3rem auto;
    }

    .kidsHomeSubscribeCardHeader {
      width: 100%;
    }

    .kidsHomeSubscribeCardHeader1 {
      width: 60%;
      height: 100%;
    }

    .kidsHomeSubscribeCardHeader1 h1 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 700;
      font-size: 64px;
      line-height: 96px;
      color: #de535e;
    }

    .kidsHomeSubscribeCard p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 64px;
      color: rgba(222, 83, 94, 0.8);
    }

    .kidsHomeSubscribeButton {
      background-color: rgba(58, 169, 232, 0.8);
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      width: 400px;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 20px;
      line-height: 64px;
      color: #ffffff;
      margin: 2rem auto;
    }

    .kidsHomeSubscribeKeywordsRow {
      width: 60%;
      height: 50px;
      background: rgba(255, 255, 255, 0.17);
      border: 1px solid #de535e;
      border-radius: 7px;
      margin: 5rem auto 15rem auto;
    }

    .kidsHomeSubscribeKeywordsRow div {
      width: 16.66666666666667%;
      height: 100%;
      border: 1px solid #de535e;
      padding: 1rem 0;
    }

    .kidsHomeSubscribeKeywordsRow2,
    .kidsHomeSubscribeKeywordsRow3,
    .kidsHomeSubscribeKeywordsRow4,
    .kidsHomeSubscribeKeywordsRow5,
    .kidsHomeSubscribeKeywordsRow6 {
      color: #de535e;
    }

    .kidsHomeSubscribeKeywordsRow1 {
      background-color: #de535e;
      border-radius: 7px 0px 0px 7px;
      color: #fff;
    }

    .kidsSpiralOrange {
      position: absolute;
      right: 5%;
      top: 20%;
    }

    .kidsSmilingCartoon {
      z-index: 5;
      position: relative;
      left: -35%;
      top: 10%;
    }

    .defaultHomeFooterDiv {
      width: 100%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }

    .defaultHomeFooterDiv1 {
      width: 100%;
      align-items: stretch;
    }

    .defaultHomeFooterDiv h5 {
      color: #5eb5e7;
    }

    .defaultHomeFooterDiv1a,
    .defaultHomeFooterDiv1b,
    .defaultHomeFooterDiv1c,
    .defaultHomeFooterDiv1d {
      width: 25%;
      padding: 5rem 0;
      flex-grow: 1;
    }

    .defaultHomeFooterDiv1aInputDiv {
      width: 60%;
      height: 40px;
      border-radius: 5px;
    }

    .defaultHomeFooterDiv1aInputDiv button {
      width: 20%;
      height: 100%;
      background-color: #ffb038;
      border-radius: 0 5px 5px 0;
      color: #fff;
      border: none;
      font-size: 0.8rem;
    }

    .defaultHomeFooterDiv1aInputDiv input {
      width: 80%;
      height: 100%;
      font-size: 0.8rem;
      border-radius: 5px 0 0 5px;
      border: none;
      text-align: center;
    }

    .defaultHomeFooterDiv1aSocialMediaDiv {
      width: 30%;
      justify-content: space-around;
      margin: 1rem auto;
    }

    .defaultHomeFooterDiv1a p {
      font-size: 1rem;
      color: #fff;
    }

    .defaultHomeFooterDiv1b h3,
    .defaultHomeFooterDiv1c h3,
    .defaultHomeFooterDiv1d h3 {
      color: #ffb038;
    }

    .defaultHomeFooterDiv1a div,
    .defaultHomeFooterDiv1b div,
    .defaultHomeFooterDiv1c div,
    .defaultHomeFooterDiv1d div {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 64px;
      color: rgba(255, 255, 255, 0.8);
    }

    .defaultHomeFooterDiv1a_i_text {
      color: #fffa83;
    }

    .defaultHomeFooterDiv1a_learn_text {
      color: #fff;
    }

    .defaultHomeFooterDiv1a_s_text {
      color: #ffb038;
    }

    .defaultHomeFooterDiv1a_t_text {
      color: #fffa83;
    }

    .defaultHomeFooterDiv1a_e_text {
      color: #c7282d;
    }

    .defaultHomeFooterDiv1a_m_text {
      color: #9c06c1;
    }

    .kidsPracticeAndGamesCardsDiv {
      width: 100%;
      background-color: #fff;
      justify-content: center;
      align-items: stretch;
      padding: 5rem 0;
    }

    .kidsPracticeCardDiv {
      width: 40%;
      background: #ffffff;
      border: 1px solid #b5b5b5;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      margin-right: 1rem;
      padding: 1rem 0;
    }

    .kidsGamesCardDiv {
      width: 40%;
      background: #ffffff;
      border: 1px solid #b5b5b5;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      padding: 1rem 0;
    }

    .kidsPracticeCardDiv p,
    .kidsGamesCardDiv p {
      font-family: "Oldenburg";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
      color: #545353;
      padding: 1rem;
    }

    .kidsGamesCardDiv h2 {
      color: #e05d5d;
    }

    .kidsPracticeCardDiv h2 {
      color: #ffaf38;
    }

    .kidsHomeSubscribeDiv {
      width: 100%;
      height: 500px;
      margin: 5rem auto;
    }

    .kidsHomeSubscribeDiv1 {
      width: 100%;
      height: 497px;
      background: linear-gradient(
        251.4deg,
        #ffb038 15.16%,
        #d4dcc5 54.77%,
        #3aa9e8 98.62%
      );
      clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%);
      position: absolute;
    }

    .kidsHomeSubscribeCard {
      width: 80%;
      height: 400px;
      background-color: #ffffff;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 8px;
      position: absolute;
      z-index: 3;
      margin: 3rem auto;
    }

    .kidsHomeSubscribeCardHeader {
      width: 100%;
    }

    .kidsHomeSubscribeCardHeader1 {
      width: 60%;
      height: 100%;
    }

    .kidsHomeSubscribeCardHeader1 h1 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 700;
      font-size: 18px;
      line-height: 26px;
      color: #de535e;
    }

    .kidsHomeSubscribeCard p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 24px;
      width: 80%;
      color: rgba(222, 83, 94, 0.8);
    }

    .kidsHomeSubscribeButton {
      background-color: rgba(58, 169, 232, 0.8);
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      width: 200px;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 12px;
      line-height: 24px;
      color: #ffffff;
      margin: 2rem auto;
    }

    .kidsHomeSubscribeKeywordsRow {
      width: 90%;
      height: 50px;
      background: rgba(255, 255, 255, 0.17);
      border: 1px solid #de535e;
      border-radius: 7px;
      margin: 5rem auto 15rem auto;
    }

    .kidsHomeSubscribeKeywordsRow div {
      width: 16.66666666666667%;
      height: 100%;
      border: 1px solid #de535e;
      padding: 1rem 0;
    }

    .kidsHomeSubscribeKeywordsRow2,
    .kidsHomeSubscribeKeywordsRow3,
    .kidsHomeSubscribeKeywordsRow4,
    .kidsHomeSubscribeKeywordsRow5,
    .kidsHomeSubscribeKeywordsRow6 {
      color: #de535e;
      font-size: 10px;
    }

    .kidsHomeSubscribeKeywordsRow1 {
      background-color: #de535e;
      border-radius: 7px 0px 0px 7px;
      color: #fff;
    }

    .kidsSpiralOrange {
      width: 30%;
      position: absolute;
      right: 5%;
      top: 20%;
    }

    .kidsSmilingCartoon {
      display: none;
    }

    .defaultHomeFooterDiv {
      width: 100%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 0;
    }

    .defaultHomeFooterDiv1 {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      padding: 0;
    }

    .defaultHomeFooterDiv2a {
      width: 100%;
    }

    .defaultHomeFooterDiv2b {
      width: 100%;
    }

    .defaultHomeFooterDiv h5 {
      color: #5eb5e7;
    }

    .defaultHomeFooterDiv1a,
    .defaultHomeFooterDiv1b,
    .defaultHomeFooterDiv1c,
    .defaultHomeFooterDiv1d {
      width: 25%;
      padding: 1rem 0;
      flex-grow: 1;
    }

    .defaultHomeFooterDiv1aInputDiv {
      width: 90%;
      height: 40px;
      border-radius: 5px;
    }

    .defaultHomeFooterDiv1aInputDiv button {
      width: 20%;
      height: 100%;
      background-color: #ffb038;
      border-radius: 0 5px 5px 0;
      color: #fff;
      border: none;
      font-size: 0.5rem;
    }

    .defaultHomeFooterDiv1aInputDiv input {
      width: 80%;
      height: 100%;
      font-size: 0.8rem;
      border-radius: 5px 0 0 5px;
      border: none;
      text-align: center;
    }

    .defaultHomeFooterDiv1aSocialMediaDiv {
      width: 30%;
      justify-content: space-around;
      margin: 1rem auto;
    }

    .defaultHomeFooterDiv1a p {
      font-size: 1rem;
      color: #fff;
    }

    .defaultHomeFooterDiv1b h3,
    .defaultHomeFooterDiv1c h3,
    .defaultHomeFooterDiv1d h3 {
      color: #ffb038;
    }

    .defaultHomeFooterDiv1a div,
    .defaultHomeFooterDiv1b div,
    .defaultHomeFooterDiv1c div,
    .defaultHomeFooterDiv1d div {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 34px;
      color: rgba(255, 255, 255, 0.8);
    }

    .defaultHomeFooterDiv1a_i_text {
      color: #fffa83;
    }

    .defaultHomeFooterDiv1a_learn_text {
      color: #fff;
    }

    .defaultHomeFooterDiv1a_s_text {
      color: #ffb038;
    }

    .defaultHomeFooterDiv1a_t_text {
      color: #fffa83;
    }

    .defaultHomeFooterDiv1a_e_text {
      color: #c7282d;
    }

    .defaultHomeFooterDiv1a_m_text {
      color: #9c06c1;
    }

    .kidsTopicBoxContainerOuterDiv {
      flex-direction: column;
    }

    .kidsLearnSubjectsContainer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 50px;
      margin: 60px auto;
      max-width: 1200px;
      position: relative;
      z-index: 10;
    }

    .kidsGamesContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      width: 100%;
      margin: 0 auto 60px;
      padding: 0 40px;
      position: relative;
      z-index: 10;
    }

    /* Stats Overview */
    .kidsStatsOverview {
      display: grid;
      grid-template-columns: repeat(2, 2fr) !important;
      gap: 24px;
      margin-bottom: 30px;
    }

    .kidsWeekDays {
      display: grid;
      grid-template-columns: repeat(3, 3fr) !important;
      gap: 8px;
    }

    /* Sidebar Styles for Mobile */
    .kidsDashboardSidebar {
      position: fixed;
      top: 0;
      left: -100%;
      width: 80%;
      max-width: 280px;
      height: 100vh;
      background: linear-gradient(
        180deg,
        #9c06c1 0%,
        #7c3aed 50%,
        #2563eb 100%
      );
      color: white;
      display: flex;
      flex-direction: column;
      box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
      transition: left 0.3s ease;
      z-index: 999;
      overflow: hidden;
    }

    .kidsDashboardSidebar.mobileMenuOpen {
      left: 0;
    }

    .kidsDashboardSidebar::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 70%
      );
      animation: rotateBg 30s linear infinite;
    }

    .kidsSidebarHeader {
      padding: 80px 20px 20px;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .kidsUserAvatar {
      font-size: 56px;
      display: block;
      margin-bottom: 12px;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
      animation: bounceAvatar 2s ease-in-out infinite;
    }

    .kidsSidebarHeader h3 {
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 700;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .kidsUserLevel {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(255, 255, 255, 0.2);
      padding: 6px 12px;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 600;
      backdrop-filter: blur(10px);
    }

    .kidsLevelIcon {
      font-size: 14px;
    }

    /* Header */
    .kidsPracticeHeader {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 20px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      margin-bottom: 24px;
    }

    .kidsHeaderLeft,
    .kidsHeaderRight {
      flex: 0 0 auto;
    }

    .kidsHeaderCenter {
      flex: 1;
      text-align: center;
    }

    .kidsBackButton {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 10px;
      background: white;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .kidsBackButton:hover {
      border-color: #ff6b6b;
      color: #ff6b6b;
      transform: translateX(-4px);
    }

    .kidsSubjectBadge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 2px 24px;
      border-radius: 50px;
      color: white;
      font-size: 14px;
      font-weight: 700;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      margin-bottom: 8px;
    }

    .kidsSubjectIcon {
      font-size: 20px;
    }

    .kidsTopicName {
      font-size: 10px;
      color: #6b7280;
      font-weight: 500;
    }

    .kidsSettingsButton {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 2px solid #e5e7eb;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .kidsSettingsButton:hover {
      border-color: #8b5cf6;
      color: #8b5cf6;
      transform: rotate(90deg);
    }

    /* Stats Bar */
    .kidsStatsBar {
      display: flex;
      justify-content: center;
      gap: 12px;
      padding: 0px;
      background: white;
      margin: 14px;
      border-radius: 20px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      position: relative;
      z-index: 10;
    }

    .kidsStatItem {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 4px;
    }

    .kidsStatIcon {
      font-size: 16px;
    }

    .kidsStatValue {
      font-size: 14px;
      font-weight: 700;
      color: #1e293b;
    }

    .kidsStatLabel {
      font-size: 14px;
      color: #6b7280;
      font-weight: 500;
    }

    /* Progress Section */
    .kidsProgressSection {
      margin: 0 auto;
      width: 90%;
      position: relative;
      z-index: 10;
    }

    .kidsProgressBar {
      height: 30px;
      background: white;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      position: relative;
    }

    .kidsProgressFill {
      height: 100%;
      background: linear-gradient(90deg, #ff6b6b 0%, #ff8787 100%);
      transition: width 0.5s ease;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
    }

    .kidsProgressStars {
      display: flex;
      gap: 2px;
      font-size: 16px;
    }

    .kidsProgressText {
      text-align: center;
      margin-top: 0px;
      font-size: 10px;
      font-weight: 600;
      color: #4b5563;
    }

    /* Character Section */
    .kidsCharacterSection {
      display: none !important;
    }

    .kidsQuestionNumber {
      display: flex;
      flex-direction: column;
      align-items: center;
      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
      color: white;
      padding: 16px 24px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
    }

    .kidsQuestionLabel {
      display: none;
    }

    .kidsQuestionValue {
      font-size: 16px;
      font-weight: 700;
      line-height: 1;
    }
  } /*** End of (min-width: 768px) and (max-width: 1024px) ***/

  @media screen and (min-width: 320px) and (max-width: 767px) {
    /* CSS styles for mobile landscape go here */

    .kidsHomeTopDiv1 {
      width: 100%;
      background: #ffffff;
      border: 1px solid #f1f1f1;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 0px;
      margin-top: 60px;
      padding: 0 0 5rem 0;
    }

    .kidsHomeTopDiv1a {
      width: 100%;
      height: 60%;
      padding-top: 1rem;
    }

    .kidsHomeTopDiv1a1 h1 {
      color: #726d6d;
      width: 100%;
      text-align: center;
      font-family: "Noto Sans Tai Tham";
      font-style: normal;
      font-weight: 700;
      font-size: 2rem;
    }

    .ilearnSTEM {
      margin: 0 1rem;
    }

    .i,
    .t {
      color: #838131;
    }

    .s {
      color: #ffb038;
    }

    .e {
      color: #c7282d;
    }

    .learn {
      color: #3cb3f7;
    }

    .m {
      color: #9c06c1;
    }

    .fun_adaptive {
      font-size: 1rem;
    }

    .kidsHomeTopDiv1a2 {
      width: 100%;
      height: 100%;
    }

    .kidsHomeTopDiv1a2a {
      width: 50%;
    }

    .rabbitHomePage1 {
      width: 50%;
      position: absolute;
      left: 40px;
      margin-bottom: -50px;
    }

    .kidsHomeTopDiv1a2b {
      width: 50%;
      height: 100%;
    }

    .kidsHomeTopDiv1a2b1 {
      height: 50%;
    }

    .kidsHomeTopDiv1a2b1aGetStartedButton {
      width: 120px;
      height: 40px;
      background: #e05d5d;
      border-radius: 5px;
      border: none;
      margin-right: 1rem;
      color: #fff;
      font-size: 0.6rem;
    }

    .kidsHomeTopDiv1a2b1aPreviewButton {
      width: 120px;
      height: 40px;
      background: #ffb038;
      border: 1px solid #ffb038;
      border-radius: 5px;
      margin-left: 1rem;
      color: #fff;
      font-size: 0.6rem;
    }

    .kidsWhatWeOfferMainDiv {
      width: 100%;
      background-color: #b5c5cd;
      padding: 5rem 0;
    }

    .kidsWhatWeOfferMainDiv h1 {
      color: #122e3b;
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }

    .kidsWhatWeOfferDiv1 {
      width: 100%;
      height: 50%;
      flex-direction: row;
      justify-content: space-evenly;
      align-items: center;
    }

    .kidsWhatWeOfferDiv1Div1 {
      width: 50%;
      height: 100%;
    }

    .kidsWhatWeOfferMathDiv {
      width: 40%;
      padding-bottom: 40%;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

    /** red circle centered in square; circle diameter is 80% of square width **/
    .kidsWhatWeOfferMathDivCircle {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      margin: 0 auto;
      background-color: #bb1717;
      top: 20%;
    }

    .kidsWhatWeOfferMathDivCircleImage {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      margin: 0 auto;
      top: 25%;
      left: 25%;
    }

    .kidsWhatWeOfferMathDiv span,
    .kidsWhatWeOfferEnglishDiv span,
    .kidsWhatWeOfferScienceDiv span,
    .kidsWhatWeOfferEduGamesDiv span {
      /** place at bottom of parent div **/
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      color: #545353;
      font-size: 12px;
    }

    .kidsWhatWeOfferEnglishDiv {
      /** square of width 40% of parent width and height is same as width; with 5px gray border radius; white background **/
      width: 40%;
      padding-bottom: 40%;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

    /** red circle centered in square; circle diameter is 80% of square width **/
    .kidsWhatWeOfferEnglishDivCircle {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      margin: 0 auto;
      background-color: #3aad76;
      top: 20%;
    }

    .kidsWhatWeOfferEnglishDivCircle h3 {
      position: absolute;
      padding-bottom: 50%;
      margin: 0 auto;
      top: 35%;
      font-family: "Oldenburg";
      font-style: normal;
      font-weight: 400;
      font-size: 18px;
      line-height: 30px;
      color: #fff;
    }

    .kidsWhatWeOfferScienceDiv {
      /** square of width 40% of parent width and height is same as width; with 5px gray border radius; white background **/
      width: 40%;
      padding-bottom: 40%;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

    /** red circle centered in square; circle diameter is 80% of square width **/
    .kidsWhatWeOfferScienceDivCircle {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      margin: 0 auto;
      background-color: #eadb52;
      top: 20%;
    }

    .kidsWhatWeOfferScienceDivCircleImage {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      margin: 0 auto;
      top: 25%;
      left: 25%;
    }

    .kidsWhatWeOfferEduGamesDiv {
      /** square of width 40% of parent width and height is same as width; with 5px gray border radius; white background **/
      width: 40%;
      padding-bottom: 40%;
      margin: auto;
      background-color: #fff;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
    }

    /** red circle centered in square; circle diameter is 80% of square width **/
    .kidsWhatWeOfferEduGamesDivCircle {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      border-radius: 50%;
      margin: 0 auto;
      background-color: rgba(58, 169, 232, 0.5);
      top: 20%;
    }

    .kidsWhatWeOfferEduGamesDivCircleImage {
      position: absolute;
      width: 50%;
      padding-bottom: 50%;
      margin: 0 auto;
      top: 40%;
      left: 25%;
    }

    .kidsWhatWeOfferMathDiv:hover,
    .kidsWhatWeOfferEnglishDiv:hover,
    .kidsWhatWeOfferScienceDiv:hover,
    .kidsWhatWeOfferEduGamesDiv:hover {
      cursor: pointer;
      background-color: #f2f2f2;
    }

    .kidsWhatWeOfferDiv1Div2 {
      width: 50%;
      height: 100%;
    }

    .kidsWhatWeOfferDiv2 {
      width: 100%;
      height: 50%;
    }

    .kidsWhatWeOfferDiv2Div1 {
      width: 50%;
      height: 100%;
    }

    .kidsWhatWeOfferDiv2Div2 {
      width: 50%;
      height: 100%;
    }

    .kidsPracticeAndGamesCardsDiv {
      width: 100%;
      background-color: #fff;
      justify-content: center;
      align-items: stretch;
      padding: 5rem 0;
    }

    .kidsPracticeCardDiv {
      width: 40%;
      background: #ffffff;
      border: 1px solid #b5b5b5;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      margin-right: 1rem;
      padding: 1rem 0;
    }

    .kidsGamesCardDiv {
      width: 40%;
      background: #ffffff;
      border: 1px solid #b5b5b5;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      padding: 1rem 0;
    }

    .kidsPracticeCardDiv p,
    .kidsGamesCardDiv p {
      font-family: "Oldenburg";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
      color: #545353;
      padding: 1rem;
    }

    .kidsGamesCardDiv h2 {
      color: #e05d5d;
    }

    .kidsPracticeCardDiv h2 {
      color: #ffaf38;
    }

    .kidspersonalizedAdaptiveFlexibleDiv {
      width: 100%;
      background-color: #fafafa;
      justify-content: center;
      padding: 2rem 0;
    }

    .kidspersonalizedCardWrapperDiv {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .kidspersonalizedCardWrapperDiv1 {
      width: 100%;
      justify-content: space-around;
    }

    .kidspersonalizedCard {
      width: 45%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      height: 100%;
      padding: 2rem 0;
    }

    .kidsadaptiveCard {
      width: 45%;
      height: 100%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      padding: 2rem 0;
    }

    .kidsflexibleCard {
      width: 45%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      margin-top: 2rem;
      padding: 2rem 0;
    }

    .kidspersonalizedCard h2,
    .kidsadaptiveCard h2,
    .kidsflexibleCard h2 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 1.25rem;
      color: #ffffff;
    }

    .kidspersonalizedCard p,
    .kidsadaptiveCard p,
    .kidsflexibleCard p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      color: rgba(255, 255, 255, 0.8);
      width: 80%;
      padding: 0 0 2rem 0;
    }

    .kidsPricingCardsDiv {
      background: #ffffff;
      border: 1px solid #ededed;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 5rem 0 10rem 0;
    }

    .kidsPricingCardsDiv ul {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      margin: 0;
    }

    .kidsPricingCardsDiv li {
      list-style-type: none;
    }

    .kidsPricingCardsDiv1 {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .kidsPricingCardsDiv2 {
      width: 100%;
      align-items: center;
      justify-content: space-around;
    }

    .kidFreePricingCard {
      width: 37.5%;
      border: 1px solid #828282;
      border-radius: 7px;
      justify-content: flex-start;
      margin-right: 1rem;
      padding: 4rem 0;
    }

    .kidFreePricingCard h2 {
      width: 60%;
      background-color: #ffb038;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #fff;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      line-height: 44px;
    }

    .kidFreePricingCard p {
      width: 70%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #5a5757;
    }

    .kidFreePricingCard li {
      color: #5a5757;
      line-height: 40px;
    }

    .kidMonthlyPricingCard {
      width: 37.5%;
      background-color: #ffb038;
      border-radius: 7px;
      margin: 0 1rem;
      padding: 4rem 0;
    }

    .kidMonthlyPricingCard h2 {
      width: 60%;
      background-color: #f9f9f9;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #545353;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      line-height: 44px;
    }

    .kidMonthlyPricingCard p {
      width: 80%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #565656;
    }

    .kidMonthlyPricingCard li {
      color: #565656;
      line-height: 40px;
    }

    .kidYearlyPricingCard {
      width: 37.5%;
      background-color: #379cd5;
      border-radius: 7px;
      margin: 2rem auto;
      padding: 4rem 0;
    }

    .kidYearlyPricingCard h2 {
      width: 60%;
      background-color: #ffaf38;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #545353;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      line-height: 44px;
    }

    .kidYearlyPricingCard p {
      width: 80%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #fff;
    }

    .kidYearlyPricingCard li {
      color: #fff;
      line-height: 40px;
    }

    .kidsWhatDoWeDoDiv {
      width: 100%;
      background-color: #f6f6f6;
      flex-direction: column;
      align-items: center;
      padding: 5rem 0;
    }

    .kidsWhatDoWeDoDiv1 {
      width: 100%;
      justify-content: space-around;
    }

    .kidsWhatDoWeDoDiv1 p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 15px;
      line-height: 25px;
      color: #6b6b6b;
      width: 60%;
    }

    .kidsWhatDoWeDoDiv1 h1 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 700;
      font-size: 25px;
      line-height: 42px;
      color: #3f3f3f;
    }

    .kidsWhatDoWeDoDiv1 h1 > span {
      color: #ffaf38;
    }

    .kidsWhatDoWeDoGrades18span {
      color: #e26969;
    }

    .kidsWhatDoWeDoImage {
      width: 100%;
    }

    .kidsSupportedByDiv {
      width: 100%;
      background-color: #fff;
      padding: 1rem 0;
    }

    .kidsHomeSubscribeDiv {
      width: 100%;
      height: 500px;
      margin: 5rem auto;
    }

    .kidsHomeSubscribeDiv1 {
      width: 100%;
      height: 497px;
      background: linear-gradient(
        251.4deg,
        #ffb038 15.16%,
        #d4dcc5 54.77%,
        #3aa9e8 98.62%
      );
      clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%);
      position: absolute;
    }

    .kidsHomeSubscribeCard {
      width: 80%;
      height: 400px;
      background-color: #ffffff;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 8px;
      position: absolute;
      z-index: 3;
      margin: 3rem auto;
    }

    .kidsHomeSubscribeCardHeader {
      width: 100%;
    }

    .kidsHomeSubscribeCardHeader1 {
      width: 60%;
      height: 100%;
    }

    .kidsHomeSubscribeCardHeader1 h1 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 700;
      font-size: 18px;
      line-height: 26px;
      color: #de535e;
    }

    .kidsHomeSubscribeCard p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 24px;
      width: 80%;
      color: rgba(222, 83, 94, 0.8);
    }

    .kidsHomeSubscribeButton {
      background-color: rgba(58, 169, 232, 0.8);
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      width: 200px;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 12px;
      line-height: 24px;
      color: #ffffff;
      margin: 2rem auto;
    }

    .kidsHomeSubscribeKeywordsRow {
      width: 90%;
      height: 50px;
      background: rgba(255, 255, 255, 0.17);
      border: 1px solid #de535e;
      border-radius: 7px;
      margin: 5rem auto 15rem auto;
    }

    .kidsHomeSubscribeKeywordsRow div {
      width: 16.66666666666667%;
      height: 100%;
      border: 1px solid #de535e;
      padding: 1rem 0;
    }

    .kidsHomeSubscribeKeywordsRow2,
    .kidsHomeSubscribeKeywordsRow3,
    .kidsHomeSubscribeKeywordsRow4,
    .kidsHomeSubscribeKeywordsRow5,
    .kidsHomeSubscribeKeywordsRow6 {
      color: #de535e;
      font-size: 10px;
    }

    .kidsHomeSubscribeKeywordsRow1 {
      background-color: #de535e;
      border-radius: 7px 0px 0px 7px;
      color: #fff;
    }

    .kidsSpiralOrange {
      width: 30%;
      position: absolute;
      right: 5%;
      top: 20%;
    }

    .kidsSmilingCartoon {
      display: none;
    }

    .defaultHomeFooterDiv {
      width: 100%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 0;
    }

    .defaultHomeFooterDiv1 {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      padding: 0;
    }

    .defaultHomeFooterDiv2a {
      width: 100%;
    }

    .defaultHomeFooterDiv2b {
      width: 100%;
    }

    .defaultHomeFooterDiv h5 {
      color: #5eb5e7;
    }

    .defaultHomeFooterDiv1a,
    .defaultHomeFooterDiv1b,
    .defaultHomeFooterDiv1c,
    .defaultHomeFooterDiv1d {
      width: 25%;
      padding: 1rem 0;
      flex-grow: 1;
    }

    .defaultHomeFooterDiv1aInputDiv {
      width: 90%;
      height: 40px;
      border-radius: 5px;
    }

    .defaultHomeFooterDiv1aInputDiv button {
      width: 20%;
      height: 100%;
      background-color: #ffb038;
      border-radius: 0 5px 5px 0;
      color: #fff;
      border: none;
      font-size: 0.5rem;
    }

    .defaultHomeFooterDiv1aInputDiv input {
      width: 80%;
      height: 100%;
      font-size: 0.8rem;
      border-radius: 5px 0 0 5px;
      border: none;
      text-align: center;
    }

    .defaultHomeFooterDiv1aSocialMediaDiv {
      width: 30%;
      justify-content: space-around;
      margin: 1rem auto;
    }

    .defaultHomeFooterDiv1a p {
      font-size: 1rem;
      color: #fff;
    }

    .defaultHomeFooterDiv1b h3,
    .defaultHomeFooterDiv1c h3,
    .defaultHomeFooterDiv1d h3 {
      color: #ffb038;
    }

    .defaultHomeFooterDiv1a div,
    .defaultHomeFooterDiv1b div,
    .defaultHomeFooterDiv1c div,
    .defaultHomeFooterDiv1d div {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 34px;
      color: rgba(255, 255, 255, 0.8);
    }

    .defaultHomeFooterDiv1a_i_text {
      color: #fffa83;
    }

    .defaultHomeFooterDiv1a_learn_text {
      color: #fff;
    }

    .defaultHomeFooterDiv1a_s_text {
      color: #ffb038;
    }

    .defaultHomeFooterDiv1a_t_text {
      color: #fffa83;
    }

    .defaultHomeFooterDiv1a_e_text {
      color: #c7282d;
    }

    .defaultHomeFooterDiv1a_m_text {
      color: #9c06c1;
    }

    .kidsTopicBoxContainerOuterDiv {
      flex-direction: column;
    }

    .topicsLabel {
      font-size: 25px;
    }

    /********** Kids Registration Page **************/

    .kidsRegistrationHeader {
      margin-top: 60px;
    }

    .kidsRegistrationHeaderP {
      color: #3aa9e8;
      font-weight: 600;
      text-align: center;
    }

    .kidsRegistrationHeaderSpan {
      color: #122e3b;
      margin: 0px 5px;
    }

    .kidsRegistrationHeaderRolesDiv1 {
      width: 98vw;
      height: 180px;
      border: 0.3px solid #b3b3b3;
      border-radius: 10px;
      padding: 0;
    }

    .kidsRegistrationHeaderRolesButtonsDiv0 {
      flex-direction: column;
      width: 80%;
    }

    .kidsRegistrationHeaderRolesButtonsDiv {
      flex-direction: column;
    }

    .kidsRegistrationHeaderRolesDiv1 p {
      font-weight: bold;
      color: #656565;
    }

    .kidsRegistrationRolesButtonTeacher {
      width: 150px;
      height: 50px;
      border-radius: 5px;
      color: #fff;
      margin-bottom: 10px;
      margin-left: 0px;
      margin-right: 0px;
      background-color: #ffb038;
    }

    .kidsRegistrationRolesButtonStudent {
      width: 150px;
      height: 50px;
      border-radius: 5px;
      color: #fff;
      margin-top: 10px;
      margin-left: 0px;
      margin-right: 0px;
      background-color: #3aa9e8;
    }

    .kidsRegistrationRolesButtonNotChosen {
      width: 150px;
      height: 50px;
      border-radius: 5px;
      color: #fff;
      margin-left: 0px;
      margin-right: 0px;
      background-color: #e4e3e3;
    }

    .kidsRegistrationHeaderRolesDiv2 {
      display: none;
    }

    .kidsRegistrationRibbonsDiv {
      width: 150px;
      height: 180px;
      margin-right: 0;
      clip-path: polygon(0% 0%, 40% 0%, 100% 40%, 100% 70%, 0% 0%);
    }

    .teachercolor {
      background-color: #ffb038;
    }

    .studentcolor {
      background-color: #3aa9e8;
    }

    .notChosenColor {
      background-color: #e4e3e3;
    }

    .registrationMiddleDiv {
      width: 100%;
      margin-top: 10px;
    }

    .registrationMiddleDiv1 {
      width: 100%;
      align-items: center;
      justify-content: space-around;
      padding-right: 30px;
    }

    .registrationMiddleDiv2 {
      justify-content: space-around;
    }

    .registrationCheckMarkBoxDiv1 {
      margin-right: 20px;
    }

    .registrationCheckMarkBoxDiv2 {
      margin-left: 20px;
    }

    .registrationCheckMarkBox,
    .registrationBottomDivCheckmarkBox {
      width: 40px;
      height: 40px;
      background-color: #e4e3e3;
      margin-left: 10px;
      cursor: pointer;
      border: 5px solid red;
    }

    .registrationCheckMarkBox:hover,
    .registrationBottomDivCheckmarkBox:hover {
      opacity: 0.75;
    }

    .registrationCheckMarkBox span,
    .registrationBottomDivCheckmarkBox span {
      width: 30px;
    }

    .kidsRegistrationTeacherParent {
      color: #969696;
      /* display: none; */
    }

    .kidsRegistrationNumKids {
      padding: 10px 5px;
      margin-top: 10px;
    }

    .kidsRegistrationNumKids span,
    .kidsRegistrationNumKids input {
      padding: 0;
      margin: 0;
      line-height: normal;
    }

    .kidsRegistrationNumKids span {
      margin-right: 10px;
      color: #969696;
    }

    .kidsRegistrationNumKids input {
      width: 50px;
      border: 0.3px solid #b3b3b3;
      color: #969696;
      text-align: center;
    }

    .kidsRegistrationNumKidsDetails {
      padding: 10px 5px;
      margin-top: 10px;
    }

    .kidsRegistrationNumKidsDetails1 {
      width: 90vw;
      flex-direction: column;
      border: 0.3px solid #b3b3b3;
      border-radius: 10px;
      padding: 5px;
      margin: 10px auto;
    }

    .childInfoMainLabel {
      width: 70px;
      height: 50px;
      box-shadow: 0px 4px 4px 0px #3aa9e8;
      border-radius: 5px;
      color: #969696;
      font-size: 12px;
      margin-bottom: 10px;
    }

    .childInfoMainInputDiv span,
    .childInfoMainInputDiv1 span {
      color: #969696;
      font-size: 12px;
      margin-right: 5px;
    }

    .kidsRegistrationNumKidsDetails1 > input {
      padding: 0;
      margin: 0;
      line-height: normal;
      width: 70px;
      border: 0.3px solid #b3b3b3;
      color: #969696;
      text-align: center;
    }

    .childInfoMainInputDiv1 {
      margin-top: 10px;
    }

    .childInfoMainInputDiv1 input {
      border: 0.3px solid #b3b3b3;
      color: #969696;
      margin-left: 10px;
    }

    .kidsRegistrationButton {
      width: 175px;
      height: 40px;
      color: #fff;
      background-color: #ffb038;
      border-radius: 5px;
    }

    .registrationBottomDiv1 {
      flex-direction: column;
    }

    .kidsRegistrationBottomDiv1Span {
      color: #969696;
      font-size: 12px;
      font-weight: 500;
      margin-top: 18px;
    }

    .registrationBottomDiv1Div1 {
      margin: 0px 10px;
    }

    .registrationBottomDiv1Div1 > span {
      color: #969696;
    }

    .registrationBottomDiv2 {
      margin: 20px auto;
    }

    /*** End of Kids Registration Page ***/

    .kidsSettingsBack {
      position: absolute;
      left: 40px;
      top: 0px;
      font-size: 16px;
      color: #5a67d8;
      cursor: pointer;
      font-weight: 600;
      font-size: 12px;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      z-index: 10;
    }

    .kidsGamesContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
      width: 100%;
      margin: 0 auto 60px;
      padding: 0 40px;
      position: relative;
      z-index: 10;
    }

    /* Stats Overview */
    .kidsStatsOverview {
      display: grid;
      grid-template-columns: repeat(1, 3fr) !important;
      gap: 24px;
      margin-bottom: 30px;
    }

    .kidsWeekDays {
      display: grid;
      grid-template-columns: repeat(2, 4fr) !important;
      gap: 8px;
    }

    /* Sidebar Styles for Mobile */
    .kidsDashboardSidebar {
      position: fixed;
      top: 0;
      left: -100%;
      width: 80%;
      max-width: 280px;
      height: 100vh;
      background: linear-gradient(
        180deg,
        #9c06c1 0%,
        #7c3aed 50%,
        #2563eb 100%
      );
      color: white;
      display: flex;
      flex-direction: column;
      box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
      transition: left 0.3s ease;
      z-index: 999;
      overflow: hidden;
    }

    .kidsDashboardSidebar.mobileMenuOpen {
      left: 0;
    }

    .kidsDashboardSidebar::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 70%
      );
      animation: rotateBg 30s linear infinite;
    }

    .kidsSidebarHeader {
      padding: 80px 20px 20px;
      text-align: center;
      position: relative;
      z-index: 1;
    }

    .kidsUserAvatar {
      font-size: 56px;
      display: block;
      margin-bottom: 12px;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
      animation: bounceAvatar 2s ease-in-out infinite;
    }

    .kidsSidebarHeader h3 {
      margin: 0 0 8px;
      font-size: 18px;
      font-weight: 700;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
    }

    .kidsUserLevel {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(255, 255, 255, 0.2);
      padding: 6px 12px;
      border-radius: 16px;
      font-size: 12px;
      font-weight: 600;
      backdrop-filter: blur(10px);
    }

    .kidsLevelIcon {
      font-size: 14px;
    }

    /* Header */
    .kidsPracticeHeader {
      position: relative;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 5px 20px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
      margin-bottom: 10px;
    }

    .kidsHeaderLeft,
    .kidsHeaderRight {
      flex: 0 0 auto;
    }

    .kidsHeaderCenter {
      flex: 1;
      text-align: center;
    }

    .kidsBackButton {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 10px;
      background: white;
      border: 2px solid #e5e7eb;
      border-radius: 12px;
      font-size: 10px;
      font-weight: 600;
      color: #6b7280;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .kidsBackButton:hover {
      border-color: #ff6b6b;
      color: #ff6b6b;
      transform: translateX(-4px);
    }

    .kidsSubjectBadge {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 2px 24px;
      border-radius: 50px;
      color: white;
      font-size: 10px;
      font-weight: 700;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      margin-bottom: 6px;
    }

    .kidsSubjectIcon {
      font-size: 14px;
    }

    .kidsTopicName {
      font-size: 8px;
      color: #6b7280;
      font-weight: 500;
    }

    .kidsSettingsButton {
      width: 30px;
      height: 30px;
      border-radius: 12px;
      border: 2px solid #e5e7eb;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
    }

    .kidsSettingsButton:hover {
      border-color: #8b5cf6;
      color: #8b5cf6;
      transform: rotate(90deg);
    }

    /* Stats Bar */
    .kidsStatsBar {
      display: none !important;
    }

    .kidsStatItem {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
    }

    .kidsStatIcon {
      font-size: 32px;
    }

    /* Character Section */
    .kidsCharacterSection {
      display: none !important;
    }

    .kidsProgressSection {
      display: none;
    }

    .kidsQuestionLabel {
      display: none !important;
    }

    .kidsQuestionValue {
      font-size: 12px !important;
    }

    .kidsHintBox {
      display: none !important;
    }

    .kidsQuestionText {
      font-size: 12px !important;
    }

    .kidsMathsQuestionText,
    .kidsEnglishQuestionText {
      color: #545454;
      font-size: 16px;
      padding: 5px;
    }

    .kidsNumberInput {
      min-width: 150px;
      padding: 8px 12px;
      font-size: 14px !important;
    }

    .kidsQuestionCard {
      background: white;
      border-radius: 24px;
      padding: 0px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      margin-top: 10px;
    }

    .kidsSubmitButton {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 4px 18px;
      border-radius: 50px;
      font-size: 8px;
      margin-bottom: 10px;
    }
  } /*** End of (min-width: 320px) and (max-width: 767px) ***/
} /* End of Kids Dashboard Styles - Landscape */

/* Kids Upgrade Modal - Landscape */
@media (orientation: landscape) {
  .kidsUpgradeModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: kidsFadeIn 0.3s ease-out;
  }

  .kidsUpgradeModalContent {
    background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
    border-radius: 30px;
    padding: 40px;
    max-width: 600px;
    width: 90%;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: kidsSlideUp 0.3s ease-out;
    text-align: center;
    border: 4px solid #fdcb6e;
  }

  .kidsCloseModalButton {
    position: absolute;
    top: 20px;
    right: 20px;
    background: white;
    border: none;
    color: #e17055;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .kidsCloseModalButton:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .kidsUpgradeCharacter {
    font-size: 80px;
    margin-bottom: 20px;
    animation: kidsBounce 2s ease-in-out infinite;
  }

  .kidsUpgradeModalContent h2 {
    color: #2d3436;
    font-size: 32px;
    margin-bottom: 16px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .kidsUpgradeModalContent p {
    color: #636e72;
    font-size: 18px;
    margin-bottom: 12px;
    line-height: 1.5;
  }

  .kidsUpgradeOptions {
    display: flex;
    gap: 20px;
    margin: 30px 0;
    justify-content: center;
  }

  .kidsUpgradeButton {
    background: white;
    border: 3px solid transparent;
    border-radius: 20px;
    padding: 24px;
    flex: 1;
    max-width: 200px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .kidsUpgradeButton:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  }

  .kidsUpgradeButton i {
    font-size: 40px;
  }

  .kidsUpgradeButton span {
    font-size: 20px;
    font-weight: 600;
    color: #2d3436;
  }

  .kidsUpgradeButton small {
    font-size: 14px;
    color: #74b9ff;
  }

  .kidsStudentPlan {
    border-color: #a29bfe;
  }

  .kidsStudentPlan i {
    color: #6c5ce7;
  }

  .kidsFamilyPlan {
    border-color: #55efc4;
  }

  .kidsFamilyPlan i {
    color: #00b894;
  }

  .kidsContinueTomorrowButton {
    background: #74b9ff;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 14px 28px;
    border-radius: 50px;
    margin-top: 10px;
    transition: all 0.2s;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(116, 185, 255, 0.3);
  }

  .kidsContinueTomorrowButton:hover {
    background: #0984e3;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(116, 185, 255, 0.4);
  }

  .kidsQuestionLimit {
    background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
    border: 2px solid #f39c12;
    color: white;
  }

  @keyframes kidsFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes kidsSlideUp {
    from {
      transform: translateY(50px) scale(0.9);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }

  @keyframes kidsBounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }
  
  /* Kids Subscription Status in Dashboard */
  .kidsSubscriptionSection {
    margin: 2rem 0;
    max-width: 400px;
    animation: kidsFadeIn 0.5s ease-out;
  }
  
  /* Kids Subscription Status in NavBar */
  .navbar1-subscription {
    margin-right: 1rem;
  }
} /*** Kids Landscape ***/




@media screen and (orientation: portrait) {
  /* Settings Kids Page - Enhanced Styles for Portrait */
  .settingsKidsDiv {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
    overflow-x: hidden;
  }

  /* Floating Background Shapes */
  .kidsSettingsFloatingShapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .kidsFloatingShape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    animation: kidsFloat 20s ease-in-out infinite;
  }

  .kidsFloatingShape1 {
    width: 80px;
    height: 80px;
    background: #ffb038;
    top: 15%;
    left: 10%;
    animation-delay: 0s;
  }

  .kidsFloatingShape2 {
    width: 100px;
    height: 100px;
    background: #3cb3f6;
    top: 40%;
    right: 5%;
    animation-delay: 3s;
  }

  .kidsFloatingShape3 {
    width: 60px;
    height: 60px;
    background: #9c06c1;
    bottom: 25%;
    left: 5%;
    animation-delay: 6s;
  }

  .kidsFloatingShape4 {
    width: 70px;
    height: 70px;
    background: #1fbe4c;
    top: 60%;
    right: 15%;
    animation-delay: 9s;
  }

  .kidsFloatingShape5 {
    width: 50px;
    height: 50px;
    background: #ff6b6b;
    bottom: 10%;
    right: 10%;
    animation-delay: 12s;
  }

  @keyframes kidsFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    25% {
      transform: translateY(-15px) rotate(90deg);
    }
    50% {
      transform: translateY(8px) rotate(180deg);
    }
    75% {
      transform: translateY(-10px) rotate(270deg);
    }
  }

  /* Header Section */
  .settingsKidsHeaderDiv {
    width: 100%;
    margin-top: 70px;
    padding: 15px 20px;
    position: relative;
    z-index: 10;
  }

  .kidsBackArrow {
    font-size: 16px;
    transition: transform 0.3s ease;
  }

  .kidsSettingsBack:hover .kidsBackArrow {
    transform: translateX(-3px);
  }

  .settingsKidsMainHeaderInnerDiv {
    width: 100%;
    text-align: center;
    padding: 40px 10px 20px;
  }

  .settingsKidsMainHeader {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    line-height: 1.4;
  }

  .kidsHeaderWord {
    display: inline-block;
    margin: 0 4px;
    opacity: 0;
    transform: translateY(20px);
    animation: kidsWordAppear 0.6s ease-out forwards;
  }

  .kidsHeaderWord1 {
    animation-delay: 0.1s;
    color: #ff6b6b;
  }
  .kidsHeaderWord2 {
    animation-delay: 0.2s;
    color: #5a67d8;
  }
  .kidsHeaderWord3 {
    animation-delay: 0.3s;
    color: #ffb038;
  }
  .kidsHeaderWord4 {
    animation-delay: 0.4s;
    color: #1fbe4c;
  }
  .kidsHeaderWord5 {
    animation-delay: 0.5s;
    color: #9c06c1;
  }

  .kidsSparkleEmoji {
    font-size: 24px;
    display: inline-block;
    margin-left: 8px;
    animation: kidsSparkle 2s ease-in-out infinite;
  }

  @keyframes kidsWordAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes kidsSparkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
    }
    50% {
      transform: scale(1.2) rotate(180deg);
    }
  }

  /* Location Section */
  .kidsLocationSection {
    margin: 30px auto;
    max-width: 90%;
    text-align: center;
    position: relative;
    z-index: 10;
  }

  .kidsLocationTitle {
    font-size: 20px;
    color: #2d3748;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .kidsLocationIcon {
    margin-right: 8px;
    animation: kidsLocationBounce 2s ease-in-out infinite;
  }

  @keyframes kidsLocationBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3px);
    }
  }

  /* Select Wrappers */
  .kidsCurriculumCountryDiv,
  .kidsCurriculumProvinceOrStateDiv {
    margin: 15px auto;
    position: relative;
    z-index: 10;
  }

  .kidsSelectWrapper {
    position: relative;
    display: inline-block;
    background: white;
    border-radius: 50px;
    padding: 5px 15px 5px 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    max-width: 280px;
  }

  .kidsSelectWrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  .kidsSelectEmoji {
    font-size: 20px;
    margin-right: 8px;
    vertical-align: middle;
  }

  .kidsCurriculumCountryDropDown,
  .kidsCurriculumProvinceOrStateDropDown {
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    padding: 8px 35px 8px 5px;
    cursor: pointer;
    appearance: none;
    outline: none;
    max-width: 200px;
  }

  .kidsCurriculumCountryDropDown option:disabled {
    color: #a0aec0;
    font-style: italic;
  }

  .kidsSelectArrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #5a67d8;
    font-size: 12px;
    pointer-events: none;
    transition: transform 0.3s ease;
  }

  .kidsSelectWrapper:hover .kidsSelectArrow {
    transform: translateY(-50%) translateY(2px);
  }

  /* Action Cards Section */
  .settingsKidsMiddleDiv {
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10;
    padding: 0 20px;
  }

  .kidsActionTitle {
    font-size: 24px;
    color: #2d3748;
    margin-bottom: 30px;
    font-weight: 700;
    text-align: center;
  }

  .settingsKidsBoxes {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-top: 0;
    width: 100%;
    max-width: 320px;
  }

  .settingsKidsLearnBox,
  .settingsKidsGamesBox {
    width: 100%;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    padding: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background: white;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .settingsKidsLearnBox {
    background: linear-gradient(135deg, #e0f7fa 0%, #b2dfdb 100%);
  }

  .settingsKidsGamesBox {
    background: linear-gradient(135deg, #fff3e0 0%, #ffccbc 100%);
  }

  .kidsBoxContent {
    position: relative;
    z-index: 2;
    text-align: center;
  }

  .kidsBoxEmoji {
    font-size: 48px;
    display: block;
    margin-bottom: 15px;
    animation: kidsEmojiFloat 3s ease-in-out infinite;
  }

  @keyframes kidsEmojiFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  .kidsBoxTitle {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 8px 0;
    color: #2d3748;
  }

  .kidsBoxDescription {
    font-size: 14px;
    color: #4a5568;
    margin: 0 0 15px 0;
  }

  .kidsBoxStars {
    display: flex;
    justify-content: center;
    gap: 5px;
  }

  .kidsStar {
    font-size: 16px;
    animation: kidsStarTwinkle 2s ease-in-out infinite;
  }

  .kidsStar:nth-child(2) {
    animation-delay: 0.3s;
  }
  .kidsStar:nth-child(3) {
    animation-delay: 0.6s;
  }

  @keyframes kidsStarTwinkle {
    0%,
    100% {
      opacity: 0.5;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.2);
    }
  }

  /* Box Glow Effects */
  .kidsBoxGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .kidsLearnGlow {
    background: radial-gradient(
      circle,
      rgba(31, 190, 76, 0.3) 0%,
      transparent 70%
    );
  }

  .kidsGamesGlow {
    background: radial-gradient(
      circle,
      rgba(255, 107, 107, 0.3) 0%,
      transparent 70%
    );
  }

  /* Hover Effects */
  .settingsKidsLearnBox:hover,
  .settingsKidsGamesBox:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  }

  .kidsBoxHovered .kidsBoxGlow {
    opacity: 1;
  }

  .kidsBoxHovered .kidsBoxEmoji {
    animation-duration: 0.5s;
  }

  /* Selected State */
  .kidsBoxSelected {
    transform: scale(0.95);
    opacity: 0.8;
  }

  /* Footer Section */
  .kidsSettingsFooter {
    margin-top: 40px;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    z-index: 10;
    padding: 0 20px;
  }

  .kidsEncouragement {
    font-size: 18px;
    margin: 0;
    line-height: 1.4;
  }

  .kidsRainbowText {
    background: linear-gradient(
      to right,
      #ff6b6b,
      #ffb038,
      #ffe66d,
      #1fbe4c,
      #3cb3f6,
      #9c06c1
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    animation: kidsRainbowMove 5s ease-in-out infinite;
  }

  @keyframes kidsRainbowMove {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  .kidsLearnTopStatement {
    font-size: 20px;
    font-weight: 700;
    padding: 5px;
    margin-top: 25px;
    border: 2px solid green;
    margin-bottom: 0;
  }

  .kidsLearnTopStatement .learn {
    color: #ffb038;
  }

  .kidsLearnTopStatement .fun {
    color: #3cb3f7;
  }

  .kids_current_settings {
    margin-top: 0px;
    margin-bottom: 0;
    display: none;
  }

  .kidsLearnSubjectsButtonDiv {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px 0px;
    margin-top: 0px;
  }

  .kidsLearnMathDiv:hover,
  .kidsLearnEnglishDiv:hover,
  .kidsLearnScienceDiv:hover {
    cursor: pointer;
    background-color: #f2f2f2;
  }

  .kidsLearnSubjectsButtonDiv1Div1 {
    width: 100%;
    flex-direction: column;
  }

  .kidsLearnSubjectsButtonDiv1Div2 {
    width: 100%;
  }

  .kidsLearnDiv2Div1 {
    width: 50%;
    height: 100%;
  }

  .kidsLearnDiv2Div2 {
    width: 50%;
    height: 100%;
  }

  .kidsLearnDiv1Div1 {
    width: 50%;
    height: 100%;
  }

  .kidsLearnScienceDiv {
    /** square of width 40% of parent width and height is same as width; with 5px gray border radius; white background **/
    width: 125px;
    height: 125px;
    padding-bottom: 30%;
    border-radius: 5px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid #b5c5cd;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
  }

  /** red circle centered in square; circle diameter is 80% of square width **/
  .kidsLearnScienceDivCircle {
    position: absolute;
    width: 50%;
    padding-bottom: 50%;
    border-radius: 50%;
    margin: 0 auto;
    background-color: #eadb52;
    top: 25%;
  }

  .kidsLearnScienceDivCircleImage {
    position: absolute;
    width: 50%;
    padding-bottom: 50%;
    margin: 0 auto;
    top: 25%;
    left: 25%;
  }

  .kidsLearnEnglishDiv {
    /** square of width 40% of parent width and height is same as width; with 5px gray border radius; white background **/
    width: 125px;
    height: 125px;
    padding-bottom: 30%;
    border-radius: 5px;
    margin: 20px auto;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid #b5c5cd;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
  }

  .kidsLearnEnglishDivCircle {
    position: absolute;
    width: 50%;
    padding-bottom: 50%;
    border-radius: 50%;
    margin: 0 auto;
    background-color: #3aad76;
    top: 25%;
  }

  .kidsLearnEnglishDivCircle h3 {
    position: absolute;
    padding-bottom: 50%;
    margin: 0 auto;
    top: 35%;
    font-family: "Oldenburg";
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color: #ffffff;
  }

  .kidsLearnMathDiv {
    width: 125px;
    height: 125px;
    padding-bottom: 30%;
    border-radius: 5px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid #b5c5cd;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
  }

  /** red circle centered in square; circle diameter is 80% of square width **/
  .kidsLearnMathDivCircle {
    position: absolute;
    width: 50%;
    padding-bottom: 50%;
    border-radius: 50%;
    margin: 0 auto;
    background-color: #bb1717;
    top: 25%;
  }

  .kidsLearnMathDivCircleImage {
    position: absolute;
    width: 50%;
    padding-bottom: 50%;
    margin: 0 auto;
    top: 25%;
    left: 25%;
  }

  .kidsLearnMathDiv span,
  .kidsLearnEnglishDiv span,
  .kidsLearnScienceDiv span {
    /** place at bottom of parent div **/
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #122e3b;
    font-weight: 400;
    font-size: 0.8rem;
  }

  .kidsGradeLevelDiv {
    margin-top: 0;
  }

  .kidsgradeLevelSelect {
    font-size: 1rem;
    height: 35px;
    width: 150px;
  }

  /* Enhanced KidsLearn Styles - Portrait */
  .kidsLearnMainDiv {
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #f8f9fa 0%, #ebf2ff 100%);
    overflow-x: hidden;
    margin-top: 0px;
  }

  /* Floating Background Shapes */
  .kidsLearnFloatingShapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .kidsLearnFloatingShape {
    position: absolute;
    opacity: 0.06;
    animation: kidsLearnFloat 25s ease-in-out infinite;
  }

  .kidsLearnFloatingShape1 {
    width: 100px;
    height: 100px;
    background: #ff6b6b;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    top: 15%;
    left: 5%;
    animation-delay: 0s;
  }

  .kidsLearnFloatingShape2 {
    width: 80px;
    height: 80px;
    background: #4ecdc4;
    border-radius: 50%;
    top: 50%;
    right: 5%;
    animation-delay: 5s;
  }

  .kidsLearnFloatingShape3 {
    width: 60px;
    height: 60px;
    background: #ffd93d;
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    bottom: 25%;
    left: 10%;
    animation-delay: 10s;
  }

  .kidsLearnFloatingShape4 {
    width: 50px;
    height: 50px;
    background: #95e1d3;
    border-radius: 50%;
    top: 35%;
    right: 15%;
    animation-delay: 15s;
  }

  @keyframes kidsLearnFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
    33% {
      transform: translate(20px, -20px) rotate(120deg);
    }
    66% {
      transform: translate(-15px, 15px) rotate(240deg);
    }
  }

  /* Header Section */
  .kidsLearnHeaderSection {
    width: 100%;
    padding: 15px 20px;
    margin-top: 10px;
    position: relative;
    z-index: 10;
  }

  .kidsLearnMainTitle {
    font-size: 32px;
    font-weight: 800;
    text-align: center;
    margin: 20px 0;
    position: relative;
    line-height: 1.3;
  }

  .kidsLearnTitleWord {
    display: inline-block;
    margin: 0 5px;
    opacity: 0;
    transform: translateY(20px);
    animation: kidsLearnWordAppear 0.8s ease-out forwards;
  }

  .kidsLearnTitleWord1 {
    animation-delay: 0.1s;
    color: #ff6b6b;
  }
  .kidsLearnTitleWord2 {
    animation-delay: 0.3s;
    color: #4ecdc4;
  }
  .kidsLearnTitleWord3 {
    animation-delay: 0.5s;
    color: #ffd93d;
  }

  .kidsLearnSparkle {
    font-size: 28px;
    display: inline-block;
    margin-left: 8px;
    animation: kidsLearnSparkle 3s ease-in-out infinite;
  }

  @keyframes kidsLearnWordAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes kidsLearnSparkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.2) rotate(180deg);
      opacity: 1;
    }
  }

  .kids_current_settings {
    display: flex !important;
    text-align: center;
    margin: 15px 0;
    justify-content: center;
    align-items: center;
  }

  .kidsLocationEmoji {
    font-size: 20px;
    margin-right: 6px;
    animation: kidsLocationPulse 2s ease-in-out infinite;
  }

  @keyframes kidsLocationPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .kidsLocationText {
    font-size: 16px;
    color: #5a67d8;
    font-weight: 600;
  }

  /* Subject Cards Container */
  .kidsLearnSubjectsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin: 30px auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
  }

  .kidsLearnSubjectCard {
    width: 100%;
    max-width: 320px;
    height: 220px;
    background: white;
    border-radius: 25px;
    padding: 20px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

  .kidsSubjectsVisible .kidsLearnSubjectCard {
    animation: kidsSubjectCardAppear 0.6s ease-out forwards;
  }

  @keyframes kidsSubjectCardAppear {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kidsLearnMathCard {
    background: linear-gradient(135deg, #ffe5e5 0%, #ffd4e5 100%);
  }

  .kidsLearnEnglishCard {
    background: linear-gradient(135deg, #e5f3ff 0%, #e5e5ff 100%);
  }

  .kidsLearnScienceCard {
    background: linear-gradient(135deg, #fffde5 0%, #ffe5f5 100%);
  }

  .kidsSubjectCardContent {
    position: relative;
    z-index: 2;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .kidsSubjectIconWrapper {
    position: relative;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kidsSubjectEmoji {
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 36px;
    animation: kidsEmojiFloat 4s ease-in-out infinite;
  }

  @keyframes kidsEmojiFloat {
    0%,
    100% {
      transform: translateY(0) rotate(-5deg);
    }
    50% {
      transform: translateY(-10px) rotate(5deg);
    }
  }

  .kidsSubjectImage {
    width: 70px;
    height: 70px;
    object-fit: contain;
  }

  .kidsEnglishHello {
    width: 80px;
    height: 80px;
    background: #4ecdc4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kidsEnglishHello h3 {
    color: white;
    font-size: 18px;
    font-weight: 800;
    margin: 0;
  }

  .kidsSubjectTitle {
    font-size: 24px;
    font-weight: 800;
    color: #2d3748;
    margin: 10px 0 5px;
  }

  .kidsSubjectDescription {
    font-size: 14px;
    color: #718096;
    margin: 0 0 15px;
  }

  .kidsSubjectStars {
    display: flex;
    justify-content: center;
    gap: 5px;
  }

  .kidsSubjectStar {
    font-size: 18px;
    animation: kidsStarTwinkle 2s ease-in-out infinite;
  }

  .kidsSubjectStar:nth-child(2) {
    animation-delay: 0.4s;
  }
  .kidsSubjectStar:nth-child(3) {
    animation-delay: 0.8s;
  }

  /* Card Glow Effect */
  .kidsSubjectCardGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  /* Hover States */
  .kidsLearnSubjectCard:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  }

  .kidsSubjectHovered .kidsSubjectCardGlow {
    opacity: 0.3;
  }

  .kidsSubjectHovered .kidsSubjectEmoji {
    animation-duration: 1s;
  }

  /* Selected State */
  .kidsSubjectSelected {
    transform: scale(1.02);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  }

  .kidsSubjectSelected::after {
    content: "✓";
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: #48bb78;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
  }

  /* Click Animation */
  .kidsSubjectClicked {
    animation: kidsCardClick 0.6s ease;
  }

  @keyframes kidsCardClick {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Grade Selection Section */
  .kidsGradeLevelSection {
    margin: 30px auto 50px;
    max-width: 90%;
    position: relative;
    z-index: 10;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
  }

  .kidsGradeVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kidsGradeSelectionWrapper {
    text-align: center;
  }

  .kidsGradeTitle {
    font-size: 22px;
    color: #2d3748;
    margin-bottom: 20px;
    font-weight: 700;
  }

  .kidsGradeIcon {
    margin-right: 8px;
    animation: kidsGradeIconBounce 2s ease-in-out infinite;
  }

  @keyframes kidsGradeIconBounce {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-3px) rotate(5deg);
    }
  }

  .kidsGradeSelectWrapper {
    position: relative;
    display: inline-block;
    background: white;
    border-radius: 50px;
    padding: 5px 20px 5px 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }

  .kidsGradeSelectWrapper:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  }

  .kidsGradeEmoji {
    font-size: 24px;
    margin-right: 10px;
    vertical-align: middle;
  }

  .kidsgradeLevelSelect {
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    padding: 12px 40px 12px 8px;
    cursor: pointer;
    appearance: none;
    outline: none;
    min-width: 200px;
    height: auto;
    width: auto;
  }

  .kidsGradeSelectArrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #5a67d8;
    font-size: 14px;
    pointer-events: none;
    transition: transform 0.3s ease;
  }

  .kidsGradeSelectWrapper:hover .kidsGradeSelectArrow {
    transform: translateY(-50%) translateY(2px);
  }

  /* Coming Soon Message */
  .kidsComingSoonMessage {
    text-align: center;
    padding: 30px 20px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    margin: 0 20px;
  }

  .kidsComingSoonEmoji {
    font-size: 48px;
    display: block;
    margin-bottom: 15px;
    animation: kidsComingSoonBounce 2s ease-in-out infinite;
  }

  @keyframes kidsComingSoonBounce {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .kidsComingSoonMessage p {
    font-size: 18px;
    color: #4a5568;
    margin: 0;
    line-height: 1.5;
  }

  .kidsComingSoonHighlight {
    color: #ffb038;
    font-weight: 700;
  }

  .kidsComingSoonSubtext {
    font-size: 14px;
    color: #718096;
  }

  /* Footer Section */
  .kidsLearnFooter {
    margin: 40px 20px 30px;
    text-align: center;
    position: relative;
    z-index: 10;
  }

  .kidsLearnEncouragement {
    font-size: 20px;
    margin: 0;
  }

  /* Enhanced KidsGames Styles - Landscape */
  .kidsGamesMainDiv {
    min-height: calc(100vh - 50px);
    position: relative;
    background: linear-gradient(135deg, #ffefd5 0%, #ffe4e1 100%);
    overflow-x: hidden;
    margin-top: 50px;
  }

  /* Floating Background Shapes */
  .kidsGamesFloatingShapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .kidsGamesFloatingShape {
    position: absolute;
    opacity: 0.1;
    animation: kidsGamesFloat 30s ease-in-out infinite;
  }

  .kidsGamesFloatingShape1 {
    width: 150px;
    height: 150px;
    background: #ff6b6b;
    border-radius: 50%;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .kidsGamesFloatingShape2 {
    width: 200px;
    height: 200px;
    background: #4ecdc4;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    top: 50%;
    right: 5%;
    animation-delay: 6s;
  }

  .kidsGamesFloatingShape3 {
    width: 120px;
    height: 120px;
    background: #ffd93d;
    border-radius: 50%;
    bottom: 20%;
    left: 10%;
    animation-delay: 12s;
  }

  .kidsGamesFloatingShape4 {
    width: 100px;
    height: 100px;
    background: #95e1d3;
    border-radius: 50%;
    top: 30%;
    right: 20%;
    animation-delay: 18s;
  }

  .kidsGamesFloatingShape5 {
    width: 80px;
    height: 80px;
    background: #c7ceea;
    border-radius: 50%;
    bottom: 30%;
    right: 15%;
    animation-delay: 24s;
  }

  @keyframes kidsGamesFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
      transform: translate(50px, -30px) rotate(90deg) scale(1.1);
    }
    50% {
      transform: translate(-30px, 50px) rotate(180deg) scale(0.9);
    }
    75% {
      transform: translate(30px, 30px) rotate(270deg) scale(1.05);
    }
  }

  /* Header Section */
  .kidsGamesHeaderSection {
    width: 100%;
    padding: 20px 0px;
    margin-top: 10px;
    position: relative;
    z-index: 10;
    text-align: center;
  }

  .kidsGamesBack {
    position: absolute;
    left: 40px;
    top: 20px;
    font-size: 16px;
    color: #5a67d8;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .kidsBackArrow {
    font-size: 20px;
    transition: transform 0.3s ease;
  }

  .kidsGamesBack:hover .kidsBackArrow {
    transform: translateX(-5px);
  }

  .kidsGamesMainTitle {
    font-size: 56px;
    font-weight: 800;
    margin: 30px 0 20px;
    position: relative;
    display: inline-block;
  }

  .kidsGamesTitleWord {
    display: inline-block;
    margin: 0 12px;
    opacity: 0;
    transform: translateY(30px);
    animation: kidsGamesWordAppear 0.8s ease-out forwards;
  }

  .kidsGamesTitleWord1 {
    animation-delay: 0.1s;
    color: #ff6b6b;
  }
  .kidsGamesTitleWord2 {
    animation-delay: 0.3s;
    color: #4ecdc4;
  }
  .kidsGamesTitleWord3 {
    animation-delay: 0.5s;
    color: #ffd93d;
  }

  .kidsGamesSparkle {
    position: absolute;
    top: -20px;
    right: -60px;
    font-size: 40px;
    animation: kidsGamesSparkle 3s ease-in-out infinite;
  }

  @keyframes kidsGamesWordAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes kidsGamesSparkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
    }
    25% {
      transform: scale(1.1) rotate(15deg);
    }
    50% {
      transform: scale(1.2) rotate(-15deg);
    }
    75% {
      transform: scale(1.1) rotate(10deg);
    }
  }

  .kidsGamesSubtitle {
    font-size: 20px;
    color: #718096;
    margin: 0;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.8s forwards;
  }

  @keyframes fadeInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Category Section */
  .kidsGamesCategorySection {
    margin: 40px auto;
    max-width: 1200px;
    position: relative;
    z-index: 10;
  }

  .kidsGamesCategoryContainer {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0 20px;
  }

  .kidsGamesCategoryBtn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: white;
    border: 3px solid transparent;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: categoryAppear 0.6s ease-out forwards;
  }

  @keyframes categoryAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsGamesCategoryBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  }

  .kidsCategorySelected {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  }

  .kidsCategoryEmoji {
    font-size: 24px;
    animation: emojiPulse 2s ease-in-out infinite;
  }

  @keyframes emojiPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.15);
    }
  }

  .kidsCategoryName {
    font-size: 16px;
  }

  /* Games Container */
  .kidsGamesContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    width: 100%;
    margin: 0 auto 60px;
    padding: 0 40px;
    position: relative;
    z-index: 10;
  }

  .kidsGameCard {
    background: white;
    border-radius: 25px;
    padding: 25px;
    min-height: 280px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(40px) scale(0.95);
  }

  .kidsGamesVisible .kidsGameCard {
    animation: gameCardAppear 0.6s ease-out forwards;
  }

  @keyframes gameCardAppear {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kidsGameCardContent {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  .kidsGameEmoji {
    font-size: 60px;
    margin-bottom: 15px;
    animation: gameEmojiFloat 3s ease-in-out infinite;
  }

  @keyframes gameEmojiFloat {
    0%,
    100% {
      transform: translateY(0) rotate(-5deg);
    }
    50% {
      transform: translateY(-10px) rotate(5deg);
    }
  }

  .kidsGameTitle {
    font-size: 24px;
    font-weight: 800;
    color: white;
    margin: 0 0 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }

  .kidsGameDescription {
    font-size: 16px;
    color: white;
    margin: 0 0 20px;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  }

  .kidsGameDifficulty {
    margin-bottom: 20px;
  }

  .kidsDifficultyLabel {
    font-size: 14px;
    color: white;
    opacity: 0.8;
    display: block;
    margin-bottom: 5px;
  }

  .kidsGameStars {
    display: flex;
    justify-content: center;
    gap: 5px;
  }

  .kidsGameStar {
    font-size: 20px;
    transition: all 0.3s ease;
  }

  .kidsStarFilled {
    animation: starTwinkle 2s ease-in-out infinite;
  }

  @keyframes starTwinkle {
    0%,
    100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.8;
    }
  }

  .kidsGamePlayBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    padding: 12px 24px;
    margin: 0 auto;
    transition: all 0.3s ease;
  }

  .kidsPlayIcon {
    font-size: 16px;
    color: white;
  }

  .kidsPlayText {
    font-size: 16px;
    font-weight: 700;
    color: white;
  }

  /* Hover Effects */
  .kidsGameCard:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  }

  .kidsGameCardHovered .kidsGameEmoji {
    animation-duration: 0.8s;
  }

  .kidsGameCardHovered .kidsGamePlayBtn {
    background: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
  }

  /* Click Animation */
  .kidsGameCardClicked {
    animation: gameCardClick 0.4s ease;
  }

  @keyframes gameCardClick {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Card Glow */
  .kidsGameCardGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .kidsGameCardHovered .kidsGameCardGlow {
    opacity: 1;
  }

  /* Empty State */
  .kidsGamesEmptyState {
    text-align: center;
    padding: 60px 20px;
    position: relative;
    z-index: 10;
  }

  .kidsEmptyEmoji {
    font-size: 80px;
    display: block;
    margin-bottom: 20px;
    animation: emptyBounce 2s ease-in-out infinite;
  }

  @keyframes emptyBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-20px);
    }
  }

  .kidsGamesEmptyState p {
    font-size: 20px;
    color: #718096;
    margin: 0 0 30px;
  }

  .kidsShowAllBtn {
    padding: 15px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
  }

  .kidsShowAllBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(102, 126, 234, 0.5);
  }

  /* Footer */
  .kidsGamesFooter {
    text-align: center;
    margin: 60px 0 40px;
    position: relative;
    z-index: 10;
  }

  .kidsGamesEncouragement {
    font-size: 24px;
    margin: 0;
  }
  /***** End of Kids Games ***/

  /********** Kids Practice Page **************/

  .kidsPracticeMainDiv {
    width: 100%;
    margin-top: 50px;
  }

  .kidsPracticeMainDivHeaderDiv {
    width: 100%;
    margin-top: 20px;
    padding: 10px 50px;
  }

  .kidsPracticeMainDivHeaderDiv > span {
    color: #122e3b;
    cursor: pointer;
  }

  .kidsMathTopicMainDiv h2,
  .kidsEnglishTopicMainDiv h2,
  .kidsScienceTopicMainDiv h2 {
    color: #ffb038;
    text-align: center;
  }

  .kidsMathTopicMainDivLocation,
  .kidsScienceTopicMainDivLocation,
  .kidsEnglishTopicMainDivLocation {
    font-size: 16px;
    color: #122e3b;
  }

  .kidsMathTopicsRow1,
  .kidsMathTopicsRow2,
  .kidsMathTopicsRow3,
  .kidsEnglishTopicsRow1,
  .kidsEnglishTopicsRow2,
  .kidsEnglishTopicsRow3,
  .kidsScienceTopicsRow1,
  .kidsScienceTopicsRow2,
  .kidsScienceTopicsRow3 {
    flex-direction: column;
  }

  .kidsTopicBox {
    width: 200px;
    height: 200px;
    border: 1px solid #fafafa;
    border-radius: 20px;
    box-shadow: 0px 4px 4px 0px #b5c5cd;
    margin: 20px;
    text-align: center;
  }

  .kidsTopicBox:hover {
    cursor: pointer;
    background-color: #f2f2f2;
  }

  .kidsTopicBox > div {
    height: 70%;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: 24px;
  }

  .kidsTopicBox span {
    font-size: 30px;
  }

  .kidsTopicBox p {
    color: #122e3b;
    font-size: 14px;
  }

  .kidsQuestionOuterDiv {
    width: 100%;
  }

  .kidsQuestionDiv {
    width: 100%;
    min-height: 800px;
    margin-top: 5px;
  }

  .kidsQuestionsDivHeader {
    width: 100%;
    margin-top: 5px;
    padding: 10px 50px;
  }

  .kidsQuestionsDivHeader h1 {
    color: #545454;
    font-weight: 400;
    font-size: 25px;
  }

  .kidsPrevNextOuterDiv {
    margin-top: 50px;
  }

  .kidsPrevNextOuterDiv {
    width: 100%;
  }

  .kidsPrevNextDiv {
    width: 300px;
  }

  .kidsPreviousButton,
  .kidsNextButton {
    width: 60px;
    height: 60px;
    border-radius: 5px;
    margin: 10px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    background: #b4b4b499;
    color: #fff;
  }

  .kidsNextPrevButtonEnabled {
    background: #3cb3f699;
    color: #686767;
  }

  .kidsPracticeFooterDiv {
    width: 100%;
    height: 60px;
    margin: 50px auto;
    padding-bottom: 20px;
  }

  .kidsPracticeFooterDivLeft {
    width: 200px;
    height: 60px;
    position: relative;
  }

  .kidsPracticeFooterDivRight {
    width: 850px;
    height: 60px;
  }

  .kidsPracticeFooterButton {
    width: 150px;
    height: 50px;
    border-radius: 5px;
    margin: 10px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    background-color: #dfdfdf;
    color: #686767;
  }

  .kidsPracticeFooterExitButton {
    width: 150px;
    height: 50px;
    border-radius: 5px;
    margin: 10px;
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    background-color: #ffb038;
    color: #fff;
  }

  .kidsQuestionsSection {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 500px;
  }

  .kidsMathsQuestionText,
  .kidsEnglishQuestionText {
    color: #545454;
    font-size: 36px;
    padding: 20px;
  }

  .kids_input_answer {
    width: 250px;
    height: 80px;
    border-radius: 7px;
    font-size: 36px;
    border: 1px solid #545454;
    background: #eaeaea;
  }

  .buttonOptions {
    width: 150px;
    height: 50px;
    border: 1px solid #545454;
  }

  .kidsPracticeStarsDiv {
    height: auto;
    margin-right: 10px;
  }

  .starImageDiv {
    width: 70px;
    height: 70px;
    background-color: #d9d9d9;
    margin-bottom: 5px;
    cursor: pointer;
  }

  .topicsListHeader {
    width: 98%;
    padding: 20px 10px;
    background-color: lightgray;
    margin-bottom: 30px;
    margin-top: 30px;
    font-size: 20px;
  }

  .topicsListDiv {
    /* border: 0.1px solid #122E3B; */
    width: 270px;
    padding: 0;
    margin-bottom: 50px;
    cursor: pointer;
    width: 100%;
  }

  .topcsListDiv p {
    font-size: 12px;
  }

  .topicsToggleDiv {
    width: 70vw;
    padding: 10px 0px;
  }

  .list_or_grid_icon {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /***** End of Kids Practice Page *********/

  /************** Kids Topic Page ******************/

  .ontario_grades_1_6_math_topics_div,
  .nevada_grades_1_6_math_topics_div {
    width: 100%;
    padding: 0;
  }

  .ontario_grades_1_6_math_topics_div h5 {
    color: #122e3b;
    text-align: center;
  }

  .kids_strand_div,
  .kids_strand_div1 {
    width: 95%;
    padding: 8px;
    margin: 20px auto;
  }

  .kids_strand_div h2 {
    font-size: 1.2rem;
  }

  .kids_strand_subtrandDiv {
    width: 100%;
    align-items: flex-start;
  }

  .kids_strand_subtrandDiv1 {
    width: 100%;
  }

  .kids_strand_subtrand_h5 {
    width: 100%;
    padding: 5px 2px;
    margin-top: 20px;
    cursor: pointer;
  }

  .kids_strand_subtrand_h5:hover {
    background-color: burlywood;
    opacity: 0.75;
  }

  .kids_strand_subtrand_p_div_p1 {
    font-weight: 600;
    margin-left: 20px;
    width: 80%;
  }

  .kids_strand_substrand_p_div_p2 {
    margin-left: 30px;
    width: 80%;
  }

  .kids_strand_subtrand_p_div {
    width: 100%;
    cursor: pointer;
  }

  .kids_strand_subtrand_p_div:hover {
    background-color: #f0f0f0;
  }

  .kids_strand_subtrandDiv1_separator {
    width: 90%;
    height: 5px;
    background-color: #3aad76;
    margin: 20px auto;
    border-radius: 10px;
    opacity: 0.5;
  }

  /********** End of Kids Topic Page **************/

  .kidsTopicBoxContainerOuterDiv {
    flex-direction: column;
  }

  /********** Kids Registration Page **************/

  .kidsRegistrationHeader {
    margin-top: 60px;
  }

  .kidsRegistrationHeaderP {
    color: #122e3b;
    font-weight: 600;
    text-align: center;
  }

  .kidsRegistrationHeaderSpan {
    color: #ffb038;
    margin: 0px 5px;
  }

  .kidsRegistrationHeaderRolesDiv1 {
    width: 98vw;
    height: 180px;
    border: 0.3px solid #b3b3b3;
    border-radius: 10px;
    padding: 0;
  }

  .kidsRegistrationHeaderRolesButtonsDiv0 {
    flex-direction: column;
    width: 80%;
  }

  .kidsRegistrationHeaderRolesButtonsDiv {
    flex-direction: column;
  }

  .kidsRegistrationHeaderRolesDiv1 p {
    font-weight: bold;
    color: #656565;
  }

  .kidsRegistrationHeaderRolesButtonsDiv button:hover {
    opacity: 0.75;
    cursor: pointer;
  }

  .kidsRegistrationRolesButtonTeacher {
    width: 150px;
    height: 50px;
    border-radius: 5px;
    color: #fff;
    margin-bottom: 10px;
    background-color: #b5c5cd;
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
  }

  .kidsRegistrationRolesButtonStudent {
    width: 150px;
    height: 50px;
    border-radius: 5px;
    color: #fff;
    margin-top: 10px;
    background-color: #122e3b;
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
  }

  .kidsRegistrationRolesButtonNotChosen {
    width: 150px;
    height: 50px;
    border-radius: 5px;
    color: #fff;
    background-color: #e4e3e3;
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
  }

  .kidsRegistrationHeaderRolesDiv2 {
    display: none;
  }

  .kidsRegistrationRibbonsDiv {
    width: 150px;
    height: 180px;
    margin-right: 0;
    clip-path: polygon(0% 0%, 40% 0%, 100% 40%, 100% 70%, 0% 0%);
  }

  .teachercolor {
    background-color: #b5c5cd;
  }

  .studentcolor {
    background-color: #122e3b;
  }

  .notChosenColor {
    background-color: #e4e3e3;
  }

  .registrationMiddleDiv {
    width: 100%;
    margin-top: 10px;
  }

  .registrationMiddleDiv1 {
    width: 100%;
    align-items: center;
    justify-content: space-around;
    padding-right: 30px;
  }

  .registrationMiddleDiv2 {
    justify-content: space-around;
  }

  .registrationCheckMarkBoxDiv1 {
    margin-right: 20px;
  }

  .registrationCheckMarkBoxDiv2 {
    margin-left: 20px;
  }

  .registrationCheckMarkBox,
  .registrationBottomDivCheckmarkBox {
    width: 40px;
    height: 40px;
    background-color: #e4e3e3;
    margin-left: 10px;
    cursor: pointer;
  }

  .registrationCheckMarkBox:hover,
  .registrationBottomDivCheckmarkBox:hover {
    opacity: 0.75;
  }

  .registrationCheckMarkBox span,
  .registrationBottomDivCheckmarkBox span {
    width: 30px;
  }

  .kidsRegistrationTeacherParent {
    color: #969696;
    display: none;
  }

  .kidsRegistrationNumKids {
    padding: 10px 5px;
    margin-top: 10px;
  }

  .kidsRegistrationNumKids span,
  .kidsRegistrationNumKids input {
    padding: 0;
    margin: 0;
    line-height: normal;
  }

  .kidsRegistrationNumKids span {
    margin-right: 10px;
    color: #969696;
  }

  .kidsRegistrationNumKids input {
    width: 50px;
    border: 0.3px solid #b3b3b3;
    color: #969696;
    text-align: center;
  }

  .kidsRegistrationNumKidsDetails {
    padding: 10px 5px;
    margin-top: 10px;
  }

  .kidsRegistrationNumKidsDetails1 {
    width: 90vw;
    flex-direction: column;
    border: 0.3px solid #b3b3b3;
    border-radius: 10px;
    padding: 5px;
    margin: 10px auto;
  }

  .childInfoMainLabel {
    width: 70px;
    height: 50px;
    box-shadow: 0px 4px 4px 0px #3aa9e8;
    border-radius: 5px;
    color: #969696;
    font-size: 12px;
    margin-bottom: 10px;
  }

  .childInfoMainInputDiv span,
  .childInfoMainInputDiv1 span {
    color: #969696;
    font-size: 12px;
    margin-right: 5px;
  }

  .kidsRegistrationNumKidsDetails1 > input {
    padding: 0;
    margin: 0;
    line-height: normal;
    width: 70px;
    border: 0.3px solid #b3b3b3;
    color: #969696;
    text-align: center;
  }

  .childInfoMainInputDiv1 {
    margin-top: 10px;
  }

  .childInfoMainInputDiv1 input {
    border: 0.3px solid #b3b3b3;
    color: #969696;
    margin-left: 10px;
  }

  .kidsRegistrationButton {
    width: 175px;
    height: 40px;
    color: #fff;
    background-color: #122e3b;
    border-radius: 5px;
  }

  .registrationBottomDiv1 {
    flex-direction: column;
  }

  .kidsRegistrationBottomDiv1Span {
    color: #969696;
    font-size: 12px;
    font-weight: 500;
    margin-top: 18px;
  }

  .registrationBottomDiv1Div1 {
    margin: 0px 10px;
  }

  .registrationBottomDiv1Div1 > span {
    color: #969696;
  }

  .registrationBottomDiv2 {
    margin: 20px auto;
  }

  /*** End of Kids Registration Page ***/

  /*** Kids What We Offer Component - Portrait ***/
  .kwoMainContainer {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(180deg, #e8f4fd 0%, #fff9e6 50%, #ffe8f5 100%);
    position: relative;
    overflow: hidden;
    padding: 60px 20px;
  }

  /* Floating Elements */
  .kwoFloatingElements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .kwoStar {
    position: absolute;
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, #ffd700 0%, #ffa500 100%);
    clip-path: polygon(
      50% 0%,
      61% 35%,
      98% 35%,
      68% 57%,
      79% 91%,
      50% 70%,
      21% 91%,
      32% 57%,
      2% 35%,
      39% 35%
    );
    animation: kwoStarFloat 20s ease-in-out infinite;
  }

  .kwoStar1 {
    top: 5%;
    left: 10%;
    animation-delay: 0s;
  }

  .kwoStar2 {
    top: 15%;
    right: 5%;
    animation-delay: 7s;
    width: 15px;
    height: 15px;
  }

  .kwoStar3 {
    bottom: 20%;
    left: 5%;
    animation-delay: 14s;
    width: 18px;
    height: 18px;
  }

  @keyframes kwoStarFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-20px) rotate(180deg);
    }
  }

  .kwoCloud {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 100px;
    opacity: 0.7;
  }

  .kwoCloud::before,
  .kwoCloud::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 100px;
  }

  .kwoCloud1 {
    width: 60px;
    height: 25px;
    top: 10%;
    right: 15%;
    animation: kwoCloudMove 30s ease-in-out infinite;
  }

  .kwoCloud1::before {
    width: 30px;
    height: 30px;
    top: -15px;
    left: 5px;
  }

  .kwoCloud1::after {
    width: 35px;
    height: 25px;
    top: -10px;
    right: 5px;
  }

  .kwoCloud2 {
    width: 50px;
    height: 20px;
    bottom: 15%;
    left: 20%;
    animation: kwoCloudMove 25s ease-in-out infinite reverse;
  }

  .kwoCloud2::before {
    width: 25px;
    height: 25px;
    top: -12px;
    left: 10px;
  }

  .kwoCloud2::after {
    width: 30px;
    height: 20px;
    top: -8px;
    right: 10px;
  }

  @keyframes kwoCloudMove {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(30px);
    }
  }

  .kwoRainbow {
    position: absolute;
    width: 200px;
    height: 100px;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(
      180deg,
      #ff0000 0%,
      #ff7f00 14%,
      #ffff00 28%,
      #00ff00 42%,
      #0000ff 57%,
      #4b0082 71%,
      #9400d3 85%,
      transparent 100%
    );
    border-radius: 100px 100px 0 0;
    opacity: 0.15;
    animation: kwoRainbowPulse 10s ease-in-out infinite;
  }

  @keyframes kwoRainbowPulse {
    0%,
    100% {
      opacity: 0.15;
      transform: translateX(-50%) scale(1);
    }
    50% {
      opacity: 0.25;
      transform: translateX(-50%) scale(1.05);
    }
  }

  /* Content Wrapper */
  .kwoContentWrapper {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Header Section */
  .kwoHeaderSection {
    text-align: center;
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .kwoHeaderSection.kwoVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kwoMainTitle {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 15px 0;
    position: relative;
    display: inline-block;
  }

  .kwoTitleWord {
    display: inline-block;
    margin: 0 8px;
    animation: kwoWordBounce 2s ease-in-out infinite;
  }

  .kwoTitleWord1 {
    color: #ff6b6b;
    animation-delay: 0s;
  }

  .kwoTitleWord2 {
    color: #4ecdc4;
    animation-delay: 0.2s;
  }

  .kwoTitleWord3 {
    color: #ffd93d;
    animation-delay: 0.4s;
  }

  @keyframes kwoWordBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  .kwoSparkle {
    position: absolute;
    top: -5px;
    right: -25px;
    font-size: 1.25rem;
    animation: kwoSparkleRotate 3s linear infinite;
  }

  @keyframes kwoSparkleRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .kwoSubtitle {
    font-size: 1.125rem;
    color: #6b7280;
    margin: 0;
    font-weight: 500;
  }

  /* Cards Grid */
  .kwoCardsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 60px;
  }

  /* Card Styles */
  .kwoCard {
    background: white;
    border-radius: 25px;
    padding: 25px 20px;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    overflow: hidden;
  }

  .kwoCard.kwoCardVisible {
    animation: kwoCardAppear 0.6s ease-out forwards;
  }

  @keyframes kwoCardAppear {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kwoCard:hover {
    transform: translateY(-5px) scale(1.02);
  }

  /* Card Gradients */
  .kwoMathGradient {
    background: linear-gradient(135deg, #ffe5e5 0%, #ffd4e5 100%);
  }

  .kwoEnglishGradient {
    background: linear-gradient(135deg, #e5f3ff 0%, #e5e5ff 100%);
  }

  .kwoScienceGradient {
    background: linear-gradient(135deg, #e5ffe5 0%, #e5fff5 100%);
  }

  .kwoGamesGradient {
    background: linear-gradient(135deg, #fff5e5 0%, #ffe5f5 100%);
  }

  /* Card Glow Effect */
  .kwoCardGlow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
  }

  .kwoCard:hover .kwoCardGlow {
    opacity: 0.2;
  }

  .kwoMathShadow {
    background: radial-gradient(circle, #ff6b6b 0%, transparent 70%);
  }

  .kwoEnglishShadow {
    background: radial-gradient(circle, #4ecdc4 0%, transparent 70%);
  }

  .kwoScienceShadow {
    background: radial-gradient(circle, #6bcf7f 0%, transparent 70%);
  }

  .kwoGamesShadow {
    background: radial-gradient(circle, #ffd93d 0%, transparent 70%);
  }

  /* Icon Wrapper */
  .kwoIconWrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    position: relative;
  }

  .kwoIcon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
  }

  .kwoHelloIcon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #4ecdc4;
    background: rgba(78, 205, 196, 0.1);
    border-radius: 50%;
    position: relative;
    z-index: 2;
  }

  .kwoIconBg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    z-index: 1;
  }

  /* Icon Animations */
  .kwoBounce {
    animation: kwoBounceAnim 2s ease-in-out infinite;
  }

  @keyframes kwoBounceAnim {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }

  .kwoWiggle {
    animation: kwoWiggleAnim 2s ease-in-out infinite;
  }

  @keyframes kwoWiggleAnim {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(-8deg);
    }
    75% {
      transform: rotate(8deg);
    }
  }

  .kwoFloat {
    animation: kwoFloatAnim 3s ease-in-out infinite;
  }

  @keyframes kwoFloatAnim {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-8px) scale(1.03);
    }
  }

  .kwoSpin {
    animation: kwoSpinAnim 8s linear infinite;
  }

  @keyframes kwoSpinAnim {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* Card Content */
  .kwoCardTitle {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
    text-align: center;
  }

  .kwoCardSubtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 15px 0;
    text-align: center;
  }

  /* Features */
  .kwoFeatures {
    display: none; /* Hidden on mobile to save space */
  }

  /* Explore Button */
  .kwoExploreBtn {
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
  }

  .kwoExploreBtn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%
    );
    transition: left 0.5s ease;
  }

  .kwoExploreBtn:hover::before {
    left: 100%;
  }

  .kwoExploreBtn:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
  }

  .kwoExploreBtnIcon {
    font-size: 1.125rem;
    transition: transform 0.3s ease;
  }

  .kwoExploreBtn:hover .kwoExploreBtnIcon {
    transform: translateX(3px);
  }

  /* Card Decorations */
  .kwoCardDecoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .kwoBubble {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    animation: kwoBubbleFloat 10s ease-in-out infinite;
  }

  .kwoBubble1 {
    width: 40px;
    height: 40px;
    top: -20px;
    right: -20px;
    animation-delay: 0s;
  }

  .kwoBubble2 {
    width: 30px;
    height: 30px;
    bottom: -15px;
    left: -15px;
    animation-delay: 3s;
  }

  .kwoBubble3 {
    width: 25px;
    height: 25px;
    top: 50%;
    right: -12px;
    animation-delay: 6s;
  }

  @keyframes kwoBubbleFloat {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(-15px, -15px) scale(1.08);
    }
    66% {
      transform: translate(15px, -8px) scale(0.92);
    }
  }

  /* CTA Section */
  .kwoCTASection {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 30px;
    padding: 40px 25px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .kwoCTASection.kwoCTAVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kwoCTAContent {
    color: white;
    text-align: center;
  }

  .kwoCTATitle {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 10px 0;
  }

  .kwoCTAText {
    font-size: 1rem;
    margin: 0 0 25px 0;
    opacity: 0.9;
  }

  .kwoCTAButton {
    padding: 15px 30px;
    background: white;
    color: #667eea;
    border: none;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .kwoCTAButton:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }

  .kwoCTAButtonStars {
    font-size: 1.25rem;
    animation: kwoStarsRotate 2s linear infinite;
  }

  @keyframes kwoStarsRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .kwoCTACharacter {
    width: 120px;
    height: 120px;
    margin: 20px auto 0;
    position: relative;
  }

  .kwoCharacter {
    width: 100%;
    height: 100%;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 70%
    );
    border-radius: 50%;
    position: relative;
    animation: kwoCharacterBounce 2s ease-in-out infinite;
  }

  .kwoCharacter::before {
    content: "😊";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
  }

  @keyframes kwoCharacterBounce {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-15px) scale(1.08);
    }
  }

  /* Header */
  .kidsPracticeHeader {
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
  }

  .kidsHeaderLeft,
  .kidsHeaderRight {
    width: 20%;
  }

  .kidsHeaderCenter {
    flex: 1;
    text-align: center;
  }

  .kidsBackButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsSubjectBadge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px;
    border-radius: 50px;
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin: auto;
  }

  .kidsSubjectName {
    font-size: 14px;
  }

  .kidsSubjectIcon {
    font-size: 16px;
  }

  .kidsTopicName {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
  }

  .kidsSettingsButton {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsSettingsButton:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    transform: rotate(90deg);
  }

  /* Stats Bar */
  .kidsStatsBar {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0px;
    background: white;
    margin: 0 0px 5px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 10;
  }

  .kidsStatItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* Progress Section */
  .kidsProgressSection {
    margin: 0 10px 0px;
    position: relative;
    z-index: 10;
  }

  .kidsProgressBar {
    height: 16px;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    position: relative;
  }

  .kidsProgressFill {
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b 0%, #ff8787 100%);
    transition: width 0.5s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
  }

  .kidsProgressStars {
    display: flex;
    gap: 2px;
    font-size: 10px;
  }

  .kidsProgressText {
    text-align: center;
    margin-top: 0px;
    font-size: 10px;
    font-weight: 600;
    color: #4b5563;
  }

  /* Main Content */
  .kidsPracticeMain {
    width: 100%;
    margin: 0 auto;
    padding: 10px 0px;
    position: relative;
    z-index: 10;
  }

  /* Character Section */
  .kidsCharacterSection {
    display: flex;
    justify-content: center;
    margin-bottom: 2px;
  }

  .kidsCharacterBubble {
    display: flex;
    align-items: center;
    gap: 16px;
    animation: kidsBounce 2s ease-in-out infinite;
  }

  @keyframes kidsBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .kidsCharacterEmoji {
    font-size: 48px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  }

  .kidsCharacterSpeech {
    background: white;
    padding: 12px 20px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .kidsCharacterSpeech::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid white;
  }

  .kidsCharacterSpeech p {
    font-size: 16px;
  }

  /* Question Section */
  .kidsQuestionSection {
    margin-bottom: 32px;
  }

  .kidsQuestionCard {
    background: white;
    height: 50vh;
    border-radius: 24px;
    padding: 2px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
  }

  .kidsQuestionHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .kidsQuestionNumber {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    padding: 16px 24px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
  }

  .kidsQuestionLabel {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
  }

  .kidsQuestionValue {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
  }

  .kidsHintButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #fef3c7;
    border: 2px solid #fde68a;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #d97706;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsHintButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Hint Box */
  .kidsHintBox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #fef3c7;
    border: 2px solid #fde68a;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: slideDown 0.3s ease;
  }

  .kidsHintIcon {
    font-size: 24px;
  }

  .kidsHintBox p {
    margin: 0;
    font-size: 16px;
    color: #92400e;
  }

  /* Question Content */
  .kidsQuestionContent {
    margin-bottom: 32px;
  }

  .kidsQuestionText {
    font-size: 22px;
    line-height: 1.6;
    color: #1f2937;
    margin-bottom: 24px;
    font-weight: 500;
  }

  /* Number Input */
  .kidsAnswerInputSection {
    display: flex;
    justify-content: center;
  }

  .kidsNumberInput {
    min-width: 200px;
    padding: 16px 24px;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    background: #f9fafb;
    color: #1f2937;
    transition: all 0.3s ease;
  }

  .kidsNumberInput:focus {
    outline: none;
    border-color: #fbbf24;
    background: white;
    transform: scale(1.05);
  }

  .kidsNumberInput:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Button Options */
  .kidsButtonOptions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .kidsOptionButton {
    padding: 20px;
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    background: white;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: scale(1);
  }

  .kidsOptionButton:hover:not(:disabled) {
    border-color: #4ecdc4;
    background: #f0fdfa;
    transform: scale(1.05);
  }

  .kidsOptionButton.selected {
    border-color: #4ecdc4;
    background: #4ecdc4;
    color: white;
    animation: optionSelect 0.4s ease;
  }

  .kidsOptionButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  @keyframes optionSelect {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Submit Section */
  .kidsSubmitSection {
    display: flex;
    justify-content: center;
  }

  .kidsSubmitButton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 48px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
  }

  .kidsSubmitButton:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
  }

  .kidsSubmitButton:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .kidsSubmitIcon {
    font-size: 24px;
  }

  /* Encouragement Message */
  .kidsEncouragementMessage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px 48px;
    border-radius: 20px;
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    animation: encouragePop 0.5s ease;
  }

  @keyframes encouragePop {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }

  /* Navigation Section */
  .kidsNavigationSection {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 40px;
  }

  .kidsNavButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 150px;
    padding: 12px 24px;
    background: white;
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsNavButton:hover:not(:disabled) {
    border-color: #fbbf24;
    color: #f59e0b;
    background: #fef3c7;
  }

  .kidsNavButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .kidsQuestionDots {
    display: flex;
    gap: 8px;
  }

  .kidsQuestionDot {
    width: 48px;
    height: 48px;
    border: 3px solid #e5e7eb;
    border-radius: 50%;
    background: white;
    font-size: 16px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsQuestionDot:hover {
    border-color: #fbbf24;
    transform: scale(1.1);
  }

  .kidsQuestionDot.active {
    border-color: #fbbf24;
    background: #fbbf24;
    color: white;
    transform: scale(1.15);
  }

  .kidsQuestionDot.completed {
    border-color: #10b981;
    background: #10b981;
    color: white;
    font-size: 20px;
  }

  /* Settings Panel */
  .kidsSettingsPanel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
  }

  .kidsSettingsPanelContent {
    background: white;
    border-radius: 24px;
    padding: 32px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
  }

  .kidsSettingsPanelContent h3 {
    margin: 0 0 24px;
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    text-align: center;
  }

  .kidsSettingGroup {
    margin-bottom: 24px;
  }

  .kidsSettingGroup label {
    display: block;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #4b5563;
  }

  .kidsCharacterGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
  }

  .kidsCharacterOption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsCharacterOption:hover {
    border-color: #fbbf24;
    background: #fef3c7;
  }

  .kidsCharacterOption.selected {
    border-color: #fbbf24;
    background: #fbbf24;
    color: white;
  }

  .kidsCharEmoji {
    font-size: 36px;
  }

  .kidsCharName {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }

  .kidsToggleOptions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .kidsToggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 16px;
  }

  .kidsToggle input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
  }

  .kidsSettingsActions {
    display: flex;
    gap: 12px;
    margin-top: 32px;
  }

  .kidsActionButton {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsRestartButton {
    background: #fef3c7;
    color: #d97706;
  }

  .kidsRestartButton:hover {
    background: #fde68a;
  }

  .kidsHomeButton {
    background: #dbeafe;
    color: #2563eb;
  }

  .kidsHomeButton:hover {
    background: #bfdbfe;
  }

  .kidsCloseButton {
    background: #f3f4f6;
    color: #6b7280;
  }

  .kidsCloseButton:hover {
    background: #e5e7eb;
  }

  /* Explanation */
  .kidsExplanation {
    text-align: center;
  }

  .kidsCorrectMessage {
    font-size: 24px;
    font-weight: 700;
    color: #10b981;
    margin: 0;
  }

  .kidsIncorrectMessage {
    font-size: 18px;
    color: #6b7280;
    margin: 0 0 12px;
  }

  .kidsCorrectAnswer {
    font-size: 24px;
    font-weight: 700;
    color: #ff6b6b;
  }

  /* Animations */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideDown {
    from {
      transform: translateY(-10px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  /* Tablet - Portrait */
  

  /*** Kids Personalized Adaptive Flexible Component - Portrait ***/
  .kpafMainContainer {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(135deg, #fff0f5 0%, #e6e6fa 50%, #f0f8ff 100%);
    position: relative;
    overflow: hidden;
    padding: 60px 20px;
  }

  /* Background Decorations */
  .kpafBackgroundDecor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .kpafParticle {
    position: absolute;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.8) 0%,
      transparent 70%
    );
    border-radius: 50%;
    animation: kpafParticleFloat 15s ease-in-out infinite;
  }

  @keyframes kpafParticleFloat {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
      opacity: 0.5;
    }
    25% {
      transform: translate(30px, -60px) scale(1.1);
      opacity: 0.7;
    }
    50% {
      transform: translate(-30px, -100px) scale(0.9);
      opacity: 0.3;
    }
    75% {
      transform: translate(50px, -30px) scale(1.05);
      opacity: 0.6;
    }
  }

  .kpafMagicWand {
    position: absolute;
    top: 5%;
    right: 5%;
    font-size: 2rem;
    animation: kpafWandWave 4s ease-in-out infinite;
  }

  @keyframes kpafWandWave {
    0%,
    100% {
      transform: rotate(0deg) translateX(0);
    }
    25% {
      transform: rotate(-15deg) translateX(-5px);
    }
    75% {
      transform: rotate(15deg) translateX(5px);
    }
  }

  .kpafStarCluster {
    position: absolute;
    font-size: 1.5rem;
    animation: kpafStarTwinkle 3s ease-in-out infinite;
  }

  .kpafCluster1 {
    top: 15%;
    left: 8%;
    animation-delay: 0s;
  }

  .kpafCluster2 {
    bottom: 15%;
    right: 10%;
    animation-delay: 1s;
  }

  .kpafCluster3 {
    top: 40%;
    left: 45%;
    animation-delay: 2s;
  }

  @keyframes kpafStarTwinkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 0.7;
    }
    50% {
      transform: scale(1.2) rotate(180deg);
      opacity: 1;
    }
  }

  /* Content Wrapper */
  .kpafContentWrapper {
    position: relative;
    z-index: 2;
    max-width: 600px;
    margin: 0 auto;
  }

  /* Header Section */
  .kpafHeaderSection {
    text-align: center;
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .kpafHeaderSection.kpafVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kpafMainTitle {
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .kpafTitleIcon {
    font-size: 2rem;
    animation: kpafIconSpin 8s linear infinite;
  }

  @keyframes kpafIconSpin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .kpafTitleText {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .kpafWord1 {
    color: #ff6b9d;
    animation: kpafWordBounce 2s ease-in-out infinite;
  }

  .kpafWord2 {
    color: #4ecdc4;
    animation: kpafWordBounce 2s ease-in-out infinite;
    animation-delay: 0.2s;
  }

  .kpafWord3 {
    color: #a29bfe;
    animation: kpafWordBounce 2s ease-in-out infinite;
    animation-delay: 0.4s;
  }

  .kpafWord4 {
    color: #fd79a8;
    animation: kpafWordBounce 2s ease-in-out infinite;
    animation-delay: 0.6s;
  }

  @keyframes kpafWordBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .kpafSubtitle {
    font-size: 1.125rem;
    color: #5f3dc4;
    font-weight: 500;
    margin: 0;
  }

  /* Cards Container */
  .kpafCardsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    margin-bottom: 60px;
  }

  /* Card Styles */
  .kpafCard {
    border-radius: 30px;
    padding: 35px 25px;
    position: relative;
    cursor: pointer;
    transition: all 0.4s ease;
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 650px;
  }

  .kpafCard.kpafCardVisible {
    animation: kpafCardAppear 0.8s ease-out forwards;
  }

  @keyframes kpafCardAppear {
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kpafCard:hover {
    transform: translateY(-5px) scale(1.01);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  }

  .kpafCard.kpafCardActive {
    transform: translateY(-5px) scale(1.01);
  }

  /* Floating Icons */
  .kpafFloatingIcons {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .kpafFloatingIcon {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.2;
    animation: kpafIconFloat 12s ease-in-out infinite;
  }

  .kpafIcon1 {
    top: 5%;
    left: 5%;
  }

  .kpafIcon2 {
    top: 5%;
    right: 5%;
  }

  .kpafIcon3 {
    bottom: 5%;
    left: 5%;
  }

  .kpafIcon4 {
    bottom: 5%;
    right: 5%;
  }

  @keyframes kpafIconFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(10px, -10px) rotate(90deg);
    }
    50% {
      transform: translate(-10px, -20px) rotate(180deg);
    }
    75% {
      transform: translate(15px, -5px) rotate(270deg);
    }
  }

  /* Card Header */
  .kpafCardHeader {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    position: relative;
  }

  .kpafNumberBadge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }

  .kpafEmojiBox {
    position: relative;
    width: 60px;
    height: 60px;
  }

  .kpafMainEmoji {
    font-size: 3rem;
    display: block;
    animation: kpafEmojiDance 2s ease-in-out infinite;
  }

  @keyframes kpafEmojiDance {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
    }
    25% {
      transform: scale(1.08) rotate(-3deg);
    }
    75% {
      transform: scale(1.08) rotate(3deg);
    }
  }

  .kpafEmojiGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    animation: kpafGlowPulse 2s ease-in-out infinite;
  }

  @keyframes kpafGlowPulse {
    0%,
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.4;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.3);
      opacity: 0.2;
    }
  }

  .kpafCharacter {
    font-size: 2.5rem;
    position: absolute;
    right: 25px;
    top: 15px;
    animation: kpafCharacterFloat 3s ease-in-out infinite;
  }

  @keyframes kpafCharacterFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-8px) rotate(8deg);
    }
  }

  /* Card Content */
  .kpafCardContent {
    position: relative;
    z-index: 2;
  }

  .kpafCardTitle {
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 8px 0;
    line-height: 1.2;
  }

  .kpafCardSubtitle {
    font-size: 1rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 15px 0;
  }

  .kpafCardDescription {
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.5;
    margin: 0 0 20px 0;
  }

  /* Highlights */
  .kpafHighlights {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;
  }

  .kpafHighlightItem {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 15px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-15px);
  }

  .kpafCard.kpafCardVisible .kpafHighlightItem {
    animation: kpafHighlightSlide 0.5s ease-out forwards;
  }

  @keyframes kpafHighlightSlide {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .kpafHighlightItem:hover {
    background: white;
    transform: translateX(3px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }

  .kpafHighlightIcon {
    font-size: 1.25rem;
  }

  .kpafHighlightText {
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
  }

  /* Action Button */
  .kpafActionBtn {
    width: 100%;
    padding: 15px 25px;
    border: none;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
  }

  .kpafBtnShine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    transition: left 0.6s ease;
  }

  .kpafActionBtn:hover .kpafBtnShine {
    left: 100%;
  }

  .kpafActionBtn:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }

  .kpafBtnArrow {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
  }

  .kpafActionBtn:hover .kpafBtnArrow {
    transform: translateX(3px);
  }

  /* Card Decorations */
  .kpafCardDecor {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .kpafCornerStar {
    position: absolute;
    font-size: 1.25rem;
    opacity: 0.4;
    animation: kpafStarRotate 4s linear infinite;
  }

  @keyframes kpafStarRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .kpafStarTL {
    top: 15px;
    left: 15px;
  }

  .kpafStarTR {
    top: 15px;
    right: 15px;
    animation-delay: 1s;
  }

  .kpafStarBL {
    bottom: 15px;
    left: 15px;
    animation-delay: 2s;
  }

  .kpafStarBR {
    bottom: 15px;
    right: 15px;
    animation-delay: 3s;
  }

  /* Bottom Section */
  .kpafBottomSection {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 30px;
    padding: 40px 25px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
    width: 80%;
    max-width: 600px;
    margin: auto;
  }

  .kpafBottomSection.kpafBottomVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kpafCTABox {
    color: white;
    text-align: center;
  }

  .kpafCTATitle {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 10px 0;
  }

  .kpafCTAText {
    font-size: 1rem;
    margin: 0 0 25px 0;
    opacity: 0.9;
  }

  .kpafCTAButtons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .kpafCTABtn {
    padding: 15px 30px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border: none;
    width: 100%;
    max-width: 250px;
    justify-content: center;
  }

  .kpafPrimaryBtn {
    background: white;
    color: #667eea;
  }

  .kpafPrimaryBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }

  .kpafSecondaryBtn {
    background: transparent;
    color: white;
    border: 2px solid white;
  }

  .kpafSecondaryBtn:hover {
    background: white;
    color: #667eea;
    transform: translateY(-2px);
  }

  .kpafCTAEmoji {
    font-size: 1.125rem;
  }

  /* Character Group */
  .kpafCharacterGroup {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 25px;
  }

  .kpafGroupChar {
    font-size: 3rem;
    animation: kpafCharBounce 2s ease-in-out infinite;
  }

  .kpafChar1 {
    animation-delay: 0s;
  }

  .kpafChar2 {
    animation-delay: 0.3s;
  }

  .kpafChar3 {
    animation-delay: 0.6s;
  }

  @keyframes kpafCharBounce {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-15px) scale(1.08);
    }
  }

  /* KidsPersonalizedAdaptiveFlexible Styles */
  .kpafMainContainer {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
      135deg,
      #fff5f5 0%,
      #ffe5ff 25%,
      #e5f5ff 50%,
      #fffee5 75%,
      #fff5f5 100%
    );
    background-size: 400% 400%;
    animation: kpafGradientShift 20s ease-in-out infinite;
    padding: 40px 20px;
  }

  @keyframes kpafGradientShift {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  /* Background decorations */
  .kpafBackgroundDecor {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
  }

  .kpafParticle {
    position: absolute;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.8) 0%,
      transparent 70%
    );
    border-radius: 50%;
    animation: kpafFloat 20s ease-in-out infinite;
  }

  @keyframes kpafFloat {
    0%,
    100% {
      transform: translateY(0) translateX(0) scale(1);
      opacity: 0.7;
    }
    25% {
      transform: translateY(-100px) translateX(50px) scale(1.2);
      opacity: 1;
    }
    50% {
      transform: translateY(50px) translateX(-50px) scale(0.8);
      opacity: 0.9;
    }
    75% {
      transform: translateY(-50px) translateX(-100px) scale(1.1);
      opacity: 0.8;
    }
  }

  .kpafMagicWand,
  .kpafStarCluster {
    position: absolute;
    font-size: 2rem;
    animation: kpafSparkle 3s ease-in-out infinite;
  }

  .kpafMagicWand {
    top: 10%;
    right: 5%;
    animation-delay: 0s;
  }

  .kpafCluster1 {
    top: 20%;
    left: 5%;
    animation-delay: 1s;
  }

  .kpafCluster2 {
    bottom: 30%;
    right: 10%;
    animation-delay: 2s;
  }

  .kpafCluster3 {
    bottom: 15%;
    left: 10%;
    animation-delay: 0.5s;
  }

  @keyframes kpafSparkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 0.7;
    }
    50% {
      transform: scale(1.3) rotate(180deg);
      opacity: 1;
    }
  }

  /* Content wrapper */
  .kpafContentWrapper {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Header section */
  .kpafHeaderSection {
    text-align: center;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .kpafHeaderSection.kpafVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kpafMainTitle {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .kpafTitleIcon {
    font-size: 2rem;
    animation: kpafBounce 2s ease-in-out infinite;
  }

  @keyframes kpafBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .kpafTitleText {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
  }

  .kpafWord1 {
    color: #ff6b9d;
    animation: kpafWaveText 2s ease-in-out infinite;
  }
  .kpafWord2 {
    color: #4ecdc4;
    animation: kpafWaveText 2s ease-in-out 0.2s infinite;
  }
  .kpafWord3 {
    color: #a29bfe;
    animation: kpafWaveText 2s ease-in-out 0.4s infinite;
  }
  .kpafWord4 {
    color: #ffa502;
    animation: kpafWaveText 2s ease-in-out 0.6s infinite;
  }

  @keyframes kpafWaveText {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  .kpafSubtitle {
    font-size: 1.25rem;
    color: #666;
    margin: 0;
  }

  /* Cards container */
  .kpafCardsContainer {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  /* Individual cards */
  .kpafCard {
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: all 0.6s ease-out;
    cursor: pointer;
  }

  .kpafCard.kpafCardVisible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .kpafCard.kpafCardActive {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  }

  /* Floating icons in cards */
  .kpafFloatingIcons {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .kpafFloatingIcon {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.3;
    animation: kpafIconFloat 15s ease-in-out infinite;
  }

  .kpafIcon1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }
  .kpafIcon2 {
    top: 20%;
    right: 15%;
    animation-delay: 2s;
  }
  .kpafIcon3 {
    bottom: 20%;
    left: 15%;
    animation-delay: 4s;
  }
  .kpafIcon4 {
    bottom: 10%;
    right: 10%;
    animation-delay: 6s;
  }

  @keyframes kpafIconFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
    33% {
      transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
      transform: translate(-30px, 30px) rotate(240deg);
    }
  }

  /* Card header */
  .kpafCardHeader {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }

  .kpafNumberBadge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .kpafEmojiBox {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kpafMainEmoji {
    font-size: 2.5rem;
    z-index: 1;
    animation: kpafEmojiPulse 2s ease-in-out infinite;
  }

  @keyframes kpafEmojiPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .kpafEmojiGlow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: kpafGlow 2s ease-in-out infinite;
  }

  @keyframes kpafGlow {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.5;
    }
    50% {
      transform: scale(1.3);
      opacity: 0.3;
    }
  }

  .kpafCharacter {
    font-size: 3rem;
    margin-left: auto;
    animation: kpafCharacterWiggle 3s ease-in-out infinite;
  }

  @keyframes kpafCharacterWiggle {
    0%,
    100% {
      transform: rotate(-5deg);
    }
    50% {
      transform: rotate(5deg);
    }
  }

  /* Card content */
  .kpafCardContent {
    position: relative;
    z-index: 1;
  }

  .kpafCardTitle {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }

  .kpafCardSubtitle {
    font-size: 1.125rem;
    color: #666;
    margin-bottom: 1rem;
    font-weight: 600;
  }

  .kpafCardDescription {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }

  /* Highlights */
  .kpafHighlights {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }

  .kpafHighlightItem {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateX(-20px);
    animation: kpafSlideIn 0.5s ease-out forwards;
  }

  @keyframes kpafSlideIn {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .kpafHighlightIcon {
    font-size: 1.25rem;
  }

  .kpafHighlightText {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
  }

  /* Action button */
  .kpafActionBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    border: none;
    border-radius: 50px;
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .kpafActionBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }

  .kpafBtnText {
    position: relative;
    z-index: 1;
  }

  .kpafBtnArrow {
    font-size: 1.125rem;
    transition: transform 0.3s ease;
  }

  .kpafActionBtn:hover .kpafBtnArrow {
    transform: translateX(3px);
  }

  .kpafBtnShine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%
    );
    transform: rotate(45deg);
    transition: left 0.5s ease;
  }

  .kpafActionBtn:hover .kpafBtnShine {
    left: 100%;
  }

  /* Card decorations */
  .kpafCardDecor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .kpafCornerStar {
    position: absolute;
    font-size: 1.25rem;
    opacity: 0.5;
    animation: kpafTwinkle 3s ease-in-out infinite;
  }

  .kpafStarTL {
    top: 1rem;
    left: 1rem;
    animation-delay: 0s;
  }
  .kpafStarTR {
    top: 1rem;
    right: 1rem;
    animation-delay: 0.75s;
  }
  .kpafStarBL {
    bottom: 1rem;
    left: 1rem;
    animation-delay: 1.5s;
  }
  .kpafStarBR {
    bottom: 1rem;
    right: 1rem;
    animation-delay: 2.25s;
  }

  @keyframes kpafTwinkle {
    0%,
    100% {
      opacity: 0.3;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.2);
    }
  }

  /* Bottom section */
  .kpafBottomSection {
    text-align: center;
    padding: 3rem 1rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.5s;
  }

  .kpafBottomSection.kpafBottomVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kpafCTABox {
    background: linear-gradient(135deg, #ffe5f1 0%, #e5f5ff 50%, #fffee5 100%);
    border-radius: 24px;
    padding: 2.5rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
  }

  .kpafCTATitle {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
  }

  .kpafCTAText {
    font-size: 1.125rem;
    color: #666;
    margin-bottom: 1.5rem;
  }

  .kpafCTAButtons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
  }

  .kpafCTABtn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kpafPrimaryBtn {
    background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
    color: white;
  }

  .kpafSecondaryBtn {
    background: white;
    color: #ff6b9d;
    border: 2px solid #ff6b9d;
  }

  .kpafCTABtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  .kpafCTAEmoji {
    font-size: 1.25rem;
    animation: kpafEmojiDance 1s ease-in-out infinite;
  }

  @keyframes kpafEmojiDance {
    0%,
    100% {
      transform: rotate(-10deg);
    }
    50% {
      transform: rotate(10deg);
    }
  }

  /* Character group */
  .kpafCharacterGroup {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
  }

  .kpafGroupChar {
    font-size: 3rem;
    animation: kpafCharBounce 2s ease-in-out infinite;
  }

  .kpafChar1 {
    animation-delay: 0s;
  }
  .kpafChar2 {
    animation-delay: 0.2s;
  }
  .kpafChar3 {
    animation-delay: 0.4s;
  }

  @keyframes kpafCharBounce {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-10px) scale(1.1);
    }
  }

  /* Kids Pricing Cards Component - Portrait */
  .kpcMainContainer {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
      135deg,
      #fff0f5 0%,
      #f0f8ff 25%,
      #fffaf0 50%,
      #f0fff0 75%,
      #fff0f5 100%
    );
    background-size: 400% 400%;
    animation: kpcGradientFlow 25s ease-in-out infinite;
    padding: 40px 20px;
  }

  @keyframes kpcGradientFlow {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  /* Background decorations */
  .kpcBackgroundDecor {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
  }

  .kpcConfetti {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    animation: kpcConfettiFall 10s linear infinite;
  }

  @keyframes kpcConfettiFall {
    0% {
      transform: translateY(-100vh) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: translateY(100vh) rotate(720deg);
      opacity: 0;
    }
  }

  .kpcRainbow {
    position: absolute;
    top: -30px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: conic-gradient(
      from 0deg,
      #ff6b6b,
      #ffa502,
      #ffd93d,
      #4ecdc4,
      #a29bfe,
      #ff6b6b
    );
    border-radius: 50%;
    opacity: 0.1;
    animation: kpcRainbowSpin 30s linear infinite;
  }

  @keyframes kpcRainbowSpin {
    to {
      transform: rotate(360deg);
    }
  }

  .kpcCloudLeft,
  .kpcCloudRight {
    position: absolute;
    width: 100px;
    height: 40px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 100px;
    opacity: 0.8;
  }

  .kpcCloudLeft::before,
  .kpcCloudRight::before {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 100px;
  }

  .kpcCloudLeft {
    top: 10%;
    left: -30px;
    animation: kpcCloudFloat 20s ease-in-out infinite;
  }

  .kpcCloudLeft::before {
    width: 40px;
    height: 40px;
    top: -20px;
    left: 10px;
  }

  .kpcCloudRight {
    bottom: 20%;
    right: -30px;
    animation: kpcCloudFloat 25s ease-in-out infinite reverse;
  }

  .kpcCloudRight::before {
    width: 50px;
    height: 50px;
    top: -25px;
    right: 20px;
  }

  @keyframes kpcCloudFloat {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(50px);
    }
  }

  /* Content wrapper */
  .kpcContentWrapper {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
  }

  /* Header section */
  .kpcHeaderSection {
    text-align: center;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .kpcHeaderSection.kpcVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kpcMainTitle {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .kpcTitleIcon {
    font-size: 2rem;
    animation: kpcIconBounce 2s ease-in-out infinite;
  }

  @keyframes kpcIconBounce {
    0%,
    100% {
      transform: translateY(0) rotate(-5deg);
    }
    50% {
      transform: translateY(-10px) rotate(5deg);
    }
  }

  .kpcTitleText {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
  }

  .kpcWord1 {
    color: #ff6b6b;
    animation: kpcWordWave 2s ease-in-out infinite;
    font-size: 2rem;
  }
  .kpcWord2 {
    color: #4ecdc4;
    animation: kpcWordWave 2s ease-in-out 0.2s infinite;
    font-size: 2rem;
  }
  .kpcWord3 {
    color: #ffd93d;
    animation: kpcWordWave 2s ease-in-out 0.4s infinite;
    font-size: 2rem;
  }
  .kpcWord4 {
    color: #a29bfe;
    animation: kpcWordWave 2s ease-in-out 0.6s infinite;
    font-size: 2rem;
  }

  @keyframes kpcWordWave {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  .kpcSubtitle {
    font-size: 1.125rem;
    color: #666;
    margin: 0;
    padding: 0 1rem;
  }

  /* Cards grid */
  .kpcCardsGrid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  /* Individual cards */
  .kpcCard {
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: all 0.6s ease-out;
    cursor: pointer;
    width: 80%;
    max-width: 600px;
  }

  .kpcCard.kpcCardVisible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .kpcCard:active {
    transform: scale(0.98);
  }

  .kpcCard.kpcCardSelected {
    border: 3px solid #ffd93d;
    transform: scale(1.02);
  }

  .kpcCard.kpcPopular {
    position: relative;
    transform: scale(1.02);
    z-index: 2;
  }

  /* Popular badge */
  .kpcPopularBadge {
    position: absolute;
    top: -10px;
    right: 15px;
    background: linear-gradient(135deg, #ffd93d 0%, #ffa502 100%);
    color: white;
    padding: 6px 15px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 0.75rem;
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.3);
    animation: kpcPopularPulse 2s ease-in-out infinite;
  }

  @keyframes kpcPopularPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  .kpcPopularText {
    font-size: 0.75rem;
  }

  .kpcPopularStars {
    font-size: 0.625rem;
    margin-top: 2px;
  }

  /* Card header */
  .kpcCardHeader {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .kpcCharacterBox {
    position: relative;
    display: inline-block;
    margin-bottom: 0.75rem;
  }

  .kpcCharacter {
    font-size: 3rem;
    display: block;
    animation: kpcCharacterFloat 3s ease-in-out infinite;
  }

  @keyframes kpcCharacterFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  .kpcCharacterGlow {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: kpcGlowPulse 2s ease-in-out infinite;
  }

  @keyframes kpcGlowPulse {
    0%,
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0.3;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.3);
      opacity: 0.1;
    }
  }

  .kpcPlanTitle {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0.5rem 0;
  }

  .kpcPlanEmoji {
    font-size: 1.5rem;
    animation: kpcEmojiSpin 3s ease-in-out infinite;
  }

  @keyframes kpcEmojiSpin {
    0%,
    100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(10deg);
    }
    75% {
      transform: rotate(-10deg);
    }
  }

  /* Pricing box */
  .kpcPricingBox {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
  }

  .kpcPriceWrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.5rem;
  }

  .kpcPrice {
    font-size: 2.5rem;
    font-weight: 800;
    color: #333;
  }

  .kpcPeriod {
    font-size: 1rem;
    color: #666;
  }

  .kpcSavingsBadge {
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    animation: kpcSavingsBounce 2s ease-in-out infinite;
  }

  @keyframes kpcSavingsBounce {
    0%,
    100% {
      transform: translateX(-50%) translateY(0);
    }
    50% {
      transform: translateX(-50%) translateY(-3px);
    }
  }

  .kpcSavingsGlow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 70%
    );
    border-radius: 12px;
    animation: kpcSavingsGlow 2s ease-in-out infinite;
  }

  @keyframes kpcSavingsGlow {
    0%,
    100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }

  /* Features */
  .kpcFeatures {
    margin-bottom: 1.5rem;
  }

  .kpcFeatureItem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    opacity: 0;
    transform: translateX(-20px);
    animation: kpcFeatureSlide 0.5s ease-out forwards;
  }

  @keyframes kpcFeatureSlide {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .kpcFeatureIcon {
    font-size: 1.25rem;
  }

  .kpcFeatureText {
    font-size: 0.875rem;
    color: #333;
  }

  /* Limitations */
  .kpcLimitations {
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: rgba(255, 165, 0, 0.1);
    border-radius: 10px;
  }

  .kpcLimitationItem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
  }

  .kpcLimitationIcon {
    font-size: 0.875rem;
  }

  .kpcLimitationText {
    font-size: 0.75rem;
    color: #666;
  }

  /* Action button */
  .kpcActionButton {
    width: 100%;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 50px;
    color: white;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .kpcActionButton:active {
    transform: scale(0.95);
  }

  .kpcButtonText {
    position: relative;
    z-index: 1;
  }

  .kpcButtonArrow {
    font-size: 1.125rem;
    transition: transform 0.3s ease;
  }

  .kpcActionButton:hover .kpcButtonArrow {
    transform: translateX(3px);
  }

  .kpcButtonShine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    transform: rotate(45deg);
    transition: left 0.5s ease;
  }

  .kpcActionButton:hover .kpcButtonShine {
    left: 100%;
  }

  /* Hover decorations */
  .kpcHoverDecor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .kpcSparkle {
    position: absolute;
    font-size: 1.25rem;
    animation: kpcSparkleFloat 2s ease-in-out infinite;
  }

  .kpcSparkle1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }
  .kpcSparkle2 {
    top: 20%;
    right: 10%;
    animation-delay: 0.5s;
  }
  .kpcSparkle3 {
    bottom: 20%;
    left: 15%;
    animation-delay: 1s;
  }
  .kpcSparkle4 {
    bottom: 10%;
    right: 15%;
    animation-delay: 1.5s;
  }

  @keyframes kpcSparkleFloat {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
      opacity: 0;
    }
    50% {
      transform: translate(15px, -15px) scale(1.2);
      opacity: 1;
    }
  }

  /* Bottom section */
  .kpcBottomSection {
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.5s;
  }

  .kpcBottomSection.kpcBottomVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kpcGuaranteeBox {
    background: linear-gradient(135deg, #e5f5ff 0%, #ffe5f1 100%);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 600px;
    margin: 50px auto;
  }

  .kpcGuaranteeIcon {
    font-size: 3rem;
    animation: kpcShieldPulse 2s ease-in-out infinite;
    margin-bottom: 1rem;
  }

  @keyframes kpcShieldPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .kpcGuaranteeContent {
    text-align: center;
  }

  .kpcGuaranteeTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
  }

  .kpcGuaranteeText {
    font-size: 1rem;
    color: #666;
    margin: 0;
    padding: 0 1rem;
  }

  .kpcTestimonialBox {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    width: 80%;
    max-width: 600px;
    margin: auto;
  }

  .kpcTestimonialQuote {
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 3rem;
    color: #ffd93d;
    opacity: 0.3;
  }

  .kpcTestimonialText {
    font-size: 1.125rem;
    color: #333;
    font-style: italic;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
    padding: 0 1rem;
  }

  .kpcTestimonialAuthor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .kpcAuthorName {
    font-size: 1rem;
    color: #666;
    font-weight: 600;
  }

  .kpcRatingStars {
    font-size: 1rem;
  }

  /* Character parade */
  .kpcCharacterParade {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
  }

  .kpcParadeChar {
    font-size: 3rem;
    animation: kpcCharDance 3s ease-in-out infinite;
  }

  .kpcChar1 {
    animation-delay: 0s;
  }
  .kpcChar2 {
    animation-delay: 0.3s;
  }
  .kpcChar3 {
    animation-delay: 0.6s;
  }
  .kpcChar4 {
    animation-delay: 0.9s;
  }
  .kpcChar5 {
    animation-delay: 1.2s;
  }

  @keyframes kpcCharDance {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    25% {
      transform: translateY(-10px) rotate(-10deg);
    }
    75% {
      transform: translateY(-10px) rotate(10deg);
    }
  }

  /* Kids What Do We Do Component - Portrait */
  .kwdMainContainer {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
      135deg,
      #ffe5cc 0%,
      #e5f5ff 25%,
      #ffe5f1 50%,
      #e5ffe5 75%,
      #ffe5cc 100%
    );
    background-size: 400% 400%;
    animation: kwdGradientShift 30s ease-in-out infinite;
    padding: 40px 20px;
  }

  @keyframes kwdGradientShift {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  /* Background animations */
  .kwdBackgroundAnimation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
  }

  /* .kwdBubble {
    position: absolute;
    top: 200px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 100%);
    animation: kwdBubbleFloat 20s ease-in-out infinite;
  } */

  @keyframes kwdBubbleFloat {
    0%,
    100% {
      transform: translateY(100vh) scale(0);
      opacity: 0;
    }
    10% {
      transform: translateY(90vh) scale(1);
      opacity: 0.8;
    }
    90% {
      transform: translateY(-10vh) scale(1);
      opacity: 0.8;
    }
  }

  .kwdRocket {
    position: absolute;
    font-size: 2rem;
    bottom: 10%;
    right: 5%;
    animation: kwdRocketFly 15s ease-in-out infinite;
  }

  @keyframes kwdRocketFly {
    0%,
    100% {
      transform: translate(0, 0) rotate(-45deg);
    }
    50% {
      transform: translate(-50px, -150px) rotate(-45deg);
    }
  }

  .kwdStar {
    position: absolute;
    animation: kwdStarTwinkle 3s ease-in-out infinite;
  }

  .kwdStar1 {
    font-size: 1.5rem;
    top: 10%;
    left: 15%;
    animation-delay: 0s;
  }

  .kwdStar2 {
    font-size: 2rem;
    top: 20%;
    right: 20%;
    animation-delay: 1s;
  }

  .kwdStar3 {
    font-size: 1rem;
    bottom: 25%;
    left: 25%;
    animation-delay: 2s;
  }

  @keyframes kwdStarTwinkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.3) rotate(180deg);
      opacity: 1;
    }
  }

  /* Content wrapper */
  .kwdContentWrapper {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
  }

  /* Header section */
  .kwdHeaderSection {
    text-align: center;
    margin-bottom: 3rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .kwdHeaderSection.kwdVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kwdMainTitle {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.3;
  }

  .kwdTitlePrefix {
    color: #666;
    display: block;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }

  .kwdTitleHighlight {
    position: relative;
    display: inline-block;
  }

  .kwdBrandName {
    background: linear-gradient(135deg, #ff6b9d 0%, #4ecdc4 50%, #ffd93d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2.5rem;
  }

  .kwdTitleDecor {
    position: absolute;
    top: -15px;
    right: -25px;
    animation: kwdDecorBounce 2s ease-in-out infinite;
  }

  .kwdDecorIcon {
    font-size: 1.5rem;
  }

  @keyframes kwdDecorBounce {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-5px) rotate(10deg);
    }
  }

  .kwdTitleSuffix {
    display: block;
    margin-top: 0.5rem;
    color: #666;
    font-size: 1.75rem;
  }

  .kwdMagicWord {
    color: #ffd93d;
    font-weight: 800;
    animation: kwdWordPulse 2s ease-in-out infinite;
  }

  @keyframes kwdWordPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  .kwdSubtitleBox {
    margin-top: 1rem;
  }

  .kwdSubtitle {
    font-size: 1.125rem;
    color: #666;
    margin: 0;
    padding: 0 1rem;
  }

  .kwdGradesBadge {
    display: inline-block;
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    color: white;
    padding: 4px 15px;
    border-radius: 20px;
    font-weight: 700;
    margin: 0 5px;
    font-size: 1rem;
    animation: kwdBadgePulse 3s ease-in-out infinite;
  }

  @keyframes kwdBadgePulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(78, 205, 196, 0.5);
    }
  }

  /* Main grid */
  .kwdMainGrid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    margin-bottom: 3rem;
  }

  /* Features section */
  .kwdFeaturesSection {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.3s;
  }

  .kwdFeaturesSection.kwdFeaturesVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kwdFeaturesHeader {
    margin-bottom: 1.5rem;
  }

  .kwdSectionTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .kwdSectionIcon {
    font-size: 1.5rem;
    animation: kwdIconSpin 3s ease-in-out infinite;
  }

  @keyframes kwdIconSpin {
    0%,
    100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(360deg);
    }
  }

  /* Features grid */
  .kwdFeaturesGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .kwdFeatureCard {
    border-radius: 15px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: kwdFeatureAppear 0.6s ease-out forwards;
  }

  @keyframes kwdFeatureAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kwdFeatureCard:active {
    transform: scale(0.98);
  }

  .kwdFeatureIcon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    animation: kwdIconFloat 3s ease-in-out infinite;
  }

  @keyframes kwdIconFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3px);
    }
  }

  .kwdFeatureTitle {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
  }

  .kwdFeatureDesc {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
  }

  .kwdFeatureGlow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  /* Subjects section */
  .kwdSubjectsSection {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    width: 80%;
    max-width: 600px;
    margin: auto;
  }

  .kwdSubjectsTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 1rem;
  }

  .kwdSubjectsList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .kwdSubjectItem {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-20px);
    animation: kwdSubjectSlide 0.5s ease-out forwards;
  }

  @keyframes kwdSubjectSlide {
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .kwdSubjectEmoji {
    font-size: 1.5rem;
  }

  .kwdSubjectName {
    font-size: 1rem;
    font-weight: 600;
  }

  /* Image section */
  .kwdImageSection {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.5s;
    width: 80%;
    max-width: 600px;
    margin: auto;
  }

  .kwdImageSection.kwdImageVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kwdImageContainer {
    position: relative;
    margin-bottom: 1.5rem;
  }

  .kwdMainImage {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  }

  .kwdImageOverlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
  }

  .kwdFloatingElement {
    position: absolute;
    font-size: 2rem;
    animation: kwdElementFloat 10s ease-in-out infinite;
  }

  .kwdElement1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
  }

  .kwdElement2 {
    top: 20%;
    right: 10%;
    animation-delay: 2.5s;
  }

  .kwdElement3 {
    bottom: 20%;
    left: 15%;
    animation-delay: 5s;
  }

  .kwdElement4 {
    bottom: 10%;
    right: 15%;
    animation-delay: 7.5s;
  }

  @keyframes kwdElementFloat {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
      opacity: 0;
    }
    25%,
    75% {
      opacity: 1;
    }
    50% {
      transform: translate(20px, -20px) scale(1.1);
      opacity: 1;
    }
  }

  .kwdImageFrame {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border: 2px solid #4ecdc4;
    border-radius: 18px;
    opacity: 0.5;
    animation: kwdFramePulse 3s ease-in-out infinite;
  }

  @keyframes kwdFramePulse {
    0%,
    100% {
      transform: scale(1);
      opacity: 0.5;
    }
    50% {
      transform: scale(1.02);
      opacity: 0.8;
    }
  }

  /* CTA Box */
  .kwdCTABox {
    background: linear-gradient(135deg, #ffe5f1 0%, #e5f5ff 100%);
    border-radius: 15px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
  }

  .kwdCTATitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
  }

  .kwdCTAText {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1rem;
  }

  .kwdCTAButton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .kwdCTAButton:active {
    transform: scale(0.95);
  }

  .kwdCTAButtonText {
    position: relative;
    z-index: 1;
  }

  .kwdCTAButtonIcon {
    font-size: 1.25rem;
    animation: kwdIconBounce 2s ease-in-out infinite;
  }

  @keyframes kwdIconBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3px);
    }
  }

  .kwdCTAButtonShine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    transform: rotate(45deg);
    transition: left 0.5s ease;
  }

  /* Stats section */
  .kwdStatsSection {
    background: white;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.8s;
    width: 80%;
    max-width: 600px;
    margin: auto;
  }

  .kwdStatsSection.kwdStatsVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .kwdStatsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .kwdStatCard {
    text-align: center;
    padding: 1.5rem;
    border-radius: 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    transition: all 0.3s ease;
  }

  .kwdStatCard:active {
    transform: scale(0.95);
  }

  .kwdStatIcon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    animation: kwdStatIconPulse 3s ease-in-out infinite;
  }

  @keyframes kwdStatIconPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .kwdStatNumber {
    font-size: 2rem;
    font-weight: 800;
    color: #333;
    margin-bottom: 0.25rem;
  }

  .kwdStatLabel {
    font-size: 0.875rem;
    color: #666;
    font-weight: 600;
  }

  /* Kids Home Footer Component - Portrait */
  .khfMainContainer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #ffe5f1 0%, #e5f5ff 50%, #f0e5ff 100%);
    padding: 40px 0 0 0;
    margin-top: 60px;
  }

  /* Background decorations */
  .khfBackgroundDecor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
  }

  .khfFloatingElement {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.3;
    animation: khfFloat 20s ease-in-out infinite;
  }

  @keyframes khfFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    25% {
      transform: translateY(-20px) rotate(90deg);
    }
    50% {
      transform: translateY(0) rotate(180deg);
    }
    75% {
      transform: translateY(20px) rotate(270deg);
    }
  }

  /* Wave decorations */
  .khfWaveTop,
  .khfWaveMiddle,
  .khfWaveBottom {
    position: absolute;
    width: 100%;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='0.2' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E")
      repeat-x;
    background-size: 200% 100%;
  }

  .khfWaveTop {
    top: -30px;
    animation: khfWaveMove 20s ease-in-out infinite;
  }

  .khfWaveMiddle {
    top: -20px;
    opacity: 0.5;
    animation: khfWaveMove 25s ease-in-out infinite reverse;
  }

  .khfWaveBottom {
    top: -10px;
    opacity: 0.3;
    animation: khfWaveMove 30s ease-in-out infinite;
  }

  @keyframes khfWaveMove {
    0%,
    100% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-50px);
    }
  }

  /* Content wrapper */
  .khfContentWrapper {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* Mascot section */
  .khfMascotSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
  }

  .khfMascotSection.khfMascotVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .khfMascot {
    font-size: 3rem;
    animation: khfMascotBounce 3s ease-in-out infinite;
  }

  .khfMascot:first-child {
    order: 2;
    align-self: flex-start;
    margin-left: 20%;
  }

  .khfMascot:last-child {
    order: 3;
    align-self: flex-end;
    margin-right: 20%;
  }

  @keyframes khfMascotBounce {
    0%,
    100% {
      transform: translateY(0) rotate(-5deg);
    }
    50% {
      transform: translateY(-8px) rotate(5deg);
    }
  }

  .khfMascotMessage {
    text-align: center;
    order: 1;
  }

  .khfMascotTitle {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
  }

  .khfMascotText {
    font-size: 1.125rem;
    color: #666;
    margin: 0;
  }

  /* Main content */
  .khfMainContent {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out 0.3s;
  }

  .khfMainContent.khfContentVisible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Sections grid */
  .khfSectionsGrid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .khfSection {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    padding: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: khfSectionAppear 0.6s ease-out forwards;
    width: 80%;
    max-width: 600px;
  }

  @keyframes khfSectionAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .khfSectionHeader {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .khfSectionIcon {
    font-size: 1.5rem;
    animation: khfIconSpin 3s ease-in-out infinite;
  }

  @keyframes khfIconSpin {
    0%,
    100% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(360deg);
    }
  }

  .khfSectionTitle {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
  }

  .khfLinksList {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .khfLinkItem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .khfLinkItem:active {
    transform: scale(0.98);
  }

  .khfLinkIcon {
    font-size: 1rem;
  }

  .khfLinkText {
    font-size: 0.875rem;
    color: #555;
    font-weight: 500;
  }

  .khfLinkGlow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    transition: left 0.5s ease;
  }

  /* Newsletter section */
  .khfNewsletterSection {
    background: white;
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    animation: khfSectionAppear 0.6s ease-out forwards;
    width: 80%;
    max-width: 600px;
  }

  .khfNewsletterHeader {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .khfNewsletterIcon {
    font-size: 1.5rem;
    animation: khfNewsletterBounce 2s ease-in-out infinite;
  }

  @keyframes khfNewsletterBounce {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .khfNewsletterTitle {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    margin: 0;
  }

  .khfNewsletterText {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 1rem;
  }

  .khfNewsletterForm {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .khfEmailInput {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 50px;
    font-size: 0.875rem;
    outline: none;
    transition: all 0.3s ease;
  }

  .khfEmailInput:focus {
    border-color: #4ecdc4;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.2);
  }

  .khfSubscribeBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .khfSubscribeBtn:active {
    transform: scale(0.98);
  }

  .khfBtnText {
    position: relative;
    z-index: 1;
  }

  .khfBtnIcon {
    font-size: 1rem;
    position: relative;
    z-index: 1;
  }

  .khfBtnShine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    transform: rotate(45deg);
    transition: left 0.5s ease;
  }

  .khfNewsletterCharacters {
    position: absolute;
    bottom: -5px;
    right: 10px;
    display: flex;
    gap: 0.25rem;
  }

  .khfChar {
    font-size: 1rem;
    animation: khfCharDance 2s ease-in-out infinite;
  }

  .khfChar1 {
    animation-delay: 0s;
  }
  .khfChar2 {
    animation-delay: 0.3s;
  }
  .khfChar3 {
    animation-delay: 0.6s;
  }

  @keyframes khfCharDance {
    0%,
    100% {
      transform: translateY(0) rotate(0deg);
    }
    50% {
      transform: translateY(-3px) rotate(10deg);
    }
  }

  /* Bottom section */
  .khfBottomSection {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px 20px 0 0;
    padding: 2rem 1rem 1.5rem;
    margin: 0 -20px;
  }

  /* Social section */
  .khfSocialSection {
    text-align: center;
    margin-bottom: 1.5rem;
  }

  .khfSocialTitle {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .khfSocialIcon {
    font-size: 1rem;
    animation: khfStarTwinkle 2s ease-in-out infinite;
  }

  @keyframes khfStarTwinkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
    }
    50% {
      transform: scale(1.2) rotate(180deg);
    }
  }

  .khfSocialLinks {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }

  .khfSocialLink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateY(20px);
    animation: khfSocialAppear 0.5s ease-out forwards;
  }

  @keyframes khfSocialAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .khfSocialLink:active {
    transform: scale(0.95);
  }

  .khfSocialLinkIcon {
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
  }

  .khfSocialGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--hover-color);
    opacity: 0.3;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
  }

  /* Divider */
  .khfDivider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
  }

  .khfDividerLine {
    flex: 1;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      #e0e0e0 50%,
      transparent 100%
    );
  }

  .khfDividerIcon {
    font-size: 1.25rem;
    animation: khfDividerSpin 3s linear infinite;
  }

  @keyframes khfDividerSpin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Copyright */
  .khfCopyright {
    text-align: center;
    margin-bottom: 60px;
  }

  .khfCopyrightContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .khfCopyrightIcon {
    font-size: 1.25rem;
    animation: khfCopyrightBounce 3s ease-in-out infinite;
  }

  .khfCopyrightIcon:first-child {
    animation-delay: 0s;
  }

  .khfCopyrightIcon:last-child {
    animation-delay: 0.5s;
  }

  @keyframes khfCopyrightBounce {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .khfCopyrightText {
    font-size: 0.875rem;
    color: #666;
    margin: 0;
    padding: 0 1rem;
  }

  .khfMadeWith {
    font-size: 0.75rem;
    color: #999;
  }

  .khfHeart {
    color: #ff6b9d;
    animation: khfHeartBeat 1.5s ease-in-out infinite;
  }

  @keyframes khfHeartBeat {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.2);
    }
  }

  /* Character parade */
  .khfCharacterParade {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    opacity: 0;
    transition: opacity 0.8s ease-out 1s;
  }

  .khfCharacterParade.khfParadeVisible {
    opacity: 1;
  }

  .khfParadeChar {
    font-size: 1.75rem;
    animation: khfParadeBounce 3s ease-in-out infinite;
  }

  .khfParade1 {
    animation-delay: 0s;
  }
  .khfParade2 {
    animation-delay: 0.2s;
  }
  .khfParade3 {
    animation-delay: 0.4s;
  }
  .khfParade4 {
    animation-delay: 0.6s;
  }
  .khfParade5 {
    animation-delay: 0.8s;
    display: none;
  }
  .khfParade6 {
    animation-delay: 1s;
    display: none;
  }
  .khfParade7 {
    animation-delay: 1.2s;
    display: none;
  }

  @keyframes khfParadeBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  /* Kids Login Component Styles - Portrait */
  .klMainContainer {
    width: 100%;
    min-height: calc(100vh - 50px);
    /* margin-top: 50px; */
    background: linear-gradient(180deg, #87ceeb 0%, #98fb98 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 1rem;
  }

  /* Animated background */
  .klBackgroundAnimation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
  }

  .klFloatingElement {
    position: absolute;
    animation: klFloat 20s ease-in-out infinite;
    opacity: 0.6;
  }

  .klCloud {
    position: absolute;
    font-size: 40px;
    opacity: 0.7;
    animation: klCloudMove 40s linear infinite;
  }

  .klCloud1 {
    top: 10%;
    left: -20%;
  }

  .klCloud2 {
    top: 15%;
    left: -20%;
    animation-delay: -15s;
    font-size: 35px;
  }

  .klCloud3 {
    top: 5%;
    left: -20%;
    animation-delay: -30s;
    font-size: 45px;
  }

  .klSun {
    position: absolute;
    top: 3%;
    right: 3%;
    font-size: 50px;
    animation: klSunPulse 4s ease-in-out infinite;
  }

  /* Confetti */
  .klConfettiContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
  }

  .klConfettiPiece {
    position: absolute;
    width: 8px;
    height: 8px;
    animation: klConfettiFall 3s ease-out forwards;
    display: none;
  }

  .klContentWrapper {
    width: 100%;
    max-width: 500px;
    padding: 1rem;
    position: relative;
    z-index: 1;
  }

  /* Header Section */
  .klHeaderSection {
    text-align: center;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.8s ease-out;
  }

  .klHeaderSection.klVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .klMainTitle {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
  }

  .klWelcome {
    font-size: 1.125rem;
    color: #ff6b6b;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  }

  .klBrandName {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    flex-wrap: wrap;
  }

  .klBrandText {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .klKidsText {
    font-size: 2rem;
    font-weight: 800;
    color: #ffd93d;
  }

  .klEmoji {
    font-size: 1.75rem;
    animation: klBounce 2s ease-in-out infinite;
  }

  .klSubtitle {
    font-size: 0.875rem;
    color: #2d3748;
    font-weight: 500;
  }

  /* Character Selection */
  .klCharacterSelection {
    text-align: center;
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out 0.2s;
  }

  .klCharacterSelection.klCharactersVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .klCharacterPrompt {
    font-size: 1rem;
    color: #2d3748;
    font-weight: 600;
    margin-bottom: 0.75rem;
  }

  .klCharacterGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    max-width: 300px;
    margin: 0 auto;
  }

  .klCharacterButton {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 15px;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .klCharacterButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  }

  .klCharacterButton.klCharacterSelected {
    border-color: var(--char-color);
    background: linear-gradient(
      135deg,
      white 0%,
      rgba(255, 255, 255, 0.9) 100%
    );
    transform: scale(1.05);
  }

  .klCharacterEmoji {
    font-size: 2rem;
  }

  .klCharacterName {
    font-size: 0.75rem;
    font-weight: 600;
    color: #2d3748;
  }

  .klCharacterGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--char-color) 0%, transparent 70%);
    opacity: 0.2;
    transform: translate(-50%, -50%);
    animation: klPulse 2s ease-in-out infinite;
  }

  /* Form Container */
  .klFormContainer {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out 0.4s;
  }

  .klFormContainer.klFormVisible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Login Card */
  .klLoginCard {
    background: white;
    border-radius: 25px;
    padding: 2rem 1.5rem 2.5rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    border: 2px solid #ffd93d;
    position: relative;
    overflow: visible;
  }

  .klCardCharacter {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  .klBigCharacter {
    font-size: 4rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    display: block;
    animation: klCharacterBounce 3s ease-in-out infinite;
  }

  .klCharacterBubble {
    background: #ffd93d;
    color: #2d3748;
    padding: 0.375rem 0.75rem;
    border-radius: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: -8px;
    position: relative;
  }

  .klCharacterBubble::before {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #ffd93d;
  }

  .klCardHeader {
    text-align: center;
    margin-bottom: 1.25rem;
    margin-top: 1.5rem;
  }

  .klCardTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 0.25rem;
  }

  .klCardSubtitle {
    font-size: 0.875rem;
    color: #64748b;
  }

  /* Error Message */
  .klErrorMessage {
    background: #fee2e2;
    border: 2px solid #fca5a5;
    border-radius: 12px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    text-align: center;
    animation: klShake 0.5s ease-out;
  }

  .klErrorText {
    color: #dc2626;
    font-size: 0.75rem;
    font-weight: 600;
  }

  /* Form Group */
  .klFormGroup {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .klInputWrapper {
    position: relative;
    transition: all 0.3s ease;
  }

  .klLabel {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 0.375rem;
  }

  .klLabelIcon {
    font-size: 1rem;
  }

  .klInputContainer {
    position: relative;
  }

  .klInput {
    width: 100%;
    padding: 0.75rem 0.875rem;
    padding-right: 2.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    background: #f9fafb;
  }

  .klInput:focus {
    outline: none;
    border-color: #ffd93d;
    background: white;
    box-shadow: 0 0 0 3px rgba(255, 217, 61, 0.2);
  }

  .klInputDecoration {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }

  .klInputStar {
    font-size: 1.25rem;
    opacity: 0;
    transition: all 0.3s ease;
  }

  .klInputWrapper.klInputFocused .klInputStar {
    opacity: 1;
    animation: klStarSpin 1s ease-out;
  }

  .klPasswordToggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform 0.3s ease;
  }

  .klForgotPassword {
    text-align: right;
    margin-top: -0.5rem;
  }

  .klForgotLink {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    color: #4ecdc4;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .klForgotIcon {
    font-size: 0.875rem;
  }

  /* Submit Button */
  .klSubmitButton {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 100%);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
  }

  .klSubmitButton:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3);
  }

  .klButtonText {
    position: relative;
    z-index: 1;
  }

  .klButtonIcon {
    font-size: 1.25rem;
    margin-left: 0.375rem;
    display: inline-block;
    animation: klRocket 2s ease-in-out infinite;
  }

  .klButtonSparkles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .klSparkle {
    position: absolute;
    font-size: 0.875rem;
    opacity: 0;
    animation: klSparkle 2s ease-out infinite;
  }

  .klSparkle:nth-child(1) {
    top: -15px;
    left: -15px;
    animation-delay: 0s;
  }

  .klSparkle:nth-child(2) {
    top: -15px;
    right: -15px;
    animation-delay: 0.4s;
  }

  .klSparkle:nth-child(3) {
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0.8s;
  }

  .klLoadingContainer {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    justify-content: center;
  }

  .klLoadingText {
    font-size: 0.875rem;
  }

  .klLoadingBounce {
    display: flex;
    gap: 0.25rem;
  }

  .klBounceBall {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: klBounceBall 1.4s ease-in-out infinite;
  }

  .klBounceBall:nth-child(1) {
    animation-delay: 0s;
  }

  .klBounceBall:nth-child(2) {
    animation-delay: 0.2s;
  }

  .klBounceBall:nth-child(3) {
    animation-delay: 0.4s;
  }

  .klButtonShine {
    position: absolute;
    top: -50%;
    left: -100%;
    width: 100%;
    height: 200%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent
    );
    transform: skewX(-45deg);
    transition: left 0.5s ease;
  }

  /* Divider */
  .klDivider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.5rem 0;
  }

  .klDividerLine {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  }

  .klDividerContent {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }

  .klDividerIcon {
    font-size: 1rem;
    animation: klTwinkle 2s ease-in-out infinite;
  }

  .klDividerText {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 600;
  }

  /* Social Login */
  .klGoogleButton {
    width: 100%;
    padding: 0.75rem;
    background: white;
    border: 2px solid #4285f4;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    font-size: 0.875rem;
  }

  .klGoogleButton:hover:not(:disabled) {
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(66, 133, 244, 0.2);
  }

  .klGoogleIcon {
    width: 18px;
    height: 18px;
  }

  .klGoogleText {
    font-size: 0.875rem;
    font-weight: 600;
    color: #2d3748;
  }

  .klGoogleEmoji {
    font-size: 1rem;
  }

  /* Signup Prompt */
  .klSignupPrompt {
    text-align: center;
    margin-top: 1.25rem;
  }

  .klSignupText {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
  }

  .klSignupLink {
    color: #ff6b6b;
    text-decoration: none;
    font-weight: 700;
    margin-left: 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
  }

  .klLinkIcon {
    font-size: 1rem;
  }

  /* Card Decorations */
  .klCardDecorations {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .klDecor {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.25;
    animation: klDecorFloat 10s ease-in-out infinite;
  }

  .klDecor1 {
    top: 8%;
    right: 3%;
    animation-delay: 0s;
  }

  .klDecor2 {
    bottom: 10%;
    left: 3%;
    animation-delay: 2.5s;
  }

  .klDecor3 {
    top: 50%;
    right: 5%;
    animation-delay: 5s;
  }

  .klDecor4 {
    bottom: 25%;
    left: 5%;
    animation-delay: 7.5s;
  }

  /* Fun Facts Sidebar - Hidden on mobile */
  .klFunFacts {
    display: none;
  }

  /* Bottom Decoration */
  .klBottomDecoration {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-out 0.8s;
  }

  .klBottomDecoration.klDecorationVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .klGround {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: #8b7355;
  }

  .klGrass {
    position: absolute;
    bottom: 35px;
    left: 0;
    right: 0;
    height: 20px;
    background: #90ee90;
    clip-path: polygon(
      0% 100%,
      5% 60%,
      10% 100%,
      15% 70%,
      20% 100%,
      25% 65%,
      30% 100%,
      35% 75%,
      40% 100%,
      45% 60%,
      50% 100%,
      55% 70%,
      60% 100%,
      65% 65%,
      70% 100%,
      75% 75%,
      80% 100%,
      85% 60%,
      90% 100%,
      95% 70%,
      100% 100%
    );
  }

  .klFlowers {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    padding: 0 5%;
  }

  .klFlower {
    font-size: 1.5rem;
    animation: klFlowerSway 3s ease-in-out infinite;
  }

  .klFlower1 {
    animation-delay: 0s;
  }
  .klFlower2 {
    animation-delay: 0.5s;
  }
  .klFlower3 {
    animation-delay: 1s;
  }
  .klFlower4 {
    animation-delay: 1.5s;
  }
  .klFlower5 {
    animation-delay: 2s;
  }

  /* Kids Registration Component - Portrait */
  .krMainContainer {
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow-x: hidden;
    background: linear-gradient(135deg, #87ceeb 0%, #ffb6c1 50%, #f0e68c 100%);
  }

  .krBackgroundAnimation {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
  }

  .krFloatingElement {
    position: absolute;
    animation: krFloat linear infinite;
    opacity: 0.6;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  }

  @keyframes krFloat {
    from {
      transform: translateY(100vh) rotate(0deg);
    }
    to {
      transform: translateY(-100px) rotate(360deg);
    }
  }

  .krRainbow {
    position: absolute;
    top: 5%;
    left: -50px;
    width: 200px;
    height: 100px;
    background: linear-gradient(
      180deg,
      transparent 0%,
      rgba(255, 0, 0, 0.2) 16.66%,
      rgba(255, 127, 0, 0.2) 33.33%,
      rgba(255, 255, 0, 0.2) 50%,
      rgba(0, 255, 0, 0.2) 66.66%,
      rgba(0, 0, 255, 0.2) 83.33%,
      rgba(139, 0, 255, 0.2) 100%
    );
    border-radius: 50px 50px 0 0;
    transform: rotate(-15deg);
    opacity: 0.6;
  }

  .krContentWrapper {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    padding-bottom: 100px;
  }

  .krHeaderSection {
    text-align: center;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.6s ease-out;
  }

  .krHeaderSection.krVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .krMainTitle {
    font-size: 1.75rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
  }

  .krWelcome {
    font-size: 1.25rem;
    color: #ff6b6b;
    font-weight: 500;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  }

  .krBrandName {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 2rem;
    font-weight: 800;
  }

  .krBrandText {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .krKidsText {
    color: #ffd93d;
    text-shadow: 2px 2px 0 #ffa502;
  }

  .krEmoji {
    font-size: 1.75rem;
    animation: krBounce 2s ease-in-out infinite;
  }

  @keyframes krBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  .krAdventure {
    font-size: 1.25rem;
    color: #a29bfe;
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  }

  .krProgressSection {
    width: 100%;
    max-width: 500px;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out 0.2s;
  }

  .krProgressSection.krProgressVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .krProgressBar {
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1rem;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .krProgressFill {
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #ffd93d);
    border-radius: 4px;
    transition: width 0.5s ease-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .krStepsContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }

  .krStep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
  }

  .krStepCircle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid transparent;
  }

  .krStepActive .krStepCircle {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .krStepCurrent .krStepCircle {
    border-color: #ff6b6b;
    animation: krPulse 2s ease-in-out infinite;
  }

  @keyframes krPulse {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
    }
    50% {
      box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
    }
  }

  .krStepIcon {
    font-size: 1rem;
  }

  .krStepNumber {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 16px;
    height: 16px;
    background: #ff6b6b;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: bold;
  }

  .krStepTitle {
    font-size: 0.7rem;
    color: #333;
    font-weight: 600;
    text-align: center;
    display: none;
  }

  .krFormContainer {
    width: 100%;
    max-width: 500px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out 0.4s;
  }

  .krFormContainer.krFormVisible {
    opacity: 1;
    transform: translateY(0);
  }

  .krFormCard {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
  }

  .krAnimalSection {
    margin-bottom: 1rem;
    text-align: center;
  }

  .krAnimalPrompt {
    font-size: 1rem;
    color: #4ecdc4;
    font-weight: 600;
    margin-bottom: 0.5rem;
  }

  .krAnimalGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    max-width: 280px;
    margin: 0 auto;
  }

  .krAnimalButton {
    padding: 0.75rem;
    border: 2px solid transparent;
    border-radius: 12px;
    background: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .krAnimalButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  .krAnimalButton.krAnimalSelected {
    border-color: var(--animal-color);
    background: linear-gradient(145deg, white, #f8f8f8);
    transform: scale(1.05);
  }

  .krAnimalEmoji {
    font-size: 1.5rem;
  }

  .krAnimalName {
    font-size: 0.75rem;
    font-weight: 600;
    color: #333;
  }

  .krErrorMessage {
    background: #ffe5e5;
    border: 1px solid #ff6b6b;
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    text-align: center;
  }

  .krErrorText {
    color: #d32f2f;
    font-weight: 500;
    font-size: 0.9rem;
  }

  .krStepContent {
    animation: krFadeIn 0.5s ease-out;
  }

  @keyframes krFadeIn {
    from {
      opacity: 0;
      transform: translateX(10px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .krStepHeading {
    font-size: 1.5rem;
    color: #333;
    margin-bottom: 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
  }

  .krStepEmoji {
    font-size: 1.75rem;
    animation: krRotate 3s ease-in-out infinite;
  }

  @keyframes krRotate {
    0%,
    100% {
      transform: rotate(-10deg);
    }
    50% {
      transform: rotate(10deg);
    }
  }

  /* Step 1 - Role Selection */
  .krRoleCards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }

  .krRoleCard {
    padding: 1.25rem;
    background: white;
    border: 2px solid transparent;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .krRoleCard:hover {
    transform: translateX(4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }

  .krRoleCard.krRoleSelected {
    border-color: #ff6b6b;
    background: linear-gradient(145deg, #fff, #fff5f5);
  }

  .krRoleIcon {
    font-size: 2rem;
  }

  .krRoleTitle {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.25rem;
  }

  .krRoleDesc {
    font-size: 0.85rem;
    color: #666;
  }

  .krRoleGlow {
    position: absolute;
    top: -25px;
    right: -25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    opacity: 0.3;
    filter: blur(20px);
  }

  /* Step 2 - User Information */
  .krFormFields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .krFormRow {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .krInputWrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .krLabel {
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .krLabelIcon {
    font-size: 1rem;
  }

  .krInput,
  .krSelect {
    padding: 0.75rem 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: white;
  }

  .krInput:focus,
  .krSelect:focus {
    outline: none;
    border-color: #4ecdc4;
    box-shadow: 0 0 0 3px rgba(78, 205, 196, 0.1);
  }

  .krInputWrapper.krInputError .krInput,
  .krInputWrapper.krInputError .krSelect {
    border-color: #ff6b6b;
  }

  .krErrorHint {
    font-size: 0.75rem;
    color: #ff6b6b;
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .krPasswordContainer {
    position: relative;
    display: flex;
    align-items: center;
  }

  .krPasswordContainer .krInput {
    padding-right: 2.5rem;
    flex: 1;
  }

  .krPasswordToggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .krPasswordToggle:hover {
    transform: scale(1.1);
  }

  /* Step 3 - Children Information */
  .krChildrenCount {
    text-align: center;
    margin-bottom: 1rem;
  }

  .krCounterButtons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 0.5rem;
  }

  .krCounterBtn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #4ecdc4;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .krCounterBtn:hover:not(:disabled) {
    transform: scale(1.1);
    background: #3ba99c;
  }

  .krCounterBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .krCounterValue {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    min-width: 40px;
    text-align: center;
  }

  .krChildrenList {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .krChildCard {
    background: linear-gradient(145deg, #fff, #f8f8f8);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .krChildTitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .krChildIcon {
    font-size: 1.25rem;
  }

  .krChildFields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  /* Step 4 - Subscription */
  .krSubscriptionCards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }

  .krSubCard {
    padding: 1.25rem;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .krSubCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  }

  .krSubCard.krSubSelected {
    border-color: #4ecdc4;
    background: linear-gradient(145deg, #fff, #f0ffff);
  }

  .krSubHeader {
    text-align: center;
    margin-bottom: 1rem;
  }

  .krSubEmoji {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.25rem;
  }

  .krSubTitle {
    font-size: 1.2rem;
    font-weight: 700;
    color: #333;
    margin: 0.25rem 0;
  }

  .krSubPrice {
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
  }

  .krPopularBadge,
  .krSavingsBadge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ff6b6b;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    transform: rotate(10deg);
  }

  .krSavingsBadge {
    background: #4ecdc4;
  }

  .krSubFeatures {
    margin: 0.75rem 0;
  }

  .krSubFeatures p {
    margin: 0.5rem 0;
    color: #555;
    font-size: 0.8rem;
  }

  .krSubFooter {
    text-align: center;
    padding-top: 0.75rem;
    border-top: 1px dashed #e0e0e0;
  }

  .krPriceTag {
    font-size: 1.1rem;
    font-weight: 700;
    color: #4ecdc4;
  }

  /* Navigation Buttons */
  .krButtonGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    gap: 0.75rem;
  }

  .krBackButton,
  .krNextButton,
  .krSubmitButton {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
  }

  .krBackButton {
    background: #e0e0e0;
    color: #666;
  }

  .krBackButton:hover {
    background: #d0d0d0;
    transform: translateX(-2px);
  }

  .krNextButton,
  .krSubmitButton {
    background: linear-gradient(135deg, #4ecdc4, #44a08d);
    color: white;
    box-shadow: 0 2px 8px rgba(78, 205, 196, 0.3);
    margin-left: auto;
  }

  .krSubmitButton {
    background: linear-gradient(135deg, #ff6b6b, #ff8e53);
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
  }

  .krNextButton:hover,
  .krSubmitButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .krBackIcon,
  .krNextIcon,
  .krSubmitIcon {
    font-size: 1.1rem;
  }

  .krButtonShine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      45deg,
      transparent 30%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 70%
    );
    transform: rotate(45deg) translateX(-100%);
    transition: transform 0.6s ease;
  }

  .krNextButton:hover .krButtonShine,
  .krSubmitButton:hover .krButtonShine {
    transform: rotate(45deg) translateX(100%);
  }

  .krLoadingContainer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .krLoadingText {
    font-size: 0.9rem;
  }

  .krLoadingDots {
    display: flex;
    gap: 0.2rem;
  }

  .krDot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: krDotBounce 1.4s ease-in-out infinite;
  }

  .krDot:nth-child(2) {
    animation-delay: 0.2s;
  }
  .krDot:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes krDotBounce {
    0%,
    80%,
    100% {
      transform: scale(0.8);
      opacity: 0.5;
    }
    40% {
      transform: scale(1.2);
      opacity: 1;
    }
  }

  .krButtonSparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .krSparkle {
    position: absolute;
    font-size: 0.8rem;
    animation: krSparkle 2s ease-in-out infinite;
  }

  .krSparkle:nth-child(1) {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
  }
  .krSparkle:nth-child(2) {
    top: 80%;
    right: 20%;
    animation-delay: 0.7s;
  }
  .krSparkle:nth-child(3) {
    bottom: 20%;
    left: 50%;
    animation-delay: 1.4s;
  }

  @keyframes krSparkle {
    0%,
    100% {
      opacity: 0;
      transform: scale(0) rotate(0deg);
    }
    50% {
      opacity: 1;
      transform: scale(1) rotate(180deg);
    }
  }

  /* Helper Character */
  .krHelperCharacter {
    position: fixed;
    bottom: 80px;
    right: 1rem;
    z-index: 10;
  }

  .krHelperEmoji {
    font-size: 2rem;
    display: block;
    animation: krHelperBounce 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  }

  @keyframes krHelperBounce {
    0%,
    100% {
      transform: translateY(0) rotate(-5deg);
    }
    25% {
      transform: translateY(-5px) rotate(5deg);
    }
    75% {
      transform: translateY(-3px) rotate(-3deg);
    }
  }

  .krHelperBubble {
    position: absolute;
    bottom: 100%;
    right: 0;
    background: white;
    padding: 0.75rem 1rem;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 0.85rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 0.25rem;
    min-width: 150px;
    opacity: 0;
    transform: translateY(5px);
    animation: krBubbleFadeIn 0.5s ease-out 1s forwards;
  }

  @keyframes krBubbleFadeIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .krHelperBubble::after {
    content: "";
    position: absolute;
    bottom: -6px;
    right: 15px;
    width: 12px;
    height: 12px;
    background: white;
    transform: rotate(45deg);
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
  }

  /* Login Prompt */
  .krLoginPrompt {
    text-align: center;
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 12px;
  }

  .krLoginText {
    font-size: 0.9rem;
    color: #333;
    margin: 0;
  }

  .krLoginLink {
    color: #4ecdc4;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
  }

  .krLoginLink:hover {
    color: #3ba99c;
  }

  .krLinkIcon {
    font-size: 1rem;
  }

  /* Success Overlay */
  .krSuccessOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: krOverlayFadeIn 0.5s ease-out;
  }

  @keyframes krOverlayFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .krSuccessContent {
    background: white;
    padding: 2rem 1.5rem;
    border-radius: 20px;
    text-align: center;
    position: relative;
    margin: 1rem;
    animation: krSuccessBounceIn 0.5s ease-out;
  }

  @keyframes krSuccessBounceIn {
    0% {
      transform: scale(0.8) translateY(20px);
      opacity: 0;
    }
    50% {
      transform: scale(1.05) translateY(-5px);
    }
    100% {
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }

  .krSuccessIcon {
    font-size: 3.5rem;
    display: block;
    margin-bottom: 0.75rem;
    animation: krSuccessRotate 1s ease-out;
  }

  @keyframes krSuccessRotate {
    from {
      transform: rotate(0deg) scale(0);
    }
    to {
      transform: rotate(360deg) scale(1);
    }
  }

  .krSuccessTitle {
    font-size: 1.75rem;
    color: #333;
    margin: 0.75rem 0;
    font-weight: 700;
  }

  .krSuccessText {
    font-size: 1rem;
    color: #666;
    margin: 0;
  }

  .krSuccessConfetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .krConfettiPiece {
    position: absolute;
    width: 8px;
    height: 8px;
    top: -8px;
    animation: krConfettiFall 3s ease-out forwards;
  }

  @keyframes krConfettiFall {
    to {
      transform: translateY(calc(100vh + 20px)) rotate(720deg);
      opacity: 0;
    }
  }

  /* Kids English Topics Page Styles - Portrait */
  .kidsEnglishTopicMainDiv {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(
      135deg,
      #ffecd2 0%,
      #fcb69f 25%,
      #ff9a9e 50%,
      #fecfef 75%,
      #fecfef 100%
    );
    position: relative;
    overflow-x: hidden;
    padding-bottom: 40px;
  }

  /* Floating Background Shapes */
  .kidsEnglishFloatingShapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .kidsEnglishFloatingShape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    animation: kidsEnglishFloat 20s ease-in-out infinite;
  }

  .kidsEnglishFloatingShape1 {
    width: 80px;
    height: 80px;
    background: #667eea;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .kidsEnglishFloatingShape2 {
    width: 100px;
    height: 100px;
    background: #f093fb;
    top: 40%;
    right: 5%;
    animation-delay: 5s;
  }

  .kidsEnglishFloatingShape3 {
    width: 60px;
    height: 60px;
    background: #4facfe;
    bottom: 30%;
    left: 10%;
    animation-delay: 10s;
  }

  .kidsEnglishFloatingShape4 {
    width: 70px;
    height: 70px;
    background: #fa709a;
    top: 60%;
    right: 10%;
    animation-delay: 15s;
  }

  @keyframes kidsEnglishFloat {
    0%,
    100% {
      transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
      transform: translateY(-30px) rotate(90deg) scale(1.1);
    }
    50% {
      transform: translateY(20px) rotate(180deg) scale(0.9);
    }
    75% {
      transform: translateY(-20px) rotate(270deg) scale(1.05);
    }
  }

  /* Header Section */
  .kidsEnglishHeaderSection {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-top: 100px;
    padding: 30px 20px;
    animation: kidsEnglishHeaderSlide 0.8s ease-out;
  }

  @keyframes kidsEnglishHeaderSlide {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsEnglishMainTitle {
    font-size: 2rem;
    font-weight: 900;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .kidsEnglishTitleIcon {
    font-size: 3rem;
    animation: kidsEnglishBounce 2s ease-in-out infinite;
  }

  .kidsEnglishTitleWord {
    display: inline-block;
    animation: kidsEnglishWordFloat 3s ease-in-out infinite;
  }

  .kidsEnglishTitleWord1 {
    color: #667eea;
    animation-delay: 0s;
  }

  .kidsEnglishTitleWord2 {
    color: #f093fb;
    animation-delay: 0.2s;
  }

  .kidsEnglishSparkle {
    font-size: 2.5rem;
    animation: kidsEnglishSparkle 1.5s ease-in-out infinite;
  }

  @keyframes kidsEnglishBounce {
    0%,
    100% {
      transform: translateY(0) scale(1);
    }
    50% {
      transform: translateY(-10px) scale(1.1);
    }
  }

  @keyframes kidsEnglishWordFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  @keyframes kidsEnglishSparkle {
    0%,
    100% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }
    50% {
      opacity: 0.7;
      transform: scale(1.2) rotate(180deg);
    }
  }

  .kidsEnglishGradeInfo {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .kidsEnglishGradeLabel {
    font-size: 1.5rem;
    font-weight: 700;
    color: #5a67d8;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 25px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .kidsEnglishLocation {
    font-size: 1.2rem;
    color: #e53e3e;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.8);
    padding: 8px 20px;
    border-radius: 30px;
  }

  .kidsLocationIcon {
    font-size: 1.1rem;
  }

  /* View Toggle */
  .kidsEnglishViewToggle {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
  }

  .kidsViewBtn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    border: none;
    border-radius: 30px;
    background: white;
    color: #4a5568;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  }

  .kidsViewBtn.kidsViewActive {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: scale(1.05);
  }

  .kidsViewIcon {
    width: 16px;
    height: 16px;
  }

  .kidsViewText {
    font-size: 0.9rem;
  }

  /* Topics Container */
  .kidsEnglishTopicsContainer {
    width: 100%;
    padding: 0px;
    position: relative;
    z-index: 10;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
  }

  .kidsTopicsVisible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Grid View - Category Section */
  .kidsEnglishCategorySection {
    margin-bottom: 50px;
    opacity: 0;
    animation: kidsEnglishFadeIn 0.8s ease forwards;
  }

  @keyframes kidsEnglishFadeIn {
    to {
      opacity: 1;
    }
  }

  .kidsEnglishCategoryTitle {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 20px;
    gap: 10px;
  }

  .kidsCategoryIcon {
    font-size: 2rem;
    animation: kidsEnglishRotate 3s linear infinite;
  }

  @keyframes kidsEnglishRotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .kidsEnglishTopicsGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-bottom: 20px;
  }

  .kidsEnglishTopicCard {
    background: linear-gradient(135deg, #ffffff 0%, #f7fafc 100%);
    border-radius: 20px;
    padding: 25px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    opacity: 0;
    animation: kidsTopicCardAppear 0.6s ease forwards;
  }

  @keyframes kidsTopicCardAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsEnglishTopicCard::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(102, 126, 234, 0.1) 0%,
      transparent 70%
    );
    transform: rotate(45deg);
    transition: all 0.5s ease;
    opacity: 0;
  }

  .kidsEnglishTopicCard:hover::before,
  .kidsTopicHovered::before {
    opacity: 1;
  }

  .kidsTopicSelected {
    animation: kidsTopicSelect 0.4s ease;
  }

  @keyframes kidsTopicSelect {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }

  .kidsTopicCardContent {
    position: relative;
    z-index: 1;
  }

  .kidsTopicEmoji {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
    animation: kidsEmojiPulse 2s ease-in-out infinite;
  }

  @keyframes kidsEmojiPulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
  }

  .kidsTopicDesc {
    font-size: 1rem;
    color: #718096;
    line-height: 1.5;
  }

  .kidsTopicCardGlow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      circle,
      rgba(102, 126, 234, 0.3) 0%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .kidsEnglishTopicCard:hover .kidsTopicCardGlow {
    opacity: 1;
  }

  /* List View Styles */
  .kidsEnglishListSection {
    margin-bottom: 30px;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    opacity: 0;
    animation: kidsListSectionAppear 0.6s ease forwards;
  }

  @keyframes kidsListSectionAppear {
    to {
      opacity: 1;
    }
  }

  .kidsEnglishListHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    width: 100%;
    text-align: left;
  }

  .kidsEnglishListHeader:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
  }

  .kidsListHeaderIcon {
    font-size: 1.5rem;
  }

  .kidsListHeaderText {
    flex-grow: 1;
    margin: 0 15px;
  }

  .kidsListHeaderArrow {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
  }

  .kidsListExpanded .kidsListHeaderArrow {
    transform: rotate(90deg);
  }

  .kidsEnglishListContent {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
  }

  .kidsListContentExpanded {
    max-height: 1000px;
  }

  .kidsEnglishListItem {
    display: flex;
    align-items: center;
    padding: 15px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid #e2e8f0;
  }

  .kidsEnglishListItem:last-child {
    border-bottom: none;
  }

  .kidsEnglishListItem:hover,
  .kidsListItemHovered {
    background: rgba(102, 126, 234, 0.05);
    padding-left: 40px;
  }

  .kidsListItemSelected {
    animation: kidsListItemSelect 0.4s ease;
  }

  @keyframes kidsListItemSelect {
    0% {
      background: rgba(102, 126, 234, 0.2);
    }
    100% {
      background: rgba(102, 126, 234, 0.05);
    }
  }

  .kidsListItemNumber {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 15px;
  }

  .kidsListItemEmoji {
    font-size: 1.5rem;
    margin-right: 15px;
  }

  .kidsListItemText {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
  }

  /* Curriculum Section */
  .kidsEnglishCurriculumSection {
    margin-top: 30px;
  }

  .kidsEnglishCurriculumTitle {
    font-size: 1.8rem;
    margin-bottom: 25px;
    gap: 10px;
  }

  .kidsCurriculumIcon {
    font-size: 2.2rem;
    animation: kidsEnglishSpin 2s ease-in-out infinite;
  }

  @keyframes kidsEnglishSpin {
    0%,
    100% {
      transform: rotate(0deg) scale(1);
    }
    50% {
      transform: rotate(10deg) scale(1.1);
    }
  }

  .kidsEnglishStrandsContainer {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .kidsEnglishStrandCard {
    background: white;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: kidsStrandCardAppear 0.6s ease forwards;
  }

  @keyframes kidsStrandCardAppear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsStrandTitle {
    font-size: 1.3rem;
    margin-bottom: 15px;
    gap: 8px;
  }

  .kidsStrandIcon {
    font-size: 1.1rem;
  }

  .kidsSubstrandSection {
    margin-bottom: 20px;
  }

  .kidsSubstrandTitle {
    font-size: 1rem;
    margin-bottom: 10px;
    padding-left: 8px;
    border-left: 3px solid #667eea;
  }

  .kidsSubstrandItems {
    gap: 8px;
  }

  .kidsSubstrandItem {
    padding: 10px 15px;
    border-radius: 10px;
    gap: 8px;
  }

  .kidsSubstrandSelected {
    animation: kidsSubstrandSelect 0.4s ease;
  }

  @keyframes kidsSubstrandSelect {
    0% {
      background: rgba(102, 126, 234, 0.3);
    }
    100% {
      background: rgba(102, 126, 234, 0.1);
    }
  }

  .kidsSubstrandCode {
    font-weight: 700;
    color: #667eea;
    font-size: 0.9rem;
  }

  .kidsSubstrandText {
    color: #2d3748;
    font-size: 1rem;
    flex-grow: 1;
  }

  /* Footer */
  .kidsEnglishFooter {
    padding: 30px 15px;
  }

  .kidsEnglishEncouragement {
    font-size: 1.4rem;
  }

  /* Kids Science Topics Page Styles - Portrait - Matching English Topics */
  .kidsScienceTopicMainDiv {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #e8f5e9 0%, #e3f2fd 100%);
    overflow: hidden;
    padding-top: 50px;
  }

  /* Floating Background Shapes - Portrait */
  .kidsScienceFloatingShapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .kidsScienceFloatingShape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    animation: kidsScienceFloat 20s ease-in-out infinite;
  }

  .kidsScienceFloatingShape1 {
    width: 100px;
    height: 100px;
    background: #4caf50;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .kidsScienceFloatingShape2 {
    width: 80px;
    height: 80px;
    background: #2196f3;
    top: 50%;
    right: 5%;
    animation-delay: 5s;
  }

  .kidsScienceFloatingShape3 {
    width: 60px;
    height: 60px;
    background: #ff9800;
    bottom: 25%;
    left: 10%;
    animation-delay: 10s;
  }

  .kidsScienceFloatingShape4 {
    width: 70px;
    height: 70px;
    background: #9c27b0;
    top: 30%;
    right: 20%;
    animation-delay: 15s;
  }

  @keyframes kidsScienceFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(20px, -20px) rotate(90deg);
    }
    50% {
      transform: translate(-15px, 15px) rotate(180deg);
    }
    75% {
      transform: translate(15px, -10px) rotate(270deg);
    }
  }

  /* Header Section - Portrait */
  .kidsScienceHeaderSection {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
    animation: kidsScienceHeaderSlide 0.8s ease-out;
  }

  @keyframes kidsScienceHeaderSlide {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsScienceMainTitle {
    font-size: 36px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .kidsScienceTitleIcon {
    font-size: 38px;
    animation: kidsScienceBounce 2s ease-in-out infinite;
  }

  @keyframes kidsScienceBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  .kidsScienceTitleWord {
    background: linear-gradient(45deg, #4caf50, #2196f3);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: 1px;
  }

  .kidsScienceTitleWord1 {
    animation: kidsScienceTitlePop 0.8s ease-out 0.2s both;
  }

  .kidsScienceTitleWord2 {
    animation: kidsScienceTitlePop 0.8s ease-out 0.4s both;
  }

  @keyframes kidsScienceTitlePop {
    from {
      transform: scale(0);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .kidsScienceSparkle {
    font-size: 24px;
    animation: kidsScienceSparkle 1.5s ease-in-out infinite;
  }

  @keyframes kidsScienceSparkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.2) rotate(180deg);
      opacity: 1;
    }
  }

  .kidsScienceGradeInfo {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }

  .kidsScienceGradeLabel {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(76, 175, 80, 0.3);
    animation: kidsScienceGradePulse 2s ease-in-out infinite;
  }

  @keyframes kidsScienceGradePulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 3px 12px rgba(76, 175, 80, 0.3);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 5px 16px rgba(76, 175, 80, 0.4);
    }
  }

  .kidsScienceLocation {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 16px;
  }

  .kidsLocationIcon {
    font-size: 18px;
  }

  /* View Toggle - Portrait */
  .kidsScienceViewToggle {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 25px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
  }

  .kidsViewBtn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid #e0e0e0;
    background: white;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsViewBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  }

  .kidsViewActive {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    border-color: transparent;
  }

  .kidsViewIcon svg {
    width: 18px;
    height: 18px;
  }

  .kidsViewText {
    font-weight: 600;
    display: none;
  }

  /* Topics Container - Portrait */
  .kidsScienceTopicsContainer {
    width: 100%;
    padding: 0 15px;
    position: relative;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .kidsTopicsVisible {
    opacity: 1;
  }

  /* Category Section - Portrait */
  .kidsScienceCategorySection {
    margin-bottom: 30px;
    opacity: 0;
    animation: kidsScienceFadeInUp 0.6s ease-out forwards;
  }

  .kidsScienceCategorySection:nth-child(1) {
    animation-delay: 0.1s;
  }
  .kidsScienceCategorySection:nth-child(2) {
    animation-delay: 0.2s;
  }
  .kidsScienceCategorySection:nth-child(3) {
    animation-delay: 0.3s;
  }
  .kidsScienceCategorySection:nth-child(4) {
    animation-delay: 0.4s;
  }
  .kidsScienceCategorySection:nth-child(5) {
    animation-delay: 0.5s;
  }

  @keyframes kidsScienceFadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsScienceCategoryTitle {
    font-size: 22px;
    color: #2c3e50;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .kidsCategoryIcon {
    font-size: 26px;
  }

  /* Topics Grid - Portrait */
  .kidsScienceTopicsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
  }

  .kidsScienceTopicCard {
    background: white;
    border-radius: 15px;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: kidsScienceCardFadeIn 0.5s ease-out forwards;
  }

  @keyframes kidsScienceCardFadeIn {
    from {
      opacity: 0;
      transform: translateY(15px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kidsTopicHovered {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  }

  .kidsTopicSelected {
    animation: kidsScienceTopicSelect 0.5s ease-out;
  }

  @keyframes kidsScienceTopicSelect {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
      opacity: 0.7;
    }
  }

  .kidsTopicCardContent {
    position: relative;
    z-index: 2;
  }

  .kidsTopicEmoji {
    font-size: 40px;
    margin-bottom: 10px;
    display: block;
    animation: kidsScienceEmojiFloat 3s ease-in-out infinite;
  }

  @keyframes kidsScienceEmojiFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3px);
    }
  }

  .kidsTopicCardGlow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(76, 175, 80, 0.2) 0%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .kidsScienceTopicCard:hover .kidsTopicCardGlow {
    opacity: 1;
  }

  /* List View - Portrait */
  .kidsScienceListSection {
    margin-bottom: 15px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    opacity: 0;
    animation: kidsScienceFadeInLeft 0.5s ease-out forwards;
  }

  .kidsScienceListSection:nth-child(1) {
    animation-delay: 0.1s;
  }
  .kidsScienceListSection:nth-child(2) {
    animation-delay: 0.2s;
  }
  .kidsScienceListSection:nth-child(3) {
    animation-delay: 0.3s;
  }
  .kidsScienceListSection:nth-child(4) {
    animation-delay: 0.4s;
  }
  .kidsScienceListSection:nth-child(5) {
    animation-delay: 0.5s;
  }

  @keyframes kidsScienceFadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-15px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .kidsScienceListHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsScienceListHeader:hover {
    background: linear-gradient(135deg, #45a049 0%, #388e3c 100%);
  }

  .kidsListExpanded {
    background: linear-gradient(135deg, #45a049 0%, #388e3c 100%);
  }

  .kidsListHeaderIcon {
    font-size: 20px;
  }

  .kidsListHeaderText {
    font-size: 16px;
    font-weight: 600;
    flex-grow: 1;
    text-align: left;
    margin-left: 10px;
  }

  .kidsListHeaderArrow {
    font-size: 16px;
    transition: transform 0.3s ease;
  }

  .kidsScienceListContent {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
  }

  .kidsListContentExpanded {
    max-height: 600px;
  }

  .kidsScienceListItem {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .kidsScienceListItem:last-child {
    border-bottom: none;
  }

  .kidsListItemHovered {
    background: #f8f9fa;
    padding-left: 20px;
  }

  .kidsListItemSelected {
    animation: kidsScienceListSelect 0.5s ease-out;
  }

  @keyframes kidsScienceListSelect {
    0% {
      background: white;
    }
    50% {
      background: #e8f5e9;
    }
    100% {
      background: white;
    }
  }

  .kidsListItemNumber {
    width: 26px;
    height: 26px;
    background: #4caf50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    margin-right: 12px;
    flex-shrink: 0;
  }

  .kidsListItemEmoji {
    font-size: 20px;
    margin-right: 10px;
  }

  .kidsListItemText {
    font-size: 14px;
    color: #2c3e50;
    font-weight: 500;
  }

  /* Curriculum Section - Portrait */
  .kidsScienceCurriculumSection {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 2px dashed #e0e0e0;
  }

  .kidsScienceCurriculumTitle {
    font-size: 26px;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .kidsCurriculumIcon {
    font-size: 30px;
  }

  .kidsScienceStrandsContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .kidsScienceStrandCard {
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: kidsScienceStrandFadeIn 0.5s ease-out forwards;
  }

  @keyframes kidsScienceStrandFadeIn {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsStrandTitle {
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 8px;
    border-radius: 8px;
  }

  .kidsStrandTitleHovered {
    background: #f0f9ff;
    transform: translateX(3px);
  }

  .kidsStrandIcon {
    font-size: 22px;
  }

  .kidsStrandContent {
    margin-top: 10px;
  }

  .kidsSubstrandSection {
    margin-bottom: 15px;
  }

  .kidsSubstrandTitle {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    padding-left: 30px;
    font-weight: 600;
  }

  .kidsSubstrandItems {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .kidsSubstrandItem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f8f9fa;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 30px;
    font-size: 13px;
  }

  .kidsSubstrandHovered {
    background: #e8f5e9;
    transform: translateX(3px);
  }

  .kidsSubstrandSelected {
    animation: kidsScienceSubstrandSelect 0.5s ease-out;
  }

  @keyframes kidsScienceSubstrandSelect {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(0.95);
    }
    100% {
      transform: scale(1);
    }
  }

  .kidsSubstrandCode {
    font-size: 11px;
    color: #999;
    font-weight: 600;
  }

  .kidsSubstrandText {
    font-size: 13px;
    color: #2c3e50;
  }

  /* Footer - Portrait */
  .kidsScienceFooter {
    margin-top: 50px;
    text-align: center;
    padding-bottom: 30px;
  }

  .kidsScienceEncouragement {
    font-size: 20px;
    margin: 0;
  }

  .kidsRainbowText {
    background: linear-gradient(
      45deg,
      #f44336,
      #ff9800,
      #ffeb3b,
      #4caf50,
      #2196f3,
      #9c27b0
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    animation: kidsRainbowAnimation 3s ease-in-out infinite;
  }

  @keyframes kidsRainbowAnimation {
    0%,
    100% {
      filter: hue-rotate(0deg);
    }
    50% {
      filter: hue-rotate(30deg);
    }
  }

  /* End of Kids Science Topics Page Styles - Portrait */

  /* Kids Math Topics Page Styles - Portrait - Matching English and Science */
  .kidsMathTopicMainDiv {
    width: 100%;
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #fce4ec 0%, #f3e5f5 100%);
    overflow: hidden;
    padding-top: 50px;
  }

  /* Floating Background Shapes - Portrait */
  .kidsMathFloatingShapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }

  .kidsMathFloatingShape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    animation: kidsMathFloat 20s ease-in-out infinite;
  }

  .kidsMathFloatingShape1 {
    width: 100px;
    height: 100px;
    background: #e91e63;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
  }

  .kidsMathFloatingShape2 {
    width: 80px;
    height: 80px;
    background: #3f51b5;
    top: 50%;
    right: 5%;
    animation-delay: 5s;
  }

  .kidsMathFloatingShape3 {
    width: 60px;
    height: 60px;
    background: #ff5722;
    bottom: 25%;
    left: 10%;
    animation-delay: 10s;
  }

  .kidsMathFloatingShape4 {
    width: 70px;
    height: 70px;
    background: #673ab7;
    top: 30%;
    right: 20%;
    animation-delay: 15s;
  }

  @keyframes kidsMathFloat {
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
    }
    25% {
      transform: translate(20px, -20px) rotate(90deg);
    }
    50% {
      transform: translate(-15px, 15px) rotate(180deg);
    }
    75% {
      transform: translate(15px, -10px) rotate(270deg);
    }
  }

  /* Header Section - Portrait */
  .kidsMathHeaderSection {
    text-align: center;
    margin-bottom: 30px;
    padding: 0 20px;
    position: relative;
    z-index: 10;
    animation: kidsMathHeaderSlide 0.8s ease-out;
  }

  @keyframes kidsMathHeaderSlide {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsMathMainTitle {
    font-size: 36px;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .kidsMathTitleIcon {
    font-size: 38px;
    animation: kidsMathBounce 2s ease-in-out infinite;
  }

  @keyframes kidsMathBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  .kidsMathTitleWord {
    background: linear-gradient(45deg, #e91e63, #3f51b5);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: 1px;
  }

  .kidsMathTitleWord1 {
    animation: kidsMathTitlePop 0.8s ease-out 0.2s both;
  }

  .kidsMathTitleWord2 {
    animation: kidsMathTitlePop 0.8s ease-out 0.4s both;
  }

  @keyframes kidsMathTitlePop {
    from {
      transform: scale(0);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  .kidsMathSparkle {
    font-size: 24px;
    animation: kidsMathSparkle 1.5s ease-in-out infinite;
  }

  @keyframes kidsMathSparkle {
    0%,
    100% {
      transform: scale(1) rotate(0deg);
      opacity: 0.8;
    }
    50% {
      transform: scale(1.2) rotate(180deg);
      opacity: 1;
    }
  }

  .kidsMathGradeInfo {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }

  .kidsMathGradeLabel {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 3px 12px rgba(233, 30, 99, 0.3);
    animation: kidsMathGradePulse 2s ease-in-out infinite;
  }

  @keyframes kidsMathGradePulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 3px 12px rgba(233, 30, 99, 0.3);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 5px 16px rgba(233, 30, 99, 0.4);
    }
  }

  .kidsMathLocation {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #666;
    font-size: 16px;
  }

  /* View Toggle - Portrait */
  .kidsMathViewToggle {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
  }

  /* Topics Container - Portrait */
  .kidsMathTopicsContainer {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .kidsTopicsVisible {
    opacity: 1;
  }

  /* Category Section - Portrait */
  .kidsMathCategorySection {
    margin-bottom: 30px;
    opacity: 0;
    animation: kidsMathFadeInUp 0.6s ease-out forwards;
  }

  .kidsMathCategorySection:nth-child(1) {
    animation-delay: 0.1s;
  }
  .kidsMathCategorySection:nth-child(2) {
    animation-delay: 0.2s;
  }
  .kidsMathCategorySection:nth-child(3) {
    animation-delay: 0.3s;
  }
  .kidsMathCategorySection:nth-child(4) {
    animation-delay: 0.4s;
  }

  @keyframes kidsMathFadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .kidsMathCategoryTitle {
    font-size: 28px;
    color: #2c3e50;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Topics Grid - Portrait */
  .kidsMathTopicsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
  }

  .kidsMathTopicCard {
    background: white;
    border-radius: 15px;
    padding: 20px 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: kidsMathCardFadeIn 0.5s ease-out forwards;
  }

  @keyframes kidsMathCardFadeIn {
    from {
      opacity: 0;
      transform: translateY(15px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .kidsTopicEmoji {
    font-size: 40px;
    margin-bottom: 10px;
    display: block;
    animation: kidsMathEmojiFloat 3s ease-in-out infinite;
  }

  @keyframes kidsMathEmojiFloat {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-3px);
    }
  }

  .kidsTopicCardGlow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(233, 30, 99, 0.2) 0%,
      transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }

  .kidsMathTopicCard:hover .kidsTopicCardGlow {
    opacity: 1;
  }

  /* List View - Portrait */
  .kidsMathListSection {
    margin-bottom: 15px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    opacity: 0;
    animation: kidsMathFadeInLeft 0.5s ease-out forwards;
  }

  .kidsMathListSection:nth-child(1) {
    animation-delay: 0.1s;
  }
  .kidsMathListSection:nth-child(2) {
    animation-delay: 0.2s;
  }
  .kidsMathListSection:nth-child(3) {
    animation-delay: 0.3s;
  }
  .kidsMathListSection:nth-child(4) {
    animation-delay: 0.4s;
  }

  @keyframes kidsMathFadeInLeft {
    from {
      opacity: 0;
      transform: translateX(-15px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .kidsMathListHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsMathListHeader:hover {
    background: linear-gradient(135deg, #c2185b 0%, #ad1457 100%);
  }

  .kidsListHeaderIcon {
    font-size: 20px;
  }

  .kidsListHeaderText {
    font-size: 16px;
    font-weight: 600;
    flex-grow: 1;
    text-align: left;
    margin-left: 10px;
  }

  .kidsListHeaderArrow {
    font-size: 16px;
    transition: transform 0.3s ease;
  }

  .kidsMathListContent {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
  }

  .kidsListContentExpanded {
    max-height: 600px;
  }

  .kidsMathListItem {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .kidsMathListItem:last-child {
    border-bottom: none;
  }

  .kidsListItemHovered {
    background: #f8f9fa;
    padding-left: 20px;
  }

  .kidsListItemSelected {
    animation: kidsMathListSelect 0.5s ease-out;
  }

  @keyframes kidsMathListSelect {
    0% {
      background: white;
    }
    50% {
      background: #fce4ec;
    }
    100% {
      background: white;
    }
  }

  .kidsListItemNumber {
    width: 26px;
    height: 26px;
    background: #e91e63;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    margin-right: 12px;
    flex-shrink: 0;
  }

  .kidsListItemEmoji {
    font-size: 20px;
    margin-right: 10px;
  }

  .kidsListItemText {
    font-size: 14px;
    color: #2c3e50;
    font-weight: 500;
  }

  /* Curriculum Section - Portrait */
  .kidsMathCurriculumSection {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 2px dashed #e0e0e0;
  }

  .kidsMathCurriculumTitle {
    font-size: 26px;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .kidsMathStrandsContainer {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .kidsMathStrandCard {
    background: white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    animation: kidsMathStrandFadeIn 0.5s ease-out forwards;
  }

  @keyframes kidsMathStrandFadeIn {
    from {
      opacity: 0;
      transform: translateY(15px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Footer - Portrait */
  .kidsMathFooter {
    margin-top: 50px;
    text-align: center;
    padding-bottom: 30px;
  }

  .kidsMathEncouragement {
    font-size: 20px;
    margin: 0;
  }

  /* End of Kids Math Topics Page Styles - Portrait */

  /* Kids Dashboard Styles - Portrait */
  .kidsDashboardContainer {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 50px);
    margin-top: 50px;
    background: linear-gradient(135deg, #fff5f5 0%, #f0f9ff 50%, #f0fdf4 100%);
    /* padding-top: 60px; */
    position: relative;
    overflow: hidden;
  }

  /* Background decorations - smaller for mobile */
  .kidsDashboardContainer::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(
      circle,
      rgba(255, 184, 56, 0.1) 0%,
      transparent 70%
    );
    border-radius: 50%;
    animation: floatBubble 20s ease-in-out infinite;
  }

  .kidsDashboardContainer::after {
    content: "";
    position: absolute;
    bottom: -75px;
    left: -75px;
    width: 200px;
    height: 200px;
    background: radial-gradient(
      circle,
      rgba(60, 179, 246, 0.1) 0%,
      transparent 70%
    );
    border-radius: 50%;
    animation: floatBubble 25s ease-in-out infinite reverse;
  }

  /* Mobile Menu Toggle */
  .kidsMobileMenuToggle {
    position: fixed;
    top: 70px;
    left: 20px;
    z-index: 1000;
    width: 48px;
    height: 48px;
    background: white;
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .kidsMenuIcon {
    font-size: 24px;
  }

  /* Mobile Overlay */
  .kidsMobileOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    display: none;
  }

  .kidsMobileOverlay.show {
    display: block;
  }

  /* Sidebar Styles for Mobile */
  .kidsDashboardSidebar {
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    max-width: 280px;
    height: 100vh;
    background: linear-gradient(180deg, #9c06c1 0%, #7c3aed 50%, #2563eb 100%);
    color: white;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
    transition: left 0.3s ease;
    z-index: 999;
    overflow: hidden;
  }

  .kidsDashboardSidebar.mobileMenuOpen {
    left: 0;
  }

  .kidsDashboardSidebar::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 70%
    );
    animation: rotateBg 30s linear infinite;
  }

  .kidsSidebarHeader {
    padding: 80px 20px 20px;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  .kidsUserAvatar {
    font-size: 56px;
    display: block;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    animation: bounceAvatar 2s ease-in-out infinite;
  }

  .kidsSidebarHeader h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }

  .kidsUserLevel {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    backdrop-filter: blur(10px);
  }

  .kidsLevelIcon {
    font-size: 14px;
  }

  /* Navigation */
  .kidsDashboardNav {
    flex: 1;
    padding: 16px 0;
    position: relative;
    z-index: 1;
    overflow-y: auto;
  }

  .kidsNavItem {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
  }

  .kidsNavItem:hover {
    background: rgba(255, 255, 255, 0.1);
    padding-left: 26px;
  }

  .kidsNavIcon {
    font-size: 20px;
    min-width: 20px;
  }

  .kidsNavLabel {
    white-space: nowrap;
  }

  .kidsNavActive {
    background: rgba(255, 255, 255, 0.2) !important;
    border-left: 3px solid white;
    font-weight: 700;
  }

  .kidsSidebarFooter {
    padding: 16px;
    position: relative;
    z-index: 1;
  }

  .kidsLogoutButton {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsLogoutButton:hover {
    background: rgba(255, 255, 255, 0.3);
  }

  /* Main Content Area */
  .kidsDashboardMain {
    /* flex: 1; */
    padding: 80px 16px 20px;
    overflow-y: auto;
    position: relative;
  }

  .kidsDashboardContent {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* Home Section */
  .kidsDashboardHome {
    animation: fadeInUp 0.5s ease;
  }

  .kidsWelcomeSection {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .kidsWelcomeSection::before {
    content: "";
    position: absolute;
    top: -30px;
    right: -30px;
    width: 120px;
    height: 120px;
    background: radial-gradient(
      circle,
      rgba(255, 184, 56, 0.2) 0%,
      transparent 70%
    );
    border-radius: 50%;
  }

  .kidsWelcomeContent {
    margin-bottom: 16px;
  }

  .kidsWelcomeTitle {
    font-size: 24px;
    margin: 0 0 6px;
    color: #1e293b;
    font-weight: 800;
  }

  .kidsWaveEmoji {
    display: inline-block;
    animation: wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
    margin-left: 6px;
  }

  .kidsWelcomeMessage {
    font-size: 16px;
    color: #64748b;
    margin: 0;
  }

  .kidsAvatarDisplay {
    position: relative;
    z-index: 1;
  }

  .kidsMainAvatar {
    font-size: 64px;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1));
  }

  .kidsLevelBadge {
    position: absolute;
    bottom: -8px;
    right: -8px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(245, 158, 11, 0.4);
  }

  /* Stats Overview */
  .kidsStatsOverview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }

  .kidsStatCard {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
  }

  .kidsStatCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .kidsStatIcon {
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
  }

  .kidsStatStars .kidsStatIcon {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  }

  .kidsStatBadges .kidsStatIcon {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  }

  .kidsStatStreak .kidsStatIcon {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  }

  .kidsStatContent h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: #1e293b;
  }

  .kidsStatContent p {
    margin: 2px 0 0;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
  }

  /* Subject Cards */
  .kidsSubjectsSection {
    margin-bottom: 20px;
  }

  .kidsSectionTitle {
    font-size: 24px;
    margin: 0 0 16px;
    color: #1e293b;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .kidsTitleIcon {
    font-size: 28px;
  }

  .kidsSubjectCards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .kidsSubjectCard {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }

  .kidsSubjectCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .kidsSubjectHeader {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }

  .kidsSubjectEmoji {
    font-size: 36px;
  }

  .kidsSubjectHeader h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    flex: 1;
  }

  .kidsSubjectLevel {
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 12px;
  }

  .kidsLastPlayed {
    font-size: 12px;
    color: #94a3b8;
    margin: 0 0 12px;
  }

  .kidsPlayButton {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .kidsPlayButton:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3);
  }

  .kidsPlayIcon {
    font-size: 16px;
  }

  /* Weekly Progress */
  .kidsWeeklyProgress {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
  }

  .kidsWeekDays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
  }

  .kidsWeekDay {
    text-align: center;
    padding: 12px 4px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
  }

  .kidsWeekDay.completed {
    background: linear-gradient(135deg, #c7f9cc 0%, #a8e6cf 100%);
  }

  .kidsDayName {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 6px;
  }

  .kidsWeekDay.completed .kidsDayName {
    color: #059669;
  }

  .kidsDayIcon {
    font-size: 24px;
    margin-bottom: 6px;
  }

  .kidsDayStars {
    font-size: 10px;
    letter-spacing: 1px;
  }

  /* Recent Achievements */
  .kidsRecentAchievements {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  .kidsAchievementsList {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .kidsAchievementItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
  }

  .kidsAchievementItem::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.3) 0%,
      transparent 70%
    );
    animation: shimmer 3s ease-in-out infinite;
  }

  .kidsAchievementIcon {
    font-size: 40px;
    position: relative;
    z-index: 1;
  }

  .kidsAchievementDetails {
    flex: 1;
    position: relative;
    z-index: 1;
  }

  .kidsAchievementDetails h4 {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: #92400e;
  }

  .kidsAchievementDetails p {
    margin: 0;
    font-size: 12px;
    color: #b45309;
  }

  .kidsNewBadge {
    background: #ef4444;
    color: white;
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 700;
    position: relative;
    z-index: 1;
    animation: pulse 2s ease-in-out infinite;
  }

  /* Profile Section */
  .kidsDashboardProfile {
    animation: fadeInUp 0.5s ease;
  }

  .kidsPageTitle {
    font-size: 28px;
    margin: 0 0 20px;
    color: #1e293b;
    font-weight: 800;
  }

  .kidsAvatarSection {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
  }

  .kidsAvatarSection h3 {
    font-size: 20px;
    margin: 0 0 16px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsAvatarGrid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
  }

  .kidsAvatarOption {
    aspect-ratio: 1;
    background: #f1f5f9;
    border: 2px solid transparent;
    border-radius: 16px;
    font-size: 36px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .kidsAvatarOption:hover {
    transform: scale(1.1);
    background: #e2e8f0;
  }

  .kidsAvatarOption.selected {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    border-color: #7c3aed;
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);
  }

  .kidsProfileInfo {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  .kidsProfileCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-bottom: 24px;
  }

  .kidsSelectedAvatar {
    font-size: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 24px;
    box-shadow: 0 10px 20px rgba(251, 191, 36, 0.2);
  }

  .kidsProfileDetails h3 {
    margin: 0 0 6px;
    font-size: 24px;
    font-weight: 800;
    color: #1e293b;
  }

  .kidsProfileEmail {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 16px;
  }

  .kidsProfileStats {
    display: flex;
    justify-content: center;
    gap: 24px;
  }

  .kidsProfileStat {
    text-align: center;
  }

  .kidsStatLabel {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 2px;
  }

  .kidsStatValue {
    display: block;
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
  }

  .kidsExperienceSection {
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
  }

  .kidsExperienceSection h4 {
    font-size: 18px;
    margin: 0 0 12px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsXPBar {
    height: 20px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
  }

  .kidsXPFill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
    border-radius: 10px;
    transition: width 0.5s ease;
    position: relative;
  }

  .kidsXPFill::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%
    );
    animation: slideShine 3s ease-in-out infinite;
  }

  .kidsXPText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsXPMessage {
    font-size: 14px;
    color: #64748b;
    margin: 0;
  }

  /* Floating Action Buttons */
  .kidsFloatingActions {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 100;
  }

  .kidsFloatingBtn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .kidsFloatingBtn:hover {
    transform: scale(1.1);
  }

  .kidsHelpBtn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  }

  .kidsQuickPlayBtn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }

  /* Progress Section */
  .kidsDashboardProgress {
    animation: fadeInUp 0.5s ease;
  }

  .kidsProgressOverview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }

  .kidsProgressCard {
    background: white;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
  }

  .kidsProgressCard h3 {
    font-size: 18px;
    margin: 0 0 16px;
    color: #64748b;
    font-weight: 600;
  }

  .kidsStarDisplay,
  .kidsTopicDisplay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .kidsBigNumber {
    font-size: 48px;
    font-weight: 800;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .kidsStarIcon,
  .kidsCheckIcon {
    font-size: 40px;
  }

  .kidsSubjectProgressDetails {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
  }

  .kidsSubjectProgressDetails h3 {
    font-size: 20px;
    margin: 0 0 16px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsSubjectProgressItem {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 12px;
  }

  .kidsSubjectInfo {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .kidsSubjectLevel {
    background: #e2e8f0;
    padding: 3px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
  }

  .kidsFullProgressBar {
    height: 14px;
    background: #e2e8f0;
    border-radius: 7px;
    overflow: hidden;
  }

  .kidsFullProgressFill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 7px;
    transition: width 0.5s ease;
  }

  .kidsProgressPercent {
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsLearningPath {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  .kidsLearningPath h3 {
    font-size: 20px;
    margin: 0 0 20px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsPathSteps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .kidsPathStep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
  }

  .kidsStepIcon {
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: #e2e8f0;
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  .kidsPathStep.completed .kidsStepIcon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  }

  .kidsPathStep.current .kidsStepIcon {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    animation: pulseGlow 2s ease-in-out infinite;
  }

  .kidsPathStep p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
  }

  .kidsPathStep.completed p {
    color: #10b981;
  }

  .kidsPathStep.current p {
    color: #f59e0b;
  }

  .kidsPathLine {
    display: none;
  }

  /* Achievements Section */
  .kidsDashboardAchievements {
    animation: fadeInUp 0.5s ease;
  }

  .kidsAchievementCategories {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
  }

  .kidsCategoryTab {
    padding: 8px 16px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsCategoryTab:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
  }

  .kidsCategoryTab.active {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    border-color: transparent;
    color: white;
  }

  .kidsAchievementGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
  }

  .kidsBadgeItem {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .kidsBadgeItem:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .kidsBadgeIcon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
  }

  .kidsBadgeIcon.locked {
    filter: grayscale(1);
    opacity: 0.5;
  }

  .kidsBadgeItem h4 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsBadgeItem p {
    margin: 0 0 12px;
    font-size: 12px;
    color: #64748b;
  }

  .kidsBadgeStatus {
    display: inline-block;
    padding: 4px 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
  }

  .kidsBadgeProgress {
    display: inline-block;
    padding: 4px 12px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
  }

  .kidsBadgeItem.earned::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
      circle,
      rgba(16, 185, 129, 0.1) 0%,
      transparent 70%
    );
    animation: rotateBg 20s linear infinite;
  }

  .kidsSpecialAchievements {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.2);
  }

  .kidsSpecialAchievements h3 {
    font-size: 20px;
    margin: 0 0 16px;
    color: #92400e;
    font-weight: 700;
  }

  .kidsSpecialBadges {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .kidsSpecialBadge {
    background: white;
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  .kidsRainbowBadge,
  .kidsGoldBadge {
    font-size: 56px;
    display: block;
    margin-bottom: 12px;
  }

  .kidsSpecialBadge p {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
  }

  /* Friends Section */
  .kidsDashboardFriends {
    animation: fadeInUp 0.5s ease;
  }

  .kidsFriendsList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
  }

  .kidsFriendCard {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.3s ease;
  }

  .kidsFriendCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .kidsFriendAvatar {
    font-size: 40px;
  }

  .kidsFriendInfo {
    flex: 1;
  }

  .kidsFriendInfo h4 {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsFriendInfo p {
    margin: 0;
    font-size: 12px;
    color: #64748b;
  }

  .kidsOnlineStatus {
    font-size: 12px;
    font-weight: 600;
  }

  .kidsOnlineStatus.online {
    color: #10b981;
  }

  .kidsOnlineStatus.offline {
    color: #94a3b8;
  }

  .kidsLeaderboard {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  .kidsLeaderboard h3 {
    font-size: 20px;
    margin: 0 0 16px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsLeaderboardList {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .kidsLeaderboardItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.3s ease;
  }

  .kidsLeaderboardItem.current {
    background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
  }

  .kidsRank {
    font-size: 24px;
    min-width: 32px;
  }

  .kidsLeaderAvatar {
    font-size: 32px;
  }

  .kidsLeaderName {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsLeaderScore {
    font-size: 16px;
    font-weight: 700;
    color: #f59e0b;
  }

  /* Rewards Section */
  .kidsDashboardRewards {
    animation: fadeInUp 0.5s ease;
    position: relative;
  }

  .kidsPointsBalance {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
    text-align: center;
    margin-bottom: 20px;
  }

  .kidsPointsBalance h3 {
    font-size: 20px;
    margin: 0 0 12px;
    color: white;
    font-weight: 700;
  }

  .kidsPointsDisplay {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .kidsPointsNumber {
    font-size: 48px;
    font-weight: 800;
    color: white;
  }

  .kidsPointsIcon {
    font-size: 44px;
  }

  .kidsRewardsGrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .kidsRewardItem {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s ease;
  }

  .kidsRewardItem:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .kidsRewardIcon {
    font-size: 48px;
    display: block;
    margin-bottom: 12px;
  }

  .kidsRewardItem h4 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsRewardItem p {
    margin: 0 0 12px;
    font-size: 12px;
    color: #64748b;
  }

  .kidsRewardButton {
    width: 100%;
    padding: 10px 16px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsRewardButton:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);
  }

  .kidsCelebration {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 24px;
    padding: 32px 48px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 1000;
    animation: celebrationBounce 0.5s ease;
  }

  .kidsCelebrationEmoji {
    font-size: 64px;
    display: inline-block;
    margin: 0 8px;
    animation: spin 1s ease-in-out;
  }

  .kidsCelebration h3 {
    margin: 16px 0 0;
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(
      45deg,
      #f44336,
      #ff9800,
      #ffeb3b,
      #4caf50,
      #2196f3,
      #9c27b0
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Parent Zone */
  .kidsDashboardParents {
    animation: fadeInUp 0.5s ease;
  }

  .kidsChildrenOverview {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
  }

  .kidsChildrenOverview h3 {
    font-size: 20px;
    margin: 0 0 16px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsChildCard {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .kidsChildAvatar {
    font-size: 40px;
  }

  .kidsChildInfo {
    flex: 1;
  }

  .kidsChildInfo h4 {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
  }

  .kidsChildInfo p {
    margin: 0;
    font-size: 12px;
    color: #64748b;
  }

  .kidsViewProgressBtn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsViewProgressBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
  }

  .kidsWeeklyReport {
    background: white;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
  }

  .kidsWeeklyReport h3 {
    font-size: 20px;
    margin: 0 0 16px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsReportStats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .kidsReportStat {
    text-align: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
  }

  .kidsReportStat h4 {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 800;
    color: #8b5cf6;
  }

  .kidsReportStat p {
    margin: 0;
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
  }

  .kidsParentSettings {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .kidsSettingButton {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
  }

  .kidsSettingButton:hover {
    border-color: #8b5cf6;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.2);
  }

  .kidsSettingButton span {
    font-size: 36px;
  }

  .kidsSettingButton {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
  }

  .kidsParentMessage {
    background: white;
    border-radius: 20px;
    padding: 40px 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
  }

  .kidsLockIcon {
    font-size: 64px;
    display: block;
    margin-bottom: 20px;
  }

  .kidsParentMessage h3 {
    font-size: 24px;
    margin: 0 0 12px;
    color: #1e293b;
    font-weight: 700;
  }

  .kidsParentMessage p {
    font-size: 16px;
    color: #64748b;
    margin: 0;
  }

  /* Animations */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes floatBubble {
    0%,
    100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(20px, -20px) scale(1.1);
    }
    66% {
      transform: translate(-15px, 15px) scale(0.9);
    }
  }

  @keyframes rotateBg {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes bounceAvatar {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  @keyframes wave {
    0%,
    100% {
      transform: rotate(0deg);
    }
    20%,
    60% {
      transform: rotate(-20deg);
    }
    40%,
    80% {
      transform: rotate(8deg);
    }
  }

  @keyframes shimmer {
    0%,
    100% {
      transform: translate(-50%, -50%) rotate(0deg);
    }
    50% {
      transform: translate(-30%, -30%) rotate(180deg);
    }
  }

  @keyframes pulse {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

  @keyframes slideShine {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes pulseGlow {
    0%,
    100% {
      box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
      box-shadow: 0 0 0 16px rgba(245, 158, 11, 0);
    }
  }

  @keyframes celebrationBounce {
    0% {
      transform: translate(-50%, -50%) scale(0);
    }
    50% {
      transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  /* End of Kids Dashboard Styles - Portrait */

  /* Kids Practice Questions Page Styles - Portrait */
  .kidsPracticeContainer {
    min-height: 100vh;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
    overflow: hidden;
    margin-bottom: 0;
  }

  /* Animated Background */
  .kidsPracticeBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
  }

  /* Confetti Animation */
  .kidsConfettiContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
  }

  .confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ff6b6b;
    top: -10px;
    animation: confettiFall 3s ease-in-out;
  }

  .confetti0 {
    background: #ff6b6b;
    left: 10%;
    animation-delay: 0s;
  }
  .confetti1 {
    background: #4ecdc4;
    left: 30%;
    animation-delay: 0.2s;
  }
  .confetti2 {
    background: #45b7d1;
    left: 50%;
    animation-delay: 0.4s;
  }
  .confetti3 {
    background: #96ceb4;
    left: 70%;
    animation-delay: 0.6s;
  }
  .confetti4 {
    background: #feca57;
    left: 90%;
    animation-delay: 0.8s;
  }

  @keyframes confettiFall {
    0% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: translateY(100vh) rotate(720deg);
      opacity: 0;
    }
  } /* End of Kids Practice Questions Page Styles - Portrait */


  @media screen and (min-width: 768px) and (max-width: 1024px) {
    /* CSS styles for tablet portrait go here */
    .navLoginSignUpDiv {
      display: none;
    }

    .kidsHomeTopDiv1 {
      width: 100%;
      background: #ffffff;
      border: 1px solid #f1f1f1;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      min-height: calc(60vh - 50px);
      margin-top: 50px;
    }

    .kidsHomeTopDiv1a {
      width: 100%;
      padding-top: 1rem;
    }

    .starsHomePage1 {
      width: 50px;
    }

    .starsHomePage6 {
      width: 50px;
      margin-top: 0;
    }

    .starsHomePage5 {
      margin-top: -15%;
    }

    .kidsHomeTopDiv1a1 {
      height: calc(0.2 * var(--screen-y));
    }

    .kidsHomeTopDiv1a1 h1 {
      color: #726d6d;
      width: 100%;
      text-align: center;
      font-family: "Noto Sans Tai Tham";
      font-style: normal;
      font-weight: 700;
      font-size: 2.5rem;
    }

    .ilearnSTEM {
      margin: 0 1rem;
    }

    .i,
    .t {
      color: #838131;
    }

    .s {
      color: #ffb038;
    }

    .e {
      color: #c7282d;
    }

    .learn {
      color: #3cb3f7;
    }

    .m {
      color: #9c06c1;
    }

    .fun_adaptive {
      font-size: 1.35rem;
    }

    .kidsHomeTopDiv1a2 {
      width: 100%;
    }

    .kidsHomeTopDiv1a2a {
      width: 90%;
    }

    .kidsHomeTopDiv1a2b {
      width: 40%;
      padding: 20% 0;
    }

    .kidsHomeTopDiv1a2b1 {
      height: 50%;
    }

    .kidsTakeoffImage {
      width: 100%;
      margin: 50px auto;
    }

    .kidsHomeTopDiv1a2b1aGetStartedButton {
      width: 120px;
      height: 45px;
      background: #e05d5d;
      border-radius: 5px;
      border: none;
      margin-right: 1rem;
      color: #fff;
      font-size: 0.8rem;
    }

    .kidsHomeTopDiv1a2b1aPreviewButton {
      width: 120px;
      height: 45px;
      background: #ffb038;
      border: 1px solid #ffb038;
      border-radius: 5px;
      margin-left: 1rem;
      color: #fff;
      font-size: 0.8rem;
    }

    /*** Kids What We Offer Component - Portrait ***/
    .kwoMainContainer {
      width: 100%;
      min-height: 100vh;
      background: linear-gradient(
        180deg,
        #e8f4fd 0%,
        #fff9e6 50%,
        #ffe8f5 100%
      );
      position: relative;
      overflow: hidden;
      padding: 60px 20px;
    }

    /* Floating Elements */
    .kwoFloatingElements {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }

    .kwoStar {
      position: absolute;
      width: 20px;
      height: 20px;
      background: linear-gradient(45deg, #ffd700 0%, #ffa500 100%);
      clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
      );
      animation: kwoStarFloat 20s ease-in-out infinite;
    }

    .kwoStar1 {
      top: 5%;
      left: 10%;
      animation-delay: 0s;
    }

    .kwoStar2 {
      top: 15%;
      right: 5%;
      animation-delay: 7s;
      width: 15px;
      height: 15px;
    }

    .kwoStar3 {
      bottom: 20%;
      left: 5%;
      animation-delay: 14s;
      width: 18px;
      height: 18px;
    }

    @keyframes kwoStarFloat {
      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }
      50% {
        transform: translateY(-20px) rotate(180deg);
      }
    }

    .kwoCloud {
      position: absolute;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 100px;
      opacity: 0.7;
    }

    .kwoCloud::before,
    .kwoCloud::after {
      content: "";
      position: absolute;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 100px;
    }

    .kwoCloud1 {
      width: 60px;
      height: 25px;
      top: 10%;
      right: 15%;
      animation: kwoCloudMove 30s ease-in-out infinite;
    }

    .kwoCloud1::before {
      width: 30px;
      height: 30px;
      top: -15px;
      left: 5px;
    }

    .kwoCloud1::after {
      width: 35px;
      height: 25px;
      top: -10px;
      right: 5px;
    }

    .kwoCloud2 {
      width: 50px;
      height: 20px;
      bottom: 15%;
      left: 20%;
      animation: kwoCloudMove 25s ease-in-out infinite reverse;
    }

    .kwoCloud2::before {
      width: 25px;
      height: 25px;
      top: -12px;
      left: 10px;
    }

    .kwoCloud2::after {
      width: 30px;
      height: 20px;
      top: -8px;
      right: 10px;
    }

    @keyframes kwoCloudMove {
      0%,
      100% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(30px);
      }
    }

    .kwoRainbow {
      position: absolute;
      width: 200px;
      height: 100px;
      top: 3%;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(
        180deg,
        #ff0000 0%,
        #ff7f00 14%,
        #ffff00 28%,
        #00ff00 42%,
        #0000ff 57%,
        #4b0082 71%,
        #9400d3 85%,
        transparent 100%
      );
      border-radius: 100px 100px 0 0;
      opacity: 0.15;
      animation: kwoRainbowPulse 10s ease-in-out infinite;
    }

    @keyframes kwoRainbowPulse {
      0%,
      100% {
        opacity: 0.15;
        transform: translateX(-50%) scale(1);
      }
      50% {
        opacity: 0.25;
        transform: translateX(-50%) scale(1.05);
      }
    }

    /* Content Wrapper */
    .kwoContentWrapper {
      position: relative;
      z-index: 2;
      max-width: 600px;
      margin: 0 auto;
    }

    /* Header Section */
    .kwoHeaderSection {
      text-align: center;
      margin-bottom: 50px;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease-out;
    }

    .kwoHeaderSection.kwoVisible {
      opacity: 1;
      transform: translateY(0);
    }

    .kwoMainTitle {
      font-size: 2.5rem;
      font-weight: 800;
      margin: 0 0 15px 0;
      position: relative;
      display: inline-block;
    }

    .kwoTitleWord {
      display: inline-block;
      margin: 0 8px;
      animation: kwoWordBounce 2s ease-in-out infinite;
    }

    .kwoTitleWord1 {
      color: #ff6b6b;
      animation-delay: 0s;
    }

    .kwoTitleWord2 {
      color: #4ecdc4;
      animation-delay: 0.2s;
    }

    .kwoTitleWord3 {
      color: #ffd93d;
      animation-delay: 0.4s;
    }

    @keyframes kwoWordBounce {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-8px);
      }
    }

    .kwoSparkle {
      position: absolute;
      top: -5px;
      right: -25px;
      font-size: 1.25rem;
      animation: kwoSparkleRotate 3s linear infinite;
    }

    @keyframes kwoSparkleRotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .kwoSubtitle {
      font-size: 1.125rem;
      color: #6b7280;
      margin: 0;
      font-weight: 500;
    }

    /* Cards Grid */
    .kwoCardsGrid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 60px;
    }

    /* Card Styles */
    .kwoCard {
      background: white;
      border-radius: 25px;
      padding: 25px 20px;
      position: relative;
      cursor: pointer;
      transition: all 0.4s ease;
      opacity: 0;
      transform: translateY(30px) scale(0.95);
      overflow: hidden;
    }

    .kwoCard.kwoCardVisible {
      animation: kwoCardAppear 0.6s ease-out forwards;
    }

    @keyframes kwoCardAppear {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .kwoCard:hover {
      transform: translateY(-5px) scale(1.02);
    }

    /* Card Gradients */
    .kwoMathGradient {
      background: linear-gradient(135deg, #ffe5e5 0%, #ffd4e5 100%);
    }

    .kwoEnglishGradient {
      background: linear-gradient(135deg, #e5f3ff 0%, #e5e5ff 100%);
    }

    .kwoScienceGradient {
      background: linear-gradient(135deg, #e5ffe5 0%, #e5fff5 100%);
    }

    .kwoGamesGradient {
      background: linear-gradient(135deg, #fff5e5 0%, #ffe5f5 100%);
    }

    /* Card Glow Effect */
    .kwoCardGlow {
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .kwoCard:hover .kwoCardGlow {
      opacity: 0.2;
    }

    .kwoMathShadow {
      background: radial-gradient(circle, #ff6b6b 0%, transparent 70%);
    }

    .kwoEnglishShadow {
      background: radial-gradient(circle, #4ecdc4 0%, transparent 70%);
    }

    .kwoScienceShadow {
      background: radial-gradient(circle, #6bcf7f 0%, transparent 70%);
    }

    .kwoGamesShadow {
      background: radial-gradient(circle, #ffd93d 0%, transparent 70%);
    }

    /* Icon Wrapper */
    .kwoIconWrapper {
      width: 80px;
      height: 80px;
      margin: 0 auto 20px;
      position: relative;
    }

    .kwoIcon {
      width: 100%;
      height: 100%;
      object-fit: contain;
      position: relative;
      z-index: 2;
    }

    .kwoHelloIcon {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: 700;
      color: #4ecdc4;
      background: rgba(78, 205, 196, 0.1);
      border-radius: 50%;
      position: relative;
      z-index: 2;
    }

    .kwoIconBg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70px;
      height: 70px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      z-index: 1;
    }

    /* Icon Animations */
    .kwoBounce {
      animation: kwoBounceAnim 2s ease-in-out infinite;
    }

    @keyframes kwoBounceAnim {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-15px);
      }
    }

    .kwoWiggle {
      animation: kwoWiggleAnim 2s ease-in-out infinite;
    }

    @keyframes kwoWiggleAnim {
      0%,
      100% {
        transform: rotate(0deg);
      }
      25% {
        transform: rotate(-8deg);
      }
      75% {
        transform: rotate(8deg);
      }
    }

    .kwoFloat {
      animation: kwoFloatAnim 3s ease-in-out infinite;
    }

    @keyframes kwoFloatAnim {
      0%,
      100% {
        transform: translateY(0) scale(1);
      }
      50% {
        transform: translateY(-8px) scale(1.03);
      }
    }

    .kwoSpin {
      animation: kwoSpinAnim 8s linear infinite;
    }

    @keyframes kwoSpinAnim {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    /* Card Content */
    .kwoCardTitle {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1f2937;
      margin: 0 0 8px 0;
      text-align: center;
    }

    .kwoCardSubtitle {
      font-size: 0.875rem;
      color: #6b7280;
      margin: 0 0 15px 0;
      text-align: center;
    }

    /* Features */
    .kwoFeatures {
      display: none; /* Hidden on mobile to save space */
    }

    /* Explore Button */
    .kwoExploreBtn {
      width: 100%;
      padding: 12px 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 15px;
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .kwoExploreBtn::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
      );
      transition: left 0.5s ease;
    }

    .kwoExploreBtn:hover::before {
      left: 100%;
    }

    .kwoExploreBtn:hover {
      transform: scale(1.03);
      box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    .kwoExploreBtnIcon {
      font-size: 1.125rem;
      transition: transform 0.3s ease;
    }

    .kwoExploreBtn:hover .kwoExploreBtnIcon {
      transform: translateX(3px);
    }

    /* Card Decorations */
    .kwoCardDecoration {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .kwoBubble {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      animation: kwoBubbleFloat 10s ease-in-out infinite;
    }

    .kwoBubble1 {
      width: 40px;
      height: 40px;
      top: -20px;
      right: -20px;
      animation-delay: 0s;
    }

    .kwoBubble2 {
      width: 30px;
      height: 30px;
      bottom: -15px;
      left: -15px;
      animation-delay: 3s;
    }

    .kwoBubble3 {
      width: 25px;
      height: 25px;
      top: 50%;
      right: -12px;
      animation-delay: 6s;
    }

    @keyframes kwoBubbleFloat {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      33% {
        transform: translate(-15px, -15px) scale(1.08);
      }
      66% {
        transform: translate(15px, -8px) scale(0.92);
      }
    }

    /* CTA Section */
    .kwoCTASection {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 30px;
      padding: 40px 25px;
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease-out;
    }

    .kwoCTASection.kwoCTAVisible {
      opacity: 1;
      transform: translateY(0);
    }

    .kwoCTAContent {
      color: white;
      text-align: center;
    }

    .kwoCTATitle {
      font-size: 1.75rem;
      font-weight: 700;
      margin: 0 0 10px 0;
    }

    .kwoCTAText {
      font-size: 1rem;
      margin: 0 0 25px 0;
      opacity: 0.9;
    }

    .kwoCTAButton {
      padding: 15px 30px;
      background: white;
      color: #667eea;
      border: none;
      border-radius: 20px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .kwoCTAButton:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .kwoCTAButtonStars {
      font-size: 1.25rem;
      animation: kwoStarsRotate 2s linear infinite;
    }

    @keyframes kwoStarsRotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .kwoCTACharacter {
      width: 120px;
      height: 120px;
      margin: 20px auto 0;
      position: relative;
    }

    .kwoCharacter {
      width: 100%;
      height: 100%;
      background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 70%
      );
      border-radius: 50%;
      position: relative;
      animation: kwoCharacterBounce 2s ease-in-out infinite;
    }

    .kwoCharacter::before {
      content: "😊";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 3rem;
    }

    @keyframes kwoCharacterBounce {
      0%,
      100% {
        transform: translateY(0) scale(1);
      }
      50% {
        transform: translateY(-15px) scale(1.08);
      }
    }

    .kidsPracticeAndGamesCardsDiv {
      width: 100%;
      background-color: #fff;
      flex-direction: column;
      align-items: center;
      padding: 5rem 0;
    }

    .kidsPracticeCardDiv {
      width: 50%;
      background: #ffffff;
      border: 1px solid #b5b5b5;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      padding: 1rem 0;
      margin-bottom: 2rem;
    }

    .kidsGamesCardDiv {
      width: 50%;
      background: #ffffff;
      border: 1px solid #b5b5b5;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      padding: 1rem 0;
    }

    .kidsPracticeCardDiv p,
    .kidsGamesCardDiv p {
      font-family: "Oldenburg";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      line-height: 30px;
      color: #545353;
      padding: 1rem;
    }

    .kidsGamesCardDiv h2 {
      color: #e05d5d;
    }

    .kidsPracticeCardDiv h2 {
      color: #ffaf38;
    }

    .kidspersonalizedAdaptiveFlexibleDiv {
      width: 100%;
      background-color: #fafafa;
      justify-content: center;
      padding: 2rem 0;
    }

    .kidspersonalizedCardWrapperDiv {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .kidspersonalizedCardWrapperDiv1 {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .kidspersonalizedCard {
      width: 50%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      padding: 2rem 0;
      margin-bottom: 2rem;
    }

    .kidsadaptiveCard {
      width: 50%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      padding: 2rem 0;
    }

    .kidsflexibleCard {
      width: 50%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      margin-top: 2rem;
      padding: 2rem 0;
    }

    .kidspersonalizedCard h2,
    .kidsadaptiveCard h2,
    .kidsflexibleCard h2 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 1.25rem;
      color: #ffffff;
    }

    .kidspersonalizedCard p,
    .kidsadaptiveCard p,
    .kidsflexibleCard p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      color: rgba(255, 255, 255, 0.8);
      width: 80%;
      padding: 0 0 2rem 0;
    }

    .kidsPricingCardsDiv {
      background: #ffffff;
      border: 1px solid #ededed;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 5rem 0 10rem 0;
    }

    .kidsPricingCardsDiv ul {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      margin: 0;
    }

    .kidsPricingCardsDiv li {
      list-style-type: none;
    }

    .kidsPricingCardsDiv1 {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .kidsPricingCardsDiv2 {
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }

    .kidFreePricingCard {
      width: 50%;
      border: 1px solid #828282;
      border-radius: 7px;
      justify-content: flex-start;
      padding: 4rem 0;
      margin-bottom: 2rem;
    }

    .kidFreePricingCard h2 {
      width: 60%;
      background-color: #ffb038;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #fff;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      line-height: 44px;
    }

    .kidFreePricingCard p {
      width: 70%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #5a5757;
    }

    .kidFreePricingCard li {
      color: #5a5757;
      line-height: 40px;
    }

    .kidMonthlyPricingCard {
      width: 50%;
      background-color: #ffb038;
      border-radius: 7px;
      margin: 0 1rem;
      padding: 4rem 0;
    }

    .kidMonthlyPricingCard h2 {
      width: 60%;
      background-color: #f9f9f9;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #545353;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      line-height: 44px;
    }

    .kidMonthlyPricingCard p {
      width: 80%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #565656;
    }

    .kidMonthlyPricingCard li {
      color: #565656;
      line-height: 40px;
    }

    .kidYearlyPricingCard {
      width: 50%;
      background-color: #379cd5;
      border-radius: 7px;
      margin: 2rem auto;
      padding: 4rem 0;
    }

    .kidYearlyPricingCard h2 {
      width: 60%;
      background-color: #ffaf38;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #545353;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      line-height: 44px;
    }

    .kidYearlyPricingCard p {
      width: 80%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #fff;
    }

    .kidYearlyPricingCard li {
      color: #fff;
      line-height: 40px;
    }

    .kidsWhatDoWeDoDiv {
      width: 100%;
      background-color: #f6f6f6;
      flex-direction: column;
      align-items: center;
      padding: 5rem 0;
    }

    .kidsWhatDoWeDoDiv1 {
      width: 100%;
      justify-content: space-around;
    }

    .kidsWhatDoWeDoDiv1 p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 15px;
      line-height: 25px;
      color: #6b6b6b;
      width: 50%;
    }

    .kidsWhatDoWeDoDiv1 h1 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 32px;
      color: #3f3f3f;
    }

    .kidsWhatDoWeDoDiv1 h1 > span {
      color: #ffaf38;
    }

    .kidsWhatDoWeDoGrades18span {
      color: #e26969;
    }

    .kidsWhatDoWeDoImage {
      width: 100%;
    }

    .kidsSupportedByDiv {
      width: 100%;
      background-color: #fff;
      padding: 1rem 0;
    }

    .kidsSupportedByDiv h1 {
      font-size: 1.5rem;
    }

    .kidsHomeSubscribeDiv {
      width: 100%;
      height: 500px;
      margin: 5rem auto;
    }

    .kidsHomeSubscribeDiv1 {
      width: 100%;
      height: 497px;
      background: linear-gradient(
        251.4deg,
        #ffb038 15.16%,
        #d4dcc5 54.77%,
        #3aa9e8 98.62%
      );
      clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%);
      position: absolute;
    }

    .kidsHomeSubscribeCard {
      width: 90%;
      height: 400px;
      background-color: #ffffff;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 8px;
      position: absolute;
      z-index: 3;
      margin: 3rem auto;
    }

    .kidsHomeSubscribeCardHeader {
      width: 100%;
    }

    .kidsHomeSubscribeCardHeader1 {
      width: 80%;
      justify-content: space-around;
    }

    .kidsHomeSubscribeCardHeader1 img {
      width: 50px;
    }

    .kidsHomeSubscribeCardHeader1 h1 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 700;
      font-size: 30px;
      line-height: 42px;
      color: #de535e;
    }

    .kidsHomeSubscribeCard p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 24px;
      width: 90%;
      color: rgba(222, 83, 94, 0.8);
    }

    .kidsHomeSubscribeButton {
      background-color: rgba(58, 169, 232, 0.8);
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      width: 200px;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 12px;
      padding: 2rem 0;
      color: #ffffff;
      margin: 2rem auto;
    }

    .kidsHomeSubscribeKeywordsRow {
      width: 100%;
      height: 50px;
      background: rgba(255, 255, 255, 0.17);
      border: 1px solid #de535e;
      border-radius: 7px;
      margin: 5rem auto 15rem auto;
    }

    .kidsHomeSubscribeKeywordsRow div {
      width: 16.66666666666667%;
      height: 100%;
      border: 1px solid #de535e;
      padding: 1rem 0;
    }

    .kidsHomeSubscribeKeywordsRow2,
    .kidsHomeSubscribeKeywordsRow3,
    .kidsHomeSubscribeKeywordsRow4,
    .kidsHomeSubscribeKeywordsRow5,
    .kidsHomeSubscribeKeywordsRow6 {
      color: #de535e;
      font-size: 6px;
    }

    .kidsHomeSubscribeKeywordsRow1 {
      background-color: #de535e;
      border-radius: 7px 0px 0px 7px;
      color: #fff;
    }

    .kidsSpiralOrange {
      width: 30%;
      position: absolute;
      right: 5%;
      top: 20%;
    }

    .kidsSmilingCartoon {
      display: none;
    }

    .defaultHomeFooterDiv {
      width: 100%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 0;
    }

    .defaultHomeFooterDiv1 {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      padding: 0;
    }

    .defaultHomeFooterDiv2a {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .defaultHomeFooterDiv2b {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .defaultHomeFooterDiv h5 {
      color: #5eb5e7;
    }

    .defaultHomeFooterDiv1a,
    .defaultHomeFooterDiv1b,
    .defaultHomeFooterDiv1c,
    .defaultHomeFooterDiv1d {
      width: 90%;
      padding: 1rem 0;
      flex-grow: 1;
    }

    .defaultHomeFooterDiv1aInputDiv {
      width: 100%;
      height: 40px;
      border-radius: 5px;
    }

    .defaultHomeFooterDiv1aInputDiv button {
      width: 20%;
      height: 100%;
      background-color: #ffb038;
      border-radius: 0 5px 5px 0;
      color: #fff;
      border: none;
      font-size: 0.5rem;
    }

    .defaultHomeFooterDiv1aInputDiv input {
      width: 40%;
      height: 100%;
      font-size: 0.8rem;
      border-radius: 5px 0 0 5px;
      border: none;
      text-align: center;
    }

    .defaultHomeFooterDiv1aSocialMediaDiv {
      width: 30%;
      justify-content: space-around;
      margin: 1rem auto;
    }

    .defaultHomeFooterDiv1a p {
      font-size: 0.6rem;
      color: #fff;
    }

    .defaultHomeFooterDiv1b h3,
    .defaultHomeFooterDiv1c h3,
    .defaultHomeFooterDiv1d h3 {
      color: #ffb038;
    }

    .defaultHomeFooterDiv1a div,
    .defaultHomeFooterDiv1b div,
    .defaultHomeFooterDiv1c div,
    .defaultHomeFooterDiv1d div {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 34px;
      color: rgba(255, 255, 255, 0.8);
    }

    .defaultHomeFooterDiv1a_i_text {
      color: #fffa83;
    }

    .defaultHomeFooterDiv1a_learn_text {
      color: #fff;
    }

    .defaultHomeFooterDiv1a_s_text {
      color: #ffb038;
    }

    .defaultHomeFooterDiv1a_t_text {
      color: #fffa83;
    }

    .defaultHomeFooterDiv1a_e_text {
      color: #c7282d;
    }

    .defaultHomeFooterDiv1a_m_text {
      color: #9c06c1;
    }

    .kidsLearnMathDiv,
    .kidsLearnEnglishDiv,
    .kidsLearnScienceDiv {
      width: 250px;
      height: 250px;
      margin: 50px auto;
      padding-bottom: 0px;
    }

    .kidsRegistrationHeader1 {
      margin-top: 20px;
    }

    .kidsRegistrationHeader1Div1 {
      width: 400px;
      margin: 10px auto;
    }

    .kidsRegistrationHeader1Div1 input {
      width: 250px;
    }

    .kidsRegistrationHeader1Select {
      width: 300px;
      margin: 5px auto;
      outline: none;
      border: 1px solid #b3b3b3;
      font-size: 16px;
    }

    .kidsSettingsBack {
      position: absolute;
      left: 20px;
      top: -70px;
      font-size: 14px;
      color: #5a67d8;
      cursor: pointer;
      font-weight: 600;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 5px;
    }
  } /*** End of (min-width: 768px) and (max-width: 1024px) ***/

  @media screen and (min-width: 320px) and (max-width: 767px) {
    /* CSS styles for mobile portrait go here */

    .kidsHomeTopDiv1 {
      width: 100%;
      background: #ffffff;
      border: 1px solid #f1f1f1;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 0px;
      min-height: calc(70vh - 50px);
      margin-top: 50px;
      padding: 30px 0;
    }

    .kidsHomeTopDiv1a {
      width: 100%;
      height: 60%;
      padding-top: 1rem;
    }

    .starsHomePage1 {
      width: 50px;
    }

    .starsHomePage6 {
      width: 50px;
      margin-top: 0;
    }

    .starsHomePage5 {
      margin-top: -15%;
    }

    .kidsHomeTopDiv1a1 h1 {
      color: #726d6d;
      width: 80%;
      text-align: center;
      font-family: "Noto Sans Tai Tham";
      font-style: normal;
      font-weight: 700;
      font-size: 2.5rem;
    }

    .ilearnSTEM {
      margin: 0 1rem;
    }

    .i,
    .t {
      color: #838131;
    }

    .s {
      color: #ffb038;
    }

    .e {
      color: #c7282d;
    }

    .learn {
      color: #3cb3f7;
    }

    .m {
      color: #9c06c1;
    }

    .fun_adaptive {
      font-size: 1.1rem;
      width: 70%;
      text-align: center;
    }

    .kidsHomeTopDiv1a2 {
      width: 100%;
      height: 100%;
      flex-direction: column;
    }

    .kidsHomeTopDiv1a2a {
      width: 100%;
    }

    .kidsTakeoffImage {
      width: 90%;
      margin: 50px auto;
    }

    .kidsHomeTopDiv1a2b {
      width: 100%;
    }

    .kidsHomeTopDiv1a2b1 {
      height: 50%;
    }

    .kidsHomeTopDiv1a2b1aGetStartedButton {
      width: 100px;
      height: 40px;
      background: #e05d5d;
      border-radius: 5px;
      border: none;
      margin-right: 1rem;
      color: #fff;
      font-size: 0.6rem;
    }

    .kidsHomeTopDiv1a2b1aPreviewButton {
      width: 100px;
      height: 40px;
      background: #ffb038;
      border: 1px solid #ffb038;
      border-radius: 5px;
      margin-left: 1rem;
      color: #fff;
      font-size: 0.6rem;
    }

    /*** Kids What We Offer Component - Portrait ***/
    .kwoMainContainer {
      width: 100%;
      min-height: 100vh;
      background: linear-gradient(
        180deg,
        #e8f4fd 0%,
        #fff9e6 50%,
        #ffe8f5 100%
      );
      position: relative;
      overflow: hidden;
      padding: 60px 20px;
    }

    /* Floating Elements */
    .kwoFloatingElements {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }

    .kwoStar {
      position: absolute;
      width: 20px;
      height: 20px;
      background: linear-gradient(45deg, #ffd700 0%, #ffa500 100%);
      clip-path: polygon(
        50% 0%,
        61% 35%,
        98% 35%,
        68% 57%,
        79% 91%,
        50% 70%,
        21% 91%,
        32% 57%,
        2% 35%,
        39% 35%
      );
      animation: kwoStarFloat 20s ease-in-out infinite;
    }

    .kwoStar1 {
      top: 5%;
      left: 10%;
      animation-delay: 0s;
    }

    .kwoStar2 {
      top: 15%;
      right: 5%;
      animation-delay: 7s;
      width: 15px;
      height: 15px;
    }

    .kwoStar3 {
      bottom: 20%;
      left: 5%;
      animation-delay: 14s;
      width: 18px;
      height: 18px;
    }

    @keyframes kwoStarFloat {
      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }
      50% {
        transform: translateY(-20px) rotate(180deg);
      }
    }

    .kwoCloud {
      position: absolute;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 100px;
      opacity: 0.7;
    }

    .kwoCloud::before,
    .kwoCloud::after {
      content: "";
      position: absolute;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 100px;
    }

    .kwoCloud1 {
      width: 60px;
      height: 25px;
      top: 10%;
      right: 15%;
      animation: kwoCloudMove 30s ease-in-out infinite;
    }

    .kwoCloud1::before {
      width: 30px;
      height: 30px;
      top: -15px;
      left: 5px;
    }

    .kwoCloud1::after {
      width: 35px;
      height: 25px;
      top: -10px;
      right: 5px;
    }

    .kwoCloud2 {
      width: 50px;
      height: 20px;
      bottom: 15%;
      left: 20%;
      animation: kwoCloudMove 25s ease-in-out infinite reverse;
    }

    .kwoCloud2::before {
      width: 25px;
      height: 25px;
      top: -12px;
      left: 10px;
    }

    .kwoCloud2::after {
      width: 30px;
      height: 20px;
      top: -8px;
      right: 10px;
    }

    @keyframes kwoCloudMove {
      0%,
      100% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(30px);
      }
    }

    .kwoRainbow {
      position: absolute;
      width: 200px;
      height: 100px;
      top: 3%;
      left: 50%;
      transform: translateX(-50%);
      background: linear-gradient(
        180deg,
        #ff0000 0%,
        #ff7f00 14%,
        #ffff00 28%,
        #00ff00 42%,
        #0000ff 57%,
        #4b0082 71%,
        #9400d3 85%,
        transparent 100%
      );
      border-radius: 100px 100px 0 0;
      opacity: 0.15;
      animation: kwoRainbowPulse 10s ease-in-out infinite;
    }

    @keyframes kwoRainbowPulse {
      0%,
      100% {
        opacity: 0.15;
        transform: translateX(-50%) scale(1);
      }
      50% {
        opacity: 0.25;
        transform: translateX(-50%) scale(1.05);
      }
    }

    /* Content Wrapper */
    .kwoContentWrapper {
      position: relative;
      z-index: 2;
      max-width: 600px;
      margin: 0 auto;
    }

    /* Header Section */
    .kwoHeaderSection {
      text-align: center;
      margin-bottom: 50px;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease-out;
    }

    .kwoHeaderSection.kwoVisible {
      opacity: 1;
      transform: translateY(0);
    }

    .kwoMainTitle {
      font-size: 2.5rem;
      font-weight: 800;
      margin: 0 0 15px 0;
      position: relative;
      display: inline-block;
    }

    .kwoTitleWord {
      display: inline-block;
      margin: 0 8px;
      animation: kwoWordBounce 2s ease-in-out infinite;
    }

    .kwoTitleWord1 {
      color: #ff6b6b;
      animation-delay: 0s;
    }

    .kwoTitleWord2 {
      color: #4ecdc4;
      animation-delay: 0.2s;
    }

    .kwoTitleWord3 {
      color: #ffd93d;
      animation-delay: 0.4s;
    }

    @keyframes kwoWordBounce {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-8px);
      }
    }

    .kwoSparkle {
      position: absolute;
      top: -5px;
      right: -25px;
      font-size: 1.25rem;
      animation: kwoSparkleRotate 3s linear infinite;
    }

    @keyframes kwoSparkleRotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .kwoSubtitle {
      font-size: 1.125rem;
      color: #6b7280;
      margin: 0;
      font-weight: 500;
    }

    /* Cards Grid */
    .kwoCardsGrid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      margin-bottom: 60px;
    }

    /* Card Styles */
    .kwoCard {
      background: white;
      border-radius: 25px;
      padding: 25px 20px;
      position: relative;
      cursor: pointer;
      transition: all 0.4s ease;
      opacity: 0;
      transform: translateY(30px) scale(0.95);
      overflow: hidden;
    }

    .kwoCard.kwoCardVisible {
      animation: kwoCardAppear 0.6s ease-out forwards;
    }

    @keyframes kwoCardAppear {
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .kwoCard:hover {
      transform: translateY(-5px) scale(1.02);
    }

    /* Card Gradients */
    .kwoMathGradient {
      background: linear-gradient(135deg, #ffe5e5 0%, #ffd4e5 100%);
    }

    .kwoEnglishGradient {
      background: linear-gradient(135deg, #e5f3ff 0%, #e5e5ff 100%);
    }

    .kwoScienceGradient {
      background: linear-gradient(135deg, #e5ffe5 0%, #e5fff5 100%);
    }

    .kwoGamesGradient {
      background: linear-gradient(135deg, #fff5e5 0%, #ffe5f5 100%);
    }

    /* Card Glow Effect */
    .kwoCardGlow {
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .kwoCard:hover .kwoCardGlow {
      opacity: 0.2;
    }

    .kwoMathShadow {
      background: radial-gradient(circle, #ff6b6b 0%, transparent 70%);
    }

    .kwoEnglishShadow {
      background: radial-gradient(circle, #4ecdc4 0%, transparent 70%);
    }

    .kwoScienceShadow {
      background: radial-gradient(circle, #6bcf7f 0%, transparent 70%);
    }

    .kwoGamesShadow {
      background: radial-gradient(circle, #ffd93d 0%, transparent 70%);
    }

    /* Icon Wrapper */
    .kwoIconWrapper {
      width: 80px;
      height: 80px;
      margin: 0 auto 20px;
      position: relative;
    }

    .kwoIcon {
      width: 100%;
      height: 100%;
      object-fit: contain;
      position: relative;
      z-index: 2;
    }

    .kwoHelloIcon {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      font-weight: 700;
      color: #4ecdc4;
      background: rgba(78, 205, 196, 0.1);
      border-radius: 50%;
      position: relative;
      z-index: 2;
    }

    .kwoIconBg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70px;
      height: 70px;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      z-index: 1;
    }

    /* Icon Animations */
    .kwoBounce {
      animation: kwoBounceAnim 2s ease-in-out infinite;
    }

    @keyframes kwoBounceAnim {
      0%,
      100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-15px);
      }
    }

    .kwoWiggle {
      animation: kwoWiggleAnim 2s ease-in-out infinite;
    }

    @keyframes kwoWiggleAnim {
      0%,
      100% {
        transform: rotate(0deg);
      }
      25% {
        transform: rotate(-8deg);
      }
      75% {
        transform: rotate(8deg);
      }
    }

    .kwoFloat {
      animation: kwoFloatAnim 3s ease-in-out infinite;
    }

    @keyframes kwoFloatAnim {
      0%,
      100% {
        transform: translateY(0) scale(1);
      }
      50% {
        transform: translateY(-8px) scale(1.03);
      }
    }

    .kwoSpin {
      animation: kwoSpinAnim 8s linear infinite;
    }

    @keyframes kwoSpinAnim {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    /* Card Content */
    .kwoCardTitle {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1f2937;
      margin: 0 0 8px 0;
      text-align: center;
    }

    .kwoCardSubtitle {
      font-size: 0.875rem;
      color: #6b7280;
      margin: 0 0 15px 0;
      text-align: center;
    }

    /* Features */
    .kwoFeatures {
      display: none; /* Hidden on mobile to save space */
    }

    /* Explore Button */
    .kwoExploreBtn {
      width: 100%;
      padding: 12px 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      border-radius: 15px;
      font-size: 0.875rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      position: relative;
      overflow: hidden;
    }

    .kwoExploreBtn::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
      );
      transition: left 0.5s ease;
    }

    .kwoExploreBtn:hover::before {
      left: 100%;
    }

    .kwoExploreBtn:hover {
      transform: scale(1.03);
      box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
    }

    .kwoExploreBtnIcon {
      font-size: 1.125rem;
      transition: transform 0.3s ease;
    }

    .kwoExploreBtn:hover .kwoExploreBtnIcon {
      transform: translateX(3px);
    }

    /* Card Decorations */
    .kwoCardDecoration {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      overflow: hidden;
    }

    .kwoBubble {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      animation: kwoBubbleFloat 10s ease-in-out infinite;
    }

    .kwoBubble1 {
      width: 40px;
      height: 40px;
      top: -20px;
      right: -20px;
      animation-delay: 0s;
    }

    .kwoBubble2 {
      width: 30px;
      height: 30px;
      bottom: -15px;
      left: -15px;
      animation-delay: 3s;
    }

    .kwoBubble3 {
      width: 25px;
      height: 25px;
      top: 50%;
      right: -12px;
      animation-delay: 6s;
    }

    @keyframes kwoBubbleFloat {
      0%,
      100% {
        transform: translate(0, 0) scale(1);
      }
      33% {
        transform: translate(-15px, -15px) scale(1.08);
      }
      66% {
        transform: translate(15px, -8px) scale(0.92);
      }
    }

    /* CTA Section */
    .kwoCTASection {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 30px;
      padding: 40px 25px;
      position: relative;
      overflow: hidden;
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s ease-out;
    }

    .kwoCTASection.kwoCTAVisible {
      opacity: 1;
      transform: translateY(0);
    }

    .kwoCTAContent {
      color: white;
      text-align: center;
    }

    .kwoCTATitle {
      font-size: 1.75rem;
      font-weight: 700;
      margin: 0 0 10px 0;
    }

    .kwoCTAText {
      font-size: 1rem;
      margin: 0 0 25px 0;
      opacity: 0.9;
    }

    .kwoCTAButton {
      padding: 15px 30px;
      background: white;
      color: #667eea;
      border: none;
      border-radius: 20px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .kwoCTAButton:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    .kwoCTAButtonStars {
      font-size: 1.25rem;
      animation: kwoStarsRotate 2s linear infinite;
    }

    @keyframes kwoStarsRotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    .kwoCTACharacter {
      width: 120px;
      height: 120px;
      margin: 20px auto 0;
      position: relative;
    }

    .kwoCharacter {
      width: 100%;
      height: 100%;
      background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 70%
      );
      border-radius: 50%;
      position: relative;
      animation: kwoCharacterBounce 2s ease-in-out infinite;
    }

    .kwoCharacter::before {
      content: "😊";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 3rem;
    }

    @keyframes kwoCharacterBounce {
      0%,
      100% {
        transform: translateY(0) scale(1);
      }
      50% {
        transform: translateY(-15px) scale(1.08);
      }
    }

    .kidsPracticeAndGamesCardsDiv {
      width: 100%;
      background-color: #fff;
      flex-direction: column;
      align-items: center;
      padding: 5rem 0;
    }

    .kidsPracticeCardDiv {
      width: 80%;
      background: #ffffff;
      border: 1px solid #b5b5b5;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      padding: 1rem 0;
      margin-bottom: 2rem;
    }

    .kidsGamesCardDiv {
      width: 80%;
      background: #ffffff;
      border: 1px solid #b5b5b5;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      padding: 1rem 0;
    }

    .kidsPracticeCardDiv p,
    .kidsGamesCardDiv p {
      font-family: "Oldenburg";
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 30px;
      color: #545353;
      padding: 1rem;
    }

    .kidsGamesCardDiv h2 {
      color: #e05d5d;
      font-size: 1.5rem;
    }

    .kidsPracticeCardDiv h2 {
      color: #ffaf38;
      font-size: 1.5rem;
    }

    .kidspersonalizedAdaptiveFlexibleDiv {
      width: 100%;
      background-color: #fafafa;
      justify-content: center;
      padding: 2rem 0;
    }

    .kidspersonalizedCardWrapperDiv {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .kidspersonalizedCardWrapperDiv1 {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .kidspersonalizedCard {
      width: 80%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      padding: 2rem 0;
      margin-bottom: 2rem;
    }

    .kidsadaptiveCard {
      width: 80%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      padding: 2rem 0;
    }

    .kidsflexibleCard {
      width: 80%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      color: #fff;
      margin-top: 2rem;
      padding: 2rem 0;
    }

    .kidspersonalizedCard h2,
    .kidsadaptiveCard h2,
    .kidsflexibleCard h2 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 1.25rem;
      color: #ffffff;
    }

    .kidspersonalizedCard p,
    .kidsadaptiveCard p,
    .kidsflexibleCard p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      color: rgba(255, 255, 255, 0.8);
      width: 80%;
      padding: 0 0 2rem 0;
    }

    .kidsPricingCardsDiv {
      background: #ffffff;
      border: 1px solid #ededed;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 5rem 0 10rem 0;
    }

    .kidsPricingCardsDiv h1 {
      font-size: 1.5rem;
    }

    .kidsPricingCardsDiv ul {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0;
      margin: 0;
    }

    .kidsPricingCardsDiv li {
      list-style-type: none;
    }

    .kidsPricingCardsDiv1 {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .kidsPricingCardsDiv2 {
      width: 100%;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }

    .kidFreePricingCard {
      width: 80%;
      border: 1px solid #828282;
      border-radius: 7px;
      justify-content: flex-start;
      padding: 4rem 0;
      margin-bottom: 2rem;
    }

    .kidFreePricingCard h2 {
      width: 60%;
      background-color: #ffb038;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #fff;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      line-height: 44px;
    }

    .kidFreePricingCard p {
      width: 70%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #5a5757;
    }

    .kidFreePricingCard li {
      color: #5a5757;
      line-height: 40px;
    }

    .kidMonthlyPricingCard {
      width: 80%;
      background-color: #ffb038;
      border-radius: 7px;
      margin: 0 1rem;
      padding: 4rem 0;
    }

    .kidMonthlyPricingCard h2 {
      width: 60%;
      background-color: #f9f9f9;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #545353;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      line-height: 44px;
    }

    .kidMonthlyPricingCard p {
      width: 80%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #565656;
    }

    .kidMonthlyPricingCard li {
      color: #565656;
      line-height: 40px;
    }

    .kidYearlyPricingCard {
      width: 80%;
      background-color: #379cd5;
      border-radius: 7px;
      margin: 2rem auto;
      padding: 4rem 0;
    }

    .kidYearlyPricingCard h2 {
      width: 60%;
      background-color: #ffaf38;
      border: 1px solid #b0aeae;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 7px;
      color: #545353;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 14px;
      line-height: 44px;
    }

    .kidYearlyPricingCard p {
      width: 80%;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 16px;
      color: #fff;
    }

    .kidYearlyPricingCard li {
      color: #fff;
      line-height: 40px;
    }

    .kidsWhatDoWeDoDiv {
      width: 100%;
      background-color: #f6f6f6;
      flex-direction: column;
      align-items: center;
      padding: 5rem 0;
    }

    .kidsWhatDoWeDoDiv1 {
      width: 100%;
      justify-content: space-around;
    }

    .kidsWhatDoWeDoDiv1 p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 15px;
      line-height: 25px;
      color: #6b6b6b;
      width: 90%;
    }

    .kidsWhatDoWeDoDiv1 h1 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 32px;
      color: #3f3f3f;
    }

    .kidsWhatDoWeDoDiv1 h1 > span {
      color: #ffaf38;
    }

    .kidsWhatDoWeDoGrades18span {
      color: #e26969;
    }

    .kidsWhatDoWeDoImage {
      width: 80%;
    }

    .kidsSupportedByDiv {
      width: 100%;
      background-color: #fff;
      padding: 1rem 0;
    }

    .kidsSupportedByDiv h1 {
      font-size: 1.5rem;
    }

    .kidsHomeSubscribeDiv {
      width: 100%;
      height: 500px;
      margin: 5rem auto;
    }

    .kidsHomeSubscribeDiv1 {
      width: 100%;
      height: 497px;
      background: linear-gradient(
        251.4deg,
        #ffb038 15.16%,
        #d4dcc5 54.77%,
        #3aa9e8 98.62%
      );
      clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%);
      position: absolute;
    }

    .kidsHomeSubscribeCard {
      width: 90%;
      height: 400px;
      background-color: #ffffff;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 8px;
      position: absolute;
      z-index: 3;
      margin: 3rem auto;
    }

    .kidsHomeSubscribeCardHeader {
      width: 100%;
    }

    .kidsHomeSubscribeCardHeader1 {
      width: 80%;
      justify-content: space-around;
    }

    .kidsHomeSubscribeCardHeader1 img {
      width: 30px;
    }

    .kidsHomeSubscribeCardHeader1 h1 {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 22px;
      color: #de535e;
    }

    .kidsHomeSubscribeCard p {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 24px;
      width: 90%;
      color: rgba(222, 83, 94, 0.8);
    }

    .kidsHomeSubscribeButton {
      background-color: rgba(58, 169, 232, 0.8);
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      border-radius: 5px;
      width: 200px;
      font-family: "Poppins";
      font-style: normal;
      font-weight: 600;
      font-size: 12px;
      padding: 1rem 0;
      color: #ffffff;
      margin: 2rem auto;
    }

    .kidsHomeSubscribeKeywordsRow {
      width: 100%;
      height: 50px;
      background: rgba(255, 255, 255, 0.17);
      border: 1px solid #de535e;
      border-radius: 7px;
      margin: 0 auto 15rem auto;
    }

    .kidsHomeSubscribeKeywordsRow div {
      width: 16.66666666666667%;
      height: 100%;
      border: 1px solid #de535e;
      padding: 1rem 0;
    }

    .kidsHomeSubscribeKeywordsRow2,
    .kidsHomeSubscribeKeywordsRow3,
    .kidsHomeSubscribeKeywordsRow4,
    .kidsHomeSubscribeKeywordsRow5,
    .kidsHomeSubscribeKeywordsRow6 {
      color: #de535e;
      font-size: 6px;
    }

    .kidsHomeSubscribeKeywordsRow1 {
      background-color: #de535e;
      border-radius: 7px 0px 0px 7px;
      color: #fff;
    }

    .kidsSpiralOrange {
      width: 30%;
      position: absolute;
      right: 5%;
      top: 20%;
    }

    .kidsSmilingCartoon {
      display: none;
    }

    .defaultHomeFooterDiv {
      width: 100%;
      background-color: #122e3b;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      padding: 0;
    }

    .defaultHomeFooterDiv1 {
      width: 100%;
      flex-direction: column;
      align-items: stretch;
      padding: 0;
    }

    .defaultHomeFooterDiv2a {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .defaultHomeFooterDiv2b {
      width: 100%;
      flex-direction: column;
      align-items: center;
    }

    .defaultHomeFooterDiv h5 {
      color: #5eb5e7;
    }

    .defaultHomeFooterDiv1a,
    .defaultHomeFooterDiv1b,
    .defaultHomeFooterDiv1c,
    .defaultHomeFooterDiv1d {
      width: 90%;
      padding: 1rem 0;
      flex-grow: 1;
    }

    .defaultHomeFooterDiv1aInputDiv {
      width: 100%;
      height: 40px;
      border-radius: 5px;
    }

    .defaultHomeFooterDiv1aInputDiv button {
      width: 30%;
      height: 100%;
      background-color: #ffb038;
      border-radius: 0 5px 5px 0;
      color: #fff;
      border: none;
      font-size: 0.5rem;
    }

    .defaultHomeFooterDiv1aInputDiv input {
      width: 80%;
      height: 100%;
      font-size: 0.8rem;
      border-radius: 5px 0 0 5px;
      border: none;
      text-align: center;
    }

    .defaultHomeFooterDiv1aSocialMediaDiv {
      width: 30%;
      justify-content: space-around;
      margin: 1rem auto;
    }

    .defaultHomeFooterDiv1a p {
      font-size: 1rem;
      color: #fff;
    }

    .defaultHomeFooterDiv1b h3,
    .defaultHomeFooterDiv1c h3,
    .defaultHomeFooterDiv1d h3 {
      color: #ffb038;
      font-size: 1.5rem;
    }

    .defaultHomeFooterDiv1a div,
    .defaultHomeFooterDiv1b div,
    .defaultHomeFooterDiv1c div,
    .defaultHomeFooterDiv1d div {
      font-family: "Poppins";
      font-style: normal;
      font-weight: 400;
      font-size: 10px;
      line-height: 34px;
      color: rgba(255, 255, 255, 0.8);
    }

    .defaultHomeFooterDiv1a_i_text {
      color: #fffa83;
    }

    .defaultHomeFooterDiv1a_learn_text {
      color: #fff;
    }

    .defaultHomeFooterDiv1a_s_text {
      color: #ffb038;
    }

    .defaultHomeFooterDiv1a_t_text {
      color: #fffa83;
    }

    .defaultHomeFooterDiv1a_e_text {
      color: #c7282d;
    }

    .defaultHomeFooterDiv1a_m_text {
      color: #9c06c1;
    }

    .settingsKidsLearnBox,
    .settingsKidsGamesBox {
      width: 150px;
      height: 150px;
      font-size: 14px;
    }

    .settingsKidsBoxes {
      margin-bottom: 100px;
    }

    .kidsTopicBoxContainer {
      flex-direction: column;
    }

    /***** Kids Practice Page *********/

    .kidsQuestionDiv {
      width: 100%;
      min-height: 800px;
      margin-top: 5px;
    }

    .kidsQuestionsDivHeader {
      width: 100%;
      margin-top: 5px;
      padding: 10px 50px;
    }

    .kidsQuestionsDivHeader h1 {
      color: #545454;
      font-weight: 400;
      font-size: 25px;
    }

    .kidsQuestionsSection {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      min-height: 300px;
    }

    .kidsMathsQuestionText,
    .kidsEnglishQuestionText {
      color: #545454;
      font-size: 30px;
      padding: 20px;
    }

    .kids_input_answer {
      width: 250px;
      height: 60px;
      border-radius: 7px;
      font-size: 36px;
      border: 1px solid #545454;
      background: #eaeaea;
    }

    .buttonOptions {
      width: 150px;
      height: 50px;
      border: 1px solid #545454;
    }

    .kidsPrevNextOuterDiv {
      margin-top: 50px;
    }

    .kidsPrevNextOuterDiv {
      width: 100%;
    }

    .kidsPrevNextDiv {
      width: 300px;
    }

    .kidsPreviousButton,
    .kidsNextButton {
      width: 60px;
      height: 60px;
      border-radius: 5px;
      margin: 10px;
      font-size: 20px;
      font-weight: 700;
      cursor: pointer;
      background: #b4b4b499;
      color: #fff;
    }

    .kidsNextPrevButtonEnabled {
      background: #3cb3f699;
      color: #686767;
    }

    .kidsPracticeFooterDiv {
      width: 100%;
      height: 60px;
      flex-direction: column;
      margin: 50px auto 20px auto;
      padding-bottom: 100px;
    }

    .kidsPracticeFooterDivLeft {
      width: 100%;
      height: 60px;
      padding-left: 50px;
      margin-bottom: 20px;
      position: relative;
    }

    .kidsPracticeFooterDivRight {
      width: 100%;
      height: 60px;
    }

    .kidsPracticeFooterButton {
      width: 70px;
      height: 40px;
      border-radius: 5px;
      margin: auto;
      font-size: 10px;
      font-weight: 400;
      cursor: pointer;
      background-color: #dfdfdf;
      color: #686767;
    }

    .kidsPracticeFooterExitButton {
      width: 70px;
      height: 40px;
      border-radius: 5px;
      margin: auto;
      font-size: 10px;
      font-weight: 400;
      cursor: pointer;
      background-color: #ffb038;
      color: #fff;
    }

    .kidsPracticeStarsDiv {
      display: none;
    }

    .topicsCardDiv {
      min-width: 80vw;
      padding: 50px;
      margin-top: 50px;
      border-radius: 10px;
    }

    .topicsLabel {
      font-size: 20px;
      text-align: center;
    }

    .topicsListHeader {
      width: 98%;
      padding: 20px 10px;
      background-color: lightgray;
      margin-bottom: 30px;
      margin-top: 30px;
      font-size: 20px;
    }

    .topicsListDiv {
      width: 98%;
      margin-bottom: 20px;
      cursor: pointer;
    }

    .topicsListDiv p {
      width: 100%;
      font-size: 12px;
    }

    .topicsToggleDiv {
      width: 80vw;
      padding: 10px 0px;
    }

    .list_or_grid_icon {
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /***** End of Kids Practice Page *********/

    /********** Kids Registration Page **************/

    .kidsRegistrationHeader {
      margin-top: 60px;
    }

    .kidsRegistrationHeaderP {
      color: #122e3b;
      font-weight: 600;
    }

    .kidsRegistrationHeaderSpan {
      color: #ffb038;
      margin: 0px 5px;
    }

    .kidsRegistrationHeaderRolesDiv1 {
      width: 98vw;
      height: 180px;
      border: 0.3px solid #b3b3b3;
      border-radius: 10px;
      padding: 0;
    }

    .kidsRegistrationHeaderRolesButtonsDiv0 {
      flex-direction: column;
      width: 80%;
    }

    .kidsRegistrationHeaderRolesButtonsDiv {
      flex-direction: column;
    }

    .kidsRegistrationHeaderRolesDiv1 p {
      font-weight: bold;
      color: #656565;
    }

    .kidsRegistrationRolesButtonTeacher {
      width: 120px;
      height: 40px;
      border-radius: 5px;
      color: #fff;
      margin-bottom: 10px;
      font-size: 0.8rem;
      background-color: #b5c5cd;
    }

    .kidsRegistrationRolesButtonStudent {
      width: 120px;
      height: 40px;
      border-radius: 5px;
      color: #fff;
      margin-top: 10px;
      font-size: 0.8rem;
      background-color: #122e3b;
    }

    .kidsRegistrationRolesButtonNotChosen {
      width: 120px;
      height: 40px;
      border-radius: 5px;
      color: #fff;
      font-size: 0.8rem;
      background-color: #e4e3e3;
    }

    .kidsRegistrationHeaderRolesDiv2 {
      display: none;
    }

    .kidsRegistrationRibbonsDiv {
      width: 150px;
      height: 180px;
      margin-right: 0;
      clip-path: polygon(0% 0%, 40% 0%, 100% 40%, 100% 70%, 0% 0%);
    }

    .teachercolor {
      background-color: #b5c5cd;
    }

    .studentcolor {
      background-color: #122e3b;
    }

    .notChosenColor {
      background-color: #e4e3e3;
    }

    .registrationMiddleDiv {
      width: 100%;
      margin-top: 10px;
    }

    .registrationMiddleDiv1 {
      width: 100%;
      align-items: center;
      justify-content: space-around;
      padding-right: 30px;
    }

    .registrationMiddleDiv2 {
      justify-content: space-around;
    }

    .registrationCheckMarkBoxDiv1 {
      margin-right: 20px;
    }

    .registrationCheckMarkBoxDiv2 {
      margin-left: 20px;
    }

    .registrationCheckMarkBox,
    .registrationBottomDivCheckmarkBox {
      width: 40px;
      height: 40px;
      background-color: #e4e3e3;
      margin-left: 10px;
      cursor: pointer;
    }

    .registrationCheckMarkBox:hover,
    .registrationBottomDivCheckmarkBox:hover {
      opacity: 0.75;
    }

    .registrationCheckMarkBox span,
    .registrationBottomDivCheckmarkBox span {
      width: 30px;
    }

    .kidsRegistrationTeacherParent {
      color: #969696;
      display: none;
    }

    .kidsRegistrationNumKids {
      padding: 10px 5px;
      margin-top: 10px;
    }

    .kidsRegistrationNumKids span,
    .kidsRegistrationNumKids input {
      padding: 0;
      margin: 0;
      line-height: normal;
    }

    .kidsRegistrationNumKids span {
      margin-right: 10px;
      color: #969696;
    }

    .kidsRegistrationNumKids input {
      width: 50px;
      border: 0.3px solid #b3b3b3;
      color: #969696;
      text-align: center;
    }

    .kidsRegistrationNumKidsDetails {
      padding: 10px 5px;
      margin-top: 10px;
    }

    .kidsRegistrationNumKidsDetails1 {
      width: 90vw;
      flex-direction: column;
      border: 0.3px solid #b3b3b3;
      border-radius: 10px;
      padding: 5px;
      margin: 10px auto;
    }

    .childInfoMainLabel {
      width: 70px;
      height: 50px;
      box-shadow: 0px 4px 4px 0px #3aa9e8;
      border-radius: 5px;
      color: #969696;
      font-size: 12px;
      margin-bottom: 10px;
    }

    .childInfoMainInputDiv span,
    .childInfoMainInputDiv1 span {
      color: #969696;
      font-size: 12px;
      margin-right: 5px;
    }

    .kidsRegistrationNumKidsDetails1 > input {
      padding: 0;
      margin: 0;
      line-height: normal;
      width: 70px;
      border: 0.3px solid #b3b3b3;
      color: #969696;
      text-align: center;
    }

    .childInfoMainInputDiv1 {
      margin-top: 10px;
    }

    .childInfoMainInputDiv1 input {
      border: 0.3px solid #b3b3b3;
      color: #969696;
      margin-left: 10px;
    }

    .kidsRegistrationButton {
      width: 175px;
      height: 40px;
      color: #fff;
      background-color: #122e3b;
      border-radius: 5px;
    }

    .registrationBottomDiv1 {
      flex-direction: column;
    }

    .kidsRegistrationBottomDiv1Span {
      color: #969696;
      font-size: 12px;
      font-weight: 500;
      margin-top: 18px;
    }

    .registrationBottomDiv1Div1 {
      margin: 0px 10px;
    }

    .registrationBottomDiv1Div1 > span {
      color: #969696;
    }

    .registrationBottomDiv2 {
      margin: 20px auto;
    }

    .kidsRegistrationHeader1Div {
      margin-top: 20px;
    }

    .kidsRegistrationHeader1Div1 {
      flex-direction: column;
      margin: 10px auto;
    }

    .kidsRegistrationHeader1Div1 span {
      display: none;
    }

    .kidsRegistrationHeader1Select {
      width: 300px;
      margin: 5px auto;
      outline: none;
      border: 1px solid #b3b3b3;
      font-size: 14px;
    }

    /*** End of Kids Registration Page ***/

    /* Header */
  .kidsPracticeHeader {
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
  }

  .kidsHeaderLeft,
  .kidsHeaderRight {
    width: 20%;
  }

  .kidsHeaderCenter {
    flex: 1;
    text-align: center;
  }

  .kidsBackButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 2px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsSubjectBadge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-radius: 50px;
    color: white;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin: auto;
  }

  .kidsSubjectName {
    font-size: 14px;
  }

  .kidsSubjectIcon {
    font-size: 16px;
  }

  .kidsTopicName {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
  }

  .kidsSettingsButton {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  /* Stats Bar */
  .kidsStatsBar {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0px;
    background: white;
    margin: 0 0px 5px;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 10;
  }

  .kidsStatItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
  }

  .kidsStatIcon {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 16px;
  }

  .kidsStatValue {
      font-size: 12px;
      font-weight: 700;
      color: #1e293b;
    }

    .kidsStatLabel {
      font-size: 10px;
      color: #6b7280;
      font-weight: 500;
    }

    /* Character Section */
  .kidsCharacterSection {
    display: flex;
    justify-content: center;
    margin-bottom: 2px;
  }

  .kidsCharacterBubble {
    display: flex;
    align-items: center;
    gap: 16px;
    animation: kidsBounce 2s ease-in-out infinite;
  }

  @keyframes kidsBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .kidsCharacterEmoji {
    font-size: 20px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
  }

  .kidsCharacterSpeech {
    background: white;
    padding: 2px 12px;
    border-radius: 20px;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .kidsCharacterSpeech::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid white;
  }

  .kidsCharacterSpeech p {
    font-size: 10px;
  }

   /* Question Section */
  .kidsQuestionSection {
    margin-bottom: 16px;
  }

  .kidsQuestionCard {
    background: white;
    height: 50vh;
    border-radius: 24px;
    padding: 2px;
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
  }

  .kidsQuestionHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
  }

  .kidsQuestionNumber {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: white;
    padding: 6px 10px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
  }

  .kidsQuestionLabel {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.9;
  }

  .kidsQuestionValue {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
  }

  .kidsHintButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fef3c7;
    border: 2px solid #fde68a;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #d97706;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsHintButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  /* Hint Box */
  .kidsHintBox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px;
    background: #fef3c7;
    border: 2px solid #fde68a;
    border-radius: 12px;
    margin-bottom: 20px;
    animation: slideDown 0.3s ease;
  }

  .kidsHintIcon {
    font-size: 14px;
  }

  .kidsHintBox p {
    margin: 0;
    font-size: 12px;
    color: #92400e;
  }

  /* Question Content */
  .kidsQuestionContent {
    margin-bottom: 32px;
  }

  .kidsQuestionText {
    font-size: 16px;
    line-height: 1.6;
    color: #1f2937;
    margin-bottom: 24px;
    font-weight: 500;
  }

  /* Number Input */
  .kidsAnswerInputSection {
    display: flex;
    justify-content: center;
  }

  .kidsNumberInput {
    min-width: 200px;
    padding: 16px 24px;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    background: #f9fafb;
    color: #1f2937;
    transition: all 0.3s ease;
  }

  .kidsNumberInput:focus {
    outline: none;
    border-color: #fbbf24;
    background: white;
    transform: scale(1.05);
  }

  .kidsNumberInput:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Button Options */
  .kidsButtonOptions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .kidsOptionButton {
    padding: 20px;
    border: 3px solid #e5e7eb;
    border-radius: 16px;
    background: white;
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: scale(1);
  }

  .kidsOptionButton:hover:not(:disabled) {
    border-color: #4ecdc4;
    background: #f0fdfa;
    transform: scale(1.05);
  }

  .kidsOptionButton.selected {
    border-color: #4ecdc4;
    background: #4ecdc4;
    color: white;
    animation: optionSelect 0.4s ease;
  }

  .kidsOptionButton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  @keyframes optionSelect {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

  /* Submit Section */
  .kidsSubmitSection {
    display: flex;
    justify-content: center;
  }

  .kidsSubmitButton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
  }

  .kidsSubmitButton:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.4);
  }

  .kidsSubmitButton:disabled {
    background: #cbd5e1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
  }

  .kidsSubmitIcon {
    font-size: 20px;
  }

  /* Encouragement Message */
  .kidsEncouragementMessage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 24px 48px;
    border-radius: 20px;
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    animation: encouragePop 0.5s ease;
  }

  @keyframes encouragePop {
    0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
    }
    50% {
      transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
  }

  /* Navigation Section */
  .kidsNavigationSection {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 20px;
  }

  .kidsNavButton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100px;
    padding: 8px 16px;
    background: white;
    border: 3px solid #e5e7eb;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .kidsPrevButton,
  .kidsNextButton {
    width: 100px;
    height: 50px;
    border-radius: 16px;
    margin: 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
  }

  /* Kids Upgrade Modal - Portrait */
  .kidsUpgradeModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: kidsFadeIn 0.3s ease-out;
    padding: 20px;
  }

  .kidsUpgradeModalContent {
    background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%);
    border-radius: 25px;
    padding: 30px 20px;
    max-width: 400px;
    width: 100%;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation: kidsSlideUp 0.3s ease-out;
    text-align: center;
    border: 3px solid #fdcb6e;
  }

  .kidsCloseModalButton {
    position: absolute;
    top: 15px;
    right: 15px;
    background: white;
    border: none;
    color: #e17055;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .kidsCloseModalButton:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }

  .kidsUpgradeCharacter {
    font-size: 60px;
    margin-bottom: 15px;
    animation: kidsBounce 2s ease-in-out infinite;
  }

  .kidsUpgradeModalContent h2 {
    color: #2d3436;
    font-size: 24px;
    margin-bottom: 12px;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  }

  .kidsUpgradeModalContent p {
    color: #636e72;
    font-size: 14px;
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .kidsUpgradeOptions {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 25px 0;
  }

  .kidsUpgradeButton {
    background: white;
    border: 3px solid transparent;
    border-radius: 16px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }

  .kidsUpgradeButton:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  }

  .kidsUpgradeButton i {
    font-size: 32px;
  }

  .kidsUpgradeButton span {
    font-size: 16px;
    font-weight: 600;
    color: #2d3436;
    text-align: left;
  }

  .kidsUpgradeButton small {
    font-size: 12px;
    color: #74b9ff;
    display: block;
    margin-top: 2px;
  }

  .kidsStudentPlan {
    border-color: #a29bfe;
  }

  .kidsStudentPlan i {
    color: #6c5ce7;
  }

  .kidsFamilyPlan {
    border-color: #55efc4;
  }

  .kidsFamilyPlan i {
    color: #00b894;
  }

  .kidsContinueTomorrowButton {
    background: #74b9ff;
    border: none;
    color: white;
    font-size: 16px;
    cursor: pointer;
    padding: 12px 24px;
    border-radius: 50px;
    margin-top: 8px;
    transition: all 0.2s;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(116, 185, 255, 0.3);
  }

  .kidsContinueTomorrowButton:hover {
    background: #0984e3;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(116, 185, 255, 0.4);
  }

  .kidsQuestionLimit {
    background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
    border: 2px solid #f39c12;
    color: white;
    font-size: 12px;
  }

  @keyframes kidsFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes kidsSlideUp {
    from {
      transform: translateY(30px) scale(0.95);
      opacity: 0;
    }
    to {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }

  @keyframes kidsBounce {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }
    
  } /*** End of (min-width: 320px) and (max-width: 767px) *********/
}/**** Kids Portrait ****/