@font-face {
    font-family: 'peyda-light';
    src: url('assets/fonts/Peyda-Medium.ttf');
    font-weight: 500;
}
@font-face {
    font-family: 'peyda-bold';
    src: url('assets/fonts/Peyda-ExtraBold.ttf');
    font-weight: bold;
}
@font-face {
    font-family: 'peyda-black';
    src: url('assets/fonts/Peyda-Black.ttf');
    font-weight: 900;
}
:root{
    --white2: #FFFFFF;
    --gray: #F8F9FA;
    --black: #292827;
    --red: #FC372B;
    --green: #1E3C34;
    --field:#F9F6EE;
}
*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
/*starting to write css code for home page*/
.page_container{
    height: 100vh;
    background-color: var(--gray);
    width: 100vw;
    margin-top: -7%;
}
.data_container{
    display:flex;
}
h1, h2, h3, h4, h5,h6{
    font-family: 'peyda-bold';
}

h1{
    font-size: 34px;
    line-height: 2em;
    color: black;

}
h2{
    font-size:30px;
    line-height: 2em;
    color: black;

}
h3{
    font-size: 24px;
    line-height: 2em;
    color: black;

}
h4{
    font-size: 20px;
    line-height: 2em;
    color: black;
}
h5{
    font-size: 18px;
    line-height:2em;
    color: black;
}
h6{
    font-size: 16px;
    line-height: 2em;
    color: black;
}
p{
    font-size: 14px;
    line-height: 1.7em;
    color: black;
    font-family: 'peyda-light' !important;
}
a{
    text-decoration: none;
}
label{
    padding-left: 8px;
    font-family: 'peyda-light';
}

/*css code for home page left-hand side piture*/
.picture_container{
    background-image: url('assets/images/DSC_0333.jpg');
    background-repeat: none;
    background-size: cover;
    background-position-y: center;
    width:120%;
    height: 100vh;
    margin-left: -5.5%;
    
}

/* css code for home page right-hand side text section*/
.page_text_container{
    align-content: center;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%;
}
p{
    text-align: justify;
    font-family: peyda;
}
button{
    width: 208px;
    height: 46px;
    font-size: 14px;
    margin-top: 10%;
    border: none;
    border-radius: 10px;
    font-family: 'peyda-light';
}

/* start the button that starts test page*/
.start_test_button{
    background-color: var(--green);
    color: var(--white2);
}
.start_test_button:hover{
    background-color: rgba(0,0,0,0);
    color: var(--green);
    border: 2px solid var(--green);
    transition: 0.3s ease-in-out;
    cursor: pointer;
}
/*end button that starts test page*/

/*start the button that goes to dashboard login page*/
.personel_login_button{
    background-color: rgba(0,0,0,0);
    border: 2px solid var(--green);
    color: var(--green);
    margin-right: 10%;
}
.personel_login_button:hover{
    background-color: var(--green);
    border: none;
    color: var(--white2);
    transition: 0.3s ease-in-out;
    cursor: pointer;
}
/*end the button that goes to dashboard login page*/

/* start home page texts*/
.title_font{
    line-height: 5em;
    font-family: 'peyda-bold';
}
.paragraph_text{
    font-family: 'peyda-light';
}
/* end home page texts*/

/*start signup page*/

.signUpformcontainer{
    align-content:center;
    text-align: center;
    width: 100%;
    min-width: 50%;
    max-width: 100%;
    height: 100vh;
    background-color: var(--gray);;
}
.signup_subhead{
    text-align: center;
    font-family: 'peyda-light';
    font-size: 14px;
    margin-bottom: 4%;;

}
.form_container_one{
    width: 90%;
    align-content: center;
    padding-right: 5%;
    margin-right: 5%;
}
#form_container_one{
    width: 100%;
    align-content: center;
    padding-right: 5%;
}
#field_container_one, #field_container_two{
    width: 80%;
    display: block;
    margin-right: 5%;
    display: flex;
    column-gap: 41px;
}
#field_container_two{
    margin-top: 3%;
}
label{
    font-family: 'peyda-light';
    font-size: 14px;
}
.field_container{
    width: 31%;
    height: auto;
}
#signupField{
    direction: rtl;
    width: 86%;
    background-color: var(--field);
    border: 0px;
    height: 51px;
    border-radius: 10px;
    font-family: 'peyda-light';
    font-size: 14px;
    padding-right: 40px;
    padding-left: 10px;
    background-image: url(assets/images/user.png);
    background-position: 97% 12px;
    background-size: 23px 23px;
    background-repeat: no-repeat;
    color: black;
}
.phone_number{
    background-image: url(assets/images/phone-call.png) !important;
}
.birthdate_field{
    background-image: url(assets/images/calendar.png) !important;
}
.city_field{
    background-image: url(assets/images/international.png) !important;
}
.signUpFrm_submit{
    margin-top: 5%;
    background-color: var(--green);
    border: 0px;
    color: white;
    font-family: 'peyda-light';
    font-size: 14px;
    width: 248px;
    height: 49px;
    border-radius: 10px;
    margin-left: 12%;
}
.signUpFrm_submit:hover{
    cursor: pointer;
    background-color: var(--white2);
    color: var(--green);
    border: 2px solid var(--green);
    background-image: url(assets/images/neext.png) o !important;
    background-repeat: no-repeat;
    background-position: 70% 12px;
    background-size: 20px 20px;
    transition: 0.3s ease-in-out;
}
/*end sign up page*/
/*login page start*/
.personel_login_form_page{
    background-image: url(assets/images/DSC_0335.JPG);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--black);
    background-blend-mode:hard-light;
    height: 100vh;
    align-content: center;
    text-align: center;

}
.login_page_icon{
    width: 50px;
    height: 50px;
    background-color: var(--green);
    padding: 15px;
    border-radius: 100px;
    z-index: 2;
}
.personel_form_login_container{
    text-align: center;
}
.form_holder{
    display: flex;
    justify-content: center;
    margin-top: -1%;
    z-index: 0;
}
.form_holder{
    display: flex;
    margin: 0 auto;
}
.login_form{
    background-color: #ffffffc5;
    width: 30%;
    height: 300px;
    display: block;
    align-content: center;
    border-radius: 10px;
    padding-top: 20px;
    padding-bottom: 20px;
    z-index: 1;
}
.login_page_icon{
    width: 70px;
    height: 70px;
    background-color: var(--green);
    padding: 3%;
    margin: 0 auto;
    display: block; 
}
.login_form_container {
    position: relative; /* makes absolute children positionable */
}
.personel_form_login_container{
    z-index: 1;
}
.login_field{
    width: 290px;
    height: 41px;
    border-radius: 10px;
    border: none;
    background-color: var(--field);
    font-family: 'peyda-light';
    color: var(--black);
    padding-right: 40px;
    padding-left: 30px;
    margin-top: 20px;
    font-size: 14px;
}
#login_username{
    background-image: url(assets/images/user.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 97%;
}
#login_password{
    background-image: url(assets/images/passkey.png);
    background-position: 97%;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}
.btn_form_submit{
    width: 40%;
    background-color: var(--green);
    border: none;
    margin-top: 5%;
    color:white;
    font-family: 'peyda-bold';
    height: 40px;
    border-radius: 10px;
}
.btn_form_submit:hover{
    cursor: pointer;
    background-color: rgba(0,0,0,0);
    border: 2px solid var(--green);
    color: var(--green);
    transition: 0.3s ease-in-out;
}
/*end login page*/
/*start exam div*/
.start_exam_page{
    background-color: var(--gray);
    height: 100vh;
    width: 100%;
}
.exam_introduction{
    width: 80%;
    display:flex;
    height: 100vh;
    background-color: var(--gray);
    text-align: center;
    column-gap: 100px;
    margin-right: 10%;
    align-items: center;
}
.text_holder{
    width: 50%;
    max-width: 60%;
}
.image_holder{
    width: 40%;
}
.image_exam{
    width: 500px;
    background-blend-mode:darken;
}
.start_exam_button{
    float: left;
    background-color: var(--green);
    color: var(--white2);
}
.start_exam_button:hover{
    background-color: var(--gray);
    border: 2px solid var(--green);
    cursor: pointer;
    transition: 0.3s ease-in-out;
    color: var(--green);
}
.paragraph_introcution_exam{
    font-family: 'peyda-light';
}
.title_introduction_exam{
    text-align: right;
}
/*end start exam page*/
/*start personel dashboard page*/
.dashboardParent{
    width: 100%;
    height: 100vh;
    display: flex;
    position: sticky;
}
.dashboard_holder{
    display: block;
}
.nav_section{
    display: block;
    justify-items: center;
    width: 20%;
    height: 100vh;
    background-color: var(--white2);
    align-items: center;
    position:sticky;

}
.content_holder{
    width: 80%;
    display: block;
}
.profile_holder{
    display: flex;
    column-gap: 10px;
    justify-content: center;
    margin-right: -5%;
    margin-top: 25%;

}
.dashboard_nav{
    display: block !important;
    margin-top: 40%;
    justify-content: flex-start;
    width: 100%;
    padding: 0px;
}
.nav_item{
    margin-right: 20%;
    display: flex;
    column-gap: 10px;
    margin-bottom:3%;
    width: 80% !important;
    padding: 0px;
    max-width: 100% !important;
    height: 50px;
    align-items: center;
}
.nav_item:hover{
    cursor: pointer;
    padding-right: 10%;
    border-radius: 10px;
    transition: 0.3s ease-in-out;
    width: 80% !important;
}
.nav_title{
    list-style: none;
    font-family: 'peyda-light';
    font-size: 14px;
}
.nav_title a{
    text-decoration: none;
    color: var(--black);
}
.dashboard_nav_footer{
    text-align: center;
    margin-top: 60%;
    font-size: 12px;
}
.introduction_div{
    display: block;
    width: 90%;
    background-image: linear-gradient(to right,var(--red), #ff8fa3);
    height: 300px;
    margin: 0 auto;
    border-radius: 10px;
    margin-top: 5%;
    box-sizing: border-box;
    padding: 3%;
}
.intro_sections{
    display: flex;
    column-gap: 100px;
    margin-top: 4%;
}
.intro_item{
    background-color: var(--white2);
    width: 25%;
    height: 120px;
    border-radius: 10px;
    text-align: center;
    align-items: center;
    padding: 2%;
    box-sizing: border-box;
}
.intro_title{
    text-align: center;
}
.quick_actions_div{
    display: flex;
    column-gap: 50px;
    width: 90%;
    margin: 0 auto;
    margin-top: 7%;
}
.quick_action_one{
    background-color: var(--white2);
    border-radius: 10px;
    height: fit-content;
    align-content: center;
    padding: 3%;
    box-sizing: border-box;
    row-gap: 20px;
    width: 45%;
    box-shadow: 2px 2px 15px -2px rgba(0,0,0,0.2);
}
.add_question_icon{
    background-image: linear-gradient(to right, var(--red),#ff8fa3);
    width: 80px;
    height: 80px;
    padding: 3%;
    box-sizing: border-box;
    border-radius: 100px;
    margin-bottom: 20px;
    float: left;
}
.add_question_desc{
    margin-top: 7px;
    width: 70%;
}
.add_question_button{
    background-color: var(--white2);
    text-align: right;
    color: var(--black);
    margin-top: 15px;
}
.add_question_button:hover{
    background-color: var(--green);
    text-align: center;
    transition: 0.3s ease-in-out;
    cursor: pointer;
    color: var(--white2);
}
.quick_action_two{
    width: 50%;
    display: block;
    row-gap: 20px;
}
.questions_container{
    background-color: var(--white2);
    padding: 5%;
    box-sizing: border-box;
    border-radius: 10px;
    margin-top: 0px;
    box-shadow: 2px 5px 15px -2px rgba(0,0,0,0.2);
}
.question_title{
    font-size: 18px;
}
.question_category{
    margin-top: -10px;
}
.question_title:hover{
    color: var(--green);
    cursor: pointer;
}
.responsive_header{
    display: none;
    visibility: hidden;
}
.question_holder{
    display: none;
    width: 90%;
    margin: 0 auto;
    height: 95vh;
    padding: 3%;
    box-sizing: border-box;
    overflow-y: auto;
}
.title_holder{
    width: 80%;
    align-items: center;
}
.addForm_btn{
    width: 20%;
    float: left;
    padding: 0;
}
.addQuestion_form{
    width: 60%;
    float: left;
    background-color: var(--white2);
    border: 1px solid var(--red);
}
.addQuestion_form:hover{
    width: 60%;
    background-color: var(--red);
    border: none;
    transition: 0.3s ease-in-out;
    color: var(--white2);
    cursor: pointer;
}
.question_list{
    margin-top: 5%;
    cursor: pointer;
    height: 70vh;
    overflow-y: auto;
    padding: 1%;

}
.question_repeater{
    background-color: var(--white2);
    border-radius: 10px;
    padding: 3%;
    gap: 10px;
    box-sizing: border-box;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
    margin-bottom: 15px;
}
.question_repeater_title:hover{
    color: var(--green);
    cursor: pointer;
    transition: 0.3s ease-in-out;
}
.personel_holder{
    display: none;
}

.personel_inner_container{
    display: block;
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px;
    box-sizing: border-box;
}
.volunteer_inner_holder{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    margin: 0 auto;
    gap: 50px;
    overflow-y: auto;
}
.personel_container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    width: 100%;
    margin-top: 30px;
}
.user_prfile_photo{
    width: 50px;
    height: 50px;
    float: left;
}
.userProfileName{
    margin-top: 15px;
    font-size: 14px;
}
.personel_profile{
    background-color: var(--white2);
    padding: 2%;
    box-sizing: border-box;
    border-radius: 10px;
    width: 100%;
    display: flex;
    gap: 20px;
    align-items: center;
}
.personelInfoHolder{
    display: block;
    margin-top: -10px;
}
.result_holder{
    display: none;
}
.result_inner_container{
    display: block;
    width: 90%;
    margin: 0 auto;
    padding-top: 3%;
    box-sizing: border-box;
    padding-bottom: 5%;
    height: 100vh;
}
.result_intro{
    width: 100%;
    display: flex;
    align-content: center;
    height: fit-content;
}
.result_div_title{
    width: 80%;
    align-content: center;
    padding-top: 1%;
}
.students_list_btn{
    background-color: var(--white2);
    border: 1px solid var(--red);
    
}
.students_list_btn:hover{
    background-color: var(--red);
    border: none;
    color: var(--white2);
    cursor: pointer;
    transition: 0.3s ease-in-out;
}
.result_repeater{
    background-color: var(--white2);
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
    box-sizing: border-box;
    padding: 3%;
    margin-bottom: 20px !important;
    cursor: pointer;
}
.result_container{
    height: 70vh;
    padding: 1%;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #f1f1f1;
    margin-bottom: 25px !important;
    display: grid;
    grid-template-columns: minmax(1, 1fr);
}
.result_container::-webkit-scrollbar{
    width: 1px;
}
#volunteer_holder{
    display: none;
}
.volunteer_profile{
    width: 25%;
    height: auto;
    border-radius: 10px;
}
.volunteerـsingle{
    display: flex;
    column-gap: 40px;
    box-sizing: border-box;
    margin-bottom: 30px;
}
.volunteer_txt_data{
    display: block;
}
a.volunteer_phoneNumber:hover{
    color: var(--red);
    cursor: pointer;
}
.volunteer_button{
    width: max-content;
    background-color: rgba(0,0,0,0);
}
.volunteer_button:hover{
    background-color: var(--red);
    cursor: pointer;
    width: 100%;
    transition: 0.3s ease-in-out;
    color: var(--white2);
}
/*end of personel dashboard*/

/*start of profile editor*/
.section_holders{
    display: flex;
    column-gap: 50px;
}

.profile_field_holder{
    width: 100% !important;
    display: block;
}
.field_holder{
    width: 100%;
}
.row_one_holder{
    display: flex;
    column-gap: 30px;
}
.institute_profile_picture{
    width: 190px;
    height: 190px;
    border-radius: 100px;
}
.institute_data_holder{
    width: 100%;
}
.data_container{
    width: 90%;
    margin: 0 auto;
    margin-top: 7%;
}
.institute_data_holder{
    width: 100%;
    align-items: center;
    display: none;
}

.row_one_field_holder{
    display: block;
}
label{
    font-size: 16px;
    font-family: 'peyda-bold';
    margin-bottom: 15px;
}
.institute_name, .institute_support, .support_telegram, .institue_address, .institute_instagram{
    background-color: #F9F6EE;
    height: 47px;
    border-radius: 10px;
    border: none;
    width: 100%;
    font-family: 'peyda-light';
    padding: 0 5px;
}
.institute_name, .institute_support, .support_telegram, .institue_address, .institute_instagram :active{
    border: 0px;
    outline: none;
}
.row_two_holder{
    display: flex;
    column-gap: 40px;
    margin-top: 40px;
}
.row_two_field_holder_one{
    width: 62%;
}
.profile_submite{
    background-color: var(--red);
    border: none;
    border-radius: 6px;
    width: 150px;
    height: 35px;
    font-family: 'peyda-light';
    color: var(--white2);
    margin-top: 40px;
}
.profile_submite:hover{
    background-color: var(--white2);
    border: 1px solid var(--red);
    transition: 0.3s ease-in-out;
    cursor: pointer;
    color: var(--red);
}
/*footer*/
.footer{
    display: none;
    visibility: hidden;
}

/*starting add question pop up*/
#new_question_modal_container{
    width: 70%;
    padding: 3% !important;  
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box-sizing: border-box;
    margin: 0 auto;
    background-color: var(--white2);
    display: none;
    position: fixed;
    top: 45px;
    right: 0;
    left: 0;
    bottom: 0;
    height: 87vh;
    transition: all 0.3s ease-in-out;
}
.question_add_title{
    display: flex !important;
    gap: 50px;
    margin-top: 30px;
}
.questionSection{
    width: 50%;
}
.wrong_question_adder{
    width: 48px;
    height: 48px;
    background-color:var(--white2);
    padding: 1.5%;
    border-radius: 100px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    float: left;
    margin-top: 20px;
    margin-right: 25px !important; 
    position: relative;
    justify-content: center;
    text-align: center;
    display: inline-flex;
    align-items: center;
}

.wrong_question_adder .add-icon {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
  text-align: center;
}
.aadd_question_btn_icon{
    width: 10%;
}
.new_question_modal{
    width: 97%;
    height: 90vh;
    overflow-y: auto;
    overflow-x: none;
}
.add_question_form_title{
    height: 12vh;
    width: 100px;
}
.fileUploaderHolder{
    height: 10vh;
    background-color: var(--field);
    border: 1px dashed var(--black);
    margin-top: -12%;
}
.wrong_question_adder:hover{
    background-color: rgba(0, 0, 0, 0);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0), 0 6px 20px 0 rgba(0, 0, 0, 0);
    transition: 0.2s ease-in-out;
    cursor: pointer;
}
.question_repeater_holder{
    display: flex;
}
.question_repeater_holder{
    width: 20%;
    float: left;
}
.question_adder_title{
    margin-top: 40px;
    display: block;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.question_adder_answer{
    width: 25%;
    margin-top: 40px;
}
.add_question_form_input, #category_select{
    height: 47px;
    border-radius: 6px;
    border: 0px;
    font-family: 'peyda-light';
    font-size: 14px;
    width: 100%;
    background-color: #F9F6EE;
    color: #8D8D8D;
    align-items: center;
    padding-right: 2%;
    padding-left: 2%;
    margin-top: 10px;
}
#answer_question_form{
    padding-right: 10px;
    box-sizing: border-box;
}
.add_question_submit_btn{
    background-color: var(--red);
    width: 20%;
    margin-top: 80px;
    border-radius: 6px;
    border: 0px;
    height: 35px;
    font-family: 'peyda-bold';
    color: var(--white2);
    font-size: 14px;
}
.add_question_submit_btn:hover{
    background-color: var(--green);
    transition: 0.2s ease-in-out;
    cursor: pointer;
}
.add_question_form_title{
    margin-bottom: 100px;
}

#addQuestion_modal_closer{
    width: 15px;
    position: relative;
    float: left;
    right: 25px;
}
.question_answer_section{
    display: flex;
    width: 100%;
    padding-bottom: 20px;
    column-gap: 30px;
    margin-top: 10px;
    overflow-x: auto;
    overflow-y: none;
    flex-wrap: nowrap !important; 
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.question_adder_answer{
    flex: 0 0 auto !important;
    min-width: 20%;
}
#title_form{
    width: 100%;
}
#category_select{
    padding-left: 2%;
}
.add_question_form_input:focus, #category_select:focus{
    outline: none;
}
option{
    margin-right: 20px;
}
.addPersonelBtn{
    float: left;
    background-color: var(--red);
    color: var(--white2);
    font-size: 14px;
}
.addPersonelBtn:hover{
    border: 1px solid var(--red);
    background-color: rgba(0, 0, 0, 0);
    color: var(--red);
    cursor: pointer;
    transition: 0.3s ease-in-out;
}
.cancel_question_submot{
    margin-right: 10px;
    height: 35px;
    width: 20%;
    background-color: var(--white2);
    color: var(--red);
    border: 1px solid var(--red);
    border-radius: 6px;
    font-family: 'peyda-bold';

}
.cancel_question_submot:hover{
    background-color: var(--red);
    color: var(--white2);
    cursor: pointer;
    transition: 0.3s ease-in-out;

}
/*end of add question popup*/

/*start of add personel Form*/
.personelAdderFormHolder{
    width: 80vw;
    top: 10%;
    right: 10%;
    height: 80vh;
    position: fixed;
    margin: 0 auto;
    background-color: var(--white2);
    border: 10px;
    display: none;
    box-sizing: border-box;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 4%;
}
.row{
    display: flex;
    flex-direction: row;
    column-gap: 30px;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 30px;
}
.fieldContainer{
    display: block;
    width: 30%;
}
.personelAddField{
    background-color: var(--field);
    border: none;
    font-family: 'peyda-light';
    font-size: 14px;
    height: 51px;
    width: 100%;
    border-radius: 10px;
    padding-right: 5%;
    padding-left: 5%;
    margin-top: 15px;
    box-sizing: border-box;
}
.personelAddField:focus{
    outline: none;
}
.itemHolderPersonel{
    width: 30%;
}
#rolePersonel{
    background-color: var(--field);
    border: 0px;
    height: 51px;
    width: 100%;
    border-radius: 10px;
    font-family: 'peyda-light';
    font-size: 14px;
    padding-right: 5%;
    padding-left: 5%;
    margin-top: 5px;
    box-sizing: border-box;
}

#rolePersonel:focus{
    outline: none;
}
.row.second{
    width: 100%;
    display: flex;
    justify-content: center;
}
.genderHolder{
    text-align: right;
    width: 30%;
}

.genderfemale, .gendermale{
    font-family: 'peyda-light';
    margin-top: 30px !important;
}
.submitAddpersonel{
    background-color: var(--red);
    width: 200px;
    height: 50px;
    margin-top: 15%;
    border-radius: 10px;
    border: none;
    font-family: 'peyda-bold';
    font-size: 14px;
    color: var(--white2);

}
.submitAddpersonel:hover{
    background-color: var(--white2);
    border: 1px solid var(--red);
    color: var(--red);
    transition: 0.3s ease-in-out;
    cursor: pointer;
}
#cancelPersonel{
    width: 200px;
    height: 50px;
    background-color: var(--white2);
    border: 1px solid var(--red);
    color: var(--red);
    font-family: 'peyda-bold';
    font-size: 14px;
    border-radius: 10px;
    margin-top: 30px;
}
#cancelPersonel:hover{
    border: none;
    background-color: var(--red);
    color: var(--white2);
    transition: 0.3s ease-in-out;
    cursor: pointer;
}
.perosnelFormAdder{
    width: 100%;
    overflow-x: hidden;
}
.personelBtnHolder{
    display: flex;
    width: auto;
    align-items: center;
    height: 100px;
    flex-direction: row;
    column-gap: 30px;
}
/*start of certificate popup modal*/
.result_certificate_modal{
    position: fixed;
    width: 70%;
    border-radius: 10px;
    background-color: var(--black);
    padding: 3%;
    display: none;
    margin: auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 80vh;
    top: 10%;
    margin: 0 auto;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.certificate_content_holder{
    display: block;
    width: 100%;
    justify-content: center;
}
.certificate_secondary_title, .certificate_primary_title{
    width: 100%;
    text-align: center;
    line-height: 1.7em;
    color: var(--white2);   
}
.certificate_secondary_title{
    font-family: 'peyda-light';
    font-size: 14px;
    color: #ced4da !important;
}
.paragraph_certificate{
    width: 70%;
    text-align: center;
    margin: auto;
    color: var(--white2);
    font-size: 14px;
    margin-top: 2%;
}
.certificate_box_holder{
    display: flex;
    width: 100%;
    margin: 0 auto;
    overflow-x: none;
    justify-content: center;
    column-gap: 30px;
    margin-top: 60px;
}
.certificate_box_model{
    display: flex;
    flex-direction: column;
    width: 23%;
    background-color: rgba(52, 58, 64, 0.9);
    background-blend-mode: multiply;
    height: 250px;
    border-radius: 5px;
    align-items:flex-start;
    justify-content: flex-end;
    padding-bottom: 3%;
    padding-right: 1.5%;
    box-sizing: border-box;
    background-image: url(assets/images/viktor-forgacs-x7h5HLsBYwo-unsplash\ \(1\).jpg);
    background-size: cover;
}
.certificate_box_subTitle{
    display: none;
    color: var(--white2);
    font-family: 'peyda-light';
    font-size: 14px;
}
.certificate_box_title{
    font-size: 16px;
    color: var(--white2);
}
.certificate_box_model:hover{
    border: 1px solid #c6ac8f;
    transition: 0.3s ease-in-out;
}
.certificate_box_model:hover .certificate_box_subTitle{
    display: block;
}
.certificate_box_holder_phone{
    display: none;
}
/*end of certificate modal*/

/*start of personal info page*/
.personal_form{
    height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: auto;
    text-align: center;
    flex-direction: column;
    display: none;
    padding-top: 8%;
}
.personal_form_title_holder{
    width: 80%;
    margin: auto;
}
.personal_form_paragraph{
    text-align: center;
    margin-top: 10px;
}
.personal_form_input{
    width: 346px;
    height: 51px;
    background-color: #F9F6EE;
    outline: none;
    border: none;
    border-radius: 10px;
    padding-right: 2%;
    padding-left: 2%;
    box-sizing: border-box;
    font-family: 'peyda-light';
    color: var(--black);
    text-align: right;
}
.personal_form_first_row , .personal_form_second_row{
    display: flex;
    column-gap: 20px;
    margin: auto;
    width: 100%;
    justify-content: center;
    margin-top: 60px;
}
.radio_button_holder{
    width: 346px;
    display: block;
    text-align: right;
}
.submit_personal_form{
    width: 248px;
    height: 49px;
    background-color: var(--green);
    font-family: 'peyda-bold';
    color: var(--white2);
    border-radius: 10px;
    border: none;
    margin-top: 40px;
}
.submit_personal_form:hover{
    color: var(--green);
    border: 1px solid var(--green);
    cursor: pointer;
    background-color: var(--white2);
    transition: 0.3s ease-in-out;
    background-image: url(assets/images/neext.png);
    background-size: 20px 20px;
    background-repeat:no-repeat;
    background-position: 155px;
}
#radio_button_label{
    font-family: 'peyda-light';
    font-size: 14px;
    margin-left: 20px;
}
.button_start{
    float: left;
    background-color: var(--green);
    color: var(--white2);
    border: none;
}
.button_start:hover{
    background-color: var(--white2);
    color: var(--green);
    border: 1px solid var(--green);
    cursor: pointer;
    transition: 0.3s ease-in-out;
    background-image: url(assets/images/neext.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 135px;
}
/*end of perosnal info form*/

/* start of question page */
.online_question_holder{
    height: 100vh;
    width: 100%;
    align-items: center;
    display: flex;
}
.question_holder_inner{
    width: 70%;
    margin: auto;
    display: block;
}
.header_holder{
    display: flex;
    column-gap: 40px;
}
.question_details{
    width: 70%;
    display: block;
}
.timer_holder{
    width: 30%;
    display: flex;
    column-gap: 10px;
    align-items: center;
    justify-content: flex-end;
}
.timer_icon{
    width: 30px;
}
.question_container{
    background-color: #f8f9fa;
    padding: 8% 15%;
    border-radius: 10px;
    margin-top: 30px;
    row-gap: 20px;
}
.question_title{
    font-size: 20px;
    margin-bottom: 20px;
}
hr{
    border: 1px solid #dee2e6;
    margin-bottom: 20px;
}
.option_holder{
    padding: 2%;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #dee2e6;
}
.option_holder:hover{
    background-color: var(--white2);
    border: none;
    transition: 0.3s ease-in-out;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#option_label{
    font-family: 'peyda-light';
    margin-left: 20px;
    font-size: 14px;
}
.question_button_holder{
    display: flex;
    width: 100%;
    column-gap: 30px;
    margin-top: -20px;
}
.left_section{
    width: 60%;
    display: flex;
    justify-content: flex-start;
    column-gap: 20px;
    height: fit-content;
    align-items: center;
}
.right_section{
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: fit-content;
    padding-top: 2%;
}
.question_navigator{
    width: 30%;
    border-radius: 30px;
    background-color:#d1d1d1;
    cursor: pointer;
}
.question_finisher{
    background-color: var(--green);
    width: 40%;
    border-radius: 30px;
    color: var(--white2);
}
.question_finisher:hover{
    background-color: var(--white2);
    border: 1px solid var(--green);
    color: var(--green);
    cursor: pointer;
    transition: 0.3s ease-in-out;
}
/*end of question form*/

/*start of online exam popup */
.form_end_popup{
    width: 70%;
    margin: 0 auto;
    border-radius: 10px;
    display: none;
    position: fixed;
    left: 13%;
    top: 10%;
    background-color: var(--white2);
    justify-content: center;
    align-items: center;
    height: 75vh;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 5% 10%;
}
.form_end_popup_inner{
    width: 100%;
    height: max-content;
    justify-content: center;
    text-align: center;
}
.popup_icon{
    width: 180px;
}
.popup_paragraph{
    text-align: center;
    width: 80%;
    margin: 0 auto;
}
.popup_result{
    text-align: center;
    margin-top: 30px;
}
.exit_popup{
    background-color: var(--green);
    color: var(--white2);
    border-radius: 10px;
    margin-top: 10px;
}
.exit_popup:hover{
    background-color: var(--white2);
    border: 1px solid var(--green);
    color: var(--green);
    border-radius: 10px;
    background-image: url(assets/images/neext.png);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 140px 12px;
    transition: 0.3s ease-in-out;
    cursor: pointer;
}
/* starting to make home page responsive*/
@media only screen and (max-width: 600px){
    *{box-sizing: border-box;}
    /*index page*/
    .page_container{
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    .add_question_form_input{
        width: 100% !important;
    }
    .question_adder_answer{
        width: 80%;

    }
    .data_container{
        display: inline-block;
        max-width: 100%;
        width: 100%;
        min-width: 70%;
        background-color: var(--gray);
        height: auto;
    }
    .page_text_container{
        display: inline;
        align-content: center;
        width: 80%;
        padding-right: 30px !important;
        max-width: 80%;
    }
    .picture_container{
        width: 100%;
        background-image: url('assets/images/2025-09-1919.45.44.jpg');
        background-size: cover;
        background-position: center;
        height: 200px;
        align-self:normal;
        border-radius: 10px;
        margin-top: 10%;
        margin-bottom: 10%;
    }
    .button_container{
        display: flex;
    }
    button{
        width: 45%;
        height: 46px;
        font-size: 14px;
        margin-top: 10%;
        border-radius: 10px;
        border: none;
        font-family: 'peyda-light';
    }
    .personel_login_button{
        background-color: rgba(0,0,0,0);
        border: 2px solid var(--green);
        color: var(--green);
        margin-right: 10%;
    }
    /*end of index page*/

    /*sign up form page*/
    .signUpformPage{
        text-align: center;
        background-color: var(--gray);
        width: 100%;
        padding-top: 5%;
        padding-bottom: 5%;
    }
    .signup_subhead{
        text-align: center !important;
    }
    .signUpformcontainer{
        text-align: center;
        padding: 0px;
        width: 90%;
        margin-right: 5%;
    }
    .form_container_one{
        text-align: center;
        width: 95%;
    }
    #field_container_one, #field_container_two{
        display:inline-block !important;
        width: 100%;
        margin-right: -1%;
    }
    #field_container_two{
        margin-top: 20px;
    }
    .field_container{
        width: 100%;
        padding: 0px;
        margin-top: 20px;
    }
    #signupField{
        width: 80%;
    }
    #radioLabel{
        margin-top: 20px;
        margin-right: 6%;
    }
    #field_container_two{
        margin-top: 20px;
    }
    .signUpFrm_submit{
        margin-right: 5%;
    }
    /*end*/
    /*start personel login responsove*/
    .personel_login_form_page{
        width: 100%;
        height: 100vh;   /* fallback */
        height: 100svh;  /* mobile-safe full height */
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.6);
        background-image: url(assets/images/DSC_0333.jpg);
        background-size: 100vh;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }
    .login_form_container{
        display: block;
        width: 100%;
        height: fit-content;
        align-items: center;
    }
    .login_form{
        width: 85%;
    }
    /*start exam page start*/
    .exam_introduction{
        display: block !important;
        width: 100%;
        height: 100vh;
        column-gap: 0px !important;
        row-gap: 0px !important;
        margin: 0px;
        align-content: center;
        justify-items: center;
        text-align: center;
    }
    .start_exam_page{
        background-color: var(--gray);
        width: 100%;
        display: block !important;
        justify-self:center;
        justify-content: center;
    }
    .text_holder{
        width: 80% !important;
        max-width: 100%;
    }
    .image_exam{
        width: 70%;
    }
    .image_holder{
        width: 90%;
        max-width: 100%;
    }
    /*end start exam page*/
    /*start personel dashboard page*/
    html, body{
        width: 100%;
        height: 100%;
        justify-content: center;
        box-sizing: border-box;
        text-align: center;
        justify-items: center;
    }
    .introduction_div{
        padding-top: 25px;
        box-sizing: border-box;
    }
    /* clip everything that goes outside */
.intro_wrapper {
  width: 100%;
  position: relative;
  overflow: hidden;            /* <-- clips children and shadows */
  box-sizing: border-box;
  margin-top: 20px;
}

/* keep the horizontal slider scrollable but constrained by wrapper */
.intro_sections {
  display: flex;
  gap: 16px;
  padding: 10px 12px;          /* internal spacing */
  overflow-x: auto;            /* allow horizontal scrolling */
  overflow-y: hidden;          /* prevent vertical overflow */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  margin: 0;                   /* remove possible margins that leak */
  box-sizing: border-box;
}

/* hide native scrollbar if you want */
.intro_sections::-webkit-scrollbar { display: none; }
.intro_sections { scrollbar-width: none; -ms-overflow-style: none; }

/* each item */
.intro_item {
  min-width: 60%;            /* or whatever width you need */
  flex: 0 0 auto;              /* prevent shrinking */
  scroll-snap-align: start;
  box-sizing: border-box;      /* important so padding doesn't grow it */
  /* remove negative margins or large transforms on the items */
}

/* Fix for shadows bleeding: wrapper will clip them; if you want inner item shadows visible,
   reduce shadow blur/spread or create inner-shadow instead */

    .intro_sections::-webkit-scrollbar{
        display: none;
    }
    .nav_section{
        display: none;
    }
    .content_holder{
        width: 100%;
        display: block;
        text-align: right;
    }
    .dashboard_holder{
        width: 100%;
    }
    .quick_actions_div{
        display: block;
        margin-top: 60px;
        margin-bottom: 100px;
        box-sizing: border-box;
        padding-bottom: 100px;
    }
    .quick_action_one{
        width: 100%;
        margin-top: 30px;
        padding: 15px;
    }
    .add_question_icon{
        width: 60px;
        height: 60px;
    }
    .quick_action_two{
        width: 100%;
        margin-top: 30px;
        margin-bottom: 100px;
    }
    .latest_questions_title{
        margin-bottom: -20px;
    }
    .question_page_title{
        font-size: 16px;
    }
    .title_holder{
        width: 70%;
    }
    .addForm_btn{
        width: 30%;
    }
    .addQuestion_form{
        width: 100%;
    }
    .addQuestion_form:hover{
        width: 100%;
    }
    .question_list{
        margin-top: 15%;
    }
    .question_repeater{
        padding: 7%;
        margin-bottom: 15px;
    }
    .question_repeater_title{
        font-size: 16px;
        line-height: 2em;
    }
    .question_repeater_title:hover{
        color: var(--green);
    }
    .personel_container{
        display: block;
        margin-bottom: 70px;
        grid-template-columns: 1fr;
    }
    .personel_profile{
        width:100%;
        padding: 5%;
        box-sizing: border-box;
        margin-bottom: 20px;
        
    }
    /*end personel dashboard page*/
    /*footer start*/
    .footer{
    display: flex !important;
    width: 100%;
    background-color: var(--white2);
    padding: 2%;
    box-sizing: border-box;
    column-gap: 0px;
    visibility:visible;
    margin-top: 0 auto;
    position: fixed;
    padding-right: 8px;
    padding-left: 20px;
    bottom: 0;
    right: 0;
    justify-content: space-around;
    align-items: center;
    z-index: 800;
    border-top: 1px solid #e0e0e0;
    }
    .footer_section{
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 22% auto;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .footer_logo{
        width: 30%;
        height: auto;
        display: block;
        margin-top: 4px;
    }
    .footer_item_title{
        font-family: 'peyda-light';
        font-size: 13px;
        text-align: center;
        margin: 0;
    }
    .result_inner_container{
        display: block;
        width: 100%;
        padding: 6%;
        box-sizing: border-box;
    }
    .result_intro{
        display: flex;
        gap: 30px;
    }
    .result_div_title{
        width: 70%;
    }
    .result_intro_title{
        font-size: 14px;
        line-height: 1.7em;
    }
    .result_div_btn{
        width: 30%;
    }
    .students_list_btn{
        width: 100%;
        padding: 4%;
        box-sizing: border-box;
        font-size: 12px;
    }
    .result_container{
        display: grid;
        grid-template-columns: minmax(1, 1fr);
        margin-top: 50px !important;
        margin-bottom: 70px !important;
    }
    .volunteer_header{
        margin-top: 5%;
    }
    .volunteer_title{
        font-size: 18px !important;
        line-height: 1.7em;
        text-align: justify;
        margin-top: 5%;
    }
    .volunteer_profile{
        width: 50%;
        height: 50%;
    }
    .volunteer_name{
        font-size: 14px;
    }
    .volunteerـsingle{
        column-gap: 20px;
        margin-bottom: 30px;
    }
    .volunteer_phoneNumber{
        font-size: 12px;
    }
    .new_question_modal{
        width: 85% !important;
        padding: 4% !important;  
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        box-sizing: border-box;
        margin: 0 auto;
        background-color: var(--white2);
        position: fixed;
        top: 30px;
        right: 0;
        left: 0;
        bottom: 0;
        height: 90svh;
        transition: all 0.3s ease-in-out;
        z-index: 998;
    }
    .new_question_modal_container{
        z-index: 999;
        position: fixed;
        inset: 0;
        justify-content: center;
        align-items: center;
        display: block;
    }
    #addQuestion_modal_closer{
        top: 5;
        margin-left: 25px;
        width: 10px;
    }
    .add_question_submit_btn{
        margin-top:10px;
        width: 40%;
    }
    .popUp_container{
        width: 95%;
        overflow-y: auto;
        padding: 0px;
        margin: 0px;
        align-items: center;
        justify-content: center;
    }
    .wrong_question_adder{
        margin-top: 10px;
    }
    .add_question_submit_btn{
         margin-top: 20px;
    }
    /*end of add question modal*/
    
    /*start of certificate modal*/
    .result_certificate_modal{
        width: 95svw;
        height: 90svh;
        z-index: 999;
        top: 20px;
        box-sizing: border-box;
    }
    .paragraph_certificate{
        width: 90%;
        font-size: 12px;
    }
    .certificate_modal_inner{
        padding-top: 5%;
        box-sizing: border-box;
        padding-bottom: 5%;
        padding-left: 4%;
        padding-right: 4%;
    }
    .certificate_primary_title{
        line-height: 1.5em;
        font-size: 24px;
    }
    .certificate_box_holder{
        display: none;
    }
    .certificate_box_holder_phone{
        display: block;
        row-gap: 20px;
        flex-wrap: nowrap;
        flex-direction: row;
        column-gap: 20px;
    }
    .first_row, .second_row{
        display: flex;
        column-gap: 20px;
        margin-top: 20px;
    }
    .certificate_box_model{
        height: 25svh;
        width: 50%;
    }
    .certificate_box_title{
        font-size: 16px;
    }
    .addPersonelBtn{
        margin-top: -10% !important;
    }
    .personel_inner_container{
        padding-bottom: 30%;
    }
    .personelAdderFormHolder{
        top: 5%;
        right: 5%;
        width: 90%;
        margin: 0 auto;
        position: fixed;
        overflow-y:auto;
        overflow-x: hidden;
        padding: 5%;
        border-radius: 10px;
        box-sizing: border-box;
    }
    .row{
        display: block;
        gap: 30px;
    }
    .row.second{
        display: block;
    }
    .personelAddField{
        width: 95%;
        margin-top: 10px;
    }
    #rolePersonel{
        width: 80%;
    }
    .genderHolder{
        margin-right: 0;
        width: max-content;
    }
    .fieldContainer{
        margin-top: 30px;
    }
    .itemHolderPersonel{
        margin-top: 30px;
    }
    .section_title{
        width: max-content;
        font-size: 24px;
    }
    .personelBtnHolder{
        flex-direction: column;
        row-gap: 30px;
        width: 100%;
        display: block;
    }
    .submitAddpersonel{
        width: 100%;
        margin-bottom: 20px;
    }
    #cancelPersonel{
        width: 100%;
    }
    .fieldContainer{
        width: 100%;
    }
    .itemHolderPersonel{
        width: 348px;
    }
    #cancelPersonel{
        margin-top: 0;
        background-color: var(--white2);
    }
    .perosnelFormAdder{
        overflow-y:initial;
    }
    .questions_container{
        margin-top: 30px;
    }
    .question_holder{
        height: 80svh;
        margin-top: 20px;
    }
    .volunteer_inner_holder{
        display: block;
        grid-template-columns: 1fr;
        width: 100%;
    }
}