@media only screen and (min-width: 320px) and (max-width: 1224px) {
  :root {
    --fz16: clamp((16px/1.1), 2.5vw, 16px);
    --fz17: clamp((17px/1.15), 2.5vw, 17px);
    --fz18: clamp((18px/1.2), 2.5vw, 18px);
    --fz20: clamp((20px/1.2), 2.5vw, 20px);
    --fz22: clamp((22px/1.25), 5vw, 22px);
    --fz25: clamp((25px/1.25), 5vw, 25px);
    --fz35: clamp((35px/1.35), 5vw, 35px);
    --fz45: clamp((45px/1.7), 5vw, 45px);
    --fz55: clamp((55px/1.85), 5vw, 55px);
  }
  .TopHeader{
    height: 50px;
  } 
  .ResponsiveLogo {
    height: 133px;
  }
  h1 {
    font-size: var(--fz55);
  }

  h3 {
    font-size: var(--fz45);
  }

  h4 {
    font-size: var(--fz35);
  }

  h5 {
    font-size: var(--fz35);
  }

  h6 {
    font-size: var(--fz20);
  }

  h2 {
    font-size: clamp(25px, 5vw, 40px);
    line-height: 1;
  }

  .MainWrapper,
.Footer,
.TopMainWrapper,
.IdxContainWrapper,
.InnerContainWrapper {
    width: 94% !important;
    margin-left: auto;
    margin-right: auto;
  }

  img,
.EditorText img {
    max-width: 100%;
  }

  /*-- responsive menu css start */
  .HomeTop,
.NavLeft,
.NavRight {
    display: none !important;
  }

  .TopHeader {
    position: relative;
    z-index: 999;
  }

  .ResponsiveLogo,
.TopArrow {
    display: block !important;
  }

  .menu {
    clear: both;
    min-width: inherit;
    float: none;
    display: block;
    width: 100%; 
    text-align: left;
  } 

  .ResponsiveLogo {
    line-height: 0;
    padding: 10px 0;
  }
  .ResponsiveLogo a {
    display: inline-block;
    line-height: 0;
  }

  .ResImg {
    display: block !important;
    line-height: 0 !important;
  }

  .IdxHeaderBg .slides li:before {
    display: none;
  }

  .IdxHeaderBg .swiper-slide {
    background: none !important;
    min-height: initial !important;
  }
  .IdxHeaderBg .swiper-slide:only-child .Header {
    padding: 20px 0;
  }

  .Header {
    background-color: var(--sc-1);
    position: static;
    margin: 0;
    text-align: center;
    padding: 20px 0 40px;
  }
  .Header .short-desc {
    font-size: clamp(20px, 5vw, 24px);
  }

  .InnerHeaderBg {
    background: none !important;
    min-height: initial !important;
    height: initial !important;
  }
  .InnerHeaderBg::before {
    display: none;
  }
  .InnerHeaderBg .text-overlay {
    background-color: var(--sc-2);
    position: static;
    margin: 0;
    text-align: center;
    padding: 5px 0;
  }
  .InnerHeaderBg .text-overlay .MainWrapper {
    padding: 0;
  }

  .NewLandWrapper {
    text-align: center;
  }

  .NewLandWrapper .LeftFloat,
.NewLandWrapper .RightFloat,
.NewLandWrapper .RightBlock,
.NewLandWrapper .LeftBlock {
    display: block;
    float: none;
    width: 100%;
    padding: 0;
    border: none;
  }

  .NewLandWrapper .LeftFloat {
    margin: 0 auto 10px;
  }

  .NewLandWrapper .RightBlock {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #000;
  }

  .myIdxSwiperSlider .swiper-pagination {
    bottom: 9px;
  }

  .contact-container .form-body::before, .contact-container .form-body::after, .home-about-container::before,
.cta-container::before,
.facilities-container::after,
.FooterWrap::before,
.InnerHeaderBg + .bg-1::before {
    display: none !important;
  }

  .shape-wrap .shape-overlay {
    display: none;
  }

  .InnerHeaderBg .Header {
    padding: 15px 0;
  }

  .home-about-container {
    text-align: center;
  }
  .home-about-container .InnerContainWrapper {
    padding: 40px 0;
  }
  .home-about-container .left-wrap {
    padding: 0;
  }
  .home-about-container .RightFloat {
    float: none;
    margin: 0 auto 30px;
  }

  .cta-container {
    position: static;
  }
  .cta-container .InnerContainWrapper {
    padding: 40px 0;
  }
  .cta-container .flex {
    text-align: center;
    flex-direction: column;
    gap: 10px;
  }

  .facilities-container .InnerContainWrapper {
    padding: 40px 0;
  }
  .facilities-container .new-flex-container {
    --wd: 310px;
    gap: 10px;
  }

  .class-about-container .sepline, .about-container .sepline, .testimonial-container .heading .sepline, .home-class-container .sepline {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .home-class-container {
    text-align: center;
  }
  .home-class-container .LeftFloat {
    float: none;
    margin: 0 auto 50px;
  }
  .home-class-container .right-wrap {
    padding: 0;
  }
  .testimonial-container .InnerContainWrapper {
    padding: 40px 0;
  }
  .testimonial-container .heading {
    padding: 0;
    text-align: center;
    margin: 0 auto 40px;
  }
  .testimonial-container .testimonial-custom-swiper {
    margin: 0;
  }
  .testimonial-container .testimonial-custom-swiper .desc {
    max-width: 475px;
    margin: 0 auto !important;
    padding: 60px 20px;
  }
  .testimonial-container .NoImageWrap .img-wrap{
    min-width: 475px;
    max-width: 475px;
  }
  .testimonial-container .img-wrap .title {
    position: static;
  }
  .testimonial-container .flex {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    text-align: center;
  }
  .testimonial-container .swiper-pagination {
    bottom: 25px;
  }

  .TopArrow {
    line-height: 0;
  }

  .FooterWrap {
    text-align: center;
  }
  .FooterWrap .InnerContainWrapper {
    padding: 40px 0;
  }
  .FooterWrap .flex.second {
    margin-top: 20px;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 25px;
  }
  .FooterWrap .footer-box {
    justify-content: center;
  }

  .copy br {
    display: block;
  }

  .footer-flex-container .footer-box {
    --wd: 320px;
    flex: 0 0 var(--wd);
    max-width: var(--wd);
    padding: 30px 15px;
  }
  .footer-flex-container .Col {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .footer-flex-container .Col .icon {
    min-width: 47px;
  }

  .bg-1::before, .bg-1::after,
.white-bg-1::before,
.white-bg-1::after {
    display: none !important;
  }

  .about-intro-container .desc br {
    display: none;
  }
  .about-intro-container .InnerContainWrapper {
    padding: 40px 0 !important;
  }

  .about-container {
    text-align: center;
  }
  .about-container .RightFloat {
    float: none;
    width: unset;
    margin: 0 auto 10px;
  }

  .class-about-container {
    text-align: center;
  }
  .class-about-container .InnerContainWrapper {
    padding: 40px 0 !important;
  }
  .class-about-container .age-box {
    display: inline-block;
  }
  .class-about-container .RightFloat {
    float: none;
    width: unset;
    margin: 0 auto 10px;
  }

  .team-container .InnerContainWrapper {
    padding: 40px 0;
  }
  .team-container .new-flex-container {
    --wd: 233px;
    gap: 40px;
    justify-content: center;
    padding: 0;
  }

  .about-teacher-container .InnerContainWrapper {
    padding: 40px 0;
  }
  .about-teacher-container .flex {
    margin-top: 30px;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  .about-teacher-container .desc {
    margin: 0;
    padding: 20px;
  }

  .resources-container .InnerContainWrapper {
    padding: 30px 0 40px !important;
  }
  .resources-container .flex {
    padding: 10px;
  }
  .resources-container .new-flex-container {
    justify-content: center;
    gap: 10px;
    --wd: clamp(300px, 49%, 365px);
  }

  .gallery-container .InnerContainWrapper {
    padding: 40px 0;
  }
  .gallery-container .new-flex-container {
    --wd: clamp(300px, 49%, 368px);
  }

  .classes-container .custom-class-wrap {
    padding: 0 30px;
  }
  .classes-container .custom-class-wrap .swiper-button-prev, .classes-container .custom-class-wrap .swiper-button-next {
    --sp: 0px;
  }

  .contact-container .InnerContainWrapper {
    padding: 40px 0 !important;
  }
  .contact-container .form-body {
    padding: 40px 20px;
  }
  .team-container .img {
    overflow: unset;
    border: none;
    margin-bottom: 5px;
    width: unset;
    height: unset;
  }
  .team-container .img img {
    width: 233px;
    height: 233px;
    border: 10px solid #e6deab;
    border-radius: 50%;
    line-height: 0;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
  }
  .team-container .img .icon {
    position: static;
    background: transparent;
    align-items: flex-end;
    opacity: 1;
    margin: 15px auto 10px;
  }
  .team-container .img .icon i {
    color: white;
    background-color: var(--red);
  }

  .class-about-container .RightFloat .TAR {
    margin: 0 0 40px;
  }
  .box.staff-box {
    width: 94%;
    margin-left: -47%;
  }
  .copy span, .DevelopedBy span {
    display: block;
  }
   
}
@media only screen and (min-width: 481px) and (max-width: 768px) {
  .classes-container .custom-class-wrap {
    max-width: 645px;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 320px) and (max-width: 767px) {
  .box.staff-box .biobox-container .Img {
    float: none;
    margin: 0 auto 20px !important;
    text-align: center;
  }
  .box.staff-box .biobox-container .flex{
    flex-wrap: wrap; 
    justify-content: center;
  }
  .box.staff-box .biobox-container .text {
    width: 100%;
    text-align: center;
  }
  .box.staff-box .biobox-container .Links ul {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap; 
  }
  .biobox-container.OverlayWrapper .email a {
    justify-content: center;
  }
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
  .IdxHeaderBg { 
    min-height: 129px;
  } 
  .home-about-container  .heading .heading{
    min-height: 138px;
  }
  .home-about-container .img{
    min-height: 238px; 
  }
  .FooterWrap .InnerContainWrapper {
    padding: 0 0 35px;
  }

  .footer-flex-container .footer-box {
    --wd: 100vw;
  }

  .recaptcha {
    transform-origin: left;
    transform: scale(0.8);
  }

  .Col1,
.Col2,
.Col3,
.Col4 {
    width: 100%;
  }
  .Col1.TAR,
.Col2.TAR,
.Col3.TAR,
.Col4.TAR {
    text-align: center;
  }

  .contact-container .form-body {
    border-width: 4px;
    padding: 20px 10px;
  }

  .classes-container .custom-class-wrap {
    max-width: 337px;
    margin: 0 auto;
    padding: 0 25px;
  }
  .classes-container .custom-class-wrap .swiper-button-prev, .classes-container .custom-class-wrap .swiper-button-next {
    --sp: -5px;
  }
  .classes-container .custom-class-wrap .swiper-slide {
    max-width: 285px;
    width: 285px;
    box-sizing: content-box;
  }

  .contact-container .form-body .short-desc {
    font-size: 16px;
  }
  .contact-container .form-body .short-desc br {
    display: none;
  }
  .testimonial-container .img-wrap,
  .testimonial-container .NoImageWrap .img-wrap{
    min-width:100%;
    max-width: 100%;
    width: 100%;
  }
  .testimonial-container .NoImageWrap .img-wrap .title {
    bottom: 0;
    position: relative;
}
.box.staff-box {
  width: 94%;
  margin-left: -47%;
}
.box.staff-box .biobox-container.OverlayWrapper {
  padding: 30px 10px;
}
.box.staff-box .biobox-container .flex{
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}
.box.staff-box .biobox-container .text {
  width: 100%;
  text-align: center;
}
.box.staff-box .biobox-container .Links ul { 
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.biobox-container h4.Title.FZ-25 {
  font-size: 22px;
}
}
@media only screen and (min-width: 320px) and (max-width: 375px) {
  .classes-container .custom-class-wrap {
    max-width: 297px;
  }
  .classes-container .custom-class-wrap .swiper-slide {
    max-width: 245px;
    width: 245px;
  }
}