@media screen and (max-width: 1500px) {
  #about {
    justify-content: center;
  }
  .about-txt-container {
    text-align: center;
    margin-left: 0;
  }
  #logo {
    height: 33rem;
  }
}
@media screen and (max-width: 1470px) {
  
  .logo {
    padding: 0 2rem;
  }
  #home {
    height: 120vh;
    justify-content: center;
    background-position: center 70vh;
  }
  .home-txt {
    margin-left: 0;
    text-align: center;
  }
  #logo {
    height: 30rem;
  }
  #kelas {
    padding-top: 2rem;
    column-gap: 4rem;
  }
  .kelas-card-container {
    gap: 4rem;
  }
  #testimoni {
    padding-top: 8rem;
  }
  .testimoni-card-container {
    gap: 4rem;
  }
  .testimoni-chat {
    justify-content: flex-start;
    row-gap: 2rem;
  }
  .about-txt-container {
    /* padding-bottom: 3rem; */
  }
}

@media screen and (max-width: 1200px) {
}

@media screen and (max-width: 1024px) {
  #home {
    background-position: bottom 55vh;
  }
  .about-txt-container {
    flex-wrap: wrap;
    justify-content: center;
    /* text-align: center; */
    padding-bottom: 5%;
  }
  .about-txt-container .text {
    text-align: center;
    padding-left: 0;
  }
  .about-txt-container .title2 {
    text-align: center;
  }
  #kelas {
    justify-content: center;
  }
  .kelas-img-premium30 {
    width: 70%;
    height: 25rem;
  }
  .kelas-img-basic {
    width: 70%;
    height: 25rem;
  }
  .kelas-img-advance {
    width: 70%;
    height: 25rem;
  }
}

@media screen and (max-width: 810px) {
  #mobile-nav {
    display: flex;
  }
  #desktop-nav {
    display: none;
  }
  #testimoni {
    padding: 8rem 2rem 0;
  }
  #kelas {
    padding: 2rem 2rem 0;
  }
  .swiper {
    width: 70%;
  }
  .paket img{
    height: 30rem;
    width: 40rem;
  }
}

@media screen and (max-width: 768px) {
  .home-txt {
    margin-top: 30%;
  }
  .home-txt button {
    font-size: 23px;
  }
  .text {
    font-size: 18px;
  }
  .title {
    font-size: 60px;
  }
  .title2 {
    font-size: 45px;
  }

  .title3 {
    font-size: 40px;
  }
  #question {
    padding: 2rem 2rem;
  }
  #logo {
    height: 28rem;
  }
  /* #about {
    padding: 0 1.7rem;
  } */
  .contact-button {
    font-size: 25px;
  }
  .basic-button button {
    font-size: 25px;
  }
}
@media screen and (max-width: 700px) {
  #home {
    background-position: bottom 55vh;
  }
  .faq-container{
    width: 500px;
  }
}
@media screen and (max-width: 600px) {
  .paket img{
    height: 20rem;
    width: 30rem;
  }

  .faq-container{
    width: 400px;
  }
  #program .swiper-slide{
    width: 350px;
    height: 350px;
  }
  #program .swiper{
    padding: 0;
  }
  #testimonial .swiper-slide{
    width: 350px;
    height: 350px;
  }
  #testimonial .swiper{
    padding: 0;
  }
  .swiper-pagination{
    /* display: none; */
  }
  .swiper-wrapper{
    align-items: center;
  }

  #home {
    background-position: bottom 55vh;
  }
  .basic-card1 {
    width: 25rem;
    height: 25rem;
  }
  .basic-card2 {
    width: 25rem;
    height: 25rem;
  }
  .basic-card3 {
    width: 25rem;
    height: 25rem;
  }
  .basic-card4 {
    width: 25rem;
    height: 25rem;
  }
  .basic-card5 {
    width: 25rem;
    height: 25rem;
  }
  .basic-card6 {
    width: 25rem;
    height: 25rem;
  }
  .basic-card7 {
    width: 25rem;
    height: 25rem;
  }
  .basic-card8 {
    width: 25rem;
    height: 25rem;
  }
  .basic-card9 {
    width: 25rem;
    height: 25rem;
  }
  .basic-card10 {
    width: 25rem;
    height: 25rem;
  }
  .advance-card1 {
    width: 25rem;
    height: 25rem;
  }
  .advance-card2 {
    width: 25rem;
    height: 25rem;
  }
  .advance-card3 {
    width: 25rem;
    height: 25rem;
  }
  .advance-card4 {
    width: 25rem;
    height: 25rem;
  }
  .advance-card5 {
    width: 25rem;
    height: 25rem;
  }
  .advance-card6 {
    width: 25rem;
    height: 25rem;
  }
  .advance-card7 {
    width: 25rem;
    height: 25rem;
  }
  .advance-card8 {
    width: 25rem;
    height: 25rem;
  }
  .advance-card9 {
    width: 25rem;
    height: 25rem;
  }
  .advance-card10 {
    width: 25rem;
    height: 25rem;
  }
  .testimoni-card1 {
    width: 25rem;
    height: 25rem;
  }
  .testimoni-card2 {
    width: 25rem;
    height: 25rem;
  }
  .testimoni-card3 {
    width: 25rem;
    height: 25rem;
  }
  .testimoni-card4 {
    width: 25rem;
    height: 25rem;
  }
  .testimoni-card5 {
    width: 25rem;
    height: 25rem;
  }
  .testimoni-card6 {
    width: 25rem;
    height: 25rem;
  }
  .testimoni-card7 {
    width: 25rem;
    height: 25rem;
  }
  .testimoni-card8 {
    width: 25rem;
    height: 25rem;
  }
  .testimoni-card9 {
    width: 25rem;
    height: 25rem;
  }
  .testimoni-card10 {
    width: 25rem;
    height: 25rem;
  }
}
@media screen and (max-width: 540px) {
  #home {
    padding-bottom: 5rem;
    background-position: bottom;
  }
  .card-txt h2 {
    font-size: 20px;
  }
  #testimoni {
    padding: 5rem 1rem 0;
  }
  #logo {
    height: 25rem;
  }
}

@media screen and (max-width: 480px) {
  .paket img{
    height: 15rem;
    width: 24rem;
  }
  .faq-container{
    width: 330px;
  }
  #program .swiper-slide{
    height: 280px;
    width: 280px;
  }
  #testimonial .swiper-slide{
    height: 280px;
    width: 280px;
  }

  #home {
    padding-bottom: 5rem;
  }
  .home-txt .text {
    padding: 0 0.4rem;
  }
  .basic-card1 {
    width: 20rem;
    height: 20rem;
  }
  .basic-card2 {
    width: 20rem;
    height: 20rem;
  }
  .basic-card3 {
    width: 20rem;
    height: 20rem;
  }
  .basic-card4 {
    width: 20rem;
    height: 20rem;
  }
  .basic-card5 {
    width: 20rem;
    height: 20rem;
  }
  .basic-card6 {
    width: 20rem;
    height: 20rem;
  }
  .basic-card7 {
    width: 20rem;
    height: 20rem;
  }
  .basic-card8 {
    width: 20rem;
    height: 20rem;
  }
  .basic-card9 {
    width: 20rem;
    height: 20rem;
  }
  .basic-card10 {
    width: 20rem;
    height: 20rem;
  }
  .advance-card1 {
    width: 20rem;
    height: 20rem;
  }
  .advance-card2 {
    width: 20rem;
    height: 20rem;
  }
  .advance-card3 {
    width: 20rem;
    height: 20rem;
  }
  .advance-card4 {
    width: 20rem;
    height: 20rem;
  }
  .advance-card5 {
    width: 20rem;
    height: 20rem;
  }
  .advance-card6 {
    width: 20rem;
    height: 20rem;
  }
  .advance-card7 {
    width: 20rem;
    height: 20rem;
  }
  .advance-card8 {
    width: 20rem;
    height: 20rem;
  }
  .advance-card9 {
    width: 20rem;
    height: 20rem;
  }
  .advance-card10 {
    width: 20rem;
    height: 20rem;
  }
  .testimoni-card1 {
    width: 20rem;
    height: 20rem;
  }
  .testimoni-card2 {
    width: 20rem;
    height: 20rem;
  }
  .testimoni-card3 {
    width: 20rem;
    height: 20rem;
  }
  .testimoni-card4 {
    width: 20rem;
    height: 20rem;
  }
  .testimoni-card5 {
    width: 20rem;
    height: 20rem;
  }
  .testimoni-card6 {
    width: 20rem;
    height: 20rem;
  }
  .testimoni-card7 {
    width: 20rem;
    height: 20rem;
  }
  .testimoni-card8 {
    width: 20rem;
    height: 20rem;
  }
  .testimoni-card9 {
    width: 20rem;
    height: 20rem;
  }
  .testimoni-card10 {
    width: 20rem;
    height: 20rem;
  }
  .chat1 {
    height: 8rem;
  }
  .chat2 {
    height: 14rem;
  }
  .chat3 {
    height: 14rem;
  }
  .chat4 {
    height: 18rem;
  }
  #kelas {
    padding: 2rem 1rem;
  }
  #question {
    padding: 2rem 1rem;
  }
  /* #about {
    padding: 0 1rem;
  } */
  #logo {
    height: 23rem;
  }
  .coach-card {
    width: 320px;
    height: 408px;
  }
  .card-txt h2 {
    font-size: 18px;
  }
  .contact-button {
    font-size: 20px;
    margin: 0 0.7rem;
  }
  .basic-button button {
    font-size: 20px;
  }
  #contact .title2 {
    padding: 0 1rem;
  }
}

@media screen and (max-width: 375px) {
  .testimoni-card1 {
    width: 17rem;
    height: 17rem;
  }
  .testimoni-card2 {
    width: 17rem;
    height: 17rem;
  }
  .testimoni-card3 {
    width: 17rem;
    height: 17rem;
  }
  .testimoni-card4 {
    width: 17rem;
    height: 17rem;
  }
  .testimoni-card5 {
    width: 17rem;
    height: 17rem;
  }
  .testimoni-card6 {
    width: 17rem;
    height: 17rem;
  }
  .testimoni-card7 {
    width: 17rem;
    height: 17rem;
  }
  .testimoni-card8 {
    width: 17rem;
    height: 17rem;
  }
  .testimoni-card9 {
    width: 17rem;
    height: 17rem;
  }
  .testimoni-card10 {
    width: 17rem;
    height: 17rem;
  }
  .basic-card1 {
    width: 17rem;
    height: 17rem;
  }
  .basic-card2 {
    width: 17rem;
    height: 17rem;
  }
  .basic-card3 {
    width: 17rem;
    height: 17rem;
  }
  .basic-card4 {
    width: 17rem;
    height: 17rem;
  }
  .basic-card5 {
    width: 17rem;
    height: 17rem;
  }
  .basic-card6 {
    width: 17rem;
    height: 17rem;
  }
  .basic-card7 {
    width: 17rem;
    height: 17rem;
  }
  .basic-card8 {
    width: 17rem;
    height: 17rem;
  }
  .basic-card9 {
    width: 17rem;
    height: 17rem;
  }
  .basic-card10 {
    width: 17rem;
    height: 17rem;
  }
  .advance-card1 {
    width: 17rem;
    height: 17rem;
  }
  .advance-card2 {
    width: 17rem;
    height: 17rem;
  }
  .advance-card3 {
    width: 17rem;
    height: 17rem;
  }
  .advance-card4 {
    width: 17rem;
    height: 17rem;
  }
  .advance-card5 {
    width: 17rem;
    height: 17rem;
  }
  .advance-card6 {
    width: 17rem;
    height: 17rem;
  }
  .advance-card7 {
    width: 17rem;
    height: 17rem;
  }
  .advance-card8 {
    width: 17rem;
    height: 17rem;
  }
  .advance-card9 {
    width: 17rem;
    height: 17rem;
  }
  .advance-card10 {
    width: 17rem;
    height: 17rem;
  }
  .contact-button {
    padding: 0.8rem 1rem;
    font-size: 15px;
    margin: 0 1rem;
  }
  .chat1 {
    height: 5rem;
  }
  .chat2 {
    height: 10rem;
  }
  .chat3 {
    height: 10rem;
  }
  .chat4 {
    height: 14rem;
  }
  #logo {
    height: 18rem;
  }
  .title {
    font-size: 50px;
  }
  .title2 {
    font-size: 35px;
  }
  .title3 {
    font-size: 30px;
  }
  .kelas-card h1 {
    font-size: 30px;
  }
  .kelas-card h2 {
    font-size: 30px;
  }
  .card-list {
    font-size: 15px;
    padding: 2rem 2rem;
  }
  .card-button button {
    margin: 0 1rem;
    padding: 0 1rem;
    width: fit-content;
    font-size: 20px;
  }
}

@media screen and (max-width: 315px) {
  .testimoni-card1 {
    width: 13rem;
    height: 13rem;
  }
  .testimoni-card2 {
    width: 13rem;
    height: 13rem;
  }
  .testimoni-card3 {
    width: 13rem;
    height: 13rem;
  }
  .testimoni-card4 {
    width: 13rem;
    height: 13rem;
  }
  .testimoni-card5 {
    width: 13rem;
    height: 13rem;
  }
  .testimoni-card6 {
    width: 13rem;
    height: 13rem;
  }
  .testimoni-card7 {
    width: 13rem;
    height: 13rem;
  }
  .testimoni-card8 {
    width: 13rem;
    height: 13rem;
  }
  .testimoni-card9 {
    width: 13rem;
    height: 13rem;
  }
  .testimoni-card10 {
    width: 13rem;
    height: 13rem;
  }
  .basic-card1 {
    width: 13rem;
    height: 13rem;
  }
  .basic-card2 {
    width: 13rem;
    height: 13rem;
  }
  .basic-card3 {
    width: 13rem;
    height: 13rem;
  }
  .basic-card4 {
    width: 13rem;
    height: 13rem;
  }
  .basic-card5 {
    width: 13rem;
    height: 13rem;
  }
  .basic-card6 {
    width: 13rem;
    height: 13rem;
  }
  .basic-card7 {
    width: 13rem;
    height: 13rem;
  }
  .basic-card8 {
    width: 13rem;
    height: 13rem;
  }
  .basic-card9 {
    width: 13rem;
    height: 13rem;
  }
  .basic-card10 {
    width: 13rem;
    height: 13rem;
  }
  .advance-card1 {
    width: 13rem;
    height: 13rem;
  }
  .advance-card2 {
    width: 13rem;
    height: 13rem;
  }
  .advance-card3 {
    width: 13rem;
    height: 13rem;
  }
  .advance-card4 {
    width: 13rem;
    height: 13rem;
  }
  .advance-card5 {
    width: 13rem;
    height: 13rem;
  }
  .advance-card6 {
    width: 13rem;
    height: 13rem;
  }
  .advance-card7 {
    width: 13rem;
    height: 13rem;
  }
  .advance-card8 {
    width: 13rem;
    height: 13rem;
  }
  .advance-card9 {
    width: 13rem;
    height: 13rem;
  }
  .advance-card10 {
    width: 13rem;
    height: 13rem;
  }
  .title {
    font-size: 40px;
  }
  .title2 {
    font-size: 30px;
  }
  .title3 {
    font-size: 25px;
  }
}