* {
  margin: 0;
  padding: 0;
}

body {
  background-color: black;
}

.bg-image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wrapper {
  position: relative;
}

.welcome-image {
  position: absolute;
  top: -3.46%;
  left: 1.2%;
  width: 57%;
  height: 29%;
}

.titi {
  position: absolute;
  top: 21%;
  left: 32%;
  height: 22%;
}

.ge {
  position: absolute;
  top: 22.2%;
  left: 23.4%;
  height: 21.3%;
}

.gabi {
  position: absolute;
  top: 23.5%;
  left: 11.8%;
  height: 20%;
}

.proteus {
  position: absolute;
  top: 35.9%;
  left: 33.1%;
  height: 8%;
}

.video {
  position: absolute;
  top: 25.4%;
  left: 62%;
  height: 14.8%;
  width: 31%;
}

.book1 {
  position: absolute;
  top: 50.4%;
  left: 8.5%;
  height: 28.3%;
}

.book2 {
  position: absolute;
  top: 50.4%;
  left: 40.6%;
  height: 28.3%;
}

.book3 {
  position: absolute;
  top: 50.37%;
  left: 71.3%;
  height: 28.24%;
}

.social-text {
  position: absolute;
  bottom: 11.5%;
  left: 16.7%;
  height: 4.8%;
}

.youtube {
  position: absolute;
  bottom: 3.7%;
  left: 33.3%;
  height: 5%;
}

.tiktok {
  position: absolute;
  bottom: 3.8%;
  left: 41.4%;
  height: 4.9%;
}

.instagram {
  position: absolute;
  bottom: 3.75%;
  left: 49.5%;
  height: 4.95%;
}

.facebook {
  position: absolute;
  bottom: 3.71%;
  left: 57.7%;
  height: 4.95%;
}

.mobile {
  display: none;
}

@media (max-width: 767px) {
  .desktop {
    display: none;
  }

  .mobile {
    display: block;
  }

  .bg-image-mobile {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .welcome-image-mobile {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .titi-mobile {
    position: absolute;
    top: 13.46%;
    left: 52.6%;
    height: 9.8%;
  }

  .ge-mobile {
    position: absolute;
    top: 13.9%;
    left: 37%;
    height: 9.5%;
  }

  .gabi-mobile {
    position: absolute;
    top: 14.5%;
    left: 16.1%;
    height: 9%;
  }

  .proteus-mobile {
    position: absolute;
    top: 20.24%;
    left: 54.4%;
    height: 3.4%;
  }

  .video-mobile {
    position: absolute;
    top: 25.5%;
    left: 21.7%;
    height: 6.7%;
    width: 56%;
  }

  .book1-mobile {
    position: absolute;
    top: 39%;
    left: 30.5%;
    height: 14.7%;
    width: 38.8%;
  }

  .book2-mobile {
    position: absolute;
    top: 57.2%;
    left: 30.5%;
    height: 14.7%;
    width: 38.8%;
  }

  .book3-mobile {
    position: absolute;
    top: 76%;
    left: 30.5%;
    height: 14.7%;
    width: 38.8%;
  }

  .social-text-mobile {
    position: absolute;
    bottom: 4%;
    display: flex;
    justify-content: center;
  }

  .social-text-mobile img {
    position: relative;
    width: 69%;
  }

  .youtube-mobile {
    position: absolute;
    bottom: 1.9%;
    left: 31.3%;
    height: 1.6%;
  }

  .tiktok-mobile {
    position: absolute;
    bottom: 1.9%;
    left: 41.4%;
    height: 1.6%;
  }

  .instagram-mobile {
    position: absolute;
    bottom: 1.88%;
    left: 51.5%;
    height: 1.6%;
  }

  .facebook-mobile {
    position: absolute;
    bottom: 1.87%;
    left: 61.5%;
    height: 1.6%;
  }
}