.header {
    height: 60px;
    padding: 10px;
    background: white;
    display: grid;
    border: unset;
    grid-template-columns: 10% 50%;
    column-gap: 40%;
}

.logo {
    width: 100%;
    float: left;
    padding-left: 20;
    margin: auto;
    box-sizing: border-box;
    min-width: 100px;
}

.logo img {
    width: 100%;
    margin: auto;
}

.opt {
    display: flex;
    text-decoration: none;
    float: right;
    padding-right: 20px;
    height: 100%;
}

a#srrc {
    text-decoration: none;
    font-size: 7px;
    font-family: 'Archivo Black', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    /* font-weight: 100; */
    /* font-size: 7px; */
    margin: auto;
    color: #676767;
    padding-left: 30;
    color: #151515;
    padding: unset;
    padding: 10px;
    border-radius: 2px;
    margin-right: 0;
}

body {
    margin: unset;
}

a#srrc {}

a.contact {
    background: white;
    padding: 1;
    color: black;
    margin-left: 30px;
    border: 1px solid #0231a2;
    border-radius: 3px;
}

.contact h1 {
    color: #000000;
    padding: unset;
}

#srrc h1 {
    margin: unset;
}

#srrc h1:hover {
    color: #0231a2;
}

a.contact:hover {
    /* background: #437bff; */
    color: white;
}

div#first {
    background: white;
    height: 100%;
    width: 100%;
    position: relative;
    /* margin: 0; */
    /* background-image: url("../img/bckg.jpg"); */
    background-position: inherit;
    background-repeat: no-repeat;
    background-size: cover;
}

#first h1 {
    color: #0231a2;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 50;
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
}

.judul {
    margin: auto;
    display: block;
    width: 100%;
    display: block;
    padding-right: 0;
    margin-left: 0;
}

.judul h4 {
    color: white;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    font-size: 2.5vw;
    margin-top: 5;
}

.img-src {/* padding: 100px; */padding-left: unset;padding-right: 100px;}

.img-src img {
    width: 100%;
}

.img-pg {
    position: absolute;
    bottom: -110;
    width: 100%;
    left: 0;
}

.img-pg img {
    width: 100%;
}

div#second {
    position: relative;
    width: 100%;
    height: 100%;
}

.pg-in {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 100%;
    display: block;
    display: grid;
    grid-template-columns: 40% 60%;
    width: 80%;
}
}

div#second {}

.pg-2 {
    height: 100%;
}

.pg-2 img {
    width: 100%;
    border-radius: 5px;
}

.artc h1 {
    font-size: 30px;
    margin: 0;
    color: 0231a2;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 40;
}

.artc h4 {color: black;font-family: 'Ubuntu', sans-serif;font-weight: 300;margin-top: 5;font-size: 1.5vw;/* width: 70%; */line-height: 1.9;margin-right: 0;text-align: justify;}
}



.artc {
    margin: auto;
    margin-bottom: 20px;
}

div#services {
    width: 100%;
}

#services h1 {
    text-align: center;
    font-family: 'Rubik Mono One', sans-serif;
    font-size: 3vw;
    color: #0231a2;
    margin-top: 0;
    margin-bottom: 0;
}

.page-serv {
    background: #0231a2;
    border-radius: 3px;
    display: grid;
    grid-template-columns: 30% 70%;
    padding: 60px;
}

.pg-srvs img {
    width: 100%;
}

.pg-srvs {
    margin: auto;
    width: 40%;
    padding: 20px;
    padding-bottom: 60px;
}

h1#srvs {
    color: white;
    text-align: left;
    font-size: 1.7vw;
    width: 100%;
    margin: auto;
}

#services h4#srvs {
    width: 90%;
    color: white;
    margin-bottom: 40px;
    font-size: 1.5vw;
    margin-left: 0;
    text-align: left;
    margin-bottom: 18px;
}

.artc {
    width: 80%;
    margin: auto;
    /* text-align: right; */
    padding: 40px;
    /* border-radius: 4px; */
    border-right: 1px solid #0231a2;
    border-left: 1px solid #0231a2;
}

div#art-pg {
    width: 100%;
}

a.lrn-more {
    color: white;
    margin-top: 30px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 13px;
    text-decoration: none;
    transition: 0.2s;
    border-bottom: 1px solid #fff;
    padding: 10px;
    border-radius: 3px;
    text-align: left;
}

a.lrn-more:hover {
    background: white;
    color: #0231a2;
}

.pg-in-fr {
    width: 100%;
    position: absolute;
    margin: 0;
    position: absolute;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    box-sizing: border-box;
    display: grid;
    padding: 60px;
    box-sizing: border-box;
    grid-template-columns: 50% 40%;
    grid-column-gap: 10%;
    box-sizing: border-box;
}

footer {
    display: grid;
    grid-template-columns: 50% 50%;
    font-size: 14px;
    font-family: 'Quicksand', sans-serif;
    font-weight: 100;
    padding: 40px;
    background: #f9f9f9;
    line-height: 1.7;
    color: #6e6e6e;
}

.almt {color: #6e6e6e;max-width: 300px;line-height: 1.7;margin-top: 0;}

.contc {
    text-align: right;
}

.contc h5 {
    margin-top: 0;
    margin-bottom: 0;
}

.almt h5 {
    margin-top: 0;
    margin-bottom: 0;
}

.wa {
    position: fixed;
    color: #0231a2;
    right: 20;
    bottom: 20;
    font-size: 40;
    z-index: 10;
    background: white;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

i.fa.fa-whatsapp {}

a.dr-wa {
    color: #0231a2;
    transition: 0.2s;
}

a.dr-wa:hover {
    color: #626262;
}

.nm-pg {
    /* height: 50%; */
    padding: 40px;
    box-sizing: border-box;
    padding-bottom: 20px;
}
    



.nm-pg h1 {
    box-sizing: border-box;
    color: #0231a2;
    font-size: 45px;
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
}

.list h1 {
    font-size: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 4px;
    transition: 0.4s;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
}

.artcl-list {
    padding: 40px;
    max-width: 1000px;
    width: 100%;
    margin: auto;
    margin-right: 0;
    box-sizing: border-box;
}

.list h4 {
    color: #383838;
    font-family: 'Quicksand', sans-serif;
    font-weight: 100;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 5px;
    margin-bottom: 4px;
}

.list {
    /* border-bottom: 1px solid #ababab; */
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 40% 55%;
    column-gap: 5%;
}

.list img {
    width: 100%;
    border-radius: 2px;
    position: absolute;
    /* top: -100%; */
}

a#lnk-art {
    font-family: 'Ubuntu', sans-serif;
    color: black;
    text-decoration: none;
    cursor: pointer;
    margin-bottom: 30px;
}

.list:hover {}

a#lnk-art:hover {
    color: #0231a2;
}

.list h6 {
    color: #000000;
    font-family: 'Quicksand', sans-serif;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 12;
    margin-bottom: 5px;
}

.bckgr {
    overflow: hidden;
    height: 100%;
    border-radius: 2px;
    position: relative;
}

.art-hm {
    /* width: 870px; */
    margin: auto;
    /* margin-top: 30px; */
    position: relative;
}

.art-hm .bckgr {
    border-radius: 2px;
    height: 250px;
    /* margin-bottom: 50; */
}

.art-hm img {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.artcl-is h1 {
    font-size: 34px;
    margin-bottom: 0;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    text-align: justify;
    color: #0231a2;
}

.artcl-is h4 {
    color: #000000;
    font-family: 'Quicksand', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 100;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 5px;
    line-height: 2.3;
    font-weight: 100;
    font-size: 17;
}

.artcl-is h6 {
    color: #000000;
    font-family: 'Quicksand', sans-serif;
    margin-top: 5px;
    margin-bottom: 20px;
    font-size: 12;
}

i.fa.fa-instagram, i.fa.fa-linkedin,i.fa.fa-facebook {
    font-size: 30;
    margin-right: 20;
}

i.fa.fa-instagram:hover {
    opacity: 0.5;
}

.medsos {
    margin-top: 10px;
}

div#thred {
    position: relative;
    width: 100%;
    height: 100%;
}

#thred .pg-in {
    width: 90%;
    grid-template-columns: 60% 40%;
}

i.fa.fa-circle {
    margin-right: 20px;
    color: #0231a2;
    margin: auto;
    margin-left: 0;
    font-size: 22px;
}

.lst-prp {
    display: grid;
    grid-template-columns: 10% 90%;
    margin: auto;
    text-align: left;
    margin-bottom: 20px;
}

.lst-grp-id {margin-top: 20px;}

#thred .artc h4 {
    color: black;
    margin: auto;
    margin-left: 0;
    text-align: justify;
}

#services h4 {
    color: black;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    margin-top: 5;
    font-size: 1.5vw;
    /* width: 70%; */
    line-height: 1.7;
    margin-right: 0;
    width: 70%;
    text-align: center;
    margin: auto;
    margin-bottom: 30px;
}

.pg-3 {
    margin: auto;
    width: 79%;
    border-radius: 5px;
}

.pg-3 img {
    width: 100%;
    border-radius: 5px;
}

.artcl-is {
    max-width: 800px;
    margin-top: 40px;
    margin: auto;
    background: white;
    padding: 30px;
    /* position: absolute; */
    width: 100^;
}

div#survey {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
}


#survey h1 {
    text-align: center;
    color: 0231a2;
    width: 70%;
    margin: auto;
    margin-bottom: 30px;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 20;
}


.pg-srv {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

#survey .srv h1 {
    font-size: 59px;
    margin-bottom: 0;
}

#survey .srv h6 {
    margin: auto;
    text-align: center;
    margin-top: 0;
    font-family: 'Rubik Mono One', sans-serif;
    color: 0231a2;
    width: 200px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
}

.page-inn {
    margin: auto;
    width: 80%;
}

div#cta-sr {
    position: relative;
    height: 100%;
    width: 100%;
}

.pgph {
    height: 100%;
    overflow: hidden;
    border-radius: 5px;
}

.pgph img {
    width: 100%;
}

#survey h6 {
    font-weight: 100;
    text-align: center;
    font-size: 16px;
    font-family: 'Ubuntu', sans-serif;
}

.pg-cta h1 {
    font-family: 'Rubik Mono One', sans-serif;
    margin-top: 0;
    margin-bottom: 60;
    font-family: 'Roboto Mono', monospace;
}

.in-pg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: 30% 65%;
    width: 80%;
    /* height: 400px; */
    border-radius: 10px;
    column-gap: 5%;
    max-width: 1000px;
}

.pg-cta {
    margin: auto;
}

a#nrmr {
    padding: 20;
    font-family: 'Ubuntu', sans-serif;
    text-decoration: none;
    background: #0231a2;
    color: white;
    border: 1px solid #0231a2;
    border-radius: 3px;
    transition: 0.5s;
    font-family: 'Roboto Mono', monospace;
}

a#nrmr:hover {
    background: none;
    border: 1px solid #0231a2;
    color: #0231a2;
}

div#std\ case-sr {
    width: 100%;
    height: 100%;
    position: relative;
}

.list {}

.studycase {
    border-radius: 4px;
}

.list-st {
    display: grid;
    grid-template-columns: 60% 40%;
    height: 300px;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    grid-template-columns: 50% 45%;
    grid-column-gap: 5%;
    width: 60%;
}

.list-st {}

.studycase img {
    width: 100%;
    border-radius: 4px;
}

.testimonial h3 {
    font-family: 'Ubuntu', sans-serif;
    margin-top: 0;
    line-height: 1.7;
    font-weight: 400;
    margin-right: auto;
    margin-bottom: 0;
    text-align: justify;
    font-size: 14;
}

.testimonial h2 {
    font-family: 'Ubuntu', sans-serif;
    margin-top: 5;
    font-size: 16px;
    line-height: 1.7;
    margin-right: 0;
    margin-bottom: 0;
    font-weight: 600;
}


.testimonial h4 {font-family: 'Ubuntu', sans-serif;color: #0231a2;margin-top: 0;}

.srv {
    display: grid;
    grid-template-columns: 30% 65%;
    column-gap: 5%;
    /* width: 500px; */
    width: 100%;
    margin-bottom: 40px;
}

.testimonial {}

button.bar-strp {
    color: white;
    background: unset;
    border: unset;
    float: right;
    font-size: 25px;
    margin: auto;
    display: none;
}

i.fa.fa-times {
    display: none;
    color: #ffffff;
}

i.fa.fa-linkedin {}

i.fa.fa-facebook {}

a.medsos-pg {color: #6e6e6e;}

img.img-pg-1 {
    width: 100%;
    border-radius: 5px;
}

.str {
    overflow: hidden;
    /* height: 400px; */
    width: 100%;
    border-radius: 4px;
}

#thred h1 {
    color: #0231a2;
}

div#desire {padding: 60px;box-sizing: border-box;}

#desire .pg-in {
    position: unset;
    transform: unset;
    margin: auto;
    padding: 20px;
}

#pg-2 .artc {}

#second .artc {
    background: white;
    color: #123;
    border: unset;
}

#second .artc h4 {
    color: black;
    text-align: justify;
}

div#servcs {border-bottom: unset;height: unset;margin-bottom: 0px;}

#servcs h4 {
    box-sizing: border-box;
    color: #4e4e4e;
    font-size: 20px;
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
}

.dscr h2 {
    box-sizing: border-box;
    color: #0231a2;
    font-size: 23px;
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
}

.srvs {
    padding: 60px;
    display: grid;
    grid-template-columns: 50% 50%;
}

.srv img {
    width: 100%;
    margin: auto;
    float: left;
    max-width: 70px;
}

.dscr p {
    box-sizing: border-box;
    color: #4e4e4e;
    font-size: 15px;
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
}

.dscr {
    width: 100%;
}

.maps {
    width: 100%;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

h4#add-rs {
    font-size: 16;
    max-width: 400px;
}

.list-cs {
    height: 200px;
    /* background: #0231a2; */
    border-radius: 2px;
    display: grid;
    /* grid-template-columns: 50% 50%; */
    background-image: url(../img/studycase/hmrs.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
    transition: 0.5s;
    margin-bottom: 5px;
}

.list-cs h1 {
    box-sizing: border-box;
    color: #0231a2;
    font-size: 30px;
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    font-weight: 800;
    margin: auto;
    /* display: block; */
    padding: 20px;
    margin-left: 0;
    cursor: pointer;
    max-width: 600px;
}

.list-cs:hover {
    opacity: 0.8;
    background-position: 0;
    background-size: 105%;
}

.lst-stdy h1 {
    box-sizing: border-box;
    color: #0231a2;
    font-size: 27px;
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    background: white;
}

.lst-stdy {
    margin-bottom: 50px;
}

.lst-stdy p {
    color: #383838;
    font-family: 'Quicksand', sans-serif;
    font-weight: 100;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 5px;
    margin-bottom: 4px;
}

div#rat {
    display: block;
}

b {
}

i.fa.fa-eye {
    font-size: 17;
    padding-right: 10px;
    color: #585858;
}

#cliebt h1 {
    font-size: 30px;
    margin: 0;
    color: 0231a2;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    font-size: 30;
    text-align: center;
}

img#img-cli {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    max-width: 900px;
    margin: auto;
    display: block;
    text-align: center;
}

.artcl-is h3 {margin-bottom: 0;font-family: 'Roboto Mono', monospace;font-weight: 700;font-size: 14px;}


.art-main-isi {
    color: #000000;
    font-family: 'Quicksand', sans-serif;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 100;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 5px;
    line-height: 2.3;
    font-weight: 100;
    font-size: 17;
}

img#img-art {
    width: 100%;
    position: unset;
    transform: unset;
    border-radius: 5px;
    margin-bottom: 20px;
}

.nm-pg h3 {
    box-sizing: border-box;
    color: #585858;
    font-size: 15px;
    margin: 0;
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    background: white;
}