/* FONT */
@font-face {
    font-family: IndosatRegular-Regular;
    src: url("../font/IndosatRegular-Regular.ttf") format('truetype');
}

@font-face {
    font-family: IndosatMedium-Medium;
    src: url("../font/IndosatMedium-Medium.ttf") format('truetype');
}

@font-face {
    font-family: IndosatBold-Bold;
    src: url("../font/IndosatBold-Bold.ttf") format('truetype');
}



.IndosatRegular-Regular {
    font-family:'IndosatRegular-Regular';
}

.IndosatMedium-Medium {
    font-family:'IndosatRegular-Medium';
}

.IndosatBold-Bold {
    font-family:'IndosatBold-Bold';
}

.text-brown {
    color: #793618;
}

.text-brown-dark {
    color: #622537;
}


.padding-10{padding: 10px 10px !important;}

.video-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
  }

  /* Content that overlays the video */
  .video-content {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    background: rgba(0, 0, 0, 0.3); /* optional dark overlay for readability */
  }



  .bg-image-q3 {
    background-image: url('../bgleaderboard_v1.png'); /* 🔁 Replace with your image */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: 100 ;
  }

  .bg-image-q4 {
    background-image: url('../leaderboard_v1.png'); /* 🔁 Replace with your image */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: 1002 !important;
  }

  .bg-tab {
    background-image: url('../bg-tab.png'); /* 🔁 Replace with your image */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: 1002 !important;
  }

  .bg-tab1 {
    background-image: url('../bgall.png'); /* 🔁 Replace with your image */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: 1002 !important;
  }

  .ditengah {
    position: absolute;
    top: 59.8%;
    left: 53%;
    width: 55%;
    transform: translate(-50%, -50%);
}

.tengah {
    position: absolute;
    top: 65%;
    left: 50%;
    width:75%;
    transform: translate(-50%, -50%);
}

.mt-3p {
    margin-top: 3.2% !important;
}

.mr-10p {
    margin-right: 10%;
}

.mt-min22 {
    margin-top: -22%;
}

.width-5p {
    width: 5%;
}

.width-11p {
    width: 11%;
}

.width-25p {
    width: 25%;
}

.width-30p {
    width: 30%;
}

.width-35p {
    width: 35%;
}

.width-58p {
    width: 58%;
}

.width-85p {
    width: 85%;
}

.width-100p {
    width: 100%;
}


.bg-white-soft {
    background-color: rgba(255,255,255,0.7);
}


.position-name {
    position: absolute;
    top: 35%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
}

.position-number {
    position: absolute;
    top: 70%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
}

.font-50 {
    font-size: 50px;
    line-height: 60px;
}

.font-70 {
    font-size: 70px;
    line-height: 80px;
}

.font-100 {
    font-size: 100px;
    line-height: 110px;
}

/* POSITION PERSON  */

.position-person1 {
    position: absolute;
    top: 17.5%;
    width: 14%;
    left: 27.4%;
    z-index: 4;
    /* background: rgba(255, 255, 255, 0.5); */
}

.position-text-person1 {
    position: absolute;
    top: 39.5%;
    width: 14%;
    left: 26.4%;
}

.position-person2 {
    position: absolute;
    top: 17.5%;
    width: 14%;
    left: 45.4%;
    /* background: rgba(255, 255, 255, 0.5); */
}

.position-text-person2 {
    position: absolute;
    top: 39.5%;
    width: 14%;
    left: 44.4%;
}

.position-person3 {
    position: absolute;
    top: 17.5%;
    width: 14%;
    left: 63.4%;
    /* background: rgba(255, 255, 255, 0.5); */
}

.position-text-person3 {
    position: absolute;
    top: 39.5%;
    width: 14%;
    left: 62.4%;
}

.position-person4 {
    position: absolute;
    top: 17.5%;
    width: 14%;
    left: 81.4%;
    /* background: rgba(255, 255, 255, 0.5); */
}

.position-text-person4 {
    position: absolute;
    top: 39.5%;
    width: 14%;
    left: 80.4%;
}

.position-person5 {
    position: absolute;
    top: 52.7%;
    width: 14%;
    left: 27.4%;
    /* background: rgba(255, 255, 255, 0.5); */
}

.position-text-person5 {
    position: absolute;
    top: 74.6%;
    width: 14%;
    left: 26.4%;
}

.position-person6 {
    position: absolute;
    top: 52.7%;
    width: 14%;
    left: 45.4%;
    /* background: rgba(255, 255, 255, 0.5); */
}

.position-text-person6 {
    position: absolute;
    top: 74.6%;
    width: 14%;
    left: 44.4%;
}

.position-person7 {
    position: absolute;
    top: 52.7%;
    width: 14%;
    left: 63.4%;
    /* background: rgba(255, 255, 255, 0.5); */
}

.position-text-person7 {
    position: absolute;
    top: 74.6%;
    width: 14%;
    left: 62.4%;
}

.position-person8 {
    position: absolute;
    top: 52.7%;
    width: 14%;
    left: 81.4%;
    /* background: rgba(255, 255, 255, 0.5); */
}

.position-text-person8 {
    position: absolute;
    top: 74.6%;
    width: 14%;
    left: 80.4%;
}


.flex-center {
    display: flex;
    justify-content: center;
}

.border-4 {
    border: 4px solid #793619 !important;
}

.radius-50 {
    border-radius: 50px;
}

.btn-start {
    padding: 40px;
    width: 50%;
    background: transparent;
    content: none;
    border: none;
}