/*============== mobile  ==================*/
@media screen and (max-width: 800px) {
  /*================================ general ================================*/
  .callToAction {
    font-weight: 700;
    font-size: 14px;
    padding: 9px 32px;
    width: auto;
  }
  .callToAction2 {
    font-size: 16px;
    line-height: 16px;
    padding: 10px 0;
  }
  .section_title {
    font-size: 18px;
    margin: 0 auto 26px;
  }
  .section_caption {
    font-size: 14px;
    text-align-last: right;
    margin: 0 auto 24px;
    max-width: 100%;
  }

  .stickyHeader {
    position: fixed;
    top: unset;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    z-index: 1000;
  }
  header .content {
    padding: 16px 0;
  }
  header .content .title {
    color: #364fc7;
    font-weight: 700;
    font-size: 22px;
    line-height: 32px;
    margin: 0;
    text-align: right;
    text-align-last: right;
  }

  header .content .info {
    width: 100%;
    justify-content: space-between;
  }
  header .content .info .subtitle {
    font-size: 12px;
    display: flex;
  }
  header .content .info .subtitle span {
    margin-left: 5px;
  }
  header .content .info .callToAction {
    margin-right: 0;
    font-size: 10px;
    padding: 10px 16px;
  }
  /*================================ intro ================================*/
  #intro {
    padding: 17px 16px 40px;
  }
  #intro .content .right {
    padding: 5px 25px 43px;
    text-align: center;
    text-align-last: center;
    order: 2;
  }
  #intro .title {
    font-size: 18px;
    line-height: 26px;
    margin: 0 auto 8px;
    text-align: center;
    text-align-last: center;
  }
  #intro .caption {
    font-size: 14px;
    margin: 0 auto 18px;
    text-align: justify;
    text-align-last: center;
  }
  #intro .content .left {
    padding-top: 11px;
  }
  #intro .content .left img {
    max-width: 186px;
  }
  #intro .content .left .bg_yellow {
    filter: blur(85px);
    width: 260px;
    height: 234px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  /*================================ remember ================================*/
  #remember .section_title {
    margin: 0 auto 40px;
  }
  #remember .content_box {
    padding: 21px 0px 37px;
    margin: 0 auto 75px;
    min-height: 327px;
  }
  #remember .content_box .img_box {
    min-height: auto;
    margin: 0 auto 13px;
    align-items: flex-start;
  }
  .img_box img {
    max-width: 55%;
  }
  #remember .content_box .title {
    margin: 0 auto 18px;
    max-width: 70%;
  }

  #remember .content_box.active .img_box {
    margin-top: -50px;
  }
  #remember .content_box.active {
    min-height: 327px;
  }
  #remember .content_box.active .title {
    color: #ffffff;
    font-weight: 300;
    font-size: 14px;
    line-height: 27px;
    max-width: 80%;
  }
  /*================================ childhood ================================*/
  #childhood {
    padding: 25px 0 57px;
  }
  #childhood .caption {
    font-size: 16px;
    max-width: 90%;
  }

  /*================================ more_info ================================*/
  #more_info {
    height: auto;
    padding-bottom: 80px;
  }
  #more_info .right {
    order: 2;
    padding: 0;
  }
  #more_info .boxes {
    min-height: 60px;
    align-items: center;
    padding-right: 0;
  }
  #more_info .boxes .title {
    font-size: 16px;
    line-height: 25px;
    margin: 0 auto;
    text-align: center;
    text-align-last: center;
  }
  #more_info .left {
    min-height: auto;
    margin-bottom: 53px;
    padding-top: 24px;
    width: 300px;
    padding-top: 24px;
    margin: 8px auto 53px;
  }
  #more_info .left .circle {
    width: 47px;
    height: 51px;
    font-size: 16px;
    line-height: 26px;
  }
  #more_info .left .circle1,
  #more_info .left .circle2 {
    width: 33px;
    height: 36px;
  }
  #more_info .left .circle1 {
    top: 8px;
  }
  #more_info .left .circle2 {
    top: 150px;
    left: 34px;
  }
  #more_info .left .circle3 {
    bottom: 30px;
    left: 30px;
  }
  #more_info .left .circle4 {
    bottom: 65px;
  }
  #more_info .left .circle5 {
    top: 86px;
    right: 90px;
  }
  #more_info .left .img_steps {
    right: -27px;
    left: 0;
    margin: 0 auto;
    max-width: 47%;
    bottom: 32px;
  }
  #more_info .boxes.active {
    padding: 15px 7px;
  }
  #more_info .boxes.active .title {
    font-size: 15px;
  }
  #more_info .boxes .caption {
    font-size: 16px;
    margin: 0 auto;
    text-align-last: center;
  }

  /*================================ counter ================================*/
  #counter {
    padding: 40px 0 25px;
  }
  #counter .section_title {
    margin: 0 auto 22px;
  }
  #counter .content > div {
    padding: 0;
    border-left: none;
  }
  #counter .counterTitle,
  #counter .counterCaption {
    font-size: 16px;
    line-height: 25px;
    margin: 0 auto 15px;
  }
  #counter .value {
    font-size: 35px;
    line-height: 52px;
  }
  .counter_box {
    width: 80%;
    margin: 0 auto;
    border-bottom: 1px solid rgba(54, 79, 199, 0.42);
    text-align: center;
    margin-bottom: 20px;
  }
  .counter_box.last_box {
    border-bottom: none;
  }

  /*================================ discount ================================*/
  #discount .content {
    border-radius: 0;
  }
  #discount .content .right {
    padding: 0 15px 67px;
    text-align: center;
    order: 2;
  }
  #discount .content .left {
    padding: 74px 15px 84px;
    position: static;
    margin-bottom: 25px;
  }
  #discount .content .left .discount1 {
    animation: none;
    top: unset;
    right: unset;
    left: 0;
    bottom: 140px;
    width: 73px;
  }
  #discount .discount_box {
    backdrop-filter: blur(40px);
    padding: 3px 32px;
    text-align: center;
  }
  #discount .discount_box .original_price {
    font-weight: 400;
    font-size: 25px;
    line-height: 39px;
  }
  #discount .discount_box .recent_price {
    font-size: 31px;
    line-height: 51px;
  }
  #discount .discount_box .discount2 {
    width: 100px;
  }
  #discount .content .title {
    font-size: 20px;
    line-height: 29px;
    text-align: center;
    text-align-last: center;
    margin: 0 auto 8px;
  }
  #discount .content ul {
    padding-right: 0;
    margin-bottom: 40px;
  }
  #discount .content ul li {
    font-size: 14px;
    text-align: center;
    text-align-last: center;
    margin: 0 auto;
    list-style: none;
  }
  #discount .content .subtitle {
    font-size: 14px;
    text-align: center;
    text-align-last: center;
    margin: 0 auto 60px;
  }
  #discount .content .callToAction {
    margin: 0 auto 13px;
  }
  #discount .content .timer {
    margin: 0 auto;
    min-width: auto;
  }
  #countdown {
    margin-left: 10px;
    min-width: 70px;
  }
  #discount .content .special_discount {
    width: 120px;
    left: 0;
    top: 0;
  }

  /*================================ membership ================================*/
  #membership {
    padding: 60px 0 0;
  }
  #membership .content {
    border-radius: 25px;
  }
  #membership .content .right {
    padding: 25px 15px 0;
    text-align: center;
    margin-bottom: 90px;
  }
  #membership .title {
    text-align: center;
    text-align-last: center;
    margin: 0 auto 12px;
    max-width: 75%;
  }
  #membership .caption {
    font-size: 16px;
    margin: 0 auto 24px;
  }
  #membership .form .form-group {
    min-height: 70px;
    text-align: center;
  }
  #membership .form .form-group:nth-child(2) {
    margin-bottom: 13px;
  }
  #membership .form .form-control {
    text-align: center;
  }
  #membership .form .form-group label.error {
    font-size: 10px;
  }
  #membership .content .left img {
    width: 200px;
  }
  .form.step3 .last_title {
    font-size: 24px;
    margin: 20px auto 0;
  }
  /*================================ testimonial ================================*/
  #testimonial {
    padding: 64px 0 84px;
  }
  .testimonial_Swiper .swiper-slide .audio_box {
    backdrop-filter: blur(33px);
    border-radius: 17px;
    margin: 0 auto 10px;
    padding: 21px;
  }
  .testimonial_Swiper .swiper-slide .play_audio {
    width: 30px;
    height: 30px;
    margin-right: 4px;
  }
  .testimonial_Swiper .swiper-slide .play_audio .play_icon,
  .testimonial_Swiper .swiper-slide .play_audio .pause_icon {
    width: 15px;
  }
  .testimonial_Swiper .swiper-slide .title {
    font-size: 12px;
    line-height: 23px;
  }
  .testimonial_Swiper .swiper-wrapper {
    padding: 70px 0 0;
  }
  .testimonial_Swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }
  .testimonial_Swiper .swiper-button-next,
  .testimonial_Swiper .swiper-button-prev {
    width: 20px;
    height: 20px;
  }
  .testimonial_Swiper .swiper-button-prev {
    right: 30% !important;
  }
  .testimonial_Swiper .swiper-button-next {
    left: 30% !important;
  }
  .testimonial_Swiper .swiper-pagination {
    bottom: 5px;
  }

  /*================================ difference ================================*/
  #difference .section_title {
    margin: 0 auto 8px;
    max-width: 90%;
  }
  #difference .caption {
    font-size: 14px;
    margin: 0 auto 18px;
    max-width: 90%;
  }
  #difference .video_box {
    width: auto;
  }

  #difference .video_box .play {
    width: 20px;
    top: 73px;
  }
  #difference .video_box video {
    border-radius: 8px;
  }

  /*================================ faq ================================*/
  #faq {
    padding: 45px 0 140px;
  }
  #faq .section_title {
    margin: 0 auto 25px;
  }
  #faq .accordion-item {
    border: none;
    border-radius: 18px;
    margin: 0 auto 8px;
  }
  #faq .accordion-item:first-of-type {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
  }
  #faq .accordion-button {
    font-size: 12px;
    border-radius: 45px;
    padding: 7px 17px;
  }
  #faq .accordion-button::after {
    width: 20px;
    height: 20px;
    left: 18px;
  }
  #faq .accordion-body {
    font-size: 12px;
    padding: 0 18px 0 0;
    max-width: 90%;
    line-height: 2;
  }
  #faq .accordion-button:not(.collapsed) {
    margin-bottom: 0;
  }

  /*================================ footer ================================*/
  footer .content {
    padding: 11px 0 22px;
    flex-direction: column;
  }
  footer .content .title {
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    text-align-last: center;
    margin: 0 auto 18px;
  }
  footer .content .social img {
    width: 18px;
    margin-right: 8px;
  }
  footer .copy_right {
    padding: 10px 0;
    background: #142faf;
    text-align: center;
  }
  footer .copy_right .harmony_logo {
    width: 104px;
  }
}

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

/* Iphone 320 style */
@media screen and (max-width: 350px) {
  header .content .info .callToAction {
    padding: 10px;
  }
  #discount .content .left .discount1 {
    bottom: 100px;
  }
}

@media screen and (min-width: 800px) and (max-width: 1500px) {
    #intro .doll {
    width: fit-content;
    position: absolute;
    top: -75px;
    right: -105px;
    padding: 0;
    max-width: 190px;
    }
    #intro .content .right {
    padding: 100px 60px 100px 10px;
    text-align: right;
    text-align-last: right;
    }
}