@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:wght@400;500;700&display=swap');
html {
    margin: auto;
    overflow: hidden;
    overflow-x: hidden !important;
    width: 100%;
}
body {
    overflow: hidden;
    overflow-x: hidden !important;
}
section,
main {
    width: 100%;
}

.waside {
    position: fixed;
    bottom: 2px;
    right: 2px;
    width: min(100%, 160px);
    z-index: 998;
}

.clickable:hover {
    filter: saturate(80%) brightness(110%) drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.5));
    cursor: pointer;
}

.dropmenu {
    align-items: flex-end;
}

.dropmenu .dropicon {
    padding-right: 4em;
}

ul {
    /* display: none; */
    position: absolute;
    padding: 0;
    background-color: #4C3983;
    display: none;
    top: 5.25rem;
}

li {
    list-style: none;
    display: flex;
    font-size: 3.6rem;
    line-height: 5.8rem;
    padding-inline: 2.3rem;
    width: 100%;
}

li:hover {
    background-color: #65529e;
}

.loader-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #4C3983;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.loader {
    display: inline-block;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: loader 2s infinite ease;
}

.loader-wrapper .loader img {
    width: 20em;
    height: auto;
}

@keyframes loader {
    0% {
        filter: saturate(80%) brightness(100%);
    }
    50% {
        filter: saturate(80%) brightness(130%);
    }
}

body {
    width: 100%;
    height: 100%;
    margin: auto;
    box-sizing: border-box;
    font-family: 'Red Hat Text', sans-serif;
}

a {
    text-decoration: none;
    color: #626262;
}

section:last-child a:hover {
    color: #1977F3;
    filter: none;
    font-weight: 800;
}

main {
    padding-top: 6.25em;
}

.waWrapImgFix {
    position: fixed;
    bottom: 0;
    right: 0;
    display: flex;
    flex-flow: row;
    align-items: center;
    padding: 1em;
    z-index: 5;
}

.waWrapImgFix img {
    width: 8.3em;
}


/* .waWrapImgFix .dropPhone {
    display: none;
    font-size: 1.75rem;
    width: 8em;
    background-color: rgba(240, 248, 255, 0.685);
    padding: .6em;
    border-radius: .5em;
    flex-flow: column;
    justify-content: space-evenly;
}

.waWrapImgFix .dropPhone a {
    line-height: 1.6em;
    font-weight: 800;
} */

header {
    width: 100%;
    display: flex;
    flex-flow: row;
    position: fixed;
    background: #362663;
    z-index: 998;
    border-bottom: #CCB416 solid .4em;
}

header .logo {
    margin-right: auto;
}

header .menu {
    display: flex;
    flex-flow: row;
    align-items: flex-end;
    padding-bottom: .4em;
    justify-content: space-evenly;
    width: min(90%, 35em);
    font-size: 1.5rem;
    transition: all .2s ease-in-out;
}

header .menu .bars a {
    transition: all .2s ease-in-out;
}

header .logo:hover {
    filter: saturate(80%) brightness(117%);
    transition: all .05s ease-in-out;
}

.contact .sosmed img:hover,
.waWrapImgFix img:hover {
    filter: saturate(80%) brightness(110%) drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.5));
}

header .menu div a,
header div .dropmenu {
    color: rgba(229, 229, 229, 0.8);
}

header .dropmenu {
    display: none;
}

header .dropmenu .dropicon .strip {
    border-bottom: rgb(209, 209, 209) .42em solid;
    height: .8em;
    width: 3.5em;
}

header .dropmenu .dropicon {
    padding-top: 1em;
}

header .logo {
    width: 7.375em;
    height: 6.25em;
    padding-left: 3.75em;
    transition: all 200ms;
}

.yellow {
    background: #CCB416;
    width: 100%;
    height: 0.3em;
}

.banner img {
    width: min(100%);
    margin: 0;
}

video {
    width: min(90%, 64rem);
    height: min(100%, 35.2rem);
    border: #CCB416 .1em solid;
    /* margin-inline: auto; */
}

.vid {
    display: flex;
    padding-bottom: 2em;
    justify-content: center;
    width: 100%;
}

video:hover {
    cursor: pointer;
}

main section:nth-child(2) .title {
    /* height: 3.063em; */
    width: 100%;
    margin-inline: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    margin-top: 3em;
}

main section:nth-child(2) .title img {
    margin-bottom: -12.5em;
    width: min(100%);
}

main section:nth-child(4) .content .left a img,
main section:nth-child(2) .wa img {
    width: 8.225rem;
    /* margin-right: auto; */
    margin-left: -0.5em;
}

main section:nth-child(4) .content .left a,
main section:nth-child(2) .wa {
    background-color: #4CCB5B;
    border: 0.098em solid #FFFFFF;
    border-radius: 2.5em;
    color: white;
    display: inline-flex;
    align-items: center;
    width: min(100%, 44.313rem);
    height: 2.2em;
    font-size: 2.5rem;
    margin: 0;
}

main section:nth-child(4) .content .left a p,
main section:nth-child(2) .wa p {
    font-size: 3.2rem;
    font-weight: 500;
    color: white;
}

main section:nth-child(4) .content .left a:hover,
main section:nth-child(2) .wa:hover {
    background-color: #52dd63;
}

main section:first-child {
    margin-inline: auto;
    display: flex;
    flex-flow: column;
    justify-content: space-none;
}

.contact,
.desc {
    margin-inline: auto;
    width: min(90%, 70.5rem);
}

.desc {
    width: min(60%);
    padding-bottom: 2em;
}

main section:nth-child(2) {
    margin-inline: auto;
    display: flex;
    flex-flow: column;
    justify-content: space-none;
    align-items: center;
    /* height: 72.125rem; */
    background-image: url("./assets/Background\ GS\ wo\ Tittle.jpg");
    background-size: cover;
    background-position: center;
    color: white;
    font-size: 2rem;
    padding-bottom: 2em;
    border-bottom: #CCB416 solid 0.8em;
    width: min(100%);
    margin-inline: auto;
}

main section:nth-child(2) .desc {
    width: min(70%);
}

main section:nth-child(2) p,
main section:nth-child(2) p a u {
    color: rgba(229, 229, 229, 0.8);
    margin: 0;
    /* margin-top: -5rem; */
    font-size: 2.25rem;
    line-height: 2.813rem;
    width: min(100%);
    /* padding-top: 5em; */
}

main section:nth-child(2) p a u:hover {
    color: rgb(229, 229, 229);
}

main section:nth-child(2) p:first-child {
    padding-top: 11vw;
}

.desc {
    margin-top: 6em;
}

h5,
p,
p p {
    /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
    font-style: normal;
    font-weight: normal;
    font-size: 1.75rem;
    line-height: 2.188rem;
    /* width: 65rem; */
    text-align: center;
    color: #626262;
}

h5 {
    font-weight: 600;
}

.clickable:hover {
    cursor: pointer;
}

.contact .sosmed .clickable {
    width: 11.5em;
    height: auto;
}

.contact .sosmed .mail {
    width: 10em;
}

main section:nth-child(3) {
    /* background-attachment: fixed; */
    background-image: url(./assets/background-loc.jpg);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 500;
    width: 100%;
}

b {
    color: #362663be;
}

main section:nth-child(3) p {
    font-size: 2.15rem;
    width: min(90%);
}

main section:nth-child(3) p:first-child {
    padding-top: .7em;
}

main section:nth-child(3) p:first-child b {
    font-size: 7.813rem;
}

main section:nth-child(3) p:nth-child(2) {
    padding-top: 1em;
    width: min(80%);
}

main section:nth-child(3) .baris:last-child {
    padding-bottom: 7em;
}

main section:nth-child(3) img {
    border-radius: 1.25rem;
    border: solid .4em #362663BF;
    width: min(90%, 18.75rem);
}

main section:nth-child(3) .items {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-evenly;
    width: min(100%);
    margin-inline: auto;
}

main section:nth-child(3) .baris {
    display: inline-flex;
    align-items: center;
    justify-content: space-evenly;
    padding-bottom: 3em;
    padding-top: 1em;
    width: min(80%);
    margin-inline: auto;
}

main section:nth-child(3) .baris .item {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    width: min(40%);
    height: 30em;
}

main section:nth-child(3) .baris .item p {
    font-size: 1.875rem;
    margin: 0;
    padding: 0;
    padding-top: .5em;
}

main section:nth-child(3) p:first-child {
    font-size: 6.875rem;
    color: rgba(54, 38, 99, 0.6);
}

main section:nth-child(3) {
    border-bottom: solid 7.5rem rgba(54, 38, 99, 0.9);
    width: 100%;
}

main section:nth-child(4) {
    border-top: solid 1.25em #CCB416;
    width: 100%;
    margin-inline: auto;
    padding-inline: 2em;
    padding-bottom: 5em;
    background-image: url(./assets/Background\ Tipe\ Rumah.png);
    background-size: cover;
    background-position: center;
       display: flex;
    flex-flow: column;
    align-items: center;
}

main section:nth-child(4) .content {
    display: inline-flex;
    width: min(98%);
    justify-content: space-around;
    /*width: 100%;*/
}

main section:nth-child(4) p:first-child {
    padding-top: 1em;
    font-size: 5.875rem;
    color: rgba(54, 38, 99, 0.6);
    padding-bottom: .8em;
}

main section:nth-child(4) p:first-child b {
    font-size: 7.813rem;
}

main section:nth-child(4) .left,
main section:nth-child(4) .right {
    margin: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
}

main section:nth-child(4) .left {
    width: 66%;
}

main section:nth-child(4) .right {
    width: 34%;
}

main section:nth-child(4) .content .left img {
    width: min(100%, 76.875rem);
    border-radius: 1.25rem;
}

main section:nth-child(4) .right img {
    width: min(100%, 37.5rem);
}

main section:nth-child(4) .right b {
    font-size: 2.713rem;
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 900;
}

main section:nth-child(4) .right {
    margin-top: -1.2em;
}

main section:nth-child(4) .right table {
    padding-top: 2em;
    width: min(90%);
}

main section:nth-child(4) .right img {
    padding-bottom: 4em;
    width: min(90%);
}

main section:nth-child(4) .right tr td b {
    font-size: 1.875rem;
}

main section:nth-child(4) .right tr td:not(b) {
    font-size: 1.875rem;
}

main section:nth-child(4) .right tr td:first-child {
    margin: none;
    display: flex;
    align-items: flex-start;
}

main section:nth-child(4) .left .desc {
    width: min(90%);
}

main section:nth-child(4) .left .tag p {
    font-size: 2rem;
}

main section:nth-child(4) .left .tag p:first-child {
    margin: 0;
    padding: 0;
    line-height: 1em;
    padding-top: .5em;
}

main section:nth-child(4) .left .tag p:last-child {
    padding-bottom: 2em;
}

main section:nth-child(4) .left .tag p b {
    font-family: 'Red Hat Text', sans-serif;
    font-weight: 800;
    color: white;
    background-color: rgba(54, 38, 99, 0.8);
    padding: 0.1em;
}

main section:nth-child(4) .left .tag p:first-child {
    font-size: 4.5rem;
    font-weight: 600;
    color: rgba(54, 38, 99, 0.7);
}

main section:nth-child(4) .content .left a {
    border: #362663 solid .1em;
}

main section:nth-child(4) .content .left a p {
    margin-inline: auto;
}

main section:nth-child(4) .content {
    margin-top: -4em;
}

main section:last-child {
    display: inline-flex;
    padding: 6em;
    /* padding-left: 14em; */
    background-image: url(./assets/Background\ Contact.png);
    background-size: cover;
    width: min(90%);
    padding-top: 11em;
}

main section:last-child .contact {
    display: flex;
    flex-flow: column;
    align-items: left;
    justify-content: space-evenly;
    text-align: left;
    width: min(43%);
    margin: 0;
    margin-top: 1em;
}

main section:last-child .contact p:first-child {
    font-size: 6.563rem;
    text-align: left;
    margin-top: 0;
}

main section:nth-child(3) p:first-child b,
main section:nth-child(4) p:first-child b,
main section:last-child .contact p:first-child b {
    font-weight: 500;
}

main section:last-child .contact p:first-child b {
    font-size: 7.813rem;
}

main section:last-child .contact p,
main section:last-child .contact a,
main section:last-child .contact b {
    text-align: left;
    color: #E5E5E5;
}

.contact .logo img {
    width: 12.125rem;
    /* margin-inline: auto; */
}

.contact .logo {
    width: min(90%, 38.563rem);
    display: flex;
    flex-flow: column;
    align-items: center;
    /* justify-content: ; */
}

.contact .logo b {
    font-size: 2.65rem;
}

.contact .sosmed .mail {
    width: 9.8em;
}

.contact .sosmed {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: space-evenly;
    width: min(90%, 40em);
    /* margin-left: 7em; */
}

.contact p:nth-child(3) {
    font-size: 2.25rem;
    line-height: 2.813rem;
}

main section:last-child .contact p:nth-child(3) b {
    font-size: 2.625rem;
    line-height: 6rem;
}

.contact .sosmed img {
    width: 12em;
    height: 12em;
    filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.226));
}


/* .contact .sosmed .waWrapImg .dropPhone a {
    line-height: 2em;
    width: 100%;
} */

.contact .sosmed .waWrapImg {
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
}

main section:last-child .contact .waWrap {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: flex-start;
    padding-bottom: 2em;
}

main section:last-child .contact .waWrap p {
    margin: 0;
    padding: 0;
}

main section:last-child .contact .numberWA {
    font-size: 1.75rem;
    display: flex;
    flex-flow: column;
}

main section:last-child .contact .numberWA a {
    padding-bottom: .45em;
}

main section:last-child iframe {
    width: min(100%, 64rem);
    height: auto;
    border: solid #1977F3 .5rem;
    border-radius: 1.875em;
}

@media only screen and (max-width:1760px) {
    main section:last-child .contact {
        width: min(65%);
    }
    main section:last-child iframe {
        width: min(60%, 64rem);
        /* height: min(680%, 64rem); */
        border: solid #1977F3 .5rem;
        border-radius: 1.875em;
    }
}

@media only screen and (max-width:1460px) {
    html {
        font-size: 11px;
    }
    .banner .title img {
        padding-bottom: 8em;
    }
}

@media only screen and (max-width:1060px) {
    .banner .title img {
        padding-bottom: 5em;
    }
    html {
        font-size: 8px;
    }
}

@media only screen and (max-width:760px) {
    .banner .title {
        height: 2.063em;
    }
    html {
        font-size: 7px;
    }
    header .menu {
        display: none;
    }
    header .dropmenu {
        display: flex;
        flex-flow: column;
    }
    header .dropmenu:hover ul {
        display: flex;
        flex-flow: column;
    }
    header .dropmenu .dropitem ul {
        position: absolute;
        margin: 0;
        padding: 0;
    }
}

@media only screen and (max-width:690px) {
    .contact .logo b {
        font-size: 2.55rem;
    }
}

@media only screen and (max-width:660px) {
    html {
        font-size: 5px;
    }
}

@media only screen and (max-width:580px) {
    html {
        font-size: 4px;
    }
    .desc p {
        font-size: 1.45rem;
        margin-bottom: 3em;
    }
    .banner .title img {
        padding-bottom: 3em;
    }
}

@media only screen and (max-width:490px) {
    .contact .logo b {
        font-size: 2.35rem;
    }
}

@media only screen and (max-width:450px) {
    .contact .logo b {
        font-size: 2.15rem;
    }
}

@media only screen and (max-width:414px) {
    header .dropmenu .dropitem li a {
        font-size: 2.7rem;
    }
    .waside {
        /*top: 85%;*/
        width: min(100%, 120px);
    }
    html {
        font-size: 7px;
    }
    main section:first-child {
        margin-bottom: -8em;
    }
    main section:nth-child(2) {
        width: min(100%);
    }
    main section:nth-child(2) .desc {
        width: min(90%, 45rem);
    }
    main section:nth-child(3) p:first-child,
    main section:nth-child(4) p:first-child {
        font-size: 4.7rem;
        width: 90%;
        line-height: 5rem;
    }
    main section:nth-child(4) p:first-child {
        font-size: 4.2rem;
        width: 90%;
    }
    main section:nth-child(3) .baris .item p {
        font-size: 1.675rem;
    }
    main section:nth-child(3) {
        /* background-position: center center; */
        background-image: url(./assets/background-loc-phone.jpg);
    }
    main section:nth-child(4) {
        /* background-position: center center; */
        background-image: url(./assets/Background\ Tipe\ Rumah-phone.png);
    }
    main section:nth-child(3) .items {
        flex-flow: row;
        justify-content: center;
    }
    main section:nth-child(3) .items .baris {
        flex-flow: column;
    }
    main section:nth-child(3) .items .baris:first-child {
        align-items: flex-end;
        margin-top: -3em;
        padding-top: 0;
    }
    main section:nth-child(3) .items .baris:last-child {
        align-items: flex-start;
    }
    main section:nth-child(3) .items .baris .item {
        width: min(90%, 20rem);
        padding-bottom: 2em;
    }
    main section:nth-child(4) {
        padding: 0;
        margin-inline: auto;
        width: 100%;
        display: flex;
        flex-flow: column;
        align-items: center;
    }
    main section:nth-child(4) .content {
        flex-flow: column;
        align-items: center;
        padding-bottom: 8em;
    }
    main section:nth-child(4) p:first-child {
        margin-right: 0;
    }
    main section:nth-child(4) .content .left,
    main section:nth-child(4) .content .right {
        width: min(90%);
        font-size: 4rem;
    }
    main section:nth-child(4) .content .right img {
        padding-bottom: 1.5em;
        padding-top: 3em;
    }
    main section:nth-child(4) .content .right table {
        /* padding-bottom: 1.5em; */
        padding-top: .5em;
    }
    main section:nth-child(4) .content .left .tag {
        width: min(100%);
    }
    main section:nth-child(4) .content .left .tag p:first-child {
        font-size: 3rem;
    }
    main section:last-child {
        flex-flow: column;
        padding-inline: 0;
        padding-bottom: 10em;
        width: 100%;
    }
    main section:last-child .contact,
    main section:last-child iframe {
        display: flex;
        flex-flow: column;
        align-items: left;
        justify-content: space-evenly;
        text-align: left;
        width: min(90%);
        margin: 0;
        margin-inline: auto;
    }
    main section:last-child iframe {
        height: 38em;
    }
    main section:last-child .contact {
        align-items: center;
        padding-left: 0;
        text-align: center;
        padding-bottom: 2em;
    }
    main section:last-child .contact b:nth-child(2) {
        text-align: left;
        width: 15em;
        margin-inline: auto;
    }
    main section:last-child .contact p:nth-child(3) {
        text-align: center;
        font-size: 3rem;
        line-height: 1.5em;
    }
    main section:last-child .contact p:nth-child(3) b {
        text-align: center;
        font-size: 3rem;
        line-height: 1.5em;
    }
    main section:last-child .contact .sosmed {
        width: 45em;
    }
}

@media only screen and (max-width:372px) {
    main section:nth-child(4) p:first-child {
        font-size: 3.8rem;
    }
}

@media only screen and (max-width:366px) {
    main section:nth-child(3) p:first-child {
        font-size: 4rem;
    }
}

@media only screen and (max-width:330px) {
    main section:nth-child(4) p:first-child {
        font-size: 3.6rem;
    }
}

@media only screen and (max-width:320px) {
    html {
        font-size: 5px;
    }
    main section:last-child .contact {
        align-items: center;
    }
}