@charset"utf-8";

html{
height: 100%;
}

body{
color: #000;
width:100%;
background-image:url('images/texture2.png'); 

}






*{
/*fontawesome for all elements*/
font-family:"Font Awesome\ 5 Pro" , arial , Open Sans, sans-serif; 
padding: 0;
margin: 0;
box-sizing: border-box;
}







@font-face{
    font-family:'jameel_noori_kasheeda';
     src: url(fonts/urdu/Jameel_Noori_Nastaleeq_Kasheeda.ttf);
}
@font-face{
    font-family:'jameel_noori_regular';
     src: url(fonts/urdu/Jameel_Noori_Nastaleeq_Regular.ttf);
}

.jameel_noori_kasheeda {
 font-family: jameel_noori_kasheeda;
 /*font-size:20px;*/
}


.jameel_noori_regular {
 font-family: jameel_noori_kasheeda;
}

.banner_txt_1{
    font-weight:bold;
    color:#fff;
    font-size:25px;
}




/* header */
header{
display:flex;
flex-direction: column;
/* background:blue; */
/* border:1px solid blue; */
/* padding:10px; */


}

#header_row_1{
background-color: #0f0f0f;
display: flex;
justify-content: space-between;
padding:15px;

}


#header_row_1 i{
  color:#fff;
  font-family:"Font Awesome\ 5 Pro" , arial , Open Sans, sans-serif; 
  cursor:pointer;
}



/* side menu code*/


  #side_menu_button{
	font-size: 20px;
		cursor: pointer;
		color: #fff;
		display: none;
  }
#side_menu_container {
  height: 100%;
  width: 0;
  display:flex;
  flex-direction:column;
  flex-wrap: no-wrap;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}


#side_menu_container a {
  padding: 8px 32px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block;
 

  transition: 0.3s;
  width:auto;
  border-bottom:1px solid #fff;


}
#side_menu_container a:last-child {
	/* border:0; */
}



#side_menu_container a:hover {
  color: #f1f1f1;
}

#side_menu_container .closebtn {
  position: absolute;
  top: 0;
  right: 1px;
  font-size: 36px;
  margin-left: 50px;
  border:0;




}



/* end side menu*/


#header_row_1 div i{
  color:#fff;
  font-family:"Font Awesome\ 5 Pro" , arial , Open Sans, sans-serif; 
}

#header_row_1 div i:after { 
content: "|"; 
padding: 0 20px; 
}

#header_row_1 div i:last-child::after { 
content:''; 
padding: 0 ;
}


#header_row_2{
display:flex;
justify-content:space-between;
align-items:center;
background:#e4f5f6;
/* border:1px solid blue; */
padding:25px;
}



#site_logo {
width:150px;
height:70px;

/* border:2px solid black; */
cursor: pointer;
}

header form{
display:flex;
border-radius: 10px;
/* background-color: blue;
padding:5px; */
width:600px;

}

header form input[type="search"]{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding:15px;
outline:0;
border:1px solid gray;
width:90%;
}

header form input[type="search"]:focus{

  border-color:#6d28d2 ;
}



header form button{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
padding:10px;
border:1px solid gray;
border-left:0;
width:10%;
background-color: #dc0727;
color:#fff;
}


/* #right_menu_container {
  border:1px solid gray;
} */

#right_menu_container img {
width:50px;
  margin:0 5px;
  cursor: pointer;

    
    
    


}






#header_row_3{
display:flex;
justify-content:space-around;
/* align-items:center; */
background:#124e9a;
/* border:1px solid blue; */
/* padding:15px; */
}


#header_row_3 i{
  font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
font-style: normal;
color:#fff;
/* border:1px solid blue; */
padding:10px 15px;

  /* "to left" / "to right" - affects initial color */
  background: linear-gradient(to left, transparent 50%, #754ffe 50%) right;
  background-size: 200%;
  transition: .4s ease-out;
  /* border-radius: 5px; */

}

#header_row_3 i:hover{
  

  background-position: left;
}





#slider {
  display: flex;
  /*height:400px;*/
  /*background-color: #754ffe;*/
  background-color: #211c70;
  justify-content: center;
}


#slider img{
    /*width:350px;*/
    max-width:100%;
    /*border:5px solid green;*/
}








/*resosive for header*/

@media screen and (max-width: 930px) {
    
#site_logo {
width:100px;
height:40px;

/* border:2px solid black; */
cursor: pointer;
}
    
    

#header_row_2{

justify-content:center;
align-items:center;

padding:25px 0;

}


#header_row_2 img{
    margin:0 5px;
}

#header_row_3{
display: none; 
}


#side_menu_button{
display: block;
}

/*slider*/
#slider{
    
    /*height:350px;*/
        
}


#slider img{
    /*width:250px;*/
        /*border:5px solid yellow;*/
}


}


/*slider*/


@media screen and (max-width: 600px) {

#header_row_2 form button{
display:none;

}

#header_row_2 form input{
width:100%;

border-top-right-radius: 10px;
border-bottom-right-radius: 10px;

}

  
}








@media screen and (max-height: 450px) {
  #side_menu_container {padding-top: 15px;}
  #side_menu_container a {font-size: 18px;}

  
}


/*end resosive for header*/



#page_container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}




#registration_form {
  display: flex;
  flex-direction: column;
  /* border:5px solid blue; */
  width:500px;
  margin:0 auto;
  /* padding: 10px; */
}

#registration_form fieldset{
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  padding: 10px;
  margin:10px 0;
}

#registration_form legend{
  margin-left: 20px;
}

#registration_form input,select{
  padding: 10px;
}



#choose_course_heading {
padding:10px;
text-align:center;
}
#course_container{
overflow: auto;
max-height:300px;
resize:vertical;
border:1px solid gray;
padding:10px;
margin-bottom:10px;
}
#course_container p{
border-bottom:1px solid gray;
/* border-bottom:0; */
padding:10px;
}

#course_container p:last-child {
/* border-bottom:1px solid green; */
border-bottom:0;
}

#student_photo_uploader{

display:flex;

flex-direction:column;
/* background:pink; */
padding:5px;
border:1px solid #4f4f4f;
width: 200px;
height:200px;
position: relative;
margin:10px auto;


/* box-shadow:0 0 3px #000; */
}

#student_photo_uploader label{

position: absolute;
/* background-color:lightyellow; */
right:-10px;
top:5px;
cursor: pointer;
width: 60px;
font-size:35px;
border:0;
}

#student_photo_uploader img {
object-fit:contain;
width:100%;
height:100%;
/* border:1px solid black; */
}




.column_box_content_row{
  display: flex;
  /* border:5px solid #dc0727; */
  box-shadow:0 0 5px #754fee;
  width:800px;
  margin: 20px;
  padding:10px;
  background-color: #fff;
}
.column_box_content_row div{
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  /* background-color: #000; */

}

.column_box_content_row h1{
  color: #124e9a;
  padding:5px;
}

.column_box_content_row p{
  color: #000;
  padding:5px;
  
}

.column_box_content_row span{
  color: #fff;
  padding:7px 10px;
  border-left:5px solid red;
  background-color: #009b4a;
  max-width: fit-content;
  margin: 5px 0; 
  
}
 
.column_box_content_row div button{
  background-color: #fed330;
  color:#000;
  padding:10px 15px;
  border-radius: 6px;
  border:0;
  margin:5px 0;
  max-width: fit-content;
  
}



.column_box_content_row img{
  width:200px;
}


@media screen and (max-width: 900px) {

    .column_box_content_row{
        width:90%; 
    }
}

@media screen and (max-width: 700px) {

    .column_box_content_row img{
        display:none;
    }
}


/*--------------------------------------*/


#contact_us_form{
  display: flex;
  flex-direction: column;
  width:500px;
  border:1px solid green;
  margin:50px auto;
  background-color: #124e9a;
  border-radius: 10px;
  padding: 40px 30px;
}
#contact_us_form div{
  display: flex;
  flex-direction: column;
}

#contact_us_form div span{
  color:#fff;
  padding: 5px;
}


#contact_us_form div input,textarea{
  padding: 10px;
}

#contact_us_form div textarea{
  height:150px;
  resize: vertical;
}

#contact_us_form button{

background-color: #2e9b4c;
padding: 10px 15px;
  max-width: fit-content;
  color:#fff;

}






/* ----------------------------------- */

.who_we_are{
display: flex;
/* border:5px solid #dc0727; */
align-items: center;

width:1200px;
margin: 50px 5px;
padding:10px;
background-color: #fff;
}
.who_we_are div{
display: flex;
flex-direction: column;
justify-content: center;
/*background:#000;*/
}

.who_we_are h1{
color: #124e9a;
padding:5px;
font-weight: bold;
}

.who_we_are p{
color: #000;
padding:5px;
line-height: 30px;
}


.who_we_are img{
/* border:1px solid green; */
height:300px;
}


    
@media only screen and (max-width:1250px) {
    
    .who_we_are{
       flex-direction:column;
       width:90%;
       
    }
    
  .who_we_are img{
height:200px;
}  
    
    
}

/* ----------------------------------- */

.why_choose_us{
display: flex;
/* border:5px solid #dc0727; */
align-items: center;

width:1200px;
margin: 50px 5px;
padding:10px;
background-color: #fff;
}
.why_choose_us div{
display: flex;
flex-direction: column;
justify-content: center;
}

.why_choose_us h1{`
color: #124e9a;
padding:5px;
font-weight: bold;
}

.why_choose_us div p{
    padding:5px;
  
}

.why_choose_us li{
color: #000;
padding:5px;
line-height: 30px;
}


.why_choose_us img{
border:5px solid #124e9a;
border-radius:20px;
height:300px;
}


@media only screen and (max-width:1250px) {
    
    .why_choose_us{
       flex-direction:column;
       width:90%;
       
    }
    

.why_choose_us img{

height:150px;
}

    
    
    
}

/* ----------------------------------- */
#our_features_container{
  display: flex;
  flex-direction: column;
  background-color: #124e9a;
  width:100%;
  align-items: center;
  justify-content:center;
}
.our_features{
display: flex;
/* border:5px solid #dc0727; */
align-items: center;
justify-content:center;
width:1200px;
margin: 10px 5px;
padding:10px;
 /*background-color: #ccc; */
}
.our_features i {
  color:green;
  font-size: 50px;
  padding:0 20px;
  
  /* background-color:yellow ; */
  


}

.our_features div{
display: flex;
flex-direction: column;
justify-content: center;
 /*background-color: #000; */
padding:0 40px;
width:400px;
}



.our_features p{
color: #fff;
padding:5px;
line-height: 30px;
}


.our_features img{
border:5px solid #fff;
border-radius:20px;
height:200px;
}



hr{
  height:4px;
width:1200px;
/* margin:0 auto; */
  color:#fff;
  background-color:#fff;
}


@media only screen and (max-width:1250px) {
    
.our_features{
flex-direction:column;
width:90%;

}

.our_features div{
padding:0 5px;

}

hr{
width:100%;
}
}




@media only screen and (max-width:450px) {
    
.our_features{
margin:0;
padding:0;
}



.our_features div{

width:100%;
}





}


/* -------------------------------- */



#detailed_course_container {
  padding:20px 10px;
  background-color: #fff;
    width: 900px;
  display: flex;
  flex-direction: column;
  box-shadow:0 0 5px #754fee;
  margin:30px 0;

}
#detailed_course_container h1{
  padding:10px;
  text-align: center;
  background-color: #009b4a;
  color:#fff;
}
#detailed_course_container p{
padding:10px;
  
}
button{
  cursor: pointer;
  padding:10px 15px;
}




@media only screen and (max-width:900px) {
    
   #detailed_course_container {
         max-width: fit-content;  
       
   } 
}




/*---------------*/




#reviews_container{

    background:#00b6de;
/*    align-items:center;
    justify-content:center;
*/

/*max-width: 100%;*/


width:100%;

  overflow: auto;
 
  padding: 10px;
  display:flex;
  
}

#reviews_container::-webkit-scrollbar{
    /*width:0;*/
}


.review {
        flex-shrink: 0;

    
    display:flex;
    /*display:none;*/
    
  

    flex-direction:column;
    background:#f5f5f5;
    max-width:300px;
    border-radius:12px;
    box-shadow:0 0 5px lightgreen;
    padding:10px;
    margin:10px;
 
}
.review  div {
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:10px;
        /*background:green;*/
}



.review  div:first-child {
            display:flex;
        justify-content:flex-start;
       
}

 
.review  div:last-child p i {
    color:#fdd40b;
    
}







.review  div:first-child p {
padding:10px;
}


.review  div img{
    width:50px;
}

/*_________________*/



#faq_ontainer {
    display:flex;
    flex-direction:column;
    padding:10px;
}


#faq_ontainer h1 {
    padding:10px;
}

#faq_ontainer .question{
    padding:10px;
    background:#eee;
    border-left:5px solid orange;
}
    
  #faq_ontainer .answer{
  
      padding:10px;
      background:#fff;
      
  }  
    
    
    
    

    

 iframe {
  
    width: 1000px;
    height:700px;
}




@media screen and (max-width: 1100px) {

 iframe {
  
    width: 99%;
    height:700px;
}



}



@media screen and (max-width: 700px) {

 iframe {
  

    height:350px;
}



}



/*...................*/



#about_instructor {

width: 100%;
margin: 0 auto;
/*	border: 1px solid black;*/
	display: flex;
	flex-direction: row;
	align-items: center;


color:#000;
/*  background:#efefef;*/
/*  background-color: #0a817d; */
  
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  /*border-radius:15px ;*/



background:#191c29;

align-items:center;

}

#instructor_message_container {
    display:flex;
    flex-direction:column;
}
#instructor_message_container span{
    color: #01baf7; 
    font-size: 25px; 
   padding:15px 20px;
    text-decoration:underline; 
    font-weight:bold;
    /*background:yellow;*/
}




#instructor_message {

padding:0 20px;
	width:100%;
	font-size: 19px;
	font-family: SoraFont;
	font-weight: normal;
	 line-height: 1.2;
	 letter-spacing: .8px;
overflow: hidden;

color:#fff;
animation: text_glow_effect_1 2s ease-in-out infinite alternate;

/*background:blue;*/
}


#instructor_photo_container {
		width:350px;
	height: 300px;
/*	border-left: 1px solid black;*/
/*	border: 5px double  green;*/
	display: flex;
	flex-direction: column;
position: relative;
}



#instructor_photo_container img {

	object-fit: contain;
	height:100%;
border:0;
/*	border: 2px solid green;*/

}

@media screen and (max-width: 1000px) {
	#about_instructor {flex-direction: column;}

}





@keyframes text_glow_effect_1 {
from {
text-shadow: 0 0 20px #2d9da9;
}
to {
text-shadow: 0 0 30px #34b3c1, 0 0 10px #4dbbc7;
}
}



/*...............................*/








#long_course_container{
display: flex;
flex-direction: column;
justify-content: center;
/*flex-wrap: wrap;*/
padding:5px;
/*margin: 10px 56px;*/
width:1000px;
/*background:yellow;*/
       }

       #long_course_container div{
       border:1px solid #ccc;
       margin:10px 0;
       }



#long_course_container h1{
text-align:center;
border:px solid blue;
padding:20px 2px;
}

 #long_course_container h4{
border:1px solid gray;
background:#fff;
padding-left:60px;
padding-bottom:10px;
padding-top:10px;
border-radius:0;
width:100%;
text-decoration:none;

}
 #long_course_container p{
 display:flex;
border:1px solid gray;
/* padding:5px; */
border-top:0;
   background:#fff;

}


 /*#long_course_container p:nth-child(even){*/
 /*    background:#edeee0;*/
 /*}*/

 /*#long_course_container p:nth-child(odd){*/
 /*    background:#fff;*/
 /*}*/



 


 #long_course_container p span{
 /* border:1px solid yellow; */
padding:5px ;

text-align:center;
 }
 #long_course_container p span.nos{
min-width:50px;
background:#e34133;
color:#fff;
}





@media screen and (max-width: 1100px) {

#long_course_container{
width:99%;

       }


}




/*-----------------------------------*/





       #gallery_container{
/*              border:1px solid green;*/
              padding:10px;
              display:flex;
              flex-direction:column;
              flex-wrap: wrap;

       }


   legend{
    margin-left:20px;
   }

       #gallery_container div{
          display:flex;
          flex-direction:row;
          flex-wrap:wrap;
          justify-content:center;
          margin:5px;
/*          border: 2px solid blue;*/
       }


  .gallery_img_container {
       width:320px;
       height:180px;
       border:10px solid #fff;
       box-shadow:0 0 5px #000;
       display:flex;
transition: 0.3s all ease-in;

  }



  .gallery_img_container img{
     width:100%;
     height:100%;
object-fit:cover;
transition: 0.3s all ease-in;
/* opacity: 0.7; */
  }

  
  .gallery_img_container img:hover {
     /* opacity:1; */
     filter: brightness(130%);
     border:1px solid blue;
     
  }

    .gallery_img_container:hover {
      border:10px solid #0d2d62;
    }

  @media only screen and (max-width:410px){
     .gallery_img_container {
width:250px;
height:200px;

   }
       #gallery_container div{
margin: 5px 0;
       }
       #gallery_container{

padding: 0;
       }
   fieldset{
 padding:10px 0; 
 border:    0;


   }
   legend{
    text-align: center;
   }
  }