@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@100;400;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;700&display=swap');


/* COLORS */
:root {
  --darkgray: rgb(30,30,30);
  --lightgray: rgb(242,242,242);
  --xlightgray: rgb(247,249,253);
  --blue: rgb(108,147,235);
  --darkblue: rgb(73,111,218);
  --darkestblue: rgb(36,72,161);
  --yellow: rgb(247,182,7);
  --darkyellow: rgb(246,132,7);
  --metal: rgb(227,232,241);
  --darkmetal: rgb(169,182,202);
  --darkestmetal: rgb(82,95,102);
}
/* TEXT COLORS */
.darkgray { color: var(--darkgray); }
.lightgray { color: var(--lightgray); }
.xlightgray { color: var(--xlightgray); }
.white { color: white; }
.blue { color: var(--blue); }
.darkblue { color: var(--darkblue); }
.yellow { color: var(--yellow); }
.darkyellow { color: var(--darkyellow); }
.metal { color: var(--metal); }
.darkmetal { color: var(--darkmetal); }
.darkestmetal { color: var(--darkestmetal); }
/* BACKGROUNDS */
.darkgray-bg { background: var(--darkgray); }
.lightgray-bg { background: var(--lightgray); }
.xlightgray-bg { background: var(--xlightgray); }
.white-bg { background: white; }
.blue-bg { background: var(--blue); }
.darkblue-bg { background: var(--darkblue); }
.yellow-bg { background: var(--yellow); }
.darkyellow-bg { background: var(--darkyellow); }
.metal-bg { background: var(--metal); }
.darkmetal-bg { background: var(--darkmetal); }
.darkestmetal-bg { background: var(--darkestmetal); }
.yellowgradient-bg {
  background: var(--yellow);
  background: linear-gradient(90deg, var(--yellow) 0%, var(--darkyellow) 100%);
}
.bluegradient-bg {
  background: var(--blue);
  background: linear-gradient(90deg, var(--blue) 0%, var(--darkblue) 100%);
}
.bluegradientsecond-bg {
  background: var(--darkblue);
  background: linear-gradient(90deg, var(--darkblue) 0%, var(--darkestblue) 100%);
}
.bluegradientfull-bg {
  background: var(--blue);
  background: linear-gradient(90deg, var(--blue) 0%, var(--darkestblue) 100%);
}



/* HTML & BODY */
html, body {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--xlightgray);
}


/* TEXT & TYPOGRAPHY */
a, p, h1, h2, h3, h4, h5, input, select, button, textarea, li, label, th, td {
  margin: 0;
  padding: 0;
  text-decoration: none;
  color: rgb(30,30,30);
  font-family: 'Catamaran', sans-serif;
}
h1, h2, h3, h4, h5 {
  font-weight: 800;
}
h1 {
  font-size: 30px;
  line-height: 40px;
}
h2 {
  font-size: 27px;
  line-height: 32px;
}
h3 {
  font-size: 24px;
  line-height: 29px;
}
h4 {
  font-size: 20px;
  line-height: 24px;
}
h5 {
  font-size: 18px;
  line-height: 22px;
}
p, a {
  font-weight: 400;
  font-size: 15px;
  line-height: 20px;
}
.contentcontainer a {
  text-decoration: underline;
}
b {
  font-weight: 800;
}
b.semi, b.semi * {
  font-weight: 400 !important;
}
.rightToLeftb.semi, .rightToLeftb.semi * {
  font-weight: 500 !important;
}
.bigger {
  font-size: 19px;
  line-height: 27px;
}
.tiny {
  font-size: 11px;
  line-height: 14px;
}
.u {
  text-transform: uppercase;
}
.rightToLeft {
  text-align: right;
}
.rightToLeft, .rightToLeft * {
  direction: rtl !important;
}
.rightToLeft h1, .rightToLeft h2, .rightToLeft h3, .rightToLeft h4, .rightToLeft h5 {
  font-family: 'El Messiri', sans-serif !important;
}
.rightToLeft .contentcontainer ol, .rightToLeft .contentcontainer ul {
  margin-bottom: 0;
  margin-top: 0;
}
.rightToLeft p, .rightToLeft p *, .rightToLeft .contentcontainer ol li, .rightToLeft .contentcontainer ul li {
  font-family: 'Tajawal', sans-serif !important;
  font-size: 15px !important;
  line-height: 19px !important;
  font-weight: 400 !important;
}
.rightToLeft .fa {
  font-family: FontAwesome !important;
  font-size: 14px !important;
  line-height: 1 !important;
}
.rightToLeft p b, .rightToLeft p b *, .rightToLeft p b span {
  font-weight: 700 !important;
}
.rightToLeft table {
  width: 100%;
}




/* GLOBAL ELEMENTS */
.body {
  position: relative;
  float: left;
  width: calc(76% - 400px);
  height: auto;
  top: 0;
  left: 0;
  margin-left: 12%;
  margin-right: 12%;
  padding-left: 200px;
  padding-right: 200px;
  padding-top: 100px;
}
.overlay.black {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  display: none;
}
.overlay.black.show {
  display: block;
}
.body .mainbg {
  position: absolute;
  width: 100%;
  height: 50vh;
  min-height: 450px;
  top: 0;
  left: 0;
  background-image: url('../img/bg/background@2x.png');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.maincontent {
  position: relative;
  float: left;
  width: calc(100% - 265px);
  height: auto;
  top: 0;
  left: 0;
}
.maincontent.admin {
  width: 100%;
}
.maincontent.contact {
  width: 60%;
}
.featured {
  position: relative;
  float: left;
  width: 250px;
  height: auto;
  top: 0;
  left: 0;
  margin-left: 15px;
  margin-bottom: 100px;
}
.featured.contact {
  width: calc(40% - 15px);
}
.rightToLeft .maincontent, .rightToLeft .featured {
  float: right;
}
.rightToLeft .featured {
  margin-left: 0;
  margin-right: 15px;
}
.featured.contact.within {
  display: none;
}
section {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  margin-bottom: 40px;
  overflow: visible;
}
.rightToLeft section {
  margin-bottom: 60px;
}
section h2 {
  font-size: 24px;
  line-height: 30px;
  margin-bottom: 17px;
  text-transform: uppercase;
}
.valigncontainer {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.valign {
  position: absolute;
  width: 100%;
  height: auto;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
@media all and (max-width: 1800px){
  .body {
    margin-left: 0;
    margin-right: 0;
    width: calc(100% - 400px);
  }
}
@media all and (max-width: 1280px){
  .body {
    padding-left: 100px;
    padding-right: 100px;
    width: calc(100% - 200px);
  }
}
@media all and (max-width: 980px){
  .body {
    padding-left: 50px;
    padding-right: 50px;
    width: calc(100% - 100px);
  }
}
@media all and (max-width: 820px){
  .maincontent, .maincontent.contact {
    width: 100%;
  }
  .featured, .featured.contact {
    width: 100%;
    margin: 0;
    /*display: none;*/
  }
  .featured.contact.within {
    display: block;
    margin-bottom: 40px;
  }
}
@media all and (max-width: 620px){
  .body {
    padding-left: 20px;
    padding-right: 20px;
    width: calc(100% - 40px);
  }
}



/* Quick reset */
button, input, textarea, select {
  border: none;
  padding: 0;
  margin: 0;
}




/* OTHER COMPONENTS */

/* NEW LINE BUTTON */
.newlinebutton {
  position: relative;
  float: left;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  margin-top: 20px;
}
.newlinebutton button {
  position: relative;
  float: right;
  width: auto;
  height: auto;
  line-height: 40px;
  top: 0;
  right: 0;
  color: white;
  font-weight: 800;
  padding-left: 30px;
  padding-right: 30px;
  border-radius: 30px;
  margin-left: 20px;
  cursor: pointer;
}
.rightToLeft .newlinebutton button {
  float: left;
  margin-left: 0;
  margin-right: 20px;
}
.newlinebutton .next, .newlinebutton .previous {
  position: relative;
  float: right;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  top: 0;
  right: 0;
  margin-left: 10px;
  text-align: center;
  background: var(--metal);
  cursor: pointer;
  transition: .2s linear all;
}
.rightToLeft.newlinebutton .next, .rightToLeft.newlinebutton .previous {
  float: left;
  margin-left: 0;
  margin-right: 10px;
}
.rightToLeft.newlinebutton .next {
  right: auto;
  left: 50px;
}
.rightToLeft.newlinebutton .previous {
  right: auto;
  left: -50px;
}
.newlinebutton .next p, .newlinebutton .previous p {
  font-size: 14px;
  line-height: 44px;
  color: var(--darkmetal);
  transition: .2s linear all;
}
.newlinebutton .next:hover, .newlinebutton .previous:hover {
  background: var(--darkmetal);
}
.newlinebutton .next:hover > p, .newlinebutton .previous:hover > p {
  color: white;
}
/* FULL LINE BUTTON */
.fulllinebutton {
  position: absolute;
  width: 100%;
  height: auto;
  bottom: 0;
  left: 0;
}
.fulllinebutton button {
  position: relative;
  float: right;
  width: 100%;
  height: auto;
  line-height: 40px;
  top: 0;
  right: 0;
  color: white;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
}
/* BIG BUTTON */
.bigbutton {
  position: relative;
  float: left;
  width: calc((100% / 3) - 4px);
  height: 60px;
  top: 0;
  left: 0;
  margin-top: 10px;
  border-radius: 4px;
  color: white;
  font-weight: 800;
  font-size: 18px;
  line-height: 22px;
  text-align: left;
  margin: 2px;
  cursor: pointer;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}
.rightToLeft.bigbutton {
  text-align: right;
}
button.bluegradientsecond-bg:hover, button.bluegradientfull-bg:hover {
  transition: .2s linear all;
  background: var(--blue);
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 100%);
}
button.yellowgradient-bg:hover {
  transition: .2s linear all;
  background: var(--yellow);
  background: linear-gradient(90deg, var(--yellow) 0%, var(--yellow) 100%);
}
@media all and (max-width: 1360px){
  .bigbutton {
    padding-left: 6px;
    padding-right: 6px;
  }
}
@media all and (max-width: 1066px){
  .bigbutton {
    width: calc(100% - 4px);
  }
}


.hide {
  display: none;
}



/* Cookie agreement message */
.cookiemsg {
  position: fixed;
  width: calc(100% - 300px);
  height: auto;
  bottom: 0;
  left: 0;
  background: white;
  padding: 150px;
  padding-top: 100px;
  padding-bottom: 100px;
  z-index: 99;
  -webkit-box-shadow: 0px 0px 17px -11px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 17px -11px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 17px -11px rgba(0,0,0,0.75);
}
.cookiemsg #gotitbutton {
  position: relative;
  float: left;
  width: auto;
  height: auto;
  line-height: 40px;
  padding-left: 40px;
  padding-right: 40px;
  cursor: pointer;
  background: var(--darkblue);
  transition: .2s linear all;
  color: white;
}
.cookiemsg #gotitbutton:hover {
  background: var(--blue);
}
@media all and (max-width: 1440px){
  .cookiemsg {
    width: calc(100% - 200px);
    padding: 100px;
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media all and (max-width: 1280px){
  .cookiemsg {
    width: calc(100% - 100px);
    padding: 50px;
    padding-top: 80px;
    padding-bottom: 80px;
  }
}