/*********************************************
*********** start navbar ********************
*******************************************/

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

::-moz-selection {
    background-color: var(--main-color);
    color: #fff;
    text-shadow: none;
}

::selection {
    background-color: var(--main-color);

    color: #fff;
    text-shadow: none;
}

.header {
    padding: 18rem 2rem 23rem;
    transition: 0.3s all ease;
    background: url(../imgs/bg_pages.svg) no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.secMain .bg {
    background: url(../imgs/bg_pages.svg) no-repeat;
    background-position: center;
    background-size: cover;
}
.header::after,
.secMain .bg::after,
.header::before,
.secMain .bg::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 13rem;
    background: url(../imgs/edge2.svg);
    background-size: cover;
    transition: 0.3s all ease;
    opacity: 1;
}
.header::before,
.secMain .bg::before {
    background: url(../imgs/edge3.svg);
    background-size: cover;
    opacity: 0;
}
.dark .header::before,
.dark .secMain .bg::before {
    opacity: 1;
}
.dark .header::after,
.dark .secMain .bg::after {
    opacity: 0;
}
:root {
    --main-color: #36b2e8;
    --sec-color: #ea3644;
    --third-color: #f1be2e;
    --main-bg: #fff;
    --sec-bg: #f1f1f1;
    --second-bg: #fff;
    --font-dark: #1f2125;
    --font-light: #787878;
    --red-color: rgb(255, 77, 89);
    --shadow: rgba(0, 0, 0, 0.1) 0px 3px 6px;
}
.mainColor {
    color: var(--main-color);
}
.secColor {
    color: var(--sec-color);
}
.thirdColor {
    color: var(--third-color);
}
.gradeBg1 {
    background: var(--third-color);
}
.gradeBg2 {
    background: var(--sec-color);
}
.gradeBg3 {
    background: var(--main-color);
}
body {
    background: var(--main-bg);
    direction: ltr;
}
html[lang="ar"] body {
    direction: rtl;
}

.main {
    padding-left: 100px;
    padding-right: 100px;
    /* overflow: hidden; */
    max-width: 1920px;
    margin: 0 auto;
}

.d-MainColor {
    color: #fdc12d;
}

.mainHover {
    position: relative;
    overflow: hidden;
}

.mainHover:after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 100%;
    transition: 0.45s all cubic-bezier(0.46, 1.8, 0.18, 0.61);
}

.mainHover:hover::after {
    width: 100%;
}

nav {
    padding: 1rem 4rem;
    position: absolute;
    left: 32px;
    top: 24px;
    box-shadow: none;
    transition: 0.3s all ease;
    width: calc(100% - 64px);
    z-index: 99999999;
    box-shadow: var(--shadow);
    border-radius: 2rem;
}
nav.active {
    background: var(--main-bg);
    padding: 1.5rem 4rem;
    text-transform: capitalize;

    box-shadow: 0px 4px 19.5px -4px #00000040;

    /* border-bottom: 4px solid var(--main-color); */
}
.navProgress {
    position: absolute;
    display: none;
    bottom: 0;
    transition: 0.4s all ease;
    height: 4px;
    border-radius: 3rem;
    width: 100%;
    right: 0;
    background-color: var(--second-bg);
}

.navProgress .navProgChild {
    height: 100%;
    background-color: var(--d-blue-color);
    position: absolute;
    bottom: 0;
    width: 0;
    border-radius: 3rem;
}

nav .customeContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.right,
.left {
    display: flex;
    align-items: center;
}
.left {
    gap: 2rem;
}
.regType {
    color: #fff;
    transition: 0.3s all ease;
    font-weight: 700;
}
.authImg {
    width: 3rem;
    margin-left: 0.5rem;
}
nav.active .regType,
.activeNavMenu .regType {
    color: #fff;
}
nav.active .login .regType,
.activeNavMenu .login .regType {
    color: var(--font-dark);
}
nav.active .login .regType span,
.activeNavMenu .login .regType span {
    color: #9d87e2;
}
.login:hover .regType {
}
.login:hover,
.signup:hover {
    transform: translateY(-5px);
}
.navLogo,
.navLogo:hover {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brandIcon {
    width: 3.5rem;
}
.navLogo h2 {
    font-size: 24px;
    font-weight: 700;
}
.navLogo h2 span {
    color: var(--main-color);
}

/*** light and dark svg ***/
.sunMoon {
    position: relative;
    width: 9rem;
    height: 4rem;
    background: #fbedb6;
    cursor: pointer;
    transition: 0.3s all ease;
    border-radius: 3rem;
    margin-right: 3rem;
}
.sunMoonBg {
    height: 3.5rem;
    width: 3.5rem;
    background: #f4ca25;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translate(0, -50%);
    transition: 0.3s all ease;
}
.sun,
.moon {
    font-size: 2.6rem;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(40%, -50%);
    cursor: pointer;
    opacity: 0;
    transition: 0.3s all ease;
    /* display: none; */
}

.sun {
    z-index: 2;
    opacity: 1;
    transform: translate(12%, -50%);
}
.dark .sunMoon {
    background: #25b6f447;
}
.dark .sunMoonBg {
    background: #25b6f4;
    transform: translate(-138%, -50%);
}
.dark .sun {
    opacity: 0;
    z-index: 1;
}

.sun svg {
    color: #fff;
    width: 30px;
    transition: 0.3s all ease;
    transform: translateY(0);
}

.dark .sun svg {
    /* transform: translateY(-20px); */
}

.dark .moon {
    opacity: 1;
    z-index: 2;
}

.moon svg {
    color: #fff;

    /* transform: translateY(-20px) rotate(0); */
    transition: 0.3s all ease;
}

.dark .moon svg {
    transition: 0.3s all ease;
    /* transform: translateY(0) rotate(0); */
}

/** search **/
.search {
    position: relative;
    width: 18rem;
    /* margin-left: 3rem; */
}

.search span {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #fdc12d;
}

.search input {
    width: 100%;
    padding: 0.5rem 3rem 0.5rem 1.5rem;
    border-radius: 3rem;
    border: 2px solid #fdc12d;
    transition: 0.3s all ease;
    background: transparent;
    color: #fff;
}
nav.active .search input {
    color: var(--font-dark);
}
.search input:focus {
    box-shadow: var(--shadow);
}

/*** register ***/
.left .register {
    display: flex;
    gap: 1rem;
}
.login,
.signup {
    position: relative;
    /* border-radius: 3rem; */
    overflow: hidden;
    transition: 0.3s all ease;
    /* box-shadow: 0 0 15px rgba(0, 0, 0, 0.08); */
}
.signup {
    /* margin-left: 2rem; */
    /* background: var(--main-color); */
    /* border: 2px solid var(--main-color); */
}
.login {
    overflow: hidden;
    /* border: 2px solid #fff; */
}
.regItem,
.regItem:hover {
    display: flex;
}

.signup .regItem,
.login .regItem {
    padding: 0.8rem 2.5rem;
    align-items: center;
    font-weight: 600;
    transition: 0.3s all ease;
    font-size: 1.8rem;
    border-radius: 1rem;
    border: 2px solid transparent;
}
.login:hover .regItem {
    border-color: var(--main-color);
}
.signup .regItem {
    background: var(--sec-color);
    background-position: center;
    background-size: contain;
}
.signup:hover .regItem {
    background: #ff5151;
}
.authHover {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    transition: 0.3s all ease;
}
/* .signup:hover .regType {
    color: #1f2125;
} */
.signup:hover .authHover,
.login:hover .authHover {
    width: 100%;
}
.login:hover .authHover {
    background: var(--main-color);
}
.signup:hover .authHover {
    background: #fff;
}

.signup:hover .regIcon,
.login:hover .regIcon {
    transform: translateY(-0.3rem) rotate(10deg) scale(1.1);
}

.regIcon {
    width: 35px;
    overflow: hidden;
    margin-left: 0.5rem;
    transition: 0.2s all ease;
}

.line {
    position: absolute;
}

.signup .line {
    background-color: var(--third-color);
}

.login .line {
    background-color: var(--sec-color);
}

.lineParent {
    position: relative;
}
.dark .login .regIcon img {
    filter: brightness(0.5) contrast(0.5) invert(1);
}
.lineParent .line:nth-of-type(1) {
    left: 0;
    bottom: 0;
    height: 100%;
    width: 2px;
    transform: scaleY(0);
    transform-origin: top;
    transition: 0.3s transform ease;
}

.lineParent:hover .line:nth-of-type(1) {
    transform: scaleY(1.0001);
    transform-origin: bottom;
}

.lineParent .line:nth-of-type(2) {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: right;
    transition: 0.3s transform ease;
}

.lineParent:hover .line:nth-of-type(2) {
    transform: scaleX(1.0001);
    transform-origin: left;
}

.lineParent .line:nth-of-type(3) {
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    transform: scaleX(0);
    transform-origin: right;
    transition: 0.3s transform ease;
    transition-delay: 0.3s;
}

.lineParent:hover .line:nth-of-type(3) {
    transform: scaleX(1.0001);
    transform-origin: left;
    transition: 0.3s transform ease;
}

.lineParent .line:nth-of-type(4) {
    right: 0;
    bottom: 0;
    height: 100%;
    width: 2px;
    transform: scaleY(0);
    transform-origin: top;
    transition: 0.3s transform ease;
}

.lineParent:hover .line:nth-of-type(4) {
    transform: scaleY(1.0001);
    transform-origin: bottom;
    transition: 0.3s transform ease;
}

.toggleBarBtn {
    display: none;
}

.mobDetails {
    display: none;
}

.degree {
    position: absolute;
    bottom: 0;
    right: 10%;
    transform: translateY(50%);
    width: 7.5rem;
    height: 7.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--main-bg);
    z-index: 999;
}
html[lang="ar"] .degree {
    right: unset;
    left: 10%;
}
.degree::after {
    content: "";
    position: absolute;
    left: -0.4rem;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--font-dark);
}
/***********************************/
/****** auth navbar **************/

.studentInfo button {
    font-size: 1.8rem;
    color: #fff;
    transition: 0.3s all ease;
    display: flex;
    padding: 1rem 1.8rem;
    /* border-radius: 3rem; */
    align-items: center;
    font-weight: 600;
    /* background: var(--main-color); */
}
nav.active .studentInfo button {
    color: var(--font-dark);
}
.search input::placeholder {
    color: #eee;
}
nav.active .search input::placeholder {
    color: #555;
}
.studentInfo button:hover {
    /* color: #222;
    background: #fff; */
}
.studentInfo button .studentIcon .st1 {
    stroke: var(--main-color);
}
.studentInfo button:focus {
    box-shadow: none;
}

.studentInfo button .line {
    background: var(--main-color);
}

.dropdown-menu {
    padding: 1rem 2rem;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    background: #fff;
    border-radius: 1.2rem;
}

.navDropItem {
    font-size: 1.8rem;
    color: var(--font-dark);
    padding: 0.5rem 0.8rem;
    text-align: left;
    margin-bottom: 1rem;
}
html[lang="ar"] .navDropItem {
    text-align: right;
}
.navDropItem:hover {
    background: none;
    color: var(--font-dark);
}

.navDrop li:first-of-type .navDropItem {
    /* color: var(--l-blue-color); */
}

.navDrop li:first-of-type .navDropItem .line {
    background: var(--font-dark);
}

.navDrop li:nth-of-type(2) .navDropItem {
    color: var(--main-color);
}

.navDrop li:nth-of-type(2) .navDropItem .line {
    background-color: var(--main-color);
}

.navDrop li:nth-of-type(3) .navDropItem {
    color: var(--third-color);
}
.dropdown-menu {
    background: var(--main-bg);
}

.navDrop li:nth-of-type(3) .navDropItem .line {
    background-color: var(--third-color);
}

.navDrop li:nth-of-type(4) .navDropItem {
    color: var(--red-color);
}

.navDrop li:nth-of-type(4) .navDropItem .line {
    background-color: var(--red-color);
}

.studentIcon {
    margin: 0 0.5rem;
    width: 2.5rem;
}

.studentIcon .st0 {
    display: none;
}

.studentIcon .st1 {
    transition: 0.3s all ease;
    fill: none;
    stroke: var(--font-dark);
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.dark .studentIcon .st1 {
    fill: none;
    stroke: var(--font-dark);
    stroke-width: 2;
    stroke-miterlimit: 10;
}

.studentIcon .st2 {
    fill: none;
    stroke: var(--third-color);
    stroke-width: 2;
    stroke-miterlimit: 10;
}
p.noLectures {
    font-size: 3.6rem;
    color: var(--main-color);
    text-align: center;
    width: 100%;
    margin: 3rem 0 0;
}
.langDropDown .dropdown-menu {
    padding: 0.5rem;
    min-width: 7rem;
    width: 7rem;

    gap: 0.6rem;
}
.langDropDown .dropdown-menu.dropdown-menu.show {
    display: flex;
    flex-direction: column;
}
.langBtn {
    width: 5rem;
    background: none;
    border: none;
}
.dropdown-menu .lang2Btn {
    margin: 0 auto;
    padding: 0 !important;
}
.dropdown-menu .lang2Btn:hover {
    display: block;
}
.dropdown-toggle::after {
    color: #fff;
    font-size: 2rem;
    vertical-align: 0em;
}
nav.active .dropdown-toggle::after,
.activeNavMenu .dropdown-toggle::after {
    color: var(--main-color);
    font-size: 2rem;
    vertical-align: 0em;
}
.dark .footerIcon a svg path:first-of-type {
    fill: #fff;
}
.dark .footerIcon a svg path:nth-of-type(3) {
    fill: #fff;
}
/**** responsive *****/
@media (max-width: 1260px) {
    /** footer **/
    footer {
        padding: 12rem 0 3rem !important;
    }
    .crParent {
        flex-direction: column;
        text-align: center;
    }

    .crParent .space {
        display: none;
    }
}

@media (max-width: 991.5px) {
    html {
        font-size: 60%;
    }

    /* nav {
        padding: 1rem 2rem;
        width: calc(100% - 50px);
        left: calc(25px);
    } */

    .main {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    /** start nav **/
    .logoBrand {
        width: 7rem;
    }

    .left {
        position: fixed;
        background-color: var(--main-bg);
        flex-direction: column;
        padding: 2rem 2rem;
        border-radius: 2rem;
        top: -60rem;
        opacity: 0;
        left: 50%;
        z-index: -1;
        transform: translateX(-50%);
        transition: 0.9s all ease;
        box-shadow: var(--shadow);
    }

    .activeNavMenu .left {
        z-index: 9999999999;
        opacity: 1;
        top: 50%;
        transform: translate(-50%, -80%);
    }

    .left .search {
        width: 100%;
        margin-left: 0;
    }

    .register {
        flex-direction: column;
        text-align: center;
    }

    .signup {
        margin: 3rem 0 2rem;
    }

    .toggleBarBtn {
        display: block;
        position: relative;
        width: 30px;
        background: none;
        border: none;
        height: 25px;
    }

    .toggleBarBtn span {
        width: 30px;
        height: 4px;
        border-radius: 10rem;
        background: #fff;
        margin: 0.25rem 0;
        left: 0;
        transition: 0.3s all ease;
        position: absolute;
    }
    nav.active .toggleBarBtn span {
        background-color: var(--third-color);
    }
    .toggleBarBtn .topLine {
        top: 0;
    }

    .toggleBarBtn .middleLine {
        top: 8px;
    }

    .toggleBarBtn .bottomLine {
        top: 16px;
    }

    .activeNavMenu .topLine {
        width: 30px;
        transform: rotate(-45deg);

        transform-origin: right;
    }

    .activeNavMenu .middleLine {
        opacity: 0;
    }

    .activeNavMenu .bottomLine {
        width: 30px;
        transform: rotate(45deg);
        transform-origin: right;
        top: 21.5px;
    }

    /****** auth nav *********/
    .mobDetails {
        display: block;
    }

    .mainSearch {
        display: none;
    }

    .studentBtn {
        display: none;
    }

    .mobDetails .navDrop {
        margin-top: 2rem;
    }

    .studentImage {
        width: 8rem;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -55%);
    }

    .studentImage img {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        border-radius: 50%;
        padding: 0.5rem;
        background: var(--second-bg);
        transition: 0.3s all ease;
    }

    .studentNameMob {
        font-size: 2rem;
        margin-top: 2rem;
        text-align: center;
    }

    .mobSearch {
        margin-top: 2rem;
    }

    /** start months **/
    .noLec {
        width: 60% !important;
    }

    /** footer **/
    .crParent {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 767px) {
    nav,
    nav.active {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .latestLectures .row {
        width: 100%;
        margin: 0;
    }
    .left {
        width: 40%;
    }

    .studentNameMob {
        font-size: 1.8rem;
    }

    .footerLogo {
        display: none;
    }
}

@media (max-width: 600px) {
    .left {
        width: 50%;
    }
}

@media (max-width: 500px) {
    .left {
        width: 65%;
    }

    html {
        font-size: 58%;
    }

    /** start months **/
    .noLec {
        width: 75% !important;
    }

    .no-lectures {
        font-size: 3.2rem !important;
    }
}

@media (max-width: 400px) {
    .activeNavMenu .left {
        width: 70%;
    }
}

:root {
    --atom-size: 180px;
    --atom-color-hex: #00d8ff;
    --atom-color-rgb: 0, 216, 255;
    --nucleus-size: calc(var(--atom-size) / 5);
    --electron-color-hex: #99f8ff;
    --electron-size: calc(var(--atom-size) / 25);
    --electron-orbit-size: calc(var(--atom-size) / 2.5);
    --electron-speed: 1.2s;
    --electron-speed-alpha: 1s;
    --electron-speed-omega: 0.8s;
}

.dark:root {
    --main-bg: #0d0d0d;
    --second-bg: #16171b;
    --font-dark: #fff;
    --font-light: #ebebeb;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2d3946;
    z-index: 9999999999999;
    transition: 0.3s all ease;
}

.preloader .atom {
    position: absolute;
    top: 50%;
    left: 50%;

    width: var(--atom-size);
    height: var(--atom-size);
    animation: 8s atom infinite cubic-bezier(1, 0.25, 0, 0.75);
}

/* Nucleus */
.preloader .atom::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--nucleus-size);
    height: var(--nucleus-size);
    margin-top: calc(var(--nucleus-size) / -2);
    margin-left: calc(var(--nucleus-size) / -2);
    background: var(--electron-color-hex);
    /* var(--atom-color-hex); */
    border-radius: 100%;
    box-shadow: 0 0 3px 0 var(--atom-color-hex);
    animation: 2s nucleus infinite cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes nucleus {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(0.85);
    }

    100% {
        transform: scale(1);
    }
}

.pageName {
    text-align: center;
    color: #fff;
}

input {
    text-transform: initial;
}

.no-lectures {
    display: flex;
    justify-content: center;
    width: 100%;
    font-size: 4rem;
    font-weight: 600;
    color: #48b8c1;
    text-align: center !important;
}

.noLec {
    width: 45%;
    margin: 2rem auto 0;
}

.noLec .st0 {
    fill: #d5d3d3;
}

.noLec .st1 {
    fill: #cccaca;
}

.noLec .st2 {
    fill: #fdc0c1;
}

.noLec .st3 {
    fill: #ebebeb;
}

.noLec .st4 {
    fill: #fabfc1;
}

.noLec .st5 {
    fill: #77b8c9;
}

.noLec .st6 {
    fill: #35497c;
}

.noLec .st7 {
    fill: #599fae;
}

.noLec .st8 {
    fill: #97cad8;
}

.noLec .st9 {
    fill: #1d325d;
}

.noLec .st10 {
    fill: #3a8e96;
}

.noLec .st11 {
    fill: #eca0a3;
}

.noLec .st12 {
    fill: #5fa3b3;
}

.noLec .st13 {
    fill: #e3f3fa;
}

.dark .noLec .st0,
.dark .noLec .st1,
.dark .noLec .st6 {
    transition: 0.3s all ease;
    fill: #2c2f35;
}

.dark .noLec .st3 {
    transition: 0.3s all ease;
    fill: #3e424b;
}

.dark nav {
    background: #16171b;
}

footer {
    padding: 12rem 0 3.5rem;
    position: relative;
    position: relative;
    background: url(../imgs/footer.svg) no-repeat;
    background-size: cover;
    background-position: top;
    direction: rtl;
    transition: 0.3s all ease;
    margin-top: 3rem;
}
.dark footer {
    background: url(../imgs/footer2.svg) no-repeat;
    background-size: cover;
}
.footerIcon {
    font-size: 3.4rem;
    margin-bottom: 1rem;
}

.footerIcon a {
    color: var(--font-light) !important;
    transition: 0.3s all ease;
    cursor: pointer;
}

.footerIcon a:nth-child(1):hover {
    color: #74b9ff;
}

.footerIcon a:nth-child(2):hover {
    color: #ff7675;
}

.footerIcon a:nth-child(3):hover {
    color: #a29bfe;
}

.footerIcon a:nth-child(4):hover {
    color: #2dcf8c;
}

.footerIcon a:hover {
    transform: scale(1.1) rotate(15deg);
    color: #888;
}

.footerIcon a:not(:last-child) {
    margin-left: 1.5rem;
}

.copyRight {
    color: var(--font-dark) !important;
    font-size: 2rem;
    width: 100%;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #94949438;
}
.copyRight p {
    color: var(--font-dark) !important;
}
.crParent {
    width: fit-content;
    display: flex;
    align-items: center;
    margin: 0 auto;
    max-width: 70%;
}

.copyRight p {
    font-size: 2rem;
}

.copyRight .space {
    margin: 0 1rem;
}

.copyRight .crTeacher {
    font-weight: bold;
}

.copyRight .heart {
    color: #ff5d3b;
}

.copyRight a {
    text-decoration: underline;
    font-weight: bold;
    color: var(--sec-color);
}

.dark .copyRight {
    color: #c7c7c7;
}
.linksParent {
    position: fixed;
    bottom: 3rem;
    left: 3rem;
    display: flex;
    gap: 2rem;
    align-items: end;
    font-size: 2rem;
    z-index: 9999999;
}
#openLinks {
    font-size: 3rem;
    background: var(--main-color);
    color: #fff;
    border: none;
    width: 6rem;
    border-radius: 50%;
    height: 6rem;
    transition: 0.3s all ease;
}
#openLinks:hover {
    background: #3335ca;
}
.linksMenu {
    background: var(--second-bg);
    padding: 2rem 3rem;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 3rem;
    color: var(--font-dark);
    display: none;
    box-shadow: var(--shadow);
}
.linksMenu.active {
    display: flex;
}
.linksMenu a {
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: 0.1s all ease;
    flex-direction: row-reverse;
}
.linksMenu a:hover {
    color: var(--main-color);
}
.linksMenu i,
.linksMenu svg {
    color: var(--main-color);
    font-size: 1.2em;
}
/** card **/
.bio {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-30%, 15%) rotate(-45deg);
    width: 15rem;

    z-index: -1;
}
.myCard {
    margin-bottom: 3rem;
}
.cardParent {
    box-shadow: var(--shadow);
    border-radius: 2rem;
}
.latestCard {
    background: var(--main-bg);
    border-radius: 2rem;
    box-shadow: var(--shadow);
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: auto;
    width: 96%;
    position: relative;
    transition: 0.3s all ease;
    top: 0;
    text-align: right;
    border: 1px solid transparent;
    /* padding: 1.25rem; */
    border-radius: 2rem;
}
.dark .latestCard {
    border-color: #707070;
}
.latestCard:hover {
    top: -20px;
    display: flex;
    border-color: var(--main-color);
}
.cardHover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(54, 178, 232, 0.8);
    display: flex;
    opacity: 0;
    justify-content: center;
    align-items: center;
    transition: 0.3s all ease;
    transform: scale(0);
    z-index: 5;
    border-radius: 2rem 2rem 0 0;
}
.latestCard:hover .cardHover {
    opacity: 1;
    transform: scale(1);
}

.playIcon {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    font-size: 2.4rem;
    background: #fff;
    color: var(--main-color);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: video-pulse-presentation 1.8s linear infinite;
}
@keyframes video-pulse-presentation {
    0% {
        -webkit-box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff;
        box-shadow: 0 0 0 0 #fff, 0 0 0 0 #fff;
    }

    40% {
        -webkit-box-shadow: 0 0 0 0 rgba(243, 156, 18, 0), 0 0 0 0 #fff;
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0), 0 0 0 0 #fff;
    }

    80% {
        -webkit-box-shadow: 0 0 0 0 rgba(243, 156, 18, 0),
            0 0 0 30px rgba(243, 156, 18, 0);
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0),
            0 0 0 30px rgba(243, 156, 18, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(243, 156, 18, 0),
            0 0 0 30px rgba(243, 156, 18, 0);
        box-shadow: 0 0 0 0 rgba(243, 156, 18, 0),
            0 0 0 30px rgba(243, 156, 18, 0);
    }
}

.image {
    position: relative;
    border-radius: 2rem 2rem 0 0;
    /* overflow: hidden; */
    z-index: 1;
    padding: 1rem;
}
.image img {
    border-radius: 2rem;
}

/* .image::after {
    content: "";
    position: absolute;
    top: 0;
    left: -0.3rem;
    width: calc(100%);
    height: calc(100%);
    border-radius: 2.5rem;
    border: 2px solid #010101;
    z-index: -1;
    transform: rotate(-8deg);
    transition: 0.4s all ease;
} */
.teachInfo {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
.infoImg {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--main-color);
}
.infoImg img {
    height: 100%;
}
.latestCard:hover .image::after {
    transform: rotate(8deg);
}

.subjectHover {
    color: #fff;
    font-weight: 600;
    font-size: 1.8rem;
    text-align: center;
}

.content {
    padding: 3.5rem 3rem 1.5rem;
    text-align: right;
}

.nameDate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.6rem;
    margin-bottom: 2rem;
    flex-wrap: wrap !important;
}

.cardName {
    color: var(--font-light);
    font-weight: bold;
}

.cardDate {
    color: var(--font-light);
}

.monthName {
    font-weight: bold;
    margin-bottom: 1.5rem;
    font-size: 2.2rem;
}

.monthText {
    color: var(--font-light);
    font-size: 1.6rem;
}

.details {
    display: flex;
    align-items: center;

    justify-content: space-between;
    /* border-top: 1px solid #dbd6d6; */
    margin: 3rem 1rem 1rem;
    background: rgba(216, 254, 127, 0.22);
    padding: 0.5rem 2rem;
    border-radius: 1rem;
}
.grade1 .details {
    background: #e9df4e23;
}
.grade2 .details {
    background: #ff545423;
}
.grade3 .details {
    background: rgba(54, 178, 232, 0.1);
}
.detailItem {
    font-weight: bold;
    font-size: 1.7rem;
}

.lecPrice {
    /* background: #5e4a36; */
    color: var(--main-color);
}
.grade1 .lecPrice {
    color: var(--third-color);
}
.grade2 .lecPrice {
    color: var(--sec-color);
}
.grade3 .lecPrice {
    color: var(--main-color);
}
.cardPrice {
    font-size: 2.9rem;
}

.users {
    color: var(--font-light);
}

/**************************
****** card responsive*****
***************************/
@media (max-width: 1600px) {
    /* .content {
        padding: 2.5rem 0 1.5rem;
    } */
}

@media (max-width: 1420px) {
    /* .content {
        padding: 2.5rem 2rem 1.5rem;
    } */

    .latestCard {
        width: 98%;
    }

    .nameDate {
        font-size: 1.4rem;
    }

    .monthName {
        font-size: 1.8rem;
    }

    .monthText {
        font-size: 1.3rem;
    }
}

@media (max-width: 1120px) {
    nav {
        left: 16px;
        width: calc(100% - 32px);
    }
    .sunMoon {
        margin-right: 1rem;
    }
    .navLogo h2 {
        font-size: 21px;
    }
    .brandIcon {
        width: 3rem;
    }
    nav.active {
        padding: 1.2rem 1.8rem;
    }
    .main {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 992px) {
    /* nav {
        left: 15px;
        width: calc(100% - 30px);
    } */

    .latestLectures {
        padding: 4rem 0 0;
    }

    .lectureHeading {
        align-items: center;
    }

    .rightLectures {
        margin-bottom: 12rem;
    }

    .loadMoreParent {
        display: flex;
        justify-content: center;
    }

    .lectureHeading .underLine {
        margin-left: auto;
        margin-right: auto;
    }

    /* .myCard {
        margin-bottom: 11rem;
    } */
}

@media (max-width: 576px) {
    nav {
        top: 0;
        width: 100%;
        left: 0;
        border-radius: 0;
    }
    nav.active {
        padding: 2rem 0.5rem;
    }
    .lectureHeading {
        font-size: 4.6rem;
    }

    .latestCard {
        width: 85%;
    }
}

@media (max-width: 490px) {
    .latestCard {
        width: 100%;
    }
}

.errorImage {
    margin: 3rem auto 8rem;
}

.modal {
    z-index: 999999999;
}
html[lang="en"] .modal-header .close {
    margin-right: unset;
    margin-left: auto;
}
html[lang="en"] .modal-body label {
    text-align: left;
    width: 100%;
}
.modal-backdrop {
    z-index: 99999999;
}

.noLecParent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 8rem;
}

.noLectText {
    font-size: 5rem;
    color: var(--main-brown);
    text-align: center;
}

.noLecImg {
    width: 70%;
}
.choseChargeType .modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 2rem 1rem;
}
.choseChargeType .modal-body button {
    font-size: 1.6rem;
    background: none;
    padding: 0.5rem 2rem;
    border: none;
    transition: 0.2s all ease;
}
.choseChargeType .modal-body button:first-of-type {
    background: var(--main-color);
    color: #fff;
}
.choseChargeType .modal-body button:last-of-type {
    background: #f1be2e;
    color: #fff;
}
.choseChargeType .modal-body button:hover {
    filter: contrast(1.3);
}