@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:300,400,500,700');

/* background animation */

.card-body{

    /* min-height: 1px; */
    padding: 1.25rem;
    /*height: 233px;*/
}

.form-input:focus , .form-input:active {
      outline-color: #bf0c18;
}


.grid-wrapper > div{
display: flex;
justify-content: center;
align-items: center;
}
.grid-wrapper > div > img{
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: 5px;
display: inline-block;
vertical-align: middle;

}



.grid-wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat((auto-fit,minmax(250px,1rf)));
grid-auto-rows: 200px;
grid-auto-flow: dense;
}
.grid-wrapper .tall {
grid-row: span 2;

}
.grid-wrapper .wide{
grid-column: span 2;

}


.price{
    position: relative;
    left: 39px;
    bottom: 0px;
    font-size: 1.5em;
    color: #565A5C;
    /* font-family: 'Cairo-bold'; */
    font-weight: 700;
}

.red_nogoum , .stars{
    color: #BF0C18;
    font-family: 'Cairo-bold';
    font-size: 19px;
    font-weight: 600; 

}
#brown-button{
              right:0px;margin-right: 0px;    
              border-radius: 8px 0px 0px 8px;
              padding: 4px 0px 4px 0px;
              font-family: 'cairo';
              pointer-events: none;
              width: 67px;
              font-size: 0.9em;
}

.green-button{
      border:none;
      background-color: #5EBA7D;
      margin-left: 0px;
      position:absolute;
      border-radius: 8px 0px 0px 8px;
      padding: 3px 0px 3px 0px;
      font-family: 'cairo';
      pointer-events: none;
      width: 67px;
      font-size: 0.85em;
}



.main-panel{
  background-image: url('img/abidattourlogobackground.png');
}
.stars-img{
    
    margin-top: -24px;  
    height: 35px;
}

li a p{
    font-size: 14px;
    font-weight: 650;
    color: grey;
  }

.navbar .navbar-transparent , #nav1{
  background-color: #ffffff;
}


@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu{ display: none; }
  .navbar .nav-item:hover .nav-link{     color: #66615B;
  }
  .navbar .nav-item:hover .dropdown-menu{ display: block; }
  .navbar .nav-item .dropdown-menu{ margin-top:0; }
}
html, body {
  height: 100%;
  margin: 0; 
 /* overflow: hidden;  */
  /*background-color: black;*/
  /*background-color: white;*/
}
  .parallax-window , .parallax-first{
    height: 500px!important;
    background: transparent;
    background-position: center;
    background-attachment: cover;
    padding: 0px!important;
    margin: 0px!important;
}

#prev:hover{
background-color: white;
}


@media only screen and (max-width:749px) {
  .parallax {
    background-attachment: inherit;
  }
}

.svg1{
  width: 100px;
  height: 100px;
  margin: 20px;
  display:inline-block;
}


/* loading */

lds-hourglass {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.intro-banner-vdo-play-btn .ripple{
    position:absolute;
    width:160px;
    height:160px;
    z-index:-1;
    left:50%;
    top:50%;
    opacity:0;
    margin:-80px 0 0 -80px;
    border-radius:100px;
    -webkit-animation:ripple 1.8s infinite;
    animation:ripple 1.8s infinite
}

.pinkBg {
    background-color: #ed184f!important;
    background-image: linear-gradient(90deg, #bf0c18, #fd8b55);
}

.intro-banner-vdo-play-btn .ripple:nth-child(2){
    animation-delay:.3s;
    -webkit-animation-delay:.3s
}
.intro-banner-vdo-play-btn .ripple:nth-child(3){
    animation-delay:.6s;
    -webkit-animation-delay:.6s
}
/* */

  .loader2{
    position: relative;
    width: 200px;
    height: 256px;
    left: 45%;
    top: 40%;
    }
    
      .loader2:before{
        content: "";
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        width: 15px;
        height: 15px;
        background: #5cb85c;
        border-radius: 50%;
        transform: scale(0);
        animation: animate 2s linear infinite;
        animation-delay: calc(0.1s * var(--i));
      }
    .plane{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      animation: rotating 2s linear infinite;
      animation-delay: -1s;
    }  
      .plane:before{
        content: '\f072';
        font-family: fontAwesome;
        position: absolute;
        top: 80px;
        left: 85px;
        color: #bf0c18;
        font-size: 60px;
        transform: rotate(180deg);
}

@keyframes animate{
  0%{
    transform: scale(0);
  }
  50%{
    transform: scale(1.2);
  }
  80%, 100%{
    transform: scale(0);
  }

  }
  
@keyframes rotating{
  0%{
    transform: rotate(10deg);
  }
  100%{
    transform: rotate(370deg);
  }

}

.loading{
  width: 100%;
  height :100vh;
  /*background:url('img/airplane.gif')no-repeat center;*/
  /*background:  url('https://cssauthor.com/wp-content/uploads/2018/06/Bouncy-Preloader.gif') no-repeat center;
*/
}
.parallax-mirror{
  top:100px;
  margin:0px;
}

/*infinit orange loader */
.svg {
  position: absolute;
  width: 240px;
  height: 120px;
  top: 0; right: 0;
  bottom: 0; left: 0; 
  margin: auto;
}
/* end loader */
.body{
  max-width: 100% !important;
  display: none;
  margin: 0px;
  background-color: transparent;
}
#index{
background-color: #bf0c18;
color: white;
}
.text-primary th{
  color: #bf0c18;
}
th,td{
  font-family: 'cairo';
}
#footer p {
  position: static;
  left: 0;
  padding-left: 50px;
  padding-right: 50px;
}

#add_hotel , #add_programme{
  background-color: #bf0c18;
  font-family: 'cairo';
  border:none;
  padding:15%;
  width: 100px;
}

.header_red{
   width: 30%;
  margin: 50px auto 0px;
  color: white;
  background: #bf0c18;
  text-align: center;
  border: 1px solid #bf0c18;
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
  padding: 20px;
}

#logo-container{
  /*margin-top: 10%;*/
  margin-top: -2%;
}
.col{
  white-space: nowrap;
}
.chevron-left{
  left: 0;
  font-size: 55cm;
}
.btn-more-outline{

  background-color: transparent;
  border-color: white;
  border-width: 1px;
  color: white;
  font-family: 'Cairo';
  padding: 5px 10px;
  cursor: pointer;

}
.btn-more-outline:hover{
  background-color: white;
  opacity: 0.9;
  color: #bf0c18;
}

.butt-cont{
  float: left;
  padding-left: 30%;
}

.btn-benefit{

  background-color: #bf0c18;
  border-color: #bf0c18;
  border-width: 1px;
  color: white;
  font-family: 'Cairo';
  padding: 5px 10px;
  cursor: pointer;
}
.btn-benefit:hover{
  background-color: white;
  border-color: white;
  opacity: 0.5;
  color: #bf0c18;

}

.picture{
  background-image: url("img/mekka.jpg");
  background-position: center;
  background-size: cover;
  height: 500px;
}

.news{
  background-color: #F4F4F4;
  font-family: 'Cairo';
}

.offre-details{
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgb(36,57,66));
  height: 430px;
  width: 80%;
  color: white;
  text-align: right;
  padding-right: 10%;
  padding-top: 2%;
  margin: 0px;
  float: right;
}

.offre-details h3 ,.offre-details p{
  text-align: right;
  color: white;
}

.all{
  width:90%;
  height: 96%;
  display: inline-block;
  position: relative;
  /*display: flex;*/
}

.offre{
  background-image: url("img/resto.jpg");
  background-color: black;
  background-position: center;
  background-size: cover;
  height: 550px;
  -webkit-transition: all .5s;
}
.offre:hover{
  
}



.float{
  float: right;
  background-image: url("img/bande.png");
  background-position: center;
  background-size: cover;
  height: 90%;
  width: 20%;
  color: white;
  padding-top: 3%;
  max-width: 198px;
  margin: 0;
  min-width: 100px;
}

.float h5 {
  margin-top: 100%;
  text-align: center;
}
html{
  scroll-behavior: smooth;
  object-position: center;
}
h2{
  padding: 5% 0px 0px 0px;
}
.red-img{
background :url("img/red-img.svg") no-repeat;
height:100px;
width: 600px;
margin: auto;
}
.jumbotron{
  margin-bottom: 0;
  align-content: center;
  min-height: 600px;
}

#dropbutton{
  background-color: white;
  color: #949494;
  border-color: white;
}

h6{
  color: #bf0c18;
  font-family: 'Cairo';
  padding-top: 7%;
}
.column p {
  color: white;
  font-family: 'Cairo';
  padding-top: 7%;
  font-size: 1em;
  max-width: 250px;

}

#navy{
  height: 100px;
}

#in{
  background-color: #bf0c18;
  border-radius: 0px;
  }

#signin{
  border-radius: 0px;
}

.carousel-item{
  width: 100%;
  height: 900px;
}

.carousel {
  height: 'fit-content';
}


.comments{
  background-color: #F4F4F4;
  text-align: center;
  font-family: 'Cairo';
  }


.comments-text p{
   font-family: 'Cairo';
   padding-top: 10%;
   font-size: 0.85em;
   font-weight: 350;
}


.nav-brand{
margin-top: -20%;
padding: 2%;
}
.btn btn-primary {
  border:none;
}
.text-center{
  margin: 0px;
}

.custom-shape-red{
  /*background-color: #bf0c18;*/
  height: 55px;
  width: 100%;
  color: white;
  text-align: center;
  margin: auto;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;
  border-top-left-radius: 50% 70%;
  border-top-right-radius: 50% 70%;
}

.custom-shape{
  /*background-color: #bf0c18;*/
  height: 55px;
  width: 100%;
  color: white;
  text-align: center;
  margin: auto;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;
  border-top-left-radius: 50% 70%;
  border-top-right-radius: 50% 70%;
}


/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/
.gallery .gallery-item {
  overflow: hidden;
}
.gallery-item{
  background-color: black;
}
.gallery .gallery-item img {
  transition: all ease-in-out 0.4s;
}


#offre-img{
  transition: all ease-in-out 0.4s;
}


.gallery .gallery-item:hover img{
  /*transform: scale(0.2);*/
}


.container{
  text-align: center;
  margin: auto;
  max-width: 800px;
}

.custom-shape-blue{
  border-top-left-radius: 50% 70%;
  border-top-right-radius: 50% 70%;
  /*background-color: #2569F8;*/
  /*width: 200px;*/
  height: 55px;
  width: 100%;
  color: white;
  text-align: center;
  margin: auto;
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center;
}
.gallery-item:hover{
  background-color: black;
  opacity: 1;
}
.img-fluid:hover{
opacity: 0.7;
}

.gallery .gallery-item{
  border-radius: 0px;
}
.custom-shape-yellow{
  /*border-radius: 15px 15px 30px 30px;*/
  border-top-left-radius: 50% 70%;
  /*border-bottom-left-radius: 50% 70%;
  border-bottom-right-radius: 50% 20%;*/
  border-top-right-radius: 50% 70%;
  /*background-color: #DDB939;*/
  /*width: 200px;*/
  height: 55px;
  width: 100%;
  color: white;
  text-align: center;
  margin: auto;
  justify-content: center; /* align horizontal */
  align-items: center;
  display: flex;
}
#best-destination{
  font-family: 'Cairo-bold';
}
.registration-container{
  background-color: white;
  min-width: 900px;
  text-align: center;
  margin: auto;
  padding : 4%;
}
.card-body,.card-footer {
  background-color: white;
  
  /*transition: all 0.3s cubic-bezier(.25,.8,.25,1);*/
}
.card:hover{
  /*box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);*/
}




.card{
  background-color: transparent;
  border-color: transparent;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-white{
  background-color: white;
  border-color: white;
  padding: 20px;
  margin: 5% 3px 0px 2px;
  font-family: 'Cairo'
  box-shadow: 2px 2px 6px 2px #aaaaaa;
}

.test{
  height: 900px;
  background-image: url("img/abidattourlogobackground.png");
  width: 100%;
  padding-top:10px;
  text-align: center;
  margin: auto;
}
#dropdownMenuButton{
  font-family: 'cairo';
}
#special{
  margin: auto;
  display: flex;
  justify-content: center;

}
.text{
    background-color: white;
    max-height: 30%;
    text-align: center;
    margin: auto;
    width: 45%;
    max-width: 600px;
    padding-right: 19px;
    padding-left: 19px;
    border-radius: 10px;
 
}
.form-control{
  font-family: 'Cairo';
  padding: 3%;
  min-width: 200px;
 } 
 #special-destination{
  padding: 3%;
  margin:auto;
 }
 .title-register{
  color: #bf0c18;
  background-color: transparent;
  margin-top: -65px;
  padding: 5px;
 }

.carousel-item img {
object-position: center; 
object-fit: cover;
width: 100%;
height: 100%;
}


 .card-title {
  font-family:  'cairo';
  vertical-align: middle;
  text-align: center;
 }




 .gallery-row-1{
  display: inline;
  padding: 30px;
  padding-top: 10px;
 }


 #index:hover{
  color: white;
  background-color: #D55555;
 }




 .brand{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
 }


 #more{
  background-color: #bf0c18;
  border-color: #bf0c18;
  color: white;
  font-family: 'Cairo';
  cursor: pointer;
  transition: width 2s, height 4s;
  font-size: 0.9em;
  font-weight: 700;

 }
 
 
    
 


 #more:hover{
  background-color: white;
  color: black;
 }



 .fading{
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgb(36,57,66));
  width: 30%;
  text-align: center;
  margin: auto;
  padding-top: 20px;
   padding-right: 20px;
    padding-left: 20px;
 }
 .col-md-4:hover{
  transform: scale(1.05);
 }
 .col-md-4{
  -webkit-transition: all .5s;
 }


.button-cus{
  background-color: #bf0c18;
  border-color: #bf0c18;
  color: white;
  font-family: 'Cairo';
  cursor: pointer;
  padding: 5px 15px;
}


.label{
  white-space: nowrap;
}

.nav-item , label,input,option{
  font-family: 'Cairo';
 }
 .gallery{
  background-image: url("img/abidattourlogobackground.png");
  text-align: center;
 }

h4,h3,p{
  font-family: 'Cairo';
  text-align: center;
  vertical-align: middle;
}

h1,h2,h3,h4,h5{
    font-family: 'Cairo';
}
select, option{
  font-family: 'Cairo';
}
p{
  font-family: 'Cairo';
  color: #6C757D;
  text-align: center;
}
a,button{
  font-family: 'Cairo';
  text-align: center;
}
.card-img{
  text-align: center;
}
.p1{ font-size: 1.6em;
     font-weight: 9px;
     color: #565A5C;
     font-family: 'Cairo-bold';
}
.p2{
 font-size: 1.2em;
}

.stars{
  color: #bf0c18;
  font-family: 'Cairo';
  font-size: 1.7em;
  font-weight: 2px;
  margin-bottom: -1.2%;
}
.btn-purple {
  border-color: #8366B0;
  background-color: #8366B0;
  color: white;
  margin: 1rem;
}
.btn-purple:hover,
.btn-purple:focus {
  border-color: #594781;
  background-color: #594781;
  color: white;
}
.feature img {
  padding: 1.5rem;
}
#red-section {
background-color: #bf0c18;
height: auto;
min-height: 400px;
padding: 50px;
border-radius: 0px;
}
footer {
  background-color: #40474e;
  background-size: cover;
  color: white;
}

button:active{
border-color: #bf0c18;
}
label{
  color: #6C757D;
}


#navbarResponsive{
/*background-color: white;*/
width: 100%;
}

footer .row {
  padding: 1.5rem 0 4rem;
  line-height: 2rem;
}
footer img {
  margin: 1.5rem 0;
}
footer h3 {
  margin: 1.5rem 0;
}

.container-image{
  /*display: flex;*/
  text-align: center;
  margin: auto;
  max-width: 990px;
  display: inline-block;
  height: 900px;
  /*background-color: red;*/
}
.img img{
 float: right; 
 margin: 0px 0px 15px 15px;
}


#ihjiz{
  text-overflow: ellipsis;
}


@media(max-width: 1275px){  
}
@media(max-width: 1269px) { 
}
@media(max-width: 1016px){

}



@media(max-width: 949px){

  .float{
    display: none;
  }
  .offre-details{    
    float: none;
    right: 0px;
    position: absolute;
  }
  label{
   font-size: 0.9em;
    }
  .container-image{
    height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  .text{
    width: 100%;
    height: 50px;
    margin-bottom: 8%;
  }
  .custom-shape-red{
    width: 70%;
  }
  .custom-shape-yellow{
    width: 70%;
  }
  .custom-shape-blue{
    width: 70%;
  }
  .card-title{
    width: 80%;
    font-size: 0.9em;
  }
  .card-image{
    height: 40px;
  }

  .stars{
    padding-bottom: 10px;
  }
.nav-up {
    top: -40px;
}
  #special{
    margin-top: 20px;
  }
  p{
    font-size: 0.7em;
  }

  h3{
     font-size: 1em;
  }

  #number{
    font-size: 1em;

  }

  

  button{
font-size: 1em;
  }
  .float{
    background-size: cover;
    /*background-attachment: fixed;*/
  }

  /*vip and economy and semi */

  
}


@media(max-width: 656px){
  .test{
    height: 2000px;
  }
  .fading{
    width: 60%;
  }
  #logo {
    height: 32px;
    width: 66px;
  }
  .carousel , .carousel-inner img{
    /*height: 300px;*/
  }ca
  #navy {
    /*height: 70px;*/
    /*background-color: white;*/
    width: 100%;
    opacity: 0.7;
    height: 50px;
    position: fixed;
    top: 0;
    transition: top 0.2s ease-in-out;
  }
  #navy:focus{
    opacity: 1;
  }
  .navbar-nav{
    padding-bottom: 10px;
    /*background-color: white;*/
  } 
  #burger{
    padding: 0px;
    border:none;
  }
#navbarResponsive{
  height: 170px;
  /*background-color: white;*/
}
#signin{
  background-color: white;
}
#in , #signin{
  width: 100%;
  padding-right: 110px;
}

.form-inline{
  margin-top: -11px;
}
#in{
  padding-right: 114px;
}
#signin:hover{
  color:black;
}

  label{
   font-size: 0.8em;
    }
  .container-image{
      height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .text{
    width: 100%;
    height: 50px;
    margin-bottom: 8%;
    padding-bottom: 5px;
   
  }
  .item img {
  width:100%
}


.row .col {
  width: 100%;
}

  .custom-shape-red{
    width: 60%;
  }
  .card-title{
    width: 80%;
    font-size: 10px;
  }

  #special{
    margin-top: 20px;
  }
  
  p{
    font-size: 0.9em;
  }

  h3{
     font-size: 0.5em;
  }
  button{
font-size: em;
  }
  .brand {
    /*background: green;*/
    height: 50px;
    width: 60vh;
    margin-left: -35px;
    bottom: 0px;

  }
  
  .carousel-inner{
    /*height: 400px;*/
    height: 700px;
  }

  .image1 , .image2 {
  display: none;
}

#div1 
{
width: 100%;
position: static;
margin-top: 50px;
}
#div2 {
  /*background-color: black;*/
}


.reddy{
  display: none;
}

}



@media(min-width: 900px){

#div1{
  height: 760px;
  position:relative;
  margin-top:-362px;
  width: 60%;
  left: 40%;
  text-align: center;
}
#div2{
  max-height:100%;
  overflow:auto;
  overflow-x:hidden;
  background-color: #F4F3EF;
  min-height: 100%;
}

}


/* animation down*/
li{
  display: none;
}
/* css animation */

@-webkit-keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.fade-in {
  -webkit-animation: fadeIn .5s ease-in 1 forwards;
  animation: fadeIn .5s ease-in 1 forwards;
  opacity: 0;
}

.is-paused {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
#header{
display: none;
}
 @media(max-width: 775px){ 
    .video-play-button {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 10%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  width: 15px;
  height: 20px;
  /* background: #fa183d; */
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
}
.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 40px;
  height: 40px;
  background: #bf0c18;
  border-radius: 50%;
  animation: pulse-border 1500ms ease-out infinite;
}
.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 40px;
  height: 40px;
  background: #bf0c18;
  border-radius: 50%;
  transition: all 200ms;
}
.video-play-button:hover:after {
  background-color: darken(#fa183d, 10%);
}



.video-play-button img {
  position: relative;
  z-index: 3;
  max-width: 50%;
  width: auto;
  height: auto;
}



.video-play-button span {
  display: block;
  position: relative;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 15px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}


.video-overlay iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
   width: 80%; 
   height: 60%; 
  box-shadow: 0 0 15px rgba(0,0,0,0.75);
}
#navbarDropdownMenuLink{
      color: #4c4747;
}
.red {
  
        width: auto ;
        max-width: 200px;
        position: absolute;
        left: 150%;
        top: 43%;
        bottom: 0;
        padding: 20px 0;
        margin-left: -375px;   
}


#img-red {
  width: 150px;
  height: 150px;
}




  }

/* mobile */
#img-red{
    
    
    left:60%;
    position: relative;
    top:328px;
    max-width: 243px;
    width: 70%;
    
    }


    #frame{
      padding: 10px;
     /* cursor: url('img/move.svg'),move;*/
      z-index: 10;
    }

.video_container{
  width:280px;
  /*position: element("#play-video");*/
  position: relative;
  top: 60%;
  left: 60%;

}

.red{
        width: 750px;
        position: absolute;
        left: 55%;
        top: 36%;
        bottom: 0;
        padding: 20px 0;
        margin-left: -375px;     

      } 

/*video play */
 .video-play-button {
  margin-right: auto;
  margin-left: auto;
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-sizing: content-box;
  display: block;
  width: 32px;
  height: 44px;
  /* background: #fa183d; */
  border-radius: 50%;
  padding: 18px 20px 18px 28px;
}


.video-play-button:before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #bf0c18;
  border-radius: 50%;
  animation: pulse-border 1500ms ease-out infinite;
}
.video-play-button:after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: block;
  width: 80px;
  height: 80px;
  background: #bf0c18;
  border-radius: 50%;
  transition: all 200ms;
}

.video-play-button:hover:after {
  background-color: darken(#fa183d, 10%);
}

.video-play-button img {
  position: relative;
  z-index: 3;
  max-width: 100%;
  width: auto;
  height: auto;
}
.video-play-button span {
  display: block;
  position: relative;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 32px solid #fff;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
  }
}
.video-overlay {
  position: fixed;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.80);
  opacity: 0;
  transition: all ease 500ms;
}
.video-overlay.open {
  position: fixed;
  z-index: 1000;
  opacity: 1;
}

.video-overlay-close {
  position: absolute;
  z-index: 1000;
  top: 15px;
  right: 20px;
  font-size: 36px;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: all 200ms;
}

.video-overlay-close:hover {
  color: #fa183d;
}

.video-overlay iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
   width: 60%; 
   height: 50%; 
  box-shadow: 0 0 15px rgba(0,0,0,0.75);
}



/*-- Extra Bootstrap Column Padding --*/
[class*="col-"] {
  padding: 1rem;
}

@font-face {
font-family: 'Demo Glaston';
src: url("/fonts/Demo Glaston.otf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Mj_Mani_0';
src: url("/fonts/Mj_Mani_0.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Cairo';
src: url("/fonts/Cairo-Regular.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Cairo-bold';
src: url("/fonts/Cairo-Bold.ttf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'AraAsmaaBeltajie-Regular';
src: url("/fonts/AraAsmaaBeltajie-Regular.otf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Myriad';
src: url("/fonts/Myriad Pro Light.otf");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'mj-sazeh-bold';
src: url("/fonts/mj-sazeh-bold.ttf");
font-weight: normal;
font-style: normal;
}
