.ikon-home-dark {
    background-image: url(../../aset/img/Materi/HOME.png);
}
.ikon-aboutus-dark {
    background-image: url(../../aset/img/Materi/ABOUT\ US.PNG);
}
.ikon-service-dark {
    background-image: url(../../aset/img/Materi/SERVICES.PNG);
}
.ikon-medical-dark {
    background-image: url(../../aset/img/Materi/MEDICAL.png);
}
.ikon-request-dark {
    background-image: url(../../aset/img/Materi/REQUEST\ APPO.png);
}

.ikon-aboutf-colored {
    background-image: url(../../aset/img/logo-menu.png);
    width: 71px;
    height: 95px;
    margin: 0px 10px 0px 0px;
}

.no-trans {
    transition: none;
}

.baca, .sL {
    color: #fc74b7;
}

.banner-doctor {
    background-image: url(../../aset/img/Materi/ABOUT\ US.jpg);
    background-size: cover;
}

.banner-apartement {
    background-image: url(../../aset/img/apartments.JPG);
    background-size: cover;
    background-position-x: 96%;
}

.banner-hospital {
    background-image: url(../../aset/img/Our-Hospitals.JPG);
    background-size: cover;
    background-position-y: 50%;
}

.slider-awal {
    background-image: url(../../aset/img/SLIDER/SLIDER\ 1.jpg);
    background-size: cover;
}
.slider-awal {
    background-image: url(../../aset/img/SLIDER/SLIDER\ 5.jpg);
}

.carousel-control-next-m {
   background-color: black;
}
.carousel-control-prev-m {
    background-color: black;
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
}

.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
  transform: translateX(25%);
}

.carousel-inner .carousel-item-left.active, 
.carousel-inner .carousel-item-prev {
  transform: translateX(-25%);
}
  
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{ 
  transform: translateX(0);
}

.ig-link, .ig-link2 {
    display: none;
}

.testi-img-1 {
    background-image: url(../../aset/img/foto-testimoni/Testi-sarwendah.jpg);
    background-size: cover;

}
.testi-img-2 {
    background-image: url(../../aset/img/foto-testimoni/Veronica.jpg);
    background-size: 175%;
    background-position-x: 50%;
    background-position-y: 40%;

}
.testi-img-3 {
    background-image: url(../../aset/img/foto-testimoni/Budi-Hermawan.jpg);
    background-size: 175%;
    background-position-x: 50%;
    background-position-y: 40%;

}
.testi-img-4 {
    background-image: url(../../aset/img/foto-testimoni/Dr-ira.jpg);
    background-size: 150%;
    background-position-x: 50%;
    background-position-y: 55%;

}
.testi-img-5 {
    background-image: url(../../aset/img/foto-testimoni/Silvya.jpg);
    background-size: cover;

}
.testi-img-6 {
    background-image: url(../../aset/img/foto-testimoni/Cory.jpg);
    background-size: cover;

}
.testi-img-7 {
    background-image: url(../../aset/img/foto-testimoni/Selvie.jpg);
    background-position-x: 60%;
    background-size: cover;

}

no {
    white-space: nowrap;
}



/* .ikon-concierge-dark {
    background-image: url(../../aset/img/Materi/);
} */
/* .ikon-evacuation-dark {
    background-image: url(../../aset/img/Materi/);
} */
.ikon-accomodation-dark {
    background-image: url(../../aset/img/Materi/ACCOMODATION.png);
}
/* .ikon-business-dark {
    background-image: url(../../aset/img/Materi/);
} */
/* .ikon-recidency-dark {
    background-image: url(../../aset/img/Materi/);
} */
.ikon-insurance-dark {
    background-image: url(../../aset/img/Materi/INSURANCE.png);
}

.ikon-contactus-dark {
    background-image: url(../../aset/img/Materi/CONTACT\ US.PNG);
}

.facebook-logo {
    background-image: url(../../aset/icon/facebook-logo.jpg);
}

.instagram-logo {
    background-image: url(../../aset/icon/instagram-logo.jpg);
}

.bg-testi-1 {
    background-size: cover;
    background-image: url(../../aset/img/foto-testimoni/Sarwendah.jpg);
}
.bg-testi-2 {
    background-size: cover;
    background-image: url(../../aset/img/foto-testimoni/Veronica.jpg);
}
.bg-testi-3 {
    background-size: cover;
    background-image: url(../../aset/img/foto-testimoni/Budi-Hermawan.jpg);
}
.bg-testi-4 {
    background-size: cover;
    background-image: url(../../aset/img/foto-testimoni/Dr-ira.jpg);
}
.bg-testi-5 {
    background-size: cover;
    background-image: url(../../aset/img/foto-testimoni/Silvya.jpg);
}
.bg-testi-6 {
    background-size: cover;
    background-image: url(../../aset/img/foto-testimoni/Cory.jpg);
}

.modal-header{
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    padding: 2%;
    padding-left: 4%;
    color: #ed008c;
    font-family: newJune;

}

.modal-content {
    border-radius: 15px;
}

.modal-content button {
    opacity: 1;
}

/* .carousel-inner {
    border-radius: 15px;
} */

.carousel-control-prev {
    border-radius: 15px;
    background: #5c5c5c;
    color: white !important;
    width: 40px;
    top: 41%;
    left: -2%;
    height: 10%;
    opacity: 1;
}

.carousel-control-next {
    border-radius: 15px;
    background: #5c5c5c;
    color: white !important;
    width: 40px;
    top: 41%;
    left: 99%;
    height: 10%;
    opacity: 1;
}

/* .carousel-item {
    display: block !important;
} */

.frlk-fff-1 {
    background-image: url(../../aset/img/EVENT/FRLK_FFF/FRLK_FFF_1.JPG);
}

.frlk-fff-2 {
    background-image: url(../../aset/img/EVENT/FRLK_FFF/FRLK_FFF_2.jpg);
}

.frlk-fff-3 {
    background-image: url(../../aset/img/EVENT/FRLK_FFF/FRLK_FFF_3.jpeg);
}

.frlk-fff-4 {
    background-image: url(../../aset/img/EVENT/FRLK_FFF/FRLK_FFF_4.jpeg);
}

.frlk-fff-5 {
    background-image: url(../../aset/img/EVENT/FRLK_FFF/FRLK_FFF_5.jpeg);
}

.frlk-fff-6 {
    background-image: url(../../aset/img/EVENT/FRLK_FFF/FRLK_FFF_6.JPG);
}

.frlk-fff-7 {
    background-image: url(../../aset/img/EVENT/FRLK_FFF/FRLK_FFF_7.JPG);
}

.frlk-fff-8 {
    background-image: url(../../aset/img/EVENT/FRLK_FFF/FRLK_FFF_8.JPG);
}

footer {
    font-family: newJune;
}

@media only screen  and (min-width:1024px) {

    .carousel-control-next-m {
        border: none;
        position: absolute;
        top: 50%;
        left: 97.5%;
    }

    .area-pages p{
        margin-bottom: 20px;
    }
    .area-pages a{
        margin-top: 20px;
    }

    .sample-text-area {
        padding: 10em 0 10em 0 !important;

    }

    .area-pages {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 147%;
        text-align: justify;
        margin-right: 10%;
        font-size: 20px;
    }

    .text-area-pages {
        display: flex;
        flex-direction: row;
        align-items: center;
        /* white-space: nowrap; */
        /* margin-right: 25%;
        margin-left: 10%; */
    }
    .judul-area {
        white-space: nowrap; 
        margin-right: 25%;
        margin-left: 10%;
    }

    .carousel-control-prev-m {
        border: none;
        position: absolute;
        top: 50%;
        left: 0%;
    }

    .we-help-mobile {
        left: -10%;
    }

    .footer-area {
        background-image: url(../../aset/img/Materi/FOOTER.jpg);
    }

    .con-menu {
        margin-top: -1%;
    }

    .gambar-testi {
        /* background-image: url(../../aset/img/foto-testimoni/Dr-ira.jpg); */
        border-radius: 50%;
        position: relative;
        left: 2%;
        top: 10%;
        width: 180px;
        height: 150px;
    }
    .judul-testi {
        margin-top: -20%;
        margin-bottom: 12%;
        margin-left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .judul-testi h5 {
        font-size: 150%;
        margin-left: -8.53%;
    }

    .judul-testi p {
        font-size: 100%;
    }

    .minus-ml-100 {
        margin-left: -8%;
    }

    .overlay-contactus{
        margin-top: 325px;
    }

    .aboutus-mobile{
        left: -18% !important;
    }

    .ikon-footer-fb-ig {
        background-size: cover !important;
        width: 70px;
        height: 70px;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 2px;
        margin-right: 0px;
    }

    .contactus-mobile{
        left: -28%;
        /* margin-top: -14% !important; */
    }

    .logo-menu a img{
        margin-top: 18px !important;
    }
    
    .modal-header h5{
        border-radius: 15px;
        font-family: newJune;
        font-size: 30px;
        position: relative;
        /* left: 30%; */
        color: #ed008c;
        
    }
    .modal-header p{
        font-family: newJune;
        font-weight: bold;
        position: relative;
        /* left: -5%; */
        color: #ed008c;
        margin: 0px 0px 0px;
        
    }
    
    .slider-home {
        background-image: url(../../aset/img/SLIDER/slider-home.png);
        background-size: cover;
        background-position-x: 50%;
        background-repeat: no-repeat;
    }
    
    
    .slider-1 {
        background-image: url(../../aset/img/SLIDER/Medical.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .slider-2 {
        background-image: url(../../aset/img/SLIDER/Healthy.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .slider-3 {
        background-image: url(../../aset/img/SLIDER/Accomodation.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .slider-4 {
        background-image: url(../../aset/img/SLIDER/Transportation.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .slider-5 {
        background-image: url(../../aset/img/SLIDER/Q&A.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .bg-testi-4 {
        background-position-y: -120px ;
    }
    
    .bg-testi-5 {
        background-position-x: 50%;
    }

    .flex-resp {
        flex-direction: row;
        flex-wrap: nowrap;
        margin-left: 3%;
    }

    .laptop {
        width:47em;
        margin-left:4.5em;
    }

    .overlay-accomodation {
        margin-top: 250px;
    }

    .overlay-resident {
        margin-top: 250px;
    }
    
    .video-laptop {
    position: absolute;
    width: 488px;
    top: 30px;
    left: 164px;
    width: 488px;
}

.footer-area {
    padding-bottom: 115px;
    padding-top: 68px;
}

.bg-white-city {
    background: url(../../aset/img/bg-white.png);
    background-size: 102%;
    background-repeat: no-repeat;
    background-position-y: 59px;
    background-position-x: -2px;
    padding-top: 15px;
    margin-top: 150px;
}

.watch-text {
    position: absolute;
    top: 103px;
    left: 57em;
}

.watch-text h4 {
    font-size: 50px;
    font-family: 'newJune';
}

.logo-whatsapp {
    top: 8px;
    left: 23px;
    width: 100px;
}

.logo-gmail {
    top: 8px;
    left: 23px;
    width: 100px;
}

.section-event {
    margin-top: 8em;
}

.title-event {
    margin-bottom: 50px;
}

.aboutus-ourpart {
    margin-top: -4em;
    padding-top: 15px;
    display:absolute !important;
    
}

.container-ourpart{
    padding-right: 22%;
    padding-left: 22%;
    margin-right: auto;
    margin-left: auto;
}

.aboutus-ourpart .card {
    width: 25em;
    height: 20em;
    box-shadow: 15px 12px 20px rgb(173, 173, 173) !important;
}

.aboutus-ourpart .card .card-about {
    margin-left: 100px;
}

.btn-more {
    font-family: newJune;
    background-color:#ed008c;
    color:#fff;
    margin-right: 10%;
    right: 270px;
    box-shadow:1px 0px 5px rgb(173 173 173);
}

#btn-arrow1{
    left:41%;
    top:93.6%;
}
#btn-arrow2 {
    top:93.6%;
}
#btn-arrow3, #btn-arrow6{
    left:40%;
    top:93.6%;
}

#btn-arrow4 {
    left: 13%;
    top:93.6%
}

#btn-arrow5 {
    top:93.6%
}



.card-event {
    margin-right: 0px;
    margin-bottom: 10px;
    border-radius: 10px;
    width: 245px;
    height: 132px;
    color: white;
    padding-top: 10px;
    padding-right: 5px;
    box-shadow: 15px 12px 20px rgb(173, 173, 173);
}

/* .card-event .btn{

    width: 100px;
} */

.card-event h4 {
    color: white;
    font-size: 20px;
    margin-top: 10px; 
    line-height: 0.5em !important;
    margin-bottom: 10px;
}

.card-event p {
    margin: 0 0 0px;
    font-size: 13.5px;
}

.card-event-pink {
    background-color: #fc74b7;
}

.card-event-grey {
    background-color: #5c5c5c;
}

.our-friend {
    margin-top: 7em !important;
    padding-top: 15px;
}

.our-friend .card {
    border: none;
    border-radius:10px;
    width: 32.5%;
    /* box-shadow:1px 0px 5px rgb(173 173 173); */
}

.our-friend .card .card-header {
    background: #fc74b7; 
    border-radius:10px 10px 0px 0px;
}

.carousel-inner-testi {
    border-radius: 15px;
}

.carousel-inner .item .carousel-caption1 {
    top:28%;
    align-items: left !important; 
    left:58%; 
    width:50% !important;
}
.carousel-inner .item .carousel-caption2 {
    top:28%;
    align-items: left !important; 
    left:55%; 
    width:50% !important;
}
.carousel-inner .item .carousel-caption3 {
    top:28%;
    align-items: left !important; 
    left:58%; 
    width:50% !important;
}
.carousel-inner .item .carousel-caption4 {
    top:28%;
    align-items: left !important; 
    left:56%; 
    width:50% !important;
}

.carousel-inner .item .contactus-slider {
    top:28%; 
    left:49%; 
    width:50% !important;
}

.carousel-inner .item .eng h5 {
    /* padding-left: 12px !important; */
    font-size:4.8em;
}
.carousel-inner .item .ind h5 {
    /* padding-left: 12px !important; */
    font-size:3.4em;
}
.carousel-inner .item .carousel-caption h5 {
    /* padding-left: 12px !important; */
    margin-bottom: 15px;
    color: #5c5c5c;
    font-family: newJune;
    font-weight: 100;
}

.carousel-inner .item .carousel-caption p {
    font-size: 1em;
    /* width: 100%;  */
    line-height: 0em;
    color: #5c5c5c;
    font-family: newJune;
    font-weight: 100;
}

.text-list-ini {
    color: #5c5c5c;
    padding-left: 10px;
    margin-top: 4%;
    list-style: '- ';
    font-size: 16px;
}

.text-list-ini li {
    color: #5c5c5c;
    margin-bottom:5px;
}

.btn-arrow{
    left: 13em;
    top: 424px;
    position: absolute;
    transition: 0.5s;
}


.card-body-tinggi {
    height: 15em;
    /* height: 32em; */
    border-radius: 0px 0px 10px 10px;
    font-size: 15px;
    transition: 3s;
}

.sL {
    display: none;
    cursor: pointer;
}

.ikon-arrow {
    display: none;
}

.card-body-tinggi p {
   margin: 5%;
}

.baca {
    display: block;
    cursor: pointer;
}

.after-img {
    position: absolute;
    top: 100%;
    height: 0%;
    width: 100%;
    border-radius: 10px;
    transition: 0.5s;
}

.contactus-slider {
    width: 25%;
}

/* footer */

.kontak-footer a{
    margin-left: 64px;
    margin-top: 66px;
}

.kontak-footer h6 {
    padding-top: 10px;
}

.list-link li {
    margin-bottom: 10px;
}

.list-link-medsos{
    display: flex;
    flex-direction: row;
}

.list-link-medsos li {
    height: 100px;
    margin-right: 10%;
}

.title-footer{
    margin: 0;
    /* margin-right: -47px !important;
    margin-bottom: 10px !important;
    margin-top: 10px;
    margin-left: 2.5em !important; */
}
.title-footer h6{
    margin-bottom: 30px !important;
}

.text-home span{
    /* position:absolute; */
    /* left: 35%; */
    /* top: 35%; */
    height: 33%;
    width: 30%;
    /* background-color: #f4f4f2; */
    /* border-left: 2px solid white; */
    /* transform: translateX(65%);
    transition: 3.5s; */
    /* animation:  typing-home 3.5s steps(20) forwards; */
    /* list-style: none; */
    /* font-size: 3rem; */
    color: #5c5c5c;
    /* text-transform: uppercase; */
    /* padding: 10px; */
    border-right: solid #5c5c5c 1px; 
    animation: cursor 1.5s ease-in-out infinite;
}

.dynamic-text span{
    list-style: none;
    font-size: 3.5rem;
    color: #5c5c5c;
    /* text-transform: uppercase; */
    padding: 0px;
    border-right: solid #5c5c5c 1px; 
    animation: cursor 1.5s ease-in-out infinite;
}

.dynamic-text-akhir span{
    list-style: none;
    font-size: 4.5rem;
    color: #5c5c5c;
    /* text-transform: uppercase; */
    padding: 0px;
    border-right: solid #5c5c5c 1px; 
    animation: cursor 1.5s ease-in-out infinite;
}

.dynamic-text-abu span{
    list-style: none;
    font-size: 3.5rem;
    color: #5c5c5c;
    /* text-transform: uppercase; */
    padding: 0px;
    border-right: solid #5c5c5c 1px; 
    animation: cursor 1.5s ease-in-out infinite;
}

.dynamic-text-abu-tua span{
    list-style: none;
    font-size: 2.75rem;
    color: #5c5c5c;
    /* text-transform: uppercase; */
    padding: 0px;
    border-right: solid #5c5c5c 1px; 
    animation: cursor 1.5s ease-in-out infinite;
}

.dynamic-text-ungu span{
    list-style: none;
    font-size: 3rem;
    color: #5c5c5c;
    /* text-transform: uppercase; */
    padding: 0px;
    border-right: solid #5c5c5c 1px; 
    animation: cursor 1.5s ease-in-out infinite;
}

/* Modal Event */

  /* modal open|close controller */
  #mpo-modal-controller {
    position: absolute;
    left: -999em;
    opacity: 0;
  }
  .mpo-modal-open:checked ~ .mpo-modal-wrap {
    display: block;
  }

  .mpo-modal-open:checked ~ .mpo-modal-wrap::before, mpo-modal-overlay {
    display: block;
  }
  .mpo-modal-close {
    cursor: pointer;
    font-size: 35px;
    font-weight: bold;
    line-height: 20px;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
  }
  
  
  /* modal */
    .mpo-modal-wrap {
        display: none;
        
    }
    .mpo-modal-wrap:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    }
  
  .mpo-modal-overlay {
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 102;
  }
  
  .mpo-modal-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    padding: 15px 0;
    background: #fff;
    border-radius: .25em;
    overflow: hidden;
    text-align: center;
    width: 75%;
    z-index: 103;
    
  }
  
  .mpo-modal-content {
    margin: 30px 15px 50px;
    padding: 50px 0 0;
    position: relative;
  }
  
  .mpo-modal-slide {
    display: flex;
    position: absolute;
    transition:  all 0.4s ease-in;
    width: 100%
  }
  
  .modal-content-1 {
  }
  
  .modal-content-2 {
    left: 100%;
  }
  
  .modal-content-3 {
    left: 200%;
  }
  
  #modal-content-1:checked ~ .content-1 {
    left: 0;
    overflow: auto;
    position: relative;
  }
  #modal-content-1:checked ~ .content-2 {
    left: 100%;
  }
  
  #modal-content-2:checked ~ .content-1 {
    left: -100%;
  }
  
  #modal-content-2:checked ~ .content-2 {
    left: 0;
    overflow: auto;
    position: relative;
  }
  
  #modal-content-2:checked ~ .content-3 {
    left: 100%;
  }
  
  #modal-content-3:checked ~ .content-1 {
    left: -200%;
  }
  
  #modal-content-3:checked ~ .content-2 {
    left: -100%;
  }
  
  #modal-content-3:checked ~ .content-3 {
    left: 0;
    overflow: auto;
    position: relative;
  }
  
  .mpo-modal-nav {
    position: absolute;
    top: 50px;
    width: 100%;
    
  }

  .mpo-modal-nav label {
    position: absolute;
      background: #f7f7f7;
      color: #303030;
      cursor: pointer;
      display: inline-block;
      font: 50px Arial;
      line-height: 45px;
      height: 50px;
      width: 80px;
      padding: 0 30px 0 25px;
      text-decoration: none;
      vertical-align: middle;
      letter-spacing: -7px;
      text-align: center;
}

.mpo-modal-nav label .prev-sllide {
    content: '';
    left: 0;
}
.mpo-modal-nav label .next-sllide {
    content: '';
    right: 0;
}
  

  .section-event p {
    /* font-size: 14px; */
  }

  .wrap-empat {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 10px;
    padding-left: 10px;
  }

  @keyframes cursor {
    from { border-color: #5c5c5c; }
    to { border-color: transparent; }
  }

@keyframes typing {
    from {
        transform: translateX(0%);

    }
    to {
        transform: translateX(65%);
    }
}

@keyframes typing-home {
    from {
        left: 40%;
    }
    to {
        width: 0%;
        left: 66%;
    }
    
}

@keyframes typing-ungu {
    from{
        transform: translateX(0%);

    } 
    to{
        transform: translateX(77%);
    }
}
@keyframes typing-abu {
    from{
        transform: translateX(0%);

    } 
    to{
        transform: translateX(60%);
    }
}

@keyframes typing-abu-tua {
    from{
        transform: translateX(0%);

    } 
    to{
        transform: translateX(75%);
    }
}

@keyframes background-ani {
    
    
    from{
        background-position:0 0;
    }
    to{
        background-position: 0 -533px;
        background :url(../../aset/img/blog/user2.jpg);
        }
    
}


@keyframes btn-muter {
    100% {
        transform: translateY(-30em) rotate(180deg);
    }
}

/* style modal */
.modal-dialog {
    max-width: 800px;
  }
  
  .wrap-modal-slider {
    padding: 0 30px;
    opacity: 0;
    transition: all 0.3s;
  }
  
  .wrap-modal-slider.open {
    opacity: 1;
  }
  
  .slick-prev:before, .slick-next:before {
    color: red;
  }


  }

  /* Tampilan Tablet */
  @media only screen and (max-width:1023px) and (min-width:768px){
    .carousel-control-next-m {
        border: none;
        position: absolute;
        top: 50%;
        left: 97.5%;
    }

    .area-pages p{
        margin-bottom: 20px;
    }
    .area-pages a{
        margin-top: 20px;
    }

    .sample-text-area {
        padding: 10em 0 10em 0 !important;

    }

    .area-pages {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        line-height: 147%;
        text-align: justify;
        margin-right: 10%;
        font-size: 20px;
    }

    .text-area-pages {
        display: flex;
        flex-direction: row;
        align-items: center;
        /* white-space: nowrap; */
        /* margin-right: 25%;
        margin-left: 10%; */
    }
    .judul-area {
        white-space: nowrap; 
        margin-right: 25%;
        margin-left: 10%;
    }

    .carousel-control-prev-m {
        border: none;
        position: absolute;
        top: 50%;
        left: 0%;
    }

    .we-help-mobile {
        left: -6%;
    }

    .footer-area {
        background-image: url(../../aset/img/Materi/FOOTER.jpg);
    }

    .con-menu {
        margin-top: -1%;
        width: 100%;
    }

    .gambar-testi {
        /* background-image: url(../../aset/img/foto-testimoni/Dr-ira.jpg); */
        border-radius: 50%;
        position: relative;
        left: 2%;
        top: 10%;
        width: 180px;
        height: 150px;
    }
    .judul-testi {
        margin-top: -20%;
        margin-bottom: 12%;
        margin-left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .judul-testi h5 {
        font-size: 150%;
        margin-left: -8.53%;
    }

    .judul-testi p {
        font-size: 100%;
    }

    .minus-ml-100 {
        margin-left: -8%;
    }

    .overlay-contactus{
        margin-top: 325px;
    }

    .aboutus-mobile{
        left: -18% !important;
    }

    .ikon-footer-fb-ig {
        background-size: cover !important;
        width: 51px;
        height: 51px;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 2px;
        margin-right: 0px;
    }

    .contactus-mobile{
        left: -27%;
        /* margin-top: -14% !important; */
    }

    #header {
        padding: 0px 0px 45px 0px !important;
    }

    .logo-menu a img{
        margin-top: 18px !important;
        top: 20%;
        left: 1%;
    }
    
    .modal-header h5{
        border-radius: 15px;
        font-family: newJune;
        font-size: 30px;
        position: relative;
        /* left: 30%; */
        color: #ed008c;
        
    }
    .modal-header p{
        font-family: newJune;
        font-weight: bold;
        position: relative;
        /* left: -5%; */
        color: #ed008c;
        margin: 0px 0px 0px;
        
    }
    
    .slider-home {
        background-image: url(../../aset/img/SLIDER/slider-home.png);
        background-size: cover;
        background-position-x: 50%;
        background-repeat: no-repeat;
    }
    
    
    .slider-1 {
        background-image: url(../../aset/img/SLIDER/Medical\ Mobile.jpg);
        background-size: cover;
        background-position-y: 60%;
        background-repeat: no-repeat;
    }
    .slider-2 {
        background-image: url(../../aset/img/SLIDER/Healthy\ Mobile.jpg);
        background-size: cover;
        background-position-y: 60%;
        background-repeat: no-repeat;
    }
    .slider-3 {
        background-image: url(../../aset/img/SLIDER/Accomodation\ Mobile.jpg);
        background-size: cover;
        background-position-y: 60%;
        background-repeat: no-repeat;
    }
    .slider-4 {
        background-image: url(../../aset/img/SLIDER/Transportation\ Mobile.jpg);
        background-size: cover;
        background-position-y: 60%;
        background-repeat: no-repeat;
    }
    .slider-5 {
        background-image: url(../../aset/img/SLIDER/Q&A\ Mobile.jpg);
        background-size: cover;
        background-position-y: 60%;
        background-repeat: no-repeat;
    }
    
    .bg-testi-4 {
        background-position-y: -120px ;
    }
    
    .bg-testi-5 {
        background-position-x: 50%;
    }

    .flex-resp {
        /* flex-direction: row;
        flex-wrap: nowrap;
        margin-left: -10%;
        margin-right: -66%; */
    }

    
    .flex-resp-footer {
        flex-direction: row;
        flex-wrap: nowrap;
        margin-left: -10%;
        margin-right: -66%;
    }

    .laptop {
        width:47em;
        margin-left:4.5em;
    }

    .overlay-accomodation {
        margin-top: 250px;
    }

    .overlay-resident {
        margin-top: 250px;
    }
    
    .video-laptop {
    position: absolute;
    width: 488px;
    top: 30px;
    left: 164px;
    width: 488px;
}

.footer-area {
    padding-bottom: 115px;
    padding-top: 68px;
}

.bg-white-city {
    background: url(../../aset/img/bg-white.png);
    background-size: 102%;
    background-repeat: no-repeat;
    background-position-y: 59px;
    background-position-x: -2px;
    padding-top: 15px;
    margin-top: 150px;
}

.watch-text {
    position: absolute;
    top: -20%;
    left: 13em;
}


#mobile-nav-toggle{
    top: 2%;
}

.watch-text h4 {
    font-size: 50px;
    font-family: 'newJune';
}

.logo-whatsapp {
    top: 8px;
    left: 23px;
    width: 100px;
}

.logo-gmail {
    top: 8px;
    left: 23px;
    width: 100px;
}

.section-event {
    margin-top: 8em;
}

.title-event {
    margin-bottom: 50px;
}

.aboutus-ourpart {
    margin-top: -4em;
    padding-top: 15px;
    display:absolute !important;
    
}

.container-ourpart{
    display: flex;
    flex-direction: row;
    align-items: center;
    /* padding-right: 22%;
    padding-left: 22%; */
    margin-right: auto;
    margin-left: auto;
}

.aboutus-ourpart .card {
    width: 25em;
    height: 20em;
    box-shadow: 15px 12px 20px rgb(173, 173, 173) !important;
}

.aboutus-ourpart .card .card-about {
    margin-left: 100px;
}

.btn-more {
    font-family: newJune;
    background-color:#ed008c;
    color:#fff;
    margin-right: 0%;
    right: 270px;
    box-shadow:1px 0px 5px rgb(173 173 173);
}

#btn-arrow1{
    left:41%;
    top:93.6%;
}
#btn-arrow2 {
    top:93.6%;
}
#btn-arrow3, #btn-arrow6{
    left:40%;
    top:93.6%;
}

#btn-arrow4 {
    left: 13%;
    top:93.6%
}

#btn-arrow5 {
    top:93.6%
}



.card-event {
    margin-right: 0px;
    margin-bottom: 10px;
    border-radius: 10px;
    width: 245px;
    height: 132px;
    color: white;
    padding-top: 10px;
    padding-right: 5px;
    box-shadow: 15px 12px 20px rgb(173, 173, 173);
}

/* .card-event .btn{

    width: 100px;
} */

.card-event h4 {
    color: white;
    font-size: 20px;
    margin-top: 10px; 
    line-height: 0.5em !important;
    margin-bottom: 10px;
}

.card-event p {
    margin: 0 0 0px;
    font-size: 13.5px;
}

.card-event-pink {
    background-color: #fc74b7;
}

.card-event-grey {
    background-color: #5c5c5c;
}

.our-friend {
    margin-top: 7em !important;
    padding-top: 15px;
}

.our-friend .card {
    border: none;
    border-radius:10px;
    width: 100%;
    /* box-shadow:1px 0px 5px rgb(173 173 173); */
}

.our-friend .card .card-header {
    background: #fc74b7; 
    border-radius:10px 10px 0px 0px;
}

.carousel-inner-testi {
    border-radius: 15px;
}

.carousel-inner .item .carousel-caption {
    top:62%; 
    left:0%;
    align-items: center !important; 
    line-height: 85%;
    margin-top: -65%;
    width:100% !important;
}
/* .carousel-inner .item .carousel-caption2 {
    top:28%;
    align-items: left !important; 
    left:55%; 
    width:50% !important;
}
.carousel-inner .item .carousel-caption3 {
    top:28%;
    align-items: left !important; 
    left:58%; 
    width:50% !important;
}
.carousel-inner .item .carousel-caption4 {
    top:28%;
    align-items: left !important; 
    left:56%; 
    width:50% !important;
} */

.carousel-inner .item .contactus-slider {
    top:60%; 
    left:30%; 
    width:50% !important;
}

.carousel-inner .item .eng h5 {
    /* padding-left: 12px !important; */
    font-size:4.8em;
}
.carousel-inner .item .ind h5 {
    /* padding-left: 12px !important; */
    font-size:3.4em;
}
.carousel-inner .item .carousel-caption h5 {
    /* padding-left: 12px !important; */
    margin-bottom: 15px;
    color: #5c5c5c;
    font-family: newJune;
    font-weight: 100;
}

.carousel-inner .item .carousel-caption p {
    font-size: 1em;
    /* width: 100%;  */
    line-height: 0em;
    color: #5c5c5c;
    font-family: newJune;
    font-weight: 100;
}

.text-list-ini {
    color: #5c5c5c;
    margin-top: 5%;
    align-items: center !important;
    font-size: 16px;
}

.text-list-ini li {
    color: #5c5c5c;
    margin-bottom:5px;
}

.btn-arrow{
    left: 13em;
    top: 424px;
    position: absolute;
    transition: 0.5s;
}


.card-body-tinggi {
    height: 15em;
    /* height: 32em; */
    border-radius: 0px 0px 10px 10px;
    font-size: 15px;
    transition: 3s;
}

.sL {
    display: none;
    cursor: pointer;
}

.ikon-arrow {
    display: none;
}

.card-body-tinggi p {
   margin: 5%;
}

.baca {
    display: block;
    cursor: pointer;
}

.after-img {
    position: absolute;
    top: 100%;
    height: 0%;
    width: 100%;
    border-radius: 10px;
    transition: 0.5s;
}

.contactus-slider {
    width: 25%;
}

/* footer */

.kontak-footer a{
    margin-left: 64px;
    margin-top: 66px;
}

.kontak-footer h6 {
    padding-top: 10px;
}

.list-link li {
    margin-bottom: 10px;
}

.list-link-medsos{
    display: flex;
    flex-direction: row;
}

.list-link-medsos li {
    height: 100px;
    margin-right: 10%;
}

.title-footer{
    margin: 0;
    /* margin-right: -47px !important;
    margin-bottom: 10px !important;
    margin-top: 10px;
    margin-left: 2.5em !important; */
}
.title-footer h6{
    margin-bottom: 30px !important;
    width: 50%;
}

.text-home span{
    /* position:absolute; */
    /* left: 35%; */
    /* top: 35%; */
    height: 33%;
    width: 30%;
    /* background-color: #f4f4f2; */
    /* border-left: 2px solid white; */
    /* transform: translateX(65%);
    transition: 3.5s; */
    /* animation:  typing-home 3.5s steps(20) forwards; */
    /* list-style: none; */
    /* font-size: 3rem; */
    color: #5c5c5c;
    /* text-transform: uppercase; */
    /* padding: 10px; */
    border-right: solid #5c5c5c 1px; 
    animation: cursor 1.5s ease-in-out infinite;
}

.dynamic-text span{
    list-style: none;
    font-size: 3.5rem;
    color: #5c5c5c;
    /* text-transform: uppercase; */
    padding: 0px;
    border-right: solid #5c5c5c 1px; 
    animation: cursor 1.5s ease-in-out infinite;
}

.dynamic-text-akhir span{
    list-style: none;
    font-size: 4.5rem;
    color: #5c5c5c;
    /* text-transform: uppercase; */
    padding: 0px;
    border-right: solid #5c5c5c 1px; 
    animation: cursor 1.5s ease-in-out infinite;
}

.dynamic-text-abu span{
    list-style: none;
    font-size: 3.5rem;
    color: #5c5c5c;
    /* text-transform: uppercase; */
    padding: 0px;
    border-right: solid #5c5c5c 1px; 
    animation: cursor 1.5s ease-in-out infinite;
}

.dynamic-text-abu-tua span{
    list-style: none;
    font-size: 2.75rem;
    color: #5c5c5c;
    /* text-transform: uppercase; */
    padding: 0px;
    border-right: solid #5c5c5c 1px; 
    animation: cursor 1.5s ease-in-out infinite;
}

.dynamic-text-ungu span{
    list-style: none;
    font-size: 3rem;
    color: #5c5c5c;
    /* text-transform: uppercase; */
    padding: 0px;
    border-right: solid #5c5c5c 1px; 
    animation: cursor 1.5s ease-in-out infinite;
}


/* Modal Event */

  /* modal open|close controller */
  #mpo-modal-controller {
    position: absolute;
    left: -999em;
    opacity: 0;
  }
  .mpo-modal-open:checked ~ .mpo-modal-wrap {
    display: block;
  }

  .mpo-modal-open:checked ~ .mpo-modal-wrap::before, mpo-modal-overlay {
    display: block;
  }
  .mpo-modal-close {
    cursor: pointer;
    font-size: 35px;
    font-weight: bold;
    line-height: 20px;
    padding: 10px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
  }
  
  
  /* modal */
    .mpo-modal-wrap {
        display: none;
        
    }
    .mpo-modal-wrap:before {
    content: "";
    display: none;
    background: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
    }
  
  .mpo-modal-overlay {
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 102;
  }
  
  .mpo-modal-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 90%;
    max-height: 90%;
    padding: 15px 0;
    background: #fff;
    border-radius: .25em;
    overflow: hidden;
    text-align: center;
    width: 75%;
    z-index: 103;
    
  }
  
  .mpo-modal-content {
    margin: 30px 15px 50px;
    padding: 50px 0 0;
    position: relative;
  }
  
  .mpo-modal-slide {
    display: flex;
    position: absolute;
    transition:  all 0.4s ease-in;
    width: 100%
  }
  
  .modal-content-1 {
  }
  
  .modal-content-2 {
    left: 100%;
  }
  
  .modal-content-3 {
    left: 200%;
  }
  
  #modal-content-1:checked ~ .content-1 {
    left: 0;
    overflow: auto;
    position: relative;
  }
  #modal-content-1:checked ~ .content-2 {
    left: 100%;
  }
  
  #modal-content-2:checked ~ .content-1 {
    left: -100%;
  }
  
  #modal-content-2:checked ~ .content-2 {
    left: 0;
    overflow: auto;
    position: relative;
  }
  
  #modal-content-2:checked ~ .content-3 {
    left: 100%;
  }
  
  #modal-content-3:checked ~ .content-1 {
    left: -200%;
  }
  
  #modal-content-3:checked ~ .content-2 {
    left: -100%;
  }
  
  #modal-content-3:checked ~ .content-3 {
    left: 0;
    overflow: auto;
    position: relative;
  }
  
  .mpo-modal-nav {
    position: absolute;
    top: 50px;
    width: 100%;
    
  }

  .grey-mob {
    background-color: #5c5c5c !important;
}

.pink-mob {
    background-color: #fc74b7 !important;
}

  .mpo-modal-nav label {
    position: absolute;
      background: #f7f7f7;
      color: #303030;
      cursor: pointer;
      display: inline-block;
      font: 50px Arial;
      line-height: 45px;
      height: 50px;
      width: 80px;
      padding: 0 30px 0 25px;
      text-decoration: none;
      vertical-align: middle;
      letter-spacing: -7px;
      text-align: center;
}

.mpo-modal-nav label .prev-sllide {
    content: '';
    left: 0;
}
.mpo-modal-nav label .next-sllide {
    content: '';
    right: 0;
}
  

  .section-event p {
    /* font-size: 14px; */
  }

  .wrap-empat {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 10px;
    padding-left: 10px;
  }

/*   
  @media only screen and (max-width: 767px) {
    .mpo-modal-body {
      max-width: 100%;
      width: 100%;
      border-radius: 0;
    }
  } */

  @keyframes cursor {
    from { border-color: #5c5c5c; }
    to { border-color: transparent; }
  }

@keyframes typing {
    from {
        transform: translateX(0%);

    }
    to {
        transform: translateX(65%);
    }
}

@keyframes typing-home {
    from {
        left: 40%;
    }
    to {
        width: 0%;
        left: 66%;
    }
    
}

@keyframes typing-ungu {
    from{
        transform: translateX(0%);

    } 
    to{
        transform: translateX(77%);
    }
}
@keyframes typing-abu {
    from{
        transform: translateX(0%);

    } 
    to{
        transform: translateX(60%);
    }
}

@keyframes typing-abu-tua {
    from{
        transform: translateX(0%);

    } 
    to{
        transform: translateX(75%);
    }
}

@keyframes background-ani {
    
    
    from{
        background-position:0 0;
    }
    to{
        background-position: 0 -533px;
        background :url(../../aset/img/blog/user2.jpg);
        }
    
}

/* .btn-arrow:hover { */
    /* transform: translateY(-30em) rotate(180deg);
    transition: 3s; */
    /* animation: btn-muter 3s infinite;
} */


@keyframes btn-muter {
    100% {
        transform: translateY(-30em) rotate(180deg);
    }
}

/* style modal */
.modal-dialog {
    max-width: 800px;
  }
  
  .wrap-modal-slider {
    padding: 0 30px;
    opacity: 0;
    transition: all 0.3s;
  }
  
  .wrap-modal-slider.open {
    opacity: 1;
  }
  
  .slick-prev:before, .slick-next:before {
    color: red;
  }
  }



  /* Tampilan Android */
  @media only screen and (max-width:767px) {

    .ikon-footer-fb-ig {
        background-size: cover !important;
        width: 51px;
        height: 51px;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 2px;
        margin-right: 7em;
    }
    .li-bahasa a {
        margin: 0px;
    color: #ed008c;
    font-size: 70%;
    border-radius: 5px;
    background: #fff;
    margin-right: 0px !important;
    padding: 1px 1px;
  }

    .grey-mob {
        background-color: #5c5c5c !important;
    }

    .pink-mob {
        background-color: #fc74b7 !important;
    }

    .area-pages{
        margin: 5%;
        text-align: justify;
    }

    .judul-area {
        white-space: nowrap;
        text-align: start;
        margin: 5%;
    }

    .text-area-pages a{
        margin-top: 8%;
    }

    .car-spes-mob {
        display: block !important;
    }

    #mobile-nav ul li a {
        font-size: 11px;
    }

    .modal-content {
        width: 98%;
    }

    .spes-mob {
        display: block !important;
    }

    .carousel-control-next-m {
        border: none;
        position: absolute;
        top: 50%;
        left: 94%;
    }
    .carousel-control-prev-m {
        border: none;
        position: absolute;
        top: 50%;
        left: 0%;
    }

    .carousel-control-prev {
        /* border-radius: 15px; */
        background: #5c5c5c;
        color: white !important;
        width: 30px;
        top: 41%;
        left: -5%;
        height: 30px;
        opacity: 1;
    }
    
    .carousel-control-next {
        /* border-radius: 15px; */
        background: #5c5c5c;
        color: white !important;
        width: 30px;
        top: 41%;
        left: 99%;
        height: 30px;
        opacity: 1;
    }

    .ikon-big{
        width: 60px;
        height: 60px;
    }

    .carousel-control-prev , .carousel-control-next{
        display:none;
    }

    .gambar-testi {
        border-radius: 50%;
        position: relative;
        left: 0%;
        top: 10%;
        width: 145px;
        height: 125px;
    }
    .judul-testi {
        margin-top: -20%;
        margin-bottom: 16%;
        margin-left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .judul-testi h5 {
        font-size: 19px;
    }

    .judul-testi p {
        margin-right: -40px;
        margin-left: -50px;
        font-size: 0.8em;
    }

    .ikon-instagram {
        margin-top: 5px;
    }

    #mobile-nav-toggle {
        top: 10px;
    }

    .logo-menu a img{
        margin-top: 0px;
        position: absolute;
        top: -7%;
        max-height: 200% !important;
        height: 118%;
        left: 33%;
    }

    .overlay-app-doc-mobile {
        margin-top: 10px;
    }

    .dynamic-text-akhir span{
        list-style: none;
        font-size: 2.5rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        padding: 10px;
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }

    .modal-header h5{
        border-radius: 15px;
        font-family: newJune;
        font-size: 20px;
        color: #ed008c;
    
    }
    
    .modal-header p{
        font-family: newJune;
        font-weight: bold;
        color: #ed008c;
        margin: 0px 0px 0px;
    
    }

    .slider-home {
        background-image: url(../../aset/img/SLIDER\ ANDROID/SLIDER\ HOME.png);
    }
    

    .slider-1 {
        background-image: url(../../aset/img/SLIDER/Healthy\ Mobile.jpg);
        background-position-x: 10%;
        background-size: 30em;
        background-position-y: -1.5em;
        background-repeat: no-repeat;
    }
    .slider-2 {
        background-image: url(../../aset/img/SLIDER/Medical\ Mobile.jpg);
        background-position-x: 10%;
        background-size: 30em;
        background-position-y: -1.5em;
        background-repeat: no-repeat;
    }
    .slider-3 {
        background-image: url(../../aset/img/SLIDER/Accomodation\ Mobile.jpg);
        background-position-x: 10%;
        background-size: 30em;
        background-position-y: -1.5em;
        background-repeat: no-repeat;
    }
    .slider-4 {
        background-image: url(../../aset/img/SLIDER/Transportation\ Mobile.jpg);
        background-position-x: 10%;
        background-size: 30em;
        background-position-y: -1.5em;
        background-repeat: no-repeat;
    }
    .slider-5 {
        background-image: url(../../aset/img/SLIDER/Q&A\ Mobile.jpg);
        background-position-x: 10%;
        background-size: 30em;
        background-position-y: -1.5em;
        background-repeat: no-repeat;
    }
    .bg-testi-1{
        background-position-x: 25%;
    }

    .bg-testi-2{
        background-position-x: 35%;
    }

    .bg-testi-3{
        background-position-x: 45%;
    }

    .bg-testi-4 {
        background-position-y: 0px ;
    }

    .bg-testi-5 {
        background-position-x: 60%;
    }

    .flex-resp {
        flex-direction: column;
    }

    .flex-resp-footer {
        position: relative;
        left: 0% !important;
        align-items: center;
    }
    
    .video-laptop {
        position: absolute;
        /* width: 488px; */
        top: 19px;
        height: 80%;
        left: 50px;
        width: 19.5em;
    }
    .slideshow-div .carousel-inner .item .height-mobile{
        height: 70vh !important;
    }

    .laptop-mobile { 
        width:26em;
        margin-left: -12px;
    }

    .header-mobile{
        height: 50px;
    }

    .footer-area {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 30px;
        padding-bottom: 0px;
        width: 260%;
        margin-bottom: 0%;
    }
    
    .bg-white-city {
        background: url(../../aset/img/bg-white.png);
        background-size: 218%;
        background-position-x: 4%;
        background-position-y: 136%;
        background-repeat: no-repeat;
        margin-top: 8em;
    }

    .container{
        max-width: 100%;
    }
    
    .watch-text {
        position: absolute;
        top: 40em;
        width: 100%;
        left: 0em;
    }
    
    
    .watch-text h4 {
        font-size: 200%;
        font-family: 'newJune';
        position: relative;
        left: 0%;
        text-align: center;
        margin-top: -150%;
        margin-left: 0%;
    }
    
    .logo-whatsapp {
        top: 8px;
        left: 23px;
        width: 100px;
    }
    
    .logo-gmail {
        top: 8px;
        left: 23px;
        width: 100px;
    }
    
    .section-event {
        margin-top: 4em;
        margin-bottom: 5em;
        width: 100%;
    }
    
    .title-event {
        margin-bottom: 50px;
        font-size: 20px;
    }
    
    .aboutus-ourpart {
        margin-top: -3em;
        padding-top: 15px;
        margin-bottom: 10px;
        display:absolute !important;
        
    }
    
    .aboutus-ourpart .card {
        width: 22em;
        height: 20em;
        box-shadow: 15px 12px 20px rgb(173, 173, 173) !important;
        margin-bottom: 15px;
    }
    
    .aboutus-ourpart .card .card-about {
        margin-left: 100px;
    }
    
    .btn-more {
        font-family: newJune;
        background-color:#ed008c;
        margin-right: 4%;
        color:#fff;
        right: 270px;
        box-shadow:1px 0px 5px rgb(173 173 173);
    }
    
    .our-friend h3 {
        font-size: 20px;
    }

    #btn-arrow1{
        left:38%;
        top:91%;
    }
    #btn-arrow2 {
        top:91%;
        left:38%;
    }
    #btn-arrow3, #btn-arrow6{
        left:38%;
        top:91%;
    }
    
    #btn-arrow4 {
        left: 38%;
        top:30.1%;
    }
    
    #btn-arrow5 {
        top:91%;
        left: 40%;
    }
    
    
    
    .card-event {
        margin-right: 0px;
        margin-bottom: 10px;
        border-radius: 10px;
        width: 49%;
        height: 132px;
        color: white;
        padding-top: 10px;
        padding-right: 0px;
        box-shadow: 15px 12px 20px rgb(173, 173, 173);
    }
    
    .card-event .btn{
    
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: -11%;
        align-items: center;
        padding-left: 17%;
    }
    
    .card-event h4 {
        color: white;
        font-size: 16px;
        line-height: 0.5em !important;
        margin-left: -12px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .card-event p {
        margin: 0 0 0px;
        font-size: 11px;
    }
    
    .card-event-pink {
        background-color: #fc74b7;
    }
    
    .card-event-grey {
        background-color: #5c5c5c;
    }
    
    .our-friend {
        margin-top: 4em !important;
        padding-top: 15px;
        /* align-items: center; */
        margin-left: 0%;
        width: 100%;
    }
    
    .our-friend .card {
        border: none;
        border-radius:25px;
        width: 100%;
        /* box-shadow:1px 0px 5px rgb(173 173 173); */
    }

    .footer-area {
        background-image: url(../../aset/img/Materi/FOOTER.jpg);
        background-repeat: no-repeat;
        background-color: #e21b78;
        background-size: cover;
        background-position-x: -137em;
        background-position-y: 183%;
    }
    
    .our-friend .card .card-header {
        background: #fc74b7; 
        border-radius:25px 25px 0px 0px;
    }

    .carousel-inner {
        /* border-radius: 15px; */
    }

    .carousel-caption-contactus {
        margin-top: 10%;
    }
    
    .carousel-inner .item .carousel-caption {
        top:62%; 
        left:0%;
        align-items: center !important; 
        line-height: 85%;
        margin-top: -65%;
        width:100% !important;
    }
    
    .carousel-inner .item .contactus-slider {
        top:60% !important; 
        left:5%; 
        width:100% !important;
    }

    .eng h5{
        font-size:4em !important;
    }

    .ind h5{
        font-size:3em !important;
    }
    
    .carousel-inner .item .carousel-caption h5 {
        color: #5c5c5c;
        left: -2%;
        margin-bottom: 10px;
        font-family: newJune;
        font-weight: 100;
    }
    
    .carousel-inner .item .carousel-caption p {
        font-size: 1rem;
        /* width: 100%;  */
        padding-left: 2px;
        line-height: 1.5em;
        margin-top: -1%;
        margin-bottom: 10%;
        color: #5c5c5c;
        font-family: newJune;
        font-weight: 100;
    }
    
    .text-list-ini {
        color: #5c5c5c;
        align-items: center !important;
        font-size: 12px;
    }

    .text-list-ini li {
        color: #5c5c5c;
        margin-bottom:12px;
    }
    
    .contactus-slider li{
        margin-right: -15%;

    }
    
    .btn-arrow{
        left: 13em;
        top: 424px;
        position: absolute;
        transition: 0.5s;
    }
    
    
    .card-body-tinggi1 , .card-body-tinggi2 , .card-body-tinggi3 , .card-body-tinggi6{
        height: 20.9em;
        border-radius: 0px 0px 25px 25px;
        font-size: 11px;
        transition: 1.5s;
    }

    .card-body-tinggi4 {
        height: 22em;
        border-radius: 0px 0px 25px 25px;
        font-size: 11px;
        transition: 1.5s;
    }
    .card-body-tinggi5 {
        height: 22.5em;
        border-radius: 0px 0px 25px 25px;
        font-size: 11px;
        transition: 1.5s;
    }

    .sL {
        display: none;
        cursor: pointer;
    }
    
    .ikon-arrow {
        display: none;
    }
    
    .card-body-tinggi p {
       margin: 5%;
       font-size: 14px;
    }
    
    .baca {
        display: block;
        cursor: pointer;
    }

    .after-img {
        position: absolute;
        top: 100%;
        height: 0%;
        width: 100%;
        border-radius: 10px;
        transition: 0.5s;
    }
    
    .contactus-slider {
        width: 100%;
    }
    
    /* footer */
    
    .kontak-footer a{
        margin-left: 150px;
        margin-top: 20px;
    }
    
    .kontak-footer h6 {
        padding-top: 10px;
        font-size: 20px;
    }
    
    .list-link li {
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -18.5em;
    }
    
    .list-link-medsos{
        display: flex;
        flex-direction: row;
        margin-left: 0%;
    }
    
    .list-link-medsos li {
        height: 100px;
    }
    
    .title-footer{
        margin-right: 0px !important;
        margin-left: 0em !important;
    }
    .title-footer h6{
        margin-bottom: 30px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -15em;
    }

    .contactus-mobile h6{
        margin-left: 10%;
        text-align: center;
    white-space: nowrap;
    }
    
    .dynamic-text span{
        list-style: none;
        font-size: 2rem;
    }
/*     
    .dynamic-text span::after{
        content: "";
        position:absolute;
        left: 0;
        height: 9.5%;
        width: 100%;
        background-color: #fcc6e0;
        border-left: 2px solid white; */
        /* transform: translateX(65%);
        transition: 3.5s; */
        /* animation:  typing 3.5s steps(30) forwards;
    }
    
    .dynamic-text-abu span::after{
        content: "";
        position:absolute;
        left: 0;
        height: 9.5%;
        width: 100%;
        background-color: #ececec;
        border-left: 2px solid white; */
        /* transform: translateX(65%);
        transition: 3.5s; */
        /* animation:  typing-abu 3.5s steps(30) forwards;
    }
    
    .dynamic-text-abu-tua span::after{
        content: "";
        position:absolute;
        left: 0;
        height: 9.5%;
        width: 100%;
        background-color: #e1e1e1;
        border-left: 2px solid white; */
        /* transform: translateX(65%);
        transition: 3.5s; */
        /* animation:  typing-abu 3.5s steps(30) forwards;
    }
    
    .dynamic-text-ungu span::after{
        content: "";
        position:absolute;
        left: 0;
        height: 9.5%;
        width: 100%;
        background-color: #eed5eb;
        border-left: 2px solid white; */
        /* transform: translateX(77%);
        transition: 3.5s; */
        /* animation:  typing-ungu 3.5s steps(36) forwards;
    } */

    .text-home span{
        /* position:absolute; */
        /* left: 35%; */
        /* top: 35%; */
        height: 33%;
        width: 30%;
        /* background-color: #f4f4f2; */
        /* border-left: 2px solid white; */
        /* transform: translateX(65%);
        transition: 3.5s; */
        /* animation:  typing-home 3.5s steps(20) forwards; */
        /* list-style: none; */
        /* font-size: 3rem; */
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text-abu span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text-abu-tua span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        line-height: 1.5em;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text-ungu span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    
      .section-event p {
        font-size: 11.5px;
        margin-left: -10px;
}
    
      .wrap-empat {
        margin-right: 0px;
      }
      
      /* @media only screen and (max-width: 767px) {
        .mpo-modal-body {
          max-width: 100%;
          width: 100%;
          border-radius: 0;
        }
      } */
    
    /* keyframe animation */
    @keyframes typing {
        from {
            transform: translateX(0%);
    
        }
        to {
            transform: translateX(65%);
        }
    }
    
    @keyframes typing-ungu {
        from{
            transform: translateX(0%);
    
        } 
        to{
            transform: translateX(77%);
        }
    }
    @keyframes typing-abu {
        from{
            transform: translateX(0%);
    
        } 
        to{
            transform: translateX(75%);
        }
    }
    
    @keyframes background-ani {
        
        
        from{
            background-position:0 0;
        }
        to{
            background-position: 0 -533px;
            background :url(../../aset/img/blog/user2.jpg);
            }
        
    }
    
    
    
    @keyframes btn-muter {
        100% {
            transform: translateY(-30em) rotate(180deg);
        }
    }
    
    /* style modal */
    .modal-dialog {
        max-width: 800px;
      }
      
      .wrap-modal-slider {
        padding: 0 30px;
        opacity: 0;
        transition: all 0.3s;
      }
      
      .wrap-modal-slider.open {
        opacity: 1;
      }
      
      .slick-prev:before, .slick-next:before {
        color: red;
      }

      .kontak-footer-mobile {
        position: relative;
        margin-bottom: 14% !important;
        width: 100%;
        left: -8%;
      }

      .we-help-mobile {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        left: 35%;
        margin-bottom: 5% !important;
        margin-top: -4%;
      }

      .list-link {
        margin-left: -3%;
      }

      .aboutus-mobile {
        left: 35%;
        top: 57%;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 0px;
        position: relative;
      }

      .contactus-mobile {
        top: 10%;
        left: 0%;
      }

      .li-bahasa-mobile {
        width: 20%;
        text-align: center;
        margin-left: -5%;
      }

      
    
    
    
  

  @keyframes cursor {
    from { border-color: #5c5c5c; }
    to { border-color: transparent; }
  }
}

@media only screen and (max-width:760px){
    .ikon-footer-fb-ig {
        background-size: cover !important;
        width: 51px;
        height: 51px;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 2px;
        margin-right: 7em;
    }
    .li-bahasa a {
        margin: 0px;
    color: #ed008c;
    font-size: 70%;
    border-radius: 5px;
    background: #fff;
    margin-right: 0px !important;
    padding: 1px 1px;
  }

    .grey-mob {
        background-color: #5c5c5c !important;
    }

    .pink-mob {
        background-color: #fc74b7 !important;
    }

    .area-pages{
        margin: 5%;
        text-align: justify;
    }

    .judul-area {
        white-space: nowrap;
        text-align: start;
        margin: 5%;
    }

    .text-area-pages a{
        margin-top: 8%;
    }

    .car-spes-mob {
        display: block !important;
    }

    #mobile-nav ul li a {
        font-size: 11px;
    }

    .modal-content {
        width: 98%;
    }

    .spes-mob {
        display: block !important;
    }

    .carousel-control-next-m {
        border: none;
        position: absolute;
        top: 50%;
        left: 94%;
    }
    .carousel-control-prev-m {
        border: none;
        position: absolute;
        top: 50%;
        left: 0%;
    }

    .carousel-control-prev {
        /* border-radius: 15px; */
        background: #5c5c5c;
        color: white !important;
        width: 30px;
        top: 41%;
        left: -5%;
        height: 30px;
        opacity: 1;
    }
    
    .carousel-control-next {
        /* border-radius: 15px; */
        background: #5c5c5c;
        color: white !important;
        width: 30px;
        top: 41%;
        left: 99%;
        height: 30px;
        opacity: 1;
    }

    .ikon-big{
        width: 60px;
        height: 60px;
    }

    .carousel-control-prev , .carousel-control-next{
        display:none;
    }

    .gambar-testi {
        border-radius: 50%;
        position: relative;
        left: 0%;
        top: 10%;
        width: 145px;
        height: 125px;
    }
    .judul-testi {
        margin-top: -20%;
        margin-bottom: 16%;
        margin-left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .judul-testi h5 {
        font-size: 19px;
    }

    .judul-testi p {
        margin-right: -40px;
        margin-left: -50px;
        font-size: 0.8em;
    }

    .ikon-instagram {
        margin-top: 5px;
    }

    #mobile-nav-toggle {
        top: 10px;
    }

    .logo-menu a img{
        margin-top: 0px;
        position: absolute;
        top: -7%;
        max-height: 200% !important;
        height: 118%;
        left: 33%;
    }

    .overlay-app-doc-mobile {
        margin-top: 10px;
    }

    .dynamic-text-akhir span{
        list-style: none;
        font-size: 2.5rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        padding: 10px;
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }

    .modal-header h5{
        border-radius: 15px;
        font-family: newJune;
        font-size: 20px;
        color: #ed008c;
    
    }
    
    .modal-header p{
        font-family: newJune;
        font-weight: bold;
        color: #ed008c;
        margin: 0px 0px 0px;
    
    }

    .slider-home {
        background-image: url(../../aset/img/SLIDER\ ANDROID/SLIDER\ HOME.png);
    }
    

    .slider-1 {
        background-image: url(../../aset/img/SLIDER/Healthy\ Mobile.jpg);
        background-position-x: 10%;
        background-size: cover;
        background-position-y: -10.5em;
        background-repeat: no-repeat;
    }
    .slider-2 {
        background-image: url(../../aset/img/SLIDER/Medical\ Mobile.jpg);
        background-position-x: 10%;
        background-size: cover;
        background-position-y: -10.5em;
        background-repeat: no-repeat;
    }
    .slider-3 {
        background-image: url(../../aset/img/SLIDER/Accomodation\ Mobile.jpg);
        background-position-x: 10%;
        background-size: cover;
        background-position-y: -10.5em;
        background-repeat: no-repeat;
    }
    .slider-4 {
        background-image: url(../../aset/img/SLIDER/Transportation\ Mobile.jpg);
        background-position-x: 10%;
        background-size: cover;
        background-position-y: -10.5em;
        background-repeat: no-repeat;
    }
    .slider-5 {
        background-image: url(../../aset/img/SLIDER/Q&A\ Mobile.jpg);
        background-position-x: 10%;
        background-size: cover;
        background-position-y: -10.5em;
        background-repeat: no-repeat;
    }
    .bg-testi-1{
        background-position-x: 25%;
    }

    .bg-testi-2{
        background-position-x: 35%;
    }

    .bg-testi-3{
        background-position-x: 45%;
    }

    .bg-testi-4 {
        background-position-y: 0px ;
    }

    .bg-testi-5 {
        background-position-x: 60%;
    }

    .flex-resp {
        flex-direction: column;
    }

    .flex-resp-footer {
        position: relative;
        left: 0% !important;
        align-items: center;
    }
    
    .video-laptop {
        position: absolute;
        /* width: 488px; */
        top: 19px;
        height: 80%;
        left: 50px;
        width: 19.5em;
    }
    .slideshow-div .carousel-inner .item .height-mobile{
        height: 70vh !important;
    }

    .laptop-mobile { 
        width:26em;
        margin-left: -12px;
    }

    .header-mobile{
        height: 50px;
    }

    .footer-area {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 30px;
        padding-bottom: 0px;
        width: 260%;
        margin-bottom: 0%;
    }
    
    .bg-white-city {
        background: url(../../aset/img/bg-white.png);
        background-size: 218%;
        background-position-x: 4%;
        background-position-y: 136%;
        background-repeat: no-repeat;
        margin-top: 8em;
    }

    .container{
        max-width: 100%;
    }
    
    .watch-text {
        position: absolute;
        top: 40em;
        width: 100%;
        left: 0em;
    }
    
    
    .watch-text h4 {
        font-size: 200%;
        font-family: 'newJune';
        position: relative;
        left: 0%;
        text-align: center;
        margin-top: -112%;
        margin-left: 0%;
    }
    
    .logo-whatsapp {
        top: 8px;
        left: 23px;
        width: 100px;
    }
    
    .logo-gmail {
        top: 8px;
        left: 23px;
        width: 100px;
    }
    
    .section-event {
        margin-top: 4em;
        margin-bottom: 5em;
        width: 100%;
    }
    
    .title-event {
        margin-bottom: 50px;
        font-size: 20px;
    }
    
    .aboutus-ourpart {
        margin-top: -3em;
        padding-top: 15px;
        margin-bottom: 10px;
        display:absolute !important;
        
    }
    
    .aboutus-ourpart .card {
        width: 22em;
        height: 20em;
        box-shadow: 15px 12px 20px rgb(173, 173, 173) !important;
        margin-bottom: 15px;
    }
    
    .aboutus-ourpart .card .card-about {
        margin-left: 100px;
    }
    
    .btn-more {
        font-family: newJune;
        background-color:#ed008c;
        margin-right: 4%;
        color:#fff;
        right: 270px;
        box-shadow:1px 0px 5px rgb(173 173 173);
    }
    
    .our-friend h3 {
        font-size: 20px;
    }

    #btn-arrow1{
        left:38%;
        top:91%;
    }
    #btn-arrow2 {
        top:91%;
        left:38%;
    }
    #btn-arrow3, #btn-arrow6{
        left:38%;
        top:91%;
    }
    
    #btn-arrow4 {
        left: 38%;
        top:30.1%;
    }
    
    #btn-arrow5 {
        top:91%;
        left: 40%;
    }
    
    
    
    .card-event {
        margin-right: 0px;
        margin-bottom: 10px;
        border-radius: 10px;
        width: 49%;
        height: 132px;
        color: white;
        padding-top: 10px;
        padding-right: 0px;
        box-shadow: 15px 12px 20px rgb(173, 173, 173);
    }
    
    .card-event .btn{
    
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: -11%;
        align-items: center;
        padding-left: 17%;
    }
    
    .card-event h4 {
        color: white;
        font-size: 16px;
        line-height: 0.5em !important;
        margin-left: -12px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .card-event p {
        margin: 0 0 0px;
        font-size: 11px;
    }
    
    .card-event-pink {
        background-color: #fc74b7;
    }
    
    .card-event-grey {
        background-color: #5c5c5c;
    }
    
    .our-friend {
        margin-top: 4em !important;
        padding-top: 15px;
        /* align-items: center; */
        margin-left: 0%;
        width: 100%;
    }
    
    .our-friend .card {
        border: none;
        border-radius:25px;
        width: 100%;
        /* box-shadow:1px 0px 5px rgb(173 173 173); */
    }

    .footer-area {
        background-image: url(../../aset/img/Materi/FOOTER.jpg);
        background-repeat: no-repeat;
        background-color: #e21b78;
        background-size: cover;
        background-position-x: -137em;
        background-position-y: 183%;
    }
    
    .our-friend .card .card-header {
        background: #fc74b7; 
        border-radius:25px 25px 0px 0px;
    }

    .carousel-inner {
        /* border-radius: 15px; */
    }

    .carousel-caption-contactus {
        margin-top: 10%;
    }
    
    .carousel-inner .item .carousel-caption {
        top:62%; 
        left:0%;
        align-items: center !important; 
        line-height: 85%;
        margin-top: -65%;
        width:100% !important;
    }
    
    .carousel-inner .item .contactus-slider {
        top:60% !important; 
        left:5%; 
        width:100% !important;
    }

    .eng h5{
        font-size:4em !important;
    }

    .ind h5{
        font-size:3em !important;
    }
    
    .carousel-inner .item .carousel-caption h5 {
        color: #5c5c5c;
        left: -2%;
        margin-bottom: 10px;
        font-family: newJune;
        font-weight: 100;
    }
    
    .carousel-inner .item .carousel-caption p {
        font-size: 1rem;
        /* width: 100%;  */
        padding-left: 2px;
        line-height: 1.5em;
        margin-top: -1%;
        margin-bottom: 10%;
        color: #5c5c5c;
        font-family: newJune;
        font-weight: 100;
    }
    
    .text-list-ini {
        color: #5c5c5c;
        align-items: center !important;
        font-size: 12px;
    }

    .text-list-ini li {
        color: #5c5c5c;
        margin-bottom:12px;
    }
    
    .contactus-slider li{
        margin-right: -15%;

    }
    
    .btn-arrow{
        left: 13em;
        top: 424px;
        position: absolute;
        transition: 0.5s;
    }
    
    
    .card-body-tinggi1 , .card-body-tinggi2 , .card-body-tinggi3 , .card-body-tinggi6{
        height: 20.9em;
        border-radius: 0px 0px 25px 25px;
        font-size: 11px;
        transition: 1.5s;
    }

    .card-body-tinggi4 {
        height: 22em;
        border-radius: 0px 0px 25px 25px;
        font-size: 11px;
        transition: 1.5s;
    }
    .card-body-tinggi5 {
        height: 22.5em;
        border-radius: 0px 0px 25px 25px;
        font-size: 11px;
        transition: 1.5s;
    }

    .sL {
        display: none;
        cursor: pointer;
    }
    
    .ikon-arrow {
        display: none;
    }
    
    .card-body-tinggi p {
       margin: 5%;
       font-size: 14px;
    }
    
    .baca {
        display: block;
        cursor: pointer;
    }

    .after-img {
        position: absolute;
        top: 100%;
        height: 0%;
        width: 100%;
        border-radius: 10px;
        transition: 0.5s;
    }
    
    .contactus-slider {
        width: 100%;
    }
    
    /* footer */
    
    .kontak-footer a{
        margin-left: 150px;
        margin-top: 20px;
    }
    
    .kontak-footer h6 {
        padding-top: 10px;
        font-size: 20px;
    }
    
    .list-link li {
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -18.5em;
    }
    
    .list-link-medsos{
        display: flex;
        flex-direction: row;
        margin-left: 0%;
    }
    
    .list-link-medsos li {
        height: 100px;
    }
    
    .title-footer{
        margin-right: 0px !important;
        margin-left: 0em !important;
    }
    .title-footer h6{
        margin-bottom: 30px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -15em;
    }

    .contactus-mobile h6{
        margin-left: 10%;
        text-align: center;
    white-space: nowrap;
    }
    
    .dynamic-text span{
        list-style: none;
        font-size: 2rem;
    }

    .text-home span{
        /* position:absolute; */
        /* left: 35%; */
        /* top: 35%; */
        height: 33%;
        width: 30%;
        /* background-color: #f4f4f2; */
        /* border-left: 2px solid white; */
        /* transform: translateX(65%);
        transition: 3.5s; */
        /* animation:  typing-home 3.5s steps(20) forwards; */
        /* list-style: none; */
        /* font-size: 3rem; */
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text-abu span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text-abu-tua span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        line-height: 1.5em;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text-ungu span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    
      .section-event p {
        font-size: 11.5px;
        margin-left: -10px;
}
    
      .wrap-empat {
        margin-right: 0px;
      }
      
      /* @media only screen and (max-width: 767px) {
        .mpo-modal-body {
          max-width: 100%;
          width: 100%;
          border-radius: 0;
        }
      } */
    
    /* keyframe animation */
    @keyframes typing {
        from {
            transform: translateX(0%);
    
        }
        to {
            transform: translateX(65%);
        }
    }
    
    @keyframes typing-ungu {
        from{
            transform: translateX(0%);
    
        } 
        to{
            transform: translateX(77%);
        }
    }
    @keyframes typing-abu {
        from{
            transform: translateX(0%);
    
        } 
        to{
            transform: translateX(75%);
        }
    }
    
    @keyframes background-ani {
        
        
        from{
            background-position:0 0;
        }
        to{
            background-position: 0 -533px;
            background :url(../../aset/img/blog/user2.jpg);
            }
        
    }
    
    
    
    @keyframes btn-muter {
        100% {
            transform: translateY(-30em) rotate(180deg);
        }
    }
    
    /* style modal */
    .modal-dialog {
        max-width: 800px;
      }
      
      .wrap-modal-slider {
        padding: 0 30px;
        opacity: 0;
        transition: all 0.3s;
      }
      
      .wrap-modal-slider.open {
        opacity: 1;
      }
      
      .slick-prev:before, .slick-next:before {
        color: red;
      }

      .kontak-footer-mobile {
        position: relative;
        margin-bottom: 14% !important;
        width: 100%;
        left: 3%;
      }

      .we-help-mobile {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        left: 25%;
        margin-bottom: 5% !important;
        margin-top: -4%;
      }

      .list-link {
        margin-left: -3%;
      }

      .aboutus-mobile {
        left: 25%;
        top: 57%;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 0px;
        position: relative;
      }

      .contactus-mobile {
        top: 10%;
        left: 0%;
      }

      .li-bahasa-mobile {
        width: 20%;
        text-align: center;
        margin-left: -5%;
      }

      
    
    
    
  

  @keyframes cursor {
    from { border-color: #5c5c5c; }
    to { border-color: transparent; }
  }
}


@media only screen and (max-width:560px) {
    .ikon-footer-fb-ig {
        background-size: cover !important;
        width: 51px;
        height: 51px;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 2px;
        margin-right: 7em;
    }
    .li-bahasa a {
        margin: 0px;
    color: #ed008c;
    font-size: 70%;
    border-radius: 5px;
    background: #fff;
    margin-right: 0px !important;
    padding: 1px 1px;
  }

    .grey-mob {
        background-color: #5c5c5c !important;
    }

    .pink-mob {
        background-color: #fc74b7 !important;
    }

    .area-pages{
        margin: 5%;
        text-align: justify;
    }

    .judul-area {
        white-space: nowrap;
        text-align: start;
        margin: 5%;
    }

    .text-area-pages a{
        margin-top: 8%;
    }

    .car-spes-mob {
        display: block !important;
    }

    #mobile-nav ul li a {
        font-size: 11px;
    }

    .modal-content {
        width: 98%;
    }

    .spes-mob {
        display: block !important;
    }

    .carousel-control-next-m {
        border: none;
        position: absolute;
        top: 50%;
        left: 94%;
    }
    .carousel-control-prev-m {
        border: none;
        position: absolute;
        top: 50%;
        left: 0%;
    }

    .carousel-control-prev {
        /* border-radius: 15px; */
        background: #5c5c5c;
        color: white !important;
        width: 30px;
        top: 41%;
        left: -5%;
        height: 30px;
        opacity: 1;
    }
    
    .carousel-control-next {
        /* border-radius: 15px; */
        background: #5c5c5c;
        color: white !important;
        width: 30px;
        top: 41%;
        left: 99%;
        height: 30px;
        opacity: 1;
    }

    .ikon-big{
        width: 60px;
        height: 60px;
    }

    .carousel-control-prev , .carousel-control-next{
        display:none;
    }

    .gambar-testi {
        border-radius: 50%;
        position: relative;
        left: 0%;
        top: 10%;
        width: 145px;
        height: 125px;
    }
    .judul-testi {
        margin-top: -20%;
        margin-bottom: 16%;
        margin-left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .judul-testi h5 {
        font-size: 19px;
    }

    .judul-testi p {
        margin-right: -40px;
        margin-left: -50px;
        font-size: 0.8em;
    }

    .ikon-instagram {
        margin-top: 5px;
    }

    #mobile-nav-toggle {
        top: 10px;
    }

    .logo-menu a img{
        margin-top: 0px;
        position: absolute;
        top: -7%;
        max-height: 200% !important;
        height: 118%;
        left: 33%;
    }

    .overlay-app-doc-mobile {
        margin-top: 10px;
    }

    .dynamic-text-akhir span{
        list-style: none;
        font-size: 2.5rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        padding: 10px;
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }

    .modal-header h5{
        border-radius: 15px;
        font-family: newJune;
        font-size: 20px;
        color: #ed008c;
    
    }
    
    .modal-header p{
        font-family: newJune;
        font-weight: bold;
        color: #ed008c;
        margin: 0px 0px 0px;
    
    }

    .slider-home {
        background-image: url(../../aset/img/SLIDER\ ANDROID/SLIDER\ HOME.png);
    }
    

    .slider-1 {
        background-image: url(../../aset/img/SLIDER/Healthy\ Mobile.jpg);
        background-position-x: 10%;
        background-size: cover;
        background-position-y: -10.5em;
        background-repeat: no-repeat;
    }
    .slider-2 {
        background-image: url(../../aset/img/SLIDER/Medical\ Mobile.jpg);
        background-position-x: 10%;
        background-size: cover;
        background-position-y: -10.5em;
        background-repeat: no-repeat;
    }
    .slider-3 {
        background-image: url(../../aset/img/SLIDER/Accomodation\ Mobile.jpg);
        background-position-x: 10%;
        background-size: cover;
        background-position-y: -10.5em;
        background-repeat: no-repeat;
    }
    .slider-4 {
        background-image: url(../../aset/img/SLIDER/Transportation\ Mobile.jpg);
        background-position-x: 10%;
        background-size: cover;
        background-position-y: -10.5em;
        background-repeat: no-repeat;
    }
    .slider-5 {
        background-image: url(../../aset/img/SLIDER/Q&A\ Mobile.jpg);
        background-position-x: 10%;
        background-size: cover;
        background-position-y: -10.5em;
        background-repeat: no-repeat;
    }
    .bg-testi-1{
        background-position-x: 25%;
    }

    .bg-testi-2{
        background-position-x: 35%;
    }

    .bg-testi-3{
        background-position-x: 45%;
    }

    .bg-testi-4 {
        background-position-y: 0px ;
    }

    .bg-testi-5 {
        background-position-x: 60%;
    }

    .flex-resp {
        flex-direction: column;
    }

    .flex-resp-footer {
        position: relative;
        left: 0% !important;
        align-items: center;
    }
    
    .video-laptop {
        position: absolute;
        /* width: 488px; */
        top: 19px;
        height: 80%;
        left: 50px;
        width: 19.5em;
    }
    .slideshow-div .carousel-inner .item .height-mobile{
        height: 70vh !important;
    }

    .laptop-mobile { 
        width:26em;
        margin-left: -12px;
    }

    .header-mobile{
        height: 50px;
    }

    .footer-area {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 30px;
        padding-bottom: 0px;
        width: 260%;
        margin-bottom: 0%;
    }
    
    .bg-white-city {
        background: url(../../aset/img/bg-white.png);
        background-size: 218%;
        background-position-x: 4%;
        background-position-y: 136%;
        background-repeat: no-repeat;
        margin-top: 8em;
    }

    .container{
        max-width: 100%;
    }
    
    .watch-text {
        position: absolute;
        top: 40em;
        width: 100%;
        left: 0em;
    }
    
    
    .watch-text h4 {
        font-size: 200%;
        font-family: 'newJune';
        position: relative;
        left: 0%;
        text-align: center;
        margin-top: -112%;
        margin-left: 0%;
    }
    
    .logo-whatsapp {
        top: 8px;
        left: 23px;
        width: 100px;
    }
    
    .logo-gmail {
        top: 8px;
        left: 23px;
        width: 100px;
    }
    
    .section-event {
        margin-top: 4em;
        margin-bottom: 5em;
        width: 100%;
    }
    
    .title-event {
        margin-bottom: 50px;
        font-size: 20px;
    }
    
    .aboutus-ourpart {
        margin-top: -3em;
        padding-top: 15px;
        margin-bottom: 10px;
        display:absolute !important;
        
    }
    
    .aboutus-ourpart .card {
        width: 22em;
        height: 20em;
        box-shadow: 15px 12px 20px rgb(173, 173, 173) !important;
        margin-bottom: 15px;
    }
    
    .aboutus-ourpart .card .card-about {
        margin-left: 100px;
    }
    
    .btn-more {
        font-family: newJune;
        background-color:#ed008c;
        margin-right: 4%;
        color:#fff;
        right: 270px;
        box-shadow:1px 0px 5px rgb(173 173 173);
    }
    
    .our-friend h3 {
        font-size: 20px;
    }

    #btn-arrow1{
        left:38%;
        top:91%;
    }
    #btn-arrow2 {
        top:91%;
        left:38%;
    }
    #btn-arrow3, #btn-arrow6{
        left:38%;
        top:91%;
    }
    
    #btn-arrow4 {
        left: 38%;
        top:30.1%;
    }
    
    #btn-arrow5 {
        top:91%;
        left: 40%;
    }
    
    
    
    .card-event {
        margin-right: 0px;
        margin-bottom: 10px;
        border-radius: 10px;
        width: 49%;
        height: 132px;
        color: white;
        padding-top: 10px;
        padding-right: 0px;
        box-shadow: 15px 12px 20px rgb(173, 173, 173);
    }
    
    .card-event .btn{
    
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: -11%;
        align-items: center;
        padding-left: 17%;
    }
    
    .card-event h4 {
        color: white;
        font-size: 16px;
        line-height: 0.5em !important;
        margin-left: -12px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .card-event p {
        margin: 0 0 0px;
        font-size: 11px;
    }
    
    .card-event-pink {
        background-color: #fc74b7;
    }
    
    .card-event-grey {
        background-color: #5c5c5c;
    }
    
    .our-friend {
        margin-top: 4em !important;
        padding-top: 15px;
        /* align-items: center; */
        margin-left: 0%;
        width: 100%;
    }
    
    .our-friend .card {
        border: none;
        border-radius:25px;
        width: 100%;
        /* box-shadow:1px 0px 5px rgb(173 173 173); */
    }

    .footer-area {
        background-image: url(../../aset/img/Materi/FOOTER.jpg);
        background-repeat: no-repeat;
        background-color: #e21b78;
        background-size: cover;
        background-position-x: -137em;
        background-position-y: 183%;
    }
    
    .our-friend .card .card-header {
        background: #fc74b7; 
        border-radius:25px 25px 0px 0px;
    }

    .carousel-inner {
        /* border-radius: 15px; */
    }

    .carousel-caption-contactus {
        margin-top: 10%;
    }
    
    .carousel-inner .item .carousel-caption {
        top:62%; 
        left:0%;
        align-items: center !important; 
        line-height: 85%;
        margin-top: -65%;
        width:100% !important;
    }
    
    .carousel-inner .item .contactus-slider {
        top:60% !important; 
        left:5%; 
        width:100% !important;
    }

    .eng h5{
        font-size:4em !important;
    }

    .ind h5{
        font-size:3em !important;
    }
    
    .carousel-inner .item .carousel-caption h5 {
        color: #5c5c5c;
        left: -2%;
        margin-bottom: 10px;
        font-family: newJune;
        font-weight: 100;
    }
    
    .carousel-inner .item .carousel-caption p {
        font-size: 1rem;
        /* width: 100%;  */
        padding-left: 2px;
        line-height: 1.5em;
        margin-top: -1%;
        margin-bottom: 10%;
        color: #5c5c5c;
        font-family: newJune;
        font-weight: 100;
    }
    
    .text-list-ini {
        color: #5c5c5c;
        align-items: center !important;
        font-size: 12px;
    }

    .text-list-ini li {
        color: #5c5c5c;
        margin-bottom:12px;
    }
    
    .contactus-slider li{
        margin-right: -15%;

    }
    
    .btn-arrow{
        left: 13em;
        top: 424px;
        position: absolute;
        transition: 0.5s;
    }
    
    
    .card-body-tinggi1 , .card-body-tinggi2 , .card-body-tinggi3 , .card-body-tinggi6{
        height: 20.9em;
        border-radius: 0px 0px 25px 25px;
        font-size: 11px;
        transition: 1.5s;
    }

    .card-body-tinggi4 {
        height: 22em;
        border-radius: 0px 0px 25px 25px;
        font-size: 11px;
        transition: 1.5s;
    }
    .card-body-tinggi5 {
        height: 22.5em;
        border-radius: 0px 0px 25px 25px;
        font-size: 11px;
        transition: 1.5s;
    }

    .sL {
        display: none;
        cursor: pointer;
    }
    
    .ikon-arrow {
        display: none;
    }
    
    .card-body-tinggi p {
       margin: 5%;
       font-size: 14px;
    }
    
    .baca {
        display: block;
        cursor: pointer;
    }

    .after-img {
        position: absolute;
        top: 100%;
        height: 0%;
        width: 100%;
        border-radius: 10px;
        transition: 0.5s;
    }
    
    .contactus-slider {
        width: 100%;
    }
    
    /* footer */
    
    .kontak-footer a{
        margin-left: 150px;
        margin-top: 20px;
    }
    
    .kontak-footer h6 {
        padding-top: 10px;
        font-size: 20px;
    }
    
    .list-link li {
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -18.5em;
    }
    
    .list-link-medsos{
        display: flex;
        flex-direction: row;
        margin-left: 0%;
    }
    
    .list-link-medsos li {
        height: 100px;
    }
    
    .title-footer{
        margin-right: 0px !important;
        margin-left: 0em !important;
    }
    .title-footer h6{
        margin-bottom: 30px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -15em;
    }

    .contactus-mobile h6{
        margin-left: 10%;
        text-align: center;
    white-space: nowrap;
    }
    
    .dynamic-text span{
        list-style: none;
        font-size: 2rem;
    }

    .text-home span{
        /* position:absolute; */
        /* left: 35%; */
        /* top: 35%; */
        height: 33%;
        width: 30%;
        /* background-color: #f4f4f2; */
        /* border-left: 2px solid white; */
        /* transform: translateX(65%);
        transition: 3.5s; */
        /* animation:  typing-home 3.5s steps(20) forwards; */
        /* list-style: none; */
        /* font-size: 3rem; */
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text-abu span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text-abu-tua span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        line-height: 1.5em;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text-ungu span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    
      .section-event p {
        font-size: 11.5px;
        margin-left: -10px;
}
    
      .wrap-empat {
        margin-right: 0px;
      }
      
      /* @media only screen and (max-width: 767px) {
        .mpo-modal-body {
          max-width: 100%;
          width: 100%;
          border-radius: 0;
        }
      } */
    
    /* keyframe animation */
    @keyframes typing {
        from {
            transform: translateX(0%);
    
        }
        to {
            transform: translateX(65%);
        }
    }
    
    @keyframes typing-ungu {
        from{
            transform: translateX(0%);
    
        } 
        to{
            transform: translateX(77%);
        }
    }
    @keyframes typing-abu {
        from{
            transform: translateX(0%);
    
        } 
        to{
            transform: translateX(75%);
        }
    }
    
    @keyframes background-ani {
        
        
        from{
            background-position:0 0;
        }
        to{
            background-position: 0 -533px;
            background :url(../../aset/img/blog/user2.jpg);
            }
        
    }
    
    
    
    @keyframes btn-muter {
        100% {
            transform: translateY(-30em) rotate(180deg);
        }
    }
    
    /* style modal */
    .modal-dialog {
        max-width: 800px;
      }
      
      .wrap-modal-slider {
        padding: 0 30px;
        opacity: 0;
        transition: all 0.3s;
      }
      
      .wrap-modal-slider.open {
        opacity: 1;
      }
      
      .slick-prev:before, .slick-next:before {
        color: red;
      }

      .kontak-footer-mobile {
        position: relative;
        margin-bottom: 14% !important;
        width: 100%;
        left: 3%;
      }

      .we-help-mobile {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        left: 25%;
        margin-bottom: 5% !important;
        margin-top: -4%;
      }

      .list-link {
        margin-left: -3%;
      }

      .aboutus-mobile {
        left: 25%;
        top: 57%;
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-top: 0px;
        position: relative;
      }

      .contactus-mobile {
        top: 10%;
        left: 0%;
      }

      .li-bahasa-mobile {
        width: 20%;
        text-align: center;
        margin-left: -5%;
      }

      
    
    
    
  

  @keyframes cursor {
    from { border-color: #5c5c5c; }
    to { border-color: transparent; }
  }
}


@media only screen and (max-width:440px) {

    .li-bahasa a {
        margin: 0px;
    color: #ed008c;
    font-size: 70%;
    border-radius: 5px;
    background: #fff;
    margin-right: 0px !important;
    padding: 1px 1px;
  }

    .ikon-footer-fb-ig {
        background-size: cover !important;
        width: 51px;
        height: 51px;
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 2px;
        margin-right: 70px;
    }

    .area-pages{
        margin: 5%;
        text-align: justify;
    }

    .judul-area {
        white-space: nowrap;
        text-align: start;
        margin: 5%;
    }

    .judul-area h3 {
        font-size: 21px;
    }

    .text-area-pages a{
        margin-top: 8%;
    }
    
    #mobile-nav ul li a {
        font-size: 11px;
    }

    .car-spes-mob {
        display: block !important;
    }

    .modal-content {
        width: 98%;
    }

    .spes-mob {
        display: block !important;
    }

    .carousel-control-next-m {
        border: none;
        position: absolute;
        top: 50%;
        left: 94%;
    }
    .carousel-control-prev-m {
        border: none;
        position: absolute;
        top: 50%;
        left: 0%;
    }

    .carousel-control-prev {
        /* border-radius: 15px; */
        background: #5c5c5c;
        color: white !important;
        width: 30px;
        top: 41%;
        left: -5%;
        height: 30px;
        opacity: 1;
    }
    
    .carousel-control-next {
        /* border-radius: 15px; */
        background: #5c5c5c;
        color: white !important;
        width: 30px;
        top: 41%;
        left: 99%;
        height: 30px;
        opacity: 1;
    }

    .ikon-big{
        width: 60px;
        height: 60px;
    }

    .carousel-control-prev , .carousel-control-next{
        display:none;
    }

    .gambar-testi {
        border-radius: 50%;
        position: relative;
        left: 0%;
        top: 10%;
        width: 145px;
        height: 125px;
    }
    .judul-testi {
        margin-top: -20%;
        margin-bottom: 16%;
        margin-left: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
    }

    .judul-testi h5 {
        font-size: 19px;
    }

    .judul-testi p {
        margin-right: -40px;
        margin-left: -50px;
        font-size: 0.8em;
    }

    .ikon-instagram {
        margin-top: 5px;
    }

    #mobile-nav-toggle {
        top: 10px;
    }

    .logo-menu a img{
        margin-top: 0px;
        position: absolute;
        top: -7%;
        max-height: 200% !important;
        height: 118%;
        left: 33%;
    }

    .overlay-app-doc-mobile {
        margin-top: 10px;
    }

    .dynamic-text-akhir span{
        list-style: none;
        font-size: 2.5rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        padding: 10px;
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }

    .modal-header h5{
        border-radius: 15px;
        font-family: newJune;
        font-size: 20px;
        color: #ed008c;
    
    }
    
    .modal-header p{
        font-family: newJune;
        font-weight: bold;
        color: #ed008c;
        margin: 0px 0px 0px;
    
    }

    .slider-home {
        background-image: url(../../aset/img/SLIDER\ ANDROID/SLIDER\ HOME.png);
    }
    

    .slider-1 {
        background-image: url(../../aset/img/SLIDER/Healthy\ Mobile.jpg);
        background-position-x: 10%;
        background-size: 30em;
        background-position-y: -1.5em;
        background-repeat: no-repeat;
    }
    .slider-2 {
        background-image: url(../../aset/img/SLIDER/Medical\ Mobile.jpg);
        background-position-x: 10%;
        background-size: 30em;
        background-position-y: -1.5em;
        background-repeat: no-repeat;
    }
    .slider-3 {
        background-image: url(../../aset/img/SLIDER/Accomodation\ Mobile.jpg);
        background-position-x: 10%;
        background-size: 30em;
        background-position-y: -1.5em;
        background-repeat: no-repeat;
    }
    .slider-4 {
        background-image: url(../../aset/img/SLIDER/Transportation\ Mobile.jpg);
        background-position-x: 10%;
        background-size: 30em;
        background-position-y: -1.5em;
        background-repeat: no-repeat;
    }
    .slider-5 {
        background-image: url(../../aset/img/SLIDER/Q&A\ Mobile.jpg);
        background-position-x: 10%;
        background-size: 30em;
        background-position-y: -1.5em;
        background-repeat: no-repeat;
    }
    .bg-testi-1{
        background-position-x: 25%;
    }

    .bg-testi-2{
        background-position-x: 35%;
    }

    .bg-testi-3{
        background-position-x: 45%;
    }

    .bg-testi-4 {
        background-position-y: 0px ;
    }

    .bg-testi-5 {
        background-position-x: 60%;
    }

    .flex-resp-footer {
        position: relative;
        left: 0% !important;
        align-items: center;
    }

    .flex-resp {
        flex-direction: column;
    }
    
    .video-laptop {
        position: absolute;
        /* width: 488px; */
        top: 19px;
        height: 80%;
        left: 50px;
        width: 19.5em;
    }
    .slideshow-div .carousel-inner .item .height-mobile{
        height: 70vh !important;
    }

    .laptop-mobile { 
        width:26em;
        margin-left: -12px;
    }

    .header-mobile{
        height: 50px;
    }

    .footer-area {
        padding-left: 0px;
        padding-right: 0px;
        padding-top: 30px;
        padding-bottom: 0px;
        width: 260%;
        margin-bottom: 0%;
    }
    
    .bg-white-city {
        background: url(../../aset/img/bg-white.png);
        background-size: 218%;
        background-position-x: 4%;
        background-position-y: 136%;
        background-repeat: no-repeat;
        margin-top: 8em;
    }

    .container{
        max-width: 100%;
    }
    
    .watch-text {
        position: absolute;
        top: 40em;
        width: 100%;
        left: 0em;
    }
    
    
    .watch-text h4 {
        font-size: 200%;
        font-family: 'newJune';
        position: relative;
        left: 0%;
        text-align: center;
        margin-top: -22em;
        margin-left: 0%;
    }
    
    .logo-whatsapp {
        top: 8px;
        left: 23px;
        width: 100px;
    }
    
    .logo-gmail {
        top: 8px;
        left: 23px;
        width: 100px;
    }
    
    .section-event {
        margin-top: 4em;
        margin-bottom: 5em;
        width: 100%;
    }
    
    .title-event {
        margin-bottom: 50px;
        font-size: 20px;
    }
    
    .aboutus-ourpart {
        margin-top: -3em;
        padding-top: 15px;
        margin-bottom: 10px;
        display:absolute !important;
        
    }
    
    .aboutus-ourpart .card {
        width: 22em;
        height: 20em;
        box-shadow: 15px 12px 20px rgb(173, 173, 173) !important;
        margin-bottom: 15px;
    }
    
    .aboutus-ourpart .card .card-about {
        margin-left: 100px;
    }
    
    .btn-more {
        font-family: newJune;
        background-color:#ed008c;
        color:#fff;
        margin-right: 4%;
        right: 270px;
        box-shadow:1px 0px 5px rgb(173 173 173);
    }
    
    .our-friend h3 {
        font-size: 20px;
    }

    #btn-arrow1{
        left:38%;
        top:91%;
    }
    #btn-arrow2 {
        top:91%;
        left:38%;
    }
    #btn-arrow3, #btn-arrow6{
        left:38%;
        top:91%;
    }
    
    #btn-arrow4 {
        left: 38%;
        top:30.1%;
    }
    
    #btn-arrow5 {
        top:91%;
        left: 40%;
    }
    
    
    
    .card-event {
        margin-right: 0px;
        margin-bottom: 10px;
        border-radius: 10px;
        width: 49%;
        height: 132px;
        color: white;
        padding-top: 10px;
        padding-right: 0px;
        box-shadow: 15px 12px 20px rgb(173, 173, 173);
    }
    
    .card-event .btn{
    
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        padding-left: 17%;
        margin-top: -11%;
    }
    
    .card-event h4 {
        color: white;
        font-size: 16px;
        line-height: 0.5em !important;
        margin-left: -12px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    
    .card-event p {
        margin: 0 0 0px;
        font-size: 9.55px;
    }
    
    .card-event-pink {
        background-color: #fc74b7;
    }
    
    .card-event-grey {
        background-color: #5c5c5c;
    }

    .grey-mob {
        background-color: #5c5c5c !important;
    }

    .pink-mob {
        background-color: #fc74b7 !important;
    }
    
    .our-friend {
        margin-top: 4em !important;
        padding-top: 15px;
        /* align-items: center; */
        margin-left: 0%;
        width: 100%;
    }
    
    .our-friend .card {
        border: none;
        border-radius:25px;
        width: 100%;
        /* box-shadow:1px 0px 5px rgb(173 173 173); */
    }

    .footer-area {
        background-image: url(../../aset/img/Materi/FOOTER.jpg);
        background-repeat: no-repeat;
        background-color: #e21b78;
        background-size: cover;
        background-position-x: -137em;
        background-position-y: 183%;
    }
    
    .our-friend .card .card-header {
        background: #fc74b7; 
        border-radius:25px 25px 0px 0px;
    }

    .carousel-inner {
        /* border-radius: 15px; */
    }

    .carousel-caption-contactus {
        margin-top: 10%;
    }
    
    .carousel-inner .item .carousel-caption {
        top:62%; 
        left:0%;
        align-items: center !important; 
        line-height: 85%;
        margin-top: -65%;
        width:100% !important;
    }
    
    .carousel-inner .item .contactus-slider {
        top:54% !important; 
        left:5%; 
        width:100% !important;
    }

    .eng h5{
        font-size:4em !important;
    }

    .ind h5{
        font-size:3em !important;
    }
    
    .carousel-inner .item .carousel-caption h5 {
        color: #5c5c5c;
        left: -2%;
        margin-bottom: 10px;
        font-family: newJune;
        font-weight: 100;
        /* padding-top: 6% !important; */
    }
    
    .carousel-inner .item .carousel-caption p {
        font-size: 1rem;
        /* width: 100%;  */
        padding-left: 2px;
        line-height: 1.5em;
        margin-top: -3% !important;
        margin-bottom: 10%;
        color: #5c5c5c;
        font-family: newJune;
        font-weight: 100;
    }
    
    .text-list-ini {
        color: #5c5c5c;
        align-items: center !important;
        font-size: 12px;
    }

    .text-list-ini li {
        color: #5c5c5c;
        margin-bottom:12px;
    }
    
    .contactus-slider li{
        margin-right: -15%;

    }
    
    .btn-arrow{
        left: 13em;
        top: 424px;
        position: absolute;
        transition: 0.5s;
    }
    
    
    .card-body-tinggi1 , .card-body-tinggi2 , .card-body-tinggi3 , .card-body-tinggi6{
        height: 20.9em;
        border-radius: 0px 0px 25px 25px;
        font-size: 11px;
        transition: 1.5s;
    }

    .card-body-tinggi4 {
        height: 22.5em;
        border-radius: 0px 0px 25px 25px;
        font-size: 11px;
        transition: 1.5s;
    }
    .card-body-tinggi5 {
        height: 22.5em;
        border-radius: 0px 0px 25px 25px;
        font-size: 11px;
        transition: 1.5s;
    }

    .sL {
        display: none;
        cursor: pointer;
    }
    
    .ikon-arrow {
        display: none;
    }
    
    .card-body-tinggi p {
       margin: 5%;
       font-size: 14px;
    }
    
    .baca {
        display: block;
        cursor: pointer;
    }

    .after-img {
        position: absolute;
        top: 100%;
        height: 0%;
        width: 100%;
        border-radius: 10px;
        transition: 0.5s;
    }
    
    .contactus-slider {
        width: 100%;
    }
    
    /* footer */
    
    .kontak-footer a{
        margin-left: 0%;
        margin-top: 20px;
    }
    
    .kontak-footer h6 {
        padding-top: 10px;
        font-size: 20px;
    }
    
    .list-link li {
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: -18.5em;
    }
    
    .list-link-medsos{
        display: flex;
        flex-direction: row;
        margin-left: 0%;
    }
    
    .list-link-medsos li {
        height: 100px;
    }
    
    .title-footer{
        margin-right: 0em !important;
        margin-left: 0em !important;
    }
    .title-footer h6{
        margin-bottom: 30px !important;
        display: flex;
        white-space: nowrap;
        flex-direction: column;
        align-items: center;
        margin-left: -15em;
    }

    .list-link {
        margin-bottom: 10%;
        margin-left: -5%;
    }

    .contactus-mobile h6{
        margin-left: -42%;
    }
    
    .dynamic-text span{
        list-style: none;
        font-size: 2rem;
    }
/*     
    .dynamic-text span::after{
        content: "";
        position:absolute;
        left: 0;
        height: 9.5%;
        width: 100%;
        background-color: #fcc6e0;
        border-left: 2px solid white; */
        /* transform: translateX(65%);
        transition: 3.5s; */
        /* animation:  typing 3.5s steps(30) forwards;
    }
    
    .dynamic-text-abu span::after{
        content: "";
        position:absolute;
        left: 0;
        height: 9.5%;
        width: 100%;
        background-color: #ececec;
        border-left: 2px solid white; */
        /* transform: translateX(65%);
        transition: 3.5s; */
        /* animation:  typing-abu 3.5s steps(30) forwards;
    }
    
    .dynamic-text-abu-tua span::after{
        content: "";
        position:absolute;
        left: 0;
        height: 9.5%;
        width: 100%;
        background-color: #e1e1e1;
        border-left: 2px solid white; */
        /* transform: translateX(65%);
        transition: 3.5s; */
        /* animation:  typing-abu 3.5s steps(30) forwards;
    }
    
    .dynamic-text-ungu span::after{
        content: "";
        position:absolute;
        left: 0;
        height: 9.5%;
        width: 100%;
        background-color: #eed5eb;
        border-left: 2px solid white; */
        /* transform: translateX(77%);
        transition: 3.5s; */
        /* animation:  typing-ungu 3.5s steps(36) forwards;
    } */

    .text-home span{
        /* position:absolute; */
        /* left: 35%; */
        /* top: 35%; */
        height: 33%;
        width: 30%;
        /* background-color: #f4f4f2; */
        /* border-left: 2px solid white; */
        /* transform: translateX(65%);
        transition: 3.5s; */
        /* animation:  typing-home 3.5s steps(20) forwards; */
        /* list-style: none; */
        /* font-size: 3rem; */
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text-abu span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text-abu-tua span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        line-height: 1.5em;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    .dynamic-text-ungu span{
        list-style: none;
        font-size: 2rem;
        color: #5c5c5c;
        /* text-transform: uppercase; */
        /* padding: 10px; */
        border-right: solid #5c5c5c 1px; 
        animation: cursor 1.5s ease-in-out infinite;
    }
    
    
      .section-event p {
        font-size: 10.5px;
    margin-left: -10px;
}
    
      .wrap-empat {
        margin-right: 0px;
      }
      
      /* @media only screen and (max-width: 767px) {
        .mpo-modal-body {
          max-width: 100%;
          width: 100%;
          border-radius: 0;
        }
      } */
    
    /* keyframe animation */
    @keyframes typing {
        from {
            transform: translateX(0%);
    
        }
        to {
            transform: translateX(65%);
        }
    }
    
    @keyframes typing-ungu {
        from{
            transform: translateX(0%);
    
        } 
        to{
            transform: translateX(77%);
        }
    }
    @keyframes typing-abu {
        from{
            transform: translateX(0%);
    
        } 
        to{
            transform: translateX(75%);
        }
    }
    
    @keyframes background-ani {
        
        
        from{
            background-position:0 0;
        }
        to{
            background-position: 0 -533px;
            background :url(../../aset/img/blog/user2.jpg);
            }
        
    }
    
    
    
    @keyframes btn-muter {
        100% {
            transform: translateY(-30em) rotate(180deg);
        }
    }
    
    /* style modal */
    .modal-dialog {
        max-width: 800px;
      }
      
      .wrap-modal-slider {
        padding: 0 30px;
        opacity: 0;
        transition: all 0.3s;
      }
      
      .wrap-modal-slider.open {
        opacity: 1;
      }
      
      .slick-prev:before, .slick-next:before {
        color: red;
      }

      .kontak-footer-mobile {
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        /* margin: auto; */
        align-items: center;
        justify-content: center;
        left: 1%;
      }

      .we-help-mobile {
        position: relative;
        left: 10em;
        right: 10em;
        align-items: center;
        display: flex;
        flex-direction: column;
        margin-bottom: 0% !important;
        margin-top: -4%;
      }

      .aboutus-mobile {
        left: 10em;
        right: 10em;
        display: flex;
        flex-direction: column;
        align-items: center;
        top: 57%;
        margin-top: 0px;
        position: relative;
      }

      .contactus-mobile {
        top: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        left: 10%;
      }

      .li-bahasa-mobile {
        width: 20%;
        margin-left: -5%;

      }

      
    
    
    
  

  @keyframes cursor {
    from { border-color: #5c5c5c; }
    to { border-color: transparent; }
  }
}

@media only screen and (min-width:420px) and (max-width:600px) {
    .car-special-mobile{
        top: 70% !important;
    }

    .carousel-caption {
        top: 65% !important;
    }
}