* {
  margin: 0;

  padding: 0;

  transition: 0.15s all;
}

@font-face {
  font-family: sfns_f;

  src: url(../fonts/sfns-display-bold.ttf);
}

.layout {
  display: flex;

  flex-direction: column;

  min-height: 100vh;
}

.layout__strip {
  margin-bottom: 8px;
}

.header__strip {
  background-color: rgb(60, 179, 113);

  height: 8px;

  position: fixed;

  top: 0;

  width: 100%;

  z-index: 40;
}

.layout__header {
  --header-height: 96px;

  height: var(--header-height);
}

.header {
  display: flex;

  position: fixed;

  width: 100%;

  background-color: rgb(33, 33, 33);

  color: rgb(255, 255, 255);

  z-index: 30;

  margin-top: 8px;
}

.header--scrolled {
  margin-top: 0;

  background-color: rgba(44, 44, 44, 0.995);

  transition: 0.1s all;
}

.header a {
  color: rgb(255, 255, 255);

  text-decoration: none;
}

.navigation {
  max-width: 1440px;

  display: flex;

  flex-grow: 1;

  padding: 16px 0;

  position: relative;

  justify-content: space-between;

  align-items: center;

  margin-inline: auto;

  gap: 65px;
}

.navigation a {
  display: flex;

  align-items: center;
}

.navigation-logo {
  .logo img {
    margin-right: 5px;
  }
}

.navigation-logo a {
  padding: 0.5em;

  margin: -0.5em;

  font-size: 48px;
}

.button__opener__container {
  display: none;
}

.button__opener {
  display: flex;

  align-items: center;
}

.navigation__list ul {
  display: flex;

  list-style: none;

  align-items: center;

  gap: 65px;

  font-size: 20px;

  padding-left: 0;

  line-height: 1.22;
}

.list li svg {
  width: 25px;

  height: 25px;
}

.list li svg path {
  padding: 1em;

  margin: -1em;
}

.list li:hover path {
  stroke: rgb(60, 179, 113);

  transition: all 0.25s;
}

.list a {
  padding: 1em;

  margin: -1em;
}

.list a:hover {
  color: rgb(60, 179, 113);

  transition: all 0.2s;
}

.list a:not(:hover) {
  color: rgb(255, 255, 255);

  transition: all 0.2s;
}

.list li:not(:hover) path {
  stroke: rgb(255, 255, 255);

  transition: all 0.25s;
}

body {
  font-family: sfns_f, sans-serif;

  color: azure;

  background-color: rgb(33, 33, 33);

  margin: 0;

  min-height: 100vh;

  position: relative;

  width: 100%;
}

.logo {
  font-size: 55px;

  font-weight: 700;
}

.navigation-logo a:hover {
  color: rgb(60, 179, 113);

  transition: 0.2s ease;
}

.navigation-logo a:not(:hover) {
  color: rgb(255, 255, 255);

  transition: 0.2s ease;
}

.layout__main {
  flex: 1;

  width: 100%;
}

.main--support--content {
  display: flex;

  flex-direction: column;

  flex-grow: 1;

  margin-bottom: auto;

  margin-inline: auto;

  position: relative;

  max-width: 1440px;

  padding: 64px 0 0;
}

.support--socials__text {
  font-size: 40px;

  margin-bottom: 60px;
}

.support--socials__container {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 30px;

  margin-bottom: 90px;
}

.support--socials__container :hover {
  background-color: rgb(50, 50, 50);

  transition: 0.2s all;
}

.socials--telegram__container:hover path {
  fill: #0077ff;

  transition: 0.2s all;
}

.socials--vk__container:hover path {
  fill: #27a7e7;

  transition: 0.2s all;
}

.socials--discord__container:hover path {
  fill: #5865f2;

  transition: 0.2s all;
}

.socials--bot__container:hover .first {
  color: rgb(60, 179, 113);
}

.support--socials__container svg,
.support--socials__container img {
  width: 100px;

  height: 100px;

  margin: 30px auto 0;
}

.support--socials__container svg path {
  fill: rgb(99, 99, 99);
}

.support--socials__container a {
  display: flex;

  flex-direction: column;

  border: 3px solid;

  border-radius: 16px;

  background-color: rgb(40, 40, 40);

  border-color: rgb(60, 60, 60);

  padding: 36px;

  color: rgb(255, 255, 255);

  text-decoration: none;

  justify-content: space-between;
}

.support--socials__container h4 {
  font-size: 24px;

  margin-bottom: 10px;
}

.support--socials__container p {
  font-size: 16px;

  color: rgb(149, 149, 149);

  margin-bottom: 10px;
}

.socials--discord__container span {
  color: #5865f2;
}

.socials--telegram__container span {
  color: #27a7e7;
}

.socials--vk__container span {
  color: #0077ff;
}

.footer {
  position: relative;

  width: 100%;

  background: rgb(40, 40, 40);
}

.socials-buttons__container a,
.telegram-bot-button__container a {
  color: rgb(255, 255, 255);

  text-decoration: none;
}

.faq--title--text {
  font-size: 36px;

  margin-bottom: 60px;
}

.faq--text__container {
  display: grid;

  grid-template-columns: repeat(1, 1fr);

  margin-bottom: 60px;

  gap: 40px;
}

.qa--1__container,
.qa--2__container,
.qa--3__container,
.qa--4__container {
  display: grid;

  grid-template-columns: repeat(1, 1fr);
}

.q--1__container,
.q--2__container,
.q--3__container,
.q--4__container,
.a--1__container,
.a--2__container,
.a--3__container,
.a--4__container {
  display: flex;
}

.q--1--text__container,
.a--1--text__container,
.q--2--text__container,
.a--2--text__container,
.q--3--text__container,
.a--3--text__container,
.q--4--text__container,
.a--4--text__container {
  display: flex;

  padding: 10px 0px 10px 0;
}

.faq--text__container p {
  font-size: 16px;

  color:rgb(149, 149, 149);
}

.stick--q,
.stick--a {
  min-width: 5px;

  margin-right: 20px;

  height: 100%;
}

.stick--q {
  background-color: rgb(60, 179, 113);
}

.stick--a {
  background-color: rgb(172, 172, 172);
}

.faq--text__container h3 {
  font-size: 21px;
}

.footer__container {
  display: flex;

  max-width: 1440px;

  padding: 48px 0;

  justify-content: space-between;

  position: relative;

  margin-inline: auto;
}

::-webkit-scrollbar {
  width: 9px;
}

::-webkit-scrollbar-track {
  background: rgb(45, 45, 45);
}

::-webkit-scrollbar-thumb {
  background: rgb(56, 56, 56);
}