/**
 * @file
 * buttons styles
 */
.btn {
  border: none;
  border-radius: 0;
}

.btn-primary {
  --btn-padding: 15px 32px;
  padding: var(--btn-padding);
  background-color: var(--primary-color);
  border-bottom: 2px solid var(--white);
  border-right: 2px solid var(--white);
  color: var(--text-color);
  text-transform: uppercase;
  font-size: var(--fs16);
  line-height: 1.125;
  --bs-btn-active-bg: var(--blue);
  --bs-btn-active-border-color: var(--white);
  --bs-btn-active-color: var(--text-color);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary:first-child:active {
  background-color: var(--blue);
  color: var(--text-color);
  border-color: var(--white);
  box-shadow: none;
  color: var(--text-color);
}

.btn-secondary {
  --btn-padding: 10px 20px;
  padding: var(--btn-padding);
  background-color: var(--primary-color);
  color: var(--black1);
  font-size: var(--fs24);
  line-height: 1.2;
  font-family: var(--tertiary-font);
  font-weight: var(--font-bold);
  border-radius: var(--radius-lg);
  display: inline-flex;
  align-items: center;
}

.no-hover {
  cursor: default;
}

.btn-secondary.no-hover:hover {
  background-color: var(--primary-color);
  color: var(--black1);
}

.btn-secondary-1 {
  background-color: var(--white);
  color: var(--text-color);
  border: 1px solid var(--text-color);
  --bs-btn-active-bg: var(--text-color);
}

.btn-secondary-1:hover,
.btn-secondary-1:focus-visible,
.btn-secondary-1:active {
  color: var(--white);
  background-color: var(--text-color);
  box-shadow: none;
}

/*white border with background transparent*/
.btn-style-3 {
  --btn-padding: 11.5px 32px;
  --bs-btn-active-bg: var(--white);
  --letter-spacing: 10%;
  background-color: transparent;
  color: var(--white);
  border: 1px solid var(--white);
  padding: var(--btn-padding);
  font-size: var(--fs13);
  min-height: 44px;
  font-family: var(--primary-font);
  font-weight: var(--font-regular);
  border-radius: 0;
  letter-spacing: var(--letter-spacing);
  line-height: 1.23;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-style-3:hover,
.btn-style-3:focus-visible,
.btn-style-3:active {
  color: var(--text-color);
  background-color: var(--white);
  box-shadow: none;
}

.btn-sm {
  --btn-padding: 7px 15px;
  font-size: var(--fs12);
}

.arrow-down {
  --arrow-down-size: 60px;
  font-size: 0;
  background: url(img/arrow-down.svg) no-repeat center center;
  width: var(--arrow-down-size);
  height: var(--arrow-down-size);
  display: block;
  margin: 6vh auto 0 auto;
  animation: iconDown 1s ease-in-out infinite;
  transition: var(--transition);
}

.arrow-down:hover,
.arrow-down:focus-visible {
  animation-play-state: paused;
  background: url(img/arrow-down-hover.svg) no-repeat center center;
}

@keyframes iconDown {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }

  100% {
    transform: translateY(0);
  }
}