/*----------------------------------------------
# Buttons layout
----------------------------------------------*/
.btn-app-sm {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  padding: 8px 20px;
  border-radius: 99px;
  text-decoration: none;
  transition: 0.3s;
  text-align: center;
}
.btn-app-md {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  padding: 8px 20px;
  border-radius: 99px;
  text-decoration: none;
  transition: 0.3s;
  text-align: center;
}
.btn-app-lg {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding: 8px 20px;
  border-radius: 99px;
  text-decoration: none;
  transition: 0.3s;
  text-align: center;
}
/*----------------------------------------------
# Buttons Colors primary
----------------------------------------------*/
.btn-primary {
  background-color: var(--blue-ame);
  border: 2px solid var(--blue-ame);
  color: var(--neutral-0);
}
.btn-primary:hover {
  background-color: var(--neutral-0);
  border: 2px solid var(--blue-ame);
  color: var(--blue-ame);
}
.btn-primary:focus {
  background-color: var(--neutral-0);
  border: 2px solid var(--blue-ame);
  color: var(--blue-ame);
}
/*----------------------------------------------
# Buttons Colors secondary
----------------------------------------------*/
.btn-secondary-filled {
border: 2px solid var(--gold-accent);
background-color: var(--gold-accent);
color: var(--neutral-950);

}
.btn-secondary-filled:hover {
  background-color: var(--neutral-0);
  border: 2px solid var(--gold-accent);
  color: var(--gold-accent);
}
.btn-secondary-filled:focus {
  background-color: var(--neutral-0);
  border: 2px solid var(--gold-accent);
  color: var(--gold-accent);
}
/*----------------------------------------------
# Buttons Colors secondary
----------------------------------------------*/
.btn-secondary {
border: 2px solid var(--gold-accent);
background-color: var(--neutral-0);
color: var(--neutral-950);

}
.btn-secondary:hover {
  background-color: var(--gold-accent);
  border: 2px solid var(--gold-accent);
  color: var(--neutral-950);
}
.btn-secondary:focus {
  background-color: var(--bg-white);
  border: 2px solid var(--gold-accent);
  color: var(--gold-accent);
}
/*----------------------------------------------
# Buttons Colors netural
----------------------------------------------*/
.btn-netural {
  background-color: var(--neutral-0);
  border: 2px solid var(--neutral-600);
  color: var(--neutral-600);
}
.btn-netural:hover {
  background-color: var(--neutral-600);
  border: 2px solid var(--neutral-600);
  color: var(--neutral-0);
}
.btn-netural:focus {
  background-color: var(--neutral-600);
  border: 2px solid var(--neutral-600);
  color: var(--neutral-0);
}
/*----------------------------------------------
# Buttons Colors white
----------------------------------------------*/
.btn-white {
  background-color: var(--bg-white);
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
}
.btn-white:hover {
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
  color: var(--bg-white);
}
.btn-white:focus {
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
  color: var(--bg-white);
}
/*----------------------------------------------
# Buttons Colors gost
----------------------------------------------*/
.btn-gost {
  background-color: var(--bg-white);
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
}
.btn-gost:hover {
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
  color: var(--bg-white);
}
.btn-gost:focus {
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
  color: var(--bg-white);
}
/*----------------------------------------------
# Buttons Colors link
----------------------------------------------*/
.btn-link {
  color: var(--blue-ame);
}
.btn-link:hover {
  color: var(--accent-color);
}
.btn-link:focus {
  color: var(--accent-color);
}
.btn-link:active {
  color: var(--accent-color);
}
