* {
  direction: rtl;
  font-family: 'Cairo', sans-serif;
  color: #4d4d4d;
  box-sizing: border-box;
}

body {
  position: absolute;
  right: -8px;
  bottom: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

header {
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.158);
  padding: 5px;
  position: fixed;
  width: 100%;
  height: 113px;
  display: flex;
  justify-content: space-between;
}

header div {
  margin-right: 10px;
  display: inline-block;
}

header a {
  text-decoration: none;
  display: flex;
  align-items: center;
}

header h2 {
  color: white;
  margin-bottom: 0;
  font-weight: 600;
}

header h3 {
  color: white;
  margin-top: -5px;
  font-weight: 400;
}

header ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: row-reverse;
  width: 280px;
}

.logo {
  width: 120px;
}

.add {
  color: white;
  background-color: rgb(21, 113, 250);
  z-index: 10;
  padding: 0 20px;
  border-radius: 6px;
  color: white;
  font-size: x-large;
}

.profile {
  z-index: 10;
}

.profile span {
  color: rgb(21, 113, 250);
  font-size: 50px;
}

.overlay {
  background-color: black;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.title_apartment {
  position: relative;
  height: 50%;
  background-image: url(../images/apartment.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position-y: 60%;
  margin-bottom: 30px;
}

.title_house {
  position: relative;
  height: 50%;
  background-image: url(../images/house.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_villa {
  position: relative;
  height: 50%;
  background-image: url(../images/villa1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_townhouse {
  position: relative;
  height: 50%;
  background-image: url(../images/townhouse.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_penthouse {
  position: relative;
  height: 50%;
  background-image: url(../images/penthouse.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_hotel-apartment {
  position: relative;
  height: 50%;
  background-image: url(../images/hotel-apartment.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_residential-land {
  position: relative;
  height: 50%;
  background-image: url(../images/residential-land.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_residential-building {
  position: relative;
  height: 50%;
  background-image: url(../images/residential-building.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_others {
  position: relative;
  background: linear-gradient(122deg, rgba(42, 155, 255, 1) 30%, rgba(193, 206, 217, 1) 57%, rgba(200, 208, 215, 1) 69%, rgba(233, 229, 229, 1) 89%, rgba(255, 255, 255, 1) 100%);
  height: 50%;
  margin-bottom: 30px;
}

.title_office {
  position: relative;
  height: 50%;
  background-image: url(../images/office.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_store {
  position: relative;
  height: 50%;
  background-image: url(../images/store.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_commercial-land {
  position: relative;
  height: 50%;
  background-image: url(../images/commercial-land.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_workers-housing {
  position: relative;
  height: 50%;
  background-image: url(../images/workers-housing.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_commercial-building {
  position: relative;
  height: 50%;
  background-image: url(../images/commercial-building.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_factories {
  position: relative;
  height: 50%;
  background-image: url(../images/factories.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_industrial-land {
  position: relative;
  height: 50%;
  background-image: url(../images/industrial-land.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_multi-use-land {
  position: relative;
  height: 50%;
  background-image: url(../images/land.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}

.title_search {
  position: relative;
  height: 50%;
  background-image: url(../images/search2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-bottom: 30px;
}




.title_apartment h1,
.title_house h1,
.title_villa h1,
.title_townhouse h1,
.title_penthouse h1,
.title_hotel-apartment h1,
.title_residential-land h1,
.title_residential-building h1,
.title_others h1,
.title_office h1,
.title_store h1,
.title_commercial-land h1,
.title_workers-housing h1,
.title_commercial-building h1,
.title_factories h1,
.title_industrial-land h1,
.title_multi-use-land h1,
.title_search h1 {
  position: relative;
  color: white;
  padding-right: 40px;
  padding-top: 10%;
}

.title_apartment .border,
.title_house .border,
.title_villa .border,
.title_townhouse .border,
.title_penthouse .border,
.title_hotel-apartment .border,
.title_residential-land .border,
.title_residential-building .border,
.title_others .border,
.title_office .border,
.title_store .border,
.title_commercial-land .border,
.title_workers-housing .border,
.title_commercial-building .border,
.title_factories .border,
.title_industrial-land .border,
.title_multi-use-land .border,
.title_search .border {
  position: relative;
  margin-right: 40px;
  width: 90px;
  border-bottom: 7px solid rgb(76, 138, 253);
  z-index: 100;
}

/* .content {
  margin-left: 100px;
  margin-right: 100px;
  display: flex;
} */

.big {
  /* flex-grow: 1; */
  margin-right: 30px;
  display: flex;
  flex-direction: column;
}

.show_ad {
  display: flex;
  margin: 10px;
  border: 1px solid rgb(209, 208, 208);
  border-radius: 10px;
  width: fit-content;
}


swiper-container {
  width: 350px;
  height: 250px;
}

swiper-slide img {
  border-radius: 0px 7px 7px 0px;
  display: block;
  width: 100%;
  height: 100%;
}

swiper-slide video {
  border-radius: 0px 7px 7px 0px;
  display: block;
  height: 100%;
}

.show {
  text-decoration: none;
  color: black;
}

.info {
  margin-right: 20px;
  width: 400px;
}

p {
  margin-bottom: 5px;
  max-width: 380px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.area_img,
.type_img,
.sale_rent_img,
.adress_img {
  width: 25px;
  margin-bottom: -7px;
}

ion-icon {
  font-size: x-large;
  color: white;
}

.contact {
  text-decoration: none;
  background-color: #3e98ff;
  font-size: larger;
  padding: 4px 41px;
  border-radius: 4px;
  margin: 4px;
  height: 32px;
  display: inline-block;
}

.contact span {
  color: white;
}

.separator {
  border-left: 1px solid black;
  margin-left: 10px;
  padding-left: 5px;
}

.sorry {
  text-align: center;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.pagination a {
  display: inline-block;
  padding: 3px 10px;
  margin: 10px 0;
  border: 1.5px solid gray;
  text-decoration: none;
}

.pagination a {
  text-decoration: none;
}

.pagination a:hover {
  border: 1.5px solid #389ae1;
}


.pagination a.current {
  color: white;
  background-color: #389ae1;
  font-weight: bold;
}

@media (max-width:694px) {
  .logo {
    width: 109px;
  }

  .slogen_header {
    display: none;
  }

  .add {
    padding: 0 10px;
  }

  .title_apartment,
  .title_house,
  .title_villa,
  .title_townhouse,
  .title_penthouse,
  .title_hotel-apartment,
  .title_residential-land,
  .title_residential-building,
  .title_others,
  .title_office,
  .title_store,
  .title_commercial-land,
  .title_workers-housing,
  .title_commercial-building,
  .title_factories,
  .title_industrial-land,
  .title_multi-use-land,
  .title_search {
    height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-items: flex-start;
    justify-content: center;
  }

  .show_ad {
    flex-direction: column;
    align-items: center
  }

  .info {
    width: 330px;
  }

  .contact {
    padding: 4px 38px;
  }

  swiper-slide img {
    border-radius: 7px;
  }

  p {
    width: 300px;
  }

  .big {
    margin-right: 0;
    align-items: center;
  }
}