@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-card p { 
    margin-top: .4375rem;
    line-height: 1.65 }

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 }

    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 }

    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 }

    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 }

    .tow { margin-left: 200px }

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

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

    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 }}