@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  opacity: 0;
  -moz-animation: fadeIn ease-in 1;
  animation: fadeIn ease-in 1;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

.fade-in.one {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.fade-in.two {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.fade-in.three {
  -webkit-animation-delay: 0.7s;
  -moz-animation-delay: 0.7;
  animation-delay: 0.7s;
}

body {
  border-image: url(rounded-edge.png) 25% repeat;
  border-width: 250px;
  font-size: 14px;
  background: #020024;
background: linear-gradient(90deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
  width: 100%;
   height: 100%;
}
     #div {
  width: 100%;
   height: 100%;
  margin: 0;
}

  #iframe {
   background-color: rgba(249, 249, 249, 0.0);
    position: fixed;
    border: none;
    top: 0px; right: 0;
    bottom: 0; left: 0;
    width: 86.2%;
    height: 73.5%;
   z-index: 0;
   padding-bottom: 16%;
   border-radius: 1.5vh 1.5vh 1vh 1vh;
   top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
   backdrop-filter: blur(5%);
}
   .bg-color {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  padding-top:30px;
  padding-bottom:30px;
  border-top: none;
  margin: 0;
  text-align: center;
  width: 86%;
   height: 63%;
   z-index: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
   backdrop-filter: blur(5%);
  color: #000;
}
  .bg-color div {
  padding-top: 10px;
  padding-bottom: 5px;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
 }
   .bg-color  button {
    background: #4c68d7;
    color: white;
    border: none;
    padding: 6px 16px;
    border-radius: 10px;
    margin: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s;
  }
  .bg-color button:hover {
    background: #657ef8;
  }
 .contain {
  width: 100%;
  position: fixed;
  left: 0;
  padding-top:30px;
  padding-bottom:30px;
  border-top: none;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
   height: 100%;
   z-index: 0;
   top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
}

.tabcontent {
  width: 95%;
  height: 95%;
  position: relative;
  border-top: none;
  border: 1px solid transparent;
  padding: 10px;
  background-image: url(../img/hp.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    z-index: 0;
}
.bghome {
  width: 95%;
  height: 95%;
  position: relative;
  border-top: none;
  border: 1px solid transparent;
  padding: 10px;
    z-index: 0;
}
 .themes {
 position: fixed;
  bottom: 10%;
  left: 5%;
  background: rgb(245, 244, 242, 0.99);
  padding: 9px;
  display: none;
  border: 1px solid #965909;
  border-radius: 8px;
  font-size: 14px;
  text-decoration: underline;
}
  nav.bottom_tab {
  position: absolute;
  max-width: 85.9%;
  height: 7.5vh;
  left: 0;
  right: 0;
  bottom: 10.2vh;
  margin: auto;
  display: flex;
  background-color: rgba(249, 249, 249, 0.0);
  border-top: 0.1px solid rgba(249, 249, 249, 0.2);
  border-radius: 0 0 50% 50%;
  backdrop-filter: blur(1px);
  z-index: 999;
}
@media screen and (min-width: 640px) {
  nav.bottom_tab {
    height: 8px;
  }
}
nav.bottom_tab ul {
  flex: 1;
  margin: 0;
  padding: 0 0px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  position: relative;
}
nav.bottom_tab ul li {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s ease-in-out all;
}
nav.bottom_tab ul li a {
  flex: 1;
  display: flex;
  height: 0px;
  color: #fff;
  text-decoration: none;
  padding: 0px 0 ;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
}
@media screen and (min-width: 640px) {
  nav.bottom_tab ul li a {
    padding: 1px;
  }
}
nav.bottom_tab ul li.active a p {
  color: #fff;
}
   nav.bottom_tab .underlay {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  width: var(--underlay-width);
  height: 0px;
  border-radius: 10px;
  background-color: #ed9945;
  background: linear-gradient(180deg, rgba(255, 255, 255 0.1) 0%, rgba(255, 255, 255 0.9) 100%), #000;
  z-index: 0;
  transform: translateX(var(--offset));
  transition: 0.6s ease all;
  transform-origin: 50% 0%;
}
  nav.bottom_tab a p {
   height: 54px;
   font-size: 32px;
   padding: 12;
  position: absolute;
  bottom: -100%;
  color: #ddd;
  }
 .underlay {
  background: #B00;
  border-radius: 10px;
  box-shadow: 
    8px 8px 16px rgba(0,0,0, 0.2),
    inset -8px -8px 12px rgba(0,0,0, 0.2),
    inset 8px 8px 12px rgba(255, 255, 255, 0.4);
}

   #jam {
  position: absolute;
  width: 11vw;
  padding: 0.5vw 1.5vw;
  left: 8%;
  top: 0;
  top: 2vh;
  margin: auto;
  display: flex;
  z-index: 999;
  font-size: 1.7vh;
  color: #fff;
   background: rgba(0, 0, 0, 0.2);
  float: left;
   border-radius: 2vw;
   text-align: center;
}
 h4 {
  display: none;
}
  

     .menu_music {
  position:  fixed;
     right: 6.4%; 
      top: 39%;
    display: flex;
    align-items: center;
    justify-content: center;
   text-align: center;
 }
  .slide-toggle {
   position:  relative;
   left:0; 
    background: red;
    float: left;
    background: url("../img/play.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
   text-align: center;
   color: #fff;
   border-radius: 50%;
   height: 10vw;
    width: 10vw;
   -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;  
}
.slide-toggle:hover {
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
}
   
  
.boxTab {
        float:right;
        overflow: hidden;
    }
    .boxTab-inner{
        width: 60vw;
        border: 1px solid #a29415;
        max-height: 30vh;
         right: 0%; 
        background: rgba(255, 255, 255, 0.9);
       color: #fff;
        align-items: center;
    justify-content: center;
   text-align: center;
  padding: 15px;
  border-radius: 4vw;
    }
 
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(249, 249, 249, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
}

/* Hide preloader when the content is fully loaded */
body.loaded .preloader {
    display: none;
}

.loader {
    width: 60px;
    height: 60px;
    background: rgb(90, 19, 125, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: animate 1s infinite;
    border: 0.4px solid red;
}
@keyframes animate{
    from{
        height: 65px;
        width: 65px;
    }
    to{
        height: 85px;
        width: 85px;
    }
}
.innercircle{
    width: 45px;
    height: 45px;
    background: pink;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(222, 130, 18, 0.2), rgba(222, 130, 18, 0.01)), url(../img/aple.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border: 6px solid #fff;
 
}

  .cont-google {
  position: relative;
  width: 88%;
  height: 8vh;
  padding-left: 0.1vh;
  padding-top: 0 5vh;
  left: 6%;
  top: 3vh;
  border-radius: 5vh;
   border: 0.8px solid #eee;
   background: rgba(255, 255, 255, 0.9);
  display: flex;
 }
  .cont-google img {
  width: 12.5vw;
  height: 7vh;
  margin-top: 0.5vh;
}
  .input {
   width: 70%;
   height: 5vh;
  margin-top: 1.2vh;
  margin-left: 2vh;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  outline:none!important;
  border:none!important;
  font-style: normal;
  font-size: 5.0vw;
  color: #aaa;
}
  .cont-time {
  position: relative;
  width: 100%;
  left: 0;
  top: 4vh;
  margin: 0vw;
  text-align: center;
   color: #452f0a;
   display: flex;
    align-items: center;
    justify-content: center;
   text-align: center;
   font-weight: normal;
  background: url(../img/gunung.png);
    background-size: cover;
   z-index:0;
 }
    .time {
  position: relative;
  width: 59vw;
  height: 26vh;
  margin: 3vw;
   color: #aaa;
   background: rgba(255, 255, 255, 0.2);
  border-radius: 10%/40%;
   border: 0.1vh solid #eee;
  z-index: 999;
}
    .cont-time .time .display-date{
  display: inline-block;
  position: relative;
  left: 0;
  top: -1vh;
}
   .cont-time .time a p {
  position: relative;
  left: 0;
  top: 17%;
}
 .time-p {
  font-size: 9.2vw;
  transform: scale(1.2, 3);
  }
  #month, #day, #date, #year, #daynum {
  font-size: 4vw;
  position: relative;
  left: 0;
  top: 8vw;
}
   .cuaca {
   width: 30vw;
  height: 26vh;
}
  .cuaca p {
   margin: 1.5vh;
}
  .cuaca div {
   margin: 8vw auto;
}
  .suhu {
   font-size: 9.5vw;
  margin-top: 1vh;
   color: #888;
}
   .kota {
   font-size: 4.5vw;
   color: #eee;
}
 
  .item5 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 0;
  top: 2vh;
  position: relative;
  margin-top: 3vw;
  font-weight: normal;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
}
   .itemSlide2 {
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 0;
  top: 0vh;
  position: relative;
  margin-top: 0vw;
  font-weight: normal;
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
}
.theme {
  height: 0vh;
  margin: 0.1vw;
  margin-top: 3vw;
  text-align: center;
   color: #452f0a;
   display: inline-block;
    align-items: center;
    justify-content: center;
   text-align: center;
   font-weight: normal;
   
 }
  .item5 .theme p {
  width: 20vw;
  height: 11.5vh;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2vw;
   
  
   margin: 1vw;
  padding: .5vw ;
}
    .title {
  font-size: 3vw;
  height: 2vh;
  width: 18vw;
  background: none;
  position: relative;
  left: 0;
  bottom: 0;
  margin-bottom: -0vw;
  overflow: hidden;
  color: #eee;
  display: inline;
}
   
.Theme-Wa {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/wa.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
  .Theme-Wed {
  padding-top: 4.5vw;
	width: 17vw;
  height: 8vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/wedding-icon.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
    .Theme-Cam {
  padding-top: 3vw;
	width: 18.5vw;
  height: 9.5vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/camera.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
  .Theme-Kfull {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/giti.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
   .Theme-2025{
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/2025.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
   .Theme-google {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/google.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
  .Theme-phone {
  padding-top: 4vw;
	width: 19.6vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/phone.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
    
   .Theme-email {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/email.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
  .Theme-calculator {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/calculator.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
  .Theme-calender {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/calender.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
   .Theme-clock {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/clock.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
   .Theme-stopwatch {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/stopwatch.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
   .Theme-quran {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/quran.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
  .Theme-murathal {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/icon-quran.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
  .Theme-pkb {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/pkb.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
  .Theme-note {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/note.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
 .Theme-browser-gt {
  padding-top: 4vw;
	width: 18vw;
  height: 9vh;
   background: linear-gradient(rgba(168, 168, 158, 0.0), rgba(168, 168, 158, 0.0)), url(../img/browser-gt.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    align-items: center;
    justify-content: center;
}
a:link {
  text-decoration: none;
  color: #fff;
}

a:visited {
  text-decoration: none;
  color: #fff;
}
   .bottom_apps {
  position: fixed;
  width: 96%;
   left: 2%;
  bottom: 0vh;
  background: rgba(255, 255, 255, 0.2);
   display: inline-block;
    align-items: center;
    justify-content: center;
   text-align: center;
   font-weight: normal;
   border-radius: 10%/40%;
   border: 0.8px solid #eee;
 }
   
  .bottom_apps div {
  margin: 0vh 3vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
   .bottom_apps div i {
  margin-bottom: 1vh;
 }
 
.cont-time img {
    width:100%;
    left: 0;
    top: 0;
    right: 0;
    position: absolute;
    -webkit-user-select: none; 
    -moz-user-select: none;   
    -ms-user-select: none;
    user-select: none;    
    pointer-events: none;
   z-index:0;
  opacity: 0.4;
}
@-webkit-keyframes animCloud {
    from {
        -webkit-transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(-100%)
    }
}
@-moz-keyframes animCloud {
    from {
        -moz-transform: translateX(100%)
    }
    to {
        -moz-transform: translateX(-100%)
    }
}
@keyframes animCloud {
    from {
        -webkit-transform: translateX(100%);
        -moz-transform: translateX(100%);
        -ms-transform: translateX(100%);
        -o-transform: translateX(100%);
        transform: translateX(100%)
    }
    to {
        -webkit-transform: translateX(-100%);
        -moz-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
        -o-transform: translateX(-100%);
        transform: translateX(-100%)
    }
}
.cloud1 {
    -webkit-animation: animCloud 20s infinite linear;
    -moz-animation: animCloud 20s infinite linear;
    animation: animCloud 20s infinite linear
}
.cloud2 {
    -webkit-animation: animCloud 40s infinite linear;
    -moz-animation: animCloud 40s infinite linear;
    animation: animCloud 40s infinite linear
}
.cloud3 {
    -webkit-animation: animCloud 60s infinite linear;
    -moz-animation: animCloud 60s infinite linear;
    animation: animCloud 60s infinite linear
}
.cloud4 {
    -webkit-animation: animCloud 80s infinite linear;
    -moz-animation: animCloud 80s infinite linear;
    animation: animCloud 80s infinite linear
}
  
  .cont-iframe {
  position: relative;
  background-color: rgba(249, 249, 249, 0.7);
   padding: 0vh;
   width: 100%;
    height: 100%;
  display: block;
    align-items: center;
    justify-content: center;
   text-align: center;
   overflow: auto;
}
  .cont-iframe h1 {
   position: relative;
   margin: 5vh auto;
  }
   .cont-iframe h2 {
   position: relative;
   margin-top: -4vh;
  }
    .cont-iframe p {
   position: relative;
   margin: 4vh ;
   text-align: left;
   font-size: 5vw;
  }
  .iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  /* 16:9*/
  position: relative;
}

.iframe-container iframe {
  border: 0;
  width: 100%;
    height: 100%;
  left: 0;
  position: absolute;
  top: 0;
}