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

body {
  background-color: #E5EEFF;
}

section {
  margin-top: 200px;
  margin-bottom: 200px;
}

.container {
  display: grid;
  width: 1000px;
  grid-template-columns: repeat(4, 296px);
  grid-template-rows: repeat(6, 271px);
  margin: 0 auto;
  gap: 20px;
  justify-content: center;
}

.item {
  background-size: cover;
  background-position: center center;
  transition: 1s;
  background-repeat: no-repeat;
}

.item1 {
  background-image: url(../images/item1.png);
}

.item2 {
  background-color: darkblue;
  background-image: url(../images/item2.png);
}

.item3 {
  background-color: darkblue;
  background-image: url(../images/item3.png);
}

.item4 {
  display: flex;
  background-color: #020253;
  grid-row: 1/3;
  grid-column: 3/5;
  flex-direction: column;
  justify-content: center;
  padding: 80px;
}

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

.item4 p {
  text-align: center;
  font: normal normal normal 20px/26px Assistant;
  color: #F9F9F9;
}

.item5 {
  background-color: darkblue;
  background-image: url(../images/item5.png);
}

.item6 {
  background-color: darkblue;
  background-image: url(../images/item6.png);
}

.item7 {
  background-color: darkblue;
  background-image: url(../images/item7.png);
}

.item8 {
  background-color: darkblue;
  background-image: url(../images/item8.png);
}

.item9 {
  background-color: darkblue;
  background-image: url(../images/item9.png);
}

.item10 {
  background-color: #8E097C;
  grid-column: 1/3;
  grid-row: 4/7;
}

.item10 h1 {
  text-align: center;
  font: normal normal bold 35px/46px Assistant;
  color: #FFFFFF;
}

.item10 p {
  text-align: center;
  font: normal normal normal 20px/26px Assistant;
  color: #F9F9F9;
}

.item11 {
  background-color: darkblue;
  background-image: url(../images/item11.png);
}

.item12 {
  background-color: darkblue;
  background-image: url(../images/item12.png);
}

.item13 {
  background-color: darkblue;
  background-image: url(../images/item13.png);
}

.item14 {
  background-color: darkblue;
  background-image: url(../images/item14.png);
}

.item15 {
  background-color: darkblue;
  background-image: url(../images/item15.png);
}

.item16 {
  background-color: darkblue;
  background-image: url(../images/item16.png);
}

.container-form {
  padding: 60px;
  text-align: right;
  font: normal normal bold 16px/24px Heebo;
  color: #0EE1DA;
}

.form {
  margin-top: 80px;
}

input {
  width: 100%;
  height: 60px;
  background: #E5EEFF 0% 0% no-repeat padding-box;
  border: 0;
  border-bottom: 5px solid #0EE1DA;
  margin-bottom: 20px;
  margin-top: 5px;
  direction: rtl;
  font-size: 1.5rem;
  padding: 15px;
}

textarea {
  overflow: hidden;
  resize: none;
  width: 100%;
  font-size: 1.5rem;
  font-family: Heebo;
  margin-top: 5px;
  height: 172px;
  background: #E5EEFF 0% 0% no-repeat padding-box;
  border: 0;
  border-bottom: 5px solid #0EE1DA;
  direction: rtl;
  padding: 15px;
}

button {
  margin-top: 10px;
  width: 100%;
  height: 60px;
  /* UI Properties */
  border: 0;
  background: #0EE1DA 0% 0% no-repeat padding-box;
  font: normal normal bold 24px/33px Heebo;
  letter-spacing: 0.36px;
  color: #011560;
}

@media only screen and (max-width: 1250px) {
  section {
    margin: 0;
  }
  .container {
    width: 100vw;
    grid-template-columns: repeat(4, 23%);
    grid-template-rows: repeat(6, 250px);
    padding: 5vw 0 5vw 0;
  }
  .item4 {
    justify-content: center;
    grid-row: 1/3;
    grid-column: 3/5;
  }
  .item10 {
    grid-column: 1/3;
    grid-row: 4/7;
  }
}
@media only screen and (max-width: 968px) {
  section {
    margin: 0;
  }
  .container {
    width: 100vw;
    grid-template-columns: repeat(4, 25%);
    grid-template-rows: repeat(6, 250px);
    padding: 5vw;
  }
  .item4 {
    justify-content: center;
    grid-row: 1/3;
    grid-column: 3/5;
  }
  .item10 {
    grid-column: 1/3;
    grid-row: 4/7;
  }
  .container-form {
    padding: 25px;
    text-align: right;
    font: normal normal bold 16px/24px Heebo;
    color: #0EE1DA;
  }
}
@media only screen and (max-width: 576px) {
  section {
    margin: 0;
  }
  .container {
    width: 100vw;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(10, 250px);
    padding: 5vw;
  }
  .item4 {
    justify-content: center;
    grid-row: 1/3;
    grid-column: 1/3;
    margin: -5vw;
    margin-bottom: 5vw;
  }
  .item10 {
    grid-column: 1/3;
    grid-row: 5/8;
  }
}/*# sourceMappingURL=main.css.map */