@use "sass:math";
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;300&family=Noto+Sans+Arabic:wght@200;500&display=swap');

:root {
    --theme-color: #0D5EF4;
    --theme-color2: #F20F10;
    --title-color: #0F2239;
    --body-color: #4D5765;
    --smoke-color: #F3F7FB;
    --black-color: #000000;
    --white-color: #ffffff;
    --light-color: #72849B;
    --yellow-color: #FFB539;
    --success-color: #28a745;
    --error-color: #dc3545;
    --border-color: #ecf1f9;
    --title-font: 'Jost', sans-serif;
    --body-font: 'Roboto', sans-serif;
    --icon-font: "Font Awesome 6 Pro";
    --main-container: 1380px;
    --container-gutters: 24px;
    --section-space: 120px;
    --section-space-mobile: 80px;
    --section-title-space: 70px;
    --ripple-ani-duration: 5s
}

.video-course {
    --box-space: 30px;
    text-align: center
}

.video-course .course-img {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}
.video-course .course-img img{
   height: 250px;
   width:600px;
   object-fit: cover;
}
.video-course .course-img:before {
    content: '';
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #11213D 100%);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #11213D 100%);
    z-index: 1
}

.video-course .play-btn {
    --icon-size: 70px;
    font-size: 1em;
    color: var(--white-color);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-0%, -220%);
    transform: translate(-0%, -220%);
}

.video-course .play-btn>i {
    border: 2px solid;
    background-color: transparent;
    color: var(--white-color)
}

.video-course .play-btn:after,
.video-course .play-btn:before {
    background-color: transparent;
    border: 2px solid
}

.video-course .play-btn:hover>i {
    color: var(--theme-color)
}

.video-course .play-btn:hover:after,
.video-course .play-btn:hover:before {
    border-color: var(--theme-color)
}

.video-course .tag {
    top: 30px;
    right: 30px
}

.video-course .course-content {
    max-width: calc(100% - var(--box-space)*2);
    margin-left: auto;
    margin-right: auto;
    background: var(--white-color);
    border: 1px solid #ECF1F9;
    box-shadow: 0px 9px 14px rgba(97, 94, 94, 0.06);
    border-radius: 10px;
    margin-top: -54px;
    padding: 30px 15px;
    position: relative;
    z-index: 3;
}

.video-course .course-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 3px;
    margin-top: -0.28em
}

.video-course .author-name {
    display: block;
    margin-bottom: -0.45em;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto
}

.video-course:hover .course-img img {
    -webkit-transform: scale(1.08);
    -ms-transform: scale(1.08);
    transform: scale(1.08)
}
.play-btn {
    display: inline-block;
    position: relative;
    z-index: 1
}

.play-btn>i {
    display: inline-block;
    width: var(--icon-size, 100px);
    height: var(--icon-size, 100px);
    line-height: var(--icon-size, 100px);
    text-align: center;
    background-color: var(--white-color);
    color: var(--theme-color);
    font-size: var(--icon-font-size, 1.2em);
    border-radius: 50%;
    z-index: 1;
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s
}

.play-btn:after,
.play-btn:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: var(--title-color);
    z-index: -1;
    border-radius: 50%;
    -webkit-transition: all ease 0.4s;
    transition: all ease 0.4s
}

.play-btn:after {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    display: none;
}

.play-btn:hover:after,
.play-btn:hover::before,
.play-btn:hover i {
    background-color: var(--theme-color);
    color: var(--white-color)
}