@font-face {
  font-family: "Ploni-Regular";
  src: url("./fonts/ploni-regular-aaa.woff2");
}

@font-face {
  font-family: "Ploni-Bold";
  src: url("./fonts/ploni-bold-aaa.woff2");
}

@font-face {
  font-family: "Ploni-Medium";
  src: url("./fonts/ploni-medium-aaa.woff2");
}

@font-face {
  font-family: "Ploni-Black";
  src: url("./fonts/ploni-black-aaa.woff2");
}

:root {
  --first-section-height: min(100vh, 55.699vw);
  --first-section-width: min(69.83vw, 125.37vh);
  --sec-section-width: calc(100vw - var(--first-section-width));
}

html,
body {
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-family: "Ploni-Regular";
  color: #123985;
  direction: rtl;
  line-height: 1;
}

.main-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  gap: 0;
}

.right {
  height: var(--first-section-height);
  width: var(--first-section-width);
  background-image: url("./images/bg-desk-min.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top right;
  font-size: 2vw;
  font-family: "Ploni-Medium";
}
.title-container {
  position: relative;
  top: 11.5vw;
  right: 4vw;
}
.title {
  font-family: "Ploni-Black";
  font-size: 6.5vw;
  line-height: 0.7;
}
.bold {
  font-family: "Ploni-Black";
}

.left {
  width: var(--sec-section-width);
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  margin-top: 8vw;
}
.form {
  width: 70%;
  display: flex;
  gap: 2.5vw;
  flex-direction: column;
  color: #123985;
  font-size: 2vw;
  font-family: "Ploni-Medium";
}
.form input {
  font-size: 1.5vw;
  font-family: "Ploni-Medium";
  font-size: 1.7vw;
  border: 0.3vw solid #44b4d5;
  border-radius: 1vw;
  padding: 0.7vw 1vw;

  &::placeholder {
    color: #123985;
  }
}
.form button {
  background: #44b4d5;
  font-family: "Ploni-Bold";
  color: #ffffff;
  border: none;
  border-radius: 1vw;
  font-size: 3vw;
  cursor: pointer;
}
.form button:disabled {
  opacity: 0.8;
}
.form p {
  margin-top: -1.7vw;
}

.thanks {
  text-align: center;
  width: 70%;
  font-size: 3vw;
}

.error {
  border: 0.3vw solid tomato !important;
  color: tomato;
  /* font-size: 2vw !important; */
}
.error::placeholder {
  color: tomato !important;
}

.mobile {
  display: none;
}

.desktop {
  display: block;
}

.hide {
  display: none;
}

@media screen and (max-width: 768px) {
  .main-container {
    width: 100vw;
    height: unset;
    display: flex;
    flex-direction: column;
  }
  .right {
    background-image: url("./images/bg-mob-min.png");
    background-size: 100vw;
    background-repeat: no-repeat;
    background-position: top;
    width: 100vw;
    height: calc(100vw / 1.41);
  }
  .title-container {
    position: relative;
    top: 18vw;
    right: unset;
    /* left: 18vw; */
    padding-right: 5vw;
  }
  .title {
    font-size: 10vw;
  }
  .subtitle {
    font-size: 4vw;
  }

  .left {
    height: unset;
    margin-top: unset;
    font-size: 5vw;
    font-family: "Ploni-Black";
    width: 100vw;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .form {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 70%;
    font-size: 4vw;
  }
  .form input {
    font-size: 4vw;
    width: 100%;
    border: 2px solid #44b4d5;
    border-radius: 2vw;
  }
  .form button {
    font-size: 7vw;
    width: 100%;
    border-radius: 2vw;
  }

  .thanks {
    text-align: center;
    width: 70%;
    font-size: 5vw;
    font-family: "Ploni-Regular";
  }
  .error {
    font-size: 4vw !important;
  }
  .mobile {
    display: block;
  }

  .desktop {
    display: none;
  }
}