@media screen and (min-width: 320px) {
    .service-tab{
        font-size: var(--font-xxs);
    }
}

@media screen and (min-width: 375px) {
    html,body{
        font-size: var(--font-xs);
    }

    .banner-title{
        font-size: var(--font-lg);
    }

    .banner-subtitle{
        font-size: var(--font-md);
    }

    .logo{
        width: 120px;
    }
}

@media screen and (min-width: 414px) {

    .about-banner-wrapper{
        margin-top: -125%;
    }

    .service-tab{
        font-size: var(--font-xs);
    }

    .lang{
        right: 7%;
    }

}

@media screen and (min-width: 576px) {

    .logo{
        width: 150px;
    }

    .about-banner-wrapper{
        margin-top: -50%;
    }

    .direction-content .title{
        font-size: var(--font-lg);
    }

    .service-tab{
        font-size: var(--font-sm);
    }

    .offshore-box{
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (min-width: 768px) {
    .banner-title{
        font-size: var(--font-xl);
    }

    .banner-height{
        height: 400px;
    }

    footer{
        padding: 48px 0;
    }

    .footer-links{
        padding-left: 15px;
    }

    .footer-content .company{
        font-size: var(--font-md);
    }

    .home-service{
        font-size: var(--font-lg);
    }

    .home-page{
        margin-bottom: 0;
    }

    .home-page p{
        min-height: 85px;
    }

    .home-page:hover .read-more-arrow:before{
        width: 50%;
    }

    .map{
        top: 50%;
        width: 60%;
    }

    .about-banner-wrapper{
        margin-top: -40%;
        padding-top: 192px;
    }

    .service-tab{
        font-size: var(--font-md);
        padding: 8px;
    }

    .border-separator{
        border-right: 1px solid var(--text-gray);
    }

    .objective-item{
        height: 200px;
    }

    .offshore-box{
        width: 100%;
        min-height: 220px;
    }

    .offshore-summary{
        display: flex;
        padding: unset;
        border-top-left-radius: 50px;
        border-bottom-right-radius: 50px;
        overflow: hidden;
    }

    .summary-icon{
        width: 20%;
        margin: auto;
        text-align: center;
    }

    .summary-icon img{
        width: 50%;
    }

    .summary-text{
        width: 80%;
        padding: 32px;
        margin-bottom: unset;
    }

    .trust-item{
        position: relative;
        min-height: 275px;
        padding: 16px 32px;
    }

    .trust-item::after{
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 35%;
        background-image: linear-gradient(to bottom, var(--color-theme),var(--color-theme-light));
        transition: ease .3s;
    }

    .trust-item:hover::after{
        height: 60%;
        transition: ease .3s;
    }

    .offgrid-trust{
        margin-left: -30px;
    }

    .trust-label{
        margin-top: -80px;
    }

    .trust-role-overlay{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: var(--color-white);
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        background: var(--bg-gray-dark);
    }

    .border-box-title{
        width: 80%;
        margin-top: -28px;
    }

    .blog-management .content{
        min-height: 250px;
    }

    .blog-management .content p{
        min-height: 190px;
    }

    .blog-number{
        font-size: 80px;
    }

    .blog-number div{
        margin-top: -24px;
    }

    .service-list{
        font-size: var(--font-md);
    }

    .team-title{
        position: relative;
        font-size: 64px;
    }

    .lang{
        right: 5%;
    }
}

@media screen and (min-width: 992px) {

    .logo{
        width: 180px;
    }

    .menu-link{
        font-size: 18px;
    }

    header.scrolled .logo{
        display: none!important;
    }

    .banner-paragraph{
        width: 78%;
        margin: auto;
    }

    .menu-links .menu-link.mobile{
        display: none;
    }

    .menu-links{
        justify-content: center;
        margin: 16px auto;
    }

    header.scrolled .menu-links{
        margin: 0 auto;
    }

    .menu-links .menu-link{
        display: block;
        margin: auto 16px;
    }

    .banner-height{
        height: 550px;
    }

    .banner-title{
        font-size: var(--font-xxl);
        margin-bottom: 64px;
    }

    .home-service{
        font-size: var(--font-xl);
        padding: unset;
    }

    .home-page:hover .read-more-arrow:before{
        width: 100%;
    }

    .home-page .title{
        font-size: var(--font-md);
    }

    .direction-content{
        padding: 16px 32px;
    }

    .direction-content .title{
        font-size: var(--font-xl);
    }

    .purpose-overlay{
        position: absolute;
        top: 55%;
        left: 40%;
        width: 75%;
        transform: translate(-50%,-50%);
        color: var(--color-white);
    }

    .purpose-overlay-2{
        position: absolute;
        top: 50%;
        left: 70%;
        width: 50%;
        transform: translate(-50%,-50%);
        color: var(--color-white);
    }

    .purpose-overlay-2 .title{
        font-size: var(--font-lg);
    }

    .service-wrapper .nav-item{
        width: 30%;
    }

    .service-tab{
        font-size: var(--font-lg);
    }

    .labuan-overlay{
        position: absolute;
        color: var(--color-white);
        top: 65%;
        left: 80%;
        width: 35%;
        transform: translate(-50%,-50%);
    }

    .objective-item{
        display: flex;
        flex-wrap: wrap;
        align-content: center;
    }

    .financial-img{
        margin-left: -30px;
        margin-bottom: -30px;
    }


    .side-border{
        position: relative;
    }

    .side-border:after{
        content: "";
        position: absolute;
        top: 0;
        left: -5px;
        width: 5px;
        height: 50%;
        background: var(--color-theme);
    }

    .side-border:before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 100%;
        background-image: linear-gradient(to bottom, var(--color-theme) 0 30%,var(--color-theme-light));
    }

    .offshore-box{
        width: 100%;
    }

    .offshore-content{
        padding-left: 16px;
        padding-right: 16px;
    }

    .blog-overlay{
        margin-top: -80px;
    }

    .blog-role-item .content{
        padding: 16px 32px;
    }

    .border-box-title{
        width: 75%;
    }

    .blog-management .content{
        min-height: 320px;
    }

    .blog-management .content p{
        min-height: 160px;
    }

    .home-page .content p{
        min-height: 150px;
    }

    .lang{
        top: 15%;
    }

}

@media screen and (min-width: 1200px) {

    .sized-box{
        padding-top: 48px;
    }

    .map{
        width: 50%;
    }

    .about-banner-wrapper{
        margin-top: -20%;
        padding-top: 192px;
    }

    .purpose-overlay{
        top: 50%;
        left: 40%;
        width: 55%;
    }

    .purpose-overlay .title{
        font-size: var(--font-lg);
    }

    .purpose-overlay-2{
        width: 40%;
    }

    .purpose-overlay-2 .title{
        font-size: var(--font-xl);
    }

    .service-wrapper{
        margin-top: -10%;
    }

    .side-border:after{
        margin-left: -10px;
    }

    .side-border:before{
        margin-left: -10px;
    }

    .offshore-box{
        width: 95%;
    }

    .offshore-badge{
        width: 80px;
        height: 80px;
        margin: -56px auto 16px auto;
    }

    .summary-icon img{
        width: 30%;
    }

    .trust-item{
        min-height: 250px;
    }

    .border-box-title{
        width: 65%;
    }

    .trust-category{
        min-height: 180px;
    }

    .home-page .content{
        min-height: 415px;
    }
}

@media screen and (min-width: 1400px) {
    html,body{
        font-size: var(--font-sm);
    }

    .banner-title{
        font-size: var(--font-3xl);
    }

    .banner-subtitle{
        font-size: var(--font-lg);
    }

    .sized-box{
        padding-top: 64px;
    }

    .home-service{
        font-size: var(--font-xxl);
    }

    .map{
        width: 40%;
    }

    .service-tab{
        font-size: var(--font-xl);
        padding: 8px 16px;
    }

    .common-title{
        font-size: var(--font-md);
    }

    .about-banner-wrapper{
        margin-top: -18%;
    }

    .border-box-title{
        width: 60%;
    }

    .blog-number{
        font-size: 120px;
    }

    .blog-number div{
        margin-top: -36px;
    }

    .trust-category{
        min-height: 220px;
    }

    .trust-category .title{
        font-size: var(--font-lg);
    }

    .trust-item{
        min-height: 275px;
    }
}

@media screen and (min-width: 1600px) {

    .home-service{
        font-size: var(--font-3xl);
    }

    .about-banner-wrapper{
        margin-top: -15%;
    }

}