* {
	margin: 0px;
	padding: 0px;
}
body {
	background-color: white;
	font-family: 'Gotham SSm A', Arial, Helvetica, sans-serif;
	line-height: 30px;
	border: 0;
	overflow: visible;
text-decoration:none;
}




a{
	color:white;
}
#container {
	background-color: white;

	margin: auto;
	position: relative;
	width: 1366px;
}

#header {
	background-color: white;
	float: left;
	height: 104px;
	width: 1366px;
}
#logo {
	background-color: white;
	float: left;
	height: 80px;
	position: relative;
	width:300px;
margin-left: 0px;
}
#logo img {
	height: 80px;
	left: 0px;
	position: absolute;
	top: 10px;
	width: 300px;
}
#menu {
	background-color: blue;
margin-top: 50px;
	background-repeat: repeat-x;
	border-top-left-radius: px;
	border-top-right-radius: px;
	float: right;
	font-size: 0px;
	height: 20px;
	-moz-border-top-left-radius: 5px;
	-moz-border-top-right-radius: 5px;
	margin-right:50px;
	text-align: left;
	
	

}
#menu ul {
	background-color: blue;
	display: inline;
	float: left;
	list-style: none;
	margin-left: 0px;
}
#menu li {
	display: inline;
	float: left;
	list-style: none;
}
#menu a {
	background-color: #006CB8;
	font-size: 15.4px;
		color:  WHITE;
	font-weight: normal;
	padding: 13px 12px 12px 14px;
	text-decoration: none;
	text-transform: normal;
	font-weight: bold;
}
#menu a:hover {
	background-color: grey;
	color: white;
	font-weight: bold;
}
#content {
	background-color: white;
	float: center;
	height:AUTO;
	position:relative;
	width: 1366px;


}

#cont {
	background-color: white;
	float: left;
	
	position:relative;
	width: 1366px;
 


}
#contact {
	
	 
	background-color: white;
	
	margin: auto;
	position:relative;
	height: auto;
	width: auto;
font-family: 'Samim', sans-serif;
margin-left: 450px;
margin-RIGHT: 90px;

}



.contenten {
	max-width: 1366px;
	text-align: left;

	font-weight: normal;
	font-size: 14px;
}

.link_frame {
	border: 0.5px solid #0e4479;
margin-left:2px;
margin-right:5px;
	width: 1360px;
	color: black;
	margin-top:10px;
margin-bottom:10px;
float:Center;
}

.link_frame:hover {
	border: 1px solid #d4dde2;
	
	color: black;

}
.link_category  {
	border: 0px solid black;
	width: 110px;
	height:fixed;
	float: left;
	color:white;
	font-size:12px;
	padding: 0px 0px 0px 0px;
	background-color: #ff005b;
	margin-bottom: 0px;
}

.link_objective  {
	border: 0px solid black;
	width: 688px;
	height:fixed;
	float: left;
	color: black;
	font-size:12px;
	background-color: #f8f8f8;
	margin-bottom: 0px;
}

.link_imageen {
	border: 0px solid black;
	width: 210px;
	float: left;
	padding: 0px 0px 0px 0px;
	background-color: none;
	margin-bottom: 0px;
}
.link_imagespecies {
	border: 0px solid black;
	width: 400px;
	float: left;
	padding: 0px 0px 0px 0px;
	background-color: none;
	margin-bottom: 0px;
}

.link_image {
	border: 0px solid black;
	width: 210px;
	float: right;
	padding: px 0px px 0px;
	background-color: white;
	margin-bottom: 0px;
}
.link_title {
	border: 0px solid black;
	width: 183px;
	float: right;
	padding: 10px 0px 0px 0px;
	background-color: white;
	margin-bottom: 0px;
	font-family: B Yekan; 
	text-align: right;
	direction:rtl;
}
.link_titleen {
	top:5px;
	font-weight: bold;
font-size:16px;
	width: 185px;
	float: left;
	direction: ltr;
	vertical-align: top;
	font-size:16px;
}
.link_titlepsen {
	padding: 0px 10px 0px 10px;
	font-weight: bold;

	width: 150px;
	float: left;
	direction: ltr;
	vertical-align: top;
	font-size:16px;
}

.link_description {
	padding: 0px 10px 0px 10px;
	font-weight: normal;
	float: right;
	text-align:right;
	width: 450px;
	font-size: 10pt;
	vertical-align: top;
	font-family: B Yekan;
direction: rtl;
}

.link_descriptione {
	padding: 0px 10px 0px 10px;
	font-weight: normal;
	float: left;
	width: 250px;
	font-size: 10pt;
	vertical-align: top;
	font-family: B Yekan;
direction: rtl;
font-size:16px;
}
.link_descriptionen {
	padding: 0px 10px 0px 40px;
	font-weight: normal;
	direction: ltr;
	float: left;
	width: 260px;
	font-size: 10pt;
	vertical-align: top;
font-size:15px;


}
.link_descripten {
	padding: 0px 20px 0px 20px;
	font-weight: normal;
	float: left;
	width: 600px;
	font-size: 18pt;
	vertical-align: top;
font-size:15px;
direction: ltr;
}
.link_descriptpsen {
	padding: 0px 10px 0px 10px;
	font-weight: normal;
	float: left;
	background-color:#7ab942;
	width: 620px;
	font-size: 12pt;
	vertical-align: top;
font-size:18px;
direction: ltr;
}
.link_text {
	padding: 0px 10px 0px 10px;
	font-weight: normal;
	float: right;
	width: 400px;
	vertical-align: top;
	
direction: rtl;
}

























#Product {
	opacity: 0.8;
	 
	background-color: grey;
	background-image: url("../images/Product Overview.jpg");
	margin: auto;
	position:relative;
	height: AUTO;
	width: 1366px;
font-family: 'Samim', sans-serif;

}

#portfolio {
	
	 
	background-color: #0B477E;
	
	margin: auto;
	position:relative;
	height: auto;
	width: 1366px;
font-family: 'Samim', sans-serif;

}
#Values {
	opacity: 0.7;
	 
	
	background-image: url("../images/Values.jpg");
	margin: auto;
	position:relative;
	height: 300px;
	width: 1366px;
font-family: 'Samim', sans-serif;

}
#news {
	background-color: #F8F8F8;
	float: center;
	height:AUTO;
	position:relative;
	width: 1366px;
height:auto;
margin-left: 0px;
margin-right: 0px;


}
#lates {

	background-color: #4C4C4C;
	float: center;
	height:AUTO;
	position:relative;
	width: auto;
height:auto;
margin-left: 40px;
margin-right: 30px;


}

#headline {
	
	background-color: white;
	float: left;
	height:AUTO;
	position:relative;
	width:1366px;
 
}
#Supplier {
	
	opacity: 0.7;
	background-color: black;
	margin: auto;
	position:relative;
	height:  auto;
	width: 1366px;


}

#Suppl {
	
	opacity: 0.7;
	background-image: url("../images/Supplier.jpg");
	background-color: black;
	margin: auto;
	position:relative;
	height: 200px;
	width: 1366px;
font-family: 'lato';


}
#footer {
opacity: 0.7;
	background-color: Black;
	float: center;
	height:280px;
	position:relative;
	width: 1366px;


}
#subsidiaries {
	opacity: 0.7;
	background-color: black;
	float: center;
	height:280px;
	position:relative;
	width: 1366px;


}
#search {
		opacity: 1;
	background-color: #F8F8F8;
	border:5px;
	border-radius:10px;
	height: 35px;
	-moz-border-radius: 5px;
	position: absolute;
	right: -15px;
	top: 22px;
	vertical-align: middle;
	width: 250px;
	margin-right:250px;
}
#search p {
	color: black;
	float: left;
	font-size: 16px;
font-weight: normal;

	padding: 3px 0px;
	margin-left: 15px;
}
#search input {
	
	background-color: #F8F8F8;
	border: 1px;
	border-radius: 3px;
	color: white;
	font-size: 14px;
	height: 14px;
	margin-top: 3px;
	margin-left: 10px;
	-moz-border-radius: 5px;
	width: 150px;
	height: 28px;
	float: left;
}
#search img {
	cursor: hand;
	width: 22px;
	height: 22px;
	float: right;
	margin-right: 10px;
	margin-top: 6px;
}
.c1 {
	color: #ffefe7;
}
.c2 {
	color: #feb5a4;
}
.c3 {
	color: #b03240;
}
.c4 {
	color: #531f21;
}
.rag{
	color:red;
	font-size:14px;
	font-weight:bold;
}
.blue{
	
}
#mySlides{
	position:relative;
	margin:0px 0px;
	z-index:1;
}
#mySlides img{
	position:auto;
	left:0px;
	top:0px;
	
}
#prev{
	position:auto;
	left:50px;
	top:235px;
	z-index:2;
}
#next{
	position:auto;
	right:50px;
	top:235px;
	z-index:2;
}
#shadow{
	position:auto;
	left:0px;
	top:0px;
}
.click{
	background-color: grey;
	color:white;
	font-weight:bolder;
}

hr { 
    
color: white;
display: block;
    margin-top: 0em;
    margin-bottom: 0em;
  
    border-style: inset;
    border-width: 0.1px;
margin-right: 30px;
margin-left: 30px;
} 


<style 2>
p {
  line-height: 2.0;
}
</style>
}
.image { 
   position: relative; 
   width: auto; /* for IE 6 */
}

hr2 { 
    
color: white;
display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 4px;

} 
<style 2>
p {
  line-height: 2.0;
}
</style>
}
.image { 
   position: relative; 
   width: auto; /* for IE 6 */
}

h2 { 
background-color: none;   
font-size:18px;
color:WHITE;	
position: absolute; 
   top: 200px; 
   left: 0; 

   width: 950px;
height: 116px;
}
h2 span.spacer {
   padding:10px;
}
svg{
  width:70%;
}
.left {
   float: left;
   padding: 0 20px 20px 0;
}
.button:hover{
  opacity: 0;
}
 a.linkopacity img {
   	filter:alpha(opacity=50);
   	-moz-opacity: 0.4;
  	 opacity: 0.5;
   	-khtml-opacity: 0.4;}
     a.linkopacity:hover img {
   	filter:alpha(opacity=100);   
   	-moz-opacity: 1.0;   
  	 opacity: 1.0;
  	 -khtml-opacity: 1.0; }






 /* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.img__wrap {
  position: absolute;
  height: absolute;
  width: absolute;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}




#upleft { 
   width:200px; 
   height: 300px; 
   background:white; float:left; 
}

#upright { 
   width:200px; 
   height: 300px; 
   background:white;
   float:right;

}
#below { 
   height:200px; 
   width:550px; 
   background:white;
   float:left;
}
#up { 
   width:550px; 
   height:100px; 
   background:white;
   float:left;

}




rad;











.my-container {
    position: relative;
    background: #5C97FF;
    overflow: hidden;
}
/* You could use :after - it doesn't really matter */
.my-container:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.2;
    background-image: url('http://placekitten.com/1500/1000'), url('http://placekitten.com/1500/1000');
    background-repeat: no-repeat;
    background-position: 50%;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

.container {
  position: relative; 
  max-width: auto; /* Maximum width */
  margin: 0 auto; /* Center it */
}

.container .content {
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  width: 100%; /* Full width */
  padding: 20px; /* Some padding */
}



 /* Container holding the image and the text */
.container {
    position:relative;
}

/* Bottom right text */
.text-block {
    position: absolute;
    bottom: 180px;
    right: 685px;
	float: right;
	opacity: 0.6;
    background-color: black;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
} 




<style>
a:link {
    color: green;
    background-color: transparent;
    text-decoration: none;
}

a:visited {
    color: pink;
    background-color: transparent;
    text-decoration: none;
}

a:hover {
    color: red;
    background-color: transparent;
    text-decoration: underline;
}

a:active {
    color: yellow;
    background-color: transparent;
    text-decoration: underline;
}
</style> 




p.padding {
    padding-left: 2cm;
}
p.padding2 {
    padding-left: 50%;
}




#hp {
float: left;
margin: 0 0 0 0px;
}


 /* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: black;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  <a href="mailto:info@arya-international.com">SUBMIT EMAIL TO: info@safa-international.com</a>
}

/* When moving the mouse over the submit button, add a darker green color */

input[type=submit]:hover {
  background-color: grey;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: NONE;
  padding: 0px;
} 

<?php
// define variables and set to empty values
$nameErr = $emailErr = $genderErr = $websiteErr = "";
$name = $email = $gender = $comment = $website = "";

if ($_SERVER["REQUEST_METHOD"] == "POST") {
  if (empty($_POST["name"])) {
    $nameErr = "Name is required";
  } else {
    $name = test_input($_POST["name"]);
    // check if name only contains letters and whitespace
    if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
      $nameErr = "Only letters and white space allowed";
    }
  }
  
  if (empty($_POST["email"])) {
    $emailErr = "Email is required";
  } else {
    $email = test_input($_POST["email"]);
    // check if e-mail address is well-formed
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
      $emailErr = "Invalid email format";
    }
  }
    
  if (empty($_POST["website"])) {
    $website = "";
  } else {
    $website = test_input($_POST["website"]);
    // check if URL address syntax is valid
    if (!preg_match("/\b(?:(?:https?|ftp):\/\/|www\.)[-a-z0-9+&@#\/%?=~_|!:,.;]*[-a-z0-9+&@#\/%=~_|]/i",$website)) {
      $websiteErr = "Invalid URL";
    }    
  }

  if (empty($_POST["comment"])) {
    $comment = "";
  } else {
    $comment = test_input($_POST["comment"]);
  }

  if (empty($_POST["gender"])) {
    $genderErr = "Gender is required";
  } else {
    $gender = test_input($_POST["gender"]);
  }
}

function test_input($data) {
  $data = trim($data);
  $data = stripslashes($data);
  $data = htmlspecialchars($data);
  return $data;
}
?>

<h2>PHP Form Validation Example</h2>
<p><span class="error">* required field</span></p>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">  
  Name: <input type="text" name="name">
  <span class="error">* <?php echo $nameErr;?></span>
  <br><br>
  E-mail: <input type="text" name="email">
  <span class="error">* <?php echo $emailErr;?></span>
  <br><br>
  Website: <input type="text" name="website">
  <span class="error"><?php echo $websiteErr;?></span>
  <br><br>
  Comment: <textarea name="comment" rows="5" cols="40"></textarea>
  <br><br>
  Gender:
  <input type="radio" name="gender" value="female">Female
  <input type="radio" name="gender" value="male">Male
  <input type="radio" name="gender" value="other">Other
  <span class="error">* <?php echo $genderErr;?></span>
  <br><br>
  <input type="submit" name="submit" value="Submit">  
</form>

<?php
echo "<h2>Your Input:</h2>";
echo $name;
echo "<br>";
echo $email;
echo "<br>";
echo $website;
echo "<br>";
echo $comment;
echo "<br>";
echo $gender;
?>
}
img {
  float: none;

}











* {box-sizing: border-box}

/* Container needed to position the . Adjust the width as needed */
.container {
  position: relative;
  width: 100%;
  max-width: 341.5px;
}

/* Make the image to responsive */
.image {
  display: block;
  width: 100%;
  height: 100%;
}

/* The overlay effect - lays on top of the container and over the image */
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5); /* Black see-through */
  color: #f1f1f1;
  width: 100%;
   height: 80%;
  transition: .5s ease;
  opacity:0;
  color: white;
  font-size: 18px;
  padding: 20px;
  line-height:20px;
  text-align: left;
  font-family: B Yekan;
  
}

/* When you mouse over the container, fade in the overlay title */
.container:hover .overlay {
  opacity: 1;
}





























.container {
  position: relative;
  width: 100%;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  width: AUTO;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: none;
  border: 1px solid black;
  color: black;
  font-size: 14px;
  padding: 5px 30px;
}