body {

    font-family: 'Poppins', sans-serif;

}

/*===================*/
/* SHRINK EFFECT
/*===================*/

.souvia-hvr {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: transform;
    transition-property: transform;
  }
  .souvia-hvr:hover, .souvia-hvr:focus, .souvia-hvr:active {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
  }

  a:hover {
    text-decoration: unset;
}

/* login */

.login-register-image {

    width: 100%;

}



.img-logo-login-register {

    margin: auto;    

    display: block;

}



.title-login-register {

    color: #2B2B2B; 

    font-weight: 600; 

    font-size: 12px; 

    margin-top:31px !important;

}



.input-auth {

    background: #F7F7F7;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 5px;

}



.input-auth input:focus {

    box-shadow: none;

}



.col-right {

    padding-right: 5%;

}



/* Navigasi */

.navbar-custom {

    background: transparent !important;

}



.no-arrow::after {

    display:none;

}



.container-fluid-navbar .navbar-brand {

    margin-left: 8%;

}



.nav-item.active a{

    font-weight: 600;

    text-decoration: underline;

}



.navbar-brand img {

    max-height: 60px;

}

.navbar-class .menus {

    font-style: normal !important;

    font-weight: 500 !important;

    font-size: 15px !important;

    line-height: 22px !important;

    color: #FFFFFF !important;

}



.navbar-class .btn-primary {

    background: #51B848;

    border: none;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 39.5px;

    padding-top: 10px;

    padding-bottom: 10px;

    padding-left: 20px;

    padding-right: 20px;

}



.navbar-class .btn-contact {

    padding-top: 2px;

    padding-bottom: 2px;

    padding-left: 10px;

    padding-right: 10px;

    font-style: normal;

    font-weight: 700;

    font-size: 12px;

    color: #FFFFFF;

}



.navbar-class .btn-success {

    border: 3px solid #fff;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    border-radius: 20px;

    background: none;

}



.navbar-class .btn-login {

    padding-top: 2px;

    padding-bottom: 2px;

    padding-left: 10px;

    padding-right: 10px;

    font-style: normal;

    font-weight: 700;

    font-size: 15px;

    color: #fff;

}



.package {

    display: block;

}

/* .package:hover {

    display: block !important;

} */



/* header */

.header-home {

    padding: 250px 0 350px 0;

    background-image: url('../images/home-bg.png');

    background-repeat: no-repeat;

    background-size: cover;

}



.header-home h1 {

    font-style: normal;

    font-weight: 400;

    font-size: 73px;

    color: #FFFFFF;

    margin-bottom: 9px;

}



.header-home h1 span {

    font-weight: 700;

}



.header-home p {

    font-style: normal;

    font-weight: 400;

    font-size: 24px;

    color: #FFFFFF;

    margin-bottom: 36px;

}



.header-home .btn-contact-home {

    background: #51B848;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 39.5px;

    padding-top: 13px;

    padding-bottom: 13px;

    padding-left: 38px;

    padding-right: 38px;

    font-style: normal;

    font-weight: 700;

    font-size: 24px;

    color: #FFFFFF;

}



.header-home .btn-ready-home {

    background: #FC6F20;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 39.5px;

    padding-top: 13px;

    padding-bottom: 13px;

    padding-left: 38px;

    padding-right: 38px;

    font-style: normal;

    font-weight: 700;

    font-size: 24px;

    color: #FFFFFF;

}



/* slider */

.product-slider {

    margin-top: -80px;

    margin-bottom: 30px;

}



.product-slider img {

    height: 25%;

    background-size: cover;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    border-radius: 6px;

    background: #D9D9D9;

}



/* product */

.product .desk-stuff{

    background-size: cover;

    height: 279px;

    Width: 238px;

    background: #fff;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

}



.product .desk-stuff .content-desk-stuff{

    position: relative;

    width: 100%;

    height: 100%;

}



.product .desk-stuff .content-desk-stuff .sub-content-desk-stuff{

    float: left;

    position: absolute;

    left: 0px;

    z-index: 1000;

    width: 100%;

    height: 100%;

    padding: 19px;

}



.product .desk-stuff .content-desk-stuff h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 25px;

    color: #000000;

}



.product .desk-stuff .content-desk-stuff .sub-content-desk-stuff .view-desk-stuff{

    bottom: 0 !important; 

    position: absolute;

    padding-bottom: 15px;

}



.product .desk-stuff .content-desk-stuff .sub-content-desk-stuff .view-desk-stuff a{

    font-style: normal;

    font-weight: 500;

    font-size: 18px;

    color: #FC6F20;

}



.product .desk-stuff .content-desk-stuff img {

    background-size: cover;

    width: 100%;

    height: 100%;

}



/* Our Promises and Our Service */

.promises-service .card {

    background: linear-gradient(138.67deg, #FC6F20 -4.86%, #FCA420 109.47%);

    border-radius: 8px;

    padding: 12px 40px 20px 40px;

}



.promises-service .card .card-promises{

    background: linear-gradient(138.67deg, #FC6F20 -4.86%, #FCA420 109.47%);

    border-radius: 8px;

    padding: 12px 40px 20px 40px;

    background: white;

}



.promises-service .card .text-right, .promises-service .card .text-left {

    font-style: normal;

    font-weight: 600;

    font-size: 22px;

    color: #FFFFFF;

}



.promises-service .card .card-promises h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 16px;

    color: #000000;

}



.promises-service .card .card-promises .desc {

    font-style: normal;

    font-weight: 300;

    font-size: 10px;

    color: #000000;

}



.promises-service .content{

    margin-top: 20px !important;

}



.promises-service .content-right{

    margin-top: 15px !important;

}



/* trusted container */

.trusted-container p {

    font-style: normal;

    font-weight: 300;

    font-size: 20px;

    color: #000000;

}



.trusted-container img {

    width: 100%;

}



/* our story */

.story-container p {

    font-style: normal;

    font-weight: 400;

    font-size: 17px;

    color: #000000;

}

.owl-carousel .owl-item img {
    display: block;
    /* width: auto !important; */
}



.story-container .owl-carousel-story .story-one {

    font-style: normal;

    font-weight: 400;

    font-size: 17px;

    text-align: center;

    color: #000000;

    background: #FEE8D0;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

    padding: 15px;

    display: inline-block;

    height: 303px;

}



/* portofolio */

.portofolio-container {

    height: 410px;

    position: relative;

}



.portofolio-container img {

    position: absolute;

    z-index: 100;

    height: 415px;

}



.portofolio-container .color-bg-portofolio {

    height: 410px;

    background-image: url('../images/img-portofolio.jpg');

    background-repeat: no-repeat;

    background-size: cover;

    position: absolute;

    z-index: 1000;

    width: 100% !important;

}



.portofolio-container .link-portofolio {

    position: absolute;

    z-index: 1500;

    text-decoration: none;

    background: #FC6F20;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 14px;

    padding-top: 16px;

    padding-bottom: 16px;

    padding-left: 30px;

    padding-right: 30px;

    font-style: normal;

    font-weight: 600;

    font-size: 40px;

    color: #FFFFFF;

}



/* article */

.article-container .title-article {

    font-style: normal;

    font-weight: 600;

    font-size: 25px;

    color: #000000;

}



.article-container .more-article {

    font-style: normal;

    font-weight: 400;

    font-size: 20px;

    color: #000000;

    text-decoration: none;

}



.article-container .article-container-content {

    border-radius: 6px;

    height: auto;

}



.article-container-content img {

    width: 100%; 

    height: 17.259rem;

    position: absolute;

}



.color-bg {

    height: 17.259rem;

    position: relative;

    z-index: 1000;

    width: 100% !important;

    background: linear-gradient(0.5deg, #000000 -52.36%, rgba(0, 0, 0, 0) 93.55%);

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

}



.article-container .article-container-content .bottom-left {

    position: absolute;

    bottom: 1.875rem;

    left: 1.25rem;

    font-style: normal;

    font-weight: 700;

    font-size: 20px;

    color: #FFFFFF;

    text-decoration: none;

    z-index: 1500;

}



/* footer */

footer {

    padding-top: 60px;

    padding-bottom: 80px;

    background: linear-gradient(101.18deg, #FCA420 -38.93%, #FC6F20 107.01%);

}

footer .footer-title {

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    color: #FFFFFF;

}



.footer-header  {

    font-style: normal;

    font-weight: 700;

    font-size: 18px;

    color: #FFFFFF;

}



.footer-sub-header {

    font-style: normal;

    font-weight: 400;

    font-size: 14px;

    color: #FFFFFF;

}





/* SHOP PAGE */

/* Header */

.header-shop {

    background-image: url('../images/header-shop.png');

    background-repeat: no-repeat;

    height: 240px;

    background-size: auto;

}



.slider-shop-product {

    margin-top: 80px;

    padding-left: 5%;

    padding-right: 5%;

}



/* content - color */

.input-group .input-search {

    background: #EBEBEB;

    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);

    border-radius: 3px;

    border: 0;

}



.input-group .input-search::placeholder {

    font-style: normal;

    font-weight: 500;

    font-size: 10px;

    color: #ADADAD;

    border: 0;

}



.input-group .input-search:focus {

    border: 0;

    outline: none;

}



.input-group .input-group-text {

    background: #EBEBEB;

    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);

    border-radius: 3px;

    border: 0;

}



.container-all-product {

    padding-left: 5%;

    padding-right: 5%;

}



.color-product {

    background: #FFFFFF;

    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

}



.color-product .color-product-variant {

    padding: 30px 20px 30px 20px;

}



.color-product .color-product-variant p {

    font-style: normal;

    font-weight: 700;

    font-size: 12px;

    color: #FC6F20;

}



.btn-bahan {

    background: #FC8020;

    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

    font-style: normal;

    font-weight: 700;

    font-size: 12px;

    color: #FFFFFF;

}



.modal-bahan {

    font-style: normal;

    font-weight: 600;

    font-size: 20px;

    color: #000000;

}



.modal-bahan .title {

    font-style: normal;

    font-weight: 600;

    font-size: 25px;

    color: #FC6F20;

}



/* dropdown product */

.dropdown-product {

    background: #FFFFFF;

    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

}



.dropdown-product .dropdown-product-detail {

    padding: 18px 20px 18px 20px;

}



.dropdown-product .dropdown-product-detail .title {

    font-style: normal;

    font-weight: 700;

    font-size: 12px;

    color: #FC6F20;

}



.dropdown-product .dropdown-product-detail .sub-title {

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    color: #FC6F20;

}



.dropdown-product .dropdown-product-detail .sub-title {

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    color: #333333;

}



.dropdown-product .dropdown-product-detail .container-sub-title {

    background: #FEE8D0;

    padding-top: 10px;

    padding-bottom: 10px;

}



.dropdown-product .dropdown-product-detail hr {

    margin-left: -10px;

    margin-right: -10px;

}



.form-check-label {

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    color: #333333;

}



.card-product-all {

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

    /* float: left; */

    /* margin-bottom: 20px; */

    margin: 10px 0px;

}



.card-product-all .title {

    font-style: normal;

    font-weight: 300;

    font-size: 10px;

    color: #000000;

}



.card-product-all .sub-title {

    font-family: 'Poppins';

    font-style: normal;

    font-weight: 300;

    font-size: 6px;

    color: #000000;

}



.card-product-all .price {

    font-style: normal;

    font-weight: 600;

    font-size: 12px;

    color: #FC6F20;

}



.filter .btn-filter {

    border: 1px solid #FC6F20;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    border-radius: 6px;

}



.filter .btn-filter::after {

    display: none;

}



.filter .btn-filter:focus {

    box-shadow: none !important;

}



.filter .btn-filter span {

    font-style: normal;

    font-weight: 600;

    font-size: 15px;

    color: #FC6F20;

}



.sorting .btn-sorting {

    background: #FC6F20 !important;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

}



.sorting .btn-sorting::after {

    display: none;

}



.sorting .btn-sorting span {

    font-style: normal;

    font-weight: 600;

    font-size: 15px;

    color: #FFFFFF;

}



/* DETAIL PAGE */

/* Product */

.product-detail .sub-title {

    font-style: normal !important;

    font-weight: 700 !important;

    font-size: 24px !important;

}



.product-detail .title {

    font-style: normal !important;

    font-weight: 400 !important;

    font-size: 24px !important;

}



.product-detail .price {

    font-style: normal;

    font-weight: 700;

    font-size: 30px;

    color: #FC6F20;

}



.product-detail .title-footer {

    font-style: normal;

    font-weight: 400;

    font-size: 16px;

}



.product-detail .sub-title-footer {

    font-style: normal;

    font-weight: 600;

    font-size: 16px;

}



.product-detail .product-image {

    background: #D2D2D2;

    border-radius: 6px;

    height: auto;

    vertical-align: middle;

    padding: 0px;

}



.product-detail .product-image .xzoom-container img{

    max-height: 302px;

}



.image-in-top {

    position: relative;
    z-index: 5;
    top: auto;

}



.product-detail .product-image .title-image-in-top img {

    position: absolute;

    z-index: 500;

}



.product-detail .product-image .title-image-in-top {

    position: absolute;

    top: 15px;

    left: 50%;

    z-index: 1000;

    font-style: normal;

    font-weight: 700;

    font-size: 18px;

    color: #FFFFFF;

    transform: translate(-50%, -50%);

}



.product-detail .btn-chart {

    background: #FC6F20;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 7px;

    border: 0;

    padding: 12px;

    font-style: normal;

    font-weight: 700;

    font-size: 14px;

    line-height: 21px;

}



.product-detail .btn-contact {

    background: #51B848;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 7px;

    border: 0;

    padding: 12px;

    font-style: normal;

    font-weight: 700;

    font-size: 14px;

    line-height: 21px;

}



/* desc */

.detail-desc {

    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);

    border-radius: 8px;

}



.detail-desc h1, .related-product h1 {

    font-style: normal;

    font-weight: 700;

    font-size: 16px;

}



.detail-desc p {

    font-style: normal;

    font-weight: 400;

    font-size: 11px;

}



/* xzoom */

.xzoom-container {

    display: block;

}

  

.xzoom-container .xzoom {

    width: 100% !important;

    -webkit-box-shadow: none;

            box-shadow: none;

    margin-bottom: 0px;
    margin-top: -58px;

}

  

.xzoom-container .xactive {

    border: 4px solid #1ABC9C;

    -webkit-box-shadow: 0px 0px 34px 12px rgba(0, 0, 0, 0.75);

    box-shadow: 0px 0px 34px 12px rgba(0, 0, 0, 0.75);

}



.modal-chart h5 {

    font-style: normal;

    font-weight: 600;

    font-size: 20px;

    color: #000000;

}



.modal-chart .btn-primary {

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 10px;

    background: #FC6F20;

    border: 0;

    font-style: normal;

    font-weight: 700;

    font-size: 16px;
    color: #FFFFFF;

    padding: 10px;

}



.modal-chart .img-modal {

    width: 100%;

    min-height: 100%;

}



.modal-chart .modal-body-title {

    font-style: normal;

    font-weight: 700;

    font-size: 24px;

    color: #000000;

}



.modal-chart .modal-body-sub-title {

    font-style: normal;

    font-weight: 500;

    font-size: 19px;

    color: #000000;

}



.modal-chart .modal-body-container {

    background: #E9E9E9;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 5px;

}



.modal-content {

    border-radius: 19px !important;

    padding-top: 10px;

    padding-bottom: 10px;

}



.list-user-contact {

    background: #4ECC5D;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 10px;

    padding: 15px 15px 15px 15px;

    margin-left: 10%;

}



.list-user-contact:hover {

    cursor: pointer;

}



.list-user-contact .dot {

    display: block;

    margin-left: auto;

}



.list-user-contact .user {

    font-style: normal;

    font-weight: 700;

    font-size: 20px;

    color: #FFFFFF;

}



.list-user-contact .click {

    font-style: normal;

    font-weight: 300;

    font-size: 14px;

    color: #FFFFFF;

}



.user-contact-image {

    position: absolute;

    z-index: 10000;

}



.list-user-contact {

    z-index: 100;

    width: 85%;

}



.user-contact-container {

    height: 125px;

    margin-left: 1%;

}



.modal-form input {

    background: #EFEFEF;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 5px;

    border: none;

    font-style: normal;

    font-weight: 400;

    font-size: 17px;

    color: #A7A7A7;

    padding: 30px;

}



.modal-form .btn-success {

    background: #51B848;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 5px;

    font-style: normal;

    font-weight: 700;

    font-size: 20px;

    color: #FFFFFF;

}



/* CART PAGE */

.cart-container .form-check-label {

    font-style: normal;

    font-weight: 500;

    font-size: 18px;

    color: #000000;

}



.cart-container .form-check-input {

    width: 23px;

    height: 23px;

}



.cart-container .cart-list img {

    max-width: 100%;

}



.cart-container .cart-list .title{

    font-style: normal;

    font-weight: 300;

    font-size: 18px;

    color: #000000;

}



.cart-container .cart-list .price{

    font-style: normal;

    font-weight: 600;

    font-size: 30px;

    color: #FC6F20;

}



.cart-container .cart-list .card-list-container{

    background: #FFFFFF;

    box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

}



.cart-container .cart-list .code {

    background: #FFFFFF;

    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);

    border-radius: 8px;

    height: 52px;

}



.cart-container .cart-list .code::placeholder {

    font-style: normal;

    font-weight: 300;

    font-size: 15px;

    color: #8A8A8A;

}



.cart-container .cart-list .card-list-container-right{

    background: #FFFFFF;

    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);

    border-radius: 8px;

}



.cart-container .cart-list .card-list-container-right p{

    font-style: normal;

    font-weight: 300;

    font-size: 12px;

    color: #000000;

}



.cart-container .cart-list .card-list-container-right h2{

    font-style: normal;

    font-weight: 700;

    font-size: 22px;

    color: #FC6F20;

}



.cart-container .cart-list .card-list-container-right .btn-primary{

    background: #FC6F20;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 7px;

    height: 46px;

    font-style: normal;

    font-weight: 700;

    font-size: 14px;

    color: #FFFFFF;

}



.cart-container .cart-list .card-list-container-right .btn-info{

    border: 2px solid #FCA420 !important;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    border-radius: 7px;

    background: #FFFFFF;
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.25);

    height: 46px;

    font-style: normal;

    font-weight: 700;

    font-size: 14px;

    color: #FCA420;

}



/* Testimonial */

.header-jumbotron-testimonial {

    height: 223px;

    background-image: url('../images/katalog.png');

    background-repeat: no-repeat;

    background-size: cover;

    width: 100%;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    border-radius: 8px;

}



.header-jumbotron-testimonial h1 {

    font-style: normal;

    font-weight: 600;

    font-size: 55px;

    color: #FCA420;

    filter: drop-shadow(3px 3px 1px black);

}



.header-jumbotron-testimonial p {

    font-style: normal;

    font-weight: 400;

    font-size: 14px;

    color: #FFFFFF;

    width: 70%;
    
    margin-left: auto;
    
    margin-right: auto;

}



.video-testimonial-container h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 40px;

    color: #000000;

}



.video-testimonial-container h5 {

    font-style: italic;

    font-weight: 400;

    font-size: 18px;

    color: #000000;

}



.video-testimonial-container p {

    font-style: normal;

    font-weight: 500;

    font-size: 18px;

    color: #000000;

}



.container-card-testimonial {

    background: linear-gradient(117.55deg, #FCA420 1.93%, #FC6F20 98.12%);

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    padding: 23px 15% 10px 15%;

}



.container-card-testimonial h5 {

    font-style: normal;

    font-weight: 600;

    font-size: 17px;

    color: #000000;

}



.container-card-testimonial p {

    font-style: normal;

    font-weight: 400;

    font-size: 12px;   

    color: #000000;

}



.container-card-testimonial .card {

    background: #FEE8D0;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

}



.star-card-testimonial {

    padding: 23px 15% 10px 15%;

}



.container-client-gallery {

    padding: 23px 15% 10px 15%;

}



.container-client-gallery p {

    font-style: normal;

    font-weight: 600;

    font-size: 15px;

    color: #000000;

}



.owl-client .owl-controls .owl-page {

    display: inline-block;

}

.owl-client .owl-controls .owl-page span {

    background: none repeat scroll 0 0 #869791;

    border-radius: 20px;

    display: block;

    height: 12px;

    margin: 5px 7px;

    opacity: 0.5;

    width: 12px;

}



.testimonial-client-gallery-container {

    position: relative;

}



.testimonial-client-gallery-container .client-gallery-container{

    position: absolute;

    bottom: 0px !important;

    text-align: center;

    background: #FCA420;

}



/* Portofolio */

.souvia-portofolio-container {

    background: #EDEDED;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

    padding: 18px 32px 18px 32px;

}



.btn-portofolio {

    background: #FC6F20;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

    font-style: normal;

    font-weight: 600;

    font-size: 20px;

    color: #FFFFFF;

} 



.card-portofolio .card {

    box-shadow: 0px -3px 4px 2px rgba(0, 0, 0, 0.1);

    border-radius: 5px;

}



.card-portofolio .card-portofolio-content {

    padding-left: 5%;

    padding-right: 5%;

}



.card-portofolio .card .title {

    font-style: normal;

    font-weight: 500;

    font-size: 24px;

    color: #000000;

}



.card-portofolio .card a {

    font-style: normal;

    font-weight: 600;

    font-size: 17px;

    color: #FC6F20;

}



/* Blog */

/* new entries */

.blog-container {

    padding-left: 5%;

    padding-right: 5%;

}



.blog-container .blog-card-image {

    position: relative;

}



.blog-container .blog-card-image img {

    width: 100%;

}



.blog-container .blog-card-bg {

  height: 100%;

  width: 100%;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 10000;

  background: linear-gradient(1.26deg, #000000 -51.06%, rgba(0, 0, 0, 0) 91.39%);

  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

  border-radius: 6px;

}



.blog-container img {

    height: 310px;

}



.blog-container .blog-card-bg  {

    text-overflow: ellipsis;

}



.blog-container .blog-card-bg p {

    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    color: #FFFFFF;
    padding-top: 38%;
    padding-left: 3%;
    padding-right: 3%;
    text-overflow: ellipsis;

}



/* older entries */

.blog-container-older {

    padding-left: 5%;

    padding-right: 5%;

}



.blog-container-older .blog-card-image {

    position: relative;

}



.blog-container-older .blog-card-bg {

  height: 100%;

  width: 490px;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 10000;

  background: linear-gradient(1.26deg, #000000 -51.06%, rgba(0, 0, 0, 0) 91.39%);

  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

  border-radius: 6px;

}



.blog-container-older img {

    height: 210px;

}



.blog-container-older .blog-card-bg p {

    font-style: normal;

    font-weight: 700;

    font-size: 15px;

    color: #FFFFFF;

    padding-top: 25%;

    padding-left: 3%;

    padding-right: 3%;

    text-overflow: ellipsis !important;

}



/* Blog Detail */

.container-blog-detail .header h1 {

    font-style: normal;

    font-weight: 600;

    font-size: 30px;

    color: #181818;

}



.container-blog-detail .header p {

    font-style: normal;

    font-weight: 300;

    font-size: 15px;

    color: #000000;

}



.container-blog-detail .content h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 25px;

    color: #181818;

}



.container-blog-detail .content p {

    font-style: normal;

    font-weight: 400;

    font-size: 17px;

    color: #000000;

}



/* Kategori */

.category-container .header h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 35px;

    color: #000000;

}



.category-container .header p {

    font-style: normal;

    font-weight: 400;

    font-size: 19px;

    color: #000000;

}



.category-container .header .card {

    background: #FEE8D0;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

}



.category-container .header .card .card-body{

    padding: 20px 0 0 24px !important;

}



.category-container .header .card p {

    font-style: normal;

    font-weight: 600;

    font-size: 25px;

    color: #000000;

}



.category-container .header .card img {

    width: 100%;

}



.category-container .content .card p {

    font-style: normal;

    font-weight: 600;

    font-size: 20px;

    color: #FFFFFF;

}



.category-container .content .card .card-body {

    position: relative;

}



.category-container .content .card .card-body p {

  position: absolute;

  top: 45%;

  left: 35%;

  z-index: 10000;

}



.category-container .content .card .card-body img {

    background: #D9D9D9;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

    width: 100%;

}



.category-container .best-seller .card {

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

}



.category-container .best-seller .card .card-body h3 {

    font-style: normal;

    font-weight: 300;

    font-size: 13px;

    color: #000000;

}



.category-container .best-seller .card .card-body p {

    font-style: normal;

    font-weight: 600;

    font-size: 12px;

    color: #FC6F20;

}



/* Profile */

.container-profile .img-user {

    background: #D9D9D9;

    border-radius: 12px;

    width: 203px;

}



.container-profile .btn-edit-profile {

    width: 203px;

    background: linear-gradient(248.21deg, #FC6F20 -10.71%, #FFA629 98.31%);

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 3px;

    font-style: normal;

    font-weight: 600;

    font-size: 12px;

    color: #FFFFFF;

}



.container-profile .pencil-profile-container {

    background: linear-gradient(248.21deg, #FC6F20 -10.71%, #FFA629 98.31%);

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 3px;

    width: 19px;

    height: 19px;

    position: relative;

}



.container-profile .pencil-profile {

    width: 8.25px;

    height: 8.25px;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    margin: auto;

}



.container-profile .self-profile {

    background: #F2F2F2;

    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.25);

    border-radius: 7px;

    padding: 15px 30px;

}



.container-profile .self-profile p {

    font-style: normal;

    font-weight: 700;

    font-size: 12px;

    color: #FC6F20;

}



.container-profile .self-profile .left {

    font-style: normal;

    font-weight: 400;

    font-size: 14px;

    color: #000000;

}



.container-profile .self-profile .right {

    font-style: normal;

    font-weight: 600;

    font-size: 14px;

    color: #000000;

}



.container-profile .address-container {

    background: #F2F2F2;

    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.25);

    border-radius: 7px;

    padding: 15px 30px;

}



.container-profile .address-container p {

    font-style: normal;

    font-weight: 700;

    font-size: 12px;

    color: #FC6F20;

}



.container-profile .address-container .btn-primary {

    background: linear-gradient(248.21deg, #FC6F20 -10.71%, #FFA629 98.31%);

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 3px;

    font-style: normal;

    font-weight: 600;

    font-size: 9px;

    color: #FFFFFF;

}



.container-profile .address-container .address {

    background: #FFE8DB;

    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.25);

    border-radius: 7px;

    padding: 9px 19px;

}



.container-profile .address-container .address h2 {

    font-style: normal;

    font-weight: 700;

    font-size: 10px;

    color: #848484;

}



.container-profile .address-container .address h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 12px;

    color: #FC6F20;

}



.container-profile .address-container .address h4 {

    font-style: normal;

    font-weight: 500;

    font-size: 10px;

    color: #000;

}



.container-profile .address-container .address h5 {

    font-style: normal;

    font-weight: 400;

    font-size: 12px;

    color: #000;

}





.container-profile .address-container .office {

    background: #FFFFFF;

    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.25);

    border-radius: 7px;

    padding: 9px 19px;

}



.container-profile .address-container .office h2 {

    font-style: normal;

    font-weight: 700;

    font-size: 10px;

    color: #848484;

}



.container-profile .address-container .office h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 12px;

    color: #FC6F20;

}



.container-profile .address-container .office h4 {

    font-style: normal;

    font-weight: 600;

    font-size: 14px;

    color: #000000;

}



.container-profile .address-container .office h5 {

    font-style: normal;

    font-weight: 400;

    font-size: 12px;

    color: #000;

}



.container-profile .address-container .office .btn-info {

    background: linear-gradient(248.21deg, #FC6F20 -10.71%, #FFA629 98.31%);

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 3px;

    padding: 6px 24px;

    font-style: normal;

    font-weight: 600;

    font-size: 9px;

    color: #FFFFFF;

}



/* Promo */

.container-promo {

    padding-left: 8%;

    padding-right: 8%;

}



.container-promo .img-header-promo {

    height: 284px;

    background-size: cover;

    background: #D9D9D9;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

}



.container-promo .card {

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

}



.container-promo h1 {

    font-style: normal;

    font-weight: 600;

    font-size: 35px;

    color: #000000;

}



.container-promo img {

    width: 100%;

}



.container-promo h2 {

    font-style: normal;

    font-weight: 600;

    font-size: 25px;

    color: #000000;

}



.container-promo p {

    font-style: normal;

    font-weight: 300;

    font-size: 17px;

    color: #000000;

}



.container-promo h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 25px;

    color: #000000;

}



.container-promo .card-title {

    font-style: normal;

    font-weight: 300;

    font-size: 13px;

    color: #000000;

}



.container-promo .card-text {

    font-style: normal;

    font-weight: 300;

    font-size: 13px;

    color: #000000;

}



.container-promo .price {

    font-style: normal;

    font-weight: 600;

    font-size: 12px;

    color: #FC6F20;

}



/* purpose catalog */

.header-jumbotron-purpose {

    height: 223px;

    width: 100%;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    border-radius: 8px;

    z-index: 100;

}



.header-jumbotron-purpose img {

    height: 223px;

    width: 100%;

    background-size: cover;

    z-index: 10;

    position: absolute;

}



.header-jumbotron-purpose h1 {

    font-style: normal;

    font-weight: 600;

    font-size: 55px;

    color: #FCA420;

    filter: drop-shadow(3px 3px 1px black);

}



.header-jumbotron-purpose p {

    font-style: normal;

    font-weight: 400;

    font-size: 14px;

    color: #FFFFFF;

}



/* Promise */

.header-jumbotron-promise {

    height: 223px;

    background-image: url('../images/katalog.png');

    background-repeat: no-repeat;

    background-size: cover;

    width: 100%;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    border-radius: 8px;

}



.header-jumbotron-promise h1 {

    font-style: normal;

    font-weight: 600;

    font-size: 55px;

    color: #FCA420;

}



.header-jumbotron-promise p {

    font-style: normal;

    font-weight: 400;

    font-size: 14px;

    color: #FFFFFF;

}



.header-title h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 22px;

    color: #000000;

}



.header-title p {

    font-style: normal;

    font-weight: 400;

    font-size: 18px;

    color: #000000;

}



.card-promise .card {

    background: linear-gradient(180deg, #FFA629 0%, #FC6F20 100%);

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 13px;

    Width: 305px;

    Height: 251px;

    padding: 20px 23px 20px 23px;

}



.card-promise .card img {

    Width: 105.17px;

    Height: 104.65px;

}



.card-promise .card h4 {

    font-style: normal;

    font-weight: 600;

    font-size: 20px;

    color: #FFFFFF;

}



.card-promise .card p {

    font-style: normal;

    font-weight: 300;

    font-size: 13px;

    color: #FFFFFF;

}



.our-services-container {

    background: linear-gradient(138.67deg, #FC6F20 -4.86%, #FCA420 109.47%);

    border-radius: 8px;

    padding-top: 47px;

    padding-bottom: 100px;

}



.our-services-container h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 22px;

    color: #FFFFFF;

}

.our-services-container .card {

    background: #FFFFFF;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 13px;

    Width: 305px;

    Height: 251px;

    padding: 20px 23px 20px 23px;

}



.our-services-container .card h4 {

    font-style: normal;

    font-weight: 600;

    font-size: 20px;

    color: #000000;

}



.our-services-container .card p {

    font-style: normal;

    font-weight: 300;

    font-size: 13px;

    color: #000000;

}



.container-fast-respond h4 {

    font-style: normal;

    font-weight: 600;

    font-size: 22px;

    color: #000000;

}



.container-fast-respond p {

    font-style: normal;

    font-weight: 400;

    font-size: 14px;

    color: #000000;

}



.bg-form {

    background: #4ECC5D;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 10px;

    padding: 10px 10px 10px 10px;

}



.bg-form h5 {

    font-style: normal;

    font-weight: 700;

    font-size: 20px;

    color: #FFFFFF;

}



.bg-form p {

    font-style: normal;

    font-weight: 300;

    font-size: 14px;

    color: #FFFFFF

}



.container-fast-respond .img-user {

   position: absolute;

   z-index: 10000;

}



.bg-form .user-online {

    margin-left: 20%;

}



/* Paket */

.header-jumbotron-paket {

    height: 223px;

    background-image: url('../images/katalog.png');

    background-repeat: no-repeat;

    background-size: cover;

    width: 100%;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    border-radius: 8px;

}



.header-jumbotron-paket h1 {

    font-style: normal;

    font-weight: 600;

    font-size: 55px;

    color: #FCA420;

    filter: drop-shadow(3px 3px 1px black);

}



.header-jumbotron-paket p {

    font-style: normal;

    font-weight: 400;

    font-size: 14px;

    color: #FFFFFF;

}



.container-content-paket h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 25px;

    color: #000000;

}



.container-content-paket p {

    font-style: normal;

    font-weight: 300;

    font-size: 17px;

    color: #000000;

}



.container-content-paket .card {

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 6px;

}



.container-content-paket .card h5 {

    font-style: normal;

    font-weight: 300;

    font-size: 13px;

    color: #000000;

}



.container-content-paket .card p {

    font-style: normal;

    font-weight: 600;

    font-size: 12px;

    color: #FC6F20;

}



/* Katalog Download */

.header-jumbotron-catalog-download {

    height: 223px;

    background-image: url('../images/katalog.png');

    background-repeat: no-repeat;

    background-size: cover;

    width: 100%;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    border-radius: 8px;

}



.header-jumbotron-catalog-download h1 {

    font-style: normal;

    font-weight: 600;

    font-size: 55px;

    color: #FCA420;

    filter: drop-shadow(3px 3px 1px black);

}



.container-catalog-download h3 {

    font-style: normal;

    font-weight: 400;

    font-size: 14px;

    color: #000000;

}



.container-catalog-download .input-catalog {

    background: #EFEFEF;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 5px;

    height: 63px;

    font-style: normal;

    font-weight: 400;

    font-size: 17px;

    color: #A7A7A7;

}



.container-catalog-download .btn {

    background: linear-gradient(180deg, #FFA629 0%, #FC6F20 100%);

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 5px;

    height: 63px;

    font-style: normal;

    font-weight: 700;

    font-size: 20px;

    color: #FFFFFF;

}



.container-catalog-download select {

    -moz-appearance:none;

    -webkit-appearance:none;

    appearance:none;

    background: #EFEFEF;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 5px;

    height: 63px;

    font-style: normal;

    font-weight: 400;

    font-size: 17px;

    color: #A7A7A7;

    background-image: url('../images/select.png');

    background-repeat: no-repeat;

    background-position: calc(100% - 0.75rem) center !important;

}



.container-catalog-download select:focus {

    -moz-appearance:none;

    -webkit-appearance:none;

    appearance:none;

    background: #EFEFEF;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 5px;

    height: 63px;

    font-style: normal;

    font-weight: 400;

    font-size: 17px;

    color: #A7A7A7;

    background-image: url('../images/select.png');

    background-repeat: no-repeat;

    background-position: calc(100% - 0.75rem) center !important;

}



/* About Us */

.header-jumbotron-about-us {

    height: 223px;

    background-image: url('../images/katalog.png');

    background-repeat: no-repeat;

    background-size: cover;

    width: 100%;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    border-radius: 8px;

}



.header-jumbotron-about-us h1 {

    font-style: normal;

    font-weight: 600;

    font-size: 55px;

    color: #FCA420;

    filter: drop-shadow(3px 3px 1px black);

}



.header-jumbotron-about-us p {

    font-style: normal;

    font-weight: 400;

    font-size: 14px;

    color: #FFFFFF;

}



.title-header-about-us {

    font-style: normal;

    font-weight: 600;

    font-size: 28px;

    color: #B7B7B7;

}



.container-about-us-content .firts-content h4 {

    font-style: normal;

    font-weight: 600;

    font-size: 17px;

    color: #000000;

}



.container-about-us-content .firts-content p {

    font-style: normal;

    font-weight: 400;

    font-size: 16px;

    color: #000000;

}



.container-about-us-content .first-content span {

    font-style: normal;

    font-weight: 400;

    font-size: 16px;

    color: #FC6F20 !important;

}



.container-about-us-content .title-second-header {

    font-style: normal;

    font-weight: 600;

    font-size: 32px;

    color: #000000;

}



.container-about-us-content .second-content .sovia {

    font-style: normal;

    font-weight: 600;

    font-size: 17px;

    color: #FC6F20;

}



.container-about-us-content .second-content .sovenir {

    font-style: normal;

    font-weight: 600;

    font-size: 17px;

    color: #000000;

}



.container-about-us-content .third-content {

    background: linear-gradient(180deg, #FFA629 0%, #FC6F20 100%);

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 13px;

}



.container-about-us-content .third-content h3 {

    font-style: normal;

    font-weight: 700;

    font-size: 32px;

    color: #FFFFFF;

}



.container-about-us-content .third-content p {

    font-style: normal;

    font-weight: 400;

    font-size: 17px;

    color: #FFFFFF;

}



.fourth-content .left {

    font-style: normal;

    font-weight: 600;

    font-size: 32px;

    color: #A6A6A6;

}



.fourth-content h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 20px;

    color: #FC6F20;

}



.fourth-content .sovia {

    font-style: normal;

    font-weight: 600;

    font-size: 17px;

    color: #FC6F20;

}



.fourth-content .sovenir {

    font-style: normal;

    font-weight: 600;

    font-size: 17px;

    color: #000000;

}



.five-content h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 25px;

    color: #FC6F20;

}



.five-content span {

    font-style: normal;

    font-weight: 600;

    font-size: 17px;

    color: #FC6F20;

}



.five-content p {

    font-style: normal;

    font-weight: 400;

    font-size: 17px;

    color: #000000;

}



.title-header-about-us-trust {

    font-style: normal;

    font-weight: 600;

    font-size: 32px;

    color: #000000;

}



.title-header-about-us-trust span {

    font-style: normal;

    font-weight: 600;

    font-size: 32px;

    color: #FC6F20;

}



.six-content .card {

    background: linear-gradient(180deg, #FFA629 0%, #FC6F20 100%);

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 13px;

}



.six-content .card .card-title {

    font-style: normal;

    font-weight: 600;

    font-size: 20px;

    color: #FFFFFF;

}



.six-content .card p{

    font-style: normal;

    font-weight: 300;

    font-size: 11px;

    line-height: 16px;

    text-align: center;

    color: #FFFFFF;

}



.seven-content h3 {

    font-style: normal;

    font-weight: 600;

    font-size: 25px;

    color: #FC6F20;

}



.seven-content span {

    font-style: normal;

    font-weight: 600;

    font-size: 17px;

    color: #FC6F20;

}



.seven-content p {

    font-style: normal;

    font-weight: 400;

    font-size: 17px;

    color: #000000;

}



.seven-content h2 {

    font-style: normal;

    font-weight: 700;

    font-size: 60px;

    color: #FC6F20;

}



.seven-content .foot {

    font-style: normal;

    font-weight: 300;

    font-size: 15px;   

    color: #000000;

}



.title-header-eight {

    font-style: normal;

    font-weight: 600;

    font-size: 20px;

    color: #FC6F20;

}



.eight-content h4 {

    font-style: normal;

    font-weight: 500;

    font-size: 17px;

    text-align: center;  

    color: #000000;

}



.eight-content p {

    font-style: normal;

    font-weight: 400;

    font-size: 16px;

    text-align: center;  

    color: #000000;

}



.nine-content .card {

    background: #F3F3F3;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 13px;

}





/* CAREER */

/* Katalog Download */

.header-jumbotron-career {

    height: 223px;

    background-image: url('../images/katalog.png');

    background-repeat: no-repeat;

    background-size: cover;

    width: 100%;

    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));

    border-radius: 8px;

}



.header-jumbotron-career h1 {

    font-style: normal;

    font-weight: 600;

    font-size: 55px;

    color: #FCA420;

    filter: drop-shadow(3px 3px 1px black);

}



.cari-profesi-container .card {

    background: #FFFFFF;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 5px;

    border: none;

    margin-top: -30px;

}



.cari-profesi-container input {

    background: #EBEBEB;

    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);

    border-radius: 3px;

    font-style: normal;

    font-weight: 500;

    font-size: 10px;

    color: #ADADAD;

    height: 38px;

}



.cari-profesi-container .select-profesi {

    background: #EFEFEF;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 5px;

    height: 38px;

    font-style: normal;

    font-weight: 500;

    font-size: 10px;

    color: #ADADAD;

}



.cari-profesi-container .btn-primary {

    background: #FC6F20;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 7px;

    height: 40px;

    font-style: normal;

    font-weight: 700;

    font-size: 12px;

    color: #FFFFFF;

}



.cari-profesi-container .btn-success {

    background: #FFFFFF;

    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    border-radius: 5px;

    border: 1px solid #FC6F20;

    height: 40px;

    font-style: normal;

    font-weight: 700;

    font-size: 12px;

    color: #FC6F20;

}





@media (min-width: 1401px) { 

    /* Header */

    .header-shop {

        background-image: url('../images/navbar-lg.png');

        background-repeat: no-repeat;

        height: 240px;

        background-size: auto;

    }



    .btn-mobile-older-entries {

        display: none;

    }



    .link-blog-mobile {

        display: none;

    }



    .navbar-mobile-blog-detail {

        display: none;

    }

}


@media (min-width: 1080px) { 
    .purpose-mobile {

        display: none !important;

    }
    .story-mobile {
        display: none !important;
    }
}

@media (min-width: 1212.1px) { 

    .navbar-desktop {

        visibility: visibility !important;

    }

    .purpose-mobile {

        display: none !important;

    }


    .navbar-mobile {

        display: none;

    }



    .sidebar {

        display: none;

    }



    .header-home-desktop {        

        visibility: visibility !important;

    }



    .header-home-mobile { 

        display: none !important;

    }



    .story-mobile {

        display: none !important;

    }



    .article-mobile {

        display: none !important;

    }



    .footer-mobile {

        display: none !important;

    }



    .start-testimonial-mobile {

        display: none;

    }



    .video-mobile {

        display: none;

    }



    .navbar-mobile-testimonial {

        display: none;

    }

    /* HALAMAN PAKET */

    .header-paket-dekstop {

        display: visibility;

    }



    .navbar-mobile-paket {

        display: none;

    }


    .link-paket-mobile {

        display: none;

    }



    .navbar-mobile-paket-detail {

        display: none;

    }

    /* HALAMAN CATALOG */

    .header-catalog-dekstop {

        display: visibility;

    }



    .navbar-mobile-catalog {

        display: none;

    }


    .link-catalog-mobile {

        display: none;

    }



    .navbar-mobile-catalog-detail {

        display: none;

    }

    /* HALAMAN Career */

    .header-career-dekstop {

        display: visibility;

    }



    .navbar-mobile-career {

        display: none;

    }


    .link-career-mobile {

        display: none;

    }



    .navbar-mobile-career-detail {

        display: none;

    }

    /* HALAMAN ABOUT */

    .header-about-dekstop {

        display: visibility;

    }



    .navbar-mobile-about {

        display: none;

    }



    .btn-mobile-older-entries {

        display: none;

    }



    .link-about-mobile {

        display: none;

    }



    .navbar-mobile-about-detail {

        display: none;

    }

    /* HALAMAN BLOG */

    .header-blog-dekstop {

        display: visibility;

    }



    .navbar-mobile-blog {

        display: none;

    }



    .btn-mobile-older-entries {

        display: none;

    }



    .link-blog-mobile {

        display: none;

    }



    .navbar-mobile-blog-detail {

        display: none;

    }



    .header-portofolio-dekstop {

        visibility: visible;

    }



    .navbar-mobile-portofolio {

        display: none;

    }



    .header-jumbotron-purpose {

        visibility: visible;

    }



    .header-jumbotron-purpose-mobile {

        display: none;

    }



    .detail-product-desktop {

        visibility: visible;

    }



    .detail-product-mobile {

        display: none;

    }



    .detail-product-desktop-page {

        visibility: visible;

    }



    .detail-product-mobile-page {

        display: none;

    }

}



@media (min-width: 992.1px) and (max-width: 1212px) { 

    .navbar-desktop {

        display: none !important;

    }



    .header-home-desktop {

        display: none !important;

    }



    .header-home-mobile { 

        visibility: visibility !important;

    }



    .navbar-mobile {

        display: visibility;

        background-image: url('../images/mobile/bg.png');

        background-repeat: no-repeat;

        height: 323px;

        background-size: cover;

    }



    .navbar-mobile .img-logo {

        border-radius: 8px 0px 0px 8px;

    }



    /*  sidebar */

    .sidebar {

        height: 100%;

        width: 0;

        position: fixed;

        z-index: 1000000000000;

        top: 0;

        left: 0;

        background: #FFFFFF;

        box-shadow: 5px 1px 10px rgba(0, 0, 0, 0.25);

        overflow-x: hidden;

        transition: 0.5s;

    }

      

    .sidebar a {

        padding: 8px 8px 8px 32px;

        text-decoration: none;

        font-size: 25px;

        color: #818181;

        display: block;

        transition: 0.3s;

    }

      

    .sidebar a:hover {

        color: #f1f1f1;

    }

      

    .sidebar .closebtn {

        position: absolute;

        top: 0;

        right: 25px;

        font-size: 36px;

        margin-left: 50px;

    }



    .sidebar ul li .nav-link {

        font-style: normal;

        font-weight: 400;

        font-size: 12px;

        color: #000000;

    }



    .sidebar ul li .dropdown-menu {

        background: #FEE8D0;

        border: none;

        right: 0; 

        left: auto;

    }



    .sidebar ul li .dropdown-item {

        font-style: normal;

        font-weight: 400;

        font-size: 12px;

        color: #000000;

    }

      

    .openbtn {

        font-size: 20px;

        cursor: pointer;

        background-color: #111;

        color: white;

        border: none;

    }

      

    .openbtn:hover {

        background-color: #444;

    }

      

    #main {

        transition: margin-left .5s;

        padding: 16px;

    }



    .header-home-mobile {

        background-image: url('../images/mobile/header-mobile.png');

        background-repeat: no-repeat;

        background-size: cover;

        height: 184px;

        border-radius: 13px;

        margin-top: -230px;

        min-height: 184px !important;

    }



    .bg-header-home-mobile {

        background: linear-gradient(75.16deg, rgba(0, 0, 0, 0.6) 11.79%, rgba(252, 111, 32, 0.6) 99.03%);

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        border-radius: 13px;

        height: 184px;

    }



    .header-home-mobile h1 {

        font-style: normal;

        font-weight: 600;

        font-size: 20px;

        color: #FFFFFF;

    }



    .header-home-mobile p {

        font-style: normal;

        font-weight: 400;

        font-size: 12px;

        color: #FFFFFF;

    }



    .header-home-mobile .btn-contact {

        background: #51B848;

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        border-radius: 39.5px;

        font-style: normal;

        font-weight: 700;

        font-size: 7px;

        color: #FFFFFF;

    }



    .header-home-mobile .btn-ready {

        background: #FC6F20;

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        border-radius: 39.5px;

        font-style: normal;

        font-weight: 700;

        font-size: 7px;

        color: #FFFFFF;

    }



    .product-slider {

        margin-top: 5px;

    }



    .start-testimonial-mobile {

        display: none;

    }



    .video-mobile {

        display: none;

    }



    .navbar-mobile-testimonial {

        display: visibility;

        background-image: url('../images/mobile/testimonial-project.jpg');

        background-repeat: no-repeat;

        height: 323px;

        background-size: cover;

        opacity: 0.6;

    }



    .navbar-mobile-testimonial h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        color: #FCA420;

        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    }



    .navbar-mobile-testimonial p {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        color: #FFFFFF;

        line-height: 15px;

    }



    .testimonial-header-dekstop {

        display: none;

    }



    .header-shop {

        display: none;

    }



    .dekstop-promise {

        display: none;

    }



    /* HALAMAN BLOG */

    .header-blog-dekstop {

        display: none;

    }



    .navbar-mobile-blog {

        display: visibility;

        background-image: url('../images/mobile/blog-header.jpg');

        background-repeat: no-repeat;

        height: 323px;

        background-size: cover;

    }



    .navbar-mobile-blog h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 37px;

        color: #FCA420;

    }



    .navbar-mobile-blog p {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        line-height: 15px;

        text-align: center;

        color: #FFFFFF;

    }



    .blog-card-bg {

        margin-left: 0;

        width: 100% !important;

    }



    .btn-mobile-older-entries {

        display: none;

    }



    .link-blog-mobile {

        display: none;

    }



    .navbar-mobile-blog-detail {

        display: visibility;

        background-image: url('../images/mobile/blog-header-detail.png');

        background-repeat: no-repeat;

        height: 167px;

        background-size: cover;

    }



    .navbar-mobile-blog-detail p {

        font-style: normal;

        font-weight: 600;

        font-size: 20px;

        color: #FFFFFF;

    }



    .header-portofolio-dekstop {

        display: none;

    }



    .navbar-mobile-portofolio {

        display: visibility;

        background-image: url('../images/mobile/portofolio-header.jpg');

        background-repeat: no-repeat;

        height: 290px;

        background-size: cover;

    }



    .navbar-mobile-portofolio h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 37px;

        color: #FCA420;

    }



    .navbar-mobile-portofolio p {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        line-height: 15px;

        text-align: center;

        color: #FFFFFF;

    }



    .header-jumbotron-purpose {

        display: none;

    }



    .header-jumbotron-purpose-mobile h1 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 42px;

        color: #FCA420;

        filter: drop-shadow(3px 3px 1px black);

    }



    .header-jumbotron-purpose-mobile p {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        color: #FFFFFF;

        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    }



    .detail-product-mobile-page {

        display: none;

    }

}



@media (min-width: 576px) and (max-width: 992px) { 

    .navbar-desktop {

        display: none !important;

    }



    .header-home-desktop {

        display: none !important;

    }



    .purpose-mobile {

        display: none !important;

    }



    .category-carousel-mobile {

        display: none; 

    }



    .story-mobile {

        display: none; 

    }



    .article-mobile {

        display: none !important;

    } 



    .footer-mobile {

        display: none !important;

    }



    .navbar-mobile {

        display: visibility;

        background-image: url('../images/mobile/bg.png');

        background-repeat: no-repeat;

        height: 323px;

        background-size: cover;

        /* height: 100%; */

    }



    .navbar-mobile .img-logo {

        border-radius: 8px 0px 0px 8px;

    }



    /*  sidebar */

    .sidebar {

        height: 100%;

        width: 0;

        position: fixed;

        z-index: 1000000000000;

        top: 0;

        left: 0;

        background: #FFFFFF;

        box-shadow: 5px 1px 10px rgba(0, 0, 0, 0.25);

        overflow-x: hidden;

        transition: 0.5s;

    }

      

    .sidebar a {

        padding: 8px 8px 8px 32px;

        text-decoration: none;

        font-size: 25px;

        color: #818181;

        display: block;

        transition: 0.3s;

    }

      

    .sidebar a:hover {

        color: #f1f1f1;

    }

      

    .sidebar .closebtn {

        position: absolute;

        top: 0;

        right: 25px;

        font-size: 36px;

        margin-left: 50px;

    }



    .sidebar ul li .nav-link {

        font-style: normal;

        font-weight: 400;

        font-size: 12px;

        color: #000000;

    }



    .sidebar ul li .dropdown-menu {

        background: #FEE8D0;

        border: none;

        right: 0; 

        left: auto;

    }



    .sidebar ul li .dropdown-item {

        font-style: normal;

        font-weight: 400;

        font-size: 12px;

        color: #000000;

    }

      

    .openbtn {

        font-size: 20px;

        cursor: pointer;

        background-color: #111;

        color: white;

        border: none;

    }

      

    .openbtn:hover {

        background-color: #444;

    }

      

    #main {

        transition: margin-left .5s;

        padding: 16px;

    }



    .header-home-mobile {

        background-image: url('../images/mobile/header-mobile.png');

        background-repeat: no-repeat;

        background-size: cover;

        height: 184px;

        border-radius: 13px;

        margin-top: -230px;

        min-height: 184px !important;

    }



    .bg-header-home-mobile {

        background: linear-gradient(75.16deg, rgba(0, 0, 0, 0.6) 11.79%, rgba(252, 111, 32, 0.6) 99.03%);

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        border-radius: 13px;

        height: 184px;

    }



    .header-home-mobile h1 {

        font-style: normal;

        font-weight: 600;

        font-size: 20px;

        color: #FFFFFF;

    }



    .header-home-mobile p {

        font-style: normal;

        font-weight: 400;

        font-size: 12px;

        color: #FFFFFF;

    }



    .header-home-mobile .btn-contact {

        background: #51B848;

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        border-radius: 39.5px;

        font-style: normal;

        font-weight: 700;

        font-size: 7px;

        color: #FFFFFF;

    }



    .header-home-mobile .btn-ready {

        background: #FC6F20;

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        border-radius: 39.5px;

        font-style: normal;

        font-weight: 700;

        font-size: 7px;

        color: #FFFFFF;

    }



    .product-slider {

        margin-top: 5px;

    }



    .start-testimonial-mobile {

        display: none;

    }



    .video-mobile {

        display: none;

    }



    .navbar-mobile-testimonial {

        display: visibility;

        background-image: url('../images/mobile/testimonial-project.jpg');

        background-repeat: no-repeat;

        height: 323px;

        background-size: cover;

        opacity: 0.6;

    }



    .navbar-mobile-testimonial h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        color: #FCA420;

        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    }



    .navbar-mobile-testimonial p {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        color: #FFFFFF;

        line-height: 15px;

    }



    .testimonial-header-dekstop {

        display: none;

    }



    .header-shop {

        display: none;

    }



    .dekstop-promise {

        display: none;

    }



    .img-logo-login-register {

        margin-top: 50px !important;

    }



    /* HALAMAN BLOG */

    .header-blog-dekstop {

        display: none;

    }



    .navbar-mobile-blog {

        display: visibility;

        background-image: url('../images/mobile/blog-header.jpg');

        background-repeat: no-repeat;

        height: 323px;

        background-size: cover;

    }



    .navbar-mobile-blog h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 37px;

        color: #FCA420;

    }



    .navbar-mobile-blog p {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        line-height: 15px;

        text-align: center;

        color: #FFFFFF;

    }



    .blog-card-bg {

        margin-left: 0;

        width: 100% !important;

    }



    .btn-mobile-older-entries {

        display: none;

    }



    .link-blog-mobile {

        display: none;

    }



    .navbar-mobile-blog-detail {

        display: visibility;

        background-image: url('../images/mobile/blog-header-detail.png');

        background-repeat: no-repeat;

        height: 167px;

        background-size: cover;

    }



    .navbar-mobile-blog-detail p {

        font-style: normal;

        font-weight: 600;

        font-size: 20px;

        color: #FFFFFF;

    }



    .header-portofolio-dekstop {

        display: none;

    }



    .navbar-mobile-portofolio {

        display: visibility;

        background-image: url('../images/mobile/portofolio-header.jpg');

        background-repeat: no-repeat;

        height: 290px;

        background-size: cover;

    }



    .navbar-mobile-portofolio h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 37px;

        color: #FCA420;

    }



    .navbar-mobile-portofolio p {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        line-height: 15px;

        text-align: center;

        color: #FFFFFF;

    }



    .header-jumbotron-purpose {

        display: none;

    }



    .header-jumbotron-purpose-mobile h1 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 42px;

        color: #FCA420;

        filter: drop-shadow(3px 3px 1px black);

    }



    .header-jumbotron-purpose-mobile p {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        color: #FFFFFF;

        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    }



    .detail-product-mobile-page {

        display: none;

    }

}



/* mobile phone */

@media (max-width: 575.98px) { 

    /* navbar */

    .navbar-desktop {

        display: none !important;

    }



    .navbar-mobile {

        display: visibility;

        background-image: url('../images/mobile/bg.png');

        background-repeat: no-repeat;

        height: 323px;

        background-size: cover;

        /* height: 100%; */

    }



    .navbar-mobile .img-logo {

        border-radius: 8px 0px 0px 8px;

    }



    /*  sidebar */

    .sidebar {

        height: 100%;

        width: 0;

        position: fixed;

        z-index: 1000000000000;

        top: 0;

        left: 0;

        background: #FFFFFF;

        box-shadow: 5px 1px 10px rgba(0, 0, 0, 0.25);

        overflow-x: hidden;

        transition: 0.5s;

    }

    .dropdown-item {
        white-space: unset;
    }

    .sidebar a {

        /* padding: 8px 8px 8px 32px; */
        

        text-decoration: none;

        font-size: 25px;

        color: #818181;

        display: block;

        transition: 0.3s;

    }

      

    .sidebar a:hover {

        color: #f1f1f1;

    }

      

    .sidebar .closebtn {

        position: absolute;

        top: 0;

        right: 25px;

        font-size: 36px;

        margin-left: 50px;

    }



    .sidebar ul li .nav-link {

        font-style: normal;

        font-weight: 400;

        font-size: 12px;

        color: #000000;

    }



    .sidebar ul li .dropdown-menu {

        background: #FEE8D0;

        border: none;

        right: 0; 

        left: auto;

    }



    .sidebar ul li .dropdown-item {

        font-style: normal;

        font-weight: 400;

        font-size: 12px;

        color: #000000;

    }

      

    .openbtn {

        font-size: 20px;

        cursor: pointer;

        background-color: #111;

        color: white;

        border: none;

    }

      

    .openbtn:hover {

        background-color: #444;

    }

      

    #main {

        transition: margin-left .5s;

        padding: 16px;

    }



    /* login register */

    .login-register-image {

        display: none;

    }



    .login-container {

        padding-left: 10%;

        padding-top: 150px;

    }



    .login-register-mobile-image {

        display: block;

    }



    /* home */

    .header-home-desktop{

        display: none !important;

    }

    .article-container .article-container-content .bottom-left {
    
        bottom: 0rem;
    
        left: 0rem;
    
        font-size: 11.5px;
    
    
    }



    /* header */

    .header-home-mobile {

        background-image: url('../images/mobile/header-mobile.png');

        background-repeat: no-repeat;

        background-size: cover;

        height: 184px;

        border-radius: 13px;

        margin-top: -230px;

        min-height: 184px !important;

    }



    .bg-header-home-mobile {

        background: linear-gradient(75.16deg, rgba(0, 0, 0, 0.6) 11.79%, rgba(252, 111, 32, 0.6) 99.03%);

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        border-radius: 13px;

        height: 184px;

    }



    .header-home-mobile h1 {

        font-style: normal;

        font-weight: 600;

        font-size: 20px;

        color: #FFFFFF;

    }



    .header-home-mobile p {

        font-style: normal;

        font-weight: 400;

        font-size: 12px;

        color: #FFFFFF;

    }



    .header-home-mobile .btn-contact {

        background: #51B848;

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        border-radius: 39.5px;

        font-style: normal;

        font-weight: 700;

        font-size: 7px;

        color: #FFFFFF;

    }



    .header-home-mobile .btn-ready {

        background: #FC6F20;

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        border-radius: 39.5px;

        font-style: normal;

        font-weight: 700;

        font-size: 7px;

        color: #FFFFFF;

    }



    /* slider promo */

    .product-slider {

        margin-top: 0px;

    }



    .product-slider img {

        Height: 96px;

    }



    .category-carousel-mobile {

        margin-bottom: -30px;

    }



    .category-carousel-mobile .item {

        background: #FC6F20;

        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);

        border-radius: 4px;

        font-style: normal;

        font-weight: 500;

        font-size: 12px;

        color: #FFFFFF;

        padding-top: 7px;

        padding-bottom: 7px;

    }



    .home-title-mobile {

        font-style: normal;

        font-weight: 600;

        font-size: 14px;

        color: #000000;

    }



    .home-link-mobile {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        color: #FC6F20;

    }



    /* purpose */

    .purpose-dekstop{

        display: none !important;

    }



    .product .desk-stuff {

        height: 150px !important;

        width: 100% !important;

    }



    .product .desk-stuff .content-desk-stuff {

        width: 100% !important;

    }



    .content-desk-stuff img {

        height: 150px !important;

        width: 100%;

    }



    /* promise */

    .col-promise-mobile {

        padding-right: 0 !important;

    }



    .promises-service h3 {

        font-style: normal;

        font-weight: 500;

        font-size: 11px !important;

        color: #000000;

    }



    .promises-service .card-promises {

        padding: 8px !important;

    }



    .col-promise-mobile .text-right, .text-left {

        text-align: center !important;

    }



    .col-promise-mobile .desc {

        display: block;

    }

    .promises-service .card .card-promises .desc {
        font-size: 2vw;
    }

    .client-title-dekstop {

        display: none !important;

    }



    /* story */

    .story-container p {

        font-style: normal;

        font-weight: 700;

        font-size: 7px;

        color: #000000;

    }



    .story-mobile {

        margin: 0px 0px 0px 0px;

    }



    .story-container {

        margin-left: 20px;

        margin-right: 20px;

    }



    .story-container .owl-carousel-story .story-one {

        font-size: 7px;

        height: 124px;

    }



    /* portofolio */

    .portofolio-container {

        padding-left: 20px !important;

        padding-right: 20px !important;

    }



    .div-portofolio {

        padding-right: 10% !important;

    }



    .portofolio-container .link-portofolio {

        font-size: 13px;

        padding-top: 10px;

        padding-bottom: 10px;

    }



    .portofolio-container {

        height: 114px;

    }

    

    .portofolio-container img {

        height: 114px;

        width: 100%;

    }

    

    .portofolio-container .color-bg-portofolio {

        height: 114px;

    }



    /* Article */  

    .article-desktop {

        display: none !important;

    } 



    .article-mobile .title-article {

        font-style: normal;

        font-weight: 600;

        font-size: 15px;

        color: #000000;

    } 



    .article-mobile .more-article {

        font-style: normal !important;

        font-weight: 400 !important;

        font-size: 10px !important;

        color: #000000 !important;

        text-decoration: none;

    } 



    .mobile-article-slider .article-container-content img {

        height: 124px;

    }



    .article-container-content, .color-bg  {

        height: 124px;

    }



    .article-container-content, .bottom-left  {

        font-style: normal;

        font-weight: 700;

        font-size: 11px;

        color: #FFFFFF;

    }



    /* footer */

    .footer-desktop {

        display: none !important;

    }



    footer .footer-mobile .footer-title {

        font-style: normal;

        font-weight: 500;

        font-size: 10px;

        color: #FFFFFF;

    } 



    footer .footer-mobile {

        margin-top: -20px !important;

        margin-bottom: -70px !important;

    }



    footer .footer-mobile .footer-header {

        font-style: normal;

        font-weight: 700;

        font-size: 10px;

        color: #FFFFFF;

    }



    footer .footer-mobile  .footer-sub-header {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        color: #FFFFFF;

    }



    /* HALAMAN TESTIMONIAL */

    .container-card-testimonial {

        padding: 23px 5% 10px 5%;

        margin-top: 5px !important;

    }

    

    .start-testimonial-container {

        display: none;

    }



    .start-testimonial-mobile h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 15px;

        color: #000000;

    }



    .video-dekstop {

        display: none;

    }



    .video-mobile .btn-primary {

        background: #FC6F20;

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        border-radius: 6px;

        font-style: normal;

        font-weight: 500;

        font-size: 9px;

        color: #FFFFFF;

    }



    .header-shop {

        display: none;

    }



    .navbar-mobile-testimonial {

        display: visibility;

        background-image: url('../images/mobile/testimonial-project.jpg');

        background-repeat: no-repeat;

        height: 323px;

        background-size: cover;

        opacity: 0.6;

    }



    .navbar-mobile-testimonial h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        color: #FCA420;

        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    }



    .navbar-mobile-testimonial p {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        color: #FFFFFF;

        line-height: 15px;

    }



    .testimonial-header-dekstop {

        display: none;

    }



    .dekstop-promise {

        display: none;

    }



    .login-container {

        padding-left: 0px !important;

    }



    .login-div-container {

        padding-left: 20px !important;

        padding-right: 10px !important;

    }



    .img-logo-login-register {

        margin-top: -80px;

    }



    .register-div-container {

        padding-left: 20px !important;

        padding-right: 10px !important;

    }



    .register-div {

        padding-right: 5px !important;

    }



    .register-div-container input {

        font-size: 10px;

    }



    .container-fast-respond h5 {

        font-style: normal;

        font-weight: 700;

        font-size: 12px;

        color: #FFFFFF;

    }



    .container-fast-respond p {

        font-style: normal;

        font-weight: 300;

        font-size: 11px;

        color: #FFFFFF;

    }



    .container-fast-respond .user-online {

        margin-left: 30%;

    }
    /* HALAMAN ABOUT */
    .header-about-dekstop {

        display: none;

    }



    .navbar-mobile-about {

        display: visibility;

        background-image: url('../images/mobile/testimonial-project.png');

        background-repeat: no-repeat;

        height: 323px;

        background-size: cover;

    }


    .navbar-mobile-about h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 37px;

        color: #FCA420;

    }

    /* HALAMAN PAKET */
    .header-paket-dekstop {

        display: none;

    }


    .navbar-mobile-paket h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 37px;

        color: #FCA420;

    }

    /* HALAMAN CATALOG */
    .header-catalog-dekstop {

        display: none;

    }


    .navbar-mobile-catalog h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 37px;

        color: #FCA420;

    }
    .navbar-mobile-catalog {
        display: visibility;
        background-image: url(../images/mobile/portofolio-header.jpg);
        background-repeat: no-repeat;
        height: 323px;
        background-size: cover;
    }

    /* HALAMAN CAREER */
    .header-career-dekstop {

        display: none;

    }


    .navbar-mobile-career h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 37px;

        color: #FCA420;

    }
    .navbar-mobile-career {
        display: visibility;
        background-image: url(../images/mobile/blog-header.jpg);
        background-repeat: no-repeat;
        height: 323px;
        background-size: cover;
    }

    /* HALAMAN PAKET */
    .header-jumbotron-paket {
        height: 223px;
        background-image: url(../images/mobile/testimonial-project.png);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        border-radius: 8px;
    }

    /* HALAMAN BLOG */

    .header-blog-dekstop {

        display: none;

    }



    .navbar-mobile-blog {

        display: visibility;

        background-image: url('../images/mobile/blog-header.jpg');

        background-repeat: no-repeat;

        height: 323px;

        background-size: cover;

    }



    .navbar-mobile-blog h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 37px;

        color: #FCA420;

    }



    .navbar-mobile-blog p {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        line-height: 15px;

        text-align: center;

        color: #FFFFFF;

    }



    .blog-card-bg {

        margin-left: 0;

        width: 100% !important;

    }



    .blog-container img {

        height: 106px;

    }

    

    .blog-container .blog-card-bg p {

        font-size: 9px;

        padding-top: 20%;

        width: 100%;

    }



    .blog-container-older img {

        height: 106px;

    }

    

    .blog-container-older .blog-card-bg p {

        font-size: 9px;

        text-decoration: underline;

    }



    .btn-mobile-older-entries {

        visibility: visible;

        background: #FC6F20;

        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

        border-radius: 6px;

        font-style: normal;

        font-weight: 600;

        font-size: 9px;

        color: #FFFFFF;

    }



    .link-blog-mobile {

        visibility: visible;

    }



    .container-blog-detail img {

        width: 100%;

    }



    .navbar-mobile-blog-detail {

        display: visibility;

        background-image: url('../images/mobile/blog-header-detail.png');

        background-repeat: no-repeat;

        height: 167px;

        background-size: cover;

    }



    .navbar-mobile-blog-detail p {

        font-style: normal;

        font-weight: 600;

        font-size: 20px;

        color: #FFFFFF;

    }



    /* HALAMAN PORTOFOLIO */

    .header-portofolio-dekstop {

        display: none;

    }



    .navbar-mobile-portofolio {

        display: visibility;

        background-image: url('../images/mobile/portofolio-header.jpg');

        background-repeat: no-repeat;

        height: 290px;

        background-size: cover;

    }



    .navbar-mobile-portofolio h3 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 37px;

        color: #FCA420;

    }



    .navbar-mobile-portofolio p {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        line-height: 15px;

        text-align: center;

        color: #FFFFFF;

    }



    .header-jumbotron-purpose {

        display: none;

    }



    .header-jumbotron-purpose-mobile h1 {

        font-style: normal;

        font-weight: 600;

        font-size: 28px;

        line-height: 42px;

        color: #FCA420;

        filter: drop-shadow(3px 3px 1px black);

    }



    .header-jumbotron-purpose-mobile p {

        font-style: normal;

        font-weight: 400;

        font-size: 10px;

        color: #FFFFFF;

        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

    }



    .detail-product-desktop-page {

        display: none;

    }



    .detail-product-mobile-page {

        visibility: visible;

    }



    .btn-chart {

        margin-top: 0px !important;

    }



    .btn-chart-modal {

        position:fixed;

        top:auto;

        right:auto;

        left:auto;

        bottom:0;

    }



    .user-contact-container .list-user-contact {

        margin-left: 20%;

        margin-right: 5%;

    }



    .user-contact-container .list-user-contact .user {

        font-style: normal;

        font-weight: 700;

        font-size: 12px;

        color: #FFFFFF;

    }



    .user-contact-container .list-user-contact .click {

        font-style: normal;

        font-weight: 300;

        font-size: 11px;

        color: #FFFFFF;

    }

 }