@import url('https://fonts.googleapis.com/css2?family=Nunito');
@media (max-width: 769px) {
    /* Android page */
    .deskripsi-logo{
        width: 100%;
    }
    .colour-headers {
        height:700px;
    }
    .navbarku{
        position: absolute;
        transition: 0.5s;
        width: 100%;
        z-index: 9999;
    }
    .navbar-brand img {
        width: 140px;
        height: 42px;
    }
    .jarak-top {
        padding-top:70px;
    }
    .fa-bars {
        color: #31365B;
    }
    /* START Right Header Class */
    .card-right-header {
        background: #F5F3F3;
    border-radius: 0px 0px 350px 350px;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    height: 678px;
    width: 100%;
    }
    .background-header {
        background-repeat:no-repeat;
        background-position: center;
        background-size: 605px 678px;
        height: 100%;
        width: 100%;
    }
    /* START Left Header Class */
    .left-header h1 {
        font-weight: 800;
        font-size: 25px;
        color: #31365B;
        text-align: center;
    }
    .left-header p {
        font-weight: 400;
        font-size: 12px;
        line-height: 25px;
        color: #31365B;
        text-align: center;
    }
    .left-header a {
        font-weight: 400;
    font-size: 12;
    line-height: 25px;
    /* identical to box height */
    color: #31365B;
    text-align: center;
    display: flex;
    justify-content: center;
    }
    .blue-tag{
        color:#1969E2;
    }
    .btn-pesan {
        background-color: #fff000;
        margin-right:12px;
        transition: 0.5s!important;
    }
    .btnku:hover .fa-arrow-right {
        color: #1969e2 !important;
        transition: 0.5s!important;
        margin-left:5px!important;
        text-decoration: none;
    }
    .btnku:hover .btn-pesan{
        background-color: transparent;
        transition: 0.5s!important;
    }
    .fa-arrow-right {
        color: white !important;
        transition: 0.5s!important;
    }
    
    /* START CARD BODY HEADER */
    .card-body{
        background: #FAFAFE;
        bottom:0px;
        padding-bottom:0px;
        margin-bottom:0px;
    }
    .card-kiri {
        background-color: #00944A;
        border-radius: 25px 25px 0px 0px;
        border:0px solid;
    }
    .card-kiri-title {
        font-weight: 900;
    font-size: 20px;
    text-align: center;
    color: #FFFFFF;
    max-width: 258.28px;
    }
    .border-circle {
        max-width: 72px;
        max-height: 72px;
        width: 100%;
        height: 72px;
        border-radius: 50%;
        justify-content: center;
        display: flex;
        align-items: center;
    }
    .border-cream {
    background-color: #FEE7DA;
    }
    .border-blue {
        background-color: #D4EBFD;
        }
        .border-yellow {
            background-color: #FFF2DC;
            }
            .border-green {
                background-color: #D9FEED;
                }
    .circle-title {
        font-weight: 900;
    font-size: 18px;
    color: #31365B;
    }
    .circle-deskripsi {
    font-size: 14px;
    line-height: 16px;
    color: #ACABB4;
    }
    .icon-size {
        font-size: 36px;
        color:#31365B;
    }
    
    /*START Card Body Green*/
    .card-body-green {
        background: linear-gradient(154.99deg, #00944A 46.16%, #13CA6F 85.73%);
    }
    .title-body-green {
        font-weight: 700;
        font-size: 20px;
        line-height: 27px;
        text-align: center;
        
        color: #FFFFFF;
    }
    .deskripsi-body-green {
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        text-align: center;
        
        color: #FFFFFF;
        
    }
    .fa-angle-down {
        transition: all 0.4s ease;
    }
    .arrow-rotate {
        transform: rotateZ(-90deg);
        transition: all 0.4s ease;
    }
    .card-header{
        background-color: white!important;
    }
    .btn-colap {
        font-weight: 700;
        font-size: 14px;
        line-height: 19px;
        width: 100% !important;
        color: #00944A;
        display: inline-block;
        border:0px solid;
    }
    .btn-colap:hover {
        color: #00944A;
        text-decoration: none; 
    }
    .card-colap {
        font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: #6F6F6F;
    top:0px;
    margin-top: 0px;
    padding-top: 0px;
    background-color: white!important;
    }
    .title-accordionku {
        font-weight: 700;
        font-size: 20px;
        line-height: 27px;
        text-align: center;
        
        color: #FFFFFF;
    }
    
    /* Banner Class */
    .title-banner {
        font-weight: 700;
    font-size: 25px;
    color: #31365B;
    text-align: center;
    }
    .card-table {
        background: #FAFAFE;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    }
    .card-table-title {
        font-weight: 700;
    font-size: 20px;
    color: #31365B;
    text-align: center;
    }
    .card-table-list {
        background: #FFFFFF;
    }
    .title-label {
        font-weight: 700;
    font-size: 18px;
    color: #31365B;
    }
    .title-des {
        font-weight: 600;
    font-size: 12px;
    color: #31365B;
    
    }
    .mytable th {
        background-color: #1969E2;
        font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF;
    text-align: center;
    }
    .mytable td {
        font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: #0F143C;
    
    }
    .card-body-product {
        background: #FAFAFE;
    }
    .product-title{
        font-weight: 700;
    font-size: 25px;
    color: #31365B;
    }
    .product-title-list {
        font-style: normal;
        font-weight: 700;
        font-size: 16px;
        color: #000000;
        
    }
    .card-product {
        background: #FAFAFE;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 25px;
    }
    .card-product img {
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    }
    .card-product a {
        font-weight: 700;
    font-size: 12px;
    text-align: center;
    color: #FFFFFF;
    background: #1969E2;
    border-radius: 22.5px;
    padding:13px 29px;
    }
    
    /* Footer Class */
    footer {
        background: #0F143C !important;
    }
    .title-logo {
        font-weight: 600;
    font-size: 36px;
    line-height: 49px;
    color: #FFFFFF;
    
    }
    .deskripsi-logo {
        font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: #FFFFFF;
    
    }
    .iconku {
        color:white;
    }
    .title-footer {
        font-weight: 700;
    font-size: 24px;
    line-height: 33px;
    color: #FFFFFF;
    }
    .list-footer {
        font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    color: #FFFFFF;
    
    }
    .list-footer-download{
        font-weight: 700;
    font-size: 24px;
    line-height: 33px;
    color: #FFFFFF;
    }
    .list-footer-address {
        font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    max-width: 241px;
    color: #FFFFFF;
    }
    footer hr {
        color: white !important;
        border: 1px solid #FFFFFF;
    }
    .credit-footer {
        font-weight: 400;
    font-size: 18px;
    line-height: 25px;
    /* identical to box height */
    color: #FFFFFF;
    }
    .btn-waku{
        background: #25D366;
    border-radius: 46px;
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: #FFFFFF !important;
    padding: 11px 20px;
    position: fixed;
    bottom: 0px;
    z-index: 9999;
    margin-bottom: 25px;
    }
    .btn-waku:hover{
        color:#25D366!important;
    }
  }