@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Heebo:wght@100..900&display=swap");

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

body {
  width: 100%;
  background-color: #e5eeff;
  display: flex;
  justify-content: center;
}
.container {
  display: grid;
  width: 70%;
  margin-top: 5rem;
  margin-bottom: 5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.sectiom-backgroundblue {
  background-color: #020253;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-column: 3/5;
  grid-row: 1/3;
}

.sectiom-backgroundblue h1 {
  color: #0ee1da;
  font: normal normal bold 61px/80px Assistant;
  text-align: center;
}

.sectiom-backgroundblue p {
  color: #f9f9f9;
  font: normal normal normal 20px/26px Assistant;
  direction: rtl;
  text-align: center;
}

.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 5px 10px 10px #0000004b;
  filter: opacity(0.9);
}

.form-part {
  background-color: #8e097c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  grid-column: 1/3;
  grid-row: 4/7;
}

.form-part form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-part h1 {
  color: #ffffff;
  font: normal normal bold 35px/46px Assistant;
}
.form-part p {
  color: #f9f9f9;
  font: normal normal normal 20px/26px Assistant;
  padding: 1rem;
}
.form-part label {
  text-align: right;
  font: normal normal bold 16px/24px Heebo;
  color: #0ee1da;
}

.form-part input[type="text"],
.form-part input[type="email"] {
  background: #e5eeff 0% 0% no-repeat padding-box;
  opacity: 1;
  border: none;
  padding: 6px 157px;
  border-bottom: solid 4px #0ee1da;
}

.form-part input[type="submit"] {
  background-color: #0ee1da;
  font: normal normal bold 24px/33px Heebo;
  color: #011560;
  opacity: 1;
  border: none;
  margin-top: 10px;
}

#free-text {
  padding: 40px 15px;
}

@media (max-width: 900px) {
  body {
    justify-content: unset;
  }

  .container {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(11, 1fr);
    margin-top: unset;
    margin-bottom: unset;
    gap: unset;
  }
  .sectiom-backgroundblue {
    width: 100vw;
    grid-column: 1/3;
    grid-row: 1/3;
  }
  .sectiom-backgroundblue h1 {
    font: normal normal bold 36px/47px Assistant;
  }
  .sectiom-backgroundblue p {
    font: normal normal normal 20px/26px Assistant;
  }
  .img img {
    padding: 0.3rem;
    box-shadow: none;
    filter: unset;
  }
  .form-part {
    margin-right: 0.5rem;
    grid-column: 1/3;
    grid-row: 7/9;
  }
  .form-part h1 {
    font-size: 26px;
    padding-top: 25px;
  }

  .form-part p {
    font-size: 20px;
    padding: 4px 36px;
  }
  .form-part input[type="text"],
  .form-part input[type="email"] {
    padding: 6px 52px;
    border-bottom: solid 4px #0ee1da;
  }
  .form-part form {
    padding-right: 21px;
  }

  .form-part input[type="submit"] {
    margin-top: 30px;
    margin-bottom: 15px;
  }
}