.we-knows-area, .we-knows-area-new {
    padding-top: 0;
    font-family: "MyCustomFont", sans-serif;
}
/* body::before {
                content: '';
                background: repeating-linear-gradient(#ffffffa0, #6D7E88a0);
                position:absolute;
                width:100%;
                height:100%;
                z-index:-1;
            }*/

.we-knows-area-new {
    display: none;
}

.header-area .header-top-area {
    box-shadow: 0 0 5px #cccccc;
}

#contactus_infor {
    transition: opacity .5s ease, transform .5s ease;
    position: absolute;
    top: 0;
    left: 150px;
    box-shadow: 0 0 15px #0003;
    padding: 18px;
    background: linear-gradient(45deg, #3525d3, #3ee2ed);
    color: #fff;
    text-wrap: nowrap;
    border-radius: 15px;
}

    #contactus_infor div {
        transition: opacity .4s ease 0.2s, transform .4s ease 0.2s;
    }


.zeroOpacity {
    opacity: 0;
    transform: translateY(30px);
}

.zeroOpacity_div {
    opacity: 0;
    transform: translateX(15px);
}

.is-revealing img {
    width: 108px;
    height: 108px;
    padding: 6px;
    background-color: #ffffff;
    border: 1px solid #e5e6e7;
    border-radius: 5px;
    margin: 8px auto 0;
}

@media(max-width:576px) {
    #contactus_infor {
        left: 50%;
        transform: translateX(-50%);
        top: -200px;
    }

    .hero-title, .hero-cta {
        text-align: center;
    }

    #contactus_infor {
        text-align: left;
    }

    .hero-paragraph.is-revealing {
        padding: 0 25px;
    }
}

.site-header .logo {
    width: 90px;
}


.maintenance-main {
    position: relative;
    height: 100vh;
    min-width: 1200px;
    min-height: 860px;
}

    .maintenance-main .body-wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        border-radius: 15px;
    }

@media(max-width: 576px) {
    .maintenance-main {
        min-width: initial;
        min-height: initial;
    }

        .maintenance-main .body-wrap {
            position: relative;
            left: 0;
            top: 0;
            transform: initial;
            border-radius: 0;
        }
}

.maintenance-main .maintenance-wrap {
    position: absolute;
    top: 45%;
    right: 50%;
    transform: translate(50%, -45%) scale(1.2);
    z-index: 9;
    background: #fff;
    padding: 21px;
    border-radius: 15px;
    box-sizing: border-box;
    backdrop-filter: blur(15px);
    border: 1px solid #f1f1f1;
    box-shadow: 0 0 12px #f1f1f1;
    opacity: 0;
    animation: move 3s forwards;
}

@keyframes move {
    15% {
        opacity: 1;
    }
    80% {
        top: 45%;
        right: 50%;
        transform: translate(50%, -45%) scale(1.2);
        opacity: 1;
        background: #fff;
        color: initial;
        box-shadow: 0 0 12px #f1f1f1;
        border: 1px solid #f1f1f1;
    }
    100% {
        right: 3%;
        top: 5%;
        transform: initial;
        opacity: 1;
        background: #0008;
        color: #fff;
        box-shadow: 0 0px 15px #4ef4e230;
        border: none;
    }
}

.maintenance-main .maintenance-wrap .maintenance-item.title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

    .maintenance-main .maintenance-wrap .maintenance-item.title .text {
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 2px;
    }

    .maintenance-main .maintenance-wrap .maintenance-item.title .animate-wait {
        display: flex;
        position: relative;
    }

        .maintenance-main .maintenance-wrap .maintenance-item.title .animate-wait .waitel-left svg {
            animation: rotationBack 3s linear infinite;
        }

        .maintenance-main .maintenance-wrap .maintenance-item.title .animate-wait .waitel-right svg {
            position: relative;
            top: 5px;
            left: -5px;
            animation: rotationBack 3.5s linear infinite reverse;
        }

@keyframes rotationBack {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}


.maintenance-main .maintenance-wrap .maintenance-item.content {
    font-size: 13px;
}

.maintenance-main .maintenance-wrap .maintenance-item.expect {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-top: 5px;
    font-size: 13px;
}

.maintenance-main .maintenance-wrap .expect .time {
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    animation: move_time 3s forwards;
}

@keyframes move_time {
    80% {
        color: initial;
    }

    100% {
        color: #fff;
    }
}

@media(max-width: 576px) {
    .maintenance-main .maintenance-wrap {
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 72px);
        animation: movemobile .8s forwards;
    }

    @keyframes movemobile {
        to {
            top: 30px;
            opacity: 1;
        }
    }

    .maintenance-main main {
        margin-top: 80px;
    }

    .maintenance-main .container {
        width: initial;
    }

    .maintenance-main .hero-title {
        font-size: 26px;
    }

    .maintenance-main .maintenance-wrap .maintenance-item.expect{
        font-size: 14px;
    }

    .maintenance-main #contactus_infor {
        background: #666e;
        backdrop-filter: blur(10px);
    }

    .maintenance-main .maintenance-wrap .expect .time{
        color: initial !important;
    }
}