@font-face {
  font-family: "Cygre-Regular";
  src: url("../fonts/Cygre-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Cygre-ExtraBold";
  src: url("../fonts/Cygre-ExtraBold.ttf") format("truetype");
}
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
}

@media screen and (max-width: 748px) {
  .container {
    max-width: 748px;
    padding: 0 24px;
  }
}
@media screen and (max-width: 360px) {
  .container {
    max-width: 360px;
    padding: 0 20px;
  }
}
.h1 {
  font-family: var(--font-bold);
  font-size: var(--h1);
  text-align: center;
}

.h2 {
  font-family: var(--font-bold);
  font-size: var(--h2);
  text-transform: uppercase;
}

.h3 {
  font-family: var(--font-bold);
  font-size: var(--h3);
  text-transform: uppercase;
}

.p1 {
  font-family: var(--font);
  font-size: var(--p1);
  text-align: center;
}

.p2 {
  font-family: var(--font);
  font-size: var(--p2);
}

.span {
  font-family: var(--font);
  font-size: var(--span);
  text-transform: uppercase;
}

.btn {
  border-radius: 6px;
  font-size: 16px;
  padding: 10px 20px 8px;
  transition: all 0.5s ease;
  opacity: 1;
  text-transform: uppercase;
  text-align: center;
  font-family: var(--font-bold);
}

.btn:hover {
  opacity: 0.8;
}

.btn-main {
  background: var(--gradient);
  color: var(--white);
}

.btn-second {
  border: 1px solid var(--black);
  color: var(--black);
}

@media screen and (max-width: 360px) {
  .btn {
    font-size: 14px;
  }
}
.m-block {
  margin-bottom: 150px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-60 {
  margin-bottom: 60px;
}

@media screen and (max-width: 360px) {
  .m-block {
    margin-bottom: 120px;
  }
}
input:focus {
  outline: none;
  border: 1px solid var(--black);
}

input {
  border-radius: 4px;
  border: 1px solid rgba(33, 30, 30, 0.5);
  padding: 12px 12px 15px 12px;
  text-align: left;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.3;
  color: var(--black);
}

input::-moz-placeholder {
  color: rgba(33, 30, 30, 0.5);
  text-align: left;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.3;
}

input::placeholder {
  color: rgba(33, 30, 30, 0.5);
  text-align: left;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.3;
}

input.error {
  border: 1px solid var(--red);
}

input.success {
  border: 1px solid var(--green);
}/*# sourceMappingURL=ui-kit.css.map */