@import url("https://fonts.googleapis.com/css2?family=Changa:wght@200..800&display=swap");
:root{
    --primary_color: #24297d;
    --secondary_color: #0582c4;
    --third_color: #ac7d2b;
    --white_off: #f7f6f2;
    --white_blue: #eff3ff;
    --white_color: #ffffff;
    --dark_color: #474747;
    --deeb_dark: #15192c;
    --border_color: #eee;
    --raduis: 15px;
    --primary_font:  "Changa", sans-serif;
    /* --number_font: "Teko", sans-serif; */
    --transition: 0.3s ease;
}
.btn-close.btnclose_vid {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--secondary_color) !important;
    color: var(--white_off) !important;
    font-size: 20px;
    border-radius: 0;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    opacity: 1 !important;
}
@media (min-width: 991px) {
    .modal_video_feat .modal-dialog {
        max-width: 60% !important;
    }
}
.modal-backdrop.show{
    background: var(--primary_color);
    opacity: 0.9 !important;
}
.modal_video_feat .modal-content {
    background: transparent !important;
    border: 0;
}
.modal_video_feat .modal-body {
    background: transparent !important;
}
*{
    padding: 0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    font-family: var(--primary_font);
    transition: var(--transition);
}
ul , ol{
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
}
img {
    max-width: 100%;
    height: auto;
}
.link_abs{
    position: absolute;
    inset: 0;
    z-index: 1;
}
.navbar-brand{
    margin: 0;
}
section,footer{
    position: relative;
}
.container{
    max-width: 1450px !important;
}
.header_section{
    max-width: 900px;
    margin: auto;
}
.devider_hr{
    background: #ffffff1a;
    margin: 40px 0;
    height: 1px;
    width: 100%;
}

.btn_primary , 
.secondary_btn{
   position: relative;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    z-index: 1;
    color: var(--white_color) !important;
    background-color: transparent;
    transition: .5s;
    border-radius: 30px;
    border: 1px dashed var(--primary_color);
    font-weight: 600;
    font-size: 14px;
    padding: 13px 25px;
}
.secondary_btn.secondary_plane{
    border: 1px dashed var(--white_color);
    color: var(--primary_color) !important;
}
.btn_primary::before,
.secondary_btn::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--primary_color);
    z-index: -1;
    border-radius: 30px;
    margin: 2px;
    transition: .3s;
}
.btn_primary:hover::before,
.secondary_btn:hover::before {
    margin: 0;
}

.secondary_btn::before{
    background: var(--secondary_color);
}
.secondary_btn.secondary_plane::before{
    background: var(--white_blue);
}


/* .bread_crumpsection{
    padding: 150px 0 10px;
    z-index: 1;
    background: var(--white_blue);
    position: relative;
}
.breadcrump_bg{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px;
    background: var(--white_color);
}

.bread_crumpsection::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/hero_background_xfq.svg) center/cover no-repeat;
    transform: scaleX(-1);
    z-index: -1;
}
.bread_crumpList{
    display: flex;
    align-items: center;
    gap: 30px;
}
.breadcrump_link{
    position: relative;
    display: inline-block;
    color: var(--secondary_color);
    font-size: 15px;
    font-weight: 500;
}
.breadcrump_link::before{
    height: 25px;
    width: 2px;
    background: var(--primary_color);
    content: "";
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%) rotate(30deg);
    
} */

.breadcrump_item{
    display: inline-block;
    color: var(--primary_color);
    font-size: 15px;
    font-weight: 500;
}

.header_nav{
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    
}
.header_nav.sticked{
    background: var(--white_color);
}
#navbar{
    background: transparent;
    padding: 0 10px;
}


.logo_site{
    max-width: 80px;
}
.header_nav.sticked .logo_site{
    max-width: 60px;
}

#nav_item{
    color: var(--dark_color);
    font-size: 15px;
    font-weight: 500;
}
#nav_item:hover , #nav_item i{
    color: var(--secondary_color);
}
#nav_item i{
    font-size: 12px;
}
#nav_item.lang_link{
    color: var(--secondary_color);
}
.active_lang,
#nav_item.lang_link:hover{
    color: var(--third_color) !important;
}

.dropdown-menu{
    border: 1px solid var(--border_color);
    border-radius: calc(var(--raduis) * 0);
    background: var(--white_color);
    text-align: right;
    padding: 0;
    /* overflow: hidden; */
    left: auto !important;
    right: 0 !important;
    min-width: 200px;
}
.dropdown-item{
    font-size: 15px;
    font-weight: 500;
    padding: 10px 8px;
    color: var(--dark_color);
    border-bottom: 1px solid var(--border_color);
}
.dropdown-item:hover{
    background: var(--primary_color);
    color: var(--white_color);
    padding-right: 12px;
}


/* يخلي submenu يظهر جنب الأساسي */
.dropdown-submenu .dropdown-menu {
    top: 0;
    right: 100% !important;
    left: 0 !important;
    margin-top: -1px;
}

/* يظهر بالـ hover */
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}



.hero_section{
    /* min-height: 80vh; */
    /* align-content: center; */
    z-index: 1;
    padding: 150px 0;
    background: var(--white_blue);
}

.hero_section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/hero_background_xfq.svg) center/cover no-repeat;
    transform: scaleX(-1);
    z-index: -1;
}
.hero_ban_image {
    max-width: 467px;
    margin-right: auto;
}
.content_hero{
    position: relative;
}
.shape_hero_1{
    position: absolute;
    top: 30px;
    right: 10%;
    z-index: -1;
    animation: topbottom 1s infinite ease-in both alternate-reverse;
}
.hero_title{
    font-size: 30px;
    font-weight: 500;
    color: var(--primary_color);
}
.hero_desc{
    color: var(--dark_color);
    font-size: 16px;
    font-weight: 500;
}

.hero_media{
    position: relative;
}
.hero_image{
    width: calc(100% - 84px);
    max-width: 624px;
    height: 100%;
    max-height: 610px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    overflow: hidden;
    margin-right: auto;
}

.hero_badge_circle {
    width: 132px;
    height: 132px;
    position: absolute;
    top: 10%;
    right: 0;
    transform: translateX(50%);
    z-index: 2;
    transition: all 0.4s;
    animation: rotate-animation 12s infinite linear;
    display: flex;
    align-items: center;
    justify-content: center;
}



.counter_section{
    
    z-index: 1;
}
.counter_section::before{
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 50%;
    background: var(--white_blue);
    z-index: -1;
}
.counter_contetbg{
    background-color: #2a2d3c;
    background-image: url(../img/stats_bg_o4y.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 60px 48px;
    border-radius: 32px;
    width: 100%;
    height: 100%;
}

.card_counter{
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
}

.icon_counter{
    width: 72px;
    min-width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white_color);
}

.icon_counter.icon_1 {
    background-color: #080609;
    
}

.icon_counter.icon_2 {
    background-color: #3fcd82;
    
}

.icon_counter.icon_3 {
    background-color: #EE5A59;
    
}

.icon_counter.icon_4 {
    background-color: #FFA200;
    
}

.counter_number{
    color: var(--white_color);
    font-size: 30px;
    font-weight: 700;
}
.counter_title{
    font-size: 16px !important;
    margin-top: 4px !important;
    color: var(--white_color);
}


.aboutus_section{
    padding: 50px 0;
}

.section_badge{
    border: 1px dashed var(--secondary_color);
    color: var(--secondary_color);
    background: var(--white_blue);
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: max-content;
    padding: 8px 30px;
    font-size: 13px;
    border-radius: 100px;
    margin: 15px 2px;

}
.title_section{
    font-size: 25px;
    color: var(--primary_color);
    font-weight: 500;
}
.section_desc,
.mission_about_desc{
    color: var(--dark_color);
    font-size: 15px;
    font-weight: 500;
}
.mission_about_desc{
    font-size: 14px;
    margin: 0;
}
.about_image{
    margin-right: 0;
    margin-left: auto;
    width: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    overflow: hidden;
}
.about_btnvideo{
    width: 70px;
    height: 70px;
    position: absolute;
    left: 50%;
    z-index: 2;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white_color);
    border-radius: 50%;
    font-size: 40px;
    color: var(--primary_color);
    border: 0;
    outline: 0;
}
.about_btnvideo:hover{
    background: var(--secondary_color);
    color: var(--white_blue);
}
.about_btnvideo i{
    line-height: 0.3rem;
}
.about_btnvideo:after, .about_btnvideo:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    bottom: 0;
    left: 0;
    transition: 0.3s;
    border-radius: 50%;
    border: 1.5px solid var(--white_color);
}
.about_btnvideo:before {
    animation: ripple 2s linear infinite;
}
.about_btnvideo:after {
    animation: ripple 2s linear 1s infinite;
}
.card_mission_about{
    padding: 5px 15px;
    border: 0;
    border-radius: var(--raduis);
}
.mission_about_title{
    font-size: 17px;
    color: var(--secondary_color);
    font-weight: 500;
}


.courses_section{
    padding: 60px 0;
    background: var(--white_blue);
}

.card_courses{
    border: 1px dashed var(--primary_color);
    border-radius: var(--raduis);
    padding: 16px;
    background: var(--white_color);
}
.courses_image{
    position: relative;
    overflow: hidden;
    border-radius: var(--raduis);
}
.courses_image img{
    width: 100%;
    height: 100%;
}
.card_courses:hover .courses_image img{
    transform: scale(1.1);
}

.rate_course{
    gap: 10px;
}
.rate_icons i{
    line-height: 0.2rem;
    color: var(--secondary_color);
}
.rate_count{
    color: var(--primary_color);
    font-size: 14px;
}
.listed_feat_course{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px;
    background: var(--white_off);
    border-radius: var(--raduis);
}
.listed_feat_course li{
    color: var(--dark_color);
    font-size: 12px;
    font-weight: 400;
    position: relative;
}

.listed_feat_course li svg{
    width: 1rem;
    height: 1rem;
}
.course_title,
.blog_title{
    font-size: 16px;
    font-weight: 500;
    color: var(--primary_color);
    margin-bottom: 15px;
}
.card_courses:hover .course_title,
.blog_card:hover .blog_title{
    color: var(--secondary_color);
}
.courses_subtitle{
    color: var(--dark_color);
    font-size: 14px;
    font-weight: 500;
}


.courses_pagination{
    position: relative;
    inset: auto !important;
    margin: 0;
    padding: 0;
    max-width: max-content;
    align-items: center;
    max-width: 200px;
}
.swiper-pagination-bullet{
    width: 15px;
    height: 10px;
    border-radius: 3px;
    background: var(--secondary_color);
    opacity: 0.4;

}
.swiper-pagination-bullet-active{
    background: var(--primary_color);
    opacity: 1;
    width: 30px;
}
.btn_swiper_action{
    position: relative;
    inset: auto !important;
    margin: 0;
    padding: 15px;
    border: 1px dashed var(--secondary_color);
    border-radius: var(--raduis);
    color: var(--secondary_color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}
.btn_swiper_action::before,
.btn_swiper_action::after{
    display: none;
}
.btn_swiper_action i{
    line-height: 0.3rem;
}
.btn_swiper_action:hover,
.btn_swiper_action:focus{
    background: var(--secondary_color);
    color: var(--white_off);
}




.testmonial_section{
    background-image: url(../img/testimonial-bg.png);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 50px 0;
}
 
.card_testmonial{
    background: var(--white_color);
    border-radius: var(--raduis);
    border: 1px dashed var(--secondary_color);
    padding: 30px 20px 15px;
    position: relative;

}
.review_blockquote{
    position: absolute;
    top: 0;
    left: -2px;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
}
.review_content{
    color: var(--dark_color);
    font-size: 15px;
    font-weight: 400;
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--dark_color);
    margin-bottom: 15px;
}
.review_name{
    font-size: 16px;
    font-weight: 500;
    color: var(--primary_color);
    margin-bottom: 10px;
}
.review_jop{
    font-size: 13px;
    font-weight: 500;
    color: var(--secondary_color);
    margin: 0;
}
.review_image{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 5px;
    border: 1px dashed var(--primary_color);
}
.review_image img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.review_list{
    gap: 0;
}
.review_list li{
    padding: 10px 0;
    color: var(--secondary_color);
    font-size: 15px;
    font-weight: 500;
    margin: 0 !important;
}
.review_list li:not(:last-child){
    border-bottom: 1px dashed var(--secondary_color);
}
.review_list li i{
    line-height: 0.3rem;
    color: var(--secondary_color);
}





.contact_section{
    padding: 50px 0;
}
.contact_link ,
.contact_address_text{
    color: var(--primary_color);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}
.contact_link i{
    line-height: 0.3rem;
    font-size: 18px;
}
.contact_link:hover ,
.contact_link i{
    color: var(--secondary_color);
}
.contact_address_label{
    color: var(--secondary_color);
    font-weight: 500;
}

.contact_soc_btn{
    border: 1px dashed var(--primary_color);
    border-radius: var(--raduis);
    color: var(--primary_color);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    font-size: 20px;
}
.contact_soc_btn:hover{
    color: var(--white_off);
    background: var(--secondary_color);
    border-color: var(--secondary_color);
    transform: translateY(-8px);
}
.contact_form_card{
    border: 1px dashed var(--primary_color);
    padding: 20px;
    border-radius: var(--raduis);
}
.contact_field_label{
    font-size: 15px;
    font-weight: 500;
    color: var(--dark_color);
    margin-bottom: 15px;
}
.form-control{
    border: 1px dashed var(--primary_color);
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 400;
    text-align: right;
    color: var(--primary_color);
}
.form-control::placeholder{
    color: var(--secondary_color);
}
.form-control:focus{
    border-color: var(--secondary_color);
    box-shadow: 0 0 5px 2px rgb(13 110 253 / 14%);
    background-color: var(--white_blue);
}
.form-select{
    background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
    background-repeat: no-repeat;
    background-position: left .75rem center;
    background-size: 16px 12px;
}
.contact_location_teaser{
    border: 1px dashed var(--secondary_color);
    padding: 20px;
    border-radius: var(--raduis);
    background: var(--white_blue);
}
.contact_location_teaser iframe{
    width: 100%;
    min-height: 300px;
    border-radius: var(--raduis);
    margin: 0;
}

.blogs_section{
    padding: 50px 0;
    background: var(--white_blue);
}
.blog_card{
    border: 1px dashed var(--primary_color);
    border-radius: var(--raduis);
    padding: 15px;
    text-align: center;
    background: var(--white_blue);
}
.image_blog{
    border-radius: var(--raduis);
    position: relative;
    overflow: hidden;
    margin-bottom: 15px;
}
.image_blog img{
    width: 100%;
    height: 100%;

}
.blog_card:hover .image_blog img{
    transform: scale(1.1);
}
.btn_primary svg{
    transform: scaleX(-1);
}
.btn_primary:hover svg{
    transform: scaleX(-1)  rotate(45deg);
}


.footer{
    z-index: 1;
    padding: 50px 0 35px;
    background: var(--white_blue);
}
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../img/hero_background_xfq.svg) center/cover no-repeat;
    z-index: -1;
}
.logo_footer{
    max-width: 100px;
}
.logo_footer img{
    max-width: 100%;
    height: auto;
}
.footer_title{
    color: var(--primary_color);
    font-size: 16px;
    font-weight: 600;
}
.footer_links a{
    color: var(--dark_color);
    display: inline-block;
    padding: 10px 0;
    width: 100%;
    border-bottom: 1px dashed var(--primary_color);
}
.footer_links a:hover{
    padding-right: 10px;
    color: var(--secondary_color);
    border-color: var(--secondary_color);
}
.footer_hr{
    height: 0;
    border-top: 1px dashed var(--primary_color);
}
.footer_policy_links a{ 
    font-size: 14px;
    color: var(--dark_color);
    display: inline-block;
    padding: 10px 0;
    border-bottom: 1px dashed var(--primary_color);
}
.footer_policy_links a:hover{
    color: var(--secondary_color);
    border-color: var(--secondary_color);
}
.footer_bottom p{
    font-size: 15px;
    color: var(--primary_color);
    font-weight: 400;
}
.footer_bottom p a {
    color: var(--secondary_color);
    text-decoration: underline dashed 1px var(--secondary_color);
}




.values_section{
    background: var(--white_blue);
}

.card_values{
    padding: 15px;
    background: var(--white_color);
    border: 1px solid var(--border_color);
    border-radius: var(--raduis);
    z-index: 1;
    height: 100%;
}
.card_values:hover{
    transform: translateY(-5px);
}
.values_icon{
    padding: 15px 15px 25px;
}
.card_1{
    border: 1px solid #C9E4E9;
    background: #F1FDFF;
    box-shadow: -8px 8px 0px 0px #C9E4E9;
}
.card_2{
    border: 1px solid #C8C1ED;
    background: #EDEAFF;
    box-shadow: -8px 8px 0px 0px #D9D5F1;
}
.card_3{
    border: 1px solid #EBE0C4;
    background: #FFF7E2;
    box-shadow: -8px 8px 0px 0px #E5DECB;
}
.card_1:hover,
.card_2:hover,
.card_3:hover{
    transform: none;
    box-shadow: none !important;
}

.call_to_action{
    padding: 60px 0;
    background: var(--primary_color);
}

.callToaction_title{
    color: var(--white_color);
    font-size: 20px;
    font-weight: 600;
}
.call_toaction_content{
    color: var(--white_blue);
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}




.faqs_section{
    padding: 20px 0;
}
.accordion-item{
    border: 1px dashed var(--primary_color) !important;
    margin-bottom: 15px;
    border-radius: var(--raduis) !important;
    overflow: hidden;
}

.accordion-button{
    color: var(--primary_color);
    font-size: 15px;
    font-weight: 500;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed){
    color: var(--white_color);
    background: var(--primary_color);
}
.accordion-button::after{
    display: none;
}
.accordion-button i{
    margin-right: auto;
}
.accordion-button:not(.collapsed) i{
    transform: rotate(90deg);
}


.privacy_section{
    padding: 40px 0;
}
.privacy_section .container{
    max-width: 1000px !important;
}
.card_policy{
    padding: 5px 20px 20px;
    border: 1px dashed var(--secondary_color);
    border-radius: var(--raduis);
}
.policy_header{
    border-bottom: 1px dashed var(--secondary_color);
}
.policy_header .title_policy{
    color: var(--primary_color);
    font-weight: 500;
    font-size: 25px;
}
.card_policy h2 , 
.card_policy h3 , 
.card_policy h4 ,
.card_policy h5 ,
.card_policy h6{
    color: var(--deeb_dark);
    font-weight: 500;
    font-size: 18px;
}

.card_policy p , 
.card_policy li , 
.card_policy a {
    color: var(--primary_color);
    font-size: 15px;
    font-weight: 400;
}
.card_policy a{
    color: var(--secondary_color);
    text-decoration: underline dashed 1px var(--secondary_color);
}


.course_details{
    padding: 50px 0;
}
.course_details .container{
    max-width: 1200px !important;
}
.image_course{
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: var(--raduis);
}
.image_course img{
    max-width: 100%;
    height: 100%;
}
.image_course:hover img{
    transform: scale(1.1);
}


.courseDet_title{
    font-size: 25px;
    font-weight: 500;
    color: var(--primary_color);
}
.course_content h2 ,
.course_content h3 ,
.course_content h4 ,
.course_content h5 ,
.course_content h6{
    font-size: 18px;
    font-weight: 500;
    color: var(--primary_color);
}
.wedgit_title{
    font-size: 18px;
    font-weight: 500;
    color: var(--secondary_color);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.course_content p ,
.course_content li{
    color: var(--dark_color);
    font-size: 16px;
    font-weight: 500;
    position: relative;
}
.course_content li {
    padding: 10px;
    padding-right: 30px;
    border-bottom: 1px dashed var(--primary_color);
}
.course_content li i{
    color: var(--secondary_color);
}


.course_content li::before{
    content: var(--fa) / "";
    --fa: "\f058";
    --fa-style: 400;
    --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Free"));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: var(--fa-display, inline-block);
    font-family: var(--_fa-family);
    font-feature-settings: normal;
    font-style: normal;
    font-synthesis: none;
    font-variant: normal;
    font-weight: var(--fa-style, 900);
    line-height: 1;
    text-align: center;
    text-rendering: auto;

    position: absolute;
    top: 50%;
    right: 5px;
    color: var(--secondary_color);
    transform: translateY(-50%);

}
.bread_crump_course{
    padding: 15px;
    border: 1px solid var(--border_color);
    border-radius: var(--raduis);
    background: var(--white_color);
}
.course_setails_content{
    padding: 15px;
    border-radius: var(--raduis);
    border: 1px solid var(--border_color);
    background: var(--white_off);
}

.aside_wedgit{
    position: sticky;
    top: 100px;
    padding: 15px;
    border: 1px solid var(--border_color);
    border-radius: var(--raduis);
    background: var(--white_off);
}

.course_video{
    overflow: hidden;
}
.course_video video,
.course_video img{
    border-radius: var(--raduis);
    max-width: 100%;
    min-height: 200px;
}

.wedgit_anoutherBlogs{
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--secondary_color);
}



.course-meta-masonry {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    color: var(--dark_color);
    font-size: 0.9rem;
    padding: 0.6rem 0.1rem;
    border-bottom: 1px dashed var(--secondary_color);
    margin-bottom: 10px;
    position: relative;
    flex-wrap: wrap;
}

.course-meta-masonry span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}
.course-meta-masonry span:not(:last-child) {
    border-left: 1px solid var(--secondary_color);
    padding-left: 20px;
}
.course-meta-masonry i {
    color: var(--secondary_color);
}

/* تنسيق بطاقة المعلم */
.card_teacher {
    background: var(--white_color);
    border: 1px dashed var(--border_color);
    border-radius: var(--raduis);
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.card_teacher:hover {
    transform: translateY(-5px);
    border-color: var(--secondary_color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* تنسيق الفيديو */
.teacher_video_wrapper {
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    height: 250px;
    border-radius: 12px;
    background: var(--deeb_dark);
    margin-bottom: 20px;
}

.teacher_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.teacher_video_wrapper .about_btnvideo{
    opacity: 0;
    visibility: hidden;
}
.card_teacher:hover .about_btnvideo{
    opacity: 1;
    visibility: visible;
}


/* بيانات المعلم */
.teacher_name {
    color: var(--primary_color);
    font-size: 1.2rem;
    font-weight: 700;
}

.teacher_job {
    color: var(--third_color);
    font-size: 0.9rem;
    font-weight: 600;
}

.teacher_bio {
    color: var(--dark_color);
    font-size: 0.85rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* المميزات */
.feature_badge {
    background: var(--white_blue);
    color: var(--primary_color);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: var(--transition);
}

.feature_badge i {
    margin-left: 5px;
    color: var(--third_color);
}

.card_teacher:hover .feature_badge {
    border-color: var(--secondary_color);
}




/*----------student section------------*/
.card_student {
    background: var(--white_color);
    border: 1px dashed var(--border_color);
    border-radius: var(--raduis);
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.card_student:hover {
    transform: translateY(-5px);
    border-color: var(--secondary_color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}
.student_video_wrapper {
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    height: 250px;
    border-radius: 12px;
    background: var(--deeb_dark);
    margin-bottom: 20px;
}
.student_name {
    color: var(--primary_color);
    font-size: 1.2rem;
    font-weight: 700;
}

.student_job {
    color: var(--third_color);
    font-size: 0.9rem;
    font-weight: 600;
}

.student_bio {
    color: var(--dark_color);
    font-size: 0.85rem;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.login-section{
    min-height: 100vh;
    align-content: center;
    position: relative;
    background: var(--white_blue);
}
.login-section::before{
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: url(../img/login_bg.png)center center/cover no-repeat;
    opacity: 0.1;
}

.card_account{
    border-radius: var(--raduis);
    border: 1px dashed var(--secondary_color);
}
.account_title{
    font-size: 25px;
    font-weight: 500;
    color: var(--primary_color);
}
.input_group{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.input_icon{
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}
#loginForm .form-control{
    padding-left: 45px;
}
.account_externalLink{
    color: var(--secondary_color);
}
.account_externalLink:hover{
    color: var(--primary_color);
}
.account_brand{
    max-width: 100px;
}