* {
    padding: 0;
    margin: 0;
    font-size: 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-family: LexendDeca;
}

@font-face {
    font-family: 'LexendDeca';
    src: URL('../font/LexendDeca-light.ttf') format('truetype');
}

body {
    background-color: #424243;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#mainpage {
    background-color: #424243e8;
    color: #fff;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.hideObj {
    display: none !important;
}

.blurBack {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    pointer-events: none
}

/* Navbar */
.nav-bar {
    background-color: #424243;
    box-shadow: 1px 0 12px #363636;
}

.nav-logo {
    width: 10rem;
    position: absolute;
    top: 0.75rem;
}

.nav-btn {
    color: white;
    background: #4EAAB5;
    display: flex;
    padding: 0.5rem 1rem;
    margin: 0.5rem;
}

.nav-pills li {
    margin: 0.5rem 0;
}

.nav-btn:focus {
    box-shadow: 0 0 0 0.15rem #ffffff1a;
}

.nav-menu, .nav-menu:active, .nav-menu:focus {
    color: #4EAAB5;
    text-shadow: 1px 1px 3px #0000005c;
    font-weight: bold;
    letter-spacing: 0.1rem;
    padding: 0.4rem 1rem;
}

.nav-menu:active {
    top: -1px;
    position: relative;
}

.nav-menu:hover {
    color: #b3dce1;
}

.nav-menu.active {
    background-color: #4EAAB5 !important;
}

/* Home */
.m-page {
    min-height: calc(100vh - 4.3rem);
    padding: 4rem 0;
}

#home {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#home .img-1, #home .img-3 {
    width: 32rem;
}

#home .img-2 {
    width: 5%;
    margin: 7% 0 4%;
}

#home .img-3 {
    position: relative;
    animation-name: mainlogo;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes mainlogo {
    0% {
        transform: translatey(0px) translate(8%, 0);
    }

    50% {
        transform: translatey(5%) translate(8%, 0);
    }

    100% {
        transform: translatey(0px) translate(8%, 0);
    }
}

/* Question */
#question {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    background-color: #4eaab5;
}

.question-img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-img img {
    max-height: 100%;
    width: 45rem;
    max-width: 75%;
}

.waviy {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: fit-content;
    gap: 1rem;
    position: relative;
    -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0, 0, 0, .2));
    font-size: 2rem;
    background-color: #424243;
    padding: 1.2rem 2.5rem;
    border-radius: 1rem;
    margin-bottom: 12rem;
    margin: 0 0.5rem;
}

.waviy span {
    position: relative;
    color: #fff;
    animation: waviy 2s infinite;
    animation-delay: calc(.1s * var(--i));
    text-shadow: 1px 1px 3px #0000005c;
    font-weight: bold;
    letter-spacing: 0.1rem;
    font-size: 2.9rem;
}

.waviy img {
    width: 20rem;
    padding-bottom: 1rem;
}

@keyframes waviy {
    0%, 40%, 100% {
        transform: translateY(0)
    }

    20% {
        transform: translateY(-5px)
    }
}

/* TeemChat */
#teemChat {
    display: flex;
    justify-content: center;
    position: relative;
    padding: 0 2rem;
    background-color: #4EAAB5;
}

#teemChat .parent {
    width: 60%;
}

#teemChat .box {
    background-color: #424243;
    padding: 1.25rem 1rem;
    border-radius: 0.7rem;
    margin-right: 1rem;
}

#teemChat img {
    width: 14rem;
    margin-bottom: 0.3rem;
}

#teemChat .txt span {
    font-size: 1.6rem;
    line-height: 4rem;
    text-align: justify;
    text-shadow: 1px 1px 3px #0000005c;
}

/* Hightlight */
#hightLight {
    display: flex;
    justify-content: center;
    align-items: center;
}

#hightLight .waviy span {
    font-size: 8rem;
}

#hightLight .waviy span:first-child {
    color: #4EAAB5;
}

/* All Highlight */
.h-light {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

.h-light .box {
    background-color: #424243;
    border-radius: 1rem 0 0 1rem;
    height: 100%;
    width: 65%;
}

.h-light .head, .h-light .head span {
    text-transform: uppercase;
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 1px 1px 3px #0000005c;
    margin-bottom: 1rem;
}

.h-light .content {
    padding-left: 2rem;
    line-height: 2.25rem;
    text-shadow: 1px 1px 3px #0000005c;
}

.h-light .content div {
    font-size: 1.1rem;
}

.h-light .sub-head, .custom .head {
    color: #4EAAB5;
    font-weight: bold;
    font-size: 1.4rem !important;
    padding: 2rem 0 0.5rem;
}

.h-light .star {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.h-light .star i {
    color: #FFE600;
}

.h-light .chart {
    text-align: center;
    padding: 5rem 0 2rem;
}

.h-light .chart img {
    width: 70%;
}

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

/* Service Categorize */
.circle-parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1rem;
    padding-top: 2rem;
}

.circle-blue {
    background-color: #4EAAB5;
    width: 6rem;
    height: 6rem;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 4px 4px 12px #363636;
}

.circle-blue i {
    font-size: 2.5rem;
    animation-name: cateIcon;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

.small {
    font-size: 1.1rem !important;
}

.cirlce-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.circle-txt {
    line-height: 2rem;
    text-align: center;
}

@keyframes cateIcon {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.45);
    }
}

/* Customization Integration */
.custom {
    text-align: center;
}

.custom img {
    padding-top: 1rem;
    width: 65%;
}

/* Contact us */
#contactUs .img-1 {
    width: 30%;
}

.contact {
    display: flex;
    align-items: center;
    justify-content: end;
}

.contact img {
    width: 1.5rem;
    margin-bottom: 2rem;
    margin-left: 0.5rem;
}

.contact .left {
    border-right: 2px solid #8E8E8F;
    padding-right: 2rem;
    margin-right:  2rem;
}


/* ETC */
.text-blue {
    color: #4eaab5 !important;
}

.bg-blue {
    background-color: #4eaab5 !important;
}

.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal.active {
    transform: translate(0, 0);
    opacity: 1;
}

/** webkit scrollbar */

::-webkit-scrollbar {
    width: 0.6rem;
    height: 0.6rem;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #8cc6cd;
}

::-webkit-scrollbar-thumb:hover {
    background: #999;
}

::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* Loading */

#loader {
    z-index: 30000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    /* background-color: rgba(0, 0, 0, 0.5); */
}

#loader>div {
    font-size: 1.2vw;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    position: relative;
    text-indent: -9999em;
    -webkit-animation: load5 1.1s infinite ease;
    animation: load5 1.1s infinite ease;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    top: 50%;
    left: 50%;
}

@-webkit-keyframes load5 {
    0%, 100% {
        box-shadow: 0em -2.6em 0em 0em #d4cef8, 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2), 2.5em 0em 0 0em rgba(212, 206, 248, 0.2), 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.2), 0em 2.5em 0 0em rgba(212, 206, 248, 0.2), -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.2), -2.6em 0em 0 0em rgba(212, 206, 248, 0.5), -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.7), 1.8em -1.8em 0 0em #d4cef8, 2.5em 0em 0 0em rgba(212, 206, 248, 0.2), 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.2), 0em 2.5em 0 0em rgba(212, 206, 248, 0.2), -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.2), -2.6em 0em 0 0em rgba(212, 206, 248, 0.2), -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.5), 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.7), 2.5em 0em 0 0em #d4cef8, 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.2), 0em 2.5em 0 0em rgba(212, 206, 248, 0.2), -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.2), -2.6em 0em 0 0em rgba(212, 206, 248, 0.2), -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.2), 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.5), 2.5em 0em 0 0em rgba(212, 206, 248, 0.7), 1.75em 1.75em 0 0em #d4cef8, 0em 2.5em 0 0em rgba(212, 206, 248, 0.2), -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.2), -2.6em 0em 0 0em rgba(212, 206, 248, 0.2), -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.2), 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2), 2.5em 0em 0 0em rgba(212, 206, 248, 0.5), 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.7), 0em 2.5em 0 0em #d4cef8, -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.2), -2.6em 0em 0 0em rgba(212, 206, 248, 0.2), -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.2), 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2), 2.5em 0em 0 0em rgba(212, 206, 248, 0.2), 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.5), 0em 2.5em 0 0em rgba(212, 206, 248, 0.7), -1.8em 1.8em 0 0em #d4cef8, -2.6em 0em 0 0em rgba(212, 206, 248, 0.2), -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.2), 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2), 2.5em 0em 0 0em rgba(212, 206, 248, 0.2), 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.2), 0em 2.5em 0 0em rgba(212, 206, 248, 0.5), -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.7), -2.6em 0em 0 0em #d4cef8, -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.2), 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2), 2.5em 0em 0 0em rgba(212, 206, 248, 0.2), 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.2), 0em 2.5em 0 0em rgba(212, 206, 248, 0.2), -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.5), -2.6em 0em 0 0em rgba(212, 206, 248, 0.7), -1.8em -1.8em 0 0em #d4cef8;
    }
}

@keyframes load5 {
    0%, 100% {
        box-shadow: 0em -2.6em 0em 0em #d4cef8, 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2), 2.5em 0em 0 0em rgba(212, 206, 248, 0.2), 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.2), 0em 2.5em 0 0em rgba(212, 206, 248, 0.2), -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.2), -2.6em 0em 0 0em rgba(212, 206, 248, 0.5), -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.7), 1.8em -1.8em 0 0em #d4cef8, 2.5em 0em 0 0em rgba(212, 206, 248, 0.2), 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.2), 0em 2.5em 0 0em rgba(212, 206, 248, 0.2), -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.2), -2.6em 0em 0 0em rgba(212, 206, 248, 0.2), -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.5), 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.7), 2.5em 0em 0 0em #d4cef8, 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.2), 0em 2.5em 0 0em rgba(212, 206, 248, 0.2), -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.2), -2.6em 0em 0 0em rgba(212, 206, 248, 0.2), -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.2), 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.5), 2.5em 0em 0 0em rgba(212, 206, 248, 0.7), 1.75em 1.75em 0 0em #d4cef8, 0em 2.5em 0 0em rgba(212, 206, 248, 0.2), -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.2), -2.6em 0em 0 0em rgba(212, 206, 248, 0.2), -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.2), 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2), 2.5em 0em 0 0em rgba(212, 206, 248, 0.5), 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.7), 0em 2.5em 0 0em #d4cef8, -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.2), -2.6em 0em 0 0em rgba(212, 206, 248, 0.2), -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.2), 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2), 2.5em 0em 0 0em rgba(212, 206, 248, 0.2), 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.5), 0em 2.5em 0 0em rgba(212, 206, 248, 0.7), -1.8em 1.8em 0 0em #d4cef8, -2.6em 0em 0 0em rgba(212, 206, 248, 0.2), -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.2), 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2), 2.5em 0em 0 0em rgba(212, 206, 248, 0.2), 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.2), 0em 2.5em 0 0em rgba(212, 206, 248, 0.5), -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.7), -2.6em 0em 0 0em #d4cef8, -1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(212, 206, 248, 0.2), 1.8em -1.8em 0 0em rgba(212, 206, 248, 0.2), 2.5em 0em 0 0em rgba(212, 206, 248, 0.2), 1.75em 1.75em 0 0em rgba(212, 206, 248, 0.2), 0em 2.5em 0 0em rgba(212, 206, 248, 0.2), -1.8em 1.8em 0 0em rgba(212, 206, 248, 0.5), -2.6em 0em 0 0em rgba(212, 206, 248, 0.7), -1.8em -1.8em 0 0em #d4cef8;
    }
}

@media only screen and (max-width: 1200px) {
    .waviy {
        margin-bottom: 5rem;
    }

    #teemChat .parent {
        width: 80%;
    }

    .h-light .chart {
        padding: 3rem 0 1rem;
    }

    .h-light .chart img {
        width: 100%;
    }

    .h-light .box {
        width: unset;
        padding: 2rem 1.5rem;
    }

    .custom img {
        width: 90%;
    }
}

@media only screen and (max-width: 767px) {
    * {
        font-size: 12px;
    }

    #home .img-1, #home .img-3 {
        width: 70%;
    }

    #home .img-2 {
        width: 15%;
        margin: 17% 0 14%;
    }

    .waviy span {
        font-size: 1.9rem;
    }

    .waviy img {
        width: 13rem;
    }

    #teemChat .box {
        padding: 0.8rem 0.8rem;
    }

    #teemChat img {
        width: 9rem;
    }

    #teemChat .txt span {
        font-size: 1rem;
        line-height: 2.5rem;
    }

    #teemChat .parent {
        width: 100%;
    }

    #hightLight .waviy span {
        font-size: 4rem;
    }

    .h-light {
        padding: 0.5rem;
    }

    .h-light .head, .h-light .head span {
        font-size: 1.5rem;
    }

    .h-light .content {
        padding-left: 1.2rem;
    }

    .h-light .content div {
        font-size: 1rem;
        line-height: 2rem;
    }

    .h-light .sub-head {
        font-size: 1.3rem !important;
    }

    .circle-txt {
        line-height: 1rem !important;
    }

    .small {
        font-size: 0.9rem !important;
    }
}

@media only screen and (min-width: 768px) {
    * {
        font-size: 14px;
    }
}

@media only screen and (min-width: 1920px) {
    * {
        font-size: 18px;
    }
}