.courses {
    width: 100%;
    height: min-content;
    background-image: url(../images/background-courses.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 158px;
    padding-bottom: 90px;
}
.popup-wrap-logged-login {
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    display: none;
    content:'';
    background:rgba(0,0,0,0.85);
    z-index: 500;
}
.popup-box-logged-login {
    width: 400px;
    height: 200px;
    transform: translate(-50%, -50%) scale(1);
    position: absolute;
    display: none;
    top: 50%;
    left: 50%;
    box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.5);
    background: #fff;

    .close-btn{
        width:35px;
        height:35px;
        position: absolute;
        cursor: pointer;
        top: 10px;
        right: 10px;
        display:inline-block;
        -webkit-transition:all ease 0.5s;
        transition:all ease 0.5s;
        border-radius:1000px;
        background:#5D9A9D;
        font-weight:bold;
        text-decoration:none;
        color:#fff;
        line-height:190%;

        &:hover {
            -webkit-transform:rotate(180deg);
            transform:rotate(180deg);
        }
    }
}
.filterLesson{
    width: 67%;
    height: min-content;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 10px auto 0px;
}
.filterLesson > select{
    width: 24%;
    border: none;
}
.filterLesson > select.form-control{
    -webkit-appearance: default-button;
    appearance: auto;
}
.filterLesson > select:nth-child(2){
    margin-left: 10px;
}
.managmentBack{
    display: contents;
}
.footerImg3{
    cursor: pointer;
}
.textForEmpty{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.textForEmpty > span{
    font-family: "Roboto_",sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    margin-top: 40%;
}
.mobilebtn{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.seeMoreBlog{
    width: 100px;
    height: 35px;
}
.img2{
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
}
.img2 > img{
    width: 100%;
    height: 100%;
}
.cardCourses > .img > a{
    width: 100%;
    height: 100%;
}
.cardCourses > .img > a > img{
    border-radius: 30px 30px 0px 0px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.mobilebtn > button{
    background: transparent;
    border: none;
    margin: 0px auto 42px;
}
.headerCourses{
    width: 67%;
    margin: 0 auto;
    padding-top: 3%;
}
.ellipseButton{
    display: none;
}
.myCoursesTitleField{
    display: none;
}
.myCoursesTitleField > img:hover{
    cursor: pointer;
}
.headerCourses div{
    display: flex;
    gap: 10px;
    justify-content: center;
}
.txt1{
    font-family: "RobotoSlab_",sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 58px;
    text-align: left;
    color: #FFFFFF;
}
.txt2{
    font-family: "RobotoSlab_",sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 58px;
    text-align: left;
    color: #F36528;
}
.cardCourses_{
    width: 67%;
    margin: 0 auto;
    padding-top: 3%;
}
.wrapper {
    width: 100%;
    position: relative;
}
.carouselCourses {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 3 + 2px));
    height: 500px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.carouselCourses::-webkit-scrollbar {
    display: none;
}

.carouselCourses :where(.cardCourses, .img) {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
.carouselCourses.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.carouselCourses.no-transition {
    scroll-behavior: auto;
}
.carouselCourses.dragging .cardCourses {
    cursor: pointer;
    user-select: none;
}

.carouselCourses .cardCourses {
    width: 380px;
    height: 490px;
    list-style: none;
    background: #FFFFFF24;
    border-radius: 30px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    scroll-snap-align: start;
}
.cardBody{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.cardCoursesBody{
    width: 312.12px;
    height: 223.5px;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: space-between;
     margin-top: 13px;
}
.cardBody .span1{
    font-family: "RobotoSlab_",sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 26px;
    text-align: left;
    color: #FFFFFF;
    height: 50px;
    width: calc(100% - 110px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
}
.cardBody .span2{
    margin-bottom: 0px;
    font-family: "Roboto_",sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28.13px;
    text-align: left;
    color: #FFFFFF;
}
.cardCourses .img {
    width: 100%;
    height: 235px;
}
.courses .title0{
    font-family: "RobotoSlab_",sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 58px;
    margin: 3% 0;
    text-align: center;
    color: #FFFFFF;
}
.cardCourses2{
    width: 67%;
    margin: 0 16% 0px 20%;
}
.wrapper2 {
    width: 100%;
    position: relative;
}
.wrapper2 .carousel2 {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 3 + 2px));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: 0;
    margin-bottom: 0;
    padding-left: 0;
}
.carousel2::-webkit-scrollbar {
    display: none;
}
.carousel2 :where(.card2, .img2) {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30px;
}
.carousel2.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}
.carousel2.no-transition {
    scroll-behavior: auto;
}
.carousel2.dragging .card2 {
    cursor: pointer;
    user-select: none;
}
.carousel2 .card2 {
    width: 250px;
    scroll-snap-align: start;
    height: min-content;
    list-style: none;
    border-radius: 30px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: start;
    flex-direction: column;
}
.cardBody2{
    margin: 21px 10px 0px;
}
.cardBody2 .span1slider2{
    font-family: "RobotoSlab_",sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 26.38px;
    text-align: left;
    color: #FFFFFF;
}
.cardBody2 .span2slider2{
    font-family: "Roboto_",sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 34px;
    text-align: left;
    color: #FFFFFF;
}
.cardCenter {
    display: flex;
    gap: 9px;
    flex-direction: column;
    justify-content: space-between;
}
.cardCenter > .cardtxt1{
    display: flex;
    text-align: center;

}
.cardCenter > .cardtxt1 img{
    width: 28px;
    height: 28px;
}
.cardtxt1 span{
    margin-left: 11px;
    font-family: "Roboto_",sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 19.84px;
    text-align: left;
    color: #FFFFFF;
    width: 100%;
    height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
}
.cardtxt2{
    display: flex;
    align-items: center;
}
.cardtxt2 img{
    width: 28px;
    height: 28px;
    display: block;
}
.cardtxt2 span{
    margin-left: 11px;
    font-family: "Roboto_",sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 19.84px;
    text-align: left;
    color: #FFFFFF;
    width: 100%;
    height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
}
.starAndTxt{
    width: 105px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/* start my courses page css*/
.myCourses{
    width: 100%;
    height: auto;
    background-image: url("../images/myCoursesBg.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.myCoursesSection{
    width: 67%;
    margin: 0 auto 0 auto;
    padding-bottom: 100px;
    padding-top: 212px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: 108px;
}
.userProfileMenuField{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.userProfileMenuField > span{
    font-family: "RobotoSlab_",sans-serif;
    font-size: 40px;
    font-weight: 600;
    color: #F36528;
}
.userProfileMenu{
    width: 506px;
    height: 43px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
}
.userProfileMenu > li > a{
    text-decoration: none;
    color: white;
    font-family: "Roboto_",sans-serif;
    font-size: 20px;
    font-weight: 400;
}
.cardMyCourses{
    width: 786px;
    position: relative;
}
.mainCoursesFields{
    width: -webkit-fill-available;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.myCoursesProfileField{
    width: 405px;
    height: 533px;
    display: flex;
    margin-right: 60px;
    background: #74A8AB;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
}
.userProfileMenu > li > a:hover{
    color: #F36528;
}
.myCoursesFieldSection{
    width: 291px;
    height: 490px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
}
.myCoursesFieldAcceptCourses{
    height: 533px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 2));
    gap: 60px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: 0;
    margin-bottom: 0;
}
.myCoursesFieldSectionLeft{
    width: 250px;
    height: 459px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.imgFieldCourses{
    border-radius: 50%;
    width: 250px;
    height: 250px;
    overflow: hidden;
}
.imgFieldCourses >img{
    width: 100%;
    height: 100%;
}
.usersProfileInfo{
    width: 249px;
    height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
.usersProfileInfoEmail > span,
.usersProfileInfoLinkdin > span,
.usersProfileInfoPhone > span{
    font-family: "Roboto_",sans-serif;
    margin-left: 37px;
    font-size: 20px;
    color: white;
    font-weight: 400;
    white-space: normal;
    width: -webkit-fill-available;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.usersProfileInfoLinkdin > a{
    font-family: "Roboto_",sans-serif;
    margin-left: 37px;
    font-size: 20px;
    color: white;
    font-weight: 400;
    white-space: normal;
    width: -webkit-fill-available;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-decoration: none;
}
.myCoursesBlocksFieldMain{
    width:344px;
    height: 481px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}
.imgField{
    width: 100%;
    height: 214px;
}
.imgField > img{
    object-fit: cover;
    border-top-right-radius: 30px;
    border-top-left-radius: 30px;
    width: 100%;
    height: 100%;
}
.infoTitle{
    display: block;
    font-family: 'RobotoSlab_', sans-serif;
    font-size: 24px;
    height: 60px;
    width: -webkit-fill-available;
    line-height: 30px;
    color: white;
    font-weight: 500;
    margin: 0 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.myCoursesBlocksFieldMainInfo{
    width: 305px;
    height: 52%;
    margin: 0px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
}
.myCoursesRating{
    width: max-content;
    height: 57px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
}
.myCoursesRating > span{
    font-size: 16px;
    color: white;
    font-weight: 400;
    font-family: "Roboto_", sans-serif;
}
.ratingStarMyourse{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.progress{
    width: 100%;
}
.myCourseercentText{
    color: white;
    font-size: 16px;
    font-weight: 400;
    font-family: "Roboto_", sans-serif;
}
.progress-bar{
    background: #F36528 !important;
}

.myCoursesFieldAcceptCourses::-webkit-scrollbar {
    display: none;
}

.myCoursesFieldAcceptCourses :where(.cardCourses, .img) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.myCoursesFieldAcceptCourses.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.myCoursesFieldAcceptCourses.no-transition {
    scroll-behavior: auto;
}
.myCoursesFieldAcceptCourses.dragging .myCoursesBlocksField {
    cursor: pointer;
    user-select: none;
}
.nameAndUsername{
    font-family: "Roboto_",sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 23.44px;
    text-align: center;
    color: white;
    margin-bottom: 19px;
}
.myCoursesFieldAcceptCourses .myCoursesBlocksField {
    width: 344px;
    height: 481px;
    margin-right: 60px;
    border-radius: 30px;
    background: #74A8AB;
    list-style: none;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    scroll-snap-align: start;
}
.usersProfileInfoEmail, .usersProfileInfoPhone{
    display: flex;
    word-wrap: break-word;
    width: 249px;
    align-items: center;
    flex-direction: row;
    margin-bottom: 18px;
}
.usersProfileInfoLinkdin{
    display: flex;
    word-wrap: break-word;
    width: 249px;
    align-items: center;
    flex-direction: row;
}
.usersProfileInfoEmail img,
.usersProfileInfoPhone img,
.usersProfileInfoLinkdin img{
    width: 31px;
    height: 31px;
}
.footerCard{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footerCard a{
    background: transparent;
    border: none;
    position: relative;
    margin-left: 39px;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footerCard a > img{
    width: 113px;
    height: 50px;
}
.footerCard a:hover img{
    content: url("../images/wishlist1hover.png");
    width: 113px;
    height: 50px;
}
.footerCard a > span{
    color: white;
    width: 100%;
    position: absolute;
    font-family: 'Roboto_',sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 18.75px;
    text-align: center;
    text-decoration: none;
}
.footerImg2{
    margin-right: 10px;
}
.footerImg3{
    width: 43px;
    height: 43px;
    border: 1px;
}
.amd{
    font-family: "Roboto_",sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 18.75px;
    text-align: left;
}
.backButton{
    display: none;
}
.starDivCourses{
    width: 107px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.starDivCourses img{
    width: 21px;
    height: 20px;
}
.myCoursesAm .userProfileMenu {
    width: 550px;
}
.booterImgs{
    width: 99px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.paymentTable{
    position: unset;
}
.tableAround{
    background: #87B4B7;
    max-height: 520px;
    overflow-y: scroll;
    overflow-x: hidden;
    box-shadow: 0px 0px 6px 2px #508C98;
}
.tableAround > table{
    width: 100%;
    height: min-content;
    max-height: 533px;
    border-spacing: 0;
    border-collapse: collapse;
}
.tableAround > table > thead{
    text-transform: uppercase;
    background: #87B4B7;
    height: 83px;
    text-align: center;
    color: #F36528;
    font-weight: 700;
    font-family: "Roboto_",sans-serif;
}
.tableAround > table > thead > tr > th:first-child{
    padding-left: 10px;
}
.tableAround > table > tbody > tr > td:first-child{
    padding-left: 10px;
}
.tableAround > table > tbody{
    font-weight: 400;
    font-size: 16px;
    font-family: "Roboto_",sans-serif;
    color: #FFFFFF;
    background: #74A8AB;
    height: min-content;
    text-align: center;
}
.tableAround > table > tbody > tr{
    height: 60px;
    width: 100%;
    border-bottom: 1px solid white;
}
.tableAround > table > tbody > tr:last-child{
    border-bottom: unset;
}
/*LIKE*/
.large-font {
    width: 43px;
    height: 43px;
    font-size: xxx-large;
    border-radius: 50%;
    text-align: center;
    align-items: center;
    display: flex;
    border: 1px solid #FFFFFF;
    position: relative;
    justify-content: center;
    cursor: pointer;
}
ion-icon.active {
    animation: like 0.5s 1;
    fill: #F36528;
    stroke: none;
    color: #F36528;
}
ion-icon {
    width: 29.63px;
    height: 25.96px;
    color: #FFFFFF;
    fill: transparent;
    stroke-width: 30;
    transition: all 0.5s;
    position: absolute;
}
@-webkit-keyframes like {
    0% {
        transform: scale(1);
    }
    90% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1.1);
    }
}
@media screen and (max-width: 800px) {
    .filterLesson > select{
        width: 45% !important;
    }
}
/* end my courses page css*/
@media screen and (min-width: 2500px){
    .carouselCourses {
        grid-auto-columns: calc((100% / 4 + 2px));
    }
}
@media screen and (min-width: 2000px) and (max-width: 2499.5px){
    .wrapper {
        width: 1290px;
    }
}
@media screen and (max-width: 1910px) {
    .cardMyCourses {
        width: 791px;
    }
    .img img{
        width: 100%;
        height: auto;
        border-radius: 30px 30px 0 0;
    }

    .cardCenter > .cardtxt1{
        width: auto;
        height: 40px;
    }
    .cardCenter > .cardtxt2{
        width: auto;
        height: 40px;
    }
    .cardtxt2 img {
        float: inline-start;
    }
    .cardtxt2 span {
        margin-left: 11px;
    }
}
@media screen and (max-width: 1870px) {
    .myCoursesBlocksFieldMainInfo {
        width: -webkit-fill-available;
    }
    .carouselCourses .cardCourses {
        width: 350px;
        height: 470px;
    }
    .cardCoursesBody {
        height: 207.5px;
    }
    .cardCenter {
        gap: 5px;
    }
}
@media screen and (max-width: 1820px) {
    .myCoursesFieldAcceptCourses {
        gap: 30px;
    }
    .tableAround {
        max-height: 503px;
    }
.cardMyCourses {
    width: 700px;
}
    .courses .title0 {
        font-size: 36px;
    }
.myCoursesBlocksFieldMain {
    width: 335px;
}
    .myCoursesPhoto{
    width: 100%;
    height: 233px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.myCoursesBlocksField > img{
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}
.myCoursesFieldAcceptCourses .myCoursesBlocksField {
    width: 335px;
}
.txt1, .txt2{
    font-size: 36px;
}
    .myCoursesPhoto{
        height: 210px;
    }
}
@media screen and (max-width: 1700px) {
    .imgFieldCourses {
        width: 220px;
        height: 220px;
    }
    .cardCenter {
        gap: 13px;
    }
    .cardCourses > .img {
        height: 205px;
    }
    .myCoursesFieldSectionLeft > img {
        width: 220px;
        height: 220px;
    }
    .myCoursesFieldSectionLeft {
        width: 222px;
        height: 425px;
    }
    .myCoursesProfileField {
    width: 350px;
        height: 500px;
    }
    .usersProfileInfo {
        width: 190px;
    }
    .cardCoursesBody {
        width: 300px;
        height: 230px;
        margin-top: 8px;
    }
    .carouselCourses .cardCourses {
        width: 330px;
        height: 460px;
    }
    .usersProfileInfoEmail > span, .usersProfileInfoLinkdin > span, .usersProfileInfoPhone > span {
        margin-left: 20px;
        font-size: 18px;
    }
    .usersProfileInfoLinkdin > a {
        margin-left: 20px;
        font-size: 18px;
    }
    .usersProfileInfoEmail, .usersProfileInfoPhone, .usersProfileInfoLinkdin {
        width: 185px;
    }
    .myCoursesFieldSection {
        width: 260px;
        height: 430px;
    }
}
@media screen and (max-width: 1600px) {
    .starAndTxt {
        width: 80px;
    }
    .imgField {
        width: 100%;
        height: 186px;
    }
    .imgFieldCourses {
        width: 210px;
        height: 210px;
    }
    .cardBody {
        height: 40px;
    }
    .cardCourses .img {
        height: 186px;
    }
    .myCoursesPhoto{
        height: 170px;
    }
    .myCoursesFieldAcceptCourses{
        height: 440px;
    }
    .courses {
        height: min-content;
    }
    .carouselCourses {
        height: 450px;
    }
.myCoursesProfileField {
    width: 300px;
}
.myCoursesFieldSectionLeft > img {
    width: 180px;
    height: 180px;
}
.myCoursesFieldSectionLeft {
    width: 210px;
    height: 390px;
}
.myCoursesProfileField {
    height: 480px;
}
.myCoursesFieldSection {
    width: 210px;
    height: 440px;
}
    .usersProfileInfo{
        height: 160px;
    }
    .myCoursesFieldSectionRight img{
        width: 25px;
        height: 25px;
    }
    .usersProfileInfoPhone > span,
    .usersProfileInfoEmail > span,
    .usersProfileInfoLinkdin > span {
        margin-left: 20px;
    }
    .usersProfileInfoLinkdin > a {
        margin-left: 20px;
    }
.myCoursesFieldAcceptCourses .myCoursesBlocksField {
    width: 300px;
    height: 422px;
}
.myCoursesBlocksFieldMain {
    width: 300px;
    height: 421px;
}
    .tableAround {
        max-height: 410px;
    }
    .tableAround > table > thead {
        height: 60px;
    }
    .tableAround > table > tbody > tr {
        height: 50px;
    }
.cardMyCourses {
    width: 640px;
}
    .cardBody .span1 {
        font-family: "RobotoSlab_",sans-serif;
        font-size: 15px;
        font-weight: 500;
        line-height: 20px;
        text-align: left;
        height: 40px;
        width: calc(100% - 85px);
    }
    .starDivCourses {
        width: 78px;
    }
    .starDivCourses img {
        width: 15px;
        height: 15px;
    }
    .cardBody .span2 {
        font-family: "Roboto_",sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 20.13px;
        text-align: left;
        color: #FFFFFF;
    }
    .amd {
        font-family: "Roboto_",sans-serif;
        font-size: 11px;
        font-weight: 400;
        line-height: 17.75px;
        text-align: left;
    }
    .cardCenter > .cardtxt1 img {
        width: 20px;
        height: 20px;
    }
    .cardtxt2 img {
        width: 20px;
        height: 20px;
    }
    .footerImg1{
        width: 90px;
        height: 40px;
    }
    .like-cnt{
        width: 35px;
        height: 35px;
        line-height: 32px;
        transform: translate(-105%, -60%) !important;
    }
    .heart {
        width: 20.19px;
        height: 20px;
    }
    .carouselCourses .cardCourses {
        width: 300px;
        height: 420px;
    }
    .cardCoursesBody {
        height: 205px;
        width: 260px;
        margin-top: 13px;
        gap: 0px;
    }
    .cardtxt1 span{
        height: 40px !important;
        font-family: "Roboto_",sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 20.92px;
        text-align: left;
    }
    .cardtxt2 span{
        height: 40px !important;
        font-family: "Roboto_",sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 20.92px;
        text-align: left;
        display: block;
    }
    .txt1, .txt2, .courses .title0 {
        font-size: 32px;
    }
    .footerCard a > span {
        font-size: 14px;
    }
    .footerCard a {
        margin-left: 0px;
    }
    .starDivCourses {
        width: 78px;
    }
    .starDivCourses img {
        width: 15px;
        height: 15px;
    }
}
@media screen and (max-width: 1500px){
    .myCoursesProfileField {
        height: 470px;
        margin-right: 30px;
    }
    .nameAndUsername {
        font-size: 16px;
    }
    .usersProfileInfoEmail img, .usersProfileInfoPhone img, .usersProfileInfoLinkdin img {
        width: 24px;
        height: 24px;
    }
    .usersProfileInfoEmail > span, .usersProfileInfoLinkdin > span, .usersProfileInfoPhone > span {
        margin-left: 11px;
        font-size: 15px;
    }
    .usersProfileInfoLinkdin > a {
        margin-left: 11px;
        font-size: 15px;
    }
    .myCoursesFieldSectionLeft > img {
        width: 160px;
        height: 160px;
    }
}
@media screen and (max-width: 1450px){
    .cardCourses .img {
        height: 161px;
    }
    .cardCenter > .cardtxt1, .cardCenter > .cardtxt2 {
        width: auto;
        height: 30px;
    }
    .cardtxt1 span, .cardtxt2 span  {
        height: 30px !important;
        line-height: 15.92px;
    }

    .myCoursesSection {
        gap: 40px;
    }
    .courses {
        height: min-content;
    }
    .carouselCourses {
        height: 400px;
    }
    .txt1, .txt2, . {
        font-size: 30px;
    }
    .cardBody{
        padding: 0;
    }
    .carouselCourses .cardCourses {
        width: 260px;
        height: 370px;
    }
    .heart {
        width: 15px;
        height: 15px;
    }
    .like-cnt {
        transform: translate(-105%, -62%) !important;
        line-height: 21px;
    }
    .cardCoursesBody {
        width: 230px;
        height: 180px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .cardBody .span1 {
        height: 35px;
        font-family: "RobotoSlab_",sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 18.3px;
        text-align: left;
    }
    .cardCenter {
        gap: 10px;
        height: 70px;
        padding: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .footerCard a > span {
        font-size: 11px;
    }
    .footerCard a > img{
        width: 90px;
        height: 40px;
    }
    .footerCard a:hover img{
        content: url("../images/wishlist1hover.png");
        width: 90px;
        height: 40px;
    }
    .large-font{
        width: 35px;
        height: 35px;
    }
    .footerImg3 {
        width: 35px;
        height: 35px;
    }
    .booterImgs{
        width: 85px;
    }

}
@media screen and (max-width: 1420px) {
    .imgField {
        width: 100%;
        height: 161px;
    }
    .infoTitle {
        font-size: 20px;
    }
    .myCoursesBlocksFieldMainInfo {
        height: 179px;
    }
    .ratingStarMyourse img{
        width: 19px;
        height: 19px;
    }
    .txt1, .txt2, .courses .title0{
        font-size: 26px;
    }
    .myCoursesBlocksFieldMain {
        width: 100%;
        height: 360px;
    }
    .myCoursesProfileField {
        height: 470px;
    }
    .cardMyCourses {
        width: 550px;
    }
    .myCoursesFieldAcceptCourses .myCoursesBlocksField {
        width: auto;
    }
    .myCoursesFieldAcceptCourses .myCoursesBlocksField {
        height: 360px;
        margin-right: inherit;
    }
    .usersProfileInfo {
        position: relative;
        left: -7px;
    }
    .myCoursesFieldAcceptCourses {
        height: 365px;
    }

}
@media screen and (max-width: 1300px) {
    .tableAround {
        max-height: 330px;
    }
    .tableAround > table > thead {
        height: 50px;
    }
    .tableAround > table > tbody > tr {
        height: 40px;
    }
    .imgField {
        width: 100%;
        height: 146px;
    }
    .imgFieldCourses {
        width: 130px;
        height: 130px;
    }
    .myCoursesPhoto{
        height: 150px;
    }
    .myCoursesRating {
        height: 46px;
    }
    .myCoursesRu .userProfileMenuField > span {
        font-size: 35px;
    }
    .cardCoursesBody{
        align-items: center;
    }
    .footerCard{
        width: 88%;
    }
    .booterImgs{
        width: 80px;
    }
    .carouselCourses .cardCourses {
        width: 250px;
    }
    .myCoursesBlocksFieldMain {
        height: 340px;
    }
    .myCoursesFieldAcceptCourses .myCoursesBlocksField {
        height: 341px;
        margin: 0;
    }
    .myCoursesSection {
        gap: 70px;
    }
    .myCoursesFieldSection {
        width: 154px;
        height: 340px;
    }
    .myCoursesProfileField {
        width: 260px;
        height: 360px;
    }
    .myCoursesFieldSectionLeft {
        width: 132px;
        height: 280px;
        align-items: center;
    }
    .myCoursesFieldSectionLeft > img {
        width: 130px;
        height: 130px;
    }
    .usersProfileInfoPhone > span, .usersProfileInfoEmail > span, .usersProfileInfoLinkdin > span {
        font-size: 16px;
        margin-left: 16px;
    }
    .usersProfileInfoLinkdin > a {
        font-size: 16px;
        margin-left: 16px;
    }
    .usersProfileInfo {
        width: 170px;
        height: 145px;
        left: 0;
    }
    .usersProfileInfo img{
        height: 22px;
        width: 22px;
    }
    .myCoursesFieldSectionRight img{
        width: 17px;
        height: 17px;
        position: relative;
        right: -24px;
        top: 5px;
    }
    .infoTitle {
        font-size: 18px;
        line-height: 20px;
        height: 42px;
    }
    .usersProfileInfoEmail, .usersProfileInfoPhone, .usersProfileInfoLinkdin {
        width: 100%;
    }
    .myCoursesBlocksFieldMainInfo {
        margin: 10px 20px 10px;
    }
}
@media screen and (max-width: 1270px) {
    .myCoursesEn .userProfileMenuField > span {
        font-size: 38px;
    }

    .myCoursesRu .userProfileMenu {
        width: 490px;
    }
}
@media screen and (max-width: 1200px) {
    .filterLesson > select {
        width: 33%;
        border: none;
    }
    .starAndTxt {
        width: 65px;
    }
    .cardCenter > .cardtxt1, .cardCenter > .cardtxt2 {
        height: 35px;
    }
    .cardtxt1 span, .cardtxt2 span {
        height: 35px !important;
        line-height: 18.92px;
    }
    .cardCenter {
        height: 80px;
    }
    .cardBody {
        height: 30px;
    }
    .cardBody .span1 {
        height: 30px;
        line-height: 14.3px;
    }
    .cardCourses .img {
        height: 136px;
    }
    .myCoursesProfileField {
        width: 234px;
        height: 360px;
    }
    .myCoursesFieldSection {
        width: 179px;
    }
    .myCoursesFieldSectionLeft {
        width: 172px;
        height: 294px;
    }
    .myCoursesFieldSectionRight img {
        right: 4px;
    }
    .courses {
        height: min-content;
    }
    .carouselCourses {
        height: 350px;
    }
    .cardBody .span1 {
        font-size: 12px;
        width: calc(100% - 70px);
    }
.cardMyCourses {
    width: 500px;
}
    .txt1, .txt2, .courses .title0 {
        font-size: 25px;
    }
    .headerCourses div {
        gap: 7px;
    }
.myCoursesBlocksFieldMain {
    width: 234px;
    height: 318px;
}
.myCoursesFieldAcceptCourses .myCoursesBlocksField {
    width: 234px;
    height: 320px;
}
    .carouselCourses .cardCourses {
        width: 220px;
        height: 330px;
    }
    .starDivCourses img {
        width: 11px;
        height: 11px;
    }
    .starDivCourses {
        width: 56px;
    }
    .cardBody .span2 {
        font-size: 12px;
    }
    .amd {
        font-size: 9px;
    }
    .cardCoursesBody {
        width: 200px;
        height: 170px;
    }
    .myCoursesEn .userProfileMenu {
        width: 460px;
    }
    .myCoursesRu .userProfileMenuField > span,
    .myCoursesAm .userProfileMenuField > span {
        font-size: 30px;
    }
    .large-font{
        width: 31px;
        height: 31px;
    }
    ion-icon{
        width: 18.63px;
        height: 18.63px;
    }
    .footerImg3 {
        width: 31px;
        height: 31px;
    }
    .coursisBtnField > a > img{
        width: 72px;
        height: 31px;
    }
    .footerCard a:hover img{
        content: url("../images/wishlist1hover.png");
        width: 72px;
        height: 31px;
    }
    .footerCard {
        width: 83%;
    }
    .booterImgs {
        width: 70px;
        height: 31px;
    }
}
@media screen and (max-width: 1160px) {
    .myCoursesFieldSectionRight img{
        width: 15.18px;
        height: 15.18px;
    }
    .myCoursesBlocksFieldMainInfo {
        height: 162px;
        margin: 0px 20px 10px;
    }
    .infoTitle {
        height: 41px;
    }
}
@media screen and (max-width: 1125px) {
    .txt1, .txt2, .courses .title0 {
        font-size: 25px;
    }
}
@media screen and (max-width: 1100px) {
    .imgField {
        width: 100%;
        height: 124px;
    }
    .carousel2 .card2 {
        width: 190px;
    }
    .imgFieldCourses {
        width: 93px;
        height: 94px;
    }
    .textForEmpty > span{
        margin-top: 20%;
    }
    .starAndTxt {
        width: 65px;
        height: 26px;
    }
    .cardCourses .img {
        height: 124px;
    }
    .cardCenter > .cardtxt1 {
        height: 25px;
    }
    .cardCenter > .cardtxt2 {
        height: 25px;
    }
    .myCoursesPhoto{
        height: 127px;
    }
    .myCoursesSection {
        gap: 40px;
    }
    .usersProfileInfo {
        width: 100%;
        height: 106px;
    }
    .courses .title0{
        margin: 0 0 1% 0%;
    }
    .myCoursesSection {
        width: auto;
        padding: 95px 6.9% 100px 6.8%;
    }
    .userProfileMenu {
        width: 423px;
    }
    .userProfileMenu > ul > li{
        margin: 0px 10px;
    }
    .ratingStarMyourse img{
        width: 16px;
        height: 15px;
    }
    .footerCard a > span{
        font-family: "Roboto_",sans-serif;
        font-size: 10px;
        font-weight: 500;
        line-height: 11.72px;
        text-align: center;
    }
    .like-cnt, .footerImg3 {
        width: 22px;
        height: 22px;
    }
    .heart {
        width: 12px;
        height: 10px;
    }
    .like-cnt {
        line-height: 16px;
    }
    .cardBody {
        padding: 0;
    }
    .cardCenter {
        padding: 0;
    }
.userProfileMenuField > span{
    font-size: 22px;
    font-weight: 600;
    line-height: 29.01px;
    text-align: left;
}
.userProfileMenu > li > a{
    font-size: 14px;
    font-weight: 400;
    line-height: 16.41px;
    text-align: left;
}
.myCoursesProfileField {
    width: 203px;
    height: 300px;
}
.myCoursesFieldSectionLeft {
    width: 150px;
    height: 220px;
}
    .myCoursesFieldSection {
        width: 164px;
        height: 240px;
    }
.myCoursesFieldSectionRight img{
    width: 15.18px;
    height: 15.18px;
    right: 0px;
    top: 0;
}
.myCoursesFieldSectionLeft > img{
    width: 93px;
    height: 94px;
}
.nameAndUsername{
    font-size: 14px;
    font-weight: 600;
    line-height: 16.41px;
    text-align: center;
    margin-bottom: 10px;
}
.usersProfileInfoPhone > span, .usersProfileInfoEmail > span, .usersProfileInfoLinkdin > span {
    font-size: 14px;
    font-weight: 400;
    line-height: 16.41px;
    text-align: left;
}
    .usersProfileInfoPhone, .usersProfileInfoEmail{
        margin-bottom: 10px;
    }
    .usersProfileInfoLinkdin > a {
        font-size: 14px;
        font-weight: 400;
        line-height: 16.41px;
        text-align: left;
    }
.myCoursesFieldAcceptCourses .myCoursesBlocksField {
    width: 200px;
    height: 264px;
}
    .myCoursesBlocksFieldMain {
        width: 200px;
        height: 264px;
    }
.infoTitle{
    font-size: 11px;
    font-weight: 500;
    line-height: 15px;
    text-align: left;
    height: 30px;
}
.myCoursesRating{
    width: 93.27px;
    height: 33.28px;
}
.myCoursesRating > span{
    font-size: 10px;
    font-weight: 400;
    line-height: 11.72px;
    text-align: left;
}
.myCourseercentText{
    font-size: 10px;
    font-weight: 400;
    line-height: 11.72px;
    text-align: left;
}
.cardMyCourses {
    width: 423px;
}
.myCoursesFieldAcceptCourses {
    height: 550px;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 20px;
    padding: 0;
    margin: 0;
}
.myCoursesBlocksFieldMainInfo {
    height: 130px;
    /*gap: 10px;*/
    margin: 0px 15px 10px;
    justify-content: space-evenly;
}
    .backButton {
        width: 40px;
        height: 40px;
        display: block;
        position: relative;
    }
    .headerCourses {
        width: 100%;
        padding: 96px 6.9% 0px 6.8%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .courses{
        height: min-content;
        display: flex;
        padding-top: 0;
        flex-direction: column;
        align-items: center;
    }
    .headerCourses div {
        width: 90%;
    }
    .txt1, .txt2, .courses .title0 {
        font-family: "RobotoSlab_",sans-serif;
        font-size: 25px;
        font-weight: 400;
        line-height: 58px;
        text-align: center;
    }
    .card2 .img2{
        width: 120px;
        height: 120px;
        margin-right: 20px;
    }
    .cardCourses2 {
        width: auto;
        margin: 0px 7% 0px 17%;
    }
    .cardBody2 .span1slider2{
        font-family: "RobotoSlab_",sans-serif;
        font-size: 19px;
        font-weight: 700;
        line-height: 25px;
        text-align: left;
    }
    .cardBody2 .span2slider2{
        font-family: 'Roboto_',sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 30px;
        text-align: left;
    }
    .wrapper2 .carousel2 {
        grid-auto-columns: calc((100% / 2 + 2px));
        gap: 0;
        margin-bottom: 0;
        padding-left: 0;
    }
    .cardBody2 {
        margin-top: 7px;
    }
    .cardCourses_ {
        width: 80%;
        margin: 40px 3% 0px 10%;
        padding-top: 0;
    }
    .cardBody .span1{
        height: 28px;
        font-family: "RobotoSlab_",sans-serif;
        font-size: 11px;
        font-weight: 500;
        line-height: 14.3px;
        text-align: left;
        width: calc(100% - 70px);
    }
    .starDivCourses {
        width: 100%;
        height: 10px;
    }
    .starDivCourses img {
        width: 11px;
        height: 11px;
    }
    .cardBody .span2{
        font-family: "Roboto_", sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 11.72px;
        text-align: left;
    }
    .amd{
        font-family: "Roboto_", sans-serif;
        font-size: 8px;
        font-weight: 400;
        line-height: 9.38px;
        text-align: left;
    }
    .cardCenter > .cardtxt1 img {
        width: 14px;
        height: 14px;
    }
    .cardtxt2 img {
        width: 14px;
        height: 14px;
    }
    .cardtxt1 span{
        height: 25px !important;
        font-family: "Roboto_",sans-serif;
        font-size: 10px;
        font-weight: 500;
        line-height: 12.92px;
        text-align: left;
        margin-left: 6px;
    }
    .large-font {
        width: 28px;
        height: 28px;
    }
    .footerImg3 {
        width: 28px;
        height: 28px;
    }
    .booterImgs {
        width: 65px;
        height: 31px;
    }
    .cardtxt2 span{
        height: 25px !important;
        font-family: "Roboto_",sans-serif;
        font-size: 10px;
        font-weight: 500;
        line-height: 12.92px;
        text-align: left;
        margin-left: 6px;
    }
    .footerCard a {
        margin-left: 0px;
    }
    .footerImg1{
        width: 71.73px;
        height: 30.9px
    }
    .footerImg2{
        width: 22px;
        height: 22px;
    }
    .cardCenter {
        height: 60px;
    }
    .cardCoursesBody {
        width: 170px;
        height: 138px;
    }
    .carouselCourses {
        height: 300px;
    }
    .cardCourses .img{
        padding: 0;
    }
    .carouselCourses {
        grid-auto-columns: calc((100% / 3));
    }
    .carouselCourses .cardCourses {
        width: 200px;
        height: 285px;
    }
    .footerCard{
        width: 90%;
        padding: 0;
    }
    .myCoursesEn .userProfileMenu,
    .userProfileMenu,
    .myCoursesRu .userProfileMenu,
    .myCoursesAm .userProfileMenu{
        /*width: 375px;*/
        width: max-content;
        height: 16px;
    }
    .paymentField > li, .coursesFieldPage > li{
        margin: 0px 10px;
    }
    .myCoursesEn .userProfileMenuField > span,
    .userProfileMenuField > span,
    .myCoursesRu .userProfileMenuField > span{
        color: #F36528;
        font-family: 'RobotoSlab_',sans-serif;
        font-size: 22px;
        font-weight: 600;
        line-height: 29.01px;
        text-align: left;
    }
}
@media screen and (max-width: 950px) {
    .txt1, .txt2, .courses .title0 {
        font-size: 23px;
    }
    .carouselCourses {
        grid-auto-columns: calc((100% / 3));
    }
    .cardCourses_ {
        width: 83%;
        margin: 40px 2.9% 0px 4.8%;
        padding-top: 0;
    }
}
@media screen and (max-width: 900px) {
    .txt1, .txt2, .courses .title0 {
        font-size: 21px;
    }
    .carouselCourses {
        grid-auto-columns: calc((100% / 3));
    }
    .cardCourses_ {
        width: 86%;
        margin: 40px 0% 0px 3.8%;
        padding-top: 0;
    }
}
@media screen and (max-width: 830px) {
    .txt1, .txt2, .courses .title0 {
        font-size: 20px;
    }
    .carouselCourses {
        grid-auto-columns: calc((100% / 2) + 1px);
    }
    .cardCourses_ {
        width: 70%;
        margin: 40px 2.9% 0px 11.8%;
        padding-top: 0;
    }
}
@media screen and (max-width: 760px) {
    .imgField {
        width: 100%;
        height: 111px;
    }
    .txt1, .txt2, .courses .title0 {
        font-size: 16px;
    }
    .carouselCourses {
        grid-auto-columns: calc((100% / 2));
    }
    .headerCourses div {
        width: 93%;
    }
    .wrapper2 .carousel2 {
        grid-auto-columns: calc((100% / 2 + 4px));
    }
    .cardCourses2 {
        width: 70%;
        margin: 0px 7.9% 0px 13.8%
    }
    .cardCourses_ {
        width: 70%;
        margin: 40px 3.9% 0px 11.8%;
        padding-top: 0;
    }
    .cardMyCourses {
        width: 382px;
    }
    .myCoursesProfileField {
        width: 180px;
        height: 260px;
    }
    .myCoursesFieldAcceptCourses .myCoursesBlocksField {
        width: 180px;
        height: 240px;
    }
    .myCoursesBlocksFieldMain {
        width: 180px;
        height: 240px;
    }
    .usersProfileInfoPhone > span, .usersProfileInfoEmail > span, .usersProfileInfoLinkdin > span {
        font-size: 12px;
        line-height: 13.41px;
        margin-left: 11px;
    }
    .usersProfileInfoLinkdin > a {
        font-size: 12px;
        line-height: 13.41px;
        margin-left: 11px;
    }
    .usersProfileInfo img {
        height: 18px;
        width: 18px;
    }
    .usersProfileInfoEmail, .usersProfileInfoPhone, .usersProfileInfoLinkdin {
        width: 130px;
    }
    .usersProfileInfo {
        width: 142px;
    }
    .myCoursesFieldSectionLeft {
        width: 150px;
        height: 210px;
    }
    .myCoursesFieldSection {
        width: 152px;
    }
    .myCoursesFieldSectionRight img {
        right: 15px;
    }
    .myCoursesFieldSection {
        height: 210px;
    }
    .myCoursesFieldAcceptCourses {
        height: 510px;
    }
}
@media screen and (max-width: 750px) {
    .carouselCourses {
        grid-auto-columns: calc((100% / 2 + 2px));
    }
    .cardCourses_ {
        width: 70%;
        margin: 40px 0% 0px 7%;
        padding-top: 0;
    }
}
@media screen and (max-width: 730px) {
    .cardBody2 .span2slider2 {
        font-family: 'Roboto_', sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 25px;
        text-align: left;
    }
    .cardBody2 .span1slider2 {
        font-size: 16px;
    }
}
@media screen and (max-width: 700px) {
    .paymentField > li ,.coursesFieldPage > li{
        margin: 0px 4px;
    }
    .myCoursesEn .userProfileMenuField > span, .userProfileMenuField > span, .myCoursesRu .userProfileMenuField > span {
        font-size: 19px;
    }
    .myCoursesEn .userProfileMenu, .userProfileMenu, .myCoursesRu .userProfileMenu {
        width: 350px;
    }
    .myCoursesProfileField{
        display: none;
    }
    .mainCoursesFields {
        height: 500px;
        justify-content: center;
    }
}
@media screen and (max-width: 599.5px) {
    .filterLesson > select {
        width: 58% !important;
    }
    .filterLesson{
        margin-top: 10px;
        flex-direction: column;
    }
    .filterLesson > select:nth-child(2){
        margin-left: 0px;
        margin-top: 10px;
    }
    .textForEmpty > span {
        margin-bottom: 20%;
    }
    .myCoursesSection {
        padding: 95px 6.9% 50px 6.8%;
    }
    .myCourses{
        background: #5D9A9D;
    }
    .userProfileMenuField{
        display: none;
    }
    .myCoursesTitleField{
        width: 100%;
        display: flex;
        align-items: center;
    }
    .myCoursesTitleField div{
        font-family: "Roboto_",sans-serif;
        font-size: 18px;
        font-weight: 500;
        line-height: 21.09px;
        text-align: center;
        width: 100%;
        color: #F36528;
    }
    .ellipseButton {
        display: block;
        position: absolute;
    }
    .coursesMobBackButton{
        display: contents;
    }
    .backButton {
        width: 30px;
        height: 30px;
    }
}
@media screen and (max-width: 450px){
    .filterLesson > select {
        width: 84% !important;
    }
    .tablePaymentMobile{
        margin-bottom: 50px;
    }
    .myCoursesFieldAcceptCourses {
        flex-direction: column;
        overflow-x: visible;
        height: auto;
        scroll-snap-type: none;
        gap: 30px;
    }
    .myCoursesSectionMobile {
        width: 88%;
        margin: 0 auto;
        padding-top: 95px;
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
    }
    .myCoursesMobile{
        margin-top: 33px;
        width: 100%;
    }
    .myCoursesBlocksField {
        margin: 0px auto 30px;
        width: 318px;
        height: 385px;
        background: #74A8AB;
        border-radius: 30px;
    }
    .myCoursesBlocksFieldMain {
        width: 318px;
    }
    .mainCoursesFields{
        height: auto;
    }
    .cardMyCourses {
        width: 320px;
        height: auto;
    }
    .myCoursesSection{
        display: none;
    }
    .imgField{
        width: 318px;
        height: 190px;
    }
    .myCoursesBlocksFieldMain{
        height: 131px;
        width: 285px;
        margin: 20px 16.5px;
    }
    .myCoursesBlocksFieldMain > span{
        font-family: 'RobotoSlab_',sans-serif;
        font-size: 16px;
        font-weight: 500;
        line-height: 21.1px;
        margin-left: 0px;
        width: 100%;
        height: 42px;
        color: white;
    }
    .blogInfoPercent{
        width: 100%;
        height: 20px;
    }
    .myCoursesRating{
        height: 35px;
        width: 93px;
    }
    .ratingStarMyourse{
        top: 0px;
        height: 15px;
        width: 60px;
    }
    .ratingStarMyourse > img{
        height: 15px;
        width: 15px;
    }
    .seeMoreText {
        position: absolute;
        color: #F36528;
        font-family: 'Roboto_',sans-serif;
        font-size: 12px;
        font-weight: 500;
        line-height: 14.06px;
        width: max-content;
    }
}
@media screen and (max-width: 380px) {
    .myCoursesBlocksField {
        width: 283px;
        height: 370px;
    }
    .imgField{
        width: 283px;
        height: 170px;
    }
    .cardMyCourses {
        width: 280px;
    }
    .myCoursesFieldAcceptCourses .myCoursesBlocksField {
        width: 280px;
        height: 370px;
    }
    .myCoursesBlocksFieldMain {
        width: 250px;
        height: 145px;
    }
}

@media screen  and (min-width: 451px) {
    .myCoursesSectionMobile{
        display: none;
    }
}
@media screen  and (min-width: 600px) and (max-width: 700px) {
    .myCoursesEn .userProfileMenuField > span, .userProfileMenuField > span, .myCoursesRu .userProfileMenuField > span {
        font-size: 19px;
    }
    .myCoursesEn .userProfileMenu, .userProfileMenu, .myCoursesRu .userProfileMenu {
        width: 350px;
    }
    .cardCourses_ {
        width: 70%;
        margin: 40px 9.9% 0px 14.8%;
        padding-top: 0;
    }
    .carouselCourses {
        grid-auto-columns: calc((100% / 2 + 2px));
    }
}
@media screen  and (min-width: 300px) and (max-width: 399px) {
    .cardBody .span1 {
        line-height: 20.3px;
        height: 40px;
        width: calc(100% - 110px);
    }
    .courses{
        background: #5D9A9D;
        height: min-content;
        padding-bottom: 0px;
    }
    .cardCourses_{
        display: none;
    }
    /*.cardCourses2, .title0{*/
    /*    display: none;*/
    /*}*/
    .wrapper2 .carousel2 {
        grid-auto-columns: calc((100%));
    }
    .headerCourses{
        width: 100%;
        height: 170px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .headerCourses div{
        margin-left: 10px;
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .txt1, .txt2{
        font-size: 16px;
        height: 20px;
        line-height: 20px;
    }
    .cardCourses{
        width: 300px;
        height: 435px;
        margin: 30px auto 0px;
    }
    .img{
        width: 100% !important;
        height: 203px !important;
        border-top-right-radius: 24px;
        border-top-left-radius: 24px;
    }
    .cardCoursesBody{
        width: 100%;
        height: 232px;
        margin-top: 0px;
        background: #74A8AB;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
    }
    .cardBottomMainField{
        width: 278px;
        height: 193px;
        margin: 17px auto 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: end;
    }
    .cardCenter{
        width: 278px;
        height: 80px;
    }
    .footerCard{
        width: 240px;
        height: 43px;
    }
    .cardtxt1{
        width: 100%;
        height: 35px !important;
    }
    .cardtxt2{
        width: 100%;
        height: 35px !important;
    }
    .cardtxt1 > img{
        width: 28px !important;
        height: 28px !important;
    }
    .cardtxt1 > span{
        height: 35px !important;
        width: 100%;
        font-size: 14px;
        line-height: 17.36px;
    }
    .cardtxt2 > img{
        width: 28px !important;
        height: 28px !important;
    }
    .cardtxt2 > span{
        height: 35px !important;
        width: 100%;
        font-size: 14px;
        line-height: 17.36px;
    }
    .cardBody{
        width: 100%;
        height: 50px;
    }
    .span1{
        width: 193px;
        font-size: 16px !important;
    }
    .cardBody .span2 {
        line-height: 16.72px;
    }
    .starAndTxt{
        width: 105px;
        height: 38px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        margin-left: 0px;
    }
    .starDivCourses > img{
        width: 17px;
        height: 16px;
    }
    .span2{
        font-size: 16px !important;
    }
    .amd{
        font-size: 16px !important;
    }
    .footerCard > a > img{
        width: 97px;
        height: 41px;
    }
    .footerCard a:hover img{
        content: url("../images/wishlist1hover.png");
        width: 97px;
        height: 41px;
    }
    .footerCard > a > span{
        font-size: 14px;
    }
    .large-font{
        width: 43px !important;
        height: 43px !important;
    }
    .booterImgs{
        width: 102px;
        height: 43px;
    }
    .footerImg3{
        width: 43px;
        height: 43px;
    }
    ion-icon{
        width: 29.63px;
        height: 29.63px;
    }
}
@media screen  and (min-width: 400px) and (max-width: 599px) {
    .cardBody .span1 {
        line-height: 20.3px;
        height: 40px;
        width: calc(100% - 110px);
    }
    .courses{
        background: #5D9A9D;
        height: min-content;
        padding-bottom: 0px;
    }
    .cardCourses_{
        display: none;
    }
    /*.cardCourses2, .title0{*/
    /*    display: none;*/
    /*}*/
    .wrapper2 .carousel2 {
        grid-auto-columns: calc((100%));
    }
    .headerCourses{
        width: 100%;
        height: 170px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .headerCourses div{
        margin-left: 10px;
        width: 100%;
        height: max-content;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .txt1, .txt2{
        font-size: 16px;
        height: 20px;
        line-height: 20px;
    }
    .cardCourses{
        width: 320px;
        height: 435px;
        margin: 30px auto 0px;
    }
    .img{
        width: 100% !important;
        height: 203px !important;
        border-top-right-radius: 24px;
        border-top-left-radius: 24px;
    }
    .cardCoursesBody{
        width: 100%;
        height: 232px;
        margin-top: 0px;
        background: #74A8AB;
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
    }
    .cardBottomMainField{
        width: 278px;
        height: 193px;
        margin: 17px auto 0px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: end;
    }
    .cardCenter{
        width: 278px;
        height: 80px;
    }
    .footerCard{
        width: 240px;
        height: 43px;
    }
    .cardtxt1{
        width: 100%;
        height: 35px !important;
    }
    .cardtxt2{
        width: 100%;
        height: 35px !important;
    }
    .cardtxt1 > img{
        width: 28px !important;
        height: 28px !important;
    }
    .cardtxt1 > span{
        width: 100%;
        font-size: 14px;
        line-height: 17.36px;
        height: 35px !important;
    }
    .cardtxt2 > img{
        width: 28px !important;
        height: 28px !important;
    }
    .cardtxt2 > span{
        height: 35px !important;
        width: 100%;
        font-size: 14px;
        line-height: 17.36px;
    }
    .cardBody{
        width: 100%;
        height: 50px;
    }
    .span1{
        width: 193px;
        font-size: 16px !important;
    }
    .cardBody .span2 {
        line-height: 16.72px;
    }
    .starAndTxt{
        width: 105px;
        height: 38px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        margin-left: 0px;
    }
    .starDivCourses > img{
        width: 17px;
        height: 16px;
    }
    .span2{
        font-size: 16px !important;
    }
    .amd{
        font-size: 16px !important;
    }
    .footerCard > a > img{
        width: 97px;
        height: 41px;
    }
    .footerCard a:hover img{
        content: url("../images/wishlist1hover.png");
        width: 97px;
        height: 41px;
    }
    .footerCard > a > span{
        font-size: 14px;
    }
    .large-font{
        width: 43px !important;
        height: 43px !important;
    }
    .booterImgs{
        width: 102px;
        height: 43px;
    }
    .footerImg3{
        width: 43px;
        height: 43px;
    }
    ion-icon{
        width: 29.63px;
        height: 29.63px;
    }
}
@media screen  and (min-width: 600px) {
    .cardCourses{
        display: none;
    }
    .mobilebtn{
        display: none;
    }
}
@media screen  and (min-width: 300px) and (max-width: 599px) {
    .courses .title0 {
        margin: 0 10px 6% 10px;
    }
    .title0{
        line-height: 20px !important;
    }
    .cardCoursesMobile{
        margin-bottom: 44px;
    }
    .cardCourses{
        display: none;
    }
    .cardCourses:nth-child(1),
    .cardCourses:nth-child(2){
        display: block;
    }
}
@media screen and (max-width: 599px) {
    .cardCourses2 {
        width: 60%;
        margin: 0px 0% 0px 30%;
    }
}
@media screen and (max-width: 530px) {
    .cardCourses2 {
        width: 60%;
        margin: 0px 0% 0px 24%;
    }
}
@media screen and (max-width: 500px) {
    .cardCourses2 {
        width: 60%;
        margin: 0px 0% 0px 19%;
    }
}
@media screen and (max-width: 450px) {
    .cardCourses2 {
        width: 50%;
        margin: 0px 0% 0px 11%;
    }
}
@media screen and (max-width: 400px) {
    .cardCourses2 {
        width: 50%;
        margin: 0px 0% 0px 5%;
    }
}
@media screen and (max-width: 350px) {
    .cardCourses2 {
        width: 55%;
        margin: 0px 0% 0px 0%;
    }
}