* {
  margin: 0;
  padding: 0;
  font-family: 'Harmattan', sans-serif;
}

body {
  width: 100%;
  height: auto;
  overflow-x: hidden;
  background-color: #e5e5e5;
}

.wrapper {
  width: 1000px;
  margin: 0 auto;
}

.clear { clear: both; }

header {
  background-color: #ffffff;
  padding: 5px 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  -webkit-box-shadow: 0 3px 5px 0 #919191;
  box-shadow: 0 3px 5px 0 #919191;
}

header a#alahm {
  float: left;
  width: 200px;
  height: 70px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('../images/Al-Ahm-Group.png');
}

header nav {
  float: right;
  text-align: right;
}

header nav a#english {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  background-image: url('../images/usa.png');
  margin: 0 2px;
}

header nav a#arabia {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  background-image: url('../images/saudi_arabia.png');
  margin: 0 2px;
}

header nav a {
  margin-left: 20px;
  font-size: 20px;
  text-decoration: none;
  color: #018792;
  transition: 0.2s linear all;
}

header nav a:hover, header nav a.active { color: #000000; }

section#banner {
  width: 100%;
  height: 400px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

section#banner.home-banner {
  height: 550px;
  background-image: url('../images/home-banner.jpg');
}

section#banner.about-banner { background-image: url('../images/about-banner.jpg'); }

section#banner.contact-banner iframe{
  width: 100%;
  height: 100%;
}

section#banner.department-banner { background-image: url('../images/department-banner.jpg'); }

section.contentBg {
  text-align: center;
  background-color: #ffffff;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  margin: 20px 0;
  padding: 20px;
  -webkit-box-shadow: 0 3px 5px 0 #919191;
  box-shadow: 0 3px 5px 0 #919191;
}

section.contentBg h2 {
  font-size: 28px;
  margin-bottom: 10px;
  color: #018792;
}

section.contentBg h3 {
  text-align: right;
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 5px;
}

section.contentBg p {
  text-align: justify;
  direction: rtl;
  font-size: 20px;
  margin: 10px 0;
  line-height: 20px;
}

section.contentBg p#msg { color: #ffffff; }

section.contentBg aside.imgTab {
  display: inline-block;
  vertical-align: top;
  width: 190px;
  margin: 20px 10px;
}

section.contentBg ul li {
  text-align: left;
  margin-left: 20px;
  font-size: 20px;
}

section.contentBg aside.imgTab img { width: 100%; }

section.contentBg aside.twoSec {
  display: inline-block;
  vertical-align: top;
  width: 400px;
  margin: 0 20px;
}

section.contentBg aside.tabSec {
  width: 280px;
  display: inline-block;
  vertical-align: top;
  margin: 10px;
  text-align: left;
}

section.contentBg aside.tabSec img { width: 100%; }

section.contentBg aside.tabSec a {
  text-decoration: none;
  color: #018792;
  font-size: 18px;
}

section.contentBg aside.tabSec a span {
  display: inline-block;
  vertical-align: top;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-image: url('../images/arrow.svg');
}

input[type=text], input[type=tel], input[type=email] {
  width: 94%;
  direction: rtl;
  font-size: 20px;
  padding: 1px 3px;
  margin: 5px 0;
  line-height: 15px;
}

textarea {
  direction: rtl;
  padding: 1px 3px;
  width: 94%;
  font-size: 20px;
  margin: 5px 0;
}

button[type=submit] {
  float: right;
  line-height: 0;
  font-size: 20px;
  margin-top: 10px;
  padding: 10px 10px;
  cursor: pointer;
}

footer {
  padding: 20px 0;
  font-size: 15px;
}

footer nav {
  float: right;
}

footer nav a {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

footer nav a#facebook { background-image: url('../images/facebook.svg'); }

footer nav a#twitter { background-image: url('../images/twitter.svg'); }

footer nav a#googlePlus { background-image: url('../images/google-plus.svg'); }

@media screen
  and (min-width: 700px)
  and (max-width: 1000px) {
    .wrapper { width: 650px; }
    section.contentBg aside.twoSec { width: 100%; margin: 20px 0; }
}

@media screen
  and (min-width: 480px)
  and (max-width: 700px) {
    .wrapper { width: 450px; }
    header a#alahm { width: 120px; height: 40px; margin-top: 10px; }
    header nav a { margin-left: 10px; }
    section.contentBg aside.twoSec { width: 100%; margin: 20px 0; }
}

@media screen
  and (min-width: 320px)
  and (max-width: 480px) {
    .wrapper { width: 99%; }
    header a#alahm { width: 120px; height: 40px; }

    header nav { width: 100%; }
    header nav a { margin-left: 10px; font-size: 18px; }
    section.contentBg aside.twoSec { width: 100%; margin: 20px 0; }
    section.contentBg aside.tabSec { width: 95%; }
}