/*---------- NAVIGATION BAR ----------*/

.logo {
  top: 0.3%;
  right: 26.5%;
}

.logo img {
  width: 10%;
}

.nav-item {
  top: 0.85%;
  right: 18%;
  gap: 6%;
  padding-right: 1%;
}

.nav-item a {
  font-size: clamp(0.5rem, 1vw, 1.2rem);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: #313131;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 1px 1px 0 #999, 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.nav-item a:hover {
  text-decoration: none;
  color: #0000e2;
}

.nav-item a.active {
  color: #0000e2;
  cursor: default;
  pointer-events: none;
}

/*---------- FLOAT BUTTON ----------*/

.float-btn {
  bottom: 4%;
  right: 2%;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2vw, 30px);
}

.tg-redirect-button img,
.wa-redirect-button img {
  width: clamp(10px, 5vw, 80px);
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

/*---------- SECTION 1 ----------*/

.section-1-text {
  top: 5.3%;
  right: 26%;
}

.section-1-text img {
  width: 22%;
}

.section-1-btn {
  top: 8.8%;
  right: 26%;
}

.section-1-btn img {
  width: 10%;
  margin: 0% 1%;
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.section-1-btn a {
  text-decoration: none;
  border: none;
  outline: none;
}

.section-1-btn a:hover,
.section-1-btn a:focus {
  text-decoration: none;
  border: none;
  outline: none;
}

/*---------- SECTION 2 ----------*/

.section-2-content-1 {
  top: 24.5%;
}

.section-2-content-2 {
  top: 33%;
}

.section-2-content-1 img,
.section-2-content-2 img {
  width: 20%;
  margin: 0% 1%;
}

.content-1,
.content-2,
.content-3,
.content-4,
.content-5,
.content-6 {
  opacity: 0;
}

/*---------- SECTION 3 ----------*/

.section-3-content-1 {
  top: 45.5%;
  right: 21%;
}

.section-3-content-2 {
  top: 45.5%;
  left: 20%;
}

.section-3-content-1 img,
.section-3-content-2 img {
  width: 10%;
  margin: 0% 0.5%;
}

.number-box-1,
.number-box-2,
.number-box-3,
.number-box-4 {
  opacity: 0;
}

.number-1 {
  position: absolute;
  top: 32%;
  left: 44.5%;
  transform: translate(-50%, -50%);
  font-size: clamp(1rem, 2.5vw, 6rem);
  font-weight: bold;
  color: #ffffff;
  pointer-events: none;
}

.number-2 {
  position: absolute;
  top: 32%;
  left: 55.5%;
  transform: translate(-50%, -50%);
  font-size: clamp(1rem, 2.5vw, 6rem);
  font-weight: bold;
  color: #0000e2;
  pointer-events: none;
}

.number-3 {
  position: absolute;
  top: 32%;
  left: 44.5%;
  transform: translate(-50%, -50%);
  font-size: clamp(1rem, 2.5vw, 6rem);
  font-weight: bold;
  color: #ffffff;
  pointer-events: none;
}

.number-4 {
  position: absolute;
  top: 32%;
  left: 55.7%;
  transform: translate(-50%, -50%);
  font-size: clamp(1rem, 2.5vw, 6rem);
  font-weight: bold;
  color: #0000e2;
  pointer-events: none;
}

/*---------- SECTION 4 ----------*/

/*-- GOOGLE --*/

.section-4-element-1 {
  top: 67%;
  right: 17%;
}

.section-4-element-1 img {
  width: 38%;
}

.section-4-button-1 {
  top: 67.7%;
  left: 20%;
  z-index: 1;
  opacity: 0;
}

.section-4-button-1 img {
  width: 15%;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.google-logo {
  visibility: hidden;
}

.google-logo.show {
  visibility: visible;
}

/*-- META --*/

.section-4-element-2 {
  top: 67%;
  right: 14%;
}

.section-4-element-2 img {
  width: 28%;
}

.section-4-button-2 {
  top: 69.4%;
  left: 20%;
  z-index: 1;
}

.section-4-button-2 img {
  width: 15%;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.meta-logo {
  visibility: hidden;
}

.meta-logo.show {
  visibility: visible;
}

/*-- TIKTOK --*/

.section-4-element-3 {
  top: 67%;
  right: 14%;
}

.section-4-element-3 img {
  width: 28%;
}

.section-4-button-3 {
  top: 71.1%;
  left: 20%;
  z-index: 1;
}

.section-4-button-3 img {
  width: 15%;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.tiktok-logo {
  visibility: hidden;
}

.tiktok-logo.show {
  visibility: visible;
}

/*-- YOUTUBE --*/

.section-4-element-4 {
  top: 67%;
  right: 14%;
}

.section-4-element-4 img {
  width: 30%;
}

.section-4-button-4 {
  top: 72.8%;
  left: 20%;
  z-index: 1;
}

.section-4-button-4 img {
  width: 15%;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.youtube-logo {
  visibility: hidden;
}

.youtube-logo.show {
  visibility: visible;
}

/*-- BIGO --*/

.section-4-element-5 {
  top: 67.5%;
  right: 12%;
}

.section-4-element-5 img {
  width: 32%;
}

.section-4-button-5 {
  top: 74.5%;
  left: 20%;
  z-index: 1;
}

.section-4-button-5 img {
  width: 15%;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.bigo-logo {
  visibility: hidden;
}

.bigo-logo.show {
  visibility: visible;
}

/*-- KWAI --*/

.section-4-element-6 {
  top: 67%;
  right: 12%;
}

.section-4-element-6 img {
  width: 32%;
}

.section-4-button-6 {
  top: 76.2%;
  left: 20%;
  z-index: 1;
}

.section-4-button-6 img {
  width: 15%;
  border-radius: 10px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.kwai-logo {
  visibility: hidden;
}

.kwai-logo.show {
  visibility: visible;
}

/*---------- SECTION 5 ----------*/

.section-5-btn {
  top: 89%;
  right: 15.5%;
}

.section-5-btn img {
  width: 10%;
  margin: 0% 0.5%;
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.05);
}

.section-5-btn a {
  text-decoration: none;
  border: none;
  outline: none;
}

.section-5-btn a:hover,
.section-5-btn a:focus {
  text-decoration: none;
  border: none;
  outline: none;
}

.telegram-redirect-button,
.whatsapp-redirect-button {
  opacity: 0;
}

/*---------- HOVER BUTTON ----------*/

.hover-scale {
  transform: scale(1.1);
  transition: transform 0.3s ease;
}