body {
  font-family: Sky !important;
  direction: rtl;
  text-align: right;
  position: relative;
  background-color: var(--bg-color);
}

@font-face {
  font-family: Sky;
  src: url(../css/sky.ttf);
}
:root {
    --main-color:#fb811b;
    --basic-color:#fff;
    --bg-color:#F0F2F4;
    --select-color:#046BD2;
}
::selection {background-color: var(--select-color);color: var(--basic-color);}
body::-webkit-scrollbar {
  width: 9px;
}

body::-webkit-scrollbar-track {
  background: #eee;
}

body::-webkit-scrollbar-thumb {
  background-color: #cccccc6e;
  /* color of the scroll thumb */
  border-radius: 20px;
  /* roundness of the scroll thumb */
  border: 3px solid #cccccc6e;
  /* creates padding around scroll thumb */
}
.line-height {line-height: 1.6em;}
.text-color { color: #fb811b; }
/* navbar */
.navbar {
  border-radius: 25px;
  margin-inline: 63px;
  margin-top: 22px;
  transition: all .3s ease-in-out;
}
.navbar-nav .nav-item {margin-inline: 12px;}
.navbar-nav .nav-link {color: #333 !important;font-weight: bold;font-size: 19px;}
.navbar-nav .nav-link i, .navbar-nav .nav-link:hover i { color: #fb811b; }
.navbar .navbar-brand {margin: 0;}
.contact_us a {
  background-color: #fb811b;
  color: var(--basic-color) !important;
  padding: 11px 20px 9px;
  border-radius: 25px;
  border: 1px solid #fb811b;
}

/* make any element with .contact-link or .contact-text use the orange color */
.contact-link,
.contact-text,
footer .links b.contact-text {
  color: #fb811b !important;
}
.contact-link i { color: #fb811b !important; }
/* make whatsapp icon white inside contact buttons */
.contact-link i.fab.fa-whatsapp,
.contact-link .fa-whatsapp { color: #fff !important; }
.contact-link {
  background-color: #fb811b;
  color: #000 !important; /* make the visible text black */
  padding: 11px 20px 9px;
  border-radius: 25px;
  display: inline-block;
  text-decoration: none;
  border: 1px solid #fb811b;
}
/* flipped-card specific override to match base style */
.services_flipped .back a.contact-link {
  color: #000;
  background: #fb811b;
  border: 1px solid #fb811b;
  padding: 8px 16px;
  border-radius: 6px;
  display: inline-block;
  text-decoration: none;
}
.services_flipped .back a.contact-link:hover { background: rgba(251,129,27,0.95); color: #000; }
.serv_text a.contact-link { color: #000; background: #fb811b; padding: 11px 20px 9px; border-radius: 25px; border: 1px solid #fb811b; }
.contact_us {
  margin-right: auto;
  display: flex;
  align-items: center;
}

/* hero */
.hero .swiper {
  width: 100%;
  height: 600px;
}
.hero .swiper .swiper-slide img {width: 100%;border-radius: 50px;height: 100%;object-fit: cover;}
.hero .swiper-slide {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  overflow: hidden;
  border-radius: 50px;
}
.hero .swiper-slide::before {
  position: absolute;
  top: 57px;
  left: 160px;
  width: 120%;
  height: 172%;
  transform: rotate(141deg);
  content: '';
  /* changed overlay color to orange with lower opacity so slide image shows through */
  background-color: rgba(251, 129, 27, 0.12);
}
.hero .caption {
  position: absolute;
  right: 58px;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  top: 30%;
  width: 60%;
}
.hero .caption h4 {
  font-weight: bold;
    font-size: 32px;
    margin-block: 10px;
}
.hero .caption p {font-size: 19px;}
.hero .caption a {
  /* slide CTA button: use orange brand color */
  background-color: #fb811b;
  color: var(--basic-color);
  border-radius: 25px;
  padding: 9px 33px 7px;
  display: inline-block;
  margin-block: 10px;
  text-decoration: none;
}
.hero .container {padding: 0;}
.hero .swiper-button-next:after,
.hero .swiper-button-prev:after {font-size: 23px;color: var(--basic-color);}
.hero .swiper-button-next:focus,
.hero .swiper-button-prev:focus {border: none;outline: none;}
/* services flipped */
.services_flipped {height: 250px;}
.services_flipped .flip {
    position: relative;
  }
  .services_flipped .flip > .front,
  .services_flipped .flip > .back {
    display: block;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition-duration: 1s;
    transition-property: transform, opacity;
  }
  .services_flipped .flip > .front {
    transform: rotateY(0deg);
  }
  .services_flipped .flip > .back {
    position: absolute;
    opacity: 0;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg);
  }
  .services_flipped .flip:hover > .front {
    transform: rotateY(180deg);
  }
  .services_flipped .flip:hover > .front h1 {
    display: none;
  }
  .services_flipped .flip:hover > .back {
    opacity: 1;
    transform: rotateY(0deg);
  }
  .services_flipped .flip.flip-vertical > .back {
    transform: rotateX(-180deg);
  }
  .services_flipped .flip.flip-vertical:hover > .front {
    transform: rotateX(180deg);
  }
  .services_flipped .flip.flip-vertical:hover > .back {
    transform: rotateX(0deg);
  }
  
  .services_flipped .flip {
    position: relative;
    display: inline-block;
    margin-right: 2px;
    margin-block: 10px;
    width: 100%;
  }
  .services_flipped .flip h1 {font-size: 20px;color: var(--basic-color);line-height: 1.6em;}
  .services_flipped .flip h1,
  .services_flipped .flip a {position: relative;z-index: 9;}
  .services_flipped .flip a {
    color: var(--basic-color);
    border: 2px solid var(--basic-color);
    border-radius: 4px;
    padding: 7px 20px;
    cursor: pointer;
    margin-top: 30px;
    display: inline-block;
  }
  .services_flipped .flip > .front,
  .services_flipped .flip > .back {
    display: flex;
    color:var(--basic-color);
    width: inherit;
    background-size: cover !important;
    background-position: center !important;
    height: 220px;
    padding: 1em 2em;
    text-align: center;
    border-radius: 10px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
  }
  .services_flipped .flip > .front::before,
  .services_flipped .flip > .back::after  {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* changed overlay to orange (fb811b) with reduced opacity so background shows through */
    background-color: rgba(251,129,27,0.12);
    z-index: 1;
  }
  .services_flipped .flip > .front p,
  .services_flipped .flip > .back p {
    font-size: 0.9125rem;
    line-height: 160%;
  }
  
  .services_flipped .text-shadow {
    text-shadow: 1px 1px rgba(0, 0, 0, 0.04), 2px 2px rgba(0, 0, 0, 0.04), 3px 3px rgba(0, 0, 0, 0.04), 4px 4px rgba(0, 0, 0, 0.04), 0.125rem 0.125rem rgba(0, 0, 0, 0.04), 6px 6px rgba(0, 0, 0, 0.04), 7px 7px rgba(0, 0, 0, 0.04), 8px 8px rgba(0, 0, 0, 0.04), 9px 9px rgba(0, 0, 0, 0.04), 0.3125rem 0.3125rem rgba(0, 0, 0, 0.04), 11px 11px rgba(0, 0, 0, 0.04), 12px 12px rgba(0, 0, 0, 0.04), 13px 13px rgba(0, 0, 0, 0.04), 14px 14px rgba(0, 0, 0, 0.04), 0.625rem 0.625rem rgba(0, 0, 0, 0.04), 16px 16px rgba(0, 0, 0, 0.04), 17px 17px rgba(0, 0, 0, 0.04), 18px 18px rgba(0, 0, 0, 0.04), 19px 19px rgba(0, 0, 0, 0.04), 1.25rem 1.25rem rgba(0, 0, 0, 0.04);
  }
  .services_flipped .f1,
  .services_flipped .f2,
  .services_flipped .f3
  {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
.services_flipped .f1 {background-image: url('../images/services-1 1.png');}
.services_flipped .f2 {background-image: url('../images/services-2.png');}
.services_flipped .f3 {background-image: url('../images/services-3.png');}
/* services */
.serv_text a {
  background-color: var(--main-color);
  color: var(--basic-color) !important;
  padding: 11px 20px 9px;
  border-radius: 25px;
  display: inline-block;
  margin-block: 20px;
}
.services {
  background-image: url('../images/about-img-02.png');
  background-position: right bottom;
  background-size: auto;
  background-repeat: no-repeat;
  background-color: var(--basic-color);
}
.services .img img {
  width: auto;
    margin: auto;
    display: block;
}
.serv_flex {
  display: flex;
  margin-bottom: 25px;
}
.serv_flex .icon {margin-left: 20px;color: var(--main-color);font-size: 35px;width: 50px;text-align: center;}
.serv_flex h5 {font-weight: bold;}
/* app */
.app {background-color: var(--basic-color);}
.app img {width: 100%;}
/* payment */
.payment {
  background-image: url('../images/download.PNG');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.payment .pay {
  border-radius: 15px;
  padding: 30px;
  backdrop-filter: blur(8px);
  background-color: #ffffff59;
}
.pay ul li {font-size: 20px;margin-block: 10px;}
.pay p,.story h3 {
  font-size: 18px;
    width: 400px;
    max-width: 90%;
    margin: auto;
}
/* story */
.story {
  background-color: #F0F3FF;
  position: relative;
  background-image: url('../images/service-bg-01.png');
  background-position: bottom right;
  background-size: auto;
  background-repeat: no-repeat;
}
.story .swiper2 {width: 100%;}
.story .swiper2 .swiper-slide img {
  width: 100%;
  height: 200px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.story .swiper2 .swiper-slide h4 {font-size: 20px;}
.story .swiper-button-next:after,
.story .swiper-button-prev:after {font-size: 23px;color: #ccc;font-weight: bold;}
.story .swiper-button-next:focus,
.story .swiper-button-prev:focus {border: none;outline: none;}
.story .swiper2 {
  width: 100%;
  overflow: hidden;
}

.story .swiper-wrapper {
  display: flex;
}

.story .swiper-slide {
  flex-shrink: 0;
  width: auto;
  text-align: center;
}
/* contract */
.contract {
  background-image: url('../images/contact-form-bg.PNG');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0px 0px 0px 1000px rgba(0, 0, 0, .3);
}
.contract .pay {
  border-radius: 15px;
  padding: 30px;
  backdrop-filter: blur(8px);
  background-color: #ffffff59;
}
.contract form {margin-top: 20px;}
.contract form input,.contract form textarea {
  width: 100%;
  margin-block: 12px;
  height: 45px;
  padding-inline: 14px;
  border-radius: 25px;
  border: 1px solid #ddd;
  background-color: var(--basic-color);
}
.contract form input::placeholder,.contract form textarea::placeholder {color: #ccc;}
.contract form textarea {height: 60px;border-radius: 15px;}
.contract form input:focus,.contract form textarea:focus {outline: none;}
.contract form label {display: block;margin-bottom: 0;}
.contract form button {
  background-color: var(--main-color);
  color: var(--basic-color) !important;
  padding: 10px 20px;
  border-radius: 25px;
  display: inline-block;
  border: none;
  width: 100%;
}
.contract form button:focus {outline: none;}
/* footer */
.privacy_policy ul li {margin-block: 15px;}
footer {
  background-color: #222;
  color: var(--basic-color);
}
footer a {color: var(--basic-color);}
footer a:hover {color: var(--basic-color);}
footer ul li {margin-block: 12px;}
/* scroll top */
.scrollTop {
  position: fixed;
  left: 20px;
  bottom: 80px;
  width: auto;
  max-height: 40px;
  cursor: pointer;
  transition: all .3s ease-in-out;
  border-radius: 3px;
  display: none;
  z-index: 1;
  background-color: var(--main-color);
  padding: 9px;
  border: 1px solid var(--main-color);
}
@media(width <= 990px) {
  .contact_us a {margin-right: 50px;}
  .navbar{ margin-inline: 5px;}
  .hero .swiper-slide::before {transform: rotate(0deg);width: 100%;height: 100%;top: 0;left: 0;}
  .hero .swiper-slide,.hero,.services_flipped {height: auto;}
  .services .img img {width: 100%;}
}
@media (max-width: 992px) and (max-width: 1200px) {
  .navbar .navbar-nav .nav-link {
    font-size: 15px;
  }
}
@media (width <= 567px) {
  .pay ul li {
    font-size: 15px;
  }
  p {font-size: 14px;}
  h2,h4,h1 {font-size: 25px;}
  .hero .caption h4 {font-size: 26px;}
  .hero .caption p {font-size: 15px;}
}