@media screen and (max-width: 1023px){
    .hero_cards{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 2rem;
    }
    .hero_card_cont{
        width: 100%;
        max-width: 896px;
    }
    .audience_card{
        width: 100%;
        max-width: 482px;
        height: 212px;
    }
    .contacts_cont{
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 3rem;
        width: 100%;
    }
}
@media screen and (max-width: 767px){
    body{
        top: 64px;
    }
    .header_wrap{
        flex-direction: row-reverse;
    }
    header .logo{
        display: none;
    }
    .toggle_menu{
        display: block;
    }
    nav{
        position: absolute;
        top: -120vh;
        right: 0;
        left: 0;
        max-width: 100%;
        height: auto;
        z-index: 20;
        overflow-y: auto;
        -webkit-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
    }
    nav.active {
        background: #fff;
        border-bottom: 1px solid hsl(220 13% 91%);
        backdrop-filter: blur(16px);
        top: 65px;
        padding: 15px 20px;
        overflow-y: scroll;
        max-width: 100%;
        /*height: 235px;*/
		height: calc(100vh - 100px);
    }
    nav.active ul{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    nav.active ul.sub-menu{
        display: none;
        box-shadow: none;
        border: none;
        --tw-shadow: none;
        background: transparent;
        padding: 0.5rem;
    }
    nav.active ul li.menu-item-has-children {
        max-height: 370px;
        padding: 0;
        max-width: calc(100vw - 40px);
    }
    .menu-item-has-children:active a{
        color: #fff;
    }
    .menu-item-has-children .menu-item-has-children_arrow.active{
        transform: rotate(180deg);
        color: #FFFFFF;
    }
    nav.active .menu-item-has-children .sub-menu.active{
        display: flex;
        flex-direction: column;
        gap: .75rem;
        width: 100%;
        position: static;
        margin-top: 15px;
        margin-left: -12px;
    }
    .sub-menu li:active{
        background: hsl(84 81% 44%);
    }
    .sub-menu li:active a div.nav_course_title{
        color: #fff;
    }
    .menu-item-has-children{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }	
	.menu-item-has-children::after {
		display: none;
	}
    .menu-item-has-children > a::after {
        content: ' ▼';
        font-size: 12px;
    }
    .menu-item-has-children svg{
        display: none;
    }
    .hero_cont{
        padding: 2.5rem 1rem;
    }
    #about_us{
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .about_cont p{
        padding-top: 1rem;
    }
    #courses{
        padding-top: 0;
        padding-bottom: 2.5rem;
    }
    .Google_Analytics_course_wrap p{
        margin-bottom: 2rem;
    }
    .courses_cont p{
        margin-bottom: 1.5rem;
    }
    .course_info p{
        margin-bottom: .5rem;
    }
    .course_title p{
        margin: 0;
    }
    #audience{
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .audience_card{
        width: 100%;
        max-width: none;
        height: auto;
    }
    .about_wrap p{
        margin-bottom: 1.5rem;
    }
    .about_card p{
        margin: 0;
    }
    /*.about_wrap{
        padding: 2.5rem 1rem;
    }*/
    .ready_wrap{
        padding: 2.5rem 1rem;
    }
    .ready_cont div a.contact_us{
        color: hsl(17 100% 56%);
    }
    .ready_cont div a.contact_us:hover, .ready_cont div a.contact_us:active{
        background: rgb(243 244 246);
    }
    #contacts{
        padding: 2.5rem 1rem;
    }
    .contacts_wrap p{
        margin-bottom: 1.5rem;
    }
    .contacts_info p{
        margin-bottom: 0;
    }
    .faq p{
        margin-bottom: 0;
    }
    .form_wrap p{
        margin: 6px 0 0 0;
    }
    .lesson_wrap{
        padding: 2.5rem 0;
    }
    .footer_cont{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }
    .contacts{
        max-width: none;
        width: 100%;
    }
    .card_btn{
        height: auto;
    }
    .checklists_items .item .checklist_description .checklist_content ul{
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .about_cards_wrap{
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        width: 100%;
    }
    .about_card{
        max-width: 100%;
    }
}
@media screen and (max-width: 639px){
    .ready_cont div{
        flex-direction: column;
    }
    .ready_cont div a{
        width: 100%;
    }
}