
/*region adaptive nav*/

nav.navbar .open_menu_btn ,
.nav_list.tablet_ver .open_menu_btn {
    margin: auto 0 auto auto;
    border: 0;
    padding: 9px 12px;
    background: #A0B67D;
    border-radius: 8px;

    font-weight: 400;
    font-size: 24px;
    line-height: 26px;
    text-align: center;
    text-transform: uppercase;

    color: #FFFFFF;
}
.nav_list.tablet_ver{
    width: 100%;
    height: max-content;
    background: #FCF2E8;
    border-radius: 0 0 16px 16px;
}
.nav_list.tablet_ver .header_info{
    display: flex;
    border-bottom: 1px solid #C2B4A7;
    padding: 20px;
}
.nav_list.tablet_ver .header_info .logo_container {
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
    text-transform: uppercase;
    color: #564D48;

    display: block;
    height: auto;
    margin: auto 20px auto 0;
}
.nav_list.tablet_ver .header_info .open_menu_btn.close_btn{

}

.nav_list.tablet_ver .links_list{
    padding: 30px 20px;
}
.nav_list.tablet_ver .links_list ul{
    list-style: none;
    display: grid;
    grid-gap: 24px;
}
.nav_list.tablet_ver .links_list ul li{

}
.nav_list.tablet_ver .links_list ul li a{
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    text-transform: uppercase;
    color: #2F2A27;

    padding: 0;
}
/*endregion*/

.tablet_ver{
    display: none;
}
@media (max-width: 1024px) {
    /*region Header*/

    nav.navbar .nav_links .links_container ul {
        height: max-content;
    }
    nav.navbar .nav_links .links_container ul li a {
        padding: 12px 10px;
        height: max-content;
    }

    /*endregion Header*/
}

@media (max-width: 768px) {

    /*region Main Banner*/

    .main_banner .text_block .content {
        position: relative;
        top: 0;
        padding: 180px 30px 0;
    }
    .main_banner .text_block .text_content {
        display: block;
    }
    .main_banner .text_block .content .left {
        margin-right: 0;
    }
    .main_banner .text_block .content .right {
        max-width: 100%;
        margin-left: 0;
    }
    .main_banner .text_block .pic {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        display: block;
        height: auto;
    }
    .main_banner .text_block img {
        height: auto;
    }

    /*endregion Main Banner*/

    /*region Index*/

    /*region About us*/

    .about .about_list {
        display: grid;
        grid-template-columns: repeat(2, calc((100% / 2) - 15px));
        grid-gap: 30px;
        margin: 0;
    }
    .about .about_list .item {
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
    }

    /*endregion About us*/

    /*region You get; Banner*/

    .you_get .get_list {
        grid-template-columns: 100%;
    }

    .only_now .only_text {
        padding: 50px 30px;
        grid-template-columns: 100%;
        grid-gap: 40px;
    }
    .only_now .only_text .desc .title {
        text-align: center;
    }
    .only_now .only_text .desc .only_now_btn {
        display: block;
        margin: auto;
    }
    .only_now .hidden_text .only_now_btn{
        text-align: center;
        justify-content: center;
    }

    .quote .content {
        display: flex;
        padding: 40px 20px;
        background: rgba(223, 193, 165, 0.01);
        backdrop-filter: blur(2px);
    }

    /*endregion You get*/

    /*region Why us*/

    .why_us .why_list .item {
        grid-template-columns: 100%;
        grid-gap: 40px;
        justify-content: center;
        margin-bottom: 60px;
        padding-bottom: 60px;
    }
    .why_us .why_list .item .pic img {
        margin: auto;
        display: block;
    }
    .why_us .why_list .item .desc .title {
        text-align: center;
    }
    .why_us .why_list .item .desc .title::after {
        right: 0;
        margin: 0 auto;
        display: block;
    }


    .why_us .why_list .modal-content .modal-body {
        padding: 40px;
    }
    .why_us .why_list .modal-content .modal-body .form_content {
         grid-template-columns: repeat(2,calc(50% - 15px));
         grid-gap: 30px;
    }

    /*endregion Why us*/

    /*region Course period; Modules*/

    .course_period {
        padding: 60px 0;
    }
    .course_period .period_list {
        grid-template-columns: repeat(2,calc((100% / 2) - 15px));
        grid-column-gap: 30px;
        grid-row-gap: 60px;
    }

    .modules {
        padding: 60px 0 40px;
    }
    .modules .module_list {
        grid-template-columns: repeat(2,calc((100% / 2) - (30px / 2)));
        grid-column-gap: 30px;
        grid-row-gap: 50px;
    }

    /*endregion Course period*/

    /*region Question; Edu fee*/

    .questions .q_content .only_text {
        padding: 50px 30px;
        position: relative;
    }
    .questions .q_content .desc .content {
        margin-right: 0;
        text-align: center;
    }
    .questions .q_content .desc {
        display: block;
    }
    .questions .q_content .desc i {
        position: absolute;
        top: 25%;
        right: 60px;
    }

    /*
    .edu_fee .text_block {
        overflow-x: auto;
    }
    .edu_fee .text_block table {
        min-width: 700px;
    }*/
    .edu_fee .text_block.mob_ver{
        display: block;
    }
    .edu_fee .text_block.desk_ver{
        display: none !important;
    }
    .edu_fee .text_block table tr:nth-child(3n+1) {/*Titles*/
        background: #F3E3D4;
    }
    .edu_fee .text_block table tr:nth-child(3n+1) td{
        font-weight: 600;
        text-transform: uppercase;
    }
    .edu_fee .text_block table tr:nth-child(3n+2) {
        background: #F9E9DB;
    }

    /*endregion Question*/

    /*endregion Index*/

}
@media (max-width: 480px){
    .tablet_ver{
        display: block;
    }
    .desktop_ver{
        display: none !important;
    }


    /*region Nav*/
    .nav_list.tablet_ver {
        display: block;
        overflow: scroll;
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        transition: all .4s ease-in-out;

        opacity: 0;
        visibility: hidden;
        z-index: -1;
    }
    .nav_list.tablet_ver.opened{
        opacity: 1;
        visibility: visible;
        z-index: 30;
    }

    nav.navbar .info_container .logo_container {
        width: 100%;
    }

    /*endregion Nav*/

    /*region Index*/

    .main_banner .text_block .content .left {
        padding: 30px;
    }
    .main_banner .text_block .content {
        padding: 180px 0 0;
    }
    .main_banner .text_block .content .right .contact_us {
        border-radius: 0;
        padding: 20px 30px;
        border-bottom: 1px solid #C2B4A7;
        margin-bottom: 0;
    }
    .main_banner .text_block .content .right form {
        border-radius: 0;
        padding: 30px;
        border-bottom: 1px solid #C2B4A7;
    }


    .main_content {
        padding: 0 20px;
    }

    .course_period .period_list,
    .you_get .get_list,
    .about .about_list {
        grid-template-columns: 100%;
        grid-gap: 20px;
    }
    .modules .module_list{
        grid-template-columns: 100%;
        grid-row-gap: 40px;
    }
    .modules .module_list .item .number {
        margin: 0 auto 20px;
    }
    .quote,
    .only_now {
        margin: 30px -20px;
    }

    .edu_fee .note,
    .edu_fee .text_block pre {
        text-align: left;
        margin-top: 20px;
    }

    footer .footer_container .socials {
        grid-gap: 25px;
    }
    footer .footer_container .socials a {
        width: 90px;
        height: 90px;
        min-width: 90px;
    }


    .why_us .why_list .modal-content .modal-body .form_content {
        grid-template-columns: 100%;
    }

    /*endregion Index*/

}
@media (max-width: 300px){
    .why_us .why_list .item .pic img {
        width: 200px;
        height: 200px;
        min-width: 200px;
    }

}