/*
@font-face {
  font-family: 'Tajawal';
  src: url("../fonts/Tajawal/Tajawal-Regular.ttf");
  src: local("☺"), url("../fonts/Tajawal/Tajawal-Regular.woff") format("woff"), url("../fonts/Tajawal/Tajawal-Regular.ttf") format("truetype"), url("../fonts/Tajawal/Tajawal-Regular.svg") format("svg");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Tajawal';
  src: url("../fonts/Tajawal/Tajawal-Bold.ttf");
  src: local("☺"), url("../fonts/Tajawal/Tajawal-Bold.woff") format("woff"), url("../fonts/Tajawal/Tajawal-Bold.ttf") format("truetype"), url("../fonts/Tajawal/Tajawal-Bold.svg") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Tajawal';
  src: url("../fonts/Tajawal/Tajawal-Heavy.ttf");
  src: local("☺"), url("../fonts/Tajawal/Tajawal-Heavy.woff") format("woff"), url("../fonts/Tajawal/Tajawal-Heavy.ttf") format("truetype"), url("../fonts/Tajawal/Tajawal-Heavy.svg") format("svg");
  font-weight: 800;
  font-style: normal;
}

body,  p, b,a,
h1,h2,h3,h4,h5,h6{
  font-family: 'Tajawal', sans-serif !important;
}
*/

.bg-video{
  background-color: rgba(0,0,0,0.5);
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
}

/**********************/
.color-1 , a:hover{
  color: #D03517;
}
.color-2 , .post-title{
  color: #3B9BC0;
}
.color-3{
  color: #F2B800;
}

.bg-color-1{
  background-color: #D03517;
  color: #FFF;
}
.bg-color-2 {
  background-color: #3B9BC0;
  color: #FFF;
}
.bg-color-3{
  background-color: #F2B800;
}
.bg-color-1:hover{
  color: #FFF;
  background-color: rgba(255,255,255,0.2);
  border: 2px solid #FFF;

}
.bg-color-2:hover{
  color: #FFF;
  background-color: rgba(255,255,255,0.2);
  border: 2px solid #FFF;

}
.bg-color-3:hover{
  color: #FFF;
  background-color: rgba(255,255,255,0.2);
  border: 2px solid #FFF;

}

a{
  text-decoration: none;
}

.en{
  direction: ltr;

}
/*----------------*/
.main-page {
    min-height:  100vh;
    margin-top: 10vh; /* EDIT */
}
.mt-100vh{
  margin-top: 100vh;
}
.mt-50vh{
  margin-top: 50vh;
}
/*----------------*/
.post-header .inner-content{
  height: 50vh;
}
.post-header h1 , .post-header h2{
  text-shadow: 2px 2px 5px #000;
}

.page-header .inner-content .inner h1 {
  font-size: 6vw;
  color: #fff;
  display: block;
  font-weight: 800;
  margin-bottom: 20px;
}
.post-header .inner-content{
  z-index: 10;
}
/*----------------*/
.pattern-icon{
  position: absolute;
  top: 10%;
  right: 5%;
  z-index: 2;
  opacity: 0.5;
}

.pattern-4{
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0.2;
  background: url("../img/pattern-3.svg") no-repeat;
  width: 100%;
  height: 100%;
}
.pattern-5{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.03;
  background: url("../img/pattern-2.svg") no-repeat;
  width: 100%;
  height: 100%;
}


.pattern-header::before {
  content: "";
  width: 60%;
  height: 20px;
  background: #3b9bc0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.pattern-header::after {
  content: "";
  width: 60%;
  height: 40px;
  background: #d03517;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}

/*----------------*/
.gallery{
  background-color: #F2B800;
}
.gallery h3 {
  text-shadow: 2px 2px 5px #000;
}

.blog{
  margin-top: 4pc;
  padding-bottom: 4pc;
}

.sub-footer {
  margin-bottom: 4pc;
}
/*----------------*/
.accordionMenu{
  width: 100%;
}
.accordionMenu .card {
  margin-bottom: 2pc;
}
.accordionMenu .card-header {
  background-color: transparent;
  margin: 20px 30px;
  color: #ce3517;
}
.accordionMenu .card-header h2{
  color: #F2B800;
}
.accordionMenu .card-header .collapsed{
  color: #3B9BC0;
}
.accordionMenu .show{
  min-height: 20pc;
  width: 100%;
}

.accordionMenu .collapse .card-body {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
}


.accordionMenu .collapse .card-body figcaption {
  width: 100%;
  position: relative;
}
.accordionMenu .collapse .card-body figcaption span {
  width: 3px;
  height: 20px;
  background: #D03517;
  position: absolute;
  left: 10px;
  top: -20%;
}
.accordionMenu .collapse .card-body figure {
  min-height: 300px;
}
.accordionMenu .collapse .card-body figure h3 {
  margin: 0;
  font-size: 1.3rem;
  display: block;
  padding-top: 0.7pc;
}
.accordionMenu .collapse .card-body figure h4 {
  font-size: 1.2rem;
  display: block;
}

.accordionMenu .collapse .card-body figure img{
  width: 100%;
}
/*----------------*/
@media only screen and (min-width: 767px), only screen and (min-device-width: 767px) {
  .navigation-menu .inner ul li a{
    font-size: 2.5vw;
  }
  .accordionMenu .collapse .card-body figure {
    min-height: 0;
  }
}

/*----------------*/
.works .menu-grid  figure figcaption span {
    width: 3px;
    height: 100px;
    background: #d03517;
    position: absolute;
    right: 10px;
    top: -70px;
}


@media (max-width: 767px) {
  .page-header .inner-content .inner h1 {
    font-size: xxx-large;
  }
  .works .works-title h2{
    font-size: xxx-large;
  }
  .works {
    padding: 30px 10px;
  }
}

@media (max-width: 450px) {
  .menu-grid figure > a >  img {
    height: 250px;
  }
}