.not-found {
  background-image: url("/assets/images/404-bg.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  width: 100vw;
  height: 100vh;
  position: relative;
  padding: 42px 130px 135px;
  overflow: hidden;
}

@media (max-width: 1366px) {
  .not-found {
    padding: 28px 40px;
  }
}

@media (max-width: 768px) {
  .not-found {
    background-image: url("/assets/images/404-bg-mob.png");
    background-position: center top;
    background-size: contain;
    padding: 18px 20px;
  }
}

.not-found .back {
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 768px) {
  .not-found::before {
    content: '';
    width: 118px;
    height: 183px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-image: url("/assets/images/404-bg-1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
  }
}

@media (max-width: 768px) {
  .not-found::after {
    content: '';
    width: 128px;
    height: 129px;
    position: absolute;
    top: 447px;
    right: 0;
    background-image: url("/assets/images/404-bg-2.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
  }
}

.not-found .logo {
  max-width: 292px;
}

@media (max-width: 1366px) {
  .not-found .logo {
    max-width: 207px;
  }
}

@media (max-width: 1280px) {
  .not-found .logo {
    max-width: 197px;
  }
}

@media (max-width: 768px) {
  .not-found .logo {
    max-width: 107px;
  }
}

.not-found .info {
  position: absolute;
  width: calc(100% - 260px);
  text-align: center;
  bottom: 135px;
}

@media (max-width: 1366px) {
  .not-found .info {
    width: calc(100% - 80px);
    bottom: 74px;
  }
}

@media (max-width: 768px) {
  .not-found .info {
    background: #FFFFFF;
    border: 1.75px solid #000C7E;
    border-radius: 4px;
    padding: 40px 20px;
    top: 238px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    position: absolute;
    bottom: auto;
    z-index: 2;
    width: 100%;
    height: 242px;
  }
}

.not-found p {
  font-size: 52px;
  line-height: 70px;
  color: #000C7E;
}

@media (max-width: 1366px) {
  .not-found p {
    font-size: 32px;
    line-height: 43px;
    margin-top: 35px;
  }
}

@media (max-width: 768px) {
  .not-found p {
    font-size: 25px;
    line-height: 34px;
    margin-top: 27px;
  }
}

.not-found p.title {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 60px;
  line-height: 81px;
}

@media (max-width: 1366px) {
  .not-found p.title {
    font-size: 44px;
    line-height: 59px;
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .not-found p.title {
    font-size: 30px;
    line-height: 41px;
  }
}