
*
{
	margin:0px;
	-webkit-margin:0px;
	padding:0px;
	-webkit-padding:0px;
	font-family:sans-serif;
	-webkit-font-family:sans-serif;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
   -o-box-sizing:border-box;
	box-sizing:border-box;
}

h1{
	-webkit-font-family: 'Lalezar', cursive;
	font-family: 'Lalezar', cursive;
	-webkit-font-family: 'Rakkas', cursive;
	font-family: 'Rakkas', cursive;
}
h2{
	margin-bottom: 0;
}
q{
	display: block;
  font-size: 25px !important;
  font-weight: bold;
  margin-top: 50px;
}
span{
	font-family: inherit;
	-webkit-font-family: inherit;
	display: block;
	-webkit-display: block;
  text-align: center;
  -webkit-text-align: center;
  margin: 20px;
  -webkit-margin: 20px;
  font-size: 20px;
  -webkit-font-size: 20px;
}

.divider{
	position: relative;
	text-align: center;
	width: 100%;
	height: 40px;
	overflow:hidden;
	background: #fff;
	margin-top: 36px;
}
.divider:before{
	content: attr(data-text);
	position: relative;
	top: -66px;
	color: #fff;
	font-size: 4em;
	text-decoration-style: wavy;
	text-decoration-color: #383838;
	text-decoration-line: underline;
}

.clearfix{
	clear: both;
}
											/************************* Start NAVBAR  *************************/ 


.navbar #logo {
	font-family: 'Lalezar', cursive;
	font-size: 45px;
	}
	@media (max-width: 992px){
		.navbar #logo{
			position:absolute;
			left: 20px;
    	top: 2px;
  	}
	}
.nav-link{
	text-align: center;
	padding: 0.29rem 1rem;;
}
.navbar-nav a:hover{
	background-color: #181819;
  color: rgb(248, 249, 250) !important;
  transition: 1s ease-in-out;
}
.navbar .navbar-nav{
	font-size: 18px;
}
@media (min-width: 992px){
	.navbar .collapse{
		display: contents !important;
	}
}
										/************************* END NAVBAR  *************************/ 
										/********************** Start BOOK SECTION  ********************/ 

.book-section{
	height: 500px;
}
.book-section .container{
	height: 100%;
}
.book-right-brief{
	margin-top: 200px;
} 
.book-right-brief h1{
	margin-bottom: 0;
  margin-right: 0px;
}
.book-right-brief hr{
	background-color: #989797;
  box-sizing: content-box;
  height: 1px;
  overflow: visible;
  width: 13%;
  margin: 0 auto;
  margin-top: .75rem;
  margin-bottom: 1rem;
  color: inherit;
  border-top: 1px solid rgba(0,0,0,.1);
  opacity: initial;
}
.book-right-brief p{
	margin-bottom: 2.5rem;
}
.left-side{
	height: 550px;
}
.front{
	display: flex;
  position: absolute;
  width: 250px;
  height: 370px;
  left: 18%;
  border-radius: -5px;
  border: 1px solid gray;
  top: 280px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 13px;
  box-shadow: -1px 6px 12px #484848;
}
.front h2{
	font-size: 1.65rem;
  position: absolute;
  top: 43%;
  right: 30%;
}
.first-front{
	background-color: black;
	color: #fff;
	z-index: 999;
}
.first-front h3{
	font-family: 'Lalezar';
  font-size: 45px;
	position: absolute;
  top: 40px;;
  right: 32px;
  margin-top: 0;
  margin-bottom: .5rem;
}
.first-front h5{
	font-size: .75rem;
  top: 125px;
  right: 71px;
  position: absolute;
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: bold;
}
.first-front  h6{
	position: absolute;
  right: 30.5%;
  bottom: 10px;
  font-size: .75rem;
  font-weight: bold;
}
.first-front img{
	right: 10px;
  height: 147px;
  width: 200px;
  position: absolute;
  top: 170px;
}
.page{
	display: flex;
  position: absolute;
  width: 250px;
  height: 355px;
  z-index: 30;
  left: 17.25%;
  border-radius: -5px;
  border: 1px solid gray;
  top: 288px;
  background-color: #fff;
  box-sizing: border-box;
  padding: 0 13px;
  box-shadow: -1px 6px 12px #484848;
}
.back-cover{
	display: flex;
  position: absolute;
  width: 250px;
  height: 366px;
  z-index: 1;
  left: 16.35%;
  border-radius: -5px;
  border: 1px solid gray;
  top: 286px;
  background-color: black;
  box-sizing: border-box;
  padding: 0 13px;
  box-shadow: -1px 6px 12px #484848;
}
.book-right-brief .form-btn,
.book-right-brief .pdf-btn,
.book-right-brief .disabled
{
	width: 165px;
	height: 51px;
  background: #fff;
  padding: 10px 20px;
  border: 5px solid;
  margin-top: 20px;
  margin-left: 25px;
  text-decoration: none;
  color: black;
}
.book-right-brief .form-btn
{
	margin-right: 32px;
}
.book-right-brief .form-btn:hover,
.book-right-brief .pdf-btn:hover{
	background: black;
	color: #fff;
	-webkit-transition: 1s ease-in-out;
	-moz-transition: 1s ease-in-out;
	-o-transition: 1s ease-in-out;
	transition: 1s ease-in-out;
}
.book-right-brief .disabled{
	font-size: 14px;
}
.book-right-brief .disabled:hover{
	 background-color: background: #fff;
	 color: black;
}
@media screen and (max-width: 576px){ /*xm size*/
	.book-section{
		height: 1025px;
		}
	.book-section .col-md-8{
		height: 500px;
		}
	.book-right-brief{
		position: absolute;
		right: 0;
		top: 650px;
		margin-top: 40px;
		}
.book-right-brief .form-btn,
.book-right-brief .pdf-btn,
.book-right-brief .disabled{
		float: none;
		width: 190px;
		display: block;
		margin:  10px auto;
		}	
}
@media (min-width: 577px) and (max-width: 786px){
	.book-section{
		height: 1000px;
		}
	.book-section .col-md-8{
		height: 500px;
		}
	.book-right-brief{
		position: absolute;
		right: 0;
		top: 650px;
		width: 100%;
		margin-top: 60px;
		}
	.book-right-brief .form-btn,
	.book-right-brief .pdf-btn,
	.book-right-brief .disabled{
		float: none;
		width: 190px;
		display: block;
		margin:  10px auto;
	}
}
@media (min-width: 769px) and (max-width: 999px){
	.book-section{
		height: 990px;
	}
	.book-section .col-md-8{
		height: 500px;
	}
	.book-section .first-front{
		left: 34%;
	}
	.book-section .page{
		left: 32.5%
	}
	.book-section .back-cover{
		left: 31%;
	}
	.book-right-brief{
		position: absolute;
		right: 0;
		top: 650px;
		width: 100%;
		margin-top: 30px;
	}
	.book-right-brief .form-btn,
	.book-right-brief .pdf-btn,
	.book-right-brief .disabled{
		float: none;
		width: 190px;
		display: block;
		margin:  10px auto;
	}
}
@media (min-width: 1000px){
	.book-section{
		height: 600px;
	}
.book-right-brief{
		width: 40%;
    top: 250px;
    right: 100px;
	}
.book-right-brief .form-btn{
		
	    margin-left: 14px;
	    display: inline-block;
	}
.book-right-brief .pdf-btn{
	margin-left: 0px;
	display: inline-block;
	}
.book-right-brief .disabled{
	display: block;
  margin: 17px 29%;
	}
}
@media (min-width: 1000px) and (max-width: 1205px){
	.book-right-brief .form-btn{
		margin-right: 0px;
	}
}
									/******************* END BOOK SECTION  ********************/
									/******************* Start INTRODUCTION ********************/ 
.intro{
	background-color: #fff;
  margin-right: 0;
  width: 100%;
  margin-bottom: 30px;
}
.intro .inner-container{
	width: 100%;
}
.intro .inner-container:before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 513%;
	background-color: #2f2f2f;
	color: #eaeaea;
	-webkit-border-radius: 0 0 34% 24%;
	-moz-border-radius: 0 0 34% 24%;
	-o-border-radius: 0 0 34% 24%;
	border-radius: 0 0 34% 24%;
}
.intro .right-side{
	width: 17%;
}
.intro .right-side span{
	top: 178px;
  position: absolute;
  font-size: 30px;
  border-left: 1px solid #afadad;
  padding: 10px;
  right: 25px;
}
.intro .left-side{
	width: 82%;
  padding: 15px 15px 30px;
  margin-left: 84px;
  font-size: 18px;
  margin-top: 40px;
}
.intro .left-side p{
	position: absolute;
	font-size: 17px;
}	

							/******************* END INTRODUCTION ********************/ 
							/******************* START PODCAST ***********************/
.podcast{
	margin-top: 55px;
	padding: 20px;
}
.podcast h1{
	font-size: 4em;
  margin: 0 0 .6rem;
}
.podcast p{
	margin-bottom: 40px;
}
.podcast .col-md-4{
	padding: 20px;
}
.podcast a{
	text-decoration: none;
  color: #212529;
}
.podcast img{
	height: 190px;
  width: 210px;
  border: 4px solid #d6d5d5;
  border-radius: 50%;
}
.podcast button{
	width: 172px;
  height: 50px;
  background-color: black;
  color: #fff;
  border-radius: 10px;
  margin: 0 25px 25px;
}
.podcast .right-side{
	width: 53%;
  float: right;
}
.podcast .right-side .first-appleBtn-p{
	font-size: 12px;
  text-align: right;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-top: 5px;
}
.podcast .right-side .second-appleBtn-p{
	display: inline;
  font-size: 14px;
  text-align: right;
  margin-right: 9px;
  font-weight: bold;
  margin-bottom: 5px;
}
.podcast .left-side{
	height: 48px;
	float: left;
	width: 50px;
}
.podcast .left-side img{
	height: 37px;
  width: 39px;
  border-radius: 80%;
  margin: 6px;
  border: none;
}
/*.podcast .col-md-4:hover{
  -ms-transform: scale(1.25);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  transform: scale(1.25); 

}*/
.podcast span{
	width: 200px;
	font-family: sans-serif;
	margin: 16px auto 0;
}
.podcast .name-span-podcast{
	margin: 0 auto;
}
.podcast .lonly-podcast{
	margin: auto;
}
@media (min-width: 577px) and (max-width: 992px){
	.podcast .col-md-4{
	    width: 50%;
			margin-right: 0px;
		}
	.podcast .last-podcast{
			margin: auto;
		}
}

							/******************* END PODCAST *************************/
							/**************** Start BOOK CHAPTERS ********************/ 
.book-chapters {
	margin-top: 55px;
	margin-bottom: 30px;
}
.book-chapters h1{
	font-family: 'Rakkas', cursive;
	font-size: 4em;
  margin: 0 0 .6rem;
}
.book-chapters .read-more{
	display: none;
}
.book-chapters .row{
	padding: 20px;
}
.book-chapters .first-row a,
.book-chapters .third-row a{
	text-decoration: none;
	color: #212529;
}
.book-chapters .col-md-5{
	border-left: 1px solid gray;
  margin: 15px;
}
.book-chapters .experience{
	font-family: inherit;
	margin-right: 13px;
	margin-top: 0px;
	margin-left: 70px;
}
.book-chapters ol{
	margin: 20px;
}
.book-chapters .second-row ol li{
	padding: 15px;
	font-size: 18px;
  font-weight: bold;
}
.book-chapters .second-row a{
	font-size: 20px;
  font-family: system-ui;
	text-decoration: none;
	color: #212529;
}
.book-chapters .experience,
.book-chapters .first-row,
.book-chapters .third-row{
	font-size: 30px;
}
.book-chapters .experience,
.book-chapters .first-row a,
.book-chapters .third-row a{

	font-family: 'Rakkas';
}
.book-chapters .first-row,
.book-chapters .third-row
{
	width: 37%;
}
.book-chapters .third-row{
	margin-right: 60px;
}
@media screen and (max-width: 992px){
	.book-chapters h1{
		margin: 0 0 2rem;
	}
	.book-chapters .read-more{
		display: block;
		font-size: 15px;
		font-family: 'Lalezar';
	}
	.book-chapters .first-row,
	.book-chapters .col-md-5,
	.book-chapters .third-row{
		width: 100%;
		text-align: center;
		margin: 0;
	}
	.book-chapters .col-md-5{ /*.col-5 is the first row is the title of the first chapter*/
		border: none;
	}
	.book-chapters .experience{
		margin-left:0px ;
	}
	.book-chapters .second-row {
	width: 100%;
	}
	.book-chapters .second-row li{
	width: 100%;
	}
}
									/***************** END BOOK CHAPTERS ******************/ 
									/**************** START LAST QUOTE ********************/
.outro{
	padding: 10px;
}	
									/***************** END LAST QUOTE ********************/
							/**************** START BREADCRUMB -IN SUB PAGES- *****************/
.breadcrumb-holder
{
	background-color:#f5f5f5;
}
.breadcrumb
{
	padding:10px 0;
	margin-top:50px;
	background-color: #e8e6e6;
}
.breadcrumb a{
	text-decoration:none;
	margin-right: 20px;
	color: #2f2f2f;
}
.breadcrumb-item+.breadcrumb-item{
	padding-left: 0;
}
.breadcrumb-item.breadcrumb-item::before{
	float: none;
	padding-left: .5rem;
}
									/**************** END BREADCRUMB *****************/
								/**************** START Exp-Body IN SUB PAGES *****************/
.exp-body{
	width: 100%;
}
.exp-body h2{
	padding: 10px;
}
.exp-body hr{
	background-color: #6A6767;
  box-sizing: content-box;
  height: 1px;
  overflow: visible;
  width: 60px;
  margin: 0 auto;
  margin-top: 0.5rem;
  margin-bottom: 1rem ;
  color: inherit;
  border-top: 1px solid rgba(0,0,0,.1);
  opacity: unset;
}
.exp-text{
	padding: 0 40px;
}
.exp-text .exp-text-intro{
	padding: 40px 0;
}
.exp-text h5{
	padding: 20px 0;
	font-size: 1.5rem;
  line-height: 2;
}
.exp-text-conv h5{
	font-size: 1.75rem;
	font-family: 'Lalezar';
}
.exp-text-conv li{
	font-weight: bold;
}
.exp-text-conv .no-margin{
	margin-bottom: 10px;
}
.sub-ol li{
	font-weight: 400;
}
.exp-text-conv li{
	padding: 15px 2px;
}
.exp-text-intro,
.exp-text-conv p{
	line-height: 2.5;
}
.exp-text-conv p{
	margin-bottom: 30px;
}
.exp-text-conv ol{
	margin-right: 20px;
}
.exp-text-conv p ul{
	margin-right: 15px;
}
.exp-text-conv .update{
	display: inline-block;
}
.exp-text-conv .first-update{
	display: inline-block;
  margin-left: 0;
  margin-right: 0;
  text-decoration: underline;
  font-size: 1.75rem;
  font-family: 'Lalezar';
}
									/**************** END Exp-Body *****************/
						/**************** START Advices -SECOND CHAPTER SUB PAGE- ****************/
.advices{
	position: absolute;
	top: 1350px;
	width: 100%;
	height: 50%;
	background: #2f2f2f;
  color: #eaeaea;
  border-radius: 30% 30% 0 0;
}
.advices .inner-containe{
	width: 100%;
}
.advices .right-side{
	width: 10%;
	position: absolute;
  font-size: 30px;
  border-left: 1px solid #afadad;
  padding: 10px;
  right: 25px;
  top: 50px;
}
.advices .left-side{
	position: absolute;
  left: 0;
  width: 80%;
  top: 50px;
  padding-left: 40px;
  font-size: 18px;
}
.advices .left-side p{
	margin-bottom: 3rem;
}
.advices .left-side a{
	margin-top: 20px;
	text-decoration: none;
  color: #eaeaea;
  border: 3px solid #eaeaea;
  padding: 7px 50px;
  font-size: 18px;
  cursor: pointer;
}
.advices .left-side a:hover{
	background-color: #eaeaea;
	color: #2f2f2f;
	transition: 1s ease-in-out;
}
											/**************** END ADVICES *****************/
											/**************** START FOOTER ****************/
.footer{
	width: 100%;
  height: 50px;
  margin-top: 0px;
}
.footer span{
	float: right;
	width: 100%;
	margin: 20px 0;
}
.footer a{
	float: left;
	font-family: 'Reem Kufi', sans-serif;
	display: block;
  text-align: center;
  margin: 20px 0;
  font-size: 20px;
  text-decoration: none;
  color: #212529;
}
.footer img{
	height: 35px;
	width: 35px;
}
@media screen and (max-width: 786px){
	.footer .col-md-6 span,
	.footer .col-md-6 a{
		float: none;
	}
}												/******************** START CONTACT *****************/
.contact .exp-text-conv{
	height: 100vh;
	width: 100%;
	background-color: aliceblue;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.contact .container h2{
 	margin-top: 50px;
 	margin-bottom: 0px;
 }
 .contact hr{
 		background-color: #6A6767;
    box-sizing: content-box;
    height: 1px;
    overflow: visible;
    width: 5%;
    margin: 0 auto;
    margin-top: 1.25rem !important;
    margin-bottom: 1rem !important;
    color: inherit;
    border-top: 1px solid rgba(0,0,0,.1);
    opacity: unset!important;
}
.container .form-p{
 	margin-top: 0px;
 	padding-top: 0px;
 	margin-bottom: 0px;
 	font-size: 20px;
 }
.contact .exp-text-conv .container{
	width: 90%;
	max-width: 500px;
	margin: 0 auto;
	padding: 20px;
	box-shadow: 0px 0px 20px #00000010;
	background-color: white;
	border-radius: 8px;
	margin-bottom: 20px;
}
.form-group{
	width: 100%;
	margin-top: 20px;
	font-size: 20px;
}
.form-group input,
.form-group textarea{
	width: 100%;
	padding: 5px;
	font-size: 18px;
	border: 1px solid rgba(128, 128, 128, 0.199);
	margin-top: 5px;
}
textarea{
	resize: vertical;
}
button[type="submit"]{
	width: 100%;
	border: none;
	outline: none;
	padding: 20px;
	font-size: 24px;
	border-radius: 8px;
	font-family: 'Montserrat';
	color: rgba(27, 166, 247);
	text-align: center;
	cursor: pointer;
	margin-top: 10px;
	transition: .3 ease background-color;
}
button[type="submit"]:hover{
	background-color: rgba(214, 226, 236);
}
#status{
	width: 90%;
	max-width: 500px;
	text-align: center;
	padding: 10px;
	margin: 0 auto;
	border-radius: 8px;
	font-size: 25px;
}
												/******************** END CONTACT *******************/
										/******************* START PRINTED VERSION PAGE **************************/ 

.copy{
	height: 1000px;
}
.exp-text-formPage{
	padding: 0px 55px;
}
										 /******************* END PRINTED VERSION PAGE ***********************/
										 /******************* START PODCAST SUB PAGE ************************/ 

@media screen and (min-width:601px){
	.podcast-div{
    margin: 50px;
    text-align: center;
	}
	.podcast-body{
		width: 330px;
  	text-align: center;
    padding: 0px;
    margin: auto;
	}
	.podcast-body img{
		border-radius: 50%;
    height: 200px;
    width: 70%;
    margin: auto;
	}
	.podcast-body iframe{
		margin-top: 50px;
		width: 100%;
		max-width:660px;
		background:transparent;
	}
.podcast-body span{
		margin: 20px 0;
	}
}
@media screen and (min-width: 320px) and (max-width: 600px){
	.podcast-div{
		margin:50px 50px;
		text-align: center;
	}
	.podcast-body{
		width: 330px;
    text-align: center;
    padding: 0px;
		margin: unset;
	}
	.podcast-body img{
		border-radius: 50%;
    height: 200px;
    width: 70%;
		margin-left: 0px;
	}
	.podcast-body iframe{
		width: 94%;
		margin-left: 50px;
		margin-top: 50px;
		max-width:660px;
		background:transparent;
	}
	.podcast-body span{
		margin: 20px 0;
	}
}
									  /******************* END PODCAST SUB PAGE ************************/
									  /******************* START SERVICES PAGE ************************/
.services-p{
	padding-top: 20px;
}
.services-span{
	font-family: inherit;
  margin-top: 20px;
	}
										/******************* END SERVICES PAGE ************************/

.intro-span{   /*******ABD-ALRAHMMAN NAME IN INRODUCTION PAGE *******/
	text-align: center;
	font-weight: bold;
}
.intro-note{
	display: inline-block;
  margin: 0;
  text-decoration: underline;
  font-weight: bold;
}