@media screen and (min-width:1690px) and (max-width:1920px) {

}

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

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

@media screen and (max-width:1024px) {
    .lessons-text {
        min-height: 195px;
    }
}

@media screen and (max-width:834px) {
    .main-content-text p {
        font-size: 34px;
    }

    .lessons-wrapper {
        gap: 40px;
    }

    .lessons-item {
        width: calc((100% - 2 * 40px) / 3);
    }

    .menu-wrapper {
        gap: 20px;
    }

    .menu-item {
        width: calc((100% - 3 * 20px) / 4);
    }

    table.tbl-piano td:first-child {
        width: 22%;
    }

    .lessons-menu-item {
        padding: 20px 10px;
    }

    .lessons-menu-row2 .lessons-menu-item {
        min-width: 160px
    }

    .voice-img img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .voice-text2 {
        padding-left: 0;
    }
    
    .flow-step {
        flex: 100%;
        max-width: calc(18% - 30px);
        margin: 0 30px 30px 0;    
    }   

    .flow-text {
        flex: 100%;
        max-width: calc(82% - 30px);
        margin: 0 30px 30px 0;
    }

}

@media screen and (max-width:768px) {
    .main-content-text p {
        font-size: 30px;
    }

    .btn-more {
        font-size: 14px;
    }

    .menu-item {
        padding: 15px 5px;
    }

    .lessons-menu-row.lessons-menu-row2 {
        gap: 20px;
    }

    .lessons-text {
        min-height: 225px;
    }   
    
}

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

    .sp-none {
        display: none;
    }

    .sp-show {
        display: inline-block;
    }
    
    #main h2 img {
        height: 500px;
        object-fit: cover;
    }

    .main-content {
        padding: 0 15px;
    }

    .banner-txt {
        font-size: 36px;
    }

    .title-jp {
        font-size: 27px;
    }


    .sec1-img {
        margin-bottom: 20px;
    }

    #sec1::after {
        height: 290px;
        background-size: cover;
    }

    .lessons-item {
        width: 100%;
        margin-bottom: 40px;
    }

    .trial-img {
        margin-bottom: 20px;
    }

    .powers-text {
        text-align: left;
    }

    .lessons-text {
        min-height: auto;
    }

    /* Responsive styling for testimonials */
    .voices-item {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        max-width: 100%;
    }
    
    .voices-img {
        width: 100%;
        text-align: center;
    }

    
    
    .voice-text {
        padding-left: 0;
    }

    .voice-text2 {
        padding-left: 0;
    }
    
    .testimonial-block {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    .speaker-label {
        align-self: flex-start;
        margin-top: 0;
    }
    
    .testimonial-content {
        padding-top: 0;
    }
    
    .voices-item::after {
        display: none;
    }

    .lessons-menu {
        width: 100%;
    }

    .lessons-menu-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
    }
    
    .lessons-menu-row.top-row {
        /* margin-bottom: 20px; */
    }
    
    .lessons-menu-row.bottom-row {
        /* margin-top: 20px; */
        margin-top: 10px;
    }    
    
    .lessons-menu-item {
        width: calc((100% - 20px) / 2);
        min-width: unset;
        max-width: calc((100% - 20px) / 2);
    }

    .menu-item {
        width: calc((100% - 1 * 20px) / 2);
    }

    .about-message-img {
        margin-bottom: 20px;
    }

    .instructor-profile-img {
        margin-bottom: 20px;
    }

    .trial-lesson-img {
        margin-bottom: 20px;
    }

    .access-text {
        text-align: left;
    }

    #access::after {
        height: 290px;
        background-size: cover;
    }

    .flow-step {
        max-width: 100%;
        text-align: center;
    }

    .flow-text {
        max-width: 100%;
        margin: 0 0 30px 0;
    }

    .contact-desc {
        text-align: left;
    }

    .contact-form {
        width: 100%;
    }

    .form-group p label {
        min-width: 100%
    }

    .experience-desc {
        text-align: left;
    }

    .lessons-content {
        width: 100%;
    }

    table.tbl-piano td:first-child {
        width: 30%;
    }    

    .lessons-menu-row2 .lessons-menu-item {
        width: calc((100% - 20px) / 2);
        min-width: unset;
        max-width: calc((100% - 20px) / 2);
    }

    .voice-desc {
        text-align: left;
    }

    .voice-img {
        margin-bottom: 20px;
    }
    
    .flow-text h4 {
        padding-top: 0;
    }

    
}



@media screen and (max-width:376px) {
    .main-content-text p {
        font-size: 28px;
    }

    .title-jp {
        font-size: 26px;
    }

    .flow-step {
        max-width: calc(45% - 30px);
    }

    table.tbl-piano td:first-child {
        width: 32%;
    }
}

@media screen and (max-width:321px) {
    .main-content-text p {
        font-size: 24px;
    }

    .main-content-text p.main-small {
        font-size: 18px;
    }

    .banner-txt {
        padding-left: 15px;
    }

    .title-jp {
        font-size: 22px;
    }

    #sec1::after {
        height: 224px;
    }

    #access::after {
        height: 224px;
    }

    .flow-step {
        max-width: calc(55% - 30px);
    }
}


