/* Font */
.f-h1 {
  font-size: 56px;
}
.f-text {
  font-size: 16px;
}

.f-text_small {
  font-size: 12px;
}


.input_wrapper {
  font-family: "Roboto Slab";
  font-size: 12px;
  line-height: 40px;
  color: #4F4F4F;

  position: relative;
  width: auto;
  height: 40px;
  margin-bottom: 16px;
}

.input_wrapper input[type="text"],
.input_wrapper input[type="email"],
.input_wrapper input[type="tel"],
.input_wrapper input[type="password"] {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;

  width: 100%;
  height: 100%;
  background: rgba(110, 114, 129, 0.16);
  border-radius: 4px;
  border: 0;
  padding-left: 20px;
  transition: var(--transition);
}

.input_wrapper .icon {
  position: absolute;
  bottom: 8px;
  right: 16px;
  display: block;
  width: 24px;
  height: 24px;
  background-size: contain;
}

.input_wrapper input:focus-visible {
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.input_wrapper.valid svg * {
  fill: #7DA334;
}

.input_wrapper.invalid input,
.input_wrapper.invalid svg * {
  color: #E34E4E;
  fill: #E34E4E;
}


/* ACCORDEON */
.accordeon {
  position: relative;
  width: 100%;
  height: auto;
  padding-left: 56px;
  margin-bottom: 24px;
}
.accordeon-icon {
  position: absolute;
  top: -6px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid #7DA334;
  cursor: pointer;
}
.accordeon-icon::before,
.accordeon-icon::after {
  content: '';
  position: absolute;
  display: block;
  width: 16px;
  height: 2.5px;
  border-radius: 2.5px;
  background: #7DA334;
  transition: var(--transition);
}

.accordeon-icon::before {
  transform: rotateZ(90deg);
}
.accordeon.open .accordeon-icon::before {
  transform: rotateZ(0);
}

.accordeon-title {
  font-size: 24px;
  line-height: 117%;
  color: #F2F2F2;
  margin-bottom: 24px;
}

.accordeon-text {
  font-weight: 300;
  line-height: 175%;
  color: #EFEFEF;
  opacity: 0.8;
  
  width: 100%;
  height: 0px;
  border-bottom: 1px dashed #333540;
  transition: var(--transition);
  overflow: hidden;
  box-sizing: content-box;
}
.accordeon.open .accordeon-text {
  padding-bottom: 24px;
}
/* ACCORDEON END */


.arrow-down {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 24px;
  border: 1px solid var(--color-yellow);
  cursor: pointer;
}
.arrow-down .icon {
  transition: var(--transition);
}


.btn {
  font-family: 'Catorze27 Style 1';
  font-size: 18px;
  color: #FFFFFF;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 200px;
  height: 56px;
  background: var(--color-green);
  border-radius: 71px;
  transition: var(--transition);
  cursor: pointer;
}
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  opacity: 1;
  border: 1px solid var(--color-green);
  border-radius: 71px;
  transition: var(--transition);
  animation: buttonPulse var(--transition-big) linear infinite
}


.btn:hover {
  background: var(--color-yellow);
}
.btn:hover::after {
  border-color: var(--color-yellow);
}

@keyframes buttonPulse {
  0%  { opacity: 1;   transform: scale(1, 1); }
/*   25% { opacity: 1;   transform: scale(1.025, 1.07); }
  50% { opacity: 0.7; transform: scale(1.05, 1.15); } */
  75% { opacity: 0;   transform: scale(1.1, 1.30); }
  100% { opacity: 0;  transform: scale(1, 1); }
}


.inside_border::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  display: block;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border: 1px solid #E0E0E0;
  border-radius: 12px;
}