@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);
}



html, body{
  direction: rtl;
  font-family: arr-l !important;
}



/* .bg-img1 {
  background-position: center;
  background-repeat:repeat-y !important;
  background-size: cover;
} */


select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}


.title-1 {
  font-family: arr-l !important;
  font-size: 65px;
  color: #fff;
}

.up-title{
  font-family: arr-l !important;
  font-size: 35px;
  color: #fece1b;

}

.aarr-btn{
  font-family: arr-l !important;
  background: #fece1b;
}

.aarr-row{
  margin-left: 10%;
  margin-right: 10%;
  padding-bottom:150px;
}

@media only screen and (max-width: 600px) {
  .aarr-row{
    margin-left: 0;
    margin-right: 0;
     padding-bottom:50px;
  }

  .aarr-co-logo{
    padding-top: 0px;
    width: 185px !important;
  }
    .aarr-co-offer{
   padding-top: 0px;
  width: 215px !important;
}

.sizeme {
	width: 100% !important;
	height: 100%   !important;
	
	margin-right: 0px  !important;
	margin-left: 0px  !important;
	margin-bottom: 15px;
	border:solid 1px #ffd200;
		text-align:center;
		padding-top:10px;
	
}



.l1-txt3 {
	font-family: Poppins-Bold;
	font-size: 20px !important;
	color: #fff;
	line-height: 1;
	/* padding-bottom: 99px; */
}



  .title-1 {
    font-family: arr-l !important;
    font-size: 35px;
    color: #fff;
  }

  .up-title{
    font-family: arr-l !important;
    font-size: 20px;
    color: #fece1b;

  }

  p{
      font-family: arr-l !important;
      font-size: 18px;
      color: #bdbdbd;
  }






}

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

.aarr-co-logo{
  padding-top: 15px;
  width: 325px ;
}

.aarr-co-offer{
  padding-top: 15px;
  width: 385px ;
}


.sizeme {
	width: 75px;
	height: 75px;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 15px;

	border:solid 1px #ffd200;
		text-align:center;
		padding-top:10px;

}

.bor1 {
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 50%;
}

.l1-txt3 {
	font-family: Poppins-Bold;
	font-size: 35px;
	color: #fff;
	line-height: 1;
	/* padding-bottom: 99px; */
}

.s1-txt2 {
	font-family: Poppins-Regular;
	font-size: 11px;
	color: #ffd200;
	line-height: 1;
}
 /*# offer */



.aarr-section2{
  margin-top: 25px;
  align-items: center;
}


/* icons */
.aarr-facebook{

}

.aarr-lang{

}


.aarr-footer {
  font-family: ubuntu-l !important;
  position: absolute;
  bottom: 15px;
  right:0;
  left:0;
  /*width: 100%;*/
  height: 2.5rem;
  font-size: 16px !important;
   text-align: center;
}
/* .aarr-footer{*/
/*  position: absolute;*/
/*  bottom: 0;*/
/*  text-align: center;*/
/*  padding-bottom: 30px;*/
/*    vertical-align: middle;*/

/*}*/

.aarr-footer p{
  vertical-align: middle;
  text-align: center;
} 


/* text animate  */
body{
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}


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

p{
    font-family: arr-l ;
    font-size: 18px;
    color: #bdbdbd;
}

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

.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; }
}
/*
@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:0;width:355px;}
} */



/* sigup page  */

.aarr-signup{
text-align: center;
}

.aarr-signup h5{
  font-family: arr-r ;
  color: #fece1b;
  line-height: 30px;
}

.aarr-signup input{
    font-family: arr-r ;
}


.aarr-signup input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #888;
  opacity: 5; /* Firefox */
}



.aarr-signup .wrap-input100 {

  width:400px;
  max-width:  100%;
  position: relative;
  background-color: transparent;
  height: 40px;
  background-color: rgba(255,255,255, 0.1);
}

@media only screen and (max-width: 600px) {
  .aarr-signup .wrap-input100 {

    width: 100%;
    max-width:  100%;

  }
}



.aarr-signup  select {
    font-family: arr-r ;
    color: #888;
    border-width: 0px !important;;
    border-style: solid;
    outline: 0px solid #ccc;
    outline-offset: -1px;
    -webkit-border-radius: 0px;
}

.aarr-signup  p{
  font-family: arr-r ;
  font-size: 14px;
  color: #f1f1f1;
}

.qnet-back{
padding-bottom:50px;background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(12,114,219,1) 0%, rgba(23,23,145,1) 20%, rgba(29,9,145,1) 80%, rgba(2,175,212,1) 100%);
}


.success-text{
font-family: arr-l !important ;
  font-size: 20px !important;
  color: #fff !important;
}


/* success style *************************************************************8/
/*  */

HTML {
/*using system font-stack*/
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 115%; /*~18px*/
font-size: calc(12px + (25 - 12) * (100vw - 300px) / (1300 - 300) );
line-height: 1.5;
box-sizing: border-box;
}

BODY {
margin: 0;
color: #3a3d40;
background: rgb(252, 252, 252);
}

*, *::before, *::after {
box-sizing: inherit;
color: inherit;
}

/*Actual Style*/

/*=======================
		 C-Container
=========================*/
.c-container {
max-width: 27rem;
margin: 1rem auto 0;
padding: 1rem;
}

/*=======================
		 O-Circle
=========================*/

.o-circle {
display: flex;
width: 10.555rem; height: 10.555rem;
justify-content: center;
align-items: flex-start;
border-radius: 50%;
animation: circle-appearance .8s ease-in-out 1 forwards, set-overflow .1s 1.1s forwards;
}

.c-container__circle {
margin: 0 auto 3.5rem;
}

/*=======================
	C-Circle Sign
=========================*/

.o-circle__sign {
position: relative;
opacity: 0;
background: #fff;
animation-duration: .8s;
animation-delay: .2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

.o-circle__sign::before,
.o-circle__sign::after {
content: "";
position: absolute;
background: inherit;
}

.o-circle__sign::after {
left: 100%; top: 0%;
width: 500%; height: 95%;
transform: translateY(4%) rotate(0deg);
border-radius: 0;
opacity: 0;
animation: set-shaddow 0s 1.13s ease-in-out forwards;
z-index: -1;
}


/*=======================
		Sign Success
=========================*/

.o-circle__sign--success {
background: rgb(56, 176, 131);
}

.o-circle__sign--success .o-circle__sign {
width: 1rem; height: 6rem;
border-radius: 50% 50% 50% 0% / 10%;
transform: translateX(130%) translateY(35%) rotate(45deg) scale(.11);
animation-name: success-sign-appearance;
}

.o-circle__sign--success .o-circle__sign::before {
 bottom: -17%;
 width: 100%; height: 50%;
 transform: translateX(-130%) rotate(90deg);
 border-radius: 50% 50% 50% 50% / 20%;

}

/*--shadow--*/
.o-circle__sign--success .o-circle__sign::after {
 background: rgb(40, 128, 96);
}


/*=======================
		Sign Failure
=========================*/

.o-circle__sign--failure {
background: rgb(236, 78, 75);
}

.o-circle__sign--failure .o-circle__sign {
width: 1rem; height: 7rem;
transform: translateY(25%) rotate(45deg) scale(.1);
border-radius: 50% 50% 50% 50% / 10%;
animation-name: failure-sign-appearance;
}

.o-circle__sign--failure .o-circle__sign::before {
 top: 50%;
 width: 100%; height: 100%;
 transform: translateY(-50%) rotate(90deg);
 border-radius: inherit;
}

/*--shadow--*/
.o-circle__sign--failure .o-circle__sign::after {
 background: rgba(175, 57, 55, .8);
}


/*-----------------------
		@Keyframes
--------------------------*/

/*CIRCLE*/
@keyframes circle-appearance {
0% { transform: scale(0); }

50% { transform: scale(1.5); }

60% { transform: scale(1); }

100% { transform: scale(1); }
}

/*SIGN*/
@keyframes failure-sign-appearance {
50% { opacity: 1;  transform: translateY(25%) rotate(45deg) scale(1.7); }

100% { opacity: 1; transform: translateY(25%) rotate(45deg) scale(1); }
}

@keyframes success-sign-appearance {
50% { opacity: 1;  transform: translateX(130%) translateY(35%) rotate(45deg) scale(1.7); }

100% { opacity: 1; transform: translateX(130%) translateY(35%) rotate(45deg) scale(1); }
}


@keyframes set-shaddow {
to { opacity: 1; }
}

@keyframes set-overflow {
to { overflow: hidden; }
}



/*+++++++++++++++++++
	@Media Queries
+++++++++++++++++++++*/

@media screen and (min-width: 1300px) {

HTML { font-size: 1.5625em; } /* 25 / 16 = 1.5625 */

}