/* blue #18224f */
/* yellow #fecd19 */

@font-face {
  font-family: arr-b;
  src: url(fonts/29ltbukrabold.ttf);
}
@font-face {
  font-family: arr-bi;
  src: url(fonts/29ltbukrabolditalic.ttf);
}
@font-face {
  font-family: arr-l;
  src: url(fonts/29ltbukralight.ttf);
}
@font-face {
  font-family: arr-r;
  src: url(fonts/29ltbukraregular.ttf);
}

@font-face {
  font-family: ubuntu-b;
  src: url(fonts/Ubuntu-Bold.ttf);
}

@font-face {
  font-family: ubuntu-bi;
  src: url(fonts/Ubuntu-BoldItalic.ttf);
}
@font-face {
  font-family: ubuntu-i;
  src: url(fonts/Ubuntu-Italic.ttf);
}
@font-face {
  font-family: ubuntu-l;
  src: url(fonts/Ubuntu-Light.ttf);
}
@font-face {
  font-family: ubuntu-li;
  src: url(fonts/Ubuntu-LightItalic.ttf);
}
@font-face {
  font-family: ubuntu-m;
  src: url(fonts/Ubuntu-Medium.ttf);
}

@font-face {
  font-family: ubuntu-mi;
  src: url(fonts/Ubuntu-MediumItalic.ttf);
}

@font-face {
    font-family: 'myfb';
    src: url('fonts/thesans-bold.otf') format('truetype');
}
@font-face {
    font-family: 'myfp';
    src: url('fonts/thesans-plain.otf') format('truetype');
}

html, body{
  direction: rtl;
  font-family: 'myfp' !important;
  font

}

p{
  font-size: 17px !important;
  font-weight: lighter;
  color: #666666;
}


#mainNav{
  direction: ltr;
}

.logo-icon{
  max-width: 45px !important;
}

.q-navbar .nav-link {
    font-size: 100% !important;
    font-family: 'myfp' !important;
}

.q-navbar {
    direction: rtl !important;
}

.navbar-collapse{
  text-align: right !important;
}

#mainNav.navbar-shrink {
    background-color: #18224f;
}

header.masthead .intro-text .intro-lead-in {
  font-size: 22px;
  font-style:normal;
  font-family: 'myfp' !important;
  line-height: 22px;
  margin-bottom: 25px;
  color: #b1b1b1;
}


/* text animate  */


.brand{
  color: #fecd19;
  font-family: arr-b !important;
}
.brand-text{
color: #fff;
font-family: arr-r !important;
}


.aarr-brand{
    padding: 25px;
}
.aarr-brand div {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
  font-family: arr-r ;
  font-size:42px;

}

.aarr-brand div:first-of-type {
  animation: showup 7s infinite;
}

 /* .aarr-brand div:last-of-type {
  width:0px;
  animation: reveal 7s infinite;
} */

 .aarr-brand div:last-of-type span {
  margin-left:-355px;
  animation: slidein 7s infinite;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:0;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}


.how-btn1 {
  border-radius: 35px;
  font-family: "myfp" !important;
}

.how-btn1:hover {
  background-color: rgba(255,255,255,0.12) !important;
  border: none !important;
  color: #fff;
}

.how-btn2 {
    border-radius: 20px;
    padding: 10px  35px 10px 35px;
  font-family: 'myfp' !important;
}

.how-btn2:hover {
  background-color:#18224f !important;
  outline-color: #185a9d !important;
  /* background-color: rgba(255,255,255,0.12) !important; */
  border: none !important;
  color: #fff;
}
.adv{
  background-color:#fed136;
}
.survey-text{
    font-size:24px !important;
    color: #18224f;
}

.how-btn3 {
    background-color:#18224f !important;
    color: #fff;
    border-radius: 20px;
    padding: 10px  35px 10px 35px;
    font-family: 'myfp' !important;
}

.how-btn3:hover {
     background-color:#fff !important;
  outline-color: none !important;
  /* background-color: rgba(255,255,255,0.12) !important; */
  border: none !important;
  color: #18224f;
}











#about{
direction: rtl;
text-align: right;
background:linear-gradient(141deg, #ddd 25%, #eee 45%, #fff 55%);

}

@media (min-width: 768px) {
}
#about h2{

color: #18224f;
padding-top: 20px;
padding-bottom: 20px;
}
#about .about-logo{
margin: auto;
}
#about .about-logo img{
max-width: 285px;
}

#services{
    font-family: 'myfp' !important;
}
.section-heading{
    font-family: 'myfp' !important;
    font-weight: 100;
  }
  .section-subheading{
    font-family: 'myfp' !important;
    font-weight: 100;
    font-style: normal !important;
  }
  #services .service-heading{
    font-family: 'myfp' !important;
  }

  .serv-img{
    max-width: 165px;
    margin-top: 15px;
    margin-bottom: 25px;

  }

.shadowing:hover{
padding: 25px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition: 0.5s ease;
}

.shadowing2:hover{
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 14px 0 rgba(0, 0, 0, 0.19);

}




.plan-card{
direction: ltr;
text-align: center;
}
.plan-s{
  padding: 10px;
  margin: auto;
}

.text-small{
  color: #fff;
}
.card-title {
    font-family: arr-b !important;
     font-size: 28px;

}
.card-title-p{
  font-family: arr-b !important;
  font-size: 36px;

}

.q-gray{
  color: #4e4e4e;
}
.q-yellow{
  color: #ffc90b;
}
.q-unlimited{
   color: #04a2ab ;
}

.q-blue-light{
  color: #185a9d;
}
.q-blue-dark{
  color: #18224f;
}
.q-red{
  color: #e34c74;
}
.q-w{
  color: #fff;
}

.q-new{
 color: #984ce3;
}


.m2-bck{
  background: rgb(255,225,121);
  background: linear-gradient(90deg, rgba(255,225,121,1) 0%, rgba(236,162,3,1) 100%);
  background-image: url("../img/plans/m2-bck.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
}
.m4-bck{
  background: rgb(4,117,99);
  background: linear-gradient(270deg, rgba(4,117,99,1) 0%, rgba(9,121,108,1) 35%, rgba(4,203,200,1) 100%);
  background-image: url("../img/plans/m4-bck.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */

}
.m6-bck{
  background: rgb(2,0,36);
  background: linear-gradient(270deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
  background-image: url("../img/plans/m6-bck.png");
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
}

.unlimited-bck {
    background: rgb(5 169 191);
    background: linear-gradient(90deg, rgb(3 219 247) 0%, rgb(1 162 188) 100%);
    background-image: url(../img/plans/un-bck.png);
    background-position: center;
    background-repeat: no-repeat;
}

.new-bck {
    background: rgb(5 169 191);
    background: linear-gradient(90deg, rgb(3 219 247) 0%, rgb(1 162 188) 100%);
    background-image: url(../img/plans/new-bck.png);
    background-position: center;
    background-repeat: no-repeat;
}

.ext-bck {
    background: rgb(0 192 218);
    background: linear-gradient(0deg, rgb(0 210 206) 0%, rgb(5 19 124) 100%);
    background-image: url(../img/plans/ext-bck.png);
    background-position: center;
    background-repeat: no-repeat;
}

.vouchers{
background-color: #fecd19;
background: rgb(255,225,121);
background: linear-gradient(0deg, rgba(255,225,121,1) 0%, rgba(236,162,3,1) 100%);
background-image: url("../img/voucher-bg.png");
background-repeat: no-repeat;
background-position: center;
}

.q-vaoucher{
  margin:25px;     
  max-width: 180px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 14px 0 rgba(0, 0, 0, 0.19);
}







.contact-icon {
width: 65px;
position: relative;
padding-bottom:10px;
transition: 0.3s ease;
}
.contact-icons p {
font-size: 14px;
padding-bottom: 10px;
}


.contact-icon:hover {
transform: scale(1.2, 1.2);
}

#contact .section-heading{
  color: #000 !important;
}


#map {
      width: 100%;
      height: 350px;
      padding: 35px;
      background-color: grey;
    }







.slide-top {
-webkit-animation: slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-top 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-top {
0% {
  -webkit-transform: translateY(-60px);
          transform: translateY(-60px);
}
100% {

          -webkit-transform: translateY(0);
                  transform: translateY(0);
}
}
@keyframes slide-top {
0% {
  -webkit-transform: translateY(-60px);
          transform: translateY(-60px);
}
100% {

          -webkit-transform: translateY(0);
                  transform: translateY(0);
}
}

.fade-in {
animation: fadeIn ease 2s;
-webkit-animation: fadeIn ease 2s;
-moz-animation: fadeIn ease 2s;
-o-animation: fadeIn ease 2s;
-ms-animation: fadeIn ease 2s;
}
@keyframes fadeIn {
0% {
  opacity:0;
}
100% {
  opacity:1;
}
}

@-moz-keyframes fadeIn {
0% {
  opacity:0;
}
100% {
  opacity:1;
}
}

@-webkit-keyframes fadeIn {
0% {
  opacity:0;
}
100% {
  opacity:1;
}
}

@-o-keyframes fadeIn {
0% {
  opacity:0;
}
100% {
  opacity:1;
}
}

@-ms-keyframes fadeIn {
0% {
  opacity:0;
}
100% {
  opacity:1;
}


}

.fade-out {
animation: fadeOut ease 3s;
-webkit-animation: fadeOut ease 3s;
-moz-animation: fadeOut ease 3s;
-o-animation: fadeOut ease 3s;
-ms-animation: fadeOut ease 3s;
}
@keyframes fadeOut {
0% {
  opacity:1;
}
100% {
  opacity:0;
}
}

@-moz-keyframes fadeOut {
0% {
  opacity:1;
}
100% {
  opacity:0;
}
}

@-webkit-keyframes fadeOut {
0% {
  opacity:1;
}
100% {
  opacity:0;
}
}

@-o-keyframes fadeOut {
0% {
  opacity:1;
}
100% {
  opacity:0;
}
}

@-ms-keyframes fadeOut {
0% {
  opacity:1;
}
100% {
  opacity:0;
}
}



.kenburns-top {
	animation: kenburns-top 5s ease-out both;
}

@-webkit-keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}
@keyframes kenburns-top {
  0% {
    -webkit-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0);
    -webkit-transform-origin: 50% 16%;
            transform-origin: 50% 16%;
  }
  100% {
    -webkit-transform: scale(1.25) translateY(-15px);
            transform: scale(1.25) translateY(-15px);
    -webkit-transform-origin: top;
            transform-origin: top;
  }
}



/*31-8-2020*/

 .plan-t{
 
    margin-bottom: 15px;

  }
 .plan-t h3 {
    margin-top: 30px;
    text-align: center;
    text-transform: uppercase;
    color:#828384;
}
 .plan-t span { 
        /* to hide the lines from behind the text, you have to set the background color the same as the container */ 
        background: #f8f9fa !important; 
        padding: 0 15px; 
    }
.plan-t h3.background {
    position: relative;
    z-index: 1;
    
    &:before {
        border-top: 2px solid #dfdfdf;
        content:"";
        margin: 0 auto; /* this centers the line to the full width specified */
        position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
        top: 50%; left: 0; right: 0; bottom: 0;
        width: 95%;
        z-index: -1;
    }

    span { 
        /* to hide the lines from behind the text, you have to set the background color the same as the container */ 
        background: #f8f9fa !important; 
        padding: 0 15px; 
    }
}

.plan-t h3.double:before { 
    /* this is just to undo the :before styling from above */
    border-top: none; 
}

.plan-t h3.double:after {
    border-bottom: 1px solid #828384;
    -webkit-box-shadow: 0 1px 0 0 #ced0d2;
    -moz-box-shadow: 0 1px 0 0 #ced0d2;
    box-shadow: 0 1px 0 0 #ced0d2;
    content: "";
    margin: 0 auto; /* this centers the line to the full width specified */
    position: absolute;
    top: 45%; left: 0; right: 0;
    width: 95%;
    z-index: -1;
}

.blink_me {
  animation: blinker 2s linear infinite;

}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}



.glow {
  font-size: 18px;
  color: #ff0058;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff0058, 0 0 40px #ff0058, 0 0 50px #ff0058, 0 0 60px #ff0058, 0 0 70px #ff0058;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}


.ext{
    padding:3px !important;
    margin:3px !important;
  
}

.exts{
    padding:10px !important;
    
}

.extratime{
    padding:5px !important;
    margin:5px !important;
    
}

 .extrat{
     color:#fff;
     padding:5px !important;
     margin:5px !important;
     max-width:120px !important;
       border-radius: 8px; 
       color: var(--white);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}

.axtm{
      border:2px solid #16c1f9f7;
      color: #16c1f9f7;;
}
.axtm:hover{
     background-image: linear-gradient(298deg, #00f8fcf7, #16c1f9f7); 
     color: #fff;
}


.axte{
    border:2px solid #006cb8f7;
      color: #006cb8f7;
}

.axte:hover{
     background-image: linear-gradient(298deg, #16c1f9f7, #006cb8f7);
      color: #fff;
}


.axtn{
     border:2px solid #001c4f;
      color: #001c4f;
}

.axtn:hover{
      background-image: linear-gradient(298deg, #006cb8f7, #001c4f);
       color: #fff;
}


.extrat:hover{
   border:none;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}