@media screen and (max-width: 1300px) {
    .courses {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 1120px) {
    .faq .course-data {
        grid-template-columns: repeat(3, 1fr);
    }

    .bid div.first {
        font-size: 50px;
    }

    .ux {
        grid-template-columns: repeat(1, 1fr);
    }

    .who div {
        grid-template-columns: repeat(2, 1fr);
    }

    .learn div {
        grid-template-columns: repeat(3, 1fr);
    }

    .reviews div {
        grid-template-columns: repeat(1, 1fr);
    }

    .teachers div {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media screen and (max-width: 940px) {
    .bid {
        grid-template-columns: repeat(1, 1fr);
    }

    .help div,
    .how div {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .help div aside {
        padding: 25px 15px;
    }

    .help div aside.first {
        height: 477px;
    }

    .help div aside.second {
        height: 341px;
    }

    .help div aside.third {
        grid-column: unset;
        height: 264px;
    }

    .help div aside button {
        right: 34px;
        bottom: 24px;
        left: 21px;
        width: 90%;
    }

    .how div aside.first {
        grid-row: unset;
        height: 477px;
    }

    .how div aside.second,
    .how div aside.third {
        grid-column: unset;
    }

    .how div aside.second {
        height: 394px;
    }

    .how div aside.third {
        height: 453px;
    }

    .reviews div{
        padding:0%;
    }

    .teachers div{
        padding:0%;
    }

    .title{
        font-weight: 700;
    }

    .faq .course-data{
        margin-left: 0px;
    }

}

@media screen and (max-width: 910px) {
    section {
        margin: 0 16px;
    }

    section .title {
        font-size: 54px;
        padding: 37px 0 37px 30px;
    }

    .faq .title {
        margin: 0;
    }

    .faq .course-data {
        grid-template-columns: repeat(2, 1fr);
    }

    .come {
        margin: 38px 16px 0 16px;
        padding: 16px;
    }

    .bid {
        gap: 11px;
        margin-bottom: 16px;
    }

    .bid div.first,
    .bid div.second {
        padding: 16px;
        border-radius: 15px;
    }

    .bid div.first {
        height: 154px;
    }

    .intro {
        margin: 0 16px;
    }

    .courses aside {
        padding-left: 28px;
    }

    .courses aside p {
        font-size: 23px;
    }

    .help,
    .how {
        margin: 0;
        padding: 0 16px;
    }

    .help .title,
    .how .title {
        margin: 0;
        padding: 37px 0 37px 30px;
    }
}

@media screen and (max-width: 790px) {
    .courses {
        margin: 16px;
        grid-template-columns: repeat(1, 1fr);
    }

    .faq aside .answer {
        transition: 0.5s;
    }

    .ux div.first p {
        font-size: 65px;
    }

    .about div {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
    
    .about div aside {
        height: 238px;
        font-size: 20px;
        padding: 35px 17px;
        border-radius: 15px;
    }

    .who div {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
    
    .who div aside {
        height: 197px;
        padding: 35px 17px;
        border-radius: 15px;
    }

    .who div aside .subtitle {
        font-size: 20px;
    }
    
    .who div aside .info {
        font-size: 16px;
        margin-top: 10px;
    }
}

@media screen and (max-width: 760px) {
    .come {
        height: 453px;
        padding: 30px 17px;
    }

    .come p {
        font-size: 35px;
    }

    .come .small {
        font-size: 20px;
    }

    .come button {
        right: 21px;
        bottom: 25px;
        left: 21px;
    }

    .intro div {
        font-size: 60px;
    }

    .intro div p {
        font-size: 30px;
    }

    .learn div aside {
        height: 252px;
        padding: 16px;
    }

    .learn div aside span {
        top: 15px;
        left: 15px;
        width: 36px;
        height: 36px;
        font-size: 20px;
        padding-top: 7px;
    }

    .learn div aside p {
        margin-top: 63px;
    }
}

@media screen and (max-width: 620px) {
    .faq .course-data {
        grid-template-columns: repeat(1, 1fr);
    }

    .faq .course-data aside {
        width: min-content;
        font-size: 20px;
    }

    .learn div {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 560px) {
    .bid div.first {
        font-size: 40px;
    }

    .intro {
        height: 421px;
    }

    .intro div {
        font-size: 40px;
    }

    .intro div p {
        font-size: 24px;
    }

    .ux div.first p {
        font-size: 50px;
    }

    .help div {
        grid-template-columns: repeat(1, 1fr);
    }

    .help aside.third {
        grid-column: unset;
    }

    .help aside.third .subtitle {
        position: static;
        transform: unset;
        text-align: left;
    }

    .help aside.third button {
        left: unset;
        right: unset;
        transform: unset;
    }

    .learn div {
        gap: 8px;
    }

    .learn div aside p {
        font-size: 12px;
    }


}

@media screen and (max-width: 500px) {
    header .productschool {
        margin-left: 3px;
    }

    section {
        margin: 0 8px;
    }

    section .title {
        font-size: 35px;
        padding-left: 25px;
    }

    .come {
        margin: 38px 8px 0 8px;
    }

    .faq {
        margin: 0 20px 40px 20px;
    }

    .faq .title {
        padding-left: 3px;
    }

    .faq .faqs aside div {
        top: 8px;
        right: 8px;
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .bid div.first {
        font-size: 30px;
    }

    .bid div.second form .select-frame {
        grid-column: 1 / 4;
    }

    .bid div form input[type='tel'] {
        grid-column: 1 / 4;
    }

    .intro {
        margin: 0 8px;
    }

    .intro button {
        bottom: 31px;
        width: calc(100% - 32px);
        font-size: 25px;
        padding: 13px 0;
    }

    .courses {
        gap: 5px;
        margin: 16px 8px;
    }

    .help,
    .how {
        margin: 0;
        padding: 0 8px;
    }

    .ux {
        gap: 10px;
    }

    .ux div.first,
    .ux div.second {
        border-radius: 15px;
    }

    .ux div.first {
        height: 551px;
        padding: 32px 16px;
    }

    .ux div.first div {
        gap: 5px;
    }

    .ux div.first p {
        font-size: 33px;
        margin: 19px 0;
    }

    .ux div.first p .small {
        font-size: 18px;
    }

    .ux div.first button {
        right: 16px;
        bottom: 32px;
        left: 16px;
        font-size: 26px;
    }

    .ux div.second {
        height: 370px;
    }

    .ux div.second div {
        height: 100px;
    }
}

@media screen and (max-width: 420px) {
    .faq aside .answer {
        font-size: 13px;
    }

    .ux div.first div {
        grid-template-columns: repeat(2, 1fr);
    }

    .who div {
        grid-template-columns: repeat(1, 1fr);
    }

    .who div aside {
        height: 150px;
    }
}

@media screen and (max-width: 380px) {
    .intro button {
        padding: 12px 0;
    }

    .help aside.third button {
        margin-top: 50px;
    }

    .who .title {
        font-size: 30px;
    }
}

@media screen and (max-width: 350px) {
    .learn div {
        grid-template-columns: repeat(1, 1fr);
    }
}


@media only screen and (max-width: 500px) {
  .intro {
    background-image: url('mob.jpg');
    background-size: cover;
  }

  .reviews img{
    width: 100%;
  }
}