.splash {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #1d2127;
    z-index: 1100;
    display: flex;
    align-items: center;
    text-align: center;
    /* line-height: 100vh; */
}

.splash.display-none {
    position: fixed;
    opacity: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #1d2127;
    z-index: -10;
    text-align: center;
    line-height: 100vh;
    transition: all 0.5s;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in forwards;
}

.navbar-toggler {
    border: 0;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    box-shadow: none;
    border: 0;
}

.navbar-color {
    /* background: linear-gradient(130deg, #0e4464da 0%, #7a5d23 16%, #1a212ce8 100%); */
    /* background-color: #d8d402; */
    background-color: #fff;
}

.navbar-color-about {
    background: #151d27d5;
}

.toggler-icon {
    width: 30px;
    height: 3px;
    background-color: rgb(0, 0, 0);
    display: block;
    transition: all 0.2s;
}

.middle-bar {
    margin: 5px;
}

.navbar-toggler .top-bar {
    transform: rotate(41deg);
    transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
    opacity: 0;
    filter: alpha(opacity=0);
}

.navbar-toggler .bottom-bar {
    transform: rotate(-44deg);
    transform-origin: 10% 10%;
}

.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
    position: relative;
    right: 5px;
    filter: alpha(opacity=100);
}

.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
    width: 45%;
    margin-left: 12px;
}

.navbar-toggler.collapsed .toggler-icon {
    /* color: #F4B942; */
    color: #fff;
}

.navbar {
    transition: 0.2s;
}

.logo {
    width: 120px;
}

.pelan_background {
    /* background: linear-gradient(130deg, #0e4464b2 0%, #41237ab0 16%, #1a212cb7 100%); */
    background: #F4B942;
    transition: 0.7s;
}

.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

.dropdown-menu {
    background: #ffffff;
    border: none;
    margin: auto;
    border-radius: 0%;
    margin: 0%;
}

.dropdown-menu:hover {
    color: #fff;
}

.dropdown-toggle {
    transition: 0.5s;
}

@media screen and (max-width:576) {
    li {
        padding: 5px;
    }
}

.text_nav {
    color: rgb(0, 0, 0);
    font-size: 15px;
    font-family: "poppins";
    text-decoration: none;
}

.text_nav:hover {
    background-color: transparent;
    color: rgb(72, 57, 10);
}

.background {
    padding-bottom: 50px;
    /* background: linear-gradient(130deg, #0e4464da 0%, #41237a 16%, #161a20 100%); */
    background: #FFC629;
}

.background_2 {
    padding-bottom: 50px;
    background: #fff;
}

/* .full {
    height: 1000%;
} */

/* .background_image {
    background-image: url(../desain/laptop.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    height: 100vh;
} */
.background_image2 {
    /* background: linear-gradient(130deg, rgb(46, 72, 106) 0%, #012233 100%); */
    background: #535353;
}

.background_image3 {
    /* background: linear-gradient(130deg, rgb(192, 173, 255) 0%, #c29cda 100%); */
    /* background: linear-gradient(130deg, rgb(232, 224, 255) 0%, #fff9ff 100%); */
    background: linear-gradient(30deg, rgb(150, 155, 0) 0%, #34baf3 100%);
}

.background_gradient {
    padding-top: 50;
    padding-bottom: 50px;
    background: rgb(42, 24, 55);
    background: linear-gradient(45deg, rgba(42, 24, 55, 1) 0%, rgba(21, 33, 75, 0.89) 50%, #1d2127 100%);
}


.background_login {
    width: 100%;
    min-height: 100%;
    background: #282828;
}

.background_footer {
    background: #535353;
}

.poppins_2 {
    font-family: "poppins";
    font-weight: lighter;
}

.judul {
    font-family: "poppins";
    /* font-weight: lighter; */
    font-size: 300%;
    /* color: #FFDD09; */
}

.jarak {
    padding: 70px 0px 70px 0px;
}

.jarak_5 {
    padding: 77px 0px 77px 0px;
}

.jarak_2 {
    padding: 100px 0px 100px 0px;
}

.jarak_3 {
    padding: 155px 0px 155px 0px;
}

.jarak_4 {
    padding-top: 200px;
    /* padding-bottom: 300px; */
}

@media (max-width: 768px) {
    .jarak_4 {
        padding-top: 50px;
    }
}

.jarak_pas {
    width: 100%;
    height: 100%;
    position: absolute;
}

.jarak_login {
    padding: 135px 0px 143px 0px;
}

.jarak_register {
    padding: 125px 0px 125px 0px;
}

.margin {
    margin-top: 150px;
}

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

.button {
    color: #FFC252;
    outline: none;
    display: block;
    background: transparent;
    padding: 5px 30px;
    border: solid 2px #FFC252;
}

/* layanan */
.color_new {
    background: rgb(0, 0, 0);
    /* background: linear-gradient(90deg, rgba(0, 200, 255, 1) 0%, rgba(137, 255, 141, 1) 100%); */
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.judul_utama {
    font-family: "poppins";
    font-style: italic;
    font-weight: bold;
    font-size: 50px;
}

.judul_utama_2 {
    font-family: "poppins";
    font-style: italic;
    font-weight: bold;
    font-size: 25px;
}

.font_poppins {
    font-family: "poppins";
    font-weight: normal;
}

.judul_isi {
    font-size: 30px;
}

.judul_isi_2 {
    font-size: 20px;
}

.color_text {
    /* color: rgb(0, 200, 255); */
    color: #d8d402;
}

.color_text_footer {
    font-size: 20px;
    font-weight: bold;
}

.buttongradient {
    padding: 5px 25px 5px 25px;
    color: rgba(137, 255, 141, 1);
    border-color: rgba(137, 255, 141, 1);
    background: transparent;
    transition: 0.5s;
    font-family: "poppins";
}

.buttongradient:hover {
    color: rgb(24, 24, 24);
    z-index: 1;
    background: linear-gradient(90deg, rgba(0, 200, 255, 1) 0%, rgba(137, 255, 141, 1) 100%);

    transform: translateY(-20px);
    transition: 0.5s;
}

.isometric {
    animation: isometric 2s linear infinite;
}

@keyframes isometric {

    0%,
    100% {
        transform: translateY(-40px);
    }

    50% {
        transform: translateY(40px);
    }
}

/* layanan */
.icon_box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}

.box {
    width: 90%;
    min-height: 300px;
    background: rgb(1, 217, 176);
    background: linear-gradient(90deg, rgba(1, 217, 176, 0.1) 33%, rgba(230, 119, 254, 0.1) 64%);
}

.text_box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.text_desain {
    padding-top: 20px;
}

h5 {
    color: white;
    font-size: 20px;
    justify-items: center;
}

/* desain lisensi */
.card {
    width: 80%;
    min-height: 450px;
    background: rgba(243, 153, 255, 0.068);
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.2);
}

.card_box {
    width: 100%;
    min-height: 200px;
    background: #1d2127;
}

.posisi_tengah {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* alur pesanan */
.box_pesan {
    width: 90%;
    min-height: 300px;
    padding: 60px 20px 0px 20px;
    box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.2);
    background: rgba(225, 2, 255, 0.096);
}

.text_isi {
    font-family: "poppins";
    color: #000000;
    font-size: 17px;
    align-items: left;
}



.btnDetail {
    cursor: pointer;
}

/* kontak jasa desain */
.btn_wa {
    text-align: center;
    width: 40%;
    color: #52ff5b;
    background: transparent;
    border: solid 2px #52ff5b;
}

.btn_wa:hover {
    color: #ffff;
    background: #12d31c;
}

.icon {
    text-align: center;
}

.tombol {
    display: inline-block;
    background: rgb(0, 200, 255);
    background: linear-gradient(90deg, #ffdc6b 0%, rgb(255, 179, 0) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    width: 50px;
    height: 50px;
    margin: 5px;
    border-radius: 30%;
    overflow: hidden;
    box-sizing: 0.5px 15px -5px #00000070;
    transition: 0.5s;
}

.tombol i {
    line-height: 50px;
}

.tombol:hover {
    transform: translateY(-10px);
    transition: 0.5s;
    box-shadow: 0px 0px 5px 5px #89ff8d;
}

/* accordion */
.accordion-button {
    color: turquoise;
    background: linear-gradient(90deg, rgba(1, 217, 176, 0.1) 33%, rgba(230, 119, 254, 0.1) 64%);
}

.accordion-button:not(.collapsed) {
    color: #1d2127;
    background-color: #0c63e4;
    background-color: #e7f1ffd2;
}

.white {
    color: #ffffff;
    z-index: 10;
}

/* ukuran img */

/* beda */
.accordion-item,
.accordion-header {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 5px;
}

.accordion-collapse {
    color: #ffffff;
}

/* ABOUT */
.about {
    font-family: "poppins";
    font-style: italic;
    font-weight: bold;
    font-size: 50px;
    margin-top: -100px;
}

.judul_about {
    font-family: "poppins";
    font-weight: bold;
    font-size: 30px;
}

.background_indo {
    background-color: #290049;
}

.icon_about {
    margin-top: -10px;
}

.color_about {
    background: #02d8b1;
    background: linear-gradient(90deg, rgba(2, 216, 177, 1) 35%, rgba(231, 118, 254, 1) 70%);
    -webkit-text-fill-color: transparent;
    /* -webkit-background-clip: text; */
}

.coret {
    text-decoration: line-through;
    color: rgb(72, 131, 102);
}

.color_icon {
    color: rgba(2, 216, 177, 1);
}

.color_list {
    color: #83a0ff;
    padding-left: 6px;
}

.color_not {
    color: #d802b4;
}

.clear {
    clear: both;
}

.aria-expanded {
    color: #02d8b1;
}

/* web */
.card_web {
    width: 80%;
    min-height: 450px;
    background: rgb(1, 217, 176);
    background: linear-gradient(90deg, rgba(1, 217, 176, 0.1) 33%, rgba(230, 119, 254, 0.1) 64%);
}

.accordionn {
    width: 80%;
    min-height: 450px;
    background: rgb(1, 217, 176);
    background: linear-gradient(90deg, rgba(1, 217, 176, 0.1) 33%, rgba(230, 119, 254, 0.1) 64%);
}

.card_box_web {
    width: 100%;
    min-height: 200px;
    background: #111316a1;
}

/* domain */
.text_rata {
    text-align: justify;
}

/* blog */
.color_search {
    background-color: #02d8b1;
}

.card_blog_inti {
    background: linear-gradient(90deg, rgba(1, 217, 177, 0.11) 33%, rgba(229, 119, 254, 0.15) 64%);
    width: 100%;
    min-height: 100%;
    box-shadow: 0;
}

.card_blog {
    background: linear-gradient(90deg, rgba(1, 217, 177, 0.11) 33%, rgba(229, 119, 254, 0.15) 64%);
    width: 100%;
    min-height: 390px;
    box-shadow: 0;
}

.gradient_image {
    background: rgb(35, 35, 35);
    background: linear-gradient(0deg, rgba(35, 35, 35, 1) 17%, rgba(207, 0, 255, 0.18373613679007195) 100%);
}

.bg_list {
    background-color: rgba(0, 0, 0, 0.7);
}

.card_over {
    background: #1d2127;
    width: 100%;
    z-index: -2;
}

.card_isi {
    padding-top: 10px;
}

.read a {
    color: rgb(15, 255, 255);
    font-style: italic;
    font-size: 15px;
    font-family: "poppins";
    text-decoration: none;
}

.judul_card {
    font-size: 20px;
    font-family: "poppins";
    font-size: 25px;
}

.text_card_footer {
    font-family: "poppins";
    color: #ffff;
    font-size: 1px;
    align-items: left;
}

.logo_footer {
    width: 300px;
}

/* login */
.card_login {
    background: linear-gradient(90deg, rgba(1, 217, 177, 0.11) 33%, rgba(229, 119, 254, 0.15) 64%);
}

/* portfolio */
.row_grid {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

.column {
    flex: 25%;
    max-width: 33.3%;
    padding: 0 4px;
}

.column img {
    margin-top: 8px;
    padding: 10px;
    vertical-align: middle;
    width: 100%;
    cursor: pointer;
    transition: 0.3s linear;
}

.column img:hover {
    filter: grayscale(0);
}

@media screen and (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

@media screen and (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }

    .column img {
        filter: grayscale(0) brightness(1);
    }
}

/* web sistem */
.card_sistem {
    background: linear-gradient(90deg, rgba(1, 217, 177, 0.11) 33%, rgba(229, 119, 254, 0.15) 64%);
    width: 100%;
}

.fitur {
    column-count: 2;
    list-style-type: none;
}

.list {
    -webkit-column-break-inside: avoid;
    -webkit-column-break-inside: avoid;
}

/* read more */
.content-body {
    max-height: calc(73px * 3);
    overflow: hidden;
}

.button-readmore::after {
    content: 'Read More..'
}

.button-readmore {
    padding: 5px 10px;
    color: rgb(137, 255, 141);
    cursor: pointer;
}

.button-readmore:hover {
    color: rgb(255, 137, 235);
}

#check-readmore_1:checked~.button-readmore::after,
#check-readmore_2:checked~.button-readmore::after,
#check-readmore_3:checked~.button-readmore::after,
#check-readmore_4:checked~.button-readmore::after,
#check-readmore_5:checked~.button-readmore::after,
#check-readmore_6:checked~.button-readmore::after,
#check-readmore_7:checked~.button-readmore::after,
#check-readmore_8:checked~.button-readmore::after,
#check-readmore_9:checked~.button-readmore::after {
    content: 'Read Less';
    /* content: 'Read less \f102';
  font-family: "font awesome 5 free"; */
}

#check-readmore_1:checked~.content-body,
#check-readmore_2:checked~.content-body,
#check-readmore_3:checked~.content-body,
#check-readmore_4:checked~.content-body,
#check-readmore_5:checked~.content-body,
#check-readmore_6:checked~.content-body,
#check-readmore_7:checked~.content-body,
#check-readmore_8:checked~.content-body,
#check-readmore_9:checked~.content-body {
    max-height: 150vh;
}

/* hilangkan check box */
#check-readmore_1,
#check-readmore_2,
#check-readmore_3,
#check-readmore_4,
#check-readmore_5,
#check-readmore_6,
#check-readmore_7,
#check-readmore_8,
#check-readmore_9 {
    position: absolute;
    left: -100px;
}

/* loker */
.overflow_auto {
    overflow: auto;
    height: 100%;
    /* position: fixed; */
}

.tetap {
    /* position: fixed; */
    float: right;
    right: 1%;
    overflow: auto;
    height: 450px;
}

.scroll_loker {
    /* position: fixed; */
    float: right;
    right: 1%;
    overflow: auto;
    height: 450px;
}

.card_loker {
    /* background: linear-gradient(90deg, rgba(1, 217, 177, 0.11) 33%, rgba(229, 119, 254, 0.15) 64%); */
    border-color: #39473c;
    border-style: solid;
    width: 100%;
    max-height: 100%;
}

.card_loker:hover {
    box-shadow: 0 10px 10px -5px #000000;
    transition: 0.5s;
}

.logo_perusahaan {
    width: 50%;
    max-height: 50%;
}

.image_loker {
    max-width: 100%;
    height: 200px;
}

.fixed_flat {
    position: fixed;
    width: 100%;
}

/* slider */
.slider {
    margin: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}

.slider .slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(500px * 20);
}

.slider .slide {
    /* height: 500px; */
    width: auto;
    padding: 90px 50px 90px 50px;
    /* padding-top: 90px;
    padding-bottom: 90px;
    padding-left: 50px;
    padding-right: 50px; */
}

/* inc_slide2 */
.slider2 {
    /* margin: auto; */
    overflow: hidden;
    position: relative;
    width: auto;
}

.slider2 .slide-track2 {
    animation: scroll 50s linear infinite;
    display: flex;
    width: calc(900px * 10);
}

.slider2 .slide2 {
    height: 500px;
    width: auto;
    padding: 90px 50px 90px 50px;
    /* padding-top: 90px;
    padding-bottom: 90px;
    padding-left: 50px;
    padding-right: 50px; */
}

/*end inc_slide2 */

/* inc background */
/* .tengah {
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.tengah_2 {
    z-index: 1000;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
} */

/* margin-top: 500px; */


.nominal {
    font-size: 90px;
    margin-top: 20px;
}

/* 
.slider3 {
    overflow: hidden;
    position: relative;
    width: auto;
}

.slider3 .slide-track3 {
    animation: scroll 100s linear infinite;
    display: flex;
    width: calc(3000px * 5);
}

.slider3 .slide3 {
    opacity: 90%;
    height: 800px;
    width: auto;
    padding: 90px 0px 90px 0px;
} */

/*end inc background */

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-900px * 7));
    }
}

/* ukuran */
.ukuran_image_1 {
    width: 90%;
    height: 90%;
}

.ukuran_image_2 {
    width: 80%;
    height: 80%;
}

.ukuran_image_3 {
    width: 100px;
}



.ukuran_full {
    width: 1000px;
}

.ukuran_0 {
    width: 200px;
}

.ukuran_2 {
    width: 500px;
    height: 100%;
}

.ukuran_3 {
    width: 300px;
}

.ukuran_7 {
    width: 500px;
}

/* .ukuran_8 {
    width: 1000px;
} */

.ukuran_6 {
    width: 70px;
}

.ukuran_4 {
    width: 100px;
    height: auto;
}

.ukuran_5 {
    width: 50px;
    height: auto;
}