.orange-div{
    width: 4px;
    height: 46px;
    background-color: #EC6106;
    border-radius: 5px;
}

.icon-pink{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background-color: rgba(244, 169, 190, 0.2);
    border-radius: 50%;
}

.icon-div{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    padding: 10px;
    background-color: #FFCC62;
}

.text-green{
    color: #00A911;
}
.text-pink{
    color: #F4A9BE;
}
.bar-orange{
    background-color: #EC6106 !important;
}
.text-orange1{
    color: #ec6106;
}

.orange-div2{
    background-color: #ffebdf !important;
}
.grad-color{
    background-image: linear-gradient(134deg, #000 -9.7%, #EB660B 106.16%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.svg-div{
    top: -38px;
    left: -47px;
}
.svg-div2{
    top: -2px;
    right: 251px;
}

.content_text{
    position: relative;
    z-index: 10;
}
.content_img{
    position: relative;
    z-index: 10;
}

.curve-svg{
    position: absolute;
    width: 100%;
}

.filter-org{
    filter: invert(50%) sepia(74%) saturate(4062%) hue-rotate(1deg) brightness(95%) contrast(95%);
}

.cmt-div{
    display: flex;
    align-items: center;
    border-radius: 12px;
}
.cmt-img{
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 50px;
    border: 2px solid rgba(236, 97, 6, 0.28);
}
.cmt-div2{
    display: flex;
    align-items: center;
    border-radius: 12px;
    background-color: #FDF6E1;
}
.cmt-img2{
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 50px;
    border: 2px solid #FFE7A0;
}
.play_course .play_course_btn {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: var(--btn_secondary);
    border-radius: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    gap: 4px;
    align-items: center;
    flex-direction: column;
    transform: 0.3s;
    cursor: pointer;
    padding: 30px;
}
.play_course .play_course_btn:hover {
    background: var(--main-primary);
    color: var(--text-color3);
    transition: 0.3s;
}

.play_course .play_course_btn:hover span {
    color: #fff !important;
    text-decoration: none;
}

.top-img{
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 50px;
    border: 2px solid rgba(236, 97, 6, 0.28);
}

.main .wrapper_card .circle_div4 {
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F77A27;
    top: 10px;
    right: -20px;
    z-index: -1;
}

@media screen and (max-width: 576px){
    .main .welcome_wrapper{
        display: flex;
        flex-direction: column;
    }
    .main .wrapper_card .circle_div2 {
        right: 126px;
    }
}
@media screen and (min-width: 576px){
    .main .wrapper_card .circle_div2 {
        right: 153px;
    }
}

@media screen and (min-width: 768px){
    .main .wrapper_card .circle_div2 {
        right: -20px;
    }
}

/* circle-4 */

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

    .main .wrapper_card .circle_div4 {
        right: 110px;
    }
}
@media screen and (min-width: 576px){
    .main .wrapper_card .circle_div4 {
        right: 130px;
    }
}

@media screen and (min-width: 768px){
    .main .wrapper_card .circle_div4 {
        right: -26px;
    }
}