@import url(graphikarabic.css);

* {
  margin: 0;
  padding: 0;
  font-family: "Graphik Arabic Web Regular";
}
a:hover{
  color: #000;
}
.g-play{
  background: url('../Images/Group 70.svg') center no-repeat;
  width: 25px;
  height: 28px;
  background-size: 28px 31px;
}
body{
  background: #fff;
  font-family: "Graphik Arabic Web Regular";
}
.logo { 
  margin: 20px auto ;
  width: 15%; 
}
#typed{
    font-family: "Graphik Arabic Web Semibold";
}

.bb{
  position: relative;
  left: -120px;
}
.download-app{
  border: 1px solid;
  padding: 3px 11px;
  border-radius: 7px;
  font-size: 13px;
  cursor: pointer;
  background-color: #000;
  color: #fff;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  -o-border-radius: 7px;
}

.circles{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 67%;
  overflow: hidden;
}

.circles li{
  position: absolute;
  display: block;
  list-style: none;
  width: 20px;
  height: 20px;
  background: #f8e1ed;
  animation: animate 25s linear infinite;
  bottom: -150px;
  
}

.circles li:nth-child(1){
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0s;
}


.circles li:nth-child(2){
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}

.circles li:nth-child(3){
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}

.circles li:nth-child(4){
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}

.circles li:nth-child(5){
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}

.circles li:nth-child(6){
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}

.circles li:nth-child(7){
  left: 35%;
  width: 70px;
  height: 70px;
  animation-delay: 7s;
}

.circles li:nth-child(8){
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 5s;
}

.circles li:nth-child(9){
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 15s;
}

.circles li:nth-child(10){
  left: 85%;
  width: 50px;
  height: 50px;
  animation-delay: 0s;
  animation-duration: 8s;
}



@keyframes animate {

  0%{
      transform: translateY(0) rotate(0deg);
      opacity: 1;
      border-radius: 0;
  }

  100%{
      transform: translateY(-1000px) rotate(720deg);
      opacity: 0;
      border-radius: 50%;
  }

}



Resources
.fw-medium {
  font-weight: 500;
}
.fw-semibold {
  font-weight: 600;
}
.fw-bold {
  font-weight: 700;
}
.text-black-primary {
  color: #333;
}
.text-black-secondary {
  color: #666;
}
.scale-up {
  transform: scale(1.2);
  -webkit-transform: scale(1.3);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
}
.linear-gradient-body {
  background: linear-gradient(287.83deg , #F9F7EE);
}

.locate-floor {
  right: 0;
  transform: translate(32%, -10%);
}
.with-fit-content {
  width: fit-content;
}
.ss {
  background: linear-gradient(-60deg,  #015050, #056161);
/* background-size: 400% 400%; */
animation: gradient 10s ease infinite;
color: rgb(150, 190, 182);
display: flex;
align-items: center;
justify-content: center;
padding: 50px 0;
overflow: hidden;
margin: 35px auto;
}
@keyframes gradient {
0% {
  background-position: 0% 50%;
}
50% {
  background-position: 100% 50%;
}
100% {
  background-position: 0% 50%;
}
}
#counter {
background: rgba(41, 40, 40, 0.08);
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
align-items: center;
list-style-type: none;
width: 100%;
padding: 20px 0;
}
#counter li {
flex: 1;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
align-items: center;
}
.count{
  padding: 5px 0;
  font-size: 25px;
  font-weight: 800;
  color: #F9F7EE
}
#counter span.percent:after {
content: " + ";
display: inline-block;
}

.counter_text{
  font-size: 17px;
}
.service-section .icon-box {
	margin-bottom: 12px;
	padding: 30px;
	border-radius: 6px;
	/* background-color: #f8f9fa; */
    border: 1px solid #C0C0C0;
}
.service-section .icon-box:hover .service-title a {
	color: #015050;
}
.service-section .icon-box .service-icon {
	float: left;
	color: #3fbca1;
	font-size: 40px;
}
[dir="rtl"].service-section .icon-box .service-icon {
	float: right;
	color: #3fbca1;
	font-size: 40px;
}
.service-section .icon-box .service-title {
	margin-left: 70px;
	font-weight: 700;
	margin-bottom: 25px;
	font-size: 18px;
	line-height: 1.2;
}
[dir="rtl"].service-section .icon-box .service-title {
	margin-right: 70px;
	font-weight: 700;
	margin-bottom: 25px;
	font-size: 18px;
	line-height: 1.2;
}
.service-section .icon-box .service-title a {
	color: #000000;
	transition: 0.3s;
	text-decoration: none;
}
.service-section .icon-box .service-para {
	margin-left: 70px;
	line-height: 24px;
	font-size: 14px;
}
[dir="rtl"].service-section .icon-box .service-para {
	margin-right: 70px;
	line-height: 24px;
	font-size: 14px;
}
.service-section .service-main-heading {
	color: #000000;
	padding: 0;
	margin-bottom: 15px;
	line-height: 1;
	font-size: 30px;
	font-weight: 600;
}
@media only screen and (max-width: 600px) {
  .scale-down {
    width: 179%;
    display: none;
  }
  .texto{
    font-size: 0.86rem !important;
  }
  .parent{
    margin-bottom: 0 !important;
  }
  .bb{
    display: none;
  }
  .appsbtns{
    margin: auto;
  }
  .count-area{
    margin-top: 0 !important;
  }
  .ss {
    flex-direction: column;
  }
  .count{
    
    font-size: 15px;
  
}
.counter_text{
    font-size: 10px;
}
}

@media only screen and (max-width: 820px) {
  .width-100-important {
    width: 100% !important;
  }
  .scale-up {
    transform: scale(1);
  }
  .appsbtns{
    margin: auto;
  }
  .service-section .icon-box .service-title {
    font-size: 15px;
  }
  .service-section .icon-box .service-icon{
    font-size: 30px;
  }
  .service-section .icon-box .service-icon-ar{
    font-size: 30px;
  }
  .service-section .icon-box{
    padding: 20px;
  }
}

@media only screen and (max-width: 992px) {
  .scale-down {
    width: 195%;
  }
  .appsbtns{
    margin: auto;
  }
}

/* Color Pallete */
.gunmetal {
  background-color: #015050;
}
.cool-grey {
  background-color: #8d99ae;
}
.anti-flash-white {
  background-color: #f4efed;
}
.medium-candy-apple-red {
  background-color: #d90429;
}

.text-gunmetal {
  color: #000000;
}