/* Page Basics */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: Samim;
  background-color: #3b3b3b;
  color: #ffffff;
  direction: rtl;
  overflow-x: hidden;
}

p {
  font-family: Tanha;
}

@font-face {
  font-family: "Tanha";
  src: url("./assets/fonts/tanha/Tanha-FD.eot");
  src: url("./assets/fonts/tanha/Tanha-FD.ttf") format("truetype");
  src: url("./assets/fonts/tanha/Tanha-FD.woff") format("woff");
  src: url("./assets/fonts/tanha/Tanha-FD.woff2") format("woff2");
}

@font-face {
  font-family: "Samim";
  src: url("./assets/fonts/samim/Samim-FD.eot");
  src: url("./assets/fonts/samim/Samim-FD.ttf") format("truetype");
  src: url("./assets/fonts/samim/Samim-FD.woff") format("woff");
  src: url("./assets/fonts/samim/Samim-FD.woff2") format("woff2");
}

/* PC Design */

#barizo-one-page {
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-image: url("./assets/images/texture.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
}

.right-side {
  width: 20%;
  position: fixed;
  right: 0;
}

.right-side img {
  width: 500px;
  margin-right: -100px;
  margin-top: -70px;
}

.left-side {
  width: 20%;
  position: fixed;
  left: 0;
}

.left-side img {
  width: 500px;
  margin: -215px 35px 0 0;
}

.right-image,
.left-image {
  display: block;
}

.top-image,
.bottom-image {
  display: none;
}

.center-side {
  width: 60%;
}

.top-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-top: 10px;
}

.logo {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.discription {
  margin: 10px 0;
}

.discription p {
  font-weight: 300;
  line-height: 1.88;
  text-align: justify;
}

.divider {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.branches {
  margin-bottom: 5vh;
}

.branches-heading {
  display: flex;
  align-items: center;
}

.coming-soon {
  position: absolute;
  top: 159px;
  right: 145px;
  font-size: 30px;
  font-family: Samim;
  color: #ffffff;
}

.branches-heading img,
.branches-heading h3 {
  margin-left: 10px;
}

.branch-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.branch-image {
  border: solid 4px #b2b2b2;
  border-style: dashed;
  border-radius: 24px;
  margin-bottom: 20px;
}

.branch-card img {
  border-radius: 24px;
  margin-bottom: -7px;
  width: 100%;
}

/* .branch-card:nth-last-child(-n + 2) > .branch-image > img {
  filter: brightness(0.4);
} */

.branch-card {
  margin-bottom: 40px;
  width: 40%;
}

.branch-card:nth-child(2n-1) {
  transform: rotate(5deg);
  margin-top: 100px;
}

.branch-card:nth-child(2n) {
  transform: rotate(-5deg);
}

.visit-us {
  padding: 35px 77px 28px 78px;
  border-radius: 60px 60px 0 0;
  background-color: #6b6b6b;
  width: 290px;
  display: flex;
  height: 76px;
  align-items: center;
  margin: 0 auto;
  justify-content: center;
}

.visit-us a {
  display: flex;
  justify-content: center;
  text-decoration: none;
  color: #ffffff;
}

.visit-us p {
  margin-left: 7px;
}

.branch-card:last-child {
  transform: rotate(-2deg);
  margin-top: 15px;
}

.restaurant-name {
  font-size: 20px;
  margin-bottom: 7px;
}

/* Mobile Design */

@media (max-width: 860px) {
  .discription p {
    line-height: 2.14;
  }

  .logo img {
    width: 65.5px;
    height: 62.5px;
  }

  .coming-soon {
    font-size: 25px;
    top: 110px;
    right: 90px;
  }

  .top-container {
    margin-top: 50px;
  }

  .right-side {
    width: 100%;
    z-index: 999;
    top: 0;
    right: unset;
    background-color: #3b3b3b;
    height: 55px;
    background-image: url(./assets/images/texture.svg);
    display: block;
  }

  .left-side {
    width: 100%;
    z-index: 999;
    bottom: 0;
    left: unset;
    background-color: #3b3b3b;
    height: 55px;
    background-image: url(./assets/images/texture.svg);
    display: block;
  }

  .left-side img {
    width: 100%;
    margin: 0;
  }

  .right-side img {
    width: 100%;
    margin: -19px 0 0 0;
  }

  .right-image,
  .left-image {
    display: none;
  }

  .top-image,
  .bottom-image {
    display: block;
  }

  .center-side {
    width: 100%;
    padding: 0 20px;
    font-size: 14px;
  }

  .branches-heading h3 {
    font-size: 20px;
  }

  .branch-card {
    margin: 50px 0;
    width: auto;
  }

  .branch-card:nth-child(2n-1) {
    margin: 30px 0 50px 0;
  }

  .branch-card img {
    width: 310px;
  }

  .visit-us {
    height: 153px;
    padding: 0px 77px 75px 78px;
  }
}

@media (max-width: 860px) and (min-width: 767px) {
  .top-container {
    margin-top: 80px;
  }

  .right-side img {
    margin-top: -40px;
  }

  .right-side,
  .left-side {
    height: 95px;
  }
}