:root {
  --sky-blue: #dee9f6;
  --main-color: #3d81bf;
  --wide-bule: #3873b4;

  --dark-blue: #24578f;
  --dark-purple: #753073;
  --card-purple: #9f2463;
  --footer: #373737;
  --light-yellow: #fbd34a;
  --dark-yellow: #ffcd03;
}

.navbar-menu {
  margin-inline-end: 20px;
  font-size: 13px;
}
a {
  text-decoration: none;
}

.ar {
  direction: rtl;
}
.en {
  direction: ltr;
}

.img-wrapper {
  width: 100%;
  position: relative;
  background-image: url("../img/BG.png");

  overflow: hidden;
  background-size: cover;
}
.absoulte {
  position: absolute;
}
.relative {
  position: relative;
}
.text-responsive {
  width: 1000px;
}
.text-dark-yellow {
  color: var(--dark-yellow);
}
.card {
  left: 45%;
  bottom: 24%;
  width: 25%;
  background-color: transparent;
  border: 0;
  z-index: 2;
}
.sim {
  left: 72%;
  bottom: 22%;
  width: 20%;
  background-color: transparent;
  border: 0;
}

.text-yellow {
  color: var(--light-yellow);
}
.text-blue {
  color: var(--main-color);
}
.text-wide-blue {
  color: var(--wide-bule);
}
.bg-yellow {
  background-color: var(--light-yellow);
}
.text-purple {
  color: var(--dark-purple);
}
.bg-purple {
  background-color: var(--dark-purple);
}
.logo {
  margin: 20px;
  width: 100%;
}
.right_lines {
  right: 50px;
  top: 0;
  width: 80px;
  position: absolute;
}
.left_lines {
  left: 50px;
  bottom: 0;
  width: 80px;
  position: absolute;
}

@media only screen and (max-width: 600px) {
  .logo {
    width: 100px;
  }
  .cards-width {
    width: 100%;
  }
  .text-responsive {
    width: 70%;
  }
}
@media screen and (max-width: 500px) {
  .navbar-menu {
    font-size: 8px;
  }
  .social_icons {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  .right_lines {
    display: none;
  }
  .left_lines {
    display: none;
  }
  .card {
    display: none;
  }
  .sim {
    display: none;
  }
}
@media only screen and (min-width: 600px) {
  .navbar-menu {
    margin-inline-end: 100px;
  }
  .img-wrapper {
    height: 500px;
  }
  .cards-width {
    width: 100%;
  }
  .text-responsive {
    width: 70%;
  }
}

@media only screen and (min-width: 1000px) {
  .navbar-menu {
    margin-inline-end: 300px;
  }
  .img-wrapper {
    width: 100%;
    height: 100vh;
  }
  .cards-width {
    width: 50%;
  }
  .text-responsive {
    width: 1000px;
  }
}