@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../assets/fonts/IBMPlexSansArabic-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../assets/fonts/IBMPlexSansArabic-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../assets/fonts/IBMPlexSansArabic-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../assets/fonts/IBMPlexSansArabic-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../assets/fonts/IBMPlexSansArabic-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../assets/fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal }

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    src: url('../../assets/fonts/IBMPlexSansArabic-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal }

* {
    margin: 0; padding: 0;
    font-family: 'IBM Plex Sans Arabic', sans-serif }

span { color: #FF92ea }

/* تغيير لون الخلفية للنصوص التي يتم تحديدها */
::selection {
    background-color: #FF92ea;
    color: #F2F2F2 }

/* شريط التمرير */
::-webkit-scrollbar {
    height: 0.5rem; width: 0.5rem;
    background-color: transparent }
::-webkit-scrollbar-thumb {
    background: #FF92ea;
    border-radius: .625rem }
/* شريط التمرير في  FireFox */
* {
    scrollbar-width: thin;
    scrollbar-color: #FF92ea transparent }

.home { 
    background-color: #12102e;
    width: 100% }

.home-data { margin: 1.25rem }

.nav-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.625rem 1.25rem }

.nav-item { position: relative }

.nav-link {
    font-weight: 700;
    padding: 0.625rem 0.9375rem;
    display: block;
    transition: all 0.3s ease;
    border-radius: 0.3125rem;
    text-decoration: none;    
    color: #F2F2F2 }

.nav-link:hover {
    background-color: #F2F2F2;
    color: #FF92ea }

.nav-link:focus {
    background-color: #FF92ea;
    color: #F2F2F2 }

.nav-sublist1, .nav-sublist2 {
    display: none;
    list-style: none;
    padding: 0; margin: 0;
    position: absolute;
    top: 100%;
    background-color: #F2F2F2;
    border: 0.0625rem solid #CCC;
    border-radius: 0.3125rem;
    box-shadow: 0px .25rem 0.9375rem 0.125rem rgb(0 0 0 / 25%);
    z-index: 1000;
    min-width: 11.25rem }

.nav-subitem { padding: .3125rem }

.nav-subitem .nav-link {
    padding: 0.625rem 0.9375rem;
    white-space: nowrap;
    color: #333;
    background-color: transparent }

.nav-subitem .nav-link:hover {
    background-color: #F2F2F2;
    color: #FF92ea }

.nav-item:focus-within .nav-sublist1, .nav-item:focus-within .nav-sublist2 { display: block }

.nav-toggle { position: fixed }

.nav-toggle i { cursor: pointer }

.nav-list {
    display: flex;
    list-style: none }
    
.nav-close, .nav-toggle {
    display: flex;
    font-size: 1.5625rem;
    top: 1.25rem; right: 1.25rem;
    color: #F2F2F2;
    cursor: pointer }
    
.nav-close i:active, .nav-toggle i:active { transform: scale(0.85) }
    
.nav-close { position: absolute }

.show-menu .nav-toggle { display: none }
.show-menu .nav-close { display: block }

.nav-buttons {
    display: flex;
    align-items: center;
    gap: 1.875rem;
    margin-left: 2.5rem }

.login-button {
    background: transparent;
    border: none;
    font-size: 1.5625rem;
    cursor: pointer;
    color: #F2F2F2;
    transition: color 0.5s ease }

.login-button:hover { color: #FF92ea }

.home-cont1 { 
    color: #F2F2F2;
    line-height: 1.65;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: justify }

.home-cont1 p { 
    margin-top: .4375rem;
    line-height: 1.65 }

.sidebar {
    position: fixed;
    right: -21.875rem; top: 0;
    height: 100%; width: 15.625rem;
    background: #1F1C51;
    padding: 1.25rem;
    transition: right 0.3s ease-in-out;
    box-shadow: -0.125rem 0 0.3125rem rgba(0, 0, 0, 0.5);
    color: #F2F2F2;
    overflow-y: auto;
    z-index: 1000 }

.close-btn {
    background: none;
    border: none;
    color: #F2F2F2;
    font-size: 1.5rem;
    position: absolute;
    top: 0.625rem; left: 1.375rem;
    cursor: pointer }

.open-btn {
    position: fixed;
    right: 0.625rem;
    background: #FF92EA;
    border: none;
    padding: 0.625rem;
    font-size: 1.125rem;
    cursor: pointer;
    border-radius: 0.3125rem;
    color: #F2F2F2 }

@keyframes pulse {
    0% { transform: scale(1) }
    50% { transform: scale(1.3) }
    100% { transform: scale(1) }}

@keyframes countUp {
    from { transform: scale(1); opacity: 0 }
    to { transform: scale(1.2); opacity: 1 }}

.progress-text {
    position: absolute;
    top: -25px;
    right: 10px;
    font-size: 14px;
    animation: countUp 0.3s ease-in-out }

.lesson-list {
    list-style: none;
    padding: 0 }

.lesson-list i { z-index: 1 }

.lesson-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0 }

.lesson-link {
    text-decoration: none;
    color: #F2F2F2;
    font-size: 1.rem }

.lesson-circle {
    width: 1.25rem;
    height: 1.25rem;
    border: 0.125rem solid #F2F2F2;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease-in-out, transform 0.2s; }

.lesson-circle.completed {
    background: #74B72E;
    border-color: #74B72E;
    animation: pulse 0.4s ease-in-out }

.lesson-circle:active { transform: scale(1.2) }

.progress-container {
    margin-top: 1.25rem;
    background: #555;
    height: 0.5rem;
    border-radius: 0.25rem;
    position: relative }

.progress-bar {
    height: 100%;
    background: #FF92EA;
    width: 0%;
    border-radius: 0.25rem;
    transition: width 0.5s ease-in-out }

.progress-text {
    position: absolute;
    top: -1.5625rem;
    right: 0.625rem;
    font-size: 0.875rem }

footer { background-color: #2B2B2B }

.footer-content { 
    display: grid;
    grid-template-areas: "a b" "c b" }

.footer-right {
    display: flex;
    flex-direction: column;
    justify-content: space-around }

.footer-right { grid-area: a }

.logo-footer img { border-radius: 50% }

.logo-footer div {
    display: flex;
    align-items: center }

.logo-footer h2 {
    margin-right: 0.625rem;
    font-weight: 600;
    color: #F2F2F2 }

.tow { margin-top: 0.625rem }

.logo-footer p { color: #F2F2F2 }

.footer-left { grid-area: b }

.copy-right { grid-area: c }

.copy-right p {
    font-weight: 500;
    margin: 0;
    color: #F2F2F2;
    line-height: 2.1875rem }

.footer-left {
    display: flex;
    justify-content: center }

.footer-left div { 
    display: flex;
    flex-direction: column }

.footer-left h1 {
    font-weight: 600;
    color: #F2F2F2 }

.footer-left a {
    text-decoration: none;
    font-weight: 400;
    color: #F2F2F2;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s }

.footer-left a:hover { color: #FF92ea }

@media screen and (max-width: 394px) {
    html, body {
        background-color: #12102e !important;
        color: white;
        overflow-x: hidden;
        min-height: 100vh;
        margin: 0; padding: 0 }

    .home {
        background-color: #12102e !important;
        width: 100%;
        min-height: 100vh }

    .nav-menu { height: 100vh }

    .sidebar {
        background-color: #1F1C51 !important;
        height: 100% }

    .nav-menu {
        position: fixed;
        top: 0; right: -100%;
        display: flex;
        flex-direction: column;
        row-gap: 3rem;
        background: rgba(0, 0, 0, 0.9);
        height: 206%; width: 60%;
        padding: 72px 0 0 3rem;
        border-left: 0.125rem solid #FF92ea;
        transition: right .4s;
        z-index: 1 }

    .show-menu { right: 0 }
    
    .nav-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 1.875rem }

    .nav-sublist1, .nav-sublist2 { right: 0 }

    .nav-sublist1.show-sublist, .nav-sublist2.show-sublist { display: block }

    body { z-index: 1 }

    .nav-buttons {
        position: fixed;
        top: 0.625rem; left: -0.625rem;
        z-index: 1001 }

    .home-cont1 { margin: 3.75rem .3125rem }

    .lesson-list i { margin-left: -6.4375rem }

    footer { padding: 0.625rem }

    .logo-footer img { max-width: 2.5rem }

    .logo-footer h2, .footer-left h1 { font-size: 1.25rem }

    .tow { margin-left: 1.25rem }

    .footer-left { padding-top: 1.25rem }

    .footer-left { flex-direction: column }

    .footer-left a { 
        font-size: 0.9375rem;
        line-height: 1.5625rem }}

@media screen and (min-width: 394px) {
    html, body {
        background-color: #12102e !important;
        color: white;
        overflow-x: hidden;
        min-height: 100vh;
        margin: 0; padding: 0 }

    .home {
        background-color: #12102e !important;
        width: 100%;
        min-height: 100vh }

    .nav-menu { height: 100vh }

    .sidebar {
        background-color: #1F1C51 !important;
        height: 100% }

    .nav-menu {
        position: fixed;
        top: 0; right: -100%;
        display: flex;
        flex-direction: column;
        row-gap: 3rem;
        background: rgba(0, 0, 0, 1);
        height: 206%; width: 70%;
        padding: 72px 0 0 3rem;
        border-left: 0.125rem solid #FF92ea;
        transition: right .4s;  
        z-index: 1 }

    .show-menu { right: 0 }
    
    .nav-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 1.875rem }

    .nav-sublist1, .nav-sublist2 { right: 0 }

    .nav-sublist1.show-sublist, .nav-sublist2.show-sublist { display: block }

    body { z-index: 1 }

    .nav-buttons {
        position: fixed;
        top: 0.625rem; left: -0.625rem;
        z-index: 1001 }

    .home-cont1 { margin: 3.75rem .3125rem }

    .lesson-list i { margin-left: -6.4375rem }

    footer { padding: 0.625rem }

    .logo-footer img { max-width: 2.5rem }

    .logo-footer h2, .footer-left h1 { font-size: 1.25rem }

    .tow { margin-left: 1.25rem }

    .copy-right p { margin-left: 1.25rem }

    .footer-left { padding-top: 1.25rem }

    .footer-left a { 
        font-size: 0.9375rem;
        line-height: 1.5625rem }}

@media screen and (min-width: 767px) {
    .nav-menu {
        position: static;
        display: flex !important;
        flex-direction: row;
        justify-content: space-between;
        height: auto; width: auto;
        padding: 0;
        transition: none;
        background-color: #2B2B2B;
        border-left: none; border-bottom: 0.125rem solid #FF92ea }

    .nav-list {
        display: flex;
        flex-direction: row;
        align-items: center }

    .nav-item { margin-right: 0.625rem }

    .nav-link { font-size: 1.25rem }

    .nav-toggle, .nav-close { display: none !important }

    .nav-buttons {
        position: fixed;
        top: 0.9375rem; left: -0.625rem;
        z-index: 1001 }

    .home-cont1 { margin: 2.5rem .3125rem }

    .home-cont1 p, ul { font-size: 1.25rem }

    .lesson-list i { margin-left: -3.9375rem }

    .open-btn { top: 5.625rem }

    footer { padding: 1.25rem 4.6875rem }

    .logo-footer {
        display: flex;
        align-items: flex-start;
        flex-direction: column }}

@media screen and (min-width: 1023px) {
    .home-cont1 { margin: 2.5rem .3125rem }

    .open-btn { top: 5.625rem }

    .tow { margin-left: 200px }

    .footer-left { align-items: flex-start }}

@media screen and (min-width: 1439px) {
    .home-cont1 { margin: 2.5rem .3125rem }

    .open-btn { top: 5.625rem }    

    footer { padding: 2.5rem 0 }

    .footer-content {
        display: grid;
        justify-content: space-around;
        margin: 0 8.75rem }

    .logo-footer img { max-width: 3.75rem }

    .logo-footer h2, .footer-left h1 { font-size: 1.875rem }

    .footer-left a { 
        font-size: 1.5625rem;
        line-height: 2.5rem }
    
    .footer-left a::before {
        margin-top: 1.5625rem;
        height: 0.75rem; width: 95% }

    .footer-url a, .copy-right p { font-size: 1.25rem }}