body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background: white;
    border-radius: 15px;
}

body::-webkit-scrollbar-thumb {
    border-radius: 15px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

html {
    scroll-behavior: smooth
}

.logo_img {
    width:70px
}

.col {
    display:inline-block
}

.container_intro {
    height:560px; 
}

.main_header {
    display:flex;
    flex-direction: row;
    flex:1;
    background:white;
    z-index:3;
    position:fixed;
    width:100%;
    justify-content: center;
    align-items: center;
}

/** Logo and Header Text Container **/

.container_logo_header {
    text-align: left;
    padding: 100px 0;
    position: relative;
    z-index: 2
}

/** Logo **/

.logo_header {
    font-weight: bold;
    font-size: 70px;
    color: white;
    padding: 40px 52px 0 52px;
}

.menu {
    position:sticky;
}

.sub_menu {
    margin: 0 29px;
    text-decoration:none;
    color:#3E3B3B;
    font-family:montserrat;
    font-size:16px;
}

.background_layer {
    background-color:rgba(13, 23, 82, 0.8);
    position: absolute;
    top:0;
    left: 50%;
    margin-left: -683px;
    width: 1366px;
    height: 560px;
    z-index: 2;
}

/** Header **/

.container_header {
    margin: 30px 0 0 0;
    padding: 0 50px;
    z-index:2
}

.header_text {
    color: white;
    font-family:Montserrat;
    font-size: 18px;
    font-weight: regular
}

.header_text2 {
    color: white;
    font-family:montserrat;
    font-size: 18px;
    font-weight:regular
}

.move_text {
    position: relative;
    -webkit-animation: maju 5s infinite; /* Safari 4.0 - 8.0 */
    animation: maju 5s infinite;
    animation-direction: alternate
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes maju {
    from {left: 0px;}
    to {left: 400px;}
  }
  
  @keyframes maju {
    from {left: 0px;}
    to {left: 400px;}
  }

/** Animaton Header **/

.gerigi {
    position: relative;
    -webkit-animation: gerigi 0.7s infinite; /* Safari 4.0 - 8.0 */
    animation: gerigi 0.7s infinite;
    animation-direction: alternate
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes gerigi {
    from {left: 500px;}
    to {left: 900px;}
  }
  
  @keyframes gerigi {
    from {top: 135px;}
    to {top: 125px;}
  }

  .lampu {
    position: relative;
    -webkit-animation: lampu 0.7s infinite; /* Safari 4.0 - 8.0 */
    animation: lampu 0.7s infinite;
    animation-direction: alternate
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes lampu {
    from {left: 0px;}
    to {left: 400px;}
  }
  
  @keyframes lampu {
    from {top: 0px;}
    to {top: 10px;}
  }

  .lampu_terang {
    width:100%;
    height:100%;
    animation: lampu_terang 3s infinite;
  }
  
  @keyframes lampu_terang {
    0% {background-color:rgb(199,223,240);}
    100% {background-color: rgb(245, 222, 18);}
  }

  }

/** Fly Animation Header **/

.fly-in-text {
    list-style:none;
    position:absolute;
    left:0;
    top:0;
    font: 42px Arial;
    font-weight: 300;
    z-index:5;
    width:100%;
    height:100%;
}

.fly-in-text div {
    opacity: 1;
    transition: all 2.5s ease;
}

.fly-in-text :last-child {
    margin-right:0;
}

.fly-in-text.hidden div {
    opacity: 0;
}

.fly-in-text.hidden div:nth-child(1) { transform: translateX(-500px) translateY(0px); }
.fly-in-text.hidden div:nth-child(2) { transform: translateX(500px) translateY(0px); }

.fly-text {
    position: absolute;
    top: 350px;
    left: 1400px;
    width: 1000px;
}

/** About **/

.main_about {
    text-align: left;
    padding: 130px 0 70px 50px;
    display: flex;
    flex-direction: row;
    width: 1300px;
    margin: 0 auto;
    position: relative;
}

.container_about {
    padding: 80px 35px 0 35px;
}

.title_about {
    padding: 28px 0 34px 0;
    font-size:35px;

}

.about_text {
    font-size:21px;
    line-height:36px;
    max-width: 400px
}

.about_animation {
    background:#38A1BF;
    width: 592px;
    height: 434px;
    margin: 0 0 0 140px;
    border-radius:37px
}

.about_animation2 {
    background:#0D1752;
    width: 370px;
    height: 353px;
    position:absolute;
    border-radius: 37px;
    top: 355px;
    left: 550px
}

/** Service **/
.service_container {
    padding: 40px 0 60px 0;
    height:1660px;
    width: 1300px;
    margin: 200px auto 0 auto;
    position: relative;
}

.service_title {
    text-align:center;
    color:#141414;
    font-family: montserrat;
    font-size:35px;
    padding: 30px
}

.list_service_container {
    background:red;
}

.number {
    font:bold 58px montserrat;
    color:white
}

.service_text {
    font-family:montserrat;
    font-size:18px;
    color:white;
    margin: 35px 0 0 5px;
}

.box1 {
    background:#0D1752;
    width:406px;
    height:413px;
    position:absolute;
    border-radius:36px;
    top: 103px;
    left: 57px;
    z-index:1
}

.box2 {
    background:#38A1BF;
    width:1021px;
    height:536px;
    position:absolute;
    border-radius:36px;
    top: 469px;
}

.box3 {
    background:#0D1752;
    width:460px;
    height:525px;
    position:absolute;
    border-radius:36px;
    top: 620px;
    left: 840px;
    z-index:1
}

.box4 {
    background:#0D1752;
    width:490px;
    height:504px;
    position:absolute;
    border-radius:36px;
    top: 918px;
    left: 39px;
    z-index:1;
}

.box5 {
    background:#314AA6;
    width:592px;
    height: 601px;
    position:absolute;
    border-radius:36px;
    top: 990px;
    left: 510px
}

/* Animation */
.animated {
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    position: absolute;
    animation-direction: alternate;
    -webkit-animation-direction: alternate;
}

.img_1_graph_front {
    animation-name: upDown1;
    animation-duration: 2s;
}

@keyframes upDown1 {
    0% { top: 5px; }
    50% { top: -10px; }
    100% { top: 5px; }
}

.img_1_graph_front2 {
    animation-name: upDown2;
    animation-delay: 1s;
    animation-duration: 2s;
}

@keyframes upDown2 {
    0% { top: 15px; }
    50% { top: 0px; }
    100% { top: 15px; }
}

.img_1_square {
    animation-name: img1Square;
    animation-duration: 1.75s;
}

@keyframes img1Square {
    0% { top: 185px; }
    50% { top: 160px; }
    100% { top: 185px; }
}

.img_1_square_a {
    animation-name: img1SquareA;
    animation-duration: 1.65s;
}

@keyframes img1SquareA {
    0% { top: 215px; }
    50% { top: 195px; }
    100% { top: 215px; }
}

.img_1_square_b {
    animation-name: img1SquareB;
    animation-duration: 1.85s;
}

@keyframes img1SquareB {
    0% { top: 227px; }
    50% { top: 205px; }
    100% { top: 227px; }
}

.img_1_text {
    animation-name: img1Text;
    animation-duration: 2s;
}

@keyframes img1Text {
    0% { top: 227px; left: 25px; }
    50% { top: 215px; left: 35px; }
    100% { top: 227px; left: 25px; }
}

.img_2_mail {
    animation-name: img2Mail;
    -webkit-animation-name: img2Mail;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img2Mail {
    0% { left: 225px; top: 75px; }
    50% { left: 210px; top: 60px; }
    100% { left: 225px; top: 75px; }
}

.img_2_hashtag {
    animation-name: img2Hashtag;
    -webkit-animation-name: img2Hashtag;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img2Hashtag {
    0% { top: 35px; }
    50% { top: 25px; }
    100% { top: 35px; }
}

.img_2_wifi {
    animation-name: img2Wifi;
    -webkit-animation-name: img2Wifi;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img2Wifi {
    0% { left: 265px; }
    50% { left: 255px; }
    100% { left: 265px; }
}

.img_2_play {
    animation-name: img2Play;
    -webkit-animation-name: img2Play;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img2Play {
    0% { left: 255px; top: 160px; }
    50% { left: 245px; top: 165px; }
    100% { left: 255px; top: 160px; }
}

.img_2_heart {
    animation-name: img2Heart;
    -webkit-animation-name: img2Heart;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img2Heart {
    0% { left: 295px; top: 80px; }
    50% { left: 280px; top: 75px; }
    100% { left: 295px; top: 80px; }
}

.img_2_chat {
    animation-name: img2Chat;
    -webkit-animation-name: img2Chat;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img2Chat {
    0% { left: 305px; top: 125px; }
    50% { left: 300px; top: 135px; }
    100% { left: 305px; top: 125px; }
}

.img_2_cam {
    animation-name: img2Cam;
    -webkit-animation-name: img2Cam;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img2Cam {
    0% { left: 330px; top: 15px; }
    50% { left: 330px; top: 5px; }
    100% { left: 330px; top: 15px; }
}

.img_2_flag {
    animation-name: img2Flag;
    -webkit-animation-name: img2Flag;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img2Flag {
    0% { left: 380px; top: 45px; }
    50% { left: 385px; top: 55px; }
    100% { left: 380px; top: 45px; }
}

.img_2_thumb {
    animation-name: img2Thumb;
    -webkit-animation-name: img2Thumb;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img2Thumb {
    0% { left: 340px; top: 80px; }
    50% { left: 350px; top: 80px; }
    100% { left: 340px; top: 80px; }
}

.img_2_search {
    animation-name: img2Search;
    -webkit-animation-name: img2Search;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img2Search {
    0% { left: 350px; top: 155px; }
    50% { left: 350px; top: 165px; }
    100% { left: 350px; top: 155px; }
}

.img_2_loc {
    animation-name: img2Loc;
    -webkit-animation-name: img2Loc;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img2Loc {
    0% { left: 395px; top: 135px; }
    50% { left: 405px; top: 145px; }
    100% { left: 395px; top: 135px; }
}

.img_3_bar_right_a {
    animation-name: img3RightA;
    animation-duration: 2s;
}

@keyframes img3RightA {
    0% { top: 220px; }
    50% { top: 200px; }
    100% { top: 220px; }
}

.img_3_bar_right_b {
    animation-name: img3RightB;
    -webkit-animation-name: img3RightB;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

@keyframes img3RightB {
    0% { top: 172px; }
    50% { top: 152px; }
    100% { top: 172px; }
}

.img_3_bar_right_c {
    animation-name: img3RightC;
    -webkit-animation-name: img3RightC;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

@keyframes img3RightC {
    0% { top: 130px; }
    50% { top: 112px; }
    100% { top: 130px; }
}

.img_3_bar_back_a {
    animation-name: img3BackA;
    -webkit-animation-name: img3BackA;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img3BackA {
    0% { left: 284px; }
    50% { left: 264px; }
    100% { left: 284px; }
}

.img_3_bar_back_b {
    animation-name: img3BackB;
    -webkit-animation-name: img3BackB;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img3BackB {
    0% { left: 319px; }
    50% { left: 339px; }
    100% { left: 319px; }
}

.img_3_circle_a {
    animation-name: img3CircleA;
    -webkit-animation-name: img3CircleA;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img3CircleA {
    0% { left: 5px; }
    50% { left: -5px; }
    100% { left: 5px; }
}

.img_3_circle_b {
    animation-name: img3CircleB;
    -webkit-animation-name: img3CircleB;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img3CircleB {
    0% { left: 54px; }
    50% { left: 64px; }
    100% { left: 56px; }
}

.img_3_circle_c {
    animation-name: img3CircleC;
    -webkit-animation-name: img3CircleC;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img3CircleC {
    0% { top: 48px; }
    50% { top: 38px; }
    100% { top: 48px; }
}

.img_3_bar_front_a {
    animation-name: img3FrontA;
    -webkit-animation-name: img3FrontA;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img3FrontA {
    0% { left: 5px; top: 158px; }
    50% { left: -5px; top: 163px; }
    100% { left: 5px; top: 158px; }
}

.img_3_bar_front_b {
    animation-name: img3FrontB;
    -webkit-animation-name: img3FrontB;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img3FrontB {
    0% { left: 19px; top: 166px; }
    50% { left: 29px; top: 160px; }
    100% { left: 19px; top: 166px; }
}

.img_3_bar_front_c {
    animation-name: img3FrontC;
    -webkit-animation-name: img3FrontC;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img3FrontC {
    0% { left: 32px; top: 173px; }
    50% { left: 22px; top: 178px; }
    100% { left: 32px; top: 173px; }
}

.img_3_bar_front_d {
    animation-name: img3FrontD;
    -webkit-animation-name: img3FrontD;
    animation-duration: 2s;
    -webkit-animation-duration: 2s;
}

@keyframes img3FrontD {
    0% { left: 46px; top: 182px; }
    50% { left: 56px; top: 177px; }
    100% { left: 46px; top: 182px; }
}

.img_4_square_a {
    animation-name: img4SquareA;
    -webkit-animation-name: img4SquareA;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
}

.img_4_square_b {
    animation-name: img4SquareA;
    -webkit-animation-name: img4SquareA;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

@keyframes img4SquareA {
    from { transform: translateY(0); }
    to { transform: translateY(-8px); }
}

.img_4_circle_a {
    animation-name: img4Circle;
    -webkit-animation-name: img4Circle;
    animation-duration: 1.2s;
    -webkit-animation-duration: 1.2s;
}

.img_4_circle_b {
    animation-name: img4Circle;
    -webkit-animation-name: img4Circle;
    animation-duration: 1.2s;
    -webkit-animation-duration: 1.2s;
    animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
}

.img_4_circle_c {
    animation-name: img4Circle;
    -webkit-animation-name: img4Circle;
    animation-duration: 1.2s;
    -webkit-animation-duration: 1.2s;
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
}

@keyframes img4Circle {
    from { transform: translate(0, 0); }
    to { transform: translate(-7px, 4px); }
}

.img_4_book_a {
    animation-name: img4BookA;
    -webkit-animation-name: img4BookA;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
}

@keyframes img4BookA {
    from { transform: translate(0, 0); }
    to { transform: translate(-25px, -25px); }
}

.img_4_book_b {
    animation-name: img4BookB;
    -webkit-animation-name: img4BookB;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

@keyframes img4BookB {
    from { transform: translate(0, 0); }
    to { transform: translate(-20px, -20px); }
}

.img_4_book_c {
    animation-name: img4BookC;
    -webkit-animation-name: img4BookC;
    animation-duration: 0.7s;
    -webkit-animation-duration: 0.7s;
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

@keyframes img4BookC {
    from { transform: translate(0, 0); }
    to { transform: translate(-15px, -15px); }
}

.img_5_surat {
    animation-name: img5surat;
    -webkit-animation-name: img5surat;
    animation-duration: 0.9s;
    -webkit-animation-duration: 0.9s;
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

@keyframes img5surat {
    from { left: 100px; top: 219px }
    to { left: 100px; top: 200px }
}

.img_5_jempol {
    animation-name: img5jempol;
    -webkit-animation-name: img5jempol;
    animation-duration: 0.8s;
    -webkit-animation-duration: 0.8s;
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

@keyframes img5jempol {
    from { left: 220px; top: 145px }
    to { left: 220px; top: 126px }
}

.img_5_chat_biru {
    animation-name: img5chatbiru;
    -webkit-animation-name: img5chatbiru;
    animation-duration: 0.8s;
    -webkit-animation-duration: 0.8s;
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

@keyframes img5chatbiru {
    from { left: 370px;}
    to { left: 355px; }
}

.img_5_chat_hitam {
    animation-name: img5chathitam;
    -webkit-animation-name: img5chathitam;
    animation-duration: 0.8s;
    -webkit-animation-duration: 0.8s;
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

@keyframes img5chathitam {
    from { left: 335px;}
    to { left: 350px; }
}

.img_6_pen {
    animation-name: img6pen;
    -webkit-animation-name: img6pen;
    animation-duration: 0.9s;
    -webkit-animation-duration: 0.9s;
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

@keyframes img6pen {
    from { top: 235px;}
    to { top: 200px; }
}

.img_6_camera {
    animation-name: img6camera;
    -webkit-animation-name: img6camera;
    animation-duration: 0.9s;
    -webkit-animation-duration: 0.9s;
    animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}

@keyframes img6camera {
    from { top: 235px;}
    to { top: 200px; }
}

.img_6_flash {
    animation-name: img6flash;
    -webkit-animation-name: img6flash;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-duration: 3s;
    -webkit-animation-duration: 3s;
}

@keyframes img6flash {
    0% { transform:scale(1); }
    4% { transform:scale(3); opacity:0.4}
    12% { transform:scale(1); }
    100% { transform:scale(1); opacity: 0.8}
}

/* #Animation */

/** Title **/
.title_header {
    font:35px montserrat;
    color:white;
    padding: 27px 0 10px 0;
    font-weight: bold
}

.contactus_container {
    padding: 50px 80px;
    font-family:open sans;
    background:#0D1752;
    width: 1300px;
    margin: 0 auto;
}

.form_container {
    display: flex;
    flex-direction: row;
    flex:1;
}

.contact_detail_container {
    flex: 0.5
}

.contact_detail {
    color:white;
    font-size:16px;
}

.contact_row {
    margin: 40px 0;
}

.table_form_container {
    flex:0.5
}

.table_form_detail {
    margin: 0 0 0 150px
}

.socmed_container {
    text-align:center;
    margin: 20px 0 0 0px;
    padding: 40px 0 0 0
}

.socmed_layer {
    margin: 0 20px
}

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

    .menu_dropdown {
        display: none
    }

    input[type=text], select, textarea {
        width: 100%;
        padding: 12px;
        border: 1px solid #ccc;
        border-radius: 13px;
        resize: vertical;
    }
        
    label {
        padding: 12px 12px 12px 0;
        display: inline-block;
        color:white
    }

    input[type=submit] {
        background-color: #38A1BF;
        color: white;
        padding: 12px 20px;
        border: none;
        border-radius: 15px;
        cursor: pointer;
        float:right;
        margin: 16px 30px 0 0;
        font-family: montserrat
    }

    input[type=submit]:hover {
        background-color: rgb(47, 139, 165);
    }

    .container {
        border-radius: 5px;
        background-color:white;
        padding: 30px;
        margin: 0 350px;
    }

    .col-25 {
        width: 100px;
        margin-top: 12px;
    }

    .col-75 {
        width: 290px;
        margin-top: 12px;
    }

    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    @media screen and (max-width: 600px) {
        .col-25, .col-75, input[type=submit] {
            width: 100%;
            margin-top: 0;
        }
    }
}