تأكيد اعتماد الشهادات قبل<br /> <strong>نوفمبر 1، 2019م/*=============================================================
    Authour URI: www.binarytheme.com
    License: Commons Attribution 3.0

    http://creativecommons.org/licenses/by/3.0/

    100% To use For Personal And Commercial Use.
    IN EXCHANGE JUST GIVE US CREDITS AND TELL YOUR FRIENDS ABOUT US
   
    ========================================================  */



/*=======================================
    GENERAL STYLES
==================================================*/
body {
    font-family:"VIPHakmRegular-VIPHakm", sans-serif;
    font-size:14px;
	background-color: #532805;
	color: #330000;
}
a:link, a:visited, a:active{
	font-size: 100% !important;
	color:#532805;
    text-decoration: none;
}
a:hover  {
	color:#FFBE00;
    text-decoration: none;
}
.nav a {
    color:#ffffff !important;
}
.navbar-header a {
    color:#FFD47F !important;
    padding-right:40px;
}

.text-center {
    text-align:center;
}
.custom_btns{
	position: relative; width: 100%; padding:1% 3%; margin:6% auto !important; background-color:rgba(255,212,127,0.95); font-size: 110%; color: #A96024;
	-webkit-border-radius: 20px 20px 20px 20px;
	-moz-border-radius: 20px 20px 20px 20px;
	border-radius: 20px 20px 20px 20px;
    -webkit-transition: all 0.2s ease;
       -moz-transition: all 0.2s ease;
         -o-transition: all 0.2s ease;
            transition: all 0.2s ease;
}
.custom_btns:hover{background-color:rgba(255,212,127,0.80);text-decoration: none; color: #532805;}
.custom_btns a, .custom_btns a:active , .custom_btns a:visited, .custom_btns a:hover {text-decoration: none; margin:20px auto !important;}

.btn-primary {
  color: #ffffff;
  background-color:#EB6800;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color:#D37F3B;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.big_icon{font-size: 120%;}
.bigger_icon{font-size: 140%;}
h1, h2, h3, h4, h5, h6 {
    font-family:"VIPHakmRegular-VIPHakm", sans-serif;
}

h1 {
    line-height:80px;
    font-weight:700;
    font-size:40px;
    padding:10px;
}
h3 {
    line-height:30px;
    padding-bottom:10px;
}
h4 {
    line-height:40px;
    padding-bottom:10px;
}

p {
    font-weight:300;
    line-height:30px;
    padding-bottom:10px;
}
.btn_full_width{width: 100%;}
.space-free {
    height:100px;
}
.general_titles{position: relative; display: block; font-size: 150%;}
.general_subtitles{position: relative; display: block; font-size: 120%;}
.g-pad-bottom {
    padding-bottom:70px;
}
.for-full-back {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
}
.op_70_bgc {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
}
.op_90_bgc {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
}

section {
    padding-top:60px;
}

/*=======================================
    COLOR CODES
==================================================*/
.color-white {
   background-color:#fff !important;
}
.color-white2 {
   background-color:#d1d1d1 !important;
}
.color-grey {
   background-color:#cccccc !important;
}
.color-dark {
   background-color:#696969 !important;
}

.color-light {
   background-color:#E9E9E9 !important;
}
.color-black {
   background-color:#000000 !important;
   color: #999999;
}
.color-brown {
   background-color:#532805 !important;
   color: #888888;
}
.color-beige {
   background-color:#FFD47F !important;
   color: #320000;
}

/*=======================================
    HEADER STYLES
==================================================*/
.head-main2 {
    font-size:80px !important;
    font-weight:900!important;
    color:#fff!important;
    padding:20px 20px 10px 20px;
}
.head-main {
    font-size:60px !important;
    font-weight:900!important;
    color:#fff!important;
    padding:30px 20px 10px 20px;
}
.head-sub-main {
    font-size:35px !important;
    font-weight:600!important;
    color:#fff!important;
    padding:5px 20px 10px 20px;
}
.head-last {
    font-size:22px !important;
    font-weight:300!important;
    color:#fff!important;
    padding:5px 20px 40px;
}
.logo-holder {
	position: relative;
	margin: 0px auto;
    padding:10px;
	margin-bottom: 30px;
}
.logo-holder img{
    width:30%;
		height: auto;
		min-width: 60px;
		min-height: 60px;
  
    -webkit-transition: all 0.2s ease;
       -moz-transition: all 0.2s ease;
         -o-transition: all 0.2s ease;
            transition: all 0.2s ease;
}
.menu-logo-holder {
	position: relative;
	margin: 0px auto;
    padding:10px;
	margin-bottom: 10px;
}
.menu-logo-holder img{
    width:34%;
	height: auto;
	min-width: 10px;
	min-height: 10px;
  
    -webkit-transition: all 0.2s ease;
       -moz-transition: all 0.2s ease;
         -o-transition: all 0.2s ease;
            transition: all 0.2s ease;
}
@media screen and (min-width:1080px){
	.logo-holder img{
		width:15%;
		height: auto;
		min-width: 60px;
		min-height: 60px;
	}	
}
@media screen and (max-width:992px){
	.logo-holder img{
		width:30%;
		height: auto;
		min-width: 40px;
		min-height: 40px;
	}
	.row{
		margin:0;
		padding: 0;
	}
	.head-main {
		font-size:40px !important;
		font-weight:900!important;
		color:#fff!important;
		padding:0 20px 10px !important;
	}
	.head-sub-main {
		font-size:30px !important;
	}
	.head-last {
		font-size:25px !important;
	}
}
@media screen and (max-width:679px){
	.logo-holder img{
		width:50%;
		height: auto;
		min-width: 60px;
		min-height: 60px;
	}	
}
@media screen and (max-width: 450px) {
	.logo-holder img{
		width:60%;
		height: auto;
		min-width: 60px;
		min-height: 60px;
		margin-top: 40px;
	}	
}


.parallax2 { 
    /* The image used */
    background-image: url("../img/para_reg.jpg");

    /* Set a specific height */
    height: 100%; 
	min-height: 50%;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*=======================================
    NAVIGATION STYLES
==================================================*/


nav {
	position: absolute;
	width: 100%;
    background: #fff;
    z-index:99;
}
.fixed {
	position: fixed; 
	top: 0; 
	min-height: 50px; 
	z-index: 99;
}

.navbar-inverse {
	background-color:rgba(100,52,19,0.98);
	border-bottom: 4px solid rgba(255,212,127,0.70);
}
.footer a:link, .footer a:visited, .footer a:active{
	font-size: 70% !important;
	color:#cccccc;
    text-decoration: none;
}
.footer a:hover  {
	color:#FFD47F;
    text-decoration: none;
}
/*=======================================
    SERVICE STYLES
==================================================*/


.service-div {
	width: 100%;
	min-height: 320px;
	background-color: #FFFDF5;
	box-shadow: none;
	border: 0;
    padding:8% 4%;
	-webkit-border-radius: 20px 20px 0px 0px;
	-moz-border-radius: 20px 20px 0px 0px;
	border-radius: 20px 20px 0px 0px;
    margin:30px 0;
}
@media screen and (max-width:992px){
	.service-div {width: 90%; margin: 4% auto;}
}

/*=======================================
    SHOWCASE STYLES 
==================================================*/

.showcase-div {
	width: 100%;
	min-height: 100px;
	background-color: #ffffff;
	box-shadow: none;
	border: 0;
    padding:8% 4%;
	-webkit-border-radius: 20px 20px 20px 20px;
	-moz-border-radius: 20px 20px 20px0px 20px;
	border-radius: 20px 20px 20px 20px;
    margin:30px 0;
}
.showcase-div img{
	width: 80%; 
	height: auto;
	min-width: 60px;
	min-height: 60px;
	border: 1px solid #dddddd;
}
#accrd header{color: #ffffff !important;}
#register {color: #ffffff !important;}
@media (max-width:992px){
	.col-md-3{width: 45% !important; display: inline-block;}
	.showcase-div {
		margin: 4% auto;
		padding:5% 3%;
	}
	
}
@media screen and (max-width:767px){
	.col-md-3 {width: 90% !important; display: inline-block;}
	.showcase-div {margin: 4% auto;}
}
@media screen and (max-width:479px){
	.col-md-3 {width: 100% !important; display: inline-block;}
	.showcase-div {margin: 4% auto;}
}

.showcase-div2 {
	width: 100%;
	min-height: 100px;
	background-color: #ffffff;
	box-shadow: none;
	border: 0;
    padding:5% 3%;
	border-radius: 0;
    margin:30px 0;
}
.showcase-div2 img{
	width: 100%;
	height: auto;
	min-width: 60px;
	min-height: 60px;
}
@media (max-width:992px){
	.col-md-2 {width: 30% !important; display: inline-block;}
	.showcase-div2 {
		margin: 4% auto;
		padding:5% 3%;
	}
	
}
@media screen and (max-width:767px){
	.col-md-2 {width: 45% !important; display: inline-block;}
	.showcase-div2 {margin: 4% auto;}
}
@media screen and (max-width:479px){
	.col-md-2 {width: 80% !important; display: inline-block;}
	.showcase-div2 {margin: 4% auto;}
}

.showcase-bottom {
	width: 100%;
	min-height: 100px;
	box-shadow: none;
	border: 0;
    padding:1%;
    margin:10px;
}

/*=======================================
    CONTACT STYLES
==================================================*/

#social-icon a {
    color:#616161 !important;
    margin-right:10px;
	text-align: center;
}
.contact-cls {
    font-size:20px;
    line-height:40px;
	text-align: center;
}
/*=======================================
    FOOTER STYLES
==================================================*/

.footer{text-align: center; font-size: 100%; color: #999999; margin: 0 !important; padding: 2% !important;}
.footer .fa {font-size: 160%; padding: 0 6px;}

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 9999999; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 50px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
	width: 100%;
	margin: 4px auto;
    padding: 8px;
    text-decoration: none;
    font-size: 14px;
    color: #818181;
    display: block;
    transition: 0.3s;
	text-align: center;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
	text-align: right;
}
.sidenav .mob_btns a{
    position: relative;
	width: 80%;
    padding: 8px;
	margin: 0 0 0 27px;
	display: inline-block;
	text-align: left;
}
.sidenav .mob_top_icons a{
    position: relative;
	width: 25%;
    padding: 8px;
	display: inline-block;
	text-align: center;
}
.sidenav .soc_icons a{
    position: relative;
	width: 14%;
    padding: 2px;
	display: inline-block;
	text-align: center;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#mySidenav img {
    transition: margin-left .5s;
		width:90%;
		height: auto;
		min-width: 120px;
		min-height: 120px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

		p.content {
			-moz-columns: 20em 2;
			-webkit-columns: 20em 2;
			-ms-columns: 20em 2;
			columns: 20em 2;
			-moz-column-gap: 2em;
			-webkit-column-gap: 2em;
			-ms-column-gap: 2em;
			column-gap: 2em;
			text-align: justify;
		}
/* Spotlight */
	section.special, article.special {
		text-align: center;
	}

	.spotlight {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		margin: 0 0 2em 0;
	}

		.spotlight .content {
			-moz-flex: 1;
			-webkit-flex: 1;
			-ms-flex: 1;
			flex: 1;
		}

			.spotlight .content > :last-child {
				margin-bottom: 0;
			}

			.spotlight .content header.major {
				margin: 0 0 2em 0;
			}

		.spotlight .image {
			display: inline-block;
			margin-left: 4em;
			padding: 0.65em;
			border-radius: 100%;
			border: solid 1px;
		}

			.spotlight .image img {
				display: block;
				border-radius: 100%;
				width: 16em;
			}

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

			.spotlight {
				-moz-flex-direction: column-reverse;
				-webkit-flex-direction: column-reverse;
				-ms-flex-direction: column-reverse;
				flex-direction: column-reverse;
				text-align: center;
			}

				.spotlight .content {
					-moz-flex: 0 1 auto;
					-webkit-flex: 0 1 auto;
					-ms-flex: 0 1 auto;
					flex: 0 1 auto;
					width: 100%;
				}

					.spotlight .content header.major h2:after {
						margin-left: auto;
						margin-right: auto;
					}

				.spotlight .image {
					-moz-flex: 0 1 auto;
					-webkit-flex: 0 1 auto;
					-ms-flex: 0 1 auto;
					flex: 0 1 auto;
					margin-left: 0;
					margin-bottom: 2em;
				}

		}

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

			.spotlight .image {
				padding: 0.35em;
			}

				.spotlight .image img {
					width: 12em;
				}

		}

	.spotlight .image {
		border-color: rgba(255, 255, 255, 0.35);
	}
.pge_titles{position: relative; width: 100%; padding: 2%; font-size: 300% !important; text-align: center; font-style: normal;}

@media screen and (max-width:991px){
	.pge_titles{font-size: 220% !important;}
}