body {
  font-family: Roboto;
}
.outlined-input-field {
  position: relative;
  font-family: Roboto;
  font-style: italic;
  letter-spacing: 0.5px;
  margin-top: 10px;
}

.outlined-input-field i {
  position: absolute;
  top: 0.8rem;
}
.outlined-input-field .error-icon,
.outlined-input-field .helper-text {
  display: none;
}
.outlined-input-field label {
  color: #3b3b3bb5;
  cursor: text;
  position: absolute;
  top: 17px;
  left: 0;
  font-weight: normal;
  font-size: 16px;
  transition: all ease-in 0.1s;
}

.disabled {
  background-color: rgb(0 0 0 / 14%);
}
.disabledlabed {
  background-color: hsl(0, 0%, 100%);
}
.outlined-input-field .outlined-text-field {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1pt solid;

  padding: 11px 5px 2px 7px;
  margin-top: 12px;
  width: 100%;
  transition: all ease-in 0.1s;
  border-width: 2px;
  color: #383838;
  border-color: rgba(120, 130, 140, 0.13);
  border-image: initial;
}

.outlined-input-field .outlined-text-field:hover,
.outlined-input-field .outlined-select-field:hover {
  border-color: #2a2e7a;
}
.outlined-input-field .outlined-text-field:focus,
.outlined-input-field .outlined-select-field:focus {
  caret-color: #2a2e7a;
  color: #2a2e7a;
  outline: none;
  outline-offset: 0;
  /* padding: calc(1rem - 4px); */
}
.outlined-input-field .outlined-text-field:focus + label,
.outlined-input-field .outlined-select-field:focus + label {
  color: #2a2e7a;
}
.outlined-input-field .outlined-text-field:hover + label,
.outlined-input-field .outlined-select-field:hover + label {
  color: #2a2e7a;
}

.error-input-field .outlined-text-field {
  border-color: #dc0000;
  margin-bottom: 1rem;
}
.error-input-field .outlined-text-field + label {
  color: #dc0000;
}
.error-input-field .outlined-text-field ~ .error-icon {
  display: initial;
  color: #dc0000;
  position: absolute;
  top: 20px;
  right: 1rem;
  font-size: 20px;
}
.error-input-field .outlined-text-field ~ .visibility {
  display: initial;
  color: #dc0000;
  position: absolute;
  top: 1rem;
  right: 1rem;
}
.error-input-field .outlined-text-field ~ .helper-text {
  display: initial;
  color: #dc0000;
  font-size: 0.75rem;
  /* font-weight: 600; */
  font-style: italic;
  position: absolute;
  top: 3.1rem;
  left: 0;
}
.error-input-field .outlined-text-field:focus {
  border-color: #dc0000;
  caret-color: #dc0000;
}
.error-input-field .outlined-text-field:focus + label {
  color: #dc0000;
}

.outlined-select-field {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #00000000;
  border: 1pt solid #757575;
  border-radius: 4px;
  color: #757575;
  /* margin-left: 2rem; */
  padding: 1rem;
  width: 100%;
}
.outlined-select-field ~ .dropdown-icon {
  top: 1rem;
  right: 2.5rem;
}

/* ----------------------------------------------------------------------
  Material Design Raised Buttons 
------------------------------------------------------------------------- */
.rkmd-btn {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 35px;
  line-height: 35px;
  padding: 0 1.5rem;
  color: #424242;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 0.8px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 2px;
  transition: all 0.3s ease-out;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
}
.rkmd-btn:hover {
  text-decoration: none;
  box-shadow: 0 4px 10px 0px rgba(0, 0, 0, 0.225);
}

/* ----------------------------------------------------------------------
  Material Design Fab Buttons 
------------------------------------------------------------------------- */
.rkmd-btn.btn-fab,
.rkmd-btn.btn-fab-mini {
  overflow: hidden;
  position: relative;
  margin: auto;
  padding: 0;
  line-height: normal;
  border-radius: 50%;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.3);
}
.rkmd-btn.btn-fab:hover,
.rkmd-btn.btn-fab-mini:hover {
  box-shadow: 0 4px 11px 0px rgba(0, 0, 0, 0.375);
}
.rkmd-btn.btn-fab i,
.rkmd-btn.btn-fab-mini i {
  display: inline-block;
  float: none;
  width: inherit;
  margin: 0;
  font-size: inherit;
  text-align: center;
  line-height: none;
  vertical-align: middle;
}
.rkmd-btn.btn-fab {
  width: 56px;
  height: 56px;
  font-size: 28px;
}
.rkmd-btn.btn-fab-mini {
  width: 40px;
  height: 40px;
  font-size: 24px;
}

/* Buttons Color */
.rkmd-btn.btn-lightBlue {
  color: #fff;
  background-color: #03a9f4;
}
.rkmd-btn.btn-lightBlue:hover {
  background-color: #23b9fc;
}
.rkmd-btn.btn-white {
  color: #444;
  background-color: #fff;
}
.rkmd-btn.btn-white:hover {
  background-color: #fafafa;
}
.rkmd-btn.btn-black {
  color: #bdbdbd;
  background-color: #111;
}
.rkmd-btn.btn-black:hover {
  background-color: #36351b;
}
.rkmd-btn.btn-grey {
  color: #757575;
  background-color: #f5f5f5;
}
.rkmd-btn.btn-grey:hover {
  background-color: #ebebeb;
}
.rkmd-btn.btn-orange {
  color: #fff;
  background-color: #ff9800;
}
.rkmd-btn.btn-orange:hover {
  background-color: #ffa829;
}
.rkmd-btn.btn-amber {
  color: #fff;
  background-color: #ffc107;
}
.rkmd-btn.btn-amber:hover {
  background-color: #ffcb30;
}
.rkmd-btn.btn-green {
  color: #fff;
  background-color: #4caf50;
}
.rkmd-btn.btn-green:hover {
  background-color: #67bd6a;
}
.rkmd-btn.btn-teal {
  color: #fff;
  background-color: #009688;
}
.rkmd-btn.btn-teal:hover {
  background-color: #00bfad;
}
.rkmd-btn.btn-cyan {
  color: #fff;
  background-color: #00bcd4;
}
.rkmd-btn.btn-cyan:hover {
  background-color: #00e0fd;
}
.rkmd-btn.btn-indigo {
  color: #fff;
  background-color: #3f51b5;
}
.rkmd-btn.btn-indigo:hover {
  background-color: #5869c5;
}
.rkmd-btn.btn-deepPurple {
  color: #fff;
  background-color: #673ab7;
}
.rkmd-btn.btn-deepPurple:hover {
  background-color: #7c52c8;
}
.rkmd-btn.btn-pink {
  color: #fff;
  background-color: #e91e63;
}
.rkmd-btn.btn-pink:hover {
  background-color: #ed437d;
}
.rkmd-btn.btn-red {
  color: #fff;
  background-color: #f44336;
}
.rkmd-btn.btn-red:hover {
  background-color: #f6675d;
}
.rkmd-btn.btn-yellow {
  color: #fff;
  background-color: #ffeb3b;
}
.rkmd-btn.btn-yellow:hover {
  background-color: #f8de00;
}
.rkmd-btn.btn-lime {
  color: #fff;
  background-color: #cddc39;
}
.rkmd-btn.btn-lime:hover {
  background-color: #bac923;
}
.rkmd-btn.btn-brown {
  color: #fff;
  background-color: #795548;
}
.rkmd-btn.btn-brown:hover {
  background-color: #936757;
}

/* Raised Buttons Size (Not work in Fab Buttons) */
.rkmd-btn.btn-lg {
  height: 48px;
  line-height: 48px;
}
.rkmd-btn.btn-sm {
  height: 30px;
  padding: 0 1rem;
  line-height: 30px;
  font-size: 12px;
}
.rkmd-btn.btn-xs {
  height: 24px;
  padding: 0 0.4rem;
  line-height: 24px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2px;
}

/* Raised Buttons Types */
.rkmd-btn.disabled,
.rkmd-btn[disabled] {
  cursor: default !important;
  color: #9e9e9e !important;
  box-shadow: none !important;
}
.rkmd-btn.disabled:not(.btn-flat),
.rkmd-btn[disabled]:not(.btn-flat) {
  background-color: #cdcdcd !important;
}
.rkmd-btn.disabled:not(.btn-flat):hover,
.rkmd-btn[disabled]:not(.btn-flat):hover {
  background-color: #cdcdcd !important;
}
.rkmd-btn.btn-flat {
  box-shadow: none !important;
  background-color: transparent !important;
}
.rkmd-btn.btn-flat:hover {
  background-color: #cecece !important;
  box-shadow: none !important;
}
.rkmd-btn.btn-flat.disabled:hover,
.rkmd-btn.btn-flat[disabled]:hover {
  background-color: transparent !important;
}
.rkmd-btn.btn-link {
  color: #3949ab !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
.rkmd-btn.btn-link:hover {
  text-decoration: underline !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
.rkmd-btn.btn-link.disabled,
.rkmd-btn.btn-link[disabled] {
  color: #9fa8da !important;
  text-decoration: underline !important;
  background-color: transparent !important;
}
.rkmd-btn.btn-link.disabled:hover,
.rkmd-btn.btn-link[disabled]:hover {
  background-color: transparent !important;
}
.rkmd-btn i {
  float: left;
  width: auto;
  height: auto;
  margin-right: 10px;
  font-size: 1.3rem;
  line-height: inherit;
}
.rkmd-btn i.right {
  float: right !important;
  margin: 0;
  margin-left: 10px;
}

/* ----------------------------------------------------------------------
  Material Design Ripple Effect 
------------------------------------------------------------------------- */
.ripple-effect {
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 1;
}
.ripple-effect .ripple {
  display: block;
  position: absolute;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  pointer-events: none;
}
.ripple-effect.ripple-dark .ripple {
  background: rgba(0, 0, 0, 0.1) !important;
}
.ripple-effect.ripple-red .ripple {
  background: rgba(244, 67, 54, 0.725) !important;
}
.ripple-effect.ripple-orange .ripple {
  background: rgba(255, 152, 0, 0.725) !important;
}
.ripple-effect.ripple-yellow .ripple {
  background: rgba(255, 235, 59, 0.725) !important;
}
.ripple-effect.ripple-green .ripple {
  background: rgba(76, 175, 80, 0.725) !important;
}
.ripple-effect.ripple-purple .ripple {
  background: rgba(156, 39, 176, 0.725) !important;
}
.ripple-effect.ripple-teal .ripple {
  background: rgba(0, 150, 136, 0.725) !important;
}
.ripple-effect.ripple-pink .ripple {
  background: rgba(233, 30, 99, 0.725) !important;
}
.ripple-effect .animated {
  -webkit-animation: ripple 0.6s linear;
  animation: ripple 0.6s linear;
}
@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}
@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

@media (max-width: 767px) {
  .mgb {
    margin-bottom: 1.3rem;
  }
}

.pure-material-checkbox {
  z-index: 0;
  position: relative;
  display: inline-block;
  color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
  font-family: var(
    --pure-material-font,
    'Roboto',
    'Segoe UI',
    BlinkMacSystemFont,
    system-ui,
    -apple-system
  );
  font-size: 16px;
  line-height: 1.5;
}

/* Input */
.pure-material-checkbox > input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  z-index: -1;
  position: absolute;
  left: -10px;
  top: -8px;
  display: block;
  margin: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
  box-shadow: none;
  outline: none;
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.2s;
}

/* Span */
.pure-material-checkbox > label {
  display: inline-block;
  width: 100%;
  cursor: pointer;
}

/* Box */
.pure-material-checkbox > label::before {
  content: '';
  display: inline-block;
  box-sizing: border-box;
  margin: 3px 11px 3px 1px;
  border: solid 2px; /* Safari */
  border-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
  border-radius: 2px;
  width: 18px;
  height: 18px;
  vertical-align: top;
  transition: border-color 0.2s, background-color 0.2s;
}

/* Checkmark */
.pure-material-checkbox > label::after {
  content: '';
  display: block;
  position: absolute;
  top: 3px;
  left: 1px;
  width: 10px;
  height: 5px;
  border: solid 2px transparent;
  border-right: none;
  border-top: none;
  transform: translate(3px, 4px) rotate(-45deg);
}

/* Checked, Indeterminate */
.pure-material-checkbox > input:checked,
.pure-material-checkbox > input:indeterminate {
  background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
}

.pure-material-checkbox > input:checked + label::before,
.pure-material-checkbox > input:indeterminate + label::before {
  border-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
  background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
}

.pure-material-checkbox > input:checked + label::after,
.pure-material-checkbox > input:indeterminate + label::after {
  border-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
}

.pure-material-checkbox > input:indeterminate + label::after {
  border-left: none;
  transform: translate(4px, 3px);
}

/* Hover, Focus */
.pure-material-checkbox:hover > input {
  opacity: 0.04;
}

.pure-material-checkbox > input:focus {
  opacity: 0.12;
}

.pure-material-checkbox:hover > input:focus {
  opacity: 0.16;
}

/* Active */
.pure-material-checkbox > input:active {
  opacity: 1;
  transform: scale(0);
  transition: transform 0s, opacity 0s;
}

.pure-material-checkbox > input:active + label::before {
  border-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
}

.pure-material-checkbox > input:checked:active + label::before {
  border-color: transparent;
  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.6);
}

/* Disabled */
.pure-material-checkbox > input:disabled {
  opacity: 0;
}

.pure-material-checkbox > input:disabled + label {
  color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
  cursor: initial;
}

.pure-material-checkbox > input:disabled + label::before {
  border-color: currentColor;
}

.pure-material-checkbox > input:checked:disabled + label::before,
.pure-material-checkbox > input:indeterminate:disabled + label::before {
  border-color: transparent;
  background-color: currentColor;
}

select:disabled {
  cursor: not-allowed;

  color: rgba(0, 0, 0, 0.38);
}

.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #d2d2d2;
  outline: 0;
  font-size: 14px;
  color: #2a2e7a;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}

.form__field::placeholder {
  color: transparent;
}

.form__field:placeholder-shown ~ .form__label {
  font-size: 16px;
  cursor: text;
  top: 20px;
}

label,
.form__field:focus ~ .form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 12px;
  color: #9b9b9b;
}

.form__field:focus ~ .form__label {
  color: #2a2e7a;
}

.form__field:focus {
  padding-bottom: 6px;
  border-bottom: 2px solid #2a2e7a;
}

/* #wrapwrap {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask2984%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='url(%23SvgjsLinearGradient2985)'%3e%3c/rect%3e%3cpath d='M1440 0L1184.3600000000001 0L1440 218.96z' fill='rgba(255%2c 255%2c 255%2c .1)'%3e%3c/path%3e%3cpath d='M1184.3600000000001 0L1440 218.96L1440 321.11L549.6500000000001 0z' fill='rgba(255%2c 255%2c 255%2c .075)'%3e%3c/path%3e%3cpath d='M549.65 0L1440 321.11L1440 352.6L500.12 0z' fill='rgba(255%2c 255%2c 255%2c .05)'%3e%3c/path%3e%3cpath d='M500.12 0L1440 352.6L1440 451.88L336.75 0z' fill='rgba(255%2c 255%2c 255%2c .025)'%3e%3c/path%3e%3cpath d='M0 560L195.85 560L0 373.22z' fill='rgba(0%2c 0%2c 0%2c .1)'%3e%3c/path%3e%3cpath d='M0 373.22L195.85 560L426.33 560L0 356.18z' fill='rgba(0%2c 0%2c 0%2c .075)'%3e%3c/path%3e%3cpath d='M0 356.18L426.33 560L916.62 560L0 161.76000000000002z' fill='rgba(0%2c 0%2c 0%2c .05)'%3e%3c/path%3e%3cpath d='M0 161.76L916.62 560L980.9 560L0 148.60999999999999z' fill='rgba(0%2c 0%2c 0%2c .025)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask2984'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='15.28%25' y1='-39.29%25' x2='84.72%25' y2='139.29%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient2985'%3e%3cstop stop-color='rgba(252%2c 211%2c 36%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(250%2c 250%2c 250%2c 1)' offset='0.3'%3e%3c/stop%3e%3cstop stop-color='rgba(255%2c 255%2c 255%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e");
} */
.contact-title {
  margin: 32px 0 0;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.25;
}
body {
  background-color: transparent;
  color: #27303f;

  font-family: 'Poppins', sans-serif;
}

main {
  margin: 1.4rem auto;
  height: 100%;
}
.img-center {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
}