@media screen and (max-width: 1460.99px){
    .nav-menu{
        margin-left: 30px;
    }

    .nav-menu__tel{
        margin-left: 30px;
    }
}

@media screen and (max-width: 1395.99px) {
    .nav-bar{
        padding: 0px 80px;
    }

    .header-title{
        padding: 0 0px 0 80px;
    }

    .content{
        padding: 0px 80px;
    }

    .course{
        padding: 0px 80px;
    }

    .projects{
        padding: 0px 80px;
    }

    .comments{
        padding: 0px 80px;
    }

    .why{
        padding: 0px 80px;
    }

    .need{
        padding: 60px 80px;
    }

    .chance{
        padding: 0px 80px;
    }

    .instructor{
        padding: 0px 80px 80px 80px;
    }
}

@media screen and (max-width: 1315.99px) {
    .nav-menu{
        margin-left: 0px;
    }

    .nav-menu__tel{
        margin-left: 0px;
    }

    .header-title__left{
        width: 520px;
    }

    .header-title__left h1{
        font-size: 50px;
    }

    .header-title__right{
        width: 700px;
    }

    .header-title__right img {
        width: 100%;
    }
}


@media screen and (max-width: 1200.99px) {
    .nav-bar{
        padding: 0px 40px;
    }

    .nav-btn{
        padding: 13px 50px;
        margin-left: 0px;
    }

    .header-title{
        padding: 0 0px 0 40px;
    }

    .header-left__like{
        right: 50px;
        bottom: -30px;
    }

    .header-title__right{
        width: 600px;
    }

    .header-title__left-card{
        width: 100%;
    }

    .content{
        padding: 0px 40px;
        gap: 40px;
    }

    .content-left{
        width: 55%;
    }

    .content-right{
        width: 45%;
    }

    .course{
        padding: 0px 40px;
    }

    .projects{
        padding: 0px 40px;
    }

    .comments{
        padding: 0 40px;
    }

    .why{
        padding: 0px 40px;
    }

    .need{
        padding: 60px 40px;
    }

    .chance{
        padding: 0px 40px;
    }

    .instructor{
        padding: 0px 40px 80px 40px;
    }
}

@media screen and (max-width: 1024.99px) {
    .nav-menu__container{
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        width: 100%;
        background: rgba(5, 56, 24, 0.5);
        backdrop-filter: blur(9px);
        opacity: 0;
        transition: left 0.3s ease-out;
        transition: opacity 0.5s ease-out;
    }

    .nav-menu__container.active{
        opacity: 1;
        left: 0;
    }

    .nav-menu{
        background: #fff;
        width: 200px;
        height: 100%;
        flex-direction: column;
        padding: 40px 20px 0 20px;
        position: relative;
    }

    .fa-bars{
        display: block;
        font-size: 25px;
        color: var(--b3);
        cursor: pointer;
    }

    .fa-x {
        position: absolute;
        display: block;
        font-size: 25px;
        color: var(--b3);
        cursor: pointer;
        top: 20px;
        right: 20px;
    }

    .header-title__left{
        width: 400px;
    }

    .header-title__right{
        width: 500px;
    }

    .header-title__left h1{
        font-size: 32px;
    }

    .header-left__like-card{
        width: 195px;
        height: 120px; 
        padding: 0 10px;
    }

    .header-left__like-card h2{
        font-size: 36px;
        line-height: 45px;
    }

    .content-right h1 {
        font-size: 32px;
    }

    .course h1{
        font-size: 32px;
    }

    .course-container__card{
        padding: 10px;
    }

    .projects{
        gap: 30px;
    }

    .projects-left h1{
        font-size: 32px;
    }

    .projects-left{
        width: 60%;
    }

    .projects-right{
        width: 40%;
    }

    .projects-right p{
        margin-top: 12px;
    }

    .comments h1{
        font-size: 32px;
    }

    .why-cards__top{
        flex-direction: column-reverse;
    }

    .why-cards__item{
        width: 100%;
    }

    .why-cards__top h1{
        width: 100%;
        font-size: 32px;
    }

    .why-cards__top h1 br {
        display: none;
    }

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

    .need h1{
        font-size: 32px;
    }

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

    .chance-right h1{
        font-size: 32px;
        margin-top: 18px;
    }

    .chance-right p{
        margin-top: 18px;
    }

    .chance-right h5{
        margin-top: 18px;
    }

    .instructor-left  h1{
        font-size: 32px;
    }
}



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

    .nav-bar{
        padding: 0px 20px;
    }

    .header-left__like{
        bottom: -5px;
        right: 20px;
    }

    .header-title{
        padding: 0 0px 0 20px;
    }

    .content{
        padding: 0 20px;
    }

    .course{
        padding: 0 20px;
    }

    .projects{
        padding: 0px 20px;
        flex-direction: column;
    }

    .projects-left{
        width: 100%;
    }

    .projects-left img{
        margin: 18px auto;
        width: 80%;
        display: block;
    }

    .projects-right{
        width: 100%;
        margin-top: 6px;
    }

    .comments{
        padding: 0 20px;
    }

    .why{
        padding: 0px 20px;
    }

    .need{
        padding: 60px 20px;
    }

    .chance{
        padding: 0px 20px;
        margin-top: 40px;
        flex-direction: column;
    }

    .chance-left{
        width: 100%;
    }

    .chance-left img{
        width: 80%;
        display: block;
        margin: auto;
    }

    .chance-right{
        width: 100%;
    }

    .instructor{
        padding: 0px 20px 40px 20px;
        flex-direction: column-reverse;
    }

    .instructor-right{
        width: 100%;
    }

    .instructor-right img:nth-child(1){
        display: none;
    }
    
    .instructor-right img:nth-child(2){
        display: block;
        width: 80%;
        margin: auto;
    }

    .instructor-left{
        width: 100%;
    }

    .instructor-form{
        width: 100%;
    }

    .instructor-left p{
        margin-top: 18px;
    }
}

@media screen and (max-width: 900.99px){
    .comments-container{
        flex-direction: column;
    }

    .comments-container .comments-container__cards:nth-child(1) {
        width: 100%;
    }
    .comments-container .comments-container__cards:nth-child(2) {
        width: 100%;
    }
    .comments-container:nth-child(3) .comments-container__cards:nth-child(1) {
          width: 100%;
    }
    .comments-container:nth-child(3) .comments-container__cards:nth-child(2) {
        width: 100%;
    }
}

@media screen and (max-width: 800.99px){
    .nav-btn{
        display: none;
    }

    .nav-menu .nav-btn{
        display: block;
        width: 100%;
        padding: 10px 0px;
    }

    .header-title{
        flex-direction: column-reverse;
        align-items: center;
        padding: 0 20px 0 20px;
    }

    .header-title__left{
        width: 100%;
    }

    .header-title__right{
        width: 100%;
    }

    .header-title__left h1 {
        margin-top: 33px;
    }

    .header-left__like-card{
        width: 162px;
        height: 124px; 
        padding: 0 10px;
    }

    .header-title__left-content__btn{
        width: 250px;
    }

    .content{
        flex-direction: column;
        justify-content: center;
        gap: 20px;
    }

    .content-left{
        width: 100%;
    }

    .content-left img{
        display: block;
        margin: auto;
        width: 80%;
    }

    .content-right{
        width: 100%;
    }

    .content-btn{
        width: 100%;
    }

    .course-container{
        flex-direction: column;
        align-items: center;
    }

    .course-container__card{
        width: 100%;
        padding: 24px;
    }

    .course-container__card img{
        width: 80px;
        height: 80px;
    }
}

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

    .nav-logo img{
        width: 59px;
    }

    .fa-bars{
        font-size: 20px;
    }

    .tel-icon{
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px; 
    }

    .tel-text{
        font-weight: 400;
        font-size: 12px;
        line-height: 14px;
    }

    .tel-icon img{
        width: 80%;
    }

    .tel-text a{
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
    }

    .header-left__like{
        position: static;
        width: 100%;
        justify-content: space-around;
        margin-top: 28px;
    }

    .header-title__left-content__btn{
        width: 100%;
        height: 48px;
        font-weight: 600;
        font-size: 18px;
    }

    .header-title__left-content__title-text{
        font-weight: 400;
        font-size: 20px;
        line-height: 25px;
    }

    .content-left img{
        width: 100%;
    }

    .content-right__title{
        margin-top: 28px;
    }

    .content-right__title p{
        margin-top: 18px;
        font-size: 18px;
    }

    .course-bten__card{
        flex-direction: column-reverse;
    }

    .course-btn{
        width: 100%;
    }

    .course-bten__card p{
        text-align: center;
    }

    .projects-left img{
        width: 100%;
    }

    .projects-btn{
        width: 100%;
    }

    .comments-container__cards-top img{
        width: 52px;
    }

    .comments-container__cards-top h3{
        font-size: 18px;
    }

    .comments-container__cards-top h3 p{
        font-size: 14px;
    }

    .why-cards-top__card h5, .why-cards__card h5{
        font-size: 18px;
    }

    .why-cards-top__card p, .why-cards__card p{
        font-size: 14px;
    }

    .why-btn__card{
        display: none;
    }

    .need{
        padding: 40px 20px;
        margin-top: 80px;
    }

    .need h1{
        text-align: left;
    }

    .need-container{
        margin-top: 26px;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .need-container__card {
        padding: 18px;
    }

    .need-container__card img{
        width: 60px;
    }

    .need-container__card h4{
        font-size: 18px;
    }

    .need-container__card p{
        font-size: 14px;
    }

    .chance-left img{
        width: 100%;
    }

    .chance-right p{
        font-size: 16px;
    }

    .chance-right h5{
        font-size: 18px;
    }

    .chance-right__btn{
        width: 100%;
    }

    .instructor-left p{
        font-size: 16px;
    }

    .instructor-left h3{
        font-size: 18px;
    }
}