@charset "utf-8";

body {
	width: 100%;
	padding: 0;
	background: url(images/background.jpeg);
    background-size: cover;
	font-size: 16px;
	margin: 0px;
}

#first-row {
	background-color: aquamarine;
	padding: 20px 0px;
	
}
#first-row .circle:hover {
	color: green;
	width: 160px;
	height: 160px;
}
.circle {
	 width: 200px;
	height: 200px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
	text-align: center;
	font-weight: bold;
		 box-shadow: #000 7px 7px 7px;
padding: 10px 10px;
}


#circle-one {
	background-color: green;
		background-image: url("images/calligraphy+tazhib- Naas+Ekhlas.jpg");
	background-position: center;
	text-align: center;
	Padding: 80px 20px;
}
#circle-two {
	background-image: url("images/paingt-watercolor-birds.jpg");
		background-position: center;
			text-align: center;
	Padding: 80px 20px;
		

}
#circle-three {
	background-image: url("images/books.jpg");
			background-position: center;
				text-align: center;
	Padding: 80px 20px;
	
}
#circle-four {
	background-image: url("images/audio_video.jpg");
			background-position: center;
				text-align: center;
	Padding: 80px 20px;
}
h3 {
	padding: 30px 10px;
}
ul li {
		display: inline-block;
	text-align: right;
	font-size: 16px;
	font-weight:500;
	list-style-type: none;
	text-decoration: none;

}
 ul li a {
	list-style-type: none;
	text-decoration: none;
	text-align: right;
	padding: 5px;
	color: #ffffff;
}
ul li a:hover {
	color: black;
	background-color:cornsilk;
}

#nav {
	margin-top: 30px;
	text-align: right;
}

.row {
	width: 100%;
	margin: auto;
}
.main, #hello {
	padding: 5px 10px 5px 10px;;
}
.header, #hello{
	width: 100%;
	margin: 0px 0px 20px 0px;
}
.header, #footer{
	background-color:darkcyan;
	box-shadow: 7px 7px 5px #000000;

}

.active, .current  {
	background-color: #9F1417;
}

#circle2 {
	margin-top: 0px;
	margin-bottom: 10px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
		background-image: url(images/tooba.jpg);
	background-size: cover;
	margin-right: auto;
	margin-left: auto;

}

#hello  {
	color: #ffffff;
	text-align: center;
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	background-color:darkslategrey;
	box-shadow: 7px 7px 5px #000000;
	margin-top: 20px;

}

.video {
	text-align: center;
}
 

#footer {
	margin-top: 80px;
	font-size: 20px;
	font-weight: bold;
	font-style: italic;
	width: 100%;
	margin: 80px 0px 0px 0px;
	padding: 20px 10px;
}
.footer1 {
	text-align: center;
}
.social-media {
	width: 45px;
	height: 45px;
	text-align: center;
	padding: 3px;
	border-radius: 10px
}

#form {
	background-color:chocolate;
	font-size: 16px;
	color: white;
	padding: 15px 10px 15px 10px;
	margin: auto;
}
#form label {
	color: brown;
	text-align: left;
}
.submit {
	background-color: green;
    color: white;
	width: 208px;
	padding: 3px;
	
}
.submit:hover {
	color: yellow;
}
.caption {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	padding: 5px 0px;
}
.caption:hover{
	font-size: 17px;
	color: darkred;
}
.caption, .caption a {
		color: white;
	background-color: chocolate;

}
#gallery-note {
		background-color:darkslategrey;
	padding: 20px;
	text-align: center;
	width: 90%;
	margin: auto;

}
.gallery img {
	height: 250px;
		box-shadow: 3px 3px 3px  purple;

}
.gallery {
		box-shadow: 3px 3px 4px  black;

}
input, textarea {
	color: black;
	font-size: 13px;
}

.logo {
	margin-right: auto;
	margin-left: auto;
}

a {color:aquamarine;}

.portfolio, .portfolio-three {
	background-color: cornflowerblue;
	padding: 20px 8px;
	color: white;
}
.portfolio-two, .portfolio-four {
	background-color: lightslategrey;
	padding: 20px 8px;
	color: white;
}
/*------------------*/


@media screen and (max-width: 767px) {
	
	
	#nav { 
		margin: 0px auto 10px;
		text-align: right;
	             
	}
	  ul li a {
		font-size: 12px;
		 display: inline;
		 text-align: left;
		 margin: 0px;
		 
         
	}
	p {
		font-size: 14px;
	}
	h3{
		font-size: 17px;
	}
}