:root {
  --blue: #007bff;
  --light-blue: rgba(0, 140, 186, 0.5);
  --orage: #ffcc33;
  --white: #fff;
  --black: #000;
}
.containerContant {
  width: 100%;
  height: 100%;
  background-color: var(--white);
  color: var(--black);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
 .rowContant {
  position: relative;
  top: 25px;
  left: 0;
  width: 50%;
  background: #eee;
  border-radius: 10px;
  padding: 10px;
  transition: .5s;
  box-shadow: 10px 10px 50px 10px var(--light-blue);
}
.rowContant:hover {
  box-shadow: 10px 10px 50px 10px var(--orage);
}
.containerContant .rowContant h1 {
  font-size: 32px;
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
  text-align: center;
}
.rowContant .colContant span {
  font-size: 20px;
  font-weight: bolder;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-align: center;
}
.colContant input {
  width: 100%;
  height: 40px;
  outline: none;
  padding: 10px;
  transition: .8s;
}
.containerContant .rowContant .colContant textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
  padding: 10px;
  transition: .8s;
}
.colContant input::placeholder , textarea::placeholder {
  color: var(--black);
  font-size: 14px;
  font-weight: bolder;
  padding: 10px;
  border-radius: 10px;
}
.containerContant .rowContant .colContant textarea:hover {
  background: var(--light-blue);
  color: var(--white);
  border: 1px solid var(--black);
  border-radius: 10px;
}
.colContant input:hover {
  background: var(--light-blue);
  color: var(--white);
  border: 1px solid var(--black);
  border-radius: 10px;

}