body {
	margin:0;
	padding:0
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'ReclineRegular';
}
section {
  height: auto !important;
  min-height: auto !important;
}
.gallery-section {
  padding-bottom: 30px;
}
/*--------------------------------------------------------------
# Gallery - Banner Section 
--------------------------------------------------------------*/
.careers-banner img {
  width: 100%;
  /* object-fit: cover; */
  position: relative;
  height: 100vh;
}
.careers-banner .careers-content {
  position: absolute;
  top: 45%;
  color: #fff;
  width: 100%;
  text-align: center;
}
.careers-banner h1, .careers-banner h2, .careers-banner h3, .careers-banner h4, .careers-banner h5, .careers-banner h6 {
  text-transform: uppercase;
  font-size: 60px;
  margin-bottom: 0;
}
@media(max-width:767px) {
.careers-banner .careers-content {
    top:22%;
 }
 .careers-banner img {
     position: relative;
     height:45vh;
 }
.careers-banner h1,
.careers-banner h2,
.careers-banner h3,
.careers-banner h4,
.careers-banner h5,
.careers-banner h6 {
  font-size: 30px;
}
}  
/*--------------------------------------------------------------
# Gallery - Gallery Tab Section
--------------------------------------------------------------*/
.gallery-section .nav-pills .slider {
  display: inline-block;
  width:30px;
  height:5px;
  border-radius:3px;
  background-color:#F53838;
  position:absolute;
  z-index:9;
  bottom: -3px;
  transition: all .4s linear;
}
.gallery-section .gallery {
  padding: 0;
  margin:40px 0 40px 0;
}
.gallery-section .nav-pills {
  position: relative;
  border-bottom: 1.99519px solid #333;
  padding:20px 0px 0px;
  width:96%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  font-weight: 600;
}
.gallery-section .nav-pills.active {
  background-color:transparent !important;
}
.gallery-section .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: transparent !important;
  color: #F53838 !important;
  font-weight: 600;
}
.gallery-section .nav-pills .active-line {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: #000; 
  transition: left 0.3s ease, width 0.3s ease;
}
.gallery-section .nav-pills button:hover {
  color:#F53838 !important;
}
.gallery-section .nav-pills button {
  text-transform: uppercase;
  font-family: 'DINNextArabicRegular';
  color: #333;
  font-size: 20px;
  margin: 0 20px;
}
.gallery-section .nav-pills button .en-content {
  letter-spacing:5px;
}
.gallery-section .gallery-image {
  display: flex;
  width: 100%;
  padding: 0% 0%;
  box-sizing: border-box;
  height: 50vh;
}
.gallery-section .image-box {
  position: relative;
  flex: 1;
  overflow: hidden;
  transition: .5s;
  margin: 0 2%;
}
.gallery-section .image-box > img {
  width: 200%;
  height: calc(100% - 5vh);
  object-fit: cover; 
  transition: .5s;
}
.gallery-section .gallery-img-outer .play-icon{
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  height: auto;
  cursor: pointer;
}
#popup-video{
  width: 100%;
  height: 100%;
}
#popup-play-icon{
  width: 20%;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: all .3s linear;
}
.gallery-section .image-box:hover { flex: 1 1 50%; }
.gallery-section .image-box:hover > img {
  width: 100%;
  height: 100%;
}
.gallery-section .gallery-img-outer:hover > .play-icon{
  /* width: auto;
  height: auto; */
}
#gallerypopup .modal-header {
  border: none;
}
#gallerypopup .btn-close:focus {
  box-shadow: none;
}
#gallerypopup .modal-content .btn-close {
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  opacity: 1;
  right: 8px;
  font-size: 11px;
  padding: 7px;
  top: 26px;
}
#gallerypopup .modal-dialog {
  max-width: 70% !important;
  margin: 1.75rem auto;
}
#gallerypopup .modal-body {
  width: 90%;
  margin: auto;
}
.gallery-section .gallery-image img:nth-child(n+2) {
  display: none;
}
.gallery-section .more, .gallery-section .less {
  background-color: #000;
  clear: both;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 14px;
  margin-top: 6px;
  padding: 6px 0;
  text-align: center;
  text-transform: uppercase;
  width: 320px;
  margin: 0 auto 40px;
}
.gallery-section .load-more-button button, .gallery-section .load-less-button button {
  margin:0px auto 30px;
  color: #fff;
  padding:0px 00px;
  display: flex;
  border-radius: 10px;
  border:none;
}
.gallery-section .fadein-up {
  opacity: 0;
  transform: translateY(20px);
  animation-name: fadein-up;
  animation-duration:0.6s;
  animation-delay: 0s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}
.gallery-section .load-more-button button, .gallery-section .load-less-button button {
  position:relative;
}
.gallery-section .load-more-button span, .gallery-section .load-less-button span {
  position: absolute;
  top: 0;
  color: #fff;
  font-size: 18px;
  text-align: center;
  bottom: 0;
  width: 100%;
  display: grid;
  align-items: center;
  font-family: "DINNextArabicRegular";
  text-transform: uppercase;
}
.gallery-section .load-more-button span.en-content, .gallery-section .load-less-button span.en-content {
  letter-spacing: 3px;
}
.gallery-section .load-more-button,.gallery-section .load-less-button {
  display:none;
  margin-top: 30px;
}
@keyframes fadein-up {
0% {
  opacity: 0;
  transform: translateY(50px);
}
100% {
  opacity: 1;
  transform: translateY(0);
}
}
@media(max-width:767px) {
.gallery-section .nav-pills {
  width: 100%;
 padding: 10px 0px 0px;
}
.gallery-section .gallery-image {
  height:auto !important;
}
.gallery-section .nav-pills button {
  font-size: 20px;
  margin: 0 0px !important;
  letter-spacing:0;
}
.gallery-section .nav-pills button {
  font-size: 15px !important;
  margin: 0 0px !important;
  padding: 0 10px 5px;
}
.gallery-section .gallery {
  padding: 0;
  margin: 15px 0 0 0;
}
.gallery-section .gallery-image {
  padding: 2% 0% !important;
}
}
@media (min-width:768px) and (max-width:1024px) {
.careers-banner img {
  position: relative;
  height: 60vh;
  }
.careers-banner .careers-content {
  top: 27%;
  color: #fff;
  width: 100%;
  text-align: center;
}
.gallery-section .nav-pills button {
  letter-spacing: 2px;
  font-size: 20px;
  margin: 0 5px;
}
.gallery-section .gallery-image {
  height: auto;
  padding: 2% 0%;
}
.gallery-section .gallery {
  padding:0;
}
.gallery-section .load-more-button button, .gallery-section .load-less-button button {
  position: relative;
}
.gallery-section .load-more-button span, .gallery-section .load-less-button span {
  position: absolute;
  top: 15px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  left: 2%;
  width: 100%;
}
.gallery-section .load-more-button span.en-content, .gallery-section .load-less-button span.en-content {
  letter-spacing: 3px;
}
}
  /* @media (min-width:992px) {
  .gallery-section .load-more-button,.gallery-section .load-less-button {
    display:none !important;
}
} */
/*--------------------------------------------------------------
# Gallery - Gallery Tab hover Section
--------------------------------------------------------------*/
.gallery-img-div{
  display: flex;
  width: 100%;
}
.gallery-section .container{
  padding: 0 !important;
}
.gallery-section .tab-content{
  padding: 0 20px !important;
}
.gallery-img-outer{
  position: relative;
  overflow: hidden;
  width: 46%;
  height: 300px;
  margin: 2% 2% 1% 2%;
  transition: all .5s linear;
  display: none;
}
.gallery-img-outer img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  cursor: pointer;
}
.gallery-img-outer .inside-div{
  position: absolute;
  top: 0;
  left: 0;
  /* width: 80vw;
  height: 300px; */
  transition: all 0.5s linear;
}
.gallery-img-outer:nth-child(even) .inside-div{
  left: unset;
  right: 0;
}
.gallery-img-outer:nth-child(even) .inside-div video{
  float: right;
}
.first-gallery-img{
  position: relative;
  overflow: hidden;
  width: 46%;
  height: 300px;
  margin: 2%;
  transition: all .5s linear;
}
.second-gallery-img{
  position: relative;
  overflow: hidden;
  width: 46%;
  height: 300px;
  margin: 2%;
  transition: all .5s linear;
}
.first-gallery-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.first-gallery-img .inside-div{
  position: absolute;
  top: 0;
  left: 0;
  width: 80vw;
  height: 300px;
  transition: all 0.5s linear;
}
.second-gallery-img .inside-div{
  position: absolute;
  top: 0;
  right: 0;
  width: 80vw;
  height: 300px;
  transition: all 0.5s linear;
}
.second-gallery-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
/* .gallery-div > div:nth-child(1):hover{
  width: 73.6%;
}
.gallery-div > div:nth-child(1):hover + .gallery-div > div:nth-child(2){
  width: 18.4%;
} */
.hover-width-high{
  width: 64.4%;
}
.hover-width-low{
  width: 27.6%;
}
.hover-normal-width{
  width: 46%;
}
/* .gallery-div > div:nth-child(odd):hover .gallery-div > div:nth-child(n){
  width: 73.6%;
}
.gallery-div > div:nth-child(odd):hover .gallery-div > div:nth-child(n+1){
  width: 18.4%;
}
.gallery-div > div:nth-child(even):hover .gallery-div > div:nth-child(n){
  width: 73.6%;
}
.gallery-div > div:nth-child(even):hover .gallery-div > div:nth-child(n-1){
  width: 18.4%;
} */
/* .first-gallery-img:hover{
  width: 73.6%;
}
.first-gallery-img:hover + .second-gallery-img{
  width: 18.4%;
}
.second-gallery-img:hover{
  width: 80%;
}
.second-gallery-img:hover + .first-gallery-img{
  width: 20% !important;
} */
#gallerypopup .modal-content {
  border: none !important;
}
.modal.fade .modal-dialog.modal-dialog-zoom {-webkit-transform: translate(0,0)scale(.5);transform: translate(0,0)scale(.5);}
.modal.show .modal-dialog.modal-dialog-zoom {-webkit-transform: translate(0,0)scale(1);transform: translate(0,0)scale(1);}
@media(max-width:767px){
  .gallery-img-div{
    display: block;
    width: 100%;
  }
  .gallery-img-outer{
    width: 100%;
    margin: 4% 0;
  }
  .gallery-img-outer .inside-div{
    /* width: 100vw; */
    right: 0;
  }
  .gallery-img-outer:nth-child(even) .inside-div {
    left: 0;
  }
  #gallerypopup .modal-dialog {
    max-width: 99% !important
  }
  .first-gallery-img{
    width: 100%;
    height: 200px;
    margin: 25px 0;
  }
  .second-gallery-img{
    width: 100%;
    height: 200px;
    margin: 25px 0;
  }
  .first-gallery-img .inside-div{
    width: 100vw;
    height: 200px;
  }
  .second-gallery-img .inside-div{
    width: 100vw;
    height: 200px;
  }
}

@media(max-width:450px){
  .gallery-section .nav-pills{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: space-between;
  }
}