/* ==========================================================================
   Tedra Landing Page — Mobile-first
   Breakpoints: 768 tablet | 992 laptop | 1200 desktop
   Mobile base: 320px–767px
   ========================================================================== */

   :root {
    /* Fonts */
    --white: #FFFFFF;
    --black: #000000;
    --font-body: 'Poppins', sans-serif;
    --text: rgba(21, 26, 23, 0.7);
    --textSecondary: #191919;
    --heading: #151917;
    /* Colors */
    --blue: #007AFF;
    --blue2: #337EFF;
    --blue3: #1A6BFF;
    --paleBlue: #A2DAFF;
    --lightBlue: #D0E3FF;
    --blackLight: #151A17;
    --blackLight2: #181818;
    --gray: #929292;
    --gray2: #CACACA;
    --darkGray: #313030;
    --purple: #C0B1FF;
    --lightPurple: #F3F0FF;
    --darkPurple: #6D4EF1;
    --dark: #0D0040;
    --strongOrange: #DD6B1B;
    --brightOrange: #FB9242;
    --brightOrange2: #F98832;
    --lightGrayishGreen: #789E8A;
    --brightRed: #FE734A;
    --vividPurple: #5218F8;
    --paleNavy: #EDF1FA;
    /* size */
    --size10: 10px;
    --size15: 15px;
    --size16: 16px;
    --size17: 17px;
    --size18: 18px;
    --size20: 20px;
    --size25: 25px;
    --size30: 30px;
    --size40: 40px;
    --size50: 50px;
    --size100: 100px;
    --size650: 650px;
    --size710: 710px;
    --radius: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --container-padding: 20px;
    --container-size: 1920px;
    --container-size-medium: 1503px;
    --container-size-small: 1440px;
    --container-size-md-small: 1200px;
    --width90Per: 90%;
    --width100Per: 100%;
    /* gradients */
    --banner-bg: linear-gradient(105.76deg, #E9F0FB 2.08%, #DFE9F9 100%), linear-gradient(254.02deg, #D7E3F5 2.11%, #F5F8FD 100%);
    --section-bg: linear-gradient(160.48deg, #CCE2FF 0%, #EBE5FA 100%);
    --btnShadow: 0px 25px 0px 0px rgba(0, 122, 255, 0.051), 0px 20px 0px 0px rgba(0, 122, 255, 0.1), 0px 15px 0px 0px rgba(0, 122, 255, 0.2), 0px 10px 0px 0px rgba(0, 122, 255, 0.3), 0px 5px 0px 0px rgba(0, 122, 255, 0.4);
  
    --card-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.349);
  
    
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    margin: 0;
  }
  
  .banner,
  .pageSection {
    font-family: var(--font-body);
    font-size: var(--size16);
    line-height: 1.7;
    color: var(--text);
  }
  
  img,
  video {
    max-width: 100%;
    display: block;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  ul,
  ol,
  dl {
    margin: 0 0 var(--size15);
    padding: 0 0 0 var(--container-padding);
  }
  
  p {
    margin: 0 0 var(--size15);
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-body);
    margin: 0;
    font-weight: 500;
    line-height: 1.4;
  }
  
  h2 {
    font-size: 70px;
    font-weight: 400;
    color: var(--textSecondary);
    margin: 0 0 var(--container-padding);
    letter-spacing: -0.1px;
  }
  
  .container {
    max-width: var(--container-size);
    margin: 0 auto;
  }
  
  .page-center {
    max-width: var(--container-size-small);
    margin: 0 auto;
  }
  
  .pageFlex {
    display: flex;
    gap: var(--container-padding);
  }
  
  .pageFlexItem {
    flex: 1;
    max-width: 50%;
  }
  
  .pageFlexReverse {
    flex-direction: row-reverse;
  }
  
  .pageFlexItemContent {
    max-width: var(--size710);
    width: 100%;
  }
  
  .pageFlex:not(.pageFlexReverse) .pageFlexContent {
    display: flex;
    justify-content: flex-end;
    padding-left: 60px;
    padding-right: 0;
  }
  
  .pageFlex.pageFlexReverse .pageFlexContent {
    padding-right: 60px;
  }
  
  .pageSection {
    padding-top: var(--size100);
    padding-bottom: var(--size100);
  }
  
  .sectionHPadding {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
  
  .btns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--size40);
  }
  
  .btn {
    display: inline-block;
    padding: var(--container-padding);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--size18);
    line-height: 22px;
    letter-spacing: -0.41px;
    text-align: center;
    vertical-align: middle;
    color: var(--white);
    background: var(--blue);
    border-radius: var(--size10);
    border: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 0;
    overflow: hidden;
  }
  
  *:last-child {
    margin-bottom: 0;
  }
  
  .bgGradient {
    background: var(--section-bg);
  }
  
  .bgSolid {
    background: var(--lightBlue);
  }
  
  .block {
    display: block;
  }
  
  .textBlue {
    color: var(--blue);
  }
  
  .stackLabel {
    position: relative;
    z-index: 0;
  }
  
  .stackLabel img {
    position: absolute;
    top: -32px;
    right: -60px;
  }
  
  .strongOrange {
    color: var(--strongOrange);
  }
  
  .brightOrange {
    color: var(--brightOrange);
  }
  
  .brightOrange2 {
    color: var(--brightOrange2);
  }
  
  .blue {
    color: var(--blue);
  }
  
  .lightGrayishGreen {
    color: var(--lightGrayishGreen);
  }
  
  .brightRed {
    color: var(--brightRed);
  }
  
  .vividPurple {
    color: var(--vividPurple);
  }
  
  .ctaContent {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
  }
  
  .ctaFull {
    padding-top: 50px;
  }
  
  [data-anim].ev-animatestart {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: .8s;
    transition-timing-function: ease-in-out;
  }
  
  [data-anim=fade-up].ev-animatestart {
    transform: translate3d(0, var(--size100), 0);
  }
  
  [data-anim=zoom-in].ev-animatestart {
    transform: scale(.6);
  }
  
  [data-anim^=fade].ev-animated {
    opacity: 1;
    transform: translateZ(0);
  }
  
  [data-anim^=zoom].ev-animated {
    opacity: 1;
    transform: translateZ(0) scale(1);
  }
  
  /* banner */
  .banner {
    background: var(--banner-bg);
    padding: 75px 0 82px;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  
  .banner-container {
    display: flex;
    align-items: center;
    max-width: var(--container-size-medium);
    gap: 58px;
    position: relative;
    z-index: 1;
  }
  
  .banner-container::before {
    content: "";
    position: absolute;
    width: 1617px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--paleBlue);
    top: -182px;
    right: -767px;
    z-index: -1;
    pointer-events: none;
  }
  
  .banner-content {
    flex: 1;
    max-width: 708px;
  }
  
  .banner-content .btn {
    background: var(--brightOrange);
  }
  
  .banner-contentInner {
    max-width: var(--size710);
  }
  
  .banner-image {
    flex: 1;
    position: relative;
    z-index: 1;
    max-width: 49.1%;
  }
  
  .banner-image img,
  .banner-image video {
    border-radius: var(--radius-lg);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
  }
  
  .banner-img {
    position: absolute;
    left: -20px;
    top: -23px;
  }
  
  .banner-ellipse {
    pointer-events: none;
  }
  
  .banner-title {
    font-weight: 500;
    font-size: 54px;
    color: var(--heading);
    margin: 0 0 21px;
  }
  
  .banner-title>span {
    color: var(--blue);
  }
  
  .banner-summary {
    font-weight: 400;
    font-size: 22px;
    line-height: 1.7;
    margin: 0 0 21px;
  }
  
  .banner-tag {
    font-weight: 400;
    font-style: Italic;
    font-size: 22px;
    line-height: 1.7;
    color: var(--blackLight);
    margin: 0 0 var(--size25);
  }
  
  .bannerTextStrike {
    display: inline-block;
  }
  
  .bannerTextStrike img {
    margin: 0;
  }
  
  /* Tool Section */
  .toolsSection {
    font-size: 26px;
    padding-top: 166px;
    padding-bottom: 125px;
  }
  
  .toolsSection h2 {
    max-width: 690px;
  }
  
  .text-summary {
    margin: 0 0 31px;
  }
  
  .toolsSection .pageFlex {
    align-items: center;
  }
  
  /* Rebuild Section */
  .pageSection.rebuildSection {
    text-align: center;
    font-size: 36px;
    font-weight: 500;
    padding-top: 257px;
    padding-bottom: 175px;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    overflow: hidden;
  }
  
  .pulse-background {
    position: absolute;
    top: var(--size25);
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    width: 1098px;
    height: 1098px;
    z-index: -1;
    pointer-events: none;
  }
  
  .pulse-svg {
    overflow: visible;
    width: 100%;
    height: 100%;
  }
  
  .pulse-circle {
    opacity: 0;
    animation: pulse-animation 4s ease-out infinite;
    transform-origin: center center;
  }
  
  .pulse-circle.circle-1 {
    animation-delay: 0s;
  }
  
  .pulse-circle.circle-2 {
    animation-delay: 1s;
  }
  
  .pulse-circle.circle-3 {
    animation-delay: 2s;
  }
  
  .pulse-circle.circle-4 {
    animation-delay: 3s;
  }
  
  @keyframes pulse-animation {
    0% {
      opacity: 0.7;
      transform: scale(0.4);
    }
  
    50% {
      opacity: 0.4;
    }
  
    100% {
      opacity: 0;
      transform: scale(1.3);
    }
  }
  
  .rebuildSection .container {
    max-width: var(--container-size-small);
  }
  
  .rebuildSection h2 {
    font-weight: 700;
  }
  
  .rebuildSection .tags {
    padding: 29px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--size50);
    justify-content: center;
  }
  
  .tag {
    background: rgba(26, 107, 255, 0.2);
    border-radius: var(--size40);
    padding: var(--size10);
    font-size: 14px;
    color: var(--blue);
    display: inline-flex;
  }
  
  .tag:before {
    content: '•';
    margin-right: 5px;
  }
  
  .tag.tagIcon {
    display: inline-flex;
    padding: var(--size30);
    align-items: center;
    gap: var(--size10);
    border-radius: var(--size30);
    box-shadow: var(--card-shadow);
    background: var(--white);
    font-size: var(--size16);
    color: var(--blackLight2);
    font-weight: 600;
    text-align: left;
  }
  
  .tag.tagIcon:before {
    display: none;
  }
  
  
  /* Notes Section */
  .workSection {
    font-size: 24px;
    color: var(--heading);
  }
  
  .workSection .pageFlexImg {
    text-align: center;
  }
  
  .workSection .pageFlex {
    align-items: center;
  }
  
  .workSection h2 {
    color: inherit;
    margin: 0 0 23px;
    letter-spacing: normal;
    max-width: 620px;
  }
  
  .workSection .text-summary {
    font-size: inherit;
    color: inherit;
    margin: 0 0 var(--size30);
  }
  
  .apps {
    display: flex;
    max-width: 451px;
    gap: var(--size10);
    justify-content: space-between;
    padding: var(--container-padding) 0 45px;
  }
  
  .appsItem span {
    display: block;
    font-size: 19px;
    color: var(--heading);
  }
  
  .appsItem {
    text-align: center;
  }
  
  
  /* Live Tool Section */
  .pageSection.liveToolSection {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    height: 500vh;
  }
  
  .alwaysLiveTitle {
    text-align: center;
    padding: 120px 20px 20px;
  }
  
  .liveToolSection .sticky {
      position: sticky;
      top: 40px;
      height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
  }
  
  .liveToolSection .container {
    width: 100%;
  }
  
  .liveToolSection .pageFlexImg {
    position: relative;
    /* min-height: 520px; */
  }
  
  .liveToolSection .pageFlexImg .sideImage {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    pointer-events: none;
    top: 0;
  }
  
  .liveToolSection .pageFlexImg .sideImage.activeImage {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  .liveToolSection .pageFlexImg .sideImage > video,
  .liveToolSection .pageFlexImg .sideImage > img {
    width: 100%;
    /* max-height: 100vh; */
    max-height: 100%;
    object-fit: contain;
  }
  
  .accordion {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
  
  .accordionItem {
    border-bottom: 1px solid var(--gray);
  }
  
  .accordionItem:last-child {
    border: none;
  }
  
  .accordionHeader {
    color: var(--blackLight2);
    font-weight: 400;
    font-size: 36px;
    line-height: 1.7;
    letter-spacing: -0.1px;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    text-align: left;
  }
  
  .accordionContent {
    padding: var(--size18) 0 var(--size30);
    display: none;
    width: var(--size710);
    max-width: 100%;
  }
  
  .activeAccordionItem .accordionHeader {
    font-size: 54px;
    color: var(--brightOrange);
    text-transform: none;
  }
  
  .accordionHeader:hover {
    color: var(--brightOrange);
  }
  
  .activeAccordionItem .accordionContent {
    display: block;
  }
  
  .accordionContent h3 {
    margin: 0 0 var(--size18);
    color: var(--textSecondary);
    font-size: 48px;
    line-height: 1.4;
  }
  
  .accordionContent ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size18);
    color: var(--text);
    font-size: 24px;
    line-height: 1;
  }
  
  .accordionContent p {
    font-size: 24px;
    line-height: 1.5;
    margin: 0 0 10px;
  }
  
  .accordionContent ul li {
    position: relative;
    padding-left: var(--size30);
  }
  
  .accordionContent ul li:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9 1.5C4.875 1.5 1.5 4.875 1.5 9C1.5 13.125 4.875 16.5 9 16.5C13.125 16.5 16.5 13.125 16.5 9C16.5 4.875 13.125 1.5 9 1.5ZM7.5 12.75L3.75 9L4.8075 7.9425L7.5 10.6275L13.1925 4.935L14.25 6L7.5 12.75Z' fill='%23007AFF'/%3E%3C/svg%3E");
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--blue);
    font-size: 24px;
    width: var(--size18);
    height: var(--size18);
    display: block;
  }
  
  .accordionContent .togglerImg {
    margin-top: var(--size10);
  }
  
  /* One Login Section */
  .oneLoginSection {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 163px;
    padding-bottom: 180px;
    position: relative;
    z-index: 0;
  }
  
  .liveBg {
    position: absolute;
    z-index: -1;
    pointer-events: none;
  }
  
  .liveBg.topLeft {
    left: 0;
    top: -50px;
    width: 14.58%;
  }
  
  .liveBg.topRight {
    right: 0;
    top: 0;
    width: 15.10%;
  }
  
  .liveBg.bottomLeft {
    bottom: 0;
    left: 0;
    width: 10.93%;
  }
  
  .liveBg.bottomRight {
    bottom: 0;
    right: 0;
    width: 16.82%;
  }
  
  .liveBg.center {
    bottom: -110px;
    right: 30%;
    width: 7.29%;
  }
  
  .oneLoginSection .sectionHeader {
    text-align: center;
    position: relative;
    z-index: 0;
  }
  
  .oneLoginSection h2 {
    font-weight: 600;
    margin: 0 0 28px;
  }
  
  .oneLoginSection h2 span {
      display: inline-block;
  }
  
  .oneLoginSection .btns {
    justify-content: center;
  }
  
  /* Notes Section */
  .notesSection {
    padding-top: 80px;
    padding-bottom: 95px;
  }
  
  .notesSection .container {
    max-width: var(--container-size-small);
  }
  
  .notesSection .sectionHeader {
    font-size: 19px;
    margin-bottom: 70px;
    text-align: center;
  }
  
  .notesSection h2 {
    margin: 0 0 var(--size15);
  }
  
  .notesSection .btns {
    justify-content: center;
  }
  
  .notesContent {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--size30) var(--container-padding);
  }
  
  .notesItem {
    background: var(--white);
    border-radius: 22px;
    padding: var(--size30);
    display: flex;
    flex-direction: column;
    gap: 22px;
    grid-column: span 2;
  }
  
  .notesItemImage,
  .notesItemContent {
    flex: 1;
  }
  
  .notesItemImage {
    display: flex;
    align-items: center;
    min-height: 298px;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 0;
  }
  
  .notesItemImage>video {
    position: absolute;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .notesItem.notesItemwide .notesItemImage {
    justify-content: flex-end;
  }
  
  .notesItem:hover .notesItemImage>video {
    opacity: 1;
    transition: opacity 0.3s;
  }
  
  .notesItemContentIn p{
    max-width: 371px;
  }
  
  .notesItem h3 {
    color: var(--heading);
    font-size: 24px;
    line-height: 1.5;
    margin: 0 0 var(--size30);
  }
  
  .notesItemlarge {
    grid-column: span 3;
  }
  
  .notesItemlarge .notesItemContentIn {
    max-width: 641px;
    margin: 0;
  }
  
  .notesItemlarge .notesItemContentIn p {
    margin: auto 0 0;
    max-width: 100%;
  }
  
  .notesItemlarge.notesItem5 .notesItemContentIn p {
    max-width: 600px;
  }
  
  .notesItemwide {
    grid-column: span 2;
    align-items: flex-end;
    flex-direction: row-reverse;
    gap: 27px;
    justify-content: space-between;
  }
  
  /* Power Section */
  .pageSection.powerSection {
    padding-top: 214px;
    padding-bottom: 247px;
  }
  
  .powerItems {
    display: flex;
    align-items: center;
    gap: 23px;
  }
  
  .powerContent,
  .powerCards {
    flex: 1;
    width: 50%;
  }
  
  .powerContent .powerContentSummary {
    font-size: 24px;
    color: var(--heading);
    margin: 0 0 38px;
  }
  
  .powerCards {
    gap: var(--size30) 23px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .powerCard {
    box-shadow: var(--card-shadow);
    background: var(--white);
    padding: var(--size30);
    border-radius: var(--size16);
    display: flex;
    flex-direction: column;
    gap: var(--size30);
  }
  
  .powerCard img {
    margin: 0;
  }
  
  .powerCard h3 {
    color: var(--heading);
    font-size: 28px;
    line-height: 1.7;
    margin: 0 0 var(--size16);
  }
  
  /* Institute Section */
  .pageSection.instituteSection {
    padding-top: 80px;
    padding-bottom: 91px;
  }
  
  .instituteSection .sectionHeader {
    text-align: center;
    font-size: 19px;
    margin-bottom: var(--size40);
  }
  
  .instituteSection .sectionLabel {
    display: inline-block;
    font-size: var(--size16);
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--text);
    font-weight: 400;
  }
  
  .instituteSection h2 {
    color: var(--heading);
    margin: 0 0 11px;
  }
  
  .instituteSection .sectionHeader p {
    max-width: 810px;
    margin: 0 auto;
  }
  
  .instituteCard {
    background: var(--purple);
    border-radius: var(--size16);
    padding: 39px var(--size30);
    display: flex;
    gap: 65px;
  }
  
  .instituteCardCol.instituteCardContent {
    flex: 1;
    max-width: 658px;
  }
  
  .instituteCardLabel {
    background: var(--lightPurple);
    display: inline-flex;
    padding: var(--size10) var(--container-padding);
    border-radius: var(--size40);
    font-size: 28px;
    line-height: 1.4;
    color: var(--darkPurple);
    margin: 0 0 var(--size15);
  }
  
  .instituteCardContent h3 {
    color: var(--dark);
    font-size: 44px;
    line-height: 1.7;
    margin: 0 0 27px;
  }
  
  .instituteCardContent ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    color: var(--dark);
    font-size: 19px;
    line-height: 1.26;
  }
  
  .instituteCardContent ul li {
    position: relative;
    padding-left: 22px;
  }
  
  .instituteCardContent ul li:before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'><path d='M8.33333 0C3.75 0 0 3.75 0 8.33333C0 12.9167 3.75 16.6667 8.33333 16.6667C12.9167 16.6667 16.6667 12.9167 16.6667 8.33333C16.6667 3.75 12.9167 0 8.33333 0ZM6.66667 12.5L2.5 8.33333L3.675 7.15833L6.66667 10.1417L12.9917 3.81667L14.1667 5L6.66667 12.5Z' fill='%230D0040'/></svg>");
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--dark);
    font-size: var(--container-padding);
    width: var(--container-padding);
    height: var(--container-padding);
    display: block;
    line-height: 1;
  }
  
  .instituteCardCol.instituteCardImage {
    max-width: 648px;
    flex: 1;
  }
  
  .instituteCardImage {
    margin: 0;
    display: block;
    text-align: center;
  }
  
  .instituteCardImage img {
    margin: 0 auto;
  }
  
  .instituteCardImage figcaption {
    padding-top: 19px;
    color: var(--dark);
    font-size: var(--size16);
    line-height: 1.2;
  }
  
  /* Feature Section */
  .pageSection.featureSection {
    padding-top: 117px;
    padding-bottom: 151px;
  }
  
  .featureSection .sectionLabel {
    max-width: 1000px;
    color: var(--heading);
    margin: 0 0 var(--size30);
    line-height: 1.7;
  }
  
  .featureSection .pageFlexContent {
    max-width: 588px;
  }
  
  .featureWrap {
    display: flex;
    justify-content: center;
  }
  
  .featureWrap.pageFlex:not(.pageFlexReverse) .pageFlexContent {
    padding-left: 0;
  }
  
  .featureItems {
    display: flex;
    flex-direction: column;
    gap: var(--size30);
  }
  
  .featureItem {
    display: flex;
    gap: 5px;
    align-items: center;
  }
  
  .featureItemImage {
    width: 150px;
  }
  
  .featureItemContent {
    flex: 1;
  }
  
  .featureItemContent h3 {
    color: var(--heading);
    font-size: 26px;
    line-height: 1.5;
    margin: 0 0 var(--size16);
    max-width: 440px;
    line-height: 1.84;
  }
  
  .featureItemContent p {
    max-width: 466px;
  }
  
  .liveClassesDemo {
    flex: 1;
    max-width: 100%;
  }
  
  .liveClassesDemo img,
  .liveClassesDemo video {
    border: 3px solid var(--darkGray);
    box-shadow: 0px 21.36px 42.71px -10.25px rgba(0, 0, 0, 0.251);
    border-radius: 14px;
  }
  
  .brandWrap {
    display: flex;
    padding-top: var(--size15);
    border-bottom: 1px solid var(--gray2);
    padding-bottom: 87px;
  }
  
  .brandCol.brandCta {
    width: 35%;
  }
  
  .brandCol.brandDetails {
    flex: 1;
    padding-top: 64px;
  }
  
  .brandDetails h3 {
    font-size: 32px;
    line-height: 1.5;
    color: var(--heading);
    margin: 0 0 28px;
  }
  
  .brandItems {
    display: flex;
    gap: var(--size16);
  }
  
  .brandItem {
    display: inline-flex;
    align-items: center;
    max-width: 222px;
    gap: var(--size16);
    font-size: 14px;
    color: var(--heading);
    width: 24%;
  }
  
  .brandIcon {
    width: 44px;
    min-width: 44px;
  }
  
  .brandLabel {
    flex: 1;
  }
  
  /* <!-- Live Classes Section --> */
  .pageSection.liveClassesSection {
    padding-top: 109px;
    padding-bottom: 117px;
  }
  
  .liveClassesSection .sectionHeader {
    text-align: center;
    margin: 0 0 75px;
  }
  
  .liveClassesSection .sectionHeader h2 span{
    display: inline-block;
  }
  
  .liveClassesSection .sectionLabel {
    line-height: 1.5;
    font-size: var(--size16);
    color: var(--text);
    margin: 0 0 var(--size10);
  }
  
  .liveClassesSection h2 {
    font-size: 60px;
    line-height: 1;
    font-weight: 400;
  }
  
  /* .liveClassesSection .sectionHeader {
    margin: 0 0 70px;
  } */
  
  .liveClassesFrame {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--size10);
  }
  
  .liveClassesTitle h3 {
    font-size: 60px;
    line-height: 1.7;
    margin: 0;
  }
  
  .liveClassesTitle {
    width: 40%;
    position: relative;
    width: calc(40% + 65px);
    overflow: hidden;
    margin-right: -65px;
  }
  
  .liveClassesTitleSlider {
    position: relative;
    height: 100%;
  }
  
  .eightysvh {
    height: 80svh;
  }
  
  .liveClassesTitleWrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* height: 100svh;
    padding-top: 10svh;
    padding-bottom: 10svh; */
    color: var(--heading);
    position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
  
      opacity: 0;
      transform: translateY(100%);
      transition: transform .3s ease, opacity 0.3s ease;
      pointer-events: none;
  }
  
  .liveClassesTitleWrap.active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
  }
  
  .liveClassesTitleWrap.exit-up {
      opacity: 0;
      transform: translateY(-100%);
  }
  
  .liveClassesTitleWrap.exit-down {
      opacity: 0;
      transform: translateY(100%);
  }
  
  .liveClassImage {
    /* height: 100svh; */
    position: sticky;
    top: 0;
    /* padding-top: 10svh;
    padding-bottom: 10svh; */
    display: flex;
    align-items: center;
  }
  
  .liveClassImageIn {
    position: relative;
    z-index: 0;
  }
  
  .liveClassesVideo {
    position: absolute;
    top: 7%;
    left: 12.5%;
    width: 74.5%;
    height: 79%;
    opacity: 0;
    transition: opacity 1.5s;
    z-index: -1;
  }
  
  .liveClassesVideo>img {
    aspect-ratio: 719 / 432;
    margin: 0 auto;
  }
  
  .liveClassImage>img {
    aspect-ratio: 971 / 548;
  }
  
  .liveClassesVideo.liveClassesVideoActive {
    opacity: 1;
    transition: opacity 1.5s;
  }
  
  /* Classroom Section */
  .classroomSection {
    padding-top: 44px;
    padding-bottom: 98px;
  }
  
  .classroomCard {
    background: var(--white);
    border-radius: 32px;
    padding: var(--size100) 42px 45px 62px;
    display: flex;
    gap: var(--size30);
    align-items: center;
  }
  
  .classroomContent,
  .classroomAssets {
    flex: 1;
  }
  
  .classroomContent {
    max-width: 600px;
  }
  
  .classroomSection h2 {
    font-weight: 600;
    margin: 0 0 var(--size30);
    line-height: 1.2;
  }
  
  .classroomSection h2 .stackLabel img {
    top: -42px;
    right: -51px;
  }
  
  .textStrike {
    display: inline-block;
  }
  
  .textStrike img {
    margin: 0;
  }
  
  .classroomDescription {
    font-size: var(--size18);
    margin: 0 0 26px;
  }
  
  .classroomTag {
    padding-top: var(--size15);
    margin: 0 0 var(--size30);
    font-size: 21px;
    color: var(--blackLight);
  }
  
  .classroomTags.tags {
    gap: var(--size30);
    display: flex;
    flex-wrap: wrap;
  }
  
  .classroomTags .tag {
    box-shadow: var(--card-shadow);
    background: var(--paleNavy);
    color: var(--blue3);
    font-size: var(--size18);
  }
  
  .animHover {
    transform: translateY(0px);
    transition: all 0.3s ease-in-out;
  }
  
  .animHover:hover {
    transform: translateY(-5px) !important;
  }
  
  .notesItem.animHover:hover {
    box-shadow: var(--card-shadow);
  }
  
  /* Faq */
  .faqRow {
      display: flex;
      justify-content: space-between;
  }
  
  .faqSectionTitle {
      width: 40%;
      padding-top: 80px;
  }
  
  .faqSectionTitle .faqTitleSticky {
      position: sticky;
      top: 180px;
      z-index: 2;
      margin-bottom: 30px;
  }
  
  .faqSectionTitle .faqTitleSticky .ctaContent {
    justify-content: flex-start;
    padding-top: 20px;
  }
  
  .faqCardListWrap {
      flex: 1;
      position: relative;
      overflow: visible;
      margin-top: 24px;
  }
  
  .faqCard {
    isolation: isolate;
    position: sticky;
    border: none;
    z-index: 1;
    padding: 30px;
    background: #ffffff;
    border-radius: 20px;
    top: 100px;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0px -3px 0px rgba(97, 76, 76, 0.1);
    color: #616161;
    font-size: 18px;
  }
  
  .faqCard:first-child {
    box-shadow: 0px -3px 0px rgba(97, 76, 76, 0.1), 0px 2px 11px 2px #00000026;
  }
  
  .faqCardList {
      position: relative;
      overflow: visible;
      display: flex;
      flex-direction: column;
      gap: 24px;
  }
  
  .faqCard:hover {
      box-shadow: 0px -3px 0px rgba(97, 76, 76, 0.1), 0px 2px 11px 2px #00000026;
  }
  
  .faqCard h3 {
      font-weight: 400;
      font-size: 36px;
      line-height: 1.3;
      color: #151917;
      margin: 0 0 40px;
  }
  
  
  @media (min-width: 2100px) {
  
    .liveToolSection .pageFlexImg img,
    .toolsSection .pageFlexImg img {
      border-radius: 22px;
    }
  }
  
  @media (max-width: 1800px) {
    .banner {
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
    }
  
    .liveClassesDemo img {
      right: 0;
      max-width: 100%;
    }
  
    .faqCard h3 {
      font-size: 30px;
    }
  }
  
  @media (max-width: 1650px) {
  
    .banner-container,
    .page-center {
      width: var(--width90Per);
    }
  
    .banner-container {
      gap: 32px;
    }
  
    .banner-container::before {
      width: 100%;
      right: -44%;
    }
  
    .banner-summary {
      font-size: var(--container-padding);
    }
  
    .banner-tag {
      font-size: 21px;
    }
  
    .banner-title {
      font-size: 47px;
    }
  
    .notesItemImage {
      min-height: 210px;
    }
  
    .notesItemContentIn p {
      margin-top: auto;
    }
  
    .notesItemContentIn {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  
    h2,
    .liveClassesSection h2 {
      font-size: 53px;
    }
  
    .liveClassesTitle h3,
    .activeAccordionItem .accordionHeader {
      font-size: 44px;
    }
  
    .instituteCardContent h3,
    .accordionContent h3 {
      font-size: 38px;
    }
  
    .pageSection.rebuildSection,
    .accordionHeader {
      font-size: 32px;
    }
  
    .toolsSection,
    .instituteCardLabel {
      font-size: 24px;
    }
  
    .accordionContent ul,
    .accordionContent p {
      font-size: 22px;
    }
  
    .tag.tagIcon {
      padding: var(--container-padding);
    }
  
    .classroomCard {
      padding: 80px 45px 45px;
    }
  
    .featureSection .pageFlexContent.pageFlexItem {
      padding-left: 0;
    }
  
    .brandItem {
      gap: var(--size10);
    }
  
    .toolsSection {
      padding-top: 80px;
      padding-bottom: 80px;
    }
  
    .oneLoginSection,
    .pageSection.powerSection,
    .pageSection.featureSection {
      padding-top: var(--size100);
      padding-bottom: var(--size100);
    }
  
    .pageSection.liveToolSection {
      padding-top: 0;
      padding-bottom: 0;
    }
  
    .alwaysLiveTitle {
      padding-top: var(--size100);
    }
  
    .featureSection .sectionLabel {
      max-width: 800px;
    }
  
    .featureItemContent h3 {
      font-size: 23px;
      margin: 0 0 5px;
    }
  
    .featureItems {
      gap: var(--size15);
    }
  
    .notesItem h3 {
      font-size: 20px;
      margin: 0 0 var(--size20);
    }
  }
  
  @media (max-width: 1650px) and (min-width: 1200px) {
    .notesItemlarge {
      height: auto;
      align-self: baseline;
    }
  }
  
  @media (max-width: 1499px) {
    .tag.tagIcon {
      padding: var(--size15);
    }
  
    .featureItemContent h3 {
      line-height: 1.4;
    }
  }
  
  @media (max-width: 1399px) {
  
    .pageSection,
    .oneLoginSection,
    .pageSection.powerSection,
    .pageSection.featureSection {
      padding-top: var(--size100);
      padding-bottom: var(--size100);
    }
  
    .banner-title {
      font-size: 42px;
      margin: 0 0 var(--size15);
    }
  
    .banner-summary {
      font-size: var(--size18);
      margin: 0 0 var(--size15);
    }
  
    .banner-tag {
      font-size: var(--size18);
    }
  
    .btn {
      font-size: var(--size16);
      line-height: 1.2;
      padding: var(--size15) var(--size20);
    }
  
    .banner {
      padding-top: 60px;
      padding-bottom: 60px;
    }
  
    .toolsSection {
      padding-top: 70px;
      padding-bottom: 70px;
      font-size: 21px;
    }
  
    h2,
    .liveClassesSection h2 {
      font-size: 48px;
    }
  
    .toolsSection h2 {
      max-width: 520px;
    }
  
    .pageFlexItemContent {
      max-width: 540px;
      gap: var(--size25);
    }
  
    .pageSection.rebuildSection,
    .accordionHeader {
      font-size: 26px;
    }
  
    .pageSection.rebuildSection {
      padding-top: 150px;
      padding-bottom: 150px;
    }
  
    .pulse-background {
      top: -50px;
    }
  
    .tag.tagIcon img {
      width: var(--size30);
    }
  
    .tag.tagIcon {
      border-radius: var(--size25);
    }
  
    .rebuildSection .tags {
      gap: var(--size30);
    }
  
    .rebuildSection .container {
      width: 90%;
    }
  
    .workSection,
    .accordionContent ul li,
    .powerContent .powerContentSummary,
    .featureItemContent h3,
    .accordionContent p {
      font-size: 21px;
    }
  
    .activeAccordionItem .accordionHeader {
      font-size: 39px;
    }
  
  
    .notesItem h3 {
      margin: 0 0 15px;
    }
  
    .notesItemImage {
      min-height: 210px;
    }
  
    .notesItem {
      padding: var(--container-padding);
      border-radius: var(--radius-lg);
    }
  
    .notesContent {
      gap: var(--size25) var(--size15);
    }
  
    .powerCard h3 {
      font-size: 26px;
      margin: 0 0 var(--size10);
    }
  
    .powerCard {
      border-radius: 14px;
      padding: var(--container-padding);
      gap: var(--size15);
    }
  
    .featureSection .sectionLabel {
      max-width: 690px;
    }
  
    .featureItemContent h3 {
      margin: 0 0 var(--size15);
    }
  
    .classroomCard {
      padding: 60px 45px 45px;
    }
  
    .featureWrap.pageFlex:not(.pageFlexReverse) .pageFlexContent {
      justify-content: flex-start;
    }
  
    .featureSection .pageFlexContent {
      max-width: 450px;
    }
  
    .featureItem {
      max-width: 386px;
    }
  
    .pageFlex:not(.pageFlexReverse) .pageFlexContent {
      justify-content: flex-start;
    }
  
    .workSection .text-summary {
      font-size: 19px;
    }
  
    .classroomSection h2 {
      font-size: var(--size50);
    }
  
    .classroomTag {
      font-size: var(--size18);
    }
  
    .classroomTags .tag {
      font-size: var(--size16);
    }
  
    .classroomTags.tags {
      gap: var(--container-padding);
    }
  }
  
  @media (max-width: 1299px) {
    .pageFlex:not(.pageFlexReverse) .pageFlexContent {
      padding-left: var(--container-padding);
    }
  
    .banner-container, .page-center {
      width: var(--width100Per);
    }
  
    .banner-container {
      gap: var(--size30);
    }
  
    .banner-title {
      font-size: 36px;
    }
  
    h2,
    .liveClassesSection h2 {
      font-size: 48px;
    }
  
    .liveClassesTitle h3, 
    .activeAccordionItem .accordionHeader {
      font-size: 36px;
    }
    
    .liveClassImage {
      max-width: 60%;
    }
  
    .liveClassesTitle {
      margin-right: -45px;
    }
  
    .toolsSection,
    .instituteCardLabel,
    .workSection,
    .accordionContent ul,
    .accordionContent p {
      font-size: var(--container-padding);
    }
  
    .accordionContent ul {
      line-height: 1.4;
    }
  
    .pageSection.rebuildSection,
    .accordionHeader,
    .brandDetails h3 {
      font-size: 28px;
    }
  
    .featureItemContent h3 {
      font-size: 24px;
    }
  
    .rebuildSection .tags {
      padding: var(--container-padding) 0 0;
      gap: var(--size25);
    }
  
    .tag.tagIcon {
      padding: var(--size10) var(--size15);
      border-radius: var(--size15);
    }
  
    .toolsSection,
    .pageSection.powerSection,
    .pageSection.liveClassesSection,
    .pageSection.featureSection {
      padding-top: var(--size100);
      padding-bottom: var(--size100);
    }
  
    .pageSection.rebuildSection {
      padding-top: 190px;
      padding-bottom: 190px;
    }
  
    .accordion,
    .featureItems {
      gap: var(--size30);
    }
  
    .oneLoginSection {
      padding-top: 140px;
      padding-bottom: 130px;
    }
  
    .notesItemImage {
      min-height: 200px;
    }
  
    .notesItem h3 {
      margin: 0 0 var(--size15);
    }
  
    .featureSection .sectionLabel {
      max-width: 820px;
    }
  
    .featureItemContent h3 {
      margin: 0 0 var(--size10);
    }
  
    .featureItemImage {
      width: 120px;
    }
  
    .brandIcon {
      width: var(--size30);
      min-width: var(--size30);
    }
  
    .brandItems {
      gap: var(--size10);
    }
  
    .featureItemContent h3,
    .featureItemContent p,
    .featureSection .pageFlexItemContent {
      max-width: 100%;
    }
  
    .faqCard h3 {
      font-size: 24px;
      margin: 0 0 25px;
    }
  
    .faqCard {
      font-size: 16px;
    }
  
  }
  
  @media (max-width: 1024px) and (max-height: 700px) {
    .banner img,
    .pageSection img,
    .pageSection video,
    .banner video {
      max-height: 90vh;
      margin: 0 auto;
    }
  
    .bannerTextStrike img,
    .textStrike img {
      margin: 0;
    }
  
    .accordionItem video {
      max-height: 43vh;
    }
  }
  
  @media (max-width: 991px) {
  
    .banner-container {
      flex-direction: column;
    }
  
    .banner-image, 
    .banner-content,
    .banner-contentInner {
      max-width: 100%;
    }
  
    .banner-container,
    .page-center {
      width: var(--width100Per);
    }
  
    .banner-container::before {
      top: auto;
      bottom: -40%;
      width: 140%;
    }
  
    .pulse-background {
      width: 800px;
      height: 800px;
    }
  
    h2,
    .liveClassesSection h2,
    .classroomSection h2 {
      font-size: 36px;
    }
  
    .banner-title {
      font-size: var(--size40);
    }
  
    .instituteCardContent h3,
    .accordionContent h3,
    .brandDetails h3,
    .liveClassesTitle h3,
    .activeAccordionItem .accordionHeader {
      font-size: 28px;
    }
  
    .pageSection.rebuildSection,
    .accordionHeader,
    .powerCard h3,
    .featureItemContent h3 {
      font-size: 22px;
    }
  
    .banner-summary,
    .banner-tag,
    .powerContent .powerContentSummary,
    .classroomTag {
      font-size: var(--container-padding);
    }
  
    .classroomTags .tag {
      font-size: var(--size15);
    }
  
    .tag.tagIcon img {
      max-width: var(--size18);
    }
  
    .tag.tagIcon {
      gap: 5px;
      font-size: var(--size15);
    }
  
    .pageFlex.pageFlexReverse .pageFlexContent {
      padding-right: var(--container-padding);
    }
  
    .pageFlex:not(.pageFlexReverse) .pageFlexContent {
      padding-left: var(--container-padding);
    }
  
    .accordionContent ul {
      gap: var(--size10);
    }
  
    .accordionContent ul li,
    .accordionContent p {
      font-size: var(--size18);
    }
  
    .accordionContent {
      padding: var(--size10) 0 var(--size17);
    }
  
    .accordionContent ul li:before {
      top: -3px;
    }
  
    .accordion,
    .featureItems {
      gap: var(--container-padding);
    }
  
    .oneLoginSection {
      padding-top: 80px;
      padding-bottom: 80px;
    }
  
    .notesItem {
      border-radius: var(--size15);
      padding: var(--size30) var(--container-padding);
      gap: var(--size15);
    }
  
    .powerCard {
      padding: var(--size30) var(--size15);
      border-radius: var(--size15);
      gap: var(--container-padding);
    }
  
    .powerCards {
      gap: var(--container-padding) var(--size15);
    }
  
    .powerCard h3 {
      margin: 0 0 var(--size10);
    }
  
    .featureSection .sectionLabel {
      max-width: 640px;
    }
  
    .featureSection .pageFlexContent {
      padding-left: 0 !important;
    }
  
    .featureItemImage {
      width: var(--size100);
    }
  
    .brandItems {
      flex-wrap: wrap;
    }
  
    .brandItem {
      width: 48%;
    }
  
    .btn {
      font-size: var(--size15);
    }
  
    .classroomCard {
      padding: var(--size40) var(--size25);
      gap: var(--size15);
    }
  
    .classroomTags.tags {
      gap: var(--container-padding) var(--size15);
    }
  
    .toolsSection, 
    .pageSection.powerSection, 
    .pageSection.liveClassesSection, 
    .pageSection.featureSection {
      padding-top: clamp(60px, 3vw, var(--size100));
      padding-bottom: clamp(60px, 3vw, var(--size100));
    }
  
    .pageSection.rebuildSection{
      padding-top: clamp(var(--size100), 8vw, 190px);
      padding-bottom: clamp(var(--size100), 8vw, 190px);
    }
  
    .pulse-background {
      width: clamp(80%, 80vw, 800px);
      height: clamp(80%, 80vw, 800px);
      top: clamp(-20px, 6vw, -50px);
    }
  
    .featureWrap {
      flex-direction: column;
      gap: var(--size30);
    }
  
    .featureSection .pageFlexContent {
      max-width: 100%;
    }
  
    .featureItem {
      max-width: 100%;
    }
  
    .faqCard h3 {
      font-size: 24px;
      margin: 0 0 15px;
    }
  }
  
  @media (max-width: 991px) and (max-height: 600px) {
  
    h2, 
    .liveClassesSection h2, 
    .classroomSection h2 {
      font-size: 34px;
    }
  }
  
  @media (max-width: 799px) and (min-width: 769px){
    .liveClassesTitle h3 {
      font-size: 24px;
    }
  
    h2, 
    .liveClassesSection h2, 
    .classroomSection h2 {
      font-size: 32px;
    }
  
    .notesContent {
      grid-template-columns: repeat(4, 1fr);
      justify-content: center;
    }
  
    .notesItemlarge {
        grid-column: span 2;
    }
  
    .notesContent .notesItem.notesItem5 {
        grid-column: span 4;
        height: auto;
        align-self: start;
    }
  
    .accordionContent ul li,
    .accordionContent p {
      font-size: var(--size18);
    }
  
    .accordionContent ul li:before {
      top: -3px;
    }
  }
  
  @media (min-width: 769px) {
    .showMobile {
      display: none !important;
    }
  }
  
  @media (max-width: 768px) {
    .pulse-background {
      width: var(--size650);
      height: var(--size650);
    }
  
    .banner-container {
      flex-direction: column;
      gap: var(--size50);
    }
  
    .banner-container::before {
      top: auto;
      bottom: -40%;
      width: 140%,
    }
  
    .banner-content,
    .banner-contentInner,
    .banner-image,
    .pageFlexItem,
    .pageFlexItemContent,
    .notesItemContentIn,
    .notesItemContentIn p,
    .powerContent,
    .powerCards,
    .brandCol.brandCta {
      max-width: 100%;
      width: 100%;
    }
  
    .banner-title {
      font-size: var(--size30);
      margin: 0 0 var(--size15);
    }
  
    .banner-title>span{
      display: inline;
    }
  
    .banner-summary {
      font-size: var(--size16);
      margin: 0 0 var(--size30);
    }
  
    .banner-tag {
      font-size: var(--size17);
      margin: 0 0 var(--size30);
    }
  
    .tag.tagIcon {
      font-size: 14px;
    }
  
    .banner {
      padding-top: 21px;
      padding-bottom: var(--size40);
    }
  
    .toolsSection .pageFlex,
    .powerItems {
      flex-direction: column;
    }
  
    .pageFlexItem,
    .pageFlex.pageFlexReverse .pageFlexContent {
      padding-left: var(--container-padding);
      padding-right: var(--container-padding);
    }
  
    .toolsSection {
      padding-top: var(--size50);
      padding-bottom: 0;
    }
  
    .liveToolSection .sticky {
      top: 60px;
    }
  
    .pageFlexItemContent {
      text-align: center;
    }
  
    h2 {
      margin: 0 0 var(--size10);
    }
  
    .toolsSection,
    .instituteCardLabel,
    .workSection,
    .accordionContent ul li,
    .accordionContent p {
      font-size: var(--size16);
    }
  
    .accordionContent ul li:before {
      top: -4px;
      width: var(--size16);
      height: var(--size16);
    }
  
    .liveToolSection .sticky {
      height: auto;
    }
  
    .pageSection.liveToolSection {
      padding-top: 60px;
      padding-bottom: 44px;
    }
  
    .alwaysLiveTitle {
      padding-top: 0;
      padding-bottom: 40px;
    }
  
    .rebuildSection h2 {
      font-weight: 400;
    }
  
    .pageSection.rebuildSection {
      padding-top: 12px;
      padding-bottom: 80px;
      font-size: 19px;
      font-weight: 400;
    }
  
    .stackLabel img {
      display: none;
    }
  
    .rebuildSection .tags {
      flex-direction: column;
      align-items: flex-start;
    }
  
    .pageSection.workSection {
      padding-top: var(--size50);
      padding-bottom: 78px;
    }
  
    .pageFlex {
      flex-direction: column;
      gap: var(--size30);
    }
  
    .hiddenMobile {
      display: none !important;
    }
  
    .workSection .text-summary {
      margin: 0;
    }
  
    .mobileBtnWrap {
      padding-top: var(--size30);
      text-align: center;
    }
  
    .liveToolSection .pageFlexItemContent {
      text-align: left;
    }
  
    .accordionHeader {
      font-size: 24px;
      margin: 0;
    }
  
    .accordionContent {
      padding: var(--size10) 0 var(--size17);
    }
  
    .accordionContent h3 {
      font-size: 32px;
      margin: 0 0 var(--size10);
    }
  
    .accordionContent ul {
      gap: var(--size10);
    }
  
    .accordionContent ul li {
      padding-left: 22px;
    }
  
    .oneLoginSection {
      padding-top: 44px;
      padding-bottom: 82px;
    }
  
    .oneLoginSection h2 {
      margin: 0 0 45px;
    }
  
    .btns {
      gap: var(--container-padding);
    }
  
    .notesSection {
      padding-top: var(--size50);
      padding-bottom: var(--size50);
    }
  
    .notesItem {
      grid-column: span 6;
    }
  
    .notesSection h2 {
      margin: 0;
    }
  
    .notesSection .sectionHeader {
      font-size: var(--size16);
      margin-bottom: var(--size50);
    }
  
    .notesItem {
      padding: var(--size30);
      border-radius: 19px;
    }
  
    .notesItem h3 {
      font-size: 22px;
      font-weight: 400;
    }
  
    .pageSection.powerSection {
      padding-top: var(--size50);
      padding-bottom: var(--size50);
    }
  
    .powerContent .powerContentSummary {
      margin: 0 0 var(--size30);
    }
  
    .powerCards {
      gap: var(--size30) var(--size15);
      display: flex;
      flex-wrap: wrap;
    }
  
    .powerCard {
      width: 342px;
      max-width: calc(50% - 8px);
      padding: var(--size16);
      border-radius: var(--size16);
      gap: 24px;
    }
  
    .powerCard h3 {
      font-size: 24px;
      margin: 0 0 var(--size16);
    }
  
    .powerSection .mobileBtnWrap {
      padding-top: var(--size40);
      text-align: left;
      width: 100%;
    }
  
    .pageSection.instituteSection {
      padding-top: var(--size50);
      padding-bottom: var(--size50);
    }
  
    .instituteSection .sectionLabel {
      margin: 0;
    }
  
    .instituteSection h2 {
      margin: 0;
    }
  
    .instituteSection .sectionHeader {
      font-size: var(--size16);
    }
  
    .instituteCard {
      padding: 48px var(--size18);
      flex-direction: column;
      gap: 27px;
    }
  
    .instituteCardCol.instituteCardContent,
    .instituteCardCol.instituteCardImage {
      max-width: 100%;
    }
  
    .instituteCardLabel {
      margin: 0 0 14px;
    }
  
    .instituteCardContent h3 {
      font-size: 24px;
      margin: 0 0 27px;
    }
  
    .instituteCardContent ul {
      gap: var(--container-padding);
      font-size: var(--size16);
    }
  
    .instituteCardContent ul li:before {
      top: 58%;
    }
  
    .pageSection.featureSection {
      padding-top: var(--size50);
      padding-bottom: var(--container-padding);
    }
  
    .featureWrap {
      padding-bottom: var(--size50);
      gap: 28px;
    }
  
    .featureSection .sectionLabel {
      margin: 0 0 var(--size50);
    }
  
    .featureItem {
      text-align: left;
    }
  
    .featureItems {
      gap: var(--size30);
    }
  
    .featureItemContent h3 {
      font-size: 19px;
    }
  
    .brandWrap {
      padding-top: 0;
      flex-direction: column-reverse;
      gap: var(--size40);
      padding-bottom: 90px;
      border: none;
    }
  
    .brandDetails h3 {
      font-size: 32px;
      margin-bottom: 28px;
    }
  
    .brandItems {
      gap: var(--size16);
    }
  
    .brandItem {
      gap: var(--size16);
      width: 222px;
    }
  
    .brandIcon {
      width: 44px;
      min-width: 44px;
    }
  
    .pageSection.liveClassesSection {
      padding-top: var(--size100);
      padding-bottom: 87px;
    }
  
    .liveClassesSection .sectionLabel {
      margin: 0;
    }
  
    .liveClassesSection .sectionHeader {
      margin: 0 0 var(--size40);
    }
  
    .liveClassesFrame {
      flex-direction: column-reverse;
      gap: var(--size30);
    }
  
    .liveClassesTitle {
      width: 100%;
      text-align: center;
    }
  
    .liveClassesTitle h3 {
      font-size: 24px;
      font-weight: 400;
    }
  
    .classroomSection {
      padding-top: var(--size50);
      padding-bottom: var(--size50);
    }
  
    .classroomCard {
      padding: 60px 19px;
      border-radius: var(--size16);
      flex-direction: column;
      gap: var(--size50);
    }
  
    .classroomSection h2 {
      margin: 0 0 var(--size15);
    }
  
    .classroomDescription {
      margin: 0 0 var(--size15);
    }
  
    .classroomTag {
      padding-top: var(--size30);
      font-size: var(--size18);
      font-style: italic;
    }
  
    .toolsSection .pageFlexImg.pageFlexItem {
      padding-left: 0;
      padding-right: 0;
    }
  
    .liveClassesTitleWrap,
    .liveClassImage {
      height: auto;
      padding-top: 0;
      padding-bottom: 0;
    }
  
    .eightysvh {
      height: auto;
    }
  
    .liveClassImage {
      position: static;
      margin: 0 auto;
      max-width: 100%;
    }
  
    .liveClassesTitleWrap.active {
      position: static;
    }
  
    .liveClassesTitleWrap {
      display: block;
    }
  
    .liveClassesTitle {
      display: flex;
      justify-content: center;
      gap: var(--size16);
      align-items: center;
    }
  
    .pageFlex:not(.pageFlexReverse) .pageFlexContent {
      padding-right: var(--container-padding);
    }
  
    .featureSection .pageFlex .pageFlexContent {
      padding-right: 0;
    }
  
    .sliderWrap {
      max-width: 100%;
      padding: 0 60px !important;
      z-index: 3 !important;
    }
  
    .sliderWrap::before,
    .sliderWrap::after {
      content: "";
      position: absolute;
      width: 60px;
      height: 100%;
      top: 0;
      z-index: 2;
      background: #fff;
      left: 0;
    }
  
    .sliderWrap .slider {
      flex: 1;
      width: auto;
      max-width: calc(100% - 112px);
      align-items: center;
      z-index: 1;
    }
  
    .sliderBtn {
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: none;
      width: var(--size40);
      height: var(--size40);
      min-width: var(--size40);
      min-height: var(--size40);
      background: var(--blue);
      padding: 0;
    }
  
    .sliderBtn.prev {
      transform: rotate(180deg);
    }
  
    .liveClassesTitle h3 {
      line-height: 1.4;
    }
  
    .sliderBtn.disabled {
      opacity: 0.6;
      cursor: no-drop;
    }
  
    .notesContent {
      display: flex;
      flex-direction: column;
    }
  
    .toolsSection h2,
    .workSection h2,
    .notesItemlarge .notesItemContentIn {
        max-width: 100%;
    }
  
    .rebuildSection .container {
        width: 100%;
    }
  
    .notesSection .textBlue {
        display: block;
    }
  
    .notesItemImage {
      min-height: 100px;
    }
  
    .faqRow {
      flex-direction: column;
    }
  
    .faqSectionTitle .faqTitleSticky {
      position: static;
      margin-bottom: 20px;
    }
  
    .faqSectionTitle {
      width: 100%;
      padding: 0;
    }
  }
  
  @media (max-width: 479px) {
    .powerCard {
      max-width: 100%;
    }
  
    .accordionContent ul li,
    .accordionContent p {
      font-size: var(--size15);
    }
  
    .accordionContent ul li:before {
      top: -5px;
    }
  
    .powerCard {
      gap: 16px;
    }
  
    .powerCard h3 {
      font-size: 22px;
      line-height: 1.3;
      margin: 0 0 10px;
    }
  
    .classroomTags .tag {
      font-size: 12px;
      padding: 6px;
      box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.349);
    }
  
    .pageSection.rebuildSection {
      padding-left: 15px;
      padding-right: 15px;
    }
  
    .tag.tagIcon {
      font-size: 11px;
    }
  
    .rebuildSection .tags {
      gap: var(--size20);
    }
  
    .banner-title {
      font-size: 34px;
    }
  }
  
  @media (max-width: 399px) {
  
    h2, 
    .liveClassesSection h2, 
    .classroomSection h2 {
      font-size: 34px;
    }
  
    .liveClassesTitle h3 {
      font-size: 22px;
    }
  
    .classroomTags.tags {
      gap: 10px 8px;
    }
  
    .accordionHeader {
      font-size: 22px;
      line-height: 1.4;
    }
  
    .activeAccordionItem .accordionHeader {
      font-size: 25px;
    }
  
    .accordion {
      gap: 15px;
    }
  }