:root {
  --primary: #ff5722;
}
html {
  box-sizing: border-box;
  font-size: 62.5%;
  direction: rtl;
}
*,
*::after,
*::before {
  box-sizing: inherit;
}

body {
  font-size: 1.6rem;
  line-height: 1.6;
  font-family: "danaLight";
  overflow-x: hidden;
}

/* Desktop Nav Styles */
.desktopNavWrapper {
  background-color: #f8f8f8;
  border-bottom: 0.1rem solid #ddd;
  position: sticky;
  top: 0;
  z-index: 1;
}
.desktopNav {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
}
.desktopNavLogo {
  font-family: "danaBold";
  color: #000;
  font-size: 2.2rem;
  position: relative;
  transition: 0.1s all ease-in-out;
}
.desktopNavLogo::before {
  content: "";
  position: absolute;
  width: 3rem;
  height: 0.5rem;
  background-color: var(--primary);
  left: -4rem;
  bottom: 1.7rem;
  transition: 0.1s all ease-in-out;
}
.desktopNavLogo::after {
  content: "";
  position: absolute;
  width: 1.8rem;
  height: 0.5rem;
  background-color: var(--primary);
  left: -2.8rem;
  bottom: 2.7rem;
  transition: 0.1s all ease-in-out;
  -webkit-transition: 0.1s all ease-in-out;
  -moz-transition: 0.1s all ease-in-out;
  -ms-transition: 0.1s all ease-in-out;
  -o-transition: 0.1s all ease-in-out;
}
.desktopNavLogo:hover,
.desktopNavMenuLink:hover,
.mobileMenuLink:hover {
  color: var(--primary);
}

.desktopNavLogo:hover::after,
.desktopNavLogo:hover::before {
  background-color: #000;
}
.desktopNavMenuLink,
.mobileMenuLink {
  color: #545454;
}

.desktopNavMenu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.8rem;
}
.desktopNavAppDownloadBtn {
  background-color: var(--primary);
  padding: 1rem 3rem;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  transition: 0.3s all ease-in-out;
  -webkit-transition: 0.3s all ease-in-out;
  -moz-transition: 0.3s all ease-in-out;
  -ms-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
}
.desktopNavAppDownloadBtn:hover {
  transform: scale(0.95);
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  -ms-transform: scale(0.95);
  -o-transform: scale(0.95);
}
.desktopNavAppDownloadBtn .desktopNavMenuLink {
  color: #fff;
}
.hamburgerLineWrappper {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mainLine {
  width: 3rem;
  display: flex;
  height: 0.2rem;
  border-radius: 1rem;
  background-color: #000;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  position: relative;
  transition: 0.3s all ease-in-out;
  -webkit-transition: 0.3s all ease-in-out;
  -moz-transition: 0.3s all ease-in-out;
  -ms-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
}
.mainLine::before {
  content: "";
  position: absolute;
  width: 3rem;
  height: 0.2rem;
  background-color: #000;
  top: 0.8rem;
  margin: 0 auto;
  transition: 0.3s all ease-in-out;
  -webkit-transition: 0.3s all ease-in-out;
  -moz-transition: 0.3s all ease-in-out;
  -ms-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
}
.mainLine::after {
  content: "";
  position: absolute;
  width: 3rem;
  height: 0.2rem;
  background-color: #000;
  top: -0.8rem;
  margin: 0 auto;
  transition: 0.3s all ease-in-out;
  -webkit-transition: 0.3s all ease-in-out;
  -moz-transition: 0.3s all ease-in-out;
  -ms-transition: 0.3s all ease-in-out;
  -o-transition: 0.3s all ease-in-out;
}
.activeMenu::before {
  content: "";
  position: absolute;
  width: 3rem;
  height: 0.2rem;
  background-color: #000;
  top: 0rem;
  rotate: 45deg;
}
.activeMenu::after {
  content: "";
  position: absolute;
  width: 3rem;
  height: 0.2rem;
  background-color: #000;
  top: 0rem;
  rotate: -45deg;
}
.mobileMenu {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 2rem 0;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

/* Header styles */

.header {
  background-image: url(./../images/banner.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 65rem;
  position: relative;
  padding-bottom: 8rem;
}
.headerWrapper {
  display: flex;
  height: 100%;
  align-items: flex-end;
  justify-content: flex-start;
}
.requestWrapper {
  background-image: linear-gradient(
    51deg,
    rgba(23, 26, 60, 0.7) 5%,
    rgba(23, 26, 60, 0.3) 95%
  );
  padding: 2.5rem;
  width: 528px;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  -ms-border-radius: 2rem;
  -o-border-radius: 2rem;
}
.headerTitle {
  color: #fff;
  font-family: "danaBold";
  font-size: 5rem;
}
.headerSubTitle {
  font-family: "danaMedium";
  color: #fff;
  font-size: 2.2rem;
}
.headerBtnsWrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 3rem;
}
.headerBtn {
  display: flex;
  padding: 1.5rem 2.5rem;
  border-radius: 1.5rem;
  -webkit-border-radius: 1.5rem;
  -moz-border-radius: 1.5rem;
  -ms-border-radius: 1.5rem;
  -o-border-radius: 1.5rem;
  border: 0.2rem solid #fff;
  color: #fff;
  gap: 1.5rem;
  align-items: center;
}
.specialHeaderBtn {
  background-color: #fff;
  color: #000;
}
.phoneImgWrapper {
  position: absolute;
  left: 10%;
  width: 60rem;
  bottom: -55%;
}
.phoneImg {
  width: 100%;
}

/* Services Styles */

.services {
  margin-top: 25rem;
  border-bottom: 0.2rem solid #0000001b;
  margin-bottom: 15rem;
  padding-bottom: 10rem;
}
.servicesTitle {
  font-size: 3.5rem;
  font-family: "danaMedium";
  margin-bottom: 5rem;
}
.servicesChoicesWrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
  gap: 1rem;
}
.servicesChoice {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.choiceImgWrapper {
  width: 9.5rem;
  cursor: pointer;
}
.choiceImg {
  width: 100%;
  opacity: 0.5;
}
.choiceImgWrapper:hover .choiceImg {
  opacity: 1;
}

.servicesCaptionsWrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 4rem;
}
.servicesCaptionsTextWrapper {
  width: 45%;
  padding-top: 3rem;
}
.servicesCaptionsImgWrapper {
  width: 50%;
}
.servicesCaptionsImg {
  width: 100%;
}
.serviceCaptionTitle {
  font-size: 3rem;
  font-family: "danaMedium";
  color: #141414;
  margin-bottom: 2rem;
}
.servicesCaptionText {
  color: #333333;
}
.activeService .choiceImg {
  opacity: 1;
}

/* Special Styles */

.special {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25rem;
}
.specialTexts {
  width: 45%;
}
.specialImgWrapper {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.specialTextsTitle {
  font-size: 3.5rem;
  font-family: "danaBold";
  margin-bottom: 5rem;
}
.specialTextsCaption {
  color: #333333;
  font-family: "danaMedium";
}
.specialImg {
  width: 90%;
}
.specialLinksWrapper {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}
.specialTextsLink {
  color: var(--primary);
  font-family: "danaBold";
}
.specialTextsBtn {
  background-color: var(--primary);
  color: #fff;
  padding: 1.5rem 2rem;
  border-radius: 1.5rem;
  -webkit-border-radius: 1.5rem;
  -moz-border-radius: 1.5rem;
  -ms-border-radius: 1.5rem;
  -o-border-radius: 1.5rem;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.specialTextsBtn:hover {
  opacity: 0.9;
}

/* Credit Styles */

.credit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15rem;
}
.creditTexts {
  width: 45%;
}
.creditImgWrapper {
  width: 50%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.creditTextsTitle {
  font-size: 3.5rem;
  font-family: "danaBold";
  margin-bottom: 5rem;
}
.creditTextsCaption {
  color: #333333;
  font-family: "danaMedium";
}
.creditImg {
  width: 90%;
}
.creditLinksWrapper {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: flex-start;
}
.creditTextsLink {
  color: var(--primary);
  font-family: "danaBold";
}
.creditTextsBtn {
  background-color: var(--primary);
  color: #fff;
  padding: 1.5rem 2rem;
  border-radius: 1.5rem;
  -webkit-border-radius: 1.5rem;
  -moz-border-radius: 1.5rem;
  -ms-border-radius: 1.5rem;
  -o-border-radius: 1.5rem;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
}
.creditTextsBtn:hover {
  opacity: 0.9;
}

/* Options Styles */

.options {
  height: 20rem;
  background-image: url(./../images/parallax.jpeg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin-bottom: 20rem;
}
.optionsContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.optionsWrapper {
  color: #fff;
  text-align: center;
  border-left: 0.2rem solid #fff;
  padding: 0.5rem 1rem;
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.lastOption {
  border: none;
}
.optionsTitle {
  font-family: "danaBold";
  font-size: 2rem;
  margin-bottom: 1rem;
}
.optionsCaption {
  display: none;
}
.optionsWrapper:hover .optionsCaption {
  display: flex;
}

/* Driver Styles */

.driver {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rem;
}
.driverContent {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 4rem;
  color: #4d4d4d;
  font-size: 1.8rem;
}
.driverImgWrapper {
  width: 45%;
}
.driverTitle {
  color: #000;
  font-family: "danaBold";
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}
.driverMoneyTitle,
.driverSecurityTitle,
.driverFuelTitle,
.driverBenefitsTitle {
  font-family: "danaMedium";
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
.driverImg {
  width: 100%;
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
}
.theBenefit {
  color: #0065dc;
}
.driverBtnsWrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 3rem;
}
.driverBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0065dc;
  padding: 1.5rem 2rem;
  color: #fff;
  border-radius: 1.5rem;
  -webkit-border-radius: 1.5rem;
  -moz-border-radius: 1.5rem;
  -ms-border-radius: 1.5rem;
  -o-border-radius: 1.5rem;
}
.driverBtn:hover {
  opacity: 0.9;
}

/* Map Styles */

.map {
  background: #f8f8f9 url(./../images/map-back.svg) no-repeat;
  padding: 40px 10%;
  /* height: 50rem; */
}
.mapTitle {
  color: #000;
  font-family: "danaBold";
  font-size: 3rem;
  margin-bottom: 2rem;
}
.mapCities {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  row-gap: 2rem;
  font-size: 1.7rem;
  font-family: "danaMedium";
}