@use "../abstract" as *;

.edu-webinar {
    display: flex;
    gap: 25px;
    padding: 25px;
    background-color: #F6F8FB;
    border-radius: 10px;
    @media #{$xl,$lg,$sm,$xs} {
		flex-direction: column;
	}
    &-img {
        min-width: 230px;
        width: 230px;
        position: relative;
        @media #{$xl,$lg,$sm,$xs} {
            width: 100%;
        }
        img {
            width: 100%;
            object-fit: cover;
            border-radius: 10px;
        }
    }
    &-text {
        &-title {
            font-size: 24px;
            font-weight: 700;
            margin-bottom: 15px;
            line-height: 1.25;
            &:hover {
                color: $theme-color;
            }
        }
        ul {
            display: flex;
            gap: 20px;
            margin-bottom: 5px;
            li {
                display: flex;
                align-items: center;
                font-size: 16px;
                font-weight: 600;
                color: $body-text;
                i {
                    color: $theme-color;
                    margin-right: 5px;
                    transform: translateY(-1px);
                }
            }
        }
    }
    .webinar-badge {
        position: absolute;
        top: 15px;
        left: 0px;
        padding: 0px 10px;
        font-size: 12px;
        font-weight: 600;
        background: $theme-color;
        display: inline-block;
        color: $white;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }
    .edu-btn {
        height: 42px;
        padding: 0px 25px;
        line-height: 40px;
        background: none;
        color: $theme-color;
        border: 1px solid $theme-color;
        &:hover {
            background: $theme-color;
            color: $white;
        }
    }
}

.course-webinar-video {
    .course-video-thumb {
        position: relative;
        &::before {
            position: absolute;
            content: "";
            height: 100%;
            width: 100%;
            top: 0;
            left: 0;
            background: rgba(0,0,0,.7);
        }
    }
}