@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: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)), url('assets/images/Bg1.webp');
    background-size: cover;
    height: 100vh; width: 100% }
.home::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('assets/images/Bg1.webp') no-repeat center center;
    background-size: cover;
    z-index: -1 }

.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 2px 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 }

.reg i { 
    font-size: 1.5rem;
    color: #FF92EA }

.home-cont1 { 
    color: #F2F2F2;
    line-height: 1.65;
    display: flex;
    justify-content: center;
    align-items: center }

.home-cont2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem }

.home-texts {
    flex: 1;
    text-align: right }

.home-texts-title { font-weight: 700 }

.home-texts-text { font-weight: 500 }

.home-img {
    flex: 1;
    display: flex;
    justify-content: center }

.home-img img { height: auto }

.courses, .articles, .books, .faqs { padding: 1.25rem }

.courses {
    background-color: #12102e;
    overflow: hidden;
    color: #F2F2F2;
    text-align: center }

.courses-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.65 }

.courses-text h2 { font-weight: 700 }

.courses-text h1 { font-weight: 700 }

.courses-text h4 {
    font-weight: 500;
    margin-top: .625rem }

.courses-cards {
    margin-top: 2.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem }

.courses-card {
    background: radial-gradient(circle at bottom right, #FF92EA 20%, transparent 50%),
                radial-gradient(circle at bottom left, #8BA7C3 20%, transparent 50%),
                linear-gradient(to bottom, #12102E 0%, #1F1C51 50%, transparent 80%);
    border: 3px solid #554F8D;
    padding: 1.25rem;
    border-radius: .625rem;
    width: 18.75rem;
    text-align: center;
    box-shadow: .25rem .25rem .3125rem #000;
    transition: transform 0.5s, box-shadow 0.3s;
    -webkit-transition: transform 0.5s, box-shadow 0.3s;
    -moz-transition: transform 0.5s, box-shadow 0.3s;
    -ms-transition: transform 0.5s, box-shadow 0.3s;
    -o-transition: transform 0.5s, box-shadow 0.3s }
    
.courses-card:hover {
    box-shadow: .25rem .25rem .3125rem #F2F2F2;
    transform: translateY(-1.25rem);
    -webkit-transform: translateY(-1.25rem);
    -moz-transform: translateY(-1.25rem);
    -ms-transform: translateY(-1.25rem);
    -o-transform: translateY(-1.25rem) }

.courses-card-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3125rem }

.courses-card-contact img {
    width: 100%;
    height: 12.5rem;
    object-fit: cover;
    border-radius: .625rem }

.courses-card-contact h1 { margin-top: .625rem }

.courses-card-contact h2 { font-weight: 600 }

.courses-card-contact p {
    margin-top: .625rem;
    text-align: justify;
    line-height: 1.65;
    color: #D6D6D6 }

.courses-card-contact a {
    margin-top: .625rem;
    background-color: #12102e;
    padding: .625rem;
    border-radius: .625rem;
    color: #F2F2F2;
    font-weight: 500;
    text-decoration: none;
    width: fit-content;
    transition: 0.5s }

.courses-card-contact a:hover { background-color: #1f1c51 }

.why-we { margin-top: 6.25rem }

.why-we-title, .books-title, .articles-title, .faqs-title {
    display: flex;
    justify-content: center }

.why-we-cards-container { position: relative }

.why-we-card {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 1.25rem;
    border-radius: .9375rem;
    box-shadow: 4px 4px 5px #000;
    color: #F2F2F2;
    font-size: 1.125rem;
    line-height: 1.65;
    position: relative;
    transition: transform 0.3s, background-color 0.5s }

.why-we-card:hover {
    background-color: #FF92ea;
    transform: translateY(-0.625rem);
    -webkit-transform: translateY(-0.625rem);
    -moz-transform: translateY(-0.625rem);
    -ms-transform: translateY(-0.625rem);
    -o-transform: translateY(-0.625rem) }

.why-we-card img { margin-top: -5rem }

.why-we-card h3 { font-weight: 600 }

.why-we-card p { color: #B0B0B0 }

.articles {
    padding-top: 6.25rem;
    background-color: #12102e;
    color: #F2F2F2 }

.articles-data {
    display: flex;
    flex-direction: column;
    align-items: center }

.articles-card-content p { line-height: 1.65 }

.books {
    padding-top: 6.25rem;
    background-color: #12102e;
    color: #F2F2F2 }

.books-text {
    margin-top: 1.25rem;
    font-weight: 500 }

.books-cont, .articles-data {
    margin-top: 2.5rem;
    display: flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem }

.book-card, .articles-card {
    background: radial-gradient(circle at bottom right, #FF92EA 20%, transparent 50%),
                radial-gradient(circle at bottom left, #8BA7C3 20%, transparent 50%),
                linear-gradient(to bottom, #12102E 0%, #1F1C51 50%, transparent 80%);
    border: 3px solid #554F8D;
    width: 22.5rem;
    padding: 1.25rem;
    border-radius: .625rem;
    box-shadow: .25rem .25rem .3125rem #000;
    transition: transform 0.5s, box-shadow 0.3s;
    -webkit-transition: transform 0.5s, box-shadow 0.3s;
    -moz-transition: transform 0.5s, box-shadow 0.3s;
    -ms-transition: transform 0.5s, box-shadow 0.3s;
    -o-transition: transform 0.5s, box-shadow 0.3s }

.book-card:hover, .articles-card:hover {
    box-shadow: .25rem .25rem .3125rem #F2F2F2;
    transform: translateY(-1.25rem);
    -webkit-transform: translateY(-1.25rem);
    -moz-transform: translateY(-1.25rem);
    -ms-transform: translateY(-1.25rem);
    -o-transform: translateY(-1.25rem) }

.book-card-content, .articles-card-content {
    display: flex;
    flex-direction: column;
    gap: .5rem }

.book-card-content-title, .book-card-content-author { font-weight: 600 }

.book-card-content-about { color: #D6D6D6 }

.book-card-content-price, .book-card-content-learn-more { font-weight: 500 }

.book-card-content-stars { color: #FDD017 }

.book-card-content-learn-more {
    margin-top: 1.25rem;
    display: flex;
    justify-content: center }

.book-card-content-learn-more a, .articles-card-content a {
    background-color: #12102E;
    padding: .625rem;
    border-radius: .625rem;
    color: #F2F2F2;
    font-weight: 500;
    text-decoration: none;
    width: fit-content;
    transition: 0.5s }

.book-card-content-learn-more a:hover, .articles-card-content a:hover, .articles-card-content-learn-more a:hover { background-color: #1f1c51 }

.book-card-content-img {
    margin-top: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12.5rem; width: 100%;
    overflow: hidden }

.book-card img {     
    height: 100%; width: 100%;
    object-fit: contain }

.books-learn-more, .articles-learn-more {
    margin-top: 1.875rem;
    display: flex;
    justify-content: center }

.books-learn-more a, .articles-learn-more a {
    background-color: #FF92ea;
    padding: .625rem;
    border-radius: .625rem;
    color: #F2F2F2;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
    transition: 0.5s }

.books-learn-more a:hover, .articles-learn-more a:hover { background-color: #D76BBE }

.articles-card { width: auto }

.faqs {
    padding-top: 6.25rem;
    background-color: #12102e }

.faq-container {
    max-width: 37.5rem;
    margin: 1.5625rem auto;
    background-color: #1F1C51;
    border-radius: .5rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, 0.1);
    padding: 1.875rem }

.faq-item { margin-bottom: 1.25rem }

.question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .625rem;
    background-color: #F0F0F0;
    border-radius: .3125rem;
    cursor: pointer }

.question button {
    background-color: #FF92ea;
    border: none;
    border-radius: .625rem;
    padding: .3125rem;
    font-weight: 500;
    color: #F2F2F2 }
    
.answer {
    margin-top: .625rem;
    padding: .625rem;
    background-color: #9a9a9a;
    border-radius: .3125rem;
    display: none;
    line-height: 1.65;
    color: #F2F2F2;
    transition: transform 0.5s;
    -webkit-transition: transform 0.5s;
    -moz-transition: transform 0.5s;
    -ms-transition: transform 0.5s;
    -o-transition: transform 0.5s;
    transition-property: all;
    transition-duration: 0.5s }

.answer:active { transition: 0.5s }

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: 10px;
    font-weight: 600;
    color: #F2F2F2 }

.tow { margin-top: 10px }

.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) {
    .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: 2px 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 }

    .reg i { margin-right: 30px }

    .home-cont2 { flex-direction: column }

    .home-texts { margin: 20rem 1.25rem }

    .home-texts-title { font-size: 1.5625rem }
    
    .home-texts-text { font-size: 0.9375rem }

    .home-img img { max-width: 70% }

    .courses-text h2 { font-size: 1.5rem }

    .courses-text h4 { font-size: .9375rem }

    .courses-card-contact h1 { font-size: 1.375rem }

    .courses-card-contact h2 { font-size: 1.125rem }

    .why-we-title, .articles-title, .books-title, .faqs-title { font-size: 2.1875rem }

    .why-we-cards-container {
        display: flex;
        flex-direction: column;
        gap: 3.125rem;
        margin-top: 5rem }
    
    .why-we-card img { width: 40% }

    .books-text { font-size: 1.25rem }

    footer { padding: 10px }

    .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) {
    .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: 2px 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 }

    .reg i { margin-right: 30px }

    body { z-index: 1 }

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

    .home-texts { margin: 20rem 1.25rem }

    .home-texts-title { font-size: 1.5625rem }
    
    .home-texts-text { font-size: 0.9375rem }

    .home-img img { max-width: 70% }

    .courses-text h2 { font-size: 1.5rem }

    .courses-text h4 { font-size: 1.0625rem }

    .courses-card-contact h1 { font-size: 1.375rem }

    .courses-card-contact h2 { font-size: 1.125rem }

    .why-we-title, .articles-title, .books-title, .faqs-title { font-size: 2.1875rem }

    .why-we-cards-container {
        display: flex;
        flex-direction: column;
        gap: 3.125rem;
        margin-top: 5rem }
    
    .why-we-card img { width: 30% }

    .books-text { font-size: 1.25rem }

    footer { padding: 10px }

    .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) {
    .home-data { margin: 1.25rem }

    .nav-menu {
        position: static;
        display: flex !important;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        height: auto; width: auto;
        padding: 0;
        transition: none;
        background-color: #2B2B2B;
        border-left: none; border-bottom: 2px 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 }

    .reg i { margin-left: 20px }

    .home-cont1 { margin: 11.25rem 1.25rem }

    .home-texts { margin: 0 }

    .home-texts-title { font-size: 1.5625rem }
    
    .home-texts-text { font-size: 0.9375rem }

    .home-img img { max-width: 70% }

    .courses-text h1 { font-size: 1.875rem }

    .courses-text h2 { font-size: 1.75rem }

    .courses-text h4 { font-size: 1.25rem }

    .courses-card-contact h1 { font-size: 1.875rem }

    .courses-card-contact h2 { font-size: 1.3125rem }

    .why-we-title, .articles-title, .books-title, .faqs-title { font-size: 2.5rem }

    .why-we-cards-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        padding: 3.125rem;
        margin-top: 1.875rem; }

    .why-we-card img { width: 50% }

    .card-1 { top: -0.9375rem; left: 0; }
    .card-2 { top: 1.875rem; left: -0.625rem }
    .card-3 { top: 0; left: 0.625rem }
    .card-4 { top: 3.4375rem; left: -1.25rem }

    .books-text { font-size: 1.375rem }

    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: 115px 1.25rem }

    .home-texts-title { font-size: 1.875rem }
    
    .home-texts-text { font-size: 0.9375rem }

    .home-img img { max-width: 70% }

    .courses-text h1 { font-size: 2.1875rem }

    .why-we-card img { width: 33% }

    .tow { margin-left: 200px }

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

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

    .home-texts-title { font-size: 2.8125rem }

    .home-img img { max-width: 100% }

    .why-we-card img { width: 25% }

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