@import url("../fonts/stylesheet.css");
:root {
  --c1: #e6e6e6;
  --c2: #d2d2d2;
  --c3: #000;
  --c4: #1e1e1e;
  --fontsize: 24pt;
  --padding: 10px;
  --gap: 15px;
}
@media (min-width: 320px) and (max-width: 669px) {
  :root {
    --fontsize: 12pt;
    --padding: 15px;
  }
}
@media (min-width: 670px) and (max-width: 1023px) {
  :root {
    --fontsize: 18pt;
    --padding: 25px;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --fontsize: 24pt;
    --padding: 50px;
  }
}
@media (min-width: 1440px) {
  :root {
    --fontsize: 24pt;
    --padding: 100px;
  }
}

* {
  box-sizing: border-box;
}
*:not(:is(i)) {
  transition: all ease 0.3s;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
  font-family: ray, ssp;
  color: #171717;
  direction: rtl;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 320px) and (max-width: 669px) {
  header img {
    width: 200px;
    margin-block: calc(var(--padding) * 2);
  }
}
@media (min-width: 670px) and (max-width: 1023px) {
  header img {
    width: 200px;
    margin-block: calc(var(--padding) * 2);
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  header img {
    width: 300px;
    margin-block: calc(var(--padding) * 2);
  }
}
@media (min-width: 1440px) {
  header img {
    width: 400px;
    margin-block: calc(var(--padding) * 2);
  }
}

.slider {
  position: absolute;
  inset: 0;
}
.slider .container {
  position: absolute;
  inset: 0;
}
.slider .container .item {
  position: absolute;
  inset: 0;
  transition-duration: 1s;
}
.slider .container .item:not(.active) {
  opacity: 0;
}
.slider .container .item.active {
  opacity: 1;
}
.slider .container .item {
  background-image: var(--url);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

@media (min-width: 320px) and (max-width: 669px) {
  main {
    width: calc(100% - 2 * var(--padding));
  }
}
@media (min-width: 670px) and (max-width: 1023px) {
  main {
    width: 600px;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  main {
    width: 900px;
  }
}
@media (min-width: 1440px) {
  main {
    width: 1200px;
  }
}
main {
  display: inline-block;
}

@media (min-width: 320px) and (max-width: 669px) {
  .main {
    width: 100%;
    display: grid;
    gap: var(--gap);
    grid-template-areas: "l l" "t t" "f e" "s s";
    grid-template-columns: 0.5fr 0.5fr;
  }
  .main > .top {
    aspect-ratio: 1/1;
  }
  .main > .logo {
    aspect-ratio: 1/1;
  }
  .main > .slider-base {
    aspect-ratio: 1/1;
  }
  .main > .fa-sub {
    aspect-ratio: 1/1;
  }
  .main > .end-sub {
    aspect-ratio: 1/1;
  }
}
@media (min-width: 670px) and (max-width: 1023px) {
  .main {
    width: 100%;
    display: grid;
    gap: var(--gap);
    grid-template-areas: "t l" "s s" "f e";
    grid-template-columns: 0.5fr 0.5fr;
  }
  .main > .top {
    aspect-ratio: 1/1;
  }
  .main > .logo {
    aspect-ratio: 1/1;
  }
  .main > .slider-base {
    aspect-ratio: 1/1;
  }
  .main > .fa-sub {
    aspect-ratio: 1/1;
  }
  .main > .end-sub {
    aspect-ratio: 1/1;
  }
}
@media (min-width: 1440px) {
  .main {
    aspect-ratio: 1/1;
    width: calc(100% - var(--gap));
    display: grid;
    gap: var(--gap);
    grid-template-areas: "t l" "s f" "s e";
    grid-template-columns: 50% 50%;
    grid-template-rows: 50% 25% 25%;
  }
}
.main > * {
  border-radius: 20px;
  overflow: hidden;
}
.main > .top {
  grid-area: t;
  display: flex;
  flex-flow: column;
  position: relative;
  background-image: linear-gradient(135deg, var(--c2), var(--c1));
}
.main > .top > div {
  flex: 1;
  display: flex;
  align-items: start;
  flex-flow: column;
  padding: var(--padding);
  font-size: var(--fontsize);
  line-height: 1em;
}
@media (min-width: 320px) and (max-width: 669px) {
  .main > .top > div {
    padding: 15%;
  }
}
.main > .top > div {
  position: absolute;
  left: 0%;
  width: 100%;
}
.main > .top > div:first-of-type {
  top: 0px;
}
.main > .top > div:last-of-type {
  direction: ltr;
  bottom: 0px;
  font-family: ssp;
}
.main > .top > div .bold {
  font-weight: bold;
  margin-bottom: var(--gap);
}
.main > .logo {
  grid-area: l;
  background-image: linear-gradient(135deg, var(--c4), var(--c3));
  display: grid;
  place-items: center;
}
.main > .logo img {
  width: 20%;
}
.main > .slider-base {
  grid-area: s;
  background-color: var(--c1);
  position: relative;
}
.main > .slider-base .item {
  position: absolute;
  inset: 0;
}
.main > .fa-sub {
  grid-area: f;
}
.main > .fa-sub div {
  justify-content: start;
  align-items: start;
}
.main > .en-sub {
  grid-area: e;
  background-image: linear-gradient(135deg, var(--c3), var(--c4));
  color: #FFF;
  direction: ltr;
  font-family: ssp;
}
.main > .en-sub div {
  justify-content: start;
  align-items: start;
}
.main .en-sub,
.main .fa-sub {
  font-size: var(--fontsize);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.main .en-sub div,
.main .fa-sub div {
  display: flex;
  flex-flow: column;
  line-height: 1em;
}

section:has(form) {
  border-radius: 20px;
  margin-top: var(--gap);
  background-image: linear-gradient(45deg, var(--c2), var(--c1));
}

form {
  padding-block: var(--padding);
  width: 250px;
  display: inline-flex;
  flex-flow: column;
}
form p {
  line-height: 0.9em;
}
form {
  font-size: calc(var(--fontsize) / 1.5);
}
@media (min-width: 320px) and (max-width: 669px) {
  form {
    font-size: calc(var(--fontsize));
  }
  form p {
    line-height: 1.1em;
  }
}
form {
  text-align: start;
}
form input {
  margin-bottom: var(--gap);
}
form input, form button {
  display: block;
  border-radius: 10px;
  padding: 10px;
  border: 0px;
}
form button {
  border: 0px;
  background-color: var(--c3);
  color: var(--c1);
  font-size: calc(var(--fontsize) * 1.3);
  font-weight: bold;
  font-family: inherit;
  margin-top: var(--gap);
}

footer {
  background-color: var(--c4);
  border-radius: 20px;
  color: #FFF;
  padding-block: var(--padding);
  margin-top: var(--gap);
}
footer img {
  margin-bottom: var(--gap);
}
@media (min-width: 320px) and (max-width: 669px) {
  footer img {
    width: 200px;
  }
}
@media (min-width: 670px) and (max-width: 1023px) {
  footer img {
    width: 200px;
  }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  footer img {
    width: 300px;
  }
}
@media (min-width: 1440px) {
  footer img {
    width: 400px;
  }
}
footer p {
  padding: 0px;
  margin: 0px;
}
footer {
  margin-bottom: var(--padding);
}/*# sourceMappingURL=style.css.map */