body{
    margin: -13.5em 0;
}

.u-section-1 .u-sheet-1 {min-height: 1131px}
.u-section-1 .u-image-1 {width: 856px; height: 769px; margin: 299px auto 0 58px}
.u-section-1 .u-text-1 {margin: -659px 277px 0 108px}
.u-section-1 .u-text-2 {margin: -219px auto 0 108px}
.u-section-1 .u-text-3 {margin: 212px auto 0 108px}
.u-section-1 .u-text-4 {margin: 16px 313px 0 108px}
.u-section-1 .u-text-5 {margin: 32px auto 0 108px}
.u-section-1 .u-text-6 {line-height: 1; margin: 20px 313px 60px 108px} 

@media (max-width: 1199px){ .u-section-1 .u-text-1 {margin-top: -556px; margin-right: 177px; margin-left: 8px}
.u-section-1 .u-text-2 {margin-top: -147px; margin-left: 8px}
.u-section-1 .u-text-3 {margin-left: 8px}
.u-section-1 .u-text-4 {margin-right: 213px; margin-left: 8px}
.u-section-1 .u-text-5 {margin-left: 8px}
.u-section-1 .u-text-6 {margin-right: 213px; margin-left: 8px} }

@media (max-width: 991px){ .u-section-1 .u-sheet-1 {min-height: 1009px}
.u-section-1 .u-image-1 {width: 720px; height: 647px; margin-left: 0}
.u-section-1 .u-text-1 {margin-top: -431px; margin-left: 0; margin-right: 0}
.u-section-1 .u-text-2 {margin-left: 0}
.u-section-1 .u-text-3 {margin-left: 0}
.u-section-1 .u-text-4 {margin-right: 1px; margin-left: 0}
.u-section-1 .u-text-5 {margin-left: 0}
.u-section-1 .u-text-6 {margin-right: 1px; margin-left: 0} }

@media (max-width: 767px){ .u-section-1 .u-sheet-1 {min-height: 847px}
.u-section-1 .u-image-1 {width: 540px; height: 485px}
.u-section-1 .u-text-1 {margin-top: -311px}
.u-section-1 .u-text-4 {margin-right: 0}
.u-section-1 .u-text-6 {margin-right: 0} }

@media (max-width: 575px){ .u-section-1 .u-sheet-1 {min-height: 667px}
.u-section-1 .u-image-1 {width: 340px; height: 305px}
.u-section-1 .u-text-1 {margin-top: -178px} }.u-section-2 {min-height: 959px}
.u-section-2 .u-image-1 {width: calc(((100% - 1140px) / 2) + 323px); height: 87px; object-position: 50% 0%; margin: 0 auto 0 0}
.u-section-2 .u-text-1 {margin: -63px calc(((100% - 1140px) / 2) + 869px) 0 calc(((100% - 1140px) / 2))}
.u-section-2 .u-image-2 {width: 274px; height: 256px; margin: 64px auto 0 163px}
.u-section-2 .u-image-3 {width: 212px; height: 90px; margin: -166px auto 0 calc(((100% - 1140px) / 2) + 378px)}
.u-section-2 .u-image-4 {width: 314px; height: 263px; margin: -187px calc(((100% - 1140px) / 2) + 212px) 0 auto}
.u-section-2 .u-image-5 {width: 98px; height: 138px; margin: 38px calc(((100% - 1140px) / 2) + 320px) 0 auto}
.u-section-2 .u-image-6 {width: 334px; height: 260px; margin: 34px auto 0 143px}
.u-section-2 .u-image-7 {width: 282px; height: 254px; margin: -254px calc(((100% - 1140px) / 2) + 227px) 0 auto}
.u-section-2 .u-image-8 {width: 200px; height: 92px; margin: -173px auto 60px calc(((100% - 1140px) / 2) + 406px)} 

@media (max-width: 1199px){ .u-section-2 {min-height: 500px}
.u-section-2 .u-image-1 {width: calc(((100% - 940px) / 2) + 323px)}
.u-section-2 .u-text-1 {margin-right: calc(((100% - 940px) / 2) + 729px); margin-left: 118px}
.u-section-2 .u-image-3 {height: 91px; margin-left: calc(((100% - 940px) / 2) + 378px)}
.u-section-2 .u-image-4 {height: 264px; margin-right: calc(((100% - 940px) / 2) + 212px)}
.u-section-2 .u-image-5 {margin-right: calc(((100% - 940px) / 2) + 320px)}
.u-section-2 .u-image-6 {height: 239px}
.u-section-2 .u-image-7 {margin-right: calc(((100% - 940px) / 2) + 227px)}
.u-section-2 .u-image-8 {margin-left: calc(((100% - 940px) / 2) + 406px)} }

@media (max-width: 991px){ .u-section-2 .u-image-1 {width: calc(((100% - 720px) / 2) + 323px)}
.u-section-2 .u-text-1 {margin-right: calc(((100% - 720px) / 2) + 558px); margin-left: 90px}
.u-section-2 .u-image-3 {margin-left: calc(((100% - 720px) / 2) + 378px)}
.u-section-2 .u-image-4 {margin-right: calc(((100% - 720px) / 2) + 212px)}
.u-section-2 .u-image-5 {margin-right: calc(((100% - 720px) / 2) + 320px)}
.u-section-2 .u-image-7 {margin-right: calc(((100% - 720px) / 2) + 227px)}
.u-section-2 .u-image-8 {margin-left: calc(((100% - 720px) / 2) + 406px)} }

@media (max-width: 767px){ .u-section-2 .u-image-1 {width: calc(((100% - 540px) / 2) + 323px)}
.u-section-2 .u-text-1 {margin-right: calc(((100% - 540px) / 2) + 419px); margin-left: 68px}
.u-section-2 .u-image-3 {margin-left: calc(((100% - 540px) / 2) + 328px)}
.u-section-2 .u-image-4 {margin-right: calc(((100% - 540px) / 2) + 212px)}
.u-section-2 .u-image-5 {margin-right: calc(((100% - 540px) / 2) + 320px)}
.u-section-2 .u-image-7 {margin-right: calc(((100% - 540px) / 2) + 227px)}
.u-section-2 .u-image-8 {margin-left: calc(((100% - 540px) / 2) + 340px)} }

@media (max-width: 575px){ .u-section-2 .u-image-1 {width: calc(((100% - 340px) / 2) + 323px)}
.u-section-2 .u-text-1 {margin-right: calc(((100% - 340px) / 2) + 264px); margin-left: 43px}
.u-section-2 .u-image-2 {margin-left: 66px}
.u-section-2 .u-image-3 {margin-left: calc(((100% - 340px) / 2) + 128px)}
.u-section-2 .u-image-4 {margin-right: calc(((100% - 340px) / 2) + 26px)}
.u-section-2 .u-image-5 {margin-right: calc(((100% - 340px) / 2) + 242px)}
.u-section-2 .u-image-6 {margin-left: 6px}
.u-section-2 .u-image-7 {margin-right: calc(((100% - 340px) / 2) + 58px)}
.u-section-2 .u-image-8 {margin-left: calc(((100% - 340px) / 2) + 140px)} }


.container-tentangkami{
    margin-top: 300px;
    margin-bottom: 50px;
}

.process{
    margin: 20px auto;
}

.our-process{
    background-image: url('../images/Rectangle_OurProcess-01.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 50%;
    padding: 10px;
}

#process-header{    
    position:relative;
    left: 50px;
}

.process img{
    width: 25%;
    padding: 20px;
}

.process-row{
    display: flex;
    justify-content: center;
    margin-bottom: -10px;
}

#row3{
    display: flex;
    flex-direction: row-reverse;
    margin-left: 0;
}

#bawah{
    width: 10%;
    height: 100%;
    position: relative;
    left: 27%;
}

@media (max-width: 1200px){
    body{
        margin: 0;
        width: 100%;
    }
    .container-tentangkami{
        margin: 80px 0 20px 0;
        width: 100%;
        height: 100%;
    }

    .process{
        width: 100%;
    }

    .our-process{
        width: 100%;
        height: 30%;
        padding: 1px;
    }

    #process-header{    
        position:relative;
        left: 30px;
        font-size: 24px;
    }
    
    .process img{
        display: block;
        width: 33%;
        padding: 0;
        margin: 0 auto;
    }
   
    .process-row{
        display: flex;
        justify-content: center;
        margin: 0 20px;
    }

    #row3{
        display: flex;
        flex-direction: row-reverse;
        margin-left: 0;
    }

    #bawah{
        width: 10%;
        height: 100%;
        position: relative;
        left: 38%;
        margin: 15px 0;
    }
}