.btn {
  --btn-paddings: 0;
  --btn-width: auto;
  --btn-size: 35px;
  --btn-weight: 400;
  --btn-text-color: #fff;
  --btn-main-color: #003c96;
  --btn-border-radius: 0;
  --btn-border-width: 2px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: var(--btn-border-width) solid var(--btn-main-color);
  border-radius: var(--btn-border-radius);
  padding: var(--btn-paddings);
  min-width: var(--btn-width);
  font-family: "Futura PT", sans-serif;
  font-weight: var(--btn-weight);
  font-size: var(--btn-size);
  text-align: center;
  color: var(--btn-text-color);
  /* background-color: var(--btn-bg); */
  transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s, border 0.3s, color 0.3s;
}

.btn--theme-blue {
  --btn-main-color: #003c96;
  --btn-text-color: var(--btn-main-color);
}

.btn--theme-sun {
  --btn-main-color: #ffb900;
  --btn-text-color: var(--btn-main-color);
}

.btn--theme-grass {
  --btn-main-color: #00be64;
  --btn-text-color: var(--btn-main-color);
}

.btn--theme-sky {
  --btn-main-color: #2fcbff;
  --btn-text-color: var(--btn-main-color);
}

.btn--theme-white {
  --btn-main-color: #fff;
  --btn-text-color: var(--btn-main-color);
}

.btn--theme-rasp {
  --btn-main-color: #aa2332;
  --btn-text-color: var(--btn-main-color);
}

.btn--theme-violet {
  --btn-main-color: #6e237d;
  --btn-text-color: var(--btn-main-color);
}

.btn--stroked {
  --btn-paddings: 10px 20px;

  padding: var(--btn-paddings);
  border: var(--btn-border-width) solid var(--btn-main-color);
}

.btn--filled {
  --btn-paddings: 10px 20px;
  --btn-text-color: #fff;

  padding: var(--btn-paddings);
  border: var(--btn-border-width) solid var(--btn-main-color);
  color: var(--btn-text-color);
  background-color: var(--btn-main-color);
}

.btn--theme-white.btn--filled {
  --btn-text-color: #003c96;
}

.btn--with-icon {
  --btn-icon-gap: 8px;

  gap: var(--btn-icon-gap);
}

.btn--with-icon svg {
  position: relative;
  top: 4px;
}

.btn--with-icon svg circle {
  fill: currentColor;
}

.btn--theme-white.btn--with-icon svg circle {
  fill: #003c96;
}

.btn--theme-white.btn--with-icon svg path {
  stroke: #fff;
}

.btn--with-icon svg path {
  stroke: var(--btn-main-color);
}

.btn--rounded {
  --btn-border-radius: 45px;
}

.btn:focus {
  outline: 2px solid var(--btn-main-color);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .btn {
    max-width: 100% !important;
  }
}


@media (max-width: 768px) {
  .btn {
    --btn-paddings: 5px !important;

    max-width: 100% !important;
  }
}