// Course Style
.edu-course-area {
    &.course-area-8 {
        background-color: var(--color-lighten01);
        position: relative;
        overflow: hidden;
        &::before {
            display: none;
        }
        ul {
            padding-left: 0;
            list-style: none;
    
            .section-title {
                display: inline-block;
                margin-top: 0px;
                @media #{$md-layout-1} {
                    display: block;
                    text-align: center;
                }
            }
            .course-view-all {
                text-align: end;
                margin-top: -140px;
                margin-bottom: 55px;
                @media #{$md-layout-1} {
                    margin-top: -15px;
                    margin-bottom: 33px;
                    text-align: center;
                }
                a {
                    &:hover {
                        color: var(--color-white);
                    }
                }
            }
        }
        .edu-course {
            &.course-style-4 {
                
                &::after {
                    position: absolute;
                    content: '';
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    width: 100%;
                    height: 100%;
                    background: var(--gradient-primary);
                    border-radius: 5px;
                    opacity: 0;
                    visibility: hidden;
                    transition: all .4s ease-in-out;
                }
                .inner {
                    position: relative;
                    z-index: 12;
                }
                .thumbnail{
                    a {
                        &::after {
                            border-radius: 50%;
                        }
                        img {
                            border-radius: 50% !important;
                        }
                    }
                    .time-top {
                        left: 0 !important;
                    }
                }
                &:hover {
                    background: transparent;
                    &::after {
                        opacity: 1;
                        visibility: visible;
                    }
                    .course-hover-content-wrapper {
                        opacity: 1;
                    }
                    .thumbnail {
                        a {
                            img {
                                transform: scale(1);
                            }
                        }
                    }
                } 
            }
}
        
        .shape-group {
            li {
                &.shape-1 {
                    left: -280px;
                    top: 13px;
                }
                &.shape-2 {
                    left: -600px;
                    top: -430px;
                    z-index: -1;
                    span {
                        width: 570px;
                        height: 570px;
                        border: 1px solid var(--color-border);
                        border-radius: 50%;
                        display: block;
                    }
                }
                &.shape-3 {
                    bottom: -33px;
                    right: -101px;
                }
                &.shape-4 {
                    right: -100px;
                    bottom: -12px;
                    z-index: 1;
                }
            }
        }
    }
}