/*****************************/
/*****************************/
/*****************************/
/*****************************/
/*****************************/

@font-face {
    font-family: Haetten;
    src: url(fonts/HATTEN.TTF);
}

@font-face {
  font-family: qoran;
  src: url('fonts/Abo-thar.eot?#iefix') format('embedded-opentype'),  url('fonts/Abo-thar.woff') format('woff'), url('fonts/Abo-thar.ttf')  format('truetype'), url('fonts/Abo-thar.svg#Abo-thar') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
    font-family: qoranfont;
    src: url('fonts/quran-webfont.eot');
    src: url('fonts/quran-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/quran-webfont.woff2') format('woff2'),
         url('fonts/quran-webfont.woff') format('woff'),
         url('fonts/quran-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: EnglishFont;
    src: url(fonts/MyriadPro-Regular.otf);
}

html {

}



body {
	margin: 0;
    background-color: #24368a;
}

.wrapper-section-one .content {
	width: 181px;
    margin: auto;
}

.wrapper-section-two .div-section-two-one .content {
	text-align: center;
    padding: 15px;
    height: 85%;
}


.wrapper-section-two .div-section-two-one .content p {
	color: white;
	
}

.wrapper-section-two .div-section-two-one .content p:nth-child(1) {
	font-size: 35px;
}

.wrapper-section-two .div-section-two-one .content p:nth-child(2),
.wrapper-section-two .div-section-two-one .content p:nth-child(3),
.wrapper-section-two .div-section-two-one .content p:nth-child(4) {
	width: 75%;
    margin: auto;
    line-height: 22px;
}

.wrapper-section-two .div-section-two-one .content p:nth-child(5) {
	font-size: 28px;
    padding: 20px;
}

#eng {
	font-family: EnglishFont;
	direction: ltr;
}

#qor {
	font-family: Qoranfont;
	direction: rtl;
}

/*************************************/
/******* First Section Style *********/
/*************************************/
.section-one {
	width: 960px;
	margin: auto;
	height: 100%;
	min-height: 100%;
	background-color: #1C3A89;
	background: url(../img/image-bg.jpg) center no-repeat;
	background-size: cover;
}

.wrapper-section-one {
    height: 93%;
    text-align: center;
    color: white;
}


.wrapper-section-one ul {
	margin: auto;
	padding: 25px;
	position: absolute;
	bottom: 0;
}

.wrapper-section-one ul li {
	display: inline;
	text-align: center;
}

.wrapper-section-one ul li a {
	text-decoration: none;
	font-size: 20px;
	color: white;

}

.wrapper-section-one ul li a:hover {
	color:#e2ad21;
}

.wrapper-section-one ul li:First-child:after {
	content: " | ";
	padding: 0 5px 0 5px;
	font-family: EnglishFont;
}

.wrapper-section-one ul li:First-child a {
	color:#e2ad21;
}
/*************************************/
/******* End First Section Style *****/
/*************************************/



/*************************************/
/******* Second Section Style *********/
/*************************************/
.section-two {
	width: 960px;
	margin: auto;
	overflow: auto;
	background-color: #028195;
	padding-bottom:60px;
}

.wrapper-section-two {
    height: 93%;
}

.div-section-two-one {
    width: 100%;
    height: 30%;
}

.div-section-two-two {
    width: 50%;
    height: 65%;
    padding-top: 40px;
}

.div-section-two-two p {
	color: white;
	font-family: EnglishFont;
	padding: 15px;
}

.div-section-two-two p:nth-child(1) {
	font-size: large;
    line-height: 35px;
}

.div-section-two-two p:nth-child(2) {
    line-height: 18px;
    font-size: 13px;
}

.div-section-two-three {
    width: 50%;
    height: 65%;
    padding-top: 15px;
}

.div-section-two-three img {
	width: 100%;
    margin: 40px 0 0 13px;
}
/*************************************/
/******* End second Section Style *****/
/*************************************/

/*************************************/
/******* Third Section Style *********/
/*************************************/
.section-three {
	width: 960px;
	margin: auto;
	background-color: white;
	padding-bottom: 30px;
	overflow: auto;
}
.wrapper-section-three {
    height: 93%;
}

.div-section-three-one {
	width: 48%;
	height: 100%;
}

.div-section-three-two,
.div-section-three-three {
	width: 48%;
    height: 50%;
    margin-left: 35px;
}

.div-section-three-three {
	padding-top: 5px;
}

.div-section-three-two {
    border-bottom: 3px dotted rgb(87, 96, 138);
	height: 428px;
}


.div-section-three-one .content p,
.div-section-three-two .content p {
	color: #24368a;
    line-height: 20px;
    font-size: 15px;
    font-family: EnglishFont;
    width: 95%;
    padding-top: 15px;
    padding-left: 15px;
}



.div-section-three-one .content p:nth-child(2) {
	padding: 15px 15px 0px 15px;
}

.div-section-three-two .content .story-board {
	padding-left: 35px;
}

.div-section-three-one .content .story-board .story img,
.div-section-three-two .content .story-board .story img,
.div-section-three-three .content .story img
 {
	width: 55px;
    float: left;
    padding: 15px 20px 85px 0;
    margin-bottom: 3px;
}

.div-section-three-three .content .story img {
	padding: 0 20px 0 0;
 }


.div-section-three-three .content .story img {
	width: 120px;
}
.div-section-three-three .content .story p {
    width: 98%;
    padding: 8px 0 4px 0;
    font-size: 15px;
    font-family: EnglishFont;
    color: #24368A;
}


.div-section-three-one .content .story-board .story p,
.div-section-three-two .content .story-board .story p,
.div-section-three-three .content .story p {
	line-height: 20px;
}

.div-section-three-one .content .story-board .story,
.div-section-three-two .content .story-board .story, {
	padding-top: 15px;
}



.div-section-three-one .content h1 {
	padding: 15px;
    background-color: #3BB6B4;
    font-family: EnglishFont;
    font-size: 18px;
    text-align: center;
    color: white;
}

.div-section-three-three .content h1 {
	padding: 5px 15px 5px 15px;
    background-color: #24368a;
    font-family: EnglishFont;
    font-size: 18px;
    text-align: center;
    color: white;
}


.div-section-three-three .content ul {
	margin-top: 10px;
}
.div-section-three-three .content ul li {
	font-family: EnglishFont;
    color: #24368A;
    padding-bottom: 8px;
    font-size: 15px;
    line-height: 18px;
}


.div-section-three-three .content ul li:nth-child(1),
.div-section-three-three .content ul li:nth-child(3),
.div-section-three-three .content ul li:nth-child(5) {
	float: left;
	padding: 0 15px 0 0;
}

.div-section-three-three .content ul li:nth-child(1):before {
	content: "1";
	font-size: 20px;
    border: 1px solid #24368A;
    border-radius: 50%;
    width: 100%;
    padding-top: 2px;
    text-align: center;
    display: inline-block;
    margin-right: 8px;
}

.div-section-three-three .content ul li:nth-child(3):before {
	content: "2";
	font-size: 20px;
    border: 1px solid #24368A;
    border-radius: 50%;
    width: 100%;
    padding-top: 2px;
    text-align: center;
    display: inline-block;
    margin-right: 8px;
}

.div-section-three-three .content ul li:nth-child(5):before {
	content: "3";
	font-size: 20px;
    border: 1px solid #24368A;
    border-radius: 50%;
    width: 100%;
    padding-top: 2px;
    text-align: center;
    display: inline-block;
    margin-right: 8px;
}



.div-section-three-three .content p {
	padding: 60px;
    font-family: EnglishFont;
    color: #243691;
    font-size: 15px;
    font-weight: bold;
}

.div-section-three-three .content p {
	padding: 5px;
}

.div-section-three-three .content .story {
	padding-top: 5px;
	padding-bottom:10px;
}

.div-section-three-one .content ul {
    margin-top: 8px;
    width: 100%;
    height: 330px;
    border-bottom: 3px dotted rgb(87, 96, 138);
    list-style: disc;
    margin-left: 23px;

}


.div-section-three-one .content ul li {
    width: 46%;
    font-size: 25px;
    font-family: EnglishFont;
    color: #3BB6B4;
    float: left;
    margin-right: 20px;
    line-height: 14px;
    padding-bottom: 15px;
}

.div-section-three-one .content ul li:nth-child(2),
.div-section-three-one .content ul li:nth-child(4),
.div-section-three-one .content ul li:nth-child(6) {
    margin: 0px;
}

.div-section-three-one .content ul li p {
    color: #24368a;
    padding: 0px;
    margin: 0px;
    width: 100%;
}

/*.div-section-three-one .content ul li:nth-child(1):before,
.div-section-three-one .content ul li:nth-child(2):before,
.div-section-three-one .content ul li:nth-child(3):before,
.div-section-three-one .content ul li:nth-child(4):before,
.div-section-three-one .content ul li:nth-child(5):before,
.div-section-three-one .content ul li:nth-child(6):before {
    content: "•";
    color: #3BB6B4;
    font-size: 25px;
    margin-right: 15px;
    display: inline-block;
    height: 0;
}*/

.div-section-three-one .content ul li:nth-child(7) {
	font-family: EnglishFont;
    color: #243691;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
    padding-top: 7px;
    list-style: none;
}

span.change-color {
	color:#3BB6B4;
}

/*************************************/
/******* End Third Section Style *****/
/*************************************/

/*************************************/
/******* fourth Section Style *********/
/*************************************/
.section-four {
	width: 960px;
	margin: auto;
	background-color: white;
	overflow:auto;
	padding-bottom:60px;
}

.wrapper-section-four {
    height: 93%;
}

.div-section-four-one {

}

.div-section-four-one .content h1 {
	color: #24368a;
    font-family: EnglishFont;
    padding: 25px;
    padding-top: 3px;
    text-align: center;
    line-height: 75px;
	font-size:29px;
}

ul.bxslider {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

ul.bxslider li  {
	width: 50%;
	height: 100%;
    float: left;
}


ul.bxslider li img {
	width: 90%;
}
ul.bxslider li p {
	font-family: EnglishFont;
    width: 86%;
    padding-left: 50px;
    color: #24368a;
    font-size: 14px;
    line-height: 18px;
}


.bx-wrapper .bx-viewport {
	height: 100%;
}

.bx-pager, 
.bx-default-pager {
	display: none;
}

.bx-prev {
    background: url(../img/slide_pre.png);
    background-size: 25px;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: 3px -7px;
    display: inline-block;
    width: 3%;
    height: 45px;
    position: relative;
    top: -365px;
}

.bx-next {
    background: url(../img/slide_next.png);
    background-size: 25px;
    font-size: 0;
    background-repeat: no-repeat;
    background-position: -1px -3px;
    display: inline-block;
    width: 3%;
    height: 45px;
    position: relative;
    top: -365px;
    right: -863px;
}

.bx-controls {
	height: 0;
}

/*************************************/
/******* End fourth Section Style *****/
/*************************************/

/*************************************/
/******* Five Section Style *********/
/*************************************/
.section-five {
	width: 960px;
	margin: auto;
	height: 100%;
	min-height: 100%;
	background-color: white;
	background: url(../img/image-10.jpg) center;
    background-size: cover;
    background-repeat: no-repeat;
	position: relative;
}

.follow {
    background: #24368a;
    display: block;
    color: white;
    font-family: EnglishFont;
    margin: auto;
    width: 175px;
    height: 39px;
    padding-left: 27px;
}

.follow li {
	float: left;
    text-align: center;
    line-height: 40px;
}
	
.follow li a {
    overflow: hidden;
    font-size: 0;
    height: 100%;
    display: inline-block;
}

.follow li a img {
  width: 25px;
  padding-top: 5px;
}

.follow li:nth-child(1),
.follow li:nth-child(5) {
	white-space: nowrap;
	padding-right: 10px;
}



.section-five .content {
	display: block;
	height: 100px;
	bottom: 39px;
	position: absolute;
	width: 100%;
}

/*************************************/
/******* End Five Section Style *****/
/***********************************/




/*************************************/
/************* Scroll ***************/
/***********************************/
::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 6px;
}

::-webkit-scrollbar:horizontal {
    height: 6px;
}
 
::-webkit-scrollbar-track {
	background-color: #F5F5F5;
}
 
::-webkit-scrollbar-thumb {
   	background-color: rgba(0, 0, 0, .2);
}
/*************************************/
/************* End Scroll ***********/
/***********************************/


.wrapper-details {
	padding: 25px;
	font-family: Haetten;
}

.qoran-font {
	font-family: qoran;
}

.left {
	float: left;
}

.right {
	float: right;
}

ul.social-phone {
	display: none;
}

ul.social  {
	width: 100%;
    margin: auto;
    padding: 40px 0 0 40px;
}

ul.social li:nth-child(1) {
	text-align: center;
    width: 80%;
}

ul.social li:nth-child(2),
ul.social li:nth-child(3),
ul.social li:nth-child(4),
ul.social li:nth-child(5),
ul.social li:nth-child(6) {
	display: inline-block;
	padding: 14px;
    width: 21%;
}

ul.social li:nth-child(3),
ul.social li:nth-child(4),
ul.social li:nth-child(5) {
	width: 45px;
}

ul.social li a{
	color: white;
	text-decoration: none;
	text-align: center;
	font-family: EnglishFont;
	overflow: hidden;
	font-size: 0;
    line-height: 0;
    width: 100%;
    height: 20px;
	display: inline-block;
}

ul.social li:nth-child(2){
	background: url(../img/social-04.png) no-repeat;
    background-size: 125px;
	width:125px;
}

ul.social li:nth-child(3){
	background: url(../img/social-06.png) no-repeat;
    background-size: 125px;
}

ul.social li:nth-child(4){
	background: url(../img/social-06.png) no-repeat;
    background-size: 125px;
    background-position: -42px 0px;
}

ul.social li:nth-child(5){
	background: url(../img/social-06.png) no-repeat;
    background-size: 125px;
    background-position: -84px 0px;
}

ul.social li:nth-child(6){
	background: url(../img/social-05.png) no-repeat;
    background-size: 125px;
	width:125px;
}

i.web {
	text-align: center;
    margin: 0 auto;
    padding-left: 30px;
    font-size: 22px;
    font-family: EnglishFont;
    font-weight: bold;
    background: url(../img/world-07.png);
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: 0px;
    color: #CBB020;
}

.salat{
	width:30px;
	height:25px;
	display:inline-block;
}

.salat img{
	width:25px;
}

.radiya-1{
	width:43px;
	height:20px;
	display:inline-block;
}

.radiya-2{
	width:44px;
	height:18px;
	display:inline-block;
}


 /* Large Devices, Wide Screens */
    @media screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media screen and (max-width : 768px) {
 .section-one,
		.section-two,
		.section-three,
		.section-four,
		.section-five{
			width:auto;
			height:auto;
			overflow: auto;
		}
		
		.div-section-two-two, .div-section-two-three{
			width:100%;
		}
		
		ul.social{
			padding: 40px 0 0 0px;
		}
		
		ul.social li:nth-child(2), ul.social li:nth-child(6){
			width: 128px;
		}
		
		ul.social li:nth-child(3), ul.social li:nth-child(4),ul.social li:nth-child(5){
			width:45px;
		}
		
		.div-section-three-one, .div-section-three-three, .div-section-three-two{
			width:100%;
		}
		
		.div-section-three-one .content ul{
			height:100%;
			overflow: auto;
			padding-bottom: 20px;
			margin-left: 0px;
		}
		
		.div-section-three-two, .div-section-three-three{
			margin-left:0px;
		}
		
		.div-section-three-two .content .story-board{
			padding-left:0px;
		}
		
		.div-section-four-one .content h1{
			line-height:50px;
		}
		
		ul.bxslider li{
			width:100%;
		}
		
		ul.bxslider li p{
			width:100%;
			padding-left:10px;
			padding-right:10px;
			padding-top:20px;
		}
		
		ul.bxslider li img{
			width:100%;
		}
		
		.div-section-three-three .content .story{
			overflow:auto;
		}
		
		.div-section-three-three .content .story img{
			float:left;
		}
		
		.div-section-three-one .content .story-board .story img, .div-section-three-two .content .story-board .story img{
			padding-bottom:0px !important;
		}
    }

    /* Extra Small Devices, Phones */ 
    @media screen and (max-width : 480px) {
       

    }

    /* Custom, iPhone Retina */ 
    @media screen and (max-width : 320px) {
    }