@import "./reset.css";
@import "./font-face.css";

:root {
  --ui-font: "Vazir", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

/* background-color: #970000; */
/* background-color: #680000; */

body {
  /* font-family: var(--ui-font); */
  font-family: "Vazir", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  background-color: #761113;
  width: 100vw;
  height: 100vh;
  direction: rtl;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-image: linear-gradient(
    rgba(118, 17, 19, 0.5),
    rgba(150, 17, 19, 0.8)
  );
  /* url("../images/bg-wavy.png"); */
  background-repeat: no-repeat;
  background-size: auto 100vh;
  background-position-x: right;
  background-position-y: bottom;
  overflow-x: hidden;
}

header {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

header img {
  width: clamp(14rem, 12rem + 12vw, 22rem);
}

main {
  width: 100%;
}

.container {
  width: 100%;
  display: flex;
}

.text-container {
  width: 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-container .text {
  text-align: center;
}

.text-container .text h1 {
  font-size: clamp(1.3rem, -2.8rem + 8vw, 2.8rem);
  font-weight: 900;
  margin: 1rem 0;
}

.text-container .text p {
  font-size: clamp(0.9rem, -2.3rem + 6vw, 2rem);
  font-weight: 400;
  margin: 0.25rem 0;
}

.text-container .text .text-contact-title {
  text-align: center;
  margin-top: clamp(1.5rem, -1.5rem + 6vw, 2rem);
}

.text-container .text .text-contact-title p {
  font-size: clamp(0.8rem, -2.5rem + 6vw, 1.8rem);
  font-weight: 500;
}

.text-container .text .text-contact-title .text-contact-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  margin: 0.5rem 0;
}

.text-container .text .text-contact-title .text-contact-info p {
  font-size: clamp(0.8rem, -2.5rem + 6vw, 1.8rem);
  font-weight: 500;
}

/* .text-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: end;
}

.text-image img {
  max-width: 100%;
} */

.products {
  width: 100%;
  display: flex;
  justify-content: end;
}

.products img {
  width: 100%;
  max-width: 400px;
  /* position: fixed; */
  /* bottom: 0; */
  /* left: 0; */
}

@media screen and (min-width: 576px) {
  .products img {
    max-width: 500px;
  }
}

@media screen and (min-width: 768px) {
  .products img {
    max-width: 650px;
  }
}

/* For devices with a minimum width of 992px (Large) */
@media screen and (min-width: 992px) {
  body {
    background-image: url("../images/factory.png");
    /* background: linear-gradient(to top, #761113 0%, rgba(118, 17, 19, 0) 100%); */
    background-repeat: no-repeat;
    background-position-x: left;
    background-position-y: top;
    background-size: auto calc(1.5 * 100vh);
  }
  .text-container {
    align-items: flex-start;
    padding: 4rem 12rem;
  }
  .products img {
    max-width: 800px;
  }
}