@font-face {
    font-family: 'NotoKufiArabic-Light';
    src: url('../fonts/NotoKufiArabic-Light.ttf') format('truetype');
   
}
@font-face {
    font-family: 'NotoKufiArabic-Bold';
    src: url('../fonts/NotoKufiArabic-Bold.ttf') format('truetype');
   
}
@font-face {
    font-family: 'NotoKufiArabic-Regular';
    src: url('../fonts/NotoKufiArabic-Regular.ttf') format('truetype');
   
}
@font-face {
    font-family: 'NotoKufiArabic-Medium';
    src: url('../fonts/NotoKufiArabic-Medium.ttf') format('truetype');
   
}
.navar{
    flex-direction: row-reverse !important;
}
.linksnavar{
    display: flex;
    flex-direction: row-reverse !important;
}
@media (min-width:768px) {
    .about_text_ar{
        text-align: right;
    }
    .about-div2{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around !important;
    }
    .formation{
        display: flex
;
    flex-direction: row-reverse;
    align-items: flex-start;
    }
}
nav .font-ar:hover{
    font-family: 'NotoKufiArabic-Bold' !important ;
}
.font-ar{
    font-family: 'NotoKufiArabic-Medium' !important;
 
}
.rtl{
    text-align: right;
    direction: rtl;
}
.ceo-ar{
    display: flex
;
    justify-content: flex-end;
}
.reverse{
    flex-direction: row-reverse;
}
.element {
    position: relative;
}

.element::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../img/KhatwatTheProfile13.png");
    background-size: cover;
    background-position: center;
    transform: scaleX(-1); /* انعكاس أفقي */
    z-index: -1;
}
input {
    font-family: 'NotoKufiArabic-Medium' !important ;
    text-align: right;
    direction: rtl; /* لجعل النص يبدأ من اليمين */
}
input::placeholder {
    font-family: 'NotoKufiArabic-Medium' !important ;
    text-align: right;
    direction: rtl;
}
select {
    font-family: 'NotoKufiArabic-Medium' !important ;
    text-align: right;
    direction: rtl; /* لجعل النص يبدأ من اليمين */
}
select::placeholder {
    font-family: 'NotoKufiArabic-Medium' !important ;
    text-align: right;
    direction: rtl;
}
.form-control {
    font-family: 'NotoKufiArabic-Medium' !important ;
    padding: 0% 6% !important;
}
.form-control-text {
    font-family: 'NotoKufiArabic-Medium' !important ;
    text-align: right;
    direction: rtl;
    padding: 6% 6% !important;
}
@media (max-width: 768px) {
    .linksnavar {
    display: flex;
    flex-direction: column !important;
    }
}
.bg_singleAr {
    background-image: url(../img/bg_single.png);
    background-size: cover;
    background-position-y: top;
    /* background-position: top; */
    background-position-x: 0vw;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    z-index: 0;   /* Set base z-index */
}
.bg_singleAr::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../img/Time\ Management\ Photo\ \(2\).svg);
    transform: scaleX(-1);
    z-index: 1;         /* Higher z-index than parent */
    pointer-events: none;
}
.bg_singleAr > * {
    position: relative;
    z-index: 2;         /* Highest z-index to appear above overlay */
}
.project-div-singleAr {
    margin-right: 7vw;
    margin-top: 1vw;
    margin-bottom: 8vw;
}
.courses-teacher-singleAr {
    width: 57vw;
    font-size: 1.6vw;
    /* text-transform: uppercase; */
    color: #fff;
    font-weight: 300;
    font-family: 'Kanit-ExtraLight';
}
.single-icone-listear {
    width: 54vw;
    display: flex
;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    padding: 0;
    margin-left: -1.5vw;
    justify-content: flex-start;
    float:right;
}
.what_willAr h3 {
    font-size: 2vw !important;
    color: #fff;
    float: right;
    width: 26vw;
    font-family: 'Kanit-Medium';
}
.what_willAr {
    width: 32vw;
    height: fit-content;
    border-radius: 2vw;
    padding-left: 3vw;
    padding-bottom: 4vw;
    padding-top: 4vw;
    margin-top: 4vw;
    background-color: #002e1abf;
    float: right;
    display: flex
;
    flex-direction: column;
    align-content: flex-start;
    flex-wrap: wrap;
}
.what_willAr li{
    color: #fff;
    font-size: 1.3vw;
    font-family: 'Kanit-Medium';
    font-weight: 400;
    width: 22vw;
    direction: rtl;
    margin-top: 1vw;
}
@media (max-width: 576px) {
    .course-structure p {
        width: 100% !important;
        font-size: 2vw !important;
        text-align: right !important;
    }
    .bg_singleAr {
        background-image: url(../img/bg_single.png);
        background-size: cover;
        background-position-y: top;
        /* background-position: top; */
        background-position-x: 0vw;
        background-repeat: no-repeat;
        position: relative;
        display: flex
    ;
        flex-direction: column;
        z-index: 0;
        align-items: center;
      
    }
    .project-div-singleAr {
         margin-right: 0vw !important;
    }
    .bg_single::before {
        content: '';
        position: absolute;
        width: 200%;
        height: 100%;
        left: -50vw;
        top: 0;
        transform: scaleX(-1);
        background-image: url(../img/Time\ Management\ Photo\ \(2\).svg);
      
        z-index: 1;         /* Higher z-index than parent */
        pointer-events: none;
       
    }
    .courses-teacher-singleAr {
        text-align: center;
        width: 100%;
        font-size: 2.6vw;
    }
    .single-icone-listear {
        width: 70%;
        display: flex
    ;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        padding: 0;
        margin-left: -1.5vw;
        justify-content: center;
    }
    .under-text-courses-single {
        display: flex
;
        align-items: center;
        width: 25vw !important;
        margin-right: 0.4vw;
        flex-direction: column;
        align-content: center;
    }
    .what_willAr li {
        color: #fff;
        font-size: 3vw;
       
        font-weight: 400;
        width: 59vw;
        margin-top: 1vw;
    }
    .what_willAr {
        margin-bottom: 5vw;
        width: 72vw;
        height: fit-content;
        border-radius: 2vw;
        padding-right: 3vw;
        padding-bottom: 4vw;
        padding-top: 4vw;
        margin-top: 4vw;
        background-color: #002e1abf;
    }
    .what_willAr h3 {
        font-size: 4vw !important;
        color: #fff;
        font-weight: 600;
        width: 28vw;
        
    }
 
}