@font-face {
  font-family: main-font;
  src: url(Shabnam.ttf);
}
body {
  font-size: 18px;
  font-family: main-font;
  color: rgb(25, 25, 25);
  direction: rtl;
  text-align: right;
  background-color: white;
}
.header-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(header-background.png);
  gap: 30px;
  height: 100px;
}
.header-a {
  color: rgb(25, 25, 25);
  text-decoration: none;
  transition: 0.3s;
}
.header-a:hover {
  transform: scale(1.1);
}
.first-li-ul-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
  background-color: rgb(250, 250, 250);
  border-radius: 50px;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}
.first-ul {
  line-height: 60px;
}
.vid {
  width: 300px;
  height: auto;
  margin: 30px 0;
  border-radius: 30px;
}
h1 {
  text-align: center;
  font-size: 36px;
}
.add-text {
  text-align: center;
}
.seo-strong {
  font-weight: normal;
}
.btn-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px;
}
.btn {
  background-color: rgba(0, 76, 255, 0.904);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
  width: 300px;
  height: 100px;
  margin: 30px 50px;
  border-radius: 30px;
}
.btn:hover {
  transform: scale(1.1);
}
.a-btn {
  color: rgb(250, 250, 250);
  text-decoration: none;
}
h2 {
  font-size: 24px;
}
.nav-card {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px 0;
}
.card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 300px;
  margin: 5px 20px;
  border: 1px solid rgb(25, 25, 25);
  border-radius: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  transition: 0.3s;
}
.card:hover {
  transform: scale(1.05);
}
.span-card {
  font-size: 30px;
}
.img-slider {
  width: 100%;
  height: 600px;
  margin: 100px 0;
}
.add-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin: 100px 0;
}
.add {
  display: flexbox;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.793);
  width: 500px;
  height: 600px;
  text-align: center;
}
.add-p {
  color: gold;
  margin-top: 50px;
  margin-bottom: 200px;
  font-size: 30px;
}
.span-add {
  color: gold;
  font-size: 30px;
}
.space {
  margin-top: 125px;
  transition: 0.3s;
}
.add-btn {
  background-color: gold;
  color: black;
  text-decoration: none;
  font-size: 70px;
  border-radius: 40px;
}
.space:hover {
  transform: scale(1.1);
}
.responsive-photo {
  display: flex;
  justify-content: center;
  align-items: center;
}
.photo {
  width: 400px;
  height: auto;
  margin: 30px 30px;
  transition: 0.3s;
}
.photo:hover {
  transform: scale(1.1);
}
.nav-reaction {
  display: flexbox;
  background-color: rgb(235, 241, 255);
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 20px 20px;
  height: 100px;
}
.nazar {
  margin-right: 20px;
  margin-top: 20px;
}
.reaction {
  margin: 20px 20px;
}
footer {
  text-align: center;
  background-image: url(header-background.png);
}
.Services {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 40px;
  margin: 50px 20px;
  background-color: rgb(40, 40, 40);
  transition: 0.3s;
  height: 600px;
}
.Services:hover {
  transform: scale(1.01);
}
.p-describ {
  margin-right: 50px;
  color: gold;
  font-size: 60px;
  margin: auto;
}
.img-describ {
  width: 550px;
  border-radius: 50px;
  margin-left: 25px;
}
.nav-couchs {
  display: flexbox;
  justify-content: center;
  align-items: center;
}
.couch {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 200px;
  border: 2px solid black;
  border-radius: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 50px 20px;
}
.couch-img {
  border-radius: 50%;
  width: 500px;
}