body {
  font-family: "Karla", sans-serif;
  background-image: url("../images/bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.nav {
  position: relative;
  width: auto;
  box-sizing: border-box;
  margin: -7px -8px 0px -8px;
  border-bottom: 5px solid #1c4e5ea5;
  background-color: #8248ff29;
  border-radius: 0px 0px 30px 30px;
}

.logo {
  width: 140px !important;
  height: auto;
  padding: 8px 0px 0px 8px;
}

.container {
  padding: 10px 0px 0px 0px;
}

.page-title {
  max-width: 90%;
  font-size: 80px;
  font-weight: bold;
  color: bisque;
}

.page-description {
  max-width: 80%;
  font-size: 25px;
  margin-left: 25px;
  color: #a3c1fcde;
}

.main {
  width: 1198px;
  height: 188px;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  position: relative;
}

.up {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.down {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
}

.card1 {
  min-height: 90px;
  min-width: 90px;
  outline: none;
  border: none;
  background: #ffffffab;
  border-radius: 90px 5px 5px 5px;
  box-shadow: #d6d2d26a 0px 0px 3px 3px;
  transition: 0.2s ease-in-out;
}
.instagram {
  padding: 24px 0px 0px 23px;
}

.card2 {
  min-height: 90px;
  min-width: 90px;
  outline: none;
  border: none;
  background: #ffffffab;
  border-radius: 5px 90px 5px 5px;
  box-shadow: #d6d2d26a 0px 0px 3px 3px;
  transition: 0.2s ease-in-out;
}

.x {
  padding: 35px 0px 0px 18px;
}

.card3 {
  min-height: 90px;
  min-width: 90px;
  outline: none;
  border: none;
  background: #ffffffab;
  border-radius: 5px 5px 5px 90px;
  box-shadow: #d6d2d26a 0px 0px 3px 3px;
  transition: 0.2s ease-in-out;
}

.github {
  padding: 14px 0px 0px 26px;
}

.card4 {
  min-height: 90px;
  min-width: 90px;
  outline: none;
  border: none;
  background: #ffffffab;
  border-radius: 5px 5px 90px 5px;
  box-shadow: #d6d2d26a 0px 0px 3px 3px;
  transition: 0.2s ease-in-out;
}

.telegram {
  padding: 13px 0px 0px 10px;
}

.card1:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #cc39a4;
  box-shadow: #cc39a5de 0px 0px 3px 3px;
}

.card2:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #71779b;
  box-shadow: #71779bde 0px 0px 3px 3px;
}

.card3:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #7851bc;
  box-shadow: #7851bcde 0px 0px 3px 3px;
}

.card4:hover {
  cursor: pointer;
  scale: 1.1;
  background-color: #2687e3;
  box-shadow: #2687e3de 0px 0px 3px 3px;
}

#pre-loader {
  background: #000 url(../gif/loader.gif) no-repeat center center;
  background-size: 20%;
  height: 100vh;
  width: 100%;
  top: 0px;
  left: 0px;
  position: fixed;
  z-index: 100;
}