body{
    padding: 0;
    margin: 0;
    overflow-x: hidden;
}
header {
    background-color: #4CAF50;
    padding: 15px;
    color: white;
    text-align: center;
    font-size: 24px;
    border-radius: 8px;
}
.content {
    margin-top: 20px;
    text-align: center;
}

.content h1 {
    font-size: 28px;
    margin-bottom: 10px;
}

.content p {
    font-size: 16px;
    color: #fff;
}

#text {
    display: inline-block;
    max-height: 50px; /* Tentukan batas tinggi area scroll */
    overflow: hidden; /* Sembunyikan konten di luar area max-height */
    line-height: 1.5em;
    height: 1.5em;
    position: relative; /* Menambahkan posisi relative agar transform bisa bekerja */
    white-space: nowrap; /* Agar teks tidak terpotong */
  }
  
  @keyframes scrollUp {
    0% {
      transform: translateY(100%); /* Mulai dari bawah */
    }
    100% {
      transform: translateY(-100%); /* Scroll ke atas */
    }
  }
  

/* alert */
@font-face
{
  font-family: 'Helvetica';
  src: url('public/font/Hel.otf');
  }
  a.claimed{
      padding: 10px 20px !important; 
  }
  #toast {
  display: flex;
  align-items: center;
  max-width: 400px;
  width: fit-content;
  padding: 10px 14px;
  position: absolute;
  border-radius: 5px;
  overflow: hidden;
  background: white;
  box-shadow: 0 2px 15px rgba(0,0,0,0.1);
  z-index: 5;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  }

  #icon-wrapper{
  width: 30px;
  height: 30px;
  background: var(--secondary);
  border-radius: 5px;
  box-sizing: border-box;
  padding: 5px;
  }

  #icon {
  background: var(--primary);
  border-radius: 50%;
  height: 100%;
  width: 100%;
  position: relative;
  }
  #icon::before, #icon::after {
  position: absolute;
  content: "";
  background: var(--secondary);
  border-radius: 5px;
  top: 50%;
  left: 50%;
  }

  #toast-message {
  padding: 5px 20px 5px 10px;
  }
  #toast-message h4, #toast-message p {
  margin: 0;
  line-height: 1.2em;
  }
  #toast-message h4 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  color: #404040;
  }
  #toast-message p {
  font-size: 10px;
  font-weight: 300;
  letter-spacing: .05em;
  color: #606060;
  }

  #toast-close {
  position: relative;
  padding: 12px;
  border: none;
  border-radius: 5px;
  background: rgba(0,0,0,0);
  transition: background 0.2s ease-in-out;
  }
  #toast-close:hover {
  background: rgba(0,0,0,0.1);
  }
  #toast-close::before, #toast-close::after {
  position: absolute;
  content: '';
  height: 12px;
  width: 1px;
  border-radius: 5px;
  background: #606060;
  top: 50%;
  left: 50%;
  transition: background 0.2s ease-in-out;
  }
  #toast-close:hover::before, #toast-close:hover::after {
  background: #404040;
  }
  #toast-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
  }
  #toast-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
  }

  @keyframes close {
  from {
      top: 5px;
      opacity: 1;
      transform: translateX(-50%) scale(1);
      visibility: visible;
  }
  to {
      top: -25px;
      opacity: 0;
      transform: translateX(-50%) scale(0.5);
      visibility: hidden;
  }
  }

  @keyframes open {
  from {
      top: -25px;
      opacity: 0;
      transform: translateX(-50%) scale(0.5);
      visibility: hidden;
  }
  to {
      top: 5px;
      opacity: 1;
      transform: translateX(-50%) scale(1);
      visibility: visible;
  }
  }

  #timer {
  width: 0%;
  height: 4px;
  background: var(--primary);
  position: absolute;
  bottom: 0;
  left: 0;
  border-top-right-radius: 5px;
  box-shadow: 0 0 8px var(--primary);
  }
  .timer-animation {
  animation: countdown 5s linear forwards;
  }
  @keyframes countdown {
  from {
      width: 100%;
  } 
  to {
      width: 0%;
  } 
  }

  /* ----------------------- */
  /* Success Styling         */
  /* ----------------------- */
  .success {
  --primary: #2DD743;
  --secondary: #E3FEE6;
  }
  .success #icon {
  transform: rotate(-45deg);
  }
  .success  #icon::before{
  width: 10px;
  height: 3px;
  transform: translate(calc(-50% + 1px), calc(-50% + 1px));
  }
  .success  #icon::after{
  width: 3px;
  height: 6px;
  transform: translate(calc(-50% - 3px), calc(-50% - 1px));
  }
h2
{
  font-family: 'Helvetica';
}

.livechat:hover{
  cursor: pointer;
}

.custom-social-proof {
      position: fixed;
      bottom: 0;
      width: -webkit-fill-available;
      z-index: 9999999999999 !important;
      font-family: 'Open Sans', sans-serif;
  }

  .custom-notification {
      border: 0;
      text-align: left;
      z-index: 99999;
      box-sizing: border-box;
      font-weight: 400;
      border-radius: 10px 10px 0 0px;
      box-shadow: 2px 2px 10px 2px hsla(0, 4%, 4%, 0.2);
      background-color: #fff;
      position: relative;
  }

  .custom-notification-container {
      display: flex !important;
      align-items: center;
      height: 60px;
  }

  .custom-notification-image-wrapper img {
      max-height: 75px;
      width: 90px;
      overflow: hidden;
      border-radius: 6px 0 0 6px;
      object-fit: cover;
  }

  .custom-notification-content-wrapper {
      margin: 0;
      height: 100%;
      color: gray;
      padding-left: 10px;
      padding-right: 20px;
      border-radius: 0 6px 6px 0;
      flex: 1;
      display: flex !important;
      flex-direction: column;
      justify-content: center;
  }

  .custom-notification-content {
      font-family: inherit !important;
      margin: 0 !important;
      padding: 0 !important;
      font-size: 14px;
      line-height: 16px;
  }

  .custom-notification-content small {
      margin-top: 3px !important;
      display: block !important;
      font-size: 12px !important;
      opacity: .8;
  }

  .custom-close {
      position: absolute;
      top: 8px;
      right: 8px;
      height: 12px;
      width: 12px;
      transition: .2s ease-in-out;
      transform: rotate(45deg);
      opacity: 0;
  }

  .custom-close::before {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      background-color: gray;
      position: absolute;
      left: 0;
      top: 5px;
  }

  .custom-close::after {
      content: "";
      display: block;
      height: 100%;
      width: 2px;
      background-color: gray;
      position: absolute;
      left: 5px;
      top: 0;
  }
  label{
      margin-bottom: 0;
  }

  .custom-notification:hover .custom-close {
      opacity: 1;
  }

  /* end alert */
@media (min-width: 600px) {
    body {
        min-height: 100vh;
    }

    div.margin-box_mobile{
        padding: 30px 10px 0 10px !important;
    }

    .container_spinner_mobile,.n_wheel{
        transform: scale(1.8) !important;
    }

    .containermobile {
        width: 450px;
        margin: 0 auto;
    }
    img.logo-mobile{
    padding: 30px 0px !important;
    }
}
input{
    width: 100%;
	padding: 10px 0px;
    font-size: 22px;
    border-radius: 10px;
    border: 1px solid gray;
    text-align: center;
}

button.submit {
    font-size: 22px;
    width: 100%;
    background: linear-gradient(to bottom, #cedeef 44%, #3ea6cd 99%);
    color:#13343d;
    padding: 5px 0px;
    border:0px;
    box-shadow: 2px 2px 2px grey;
    border-radius: 10px;
}

a.claimed {
    text-decoration: none;
    cursor: pointer;
    font-size: 22px;
    width: 100%;
    background: linear-gradient(to bottom, #cedeef 44%, #3ea6cd 99%);
    color:#13343d;
    padding: 10px 0px;
    border:0px;
    box-shadow: 2px 2px 2px grey;
    border-radius: 10px;
}

table.main{
    display: block;
    transform: scale(0.7);
}

table.mobile{
    display: none;
    transform: scale(0.7);
}

img.logo-web{
    width: 80%;
    display: block;
}

div.mobile-logo-container{
    display: none;
}

img.logo-mobile{
    width: 100%;
    display: block;
    padding: 0px;
    /* margin-bottom: 43px; */
    /* margin-top: 30px; */
}

div.margin-box{
    margin-top: 133px;
    margin-left: -100px;
}

div.margin-box_mobile {
    margin-top: -45px;
}

.container_spinner{
    width: auto;
    height: auto;
    margin: 0 auto;
    display: grid;
    place-items: center;
    grid-template-areas: "inner-div";
    margin-left: 114px;
    margin-top: 42px;
}

.container_spinner_mobile{
    width: 250px;
    height: auto;
    /* margin: 0 auto; */
    /* display: grid; */
    /* place-items: center; */
    grid-template-areas: "inner-div";
    /* margin-top: 0px; */
    transform: scale(1.5);
    position: absolute;
    z-index: -99;
    /* margin-bottom: 50px; */
    /* top: 0; */
    left: 0;
    right: 0;
    /* bottom: 0; */
    margin: auto;
    overflow-x: hidden;
}

/* history */

.timeline-container {
    padding: 50px 0;
    margin: 50px auto;
    position: relative;
    overflow: hidden;
 }
 
 .timeline-container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: 100%;
    background: #FFDD00;
    z-index: 1
 }
 
 .timeline-block {
    width: -webkit-calc(50% + 8px);
    width: -moz-calc(50% + 8px);
    width: calc(50% + 8px);
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    clear: both;
 }
 
 .timeline-block-right {
    float: right;
 }
 
 .timeline-block-left {
    float: left;
    direction: rtl;
    text-align-last: right;
 }
 
 .marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #FFDD00;
    background: #FFDD00;
    margin-top: 10px;
    z-index: 9999
 }
 
 .timeline-content {
    width: 95%;
    padding: 0 5px;
    color: #666
 }
 
 .timeline-content h3 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: 500
 }
 
 .timeline-content span {
    font-size: 15px;
    color: #a4a4a4;
 }
 
 .timeline-content p {
    font-size: 14px;
    line-height: 1.5em;
    word-spacing: 1px;
    color: #888;
 }
 
 
 @media screen and (max-width: 768px) {
    /* .timeline-container:before {
       left: 8px;
       width: 2px;
    } */
    .timeline-container{
        padding: 0;
        margin: 0px;
        width: 100%;
    }
    .timeline-content h3{
        font-size: 18px;
    }
    /* .timeline-block {
       width: 100%;
       margin-bottom: 30px;
    }
    .timeline-block-right {
       float: none;
    }
 
    .timeline-block-left {
       float: none;
       direction: ltr;
    } */
 }

/* end history */
.container_spinner_mobile #canvas{
    width: 250px;
    transform: scale(0.95);
    margin-top: 18px;
    margin-right: 2px;
}

    .custom-social-proof {
        position: absolute;
        width: max-content !important;
        z-index: 9999999999999 !important;
        font-family: 'Open Sans', sans-serif;
        bottom: 250px;
        right: 0;
        .custom-notification {
            border: 0;
            text-align: left;
            z-index: 99999;
            box-sizing: border-box;
            font-weight: 400;
            box-shadow: 2px 2px 10px 2px hsla(0, 4%, 4%, 0.2);
            background-color: #082d5a;
            position: relative;
            border-radius: 10px 0px 0px 10px;
            .custom-notification-container {
                display: flex !important;
                align-items: center;
                height: 60px;
                .custom-notification-image-wrapper {
                    img {
                        max-height: 75px;
                        width: 90px;
                        overflow: hidden;
                        border-radius: 6px 0 0 6px;
                        object-fit: cover;
                    }
                }
                .custom-notification-content-wrapper {
                    margin: 0;
                    height: 100%;
                    color: gray;
                    padding-left: 20px;
                    padding-right: 20px;
                    border-radius: 0 6px 6px 0;
                    flex: 1;
                    display: flex !important;
                    flex-direction: column;
                    justify-content: center;
                    .custom-notification-content {
                        font-family: inherit !important;
                        margin: 0 !important;
                        padding: 0 !important;
                        font-size: small;
                        line-height: 16px;
                        small {
                            margin-top: 3px !important;
                            display: block !important;
                            font-size: 12px !important;
                            opacity: .8;
                        }
                    }
                }
            }
            .custom-close {
                position: absolute;
                top: 8px;
                right: 8px;
                height: 12px;
                width: 12px;
                transition: .2s ease-in-out;
                transform: rotate(45deg);
                opacity: 0;
                &::before {
                    content: "";
                    display: block;
                    width: 100%;
                    height: 2px;
                    background-color: gray;
                    position: absolute;
                    left: 0;
                    top: 5px;
                }
                &::after {
                    content: "";
                    display: block;
                    height: 100%;
                    width: 2px;
                    background-color: gray;
                    position: absolute;
                    left: 5px;
                    top: 0;
                }
            }
            &:hover {
                .custom-close {
                    opacity: 1;
                }
            }
        }
    }

@media (max-width: 767px) {
    .custom-social-proof {
        position: fixed;
    }
    img.logo-mobile{
        margin-top: 10% !important;
    }
}

 @media (min-width: 600px) and (max-width: 1920px){

.inner {
    transform: scale(1);
    margin-bottom: 8px;
    margin-right: 0px;
    grid-area: inner-div;
}
#img-desktop{
    height: 48em;
    margin-top: 10px;
}
}

@media (min-width: 1600px){
    .inner {
        transform: scale(0.93);
        margin-bottom: 8px;
        margin-right: 0px;
        grid-area: inner-div;
    }
    }

/* canvas.inner{
    transform: scale(0.93);
    margin-bottom: 8px;
    margin-right: 0px;
    grid-area: inner-div;
} */


@media (min-width: 1200px) and (max-width: 1920px){
    
    
    .container_spinner{
        margin-left: 0px;
        margin-top: 0px;
        /* transform: scale(1.5); */
    }

    table.main{
        transform: scale(1);
        margin-left: 100px;
        margin-top: 0px;
        margin-right: 200px;
    }
}

@media (min-width: 367px){
    div.margin-box_mobile{
        padding: 10px;
    }
}

@media (min-width: 600px) and (max-width: 1200px){
    .container_spinner{
        margin-left: 0px;
        margin-top: 0px;
        transform: scale(0.7);
        margin-right: 20em;
    }

    table.main{
        transform: scale(1);
        margin-left: 100px;
    }
}



@media (min-width: 400px) and (max-width: 800px){

    .inner {
        transform: scale(0.93);
        margin-bottom: 8px;
        margin-right: 0px;
        grid-area: inner-div;
    }
    #img-desktop{
        height: 48em;
        margin-top: 10px;
    }

    .container_spinner{
        margin-top: 50px;
        height: 0px;
        transform: scale(0.7);
        /* margin-right: 20em; */
        margin-left: -30px;
    }

    table.main{
        transform: scale(1);
        margin-left: 100px;
    }
    }
.popup-container{
	width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1000;
    background: #080808b0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.popup-body{
    width: 347px;
    height: 600px;
    margin: 2% auto;
    background: #313131;
    border-radius: 0px;
    color: white;
}

@media (max-width: 992px){
    .popup-body{
        margin: 10% auto;
    }
}

.popup-header{
    height: 48px;
    width: 100%;
    background: #754116;
    float: left;
}

.popup-close{
    cursor: pointer;
    width: 36px;
    height: 36px;
    background: white;
    color: black;
    float: right;
    padding: 5px;
    border-radius: 100px;
    position: absolute;
    margin-top: -10px;
    margin-left: -9px;
}

.popup-container-ads{
    background-repeat: no-repeat;
    margin: 10% auto;
    border-radius: 18px;
    background-size: 100%;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
@media (max-width: 375px) and (max-height: 740px){
    .custom-social-proof{
        bottom: 175px !important;
    }
    .csp-m{
        bottom: 140px !important;
    }
}
/* IPHONE SE */

@media (max-width: 375px) {
    .custom-social-proof{
        bottom: 120px;
    }
    .csp-m{
        bottom: 80px;
    }
    /* .containermobile{
        height: 110vh !important;
        overflow-x: hidden;
    } */
    input{
        width: 80%;
        padding: 5px 0px;
        font-size: 16px;
        /* margin-top: 50px; */
    }
    button.submit{
        width: 80%;
        padding: 5px 0px;
        font-size: 16px;
    }
    /* .col-md-12{
        margin-top: 10px !important;
    }
    div.margin-box_mobile{
        padding: 0 !important;
    } */
    img.logo-mobile{
        /* padding-top: 0 !important;
        margin-top: -60px !important; */
        /* margin-bottom: 0 !important; */
    }
}

@media (min-width: 768px) and (max-width: 768px) {
    .containermobile{
        transform: scale(.9);
        -webkit-transform-origin-y: top;
    }
}

@media (min-width: 820px) and (max-width: 820px) {
    .containermobile{
        transform: scale(.8);
        -webkit-transform-origin-y: top;
    }
    .custom-social-proof{
        bottom: 20em;
    }
    .csp-m{
        bottom: 17em !important;
    }
}