* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  direction: rtl;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.header {
  width: 100%;
  height: 95px;
  display: flex;
  align-items: center;
  background-color: #fff;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1200px;
  height: 100%;
  flex-wrap: wrap;
}

header ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
}

header ul li {
  padding: 0 15px;
}

header ul li:nth-child(1) {
  padding-right: 30px;
}

header ul li a {
  text-decoration: none;
  color: black;
  font-size: 18px;
}

.main .main-right {
  margin: 60px;
  width: 600px;
}

.main .main-right h1 {
  line-height: 50px;
  font-size: 40px;
}

.main .main-right p {
  margin-top: 20px;
  line-height: 20px;
  font-size: 18px;
  font-weight: 400;
}

.main .main-right .buttons {
  position: relative;
}

.main .main-right .buttons .wep-app {
  position: absolute;
  top: 20px;
  background-color: rgb(65, 188, 65);
  text-decoration: none;
  color: #fff;
  padding: 14px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: bold;
  top: 40px;
}

.main .main-right .buttons .app {
  position: absolute;
  width: 150px;
  right: 200px;
  top: 40px;
  background-color: #fff;
  border: 2px solid green;
  padding: 14px;
  font-size: 20px;
  border-radius: 10px;
  text-align: center;
}

.main-left .hero-img {
  transform: translateY(-200px);
  margin-right: 750px;
  width: 440px;
}

.sevices {
  position: relative;
}

.sevices h4 {
  font-size: 24px;
  font-weight: 500;
  position: absolute;
  top: -250px;
  margin: 60px;
}

.sevices .star {
  width: 68px;
  position: absolute;
  top: -150px;
  right: 50px;
}

.sevices .commend {
  font-size: 20px;
  position: absolute;
  top: -80px;
  right: 55px;
}

.sevices .car {
  width: 70px;
  position: absolute;
  top: -150px;
  right: 160px;
}

.sevices .transport {
  font-size: 20px;
  position: absolute;
  top: -80px;
  right: 160px;
}

.sevices .air {
  width: 74px;
  position: absolute;
  top: -150px;
  right: 282px;
}

.sevices .travel {
  font-size: 20px;
  position: absolute;
  top: -80px;
  right: 280px;
}

.sevices .food {
  width: 70px;
  position: absolute;
  top: -150px;
  right: 400px;
}

.sevices .foodd {
  font-size: 20px;
  position: absolute;
  top: -80px;
  right: 395px;
}

.sevices .wallet {
  width: 70px;
  position: absolute;
  top: -150px;
  right: 520px;
}

.sevices .wallett {
  font-size: 20px;
  position: absolute;
  top: -80px;
  right: 500px;
}

.sevices .bimeh {
  width: 70px;
  position: absolute;
  top: -150px;
  right: 640px;
}

.sevices .bimehh {
  font-size: 20px;
  position: absolute;
  top: -80px;
  right: 640px;
}

.sevices .more {
  font-size: 20px;
  position: absolute;
  top: -130px;
  right: 780px;
}

.sevices .more-visit {
  font-size: 20px;
  position: absolute;
  top: -100px;
  right: 760px;
}

.main-service {
  position: relative;
}

.main-service ul li {
  list-style: none;
}

.taxi h4 {
  font-size: 20px;
  position: absolute;
  top: 10px;
  right: 0px;
  margin: 20px;
  color: rgb(65, 63, 63);
}

.taxi p {
  font-size: 18px;
  position: absolute;
  top: 50px;
  margin: 10px;
  right: 10px;
  color: rgb(93, 92, 92);
}

.taxi img {
  width: 70px;
  position: absolute;
  right: 250px;
  margin: 20px;
}

.derivery {
  position: relative;
}

.derivery h4 {
  font-size: 20px;
  position: absolute;
  color: rgb(65, 63, 63);
  top: 120px;
  margin: 20px;
}

.derivery p {
  font-size: 18px;
  position: absolute;
  top: 170px;
  right: 18px;
  color: rgb(93, 92, 92);
}

.derivery img {
  width: 70px;
  position: absolute;
  right: 250px;
  margin: 20px;
  top: 100px;
}

.hotel {
  position: relative;
}

.hotel h4 {
  font-size: 20px;
  position: absolute;
  color: rgb(65, 63, 63);
  top: 220px;
  margin: 22px;
}

.hotel p {
  font-size: 18px;
  position: absolute;
  top: 270px;
  right: 20px;
  color: rgb(93, 92, 92);
}

.hotel img {
  width: 70px;
  position: absolute;
  right: 250px;
  margin: 20px;
  top: 210px;
}

.order-food {
  position: relative;
}

.order-food h4 {
  font-size: 20px;
  position: absolute;
  color: rgb(65, 63, 63);
  top: 30px;
  right: 440px;
}

.order-food p {
  font-size: 18px;
  position: absolute;
  color: rgb(93, 92, 92);
  top: 60px;
  right: 440px;
}

.order-food img {
  width: 70px;
  position: absolute;
  right: 700px;
  top: 10px;
}

.snapp-pay {
  position: relative;
}

.snapp-pay h4 {
  font-size: 20px;
  position: absolute;
  color: rgb(65, 63, 63);
  top: 130px;
  right: 440px;
}

.snapp-pay p {
  font-size: 18px;
  position: absolute;
  color: rgb(93, 92, 92);
  top: 160px;
  right: 440px;
}

.snapp-pay img {
  width: 70px;
  position: absolute;
  right: 700px;
  top: 110px;
}

.snapp-bimeh {
  position: relative;
}

.snapp-bimeh h4 {
  font-size: 20px;
  position: absolute;
  color: rgb(65, 63, 63);
  top: 240px;
  right: 440px;
}

.snapp-bimeh p {
  font-size: 18px;
  position: absolute;
  color: rgb(93, 92, 92);
  top: 270px;
  right: 440px;
}

.snapp-bimeh img {
  width: 70px;
  position: absolute;
  right: 700px;
  top: 230px;
}

.supermarket {
  position: relative;
}

.supermarket h4 {
  font-size: 20px;
  position: absolute;
  color: rgb(65, 63, 63);
  top: 30px;
  right: 840px;
}

.supermarket p {
  font-size: 18px;
  position: absolute;
  color: rgb(93, 92, 92);
  top: 60px;
  right: 840px;
}

.supermarket img {
  width: 70px;
  position: absolute;
  left: 30px;
  top: 10px;
}

.tiket-air {
  position: relative;
}

.tiket-air h4 {
  font-size: 20px;
  position: absolute;
  color: rgb(65, 63, 63);
  top: 130px;
  right: 840px;
}

.tiket-air p {
  font-size: 18px;
  position: absolute;
  color: rgb(93, 92, 92);
  top: 160px;
  right: 840px;
}

.tiket-air img {
  width: 70px;
  position: absolute;
  left: 30px;
  top: 113px;
}

.driver {
  position: relative;
}

.driver h4 {
  font-size: 20px;
  position: absolute;
  color: rgb(65, 63, 63);
  top: 240px;
  right: 840px;
}

.driver p {
  font-size: 18px;
  position: absolute;
  color: rgb(93, 92, 92);
  top: 270px;
  right: 840px;
}

.driver img {
  width: 70px;
  position: absolute;
  left: 30px;
  top: 230px;
}

.ad-img {
  position: relative;
}

.ad-img img {
  border-radius: 10px;
  position: absolute;
  top: 330px;
  height: 400px;
}

.driver-registration {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 750px;
  background-color: rgb(204, 216, 231);
}

.driver-registration h2 {
  position: absolute;
  font-size: 40px;
  color: rgb(2, 2, 71);
  top: 10px;
}

.driver-registration p {
  position: absolute;
  top: 70px;
  font-size: 25px;
}

.driver-reg {
  position: absolute;
  top: 130px;
  font-size: 25px;
  width: 200px;
  height: 50px;
  background-color: rgb(4, 154, 4);
  color: #fff;
  border-radius: 20px;
  font-weight: bold;
}

.driver-registration .video {
  position: absolute;
  top: 220px;
  height: 650px;
  border-radius: 10px;
}

.benefits {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.benefits .income {
  position: absolute;
  top: 1670px;
  right: 30px;
  width: 510px;
  height: 200px;
}

.benefits .income img {
  position: absolute;
  top: -10px;
  right: 150px;
  width: 120px;
}

.benefits .income h4 {
  position: absolute;
  top: 70px;
  font-size: 20px;
  margin: 20px;
}

.benefits .income p {
  position: absolute;
  top: 100px;
  margin: 20px;
  font-size: 18px;
}

.benefits .hour {
  position: absolute;
  top: 1670px;
  right: 600px;
  background-color: rgb(255, 251, 246);
  width: 500px;
}

.benefits .hour img {
  position: absolute;
  top: -10px;
  right: 200px;
  width: 130px;
}

.benefits .hour h4 {
  position: absolute;
  top: 70px;
  font-size: 20px;
  margin: 20px;
}

.benefits .hour p {
  position: absolute;
  top: 100px;
  font-size: 19px;
  margin: 20px;
}

.benefits .benefit {
  background-color: rgb(255, 251, 246);
  position: absolute;
  top: 1950px;
  right: 30px;
  width: 510px;
  height: 200px;
}

.benefits .benefit img {
  position: absolute;
  top: -50px;
  right: 144px;
  width: 130px;
}

.benefits .benefit h4 {
  position: absolute;
  top: 30px;
  font-size: 20px;
  margin: 20px;
}

.benefits .benefit p {
  position: absolute;
  top: 60px;
  font-size: 19px;
  margin: 20px;
}

.benefits .carfix {
  position: absolute;
  top: 1900px;
  right: 600px;
  background-color: rgb(255, 251, 246);
  width: 500px;
}

.benefits .carfix img {
  position: absolute;
  top: -10px;
  right: 200px;
  width: 130px;
}

.benefits .carfix h4 {
  position: absolute;
  top: 70px;
  font-size: 20px;
  margin: 20px;
}

.benefits .carfix p {
  position: absolute;
  top: 100px;
  font-size: 19px;
  margin: 20px;
}

.benefits .sfetey {
  background-color: rgb(255, 251, 246);
  position: absolute;
  top: 2150px;
  right: 30px;
  width: 510px;
  height: 200px;
}

.benefits .sfetey img {
  position: absolute;
  top: -10px;
  right: 150px;
  width: 130px;
}

.benefits .sfetey h4 {
  position: absolute;
  top: 60px;
  font-size: 20px;
  margin: 20px;
}

.benefits .sfetey p {
  position: absolute;
  top: 90px;
  font-size: 19px;
  margin: 20px;
}

.benefits .support {
  position: absolute;
  top: 2130px;
  right: 600px;
  background-color: rgb(255, 251, 246);
  width: 500px;
}

.benefits .support img {
  position: absolute;
  top: -10px;
  right: 200px;
  width: 130px;
}

.benefits .support h4 {
  position: absolute;
  top: 70px;
  font-size: 20px;
  margin: 20px;
}

.benefits .support p {
  position: absolute;
  top: 100px;
  font-size: 20px;
  margin: 20px;
}