.nopadding {
    padding: 0;
}

.section-new {
    position: relative;
    padding: 7.5rem 0;
}

.section-banner {
    padding-top: 10px !important;
    padding-bottom: 0 !important;
}

.banner-row {
    padding-left: 3rem!important;
    padding-right: 3rem!important;
}

.section-banner #garansi {
    position: absolute;
    object-fit: cover;
    overflow: hidden;
    background-color: black;
    border-radius: 50%;
    opacity: 0.65;
    top: 6%;
    right: 2.5%;
    box-sizing: border-box;
    padding-top: 4%;
    padding-bottom: 4%;
    padding-left: 2.5%;
    padding-right: 2.5%;
}

.section-banner #garansi #garansi-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.section-banner #garansi h2 {
    font-size: 3vw;
    color: white;
    word-wrap: break-word;
    text-align: center;
    margin: 0;
}

.section-banner .img-container #panah1 {
    position: absolute;
    object-fit: cover;
    overflow: hidden;
    width: 20%; 
    /* height: 110px; */
    top: 10%;
    left: 8%;
}

.position-relative {
    position: relative;
}

.section-banner .img-container #panah2 {
    position: absolute;
    object-fit: cover;
    overflow: hidden;
    /* width: 250px;  */
    width: 16%; 
    /* height: 110px; */
    bottom: 8%;
    right: 5%;
}

.section-banner .img-container #banner-text {
    position: absolute;
    object-fit: cover;
    overflow: hidden;
    width: 20%;
    bottom: 7%;
    left: 7%;
}

.section-featured {
    padding-top: 0 !important;
    display: block;
    height: 100% !important;
}

.section-featured p {
    font-size: 14px;
    text-align: justify;
    word-wrap: break-word;
}

.section-new .container-featured {
    padding-left: 0 !important;
    padding-bottom: 0 !important;
}

.section-new .image, .image img {
    position: relative;
    width: 100%;
    /* height: 100%; */
}

.section-new .image {
    overflow: auto;
}

.img-container {
    position: relative;
    overflow: hidden;
}

.image-feature-wrapper {
    position: relative;
    width: 700px;
    height: 890px;
    top: -10%;
}

.image-feature-wrapper img {
    position: absolute;
    object-fit: cover;
    width: 100%;
}

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

.feature-row > div {
    padding: 10px;
}


.feature-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 200px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    border-radius: 4px;
    padding: 3px 15px;
    text-align: center;
    margin-bottom: 10px;
}

.feature-box h4 {
    font-size: 16px;
}

.feature-box p {
    text-align: justify;
    word-wrap: nowrap;
    font-size: 14px;
}

.icon-banner {
    position: absolute;
}

#icon-1 {
    top: 33%;
    left: 50%;
}

#icon-1 p {
    font-family: proximanova-semibold;
    font-size: 20px !important;
    color: white;
    white-space: nowrap;
    position: absolute;
    top: 0;
    right: -20px !important;
}

#icon-2 {
    top: 60%;
    left: 5%;
}

#icon-2 p {
    font-family: proximanova-semibold;
    font-size: 20px !important;
    color: white;
    white-space: nowrap;
    position: absolute;
    top: 0;
    left: 50px !important;
}

.icon-banner img {
    width: 70px;
    height: 70px !important;
}

#top-main-menu.new ul li {
    font-family: proximanova-semiBold !important;
}

.address-box {
    max-width: 100%;
    margin-bottom: 25px;
}

.address-box h3 {
    color: white !important;
}

.address-box p {
    color: white !important;
    font-size: 14px;
}

.newFooter .social-list {
    position: relative;
    float: right;
    margin-top: 23px;
}

.newFooter .social-list a {
    padding-right: 10px;
}

.newFooter .social-list a img {
    width: 24px;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;

    /* Safari seems to support, but seems deprecated and does the same thing as the others. */
    image-rendering: -webkit-optimize-contrast;
}

@media (max-width: 992px) {
    .newFooter .social-list {
        width: 100%;
        text-align: center;
        margin-top: 10px
    }
}

.product-list .product-wrapper {
    margin-left: 10px;
    margin-right: 10px;
    background-color: #f9f9f9 !important;
    border-radius: 3px !important;
    border: 1px solid #f9f9f9!important;
    
    padding: 10px;
}

.product-list .product-wrapper .image-wrapper {
    width: 297px !important;
    height: 210px !important;
    margin: auto;
    border-bottom: 2px solid #ca3028;
}

.product-wrapper .image-wrapper img {
    object-fit: contain !important;
    width: 100%;
    padding-bottom: 10px;
}

.product-wrapper .text-area {
    text-align: center;
    padding-top: 10px;
}

.product-wrapper .text-area h4 a {
    text-decoration: none;
    color: #4a4a4a;
}

.img-logo {
    height: 40px !important;
}

.footer-logo {
    height: 40px !important;
}

.btn-ultima {
    color: #fff;
    background-color: #ca3028;
    border-color: #ca3028;
}

.btn-ultima:hover {
    color: #fff;
    background-color: #a22620;
    border-color: #a22620;
}

.color-ultima {
    color: #ca3028;
}

.text-ultima {
    color: #ca3028;
}

.project-detail .description p {
    font-size: 12px;
}

.project-detail .project-wrapper {
    /* background-color: #e5e5e5; */
    height: 100%;
    padding: 10px;
    margin-right: 0;
}

.project-detail .project-wrapper .project-box {
    width: 297px;
    height: 178px;
    margin-right: 10px;
    border-radius: 3px;
}

.project-detail .project-wrapper .project-box img {
    border-radius: 3px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#productDetailModal #product-content img {
    width: 400px;
    height: 250px;
    border-radius: 4px;
    text-align: center;
}

#home-page .section-top {
    padding-bottom: 30px !important;
}

@media (min-width: 320px) and (max-width: 479px) {
    #home-page .section-top {
        padding-bottom: 10px !important;
    }

    .banner-row {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .feature-row {
        display: flex;
        flex-direction: column !important;
        /* width: 100% !important; */
    }

    .feature-row .feature-box {
        width: 100% !important;
        margin-left: calc(-100vw / 2 + 500px / 2);
        margin-right: calc(-100vw / 2 + 500px / 2);
    }


    .why-us-wrapper {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .image-feature-wrapper {
        width: 320px !important;
        height: 600px !important;
    }

    #icon-1 {
        top: 18% !important;
        left: 45% !important;
    }

    #icon-2 {
        top: 35%;
        left: 2%;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    #home-page .section-top {
        padding-bottom: 10px !important;
    }

    .banner-row {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .image-feature-wrapper {
        width: 100% !important;
        height: 650px !important;
    }

    #icon-1 {
        top: 31% !important;
        left: 46% !important;
    }

    #icon-2 {
        top: 54%;
        left: 3%;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* #home-page .section-top {
        padding-bottom: 10px !important;
    }

    .banner-row {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    } */

    .why-us-wrapper {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .image-feature-wrapper {
        width: 600px !important;
        height: 840px !important;
    }

    #icon-1 {
        top: 33% !important;
        left: 48% !important;
    }

    #icon-2 {
        top: 60% !important;
        left: 3% !important;
    }
}

@media (min-width: 1024px) and (max-width: 1199px) {
    .why-us-wrapper {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .image-feature-wrapper {
        width: 60% !important;
    }

    #icon-1 {
        top: 30% !important;
        left: 48% !important;
    }

    #icon-2 {
        top: 50% !important;
        left: 3% !important;
    }
}

@media (min-width: 1200px) and (max-width: 1365px) {
    .why-us-wrapper {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .image-feature-wrapper {
        width: 700px !important;
        height: 970px !important;
    }
}

@media (min-width: 1366px) and (max-width: 2559px) {
    .image-feature-wrapper {
        width: 700px !important;
        height: 890px !important;
    }

    #icon-1 {
        top: 38% !important;
        left: 48% !important;
    }
}

@media (min-width: 2560px) {
    
}