@import "variables.css";
@import "scrollbar.css";
@import "utils.css";
@import "navbar.css";
@import "layout.css";

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/SpaceGrotesk.ttf") format("truetype");
}

body {
  cursor: none;
}

a, button {
  cursor: none;
}

* {
  scroll-behavior: smooth;
  font-family: "Space Grotesk";
}

.logo-page {
  background: #ef233c;
  position: relative;
  z-index: 1;
}

.logo-page .block {
  width: 50vw;
  height: 15.5vw;
  background-color: #2b2d42;
  position: absolute;
  display: block;
  top: 45.5%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 999999 !important;
}

.logo-page h2 {
  font-variation-settings: "wght" var(--text-bold);
  color: white;
  position: absolute;
  top: 45.5%;
  left: 50%;
  width: 100%;
  text-align: center;
  transform: translateX(-50%) translateY(-50%);
  font-size: 9vw;
  user-select: none;
  z-index: 999999;
}

.services {
  background: #2b2d4200;
  position: relative;
  z-index: 1;
}

.logo-page .transition {
  z-index: 999;
  height: 140vh;
  width: 100%;
  left: 0;
  position: absolute;
  bottom: -60vh;
  background: linear-gradient(
    165deg,
    #ef233c 0%,
    #ef233c 22%,
    #2b2d42 78%,
    #2b2d42 100%
  );
}

h3.grey {
  font-variation-settings: "wght" var(--text-light);
  position: relative;
  width: max-content;
  padding: 0.35rem 0.5rem;
  border-left: 0.25vw solid;
  max-width: 100%;
  text-align: center;
  color: #adb9ce;
  font-size: 2vw;
  margin: 7rem auto 7rem auto;
}

.services-transition {
  z-index: 999;
  left: 0;
  z-index: -1;
  position: absolute;
  width: 150vw;
  left: 0;
  height: 60vh;
  top: 20vh;
  /*background: radial-gradient(#ef233c20, #2b2d4200 55%);*/
  background: radial-gradient(#43445c80, #2b2d4200 55%);
}

.services-transition-left {
  z-index: 999;
  left: 0;
  z-index: -1;
  position: absolute;
  left: -8vw;
  width: 27vw;
  height: 27vw;
  top: 2vh;
  /*background: radial-gradient(#ef233c20, #2b2d4200 55%);*/
  background: radial-gradient(#43445c80, #2b2d4200 55%);
}

.services-transition-dark {
  z-index: 999;
  left: 0;
  z-index: -1;
  position: absolute;
  width: 150vw;
  left: -50vw;
  height: 60vh;
  top: 20vh;
  background: radial-gradient(#1d1e2da0, #2b2d4200 55%);
}

div.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  height: max-content;
  width: 100vw;
  background: #454867;
  display: flex;
  justify-content: space-around;
}

div.footer span {
  color: white;
  font-size: 0.875rem;
  padding: 0.25rem 0;
  margin: 0 auto;
}

div.desktop-footer {
  position: relative;
  bottom: 0;
  left: 0;
  height: max-content;
  width: 100vw;
  background: #454867;
  display: flex;
  justify-content: space-around;
}

div.desktop-footer span {
  color: white;
  font-size: 0.875rem;
  padding: 0.25rem 0;
  margin: 0 auto;
}

.rem-pt {
  padding-top: 0 !important;
}

.contacts {
  min-height: 100vh;
  z-index: 1;
}

.social {
  position: relative;
  padding: 0 var(--padding);
}

.social:after {
  position: absolute;
  content: "";
  width: 3rem;
  top: 6.75rem;
  height: 0.25rem;
  background-color: var(--red);
}

.social img {
  height: 2.85rem;
  width: 2.85rem;
  margin: 0 0.75rem;
  transition-duration: 150ms;
}

.social img:hover {
  transform: scale(1.08);
  transition-duration: 150ms;
}

.desktop {
  z-index: 1;
}

@media screen and (min-width: 768px) {
  .logo-img {
    height: 5.75rem;
    width: 5.75rem;
    margin-left: 0;
  }

  .logo-page .block {
    height: 11.5vw;
    width: 38vw;
  }

  .logo-page h2 {
    font-size: 7vw;
    width: 98%;
  }

  .services,
  .contacts {
    display: none;
  }

  .logo-page .transition {
    z-index: 999;
    height: 140vh;
    width: 100%;
    left: 0;
    position: absolute;
    bottom: -60vh;
    background: linear-gradient(
      170deg,
      #ef233c 0%,
      #ef233c 22%,
      #2b2d42 78%,
      #2b2d42 100%
    );
  }
  .services-transition {
    top: 0;
    width: 27vw;
    height: 27vw;
    left: unset;
    right: 0vw;
  }

  .social {
    width: max-content;
    position: relative;
    padding: 0 var(--padding);
  }

  .social:after {
    position: absolute;
    content: "";
    width: 3rem;
    top: 6.25rem;
    height: 0.25rem;
    transform: translateX(50%);
    background-color: var(--red);
  }

  .social img {
    height: 2rem;
    width: 2rem;
    margin: 0 0.5rem;
  }
}