@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Readex+Pro:wght@160..700&display=swap');

body {
    font-family: "Readex Pro", serif !important;
}

select,
input {
    font-family: "Readex Pro", serif !important;
}

.heading-h1 {
    font-size: 72px;
    font-weight: 300;
    line-height: 82.8px;
}

.heading-h2 {
    font-size: 40px;
    font-weight: 200;
    line-height: 46px;
}

.heading-h4 {
    font-size: 28px;
    font-weight: 200;
    line-height: 37.24px;
}

.title-small {
    font-size: 18px;
    font-weight: 300;
    line-height: 20.7px;
}

.text-c1 {
    font-size: 20px;
    font-weight: 300;
    line-height: 27px;
}

.body-text {
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
}

.subtitle {
    font-size: 24px;
    font-weight: 200;
    line-height: 27.6px;
}

.numbering {
    font-size: 48px;
    font-weight: 200;
    line-height: 63.84px;
}

.numbering-small {
    font-size: 22px;
    font-weight: 700;
    line-height: 29.26px;
}

.title {
    font-size: 32px;
    font-weight: 300;
    line-height: 36.8px;
}

.title-caps {
    font-size: 18px;
    font-weight: 400;
    line-height: 23.94px;
}

.text-form {
    font-size: 16px;
    font-weight: 300;
    line-height: 21.28px;
}

.footer-header {
    font-size: 14px;
    font-weight: 500;
    line-height: 17.5px;
    letter-spacing: 0.01em;
    opacity: 0.5;
}

.footer-link {
    font-size: 12px;
    font-weight: 300;
    line-height: 15px;
    letter-spacing: 0.01em;
}

.field-label {
    font-size: 10px;
    font-weight: 300;
    line-height: 13.3px;
    opacity: 0.5;
}

.title-medium {
    font-size: 28px;
    font-weight: 300;
    line-height: 32.2px;
}

.breadcrumb-text {
    font-size: 16px;
    font-weight: 200;
    line-height: 21.28px;
}

.menu-link {
    font-size: 15px;
    font-weight: 300;
    line-height: 18.75px;
    letter-spacing: 0.01em;
}

.menu-item a {
    font-size: 15px;
    font-weight: 300;
    line-height: 18.75px;
    letter-spacing: 0.01em;
}

@media (max-width: 669px) {
    .heading-h1 {
        font-size: 48px;
        font-weight: 300;
        line-height: 55.2px;
    }

    .heading-h2 {
        font-size: 30px;
        font-weight: 200;
        line-height: 39.9px;
    }

    .heading-h4 {
        font-size: 22px;
        font-weight: 200;
        line-height: 29.26px;
    }

    .body-text {
        font-size: 15px;
        font-weight: 300;
        line-height: 20.25px;
    }

    .subtitle {
        font-size: 20px;
        font-weight: 200;
        line-height: 25px;
    }

    .numbering {
        font-size: 30px;
        font-weight: 200;
        line-height: 39.9px;
    }

    .numbering-small {
        font-size: 18px;
        font-weight: 700;
        line-height: 23.94px;
    }

    .title {
        font-size: 28px;
        font-weight: 300;
        line-height: 37.24px;
    }

    .title-caps {
        font-size: 20px;
        font-weight: 300;
        line-height: 26.6px;
    }

    .text-form {
        font-size: 16px;
        font-weight: 300;
        line-height: 21.28px;
    }

    .footer-header {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
        opacity: 0.5;
    }

    .footer-link {
        font-size: 14px;
        font-weight: 300;
        line-height: 17.5px;
        letter-spacing: 0.01em;
    }

    .field-label {
        font-size: 12px;
        font-weight: 300;
        line-height: 16.2px;
    }

    .title-medium {
        font-size: 20px;
        font-weight: 300;
        line-height: 26.6px;
    }

    .breadcrumb-text {
        font-size: 14px;
        font-weight: 200;
        line-height: 18.62px;
    }

    .menu-item a {
        font-size: 18px;
        font-weight: 300;
        line-height: 22.5px;
        letter-spacing: 0.01em;
    }
}

.color-white {
    color: #FFFFFF;
}

.color-000000 {
    color: #000000;
}

.color-333333 {
    color: #333333;
}

.color-121212 {
    color: #121212;
}

.color-3A3A3A {
    color: #3A3A3A;
}

.color-788292 {
    color: #788292;
}

.color-002C77 {
    color: #002C77;
}

.color-666666 {
    color: #666666;
}

.color-8590A2 {
    color: #8590A2;
}

.color-5D6571 {
    color: #5D6571;
}

.color-1D2125 {
    color: #1D2125;
}

.color-454F59 {
    color: #454F59;
}

.color-22272B {
    color: #22272B;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
p {
    margin: 0 !important;
}

a {
    text-decoration: none !important;
}

.page-template-template-home .header-button {
    padding: 12px 28px;
    /* border: 1px solid rgba(255, 255, 255, 1); */
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 44, 119, 1);
    border-radius: 55px;
}

.header-button,
.page-template-template-home .main-header.scroll-check .header-button {
    padding: 12px 28px;
    /* border: 1px solid rgba(255, 255, 255, 1); */
    background: rgba(0, 44, 119, 1);
    color: rgba(255, 255, 255, 1);
    border-radius: 55px;
}

.trans-button {
    background-color: transparent;
    border: 1px solid #FFFFFF;
    padding: 16px 34px;
    border-radius: 55px;
    text-decoration: none;
}

.trans-button:visited {
    color: #FFFFFF
}

.w-button1 {
    padding: 12px 55px !important;
    background: #FFFFFF !important;
    color: #002C77 !important;
    border-radius: 55px !important;
    text-align: center !important;
}

.apply-button {
    padding: 12px 59px;
    background: #002C77;
    color: #FFFFFF;
}

.section-padding {
    padding: 80px 100px;
    margin: 0 auto;
}

.inner-container {
    max-width: 1240px;
    margin: 0 auto;
}

/* PC */
@media (min-width: 1240px) and (max-width: 1439px) {
    .section-padding {
        padding: 80px 50px;
        margin: 0 auto;
    }

    .inner-container {
        max-width: 1240px;
        margin: 0 auto;
    }
}

/* PC */

/* TABLET */
@media (min-width: 1040px) and (max-width: 1239px) {
    .section-padding {
        padding: 80px 50px;
        margin: 0 auto;
    }

    .inner-container {
        max-width: 1040px;
        margin: 0 auto;
    }
}

@media (min-width: 670px) and (max-width: 1039px) {
    .section-padding {
        padding: 80px 24px;
        margin: 0 auto;
    }

    .inner-container {
        max-width: 800px;
        margin: 0 auto;
    }
}

/* TABLET */

/* MOBILE */
@media (max-width: 669px) {
    .section-padding {
        padding: 72px 24px;
        margin: 0 auto;
    }

    .inner-container {
        max-width: 600px;
        margin: 0 auto;
    }
}

/* MOBILE */

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-36 {
    margin-bottom: 36px !important;
}

.mb-39 {
    margin-bottom: 39px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mt-8 {
    margin-top: 8px;
}

/* header */

.main-header {
    width: 100%;
    background: #FFFFFF;
    position: sticky;
    z-index: 2;
    gap: 20px;
    top: 0;
    left: 0;
    padding-top: 19px !important;
    padding-bottom: 19px !important;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.page-template-template-home .main-header {
    background: transparent;
    position: absolute;
}

.page-template-template-home .main-header.scroll-check {
    position: fixed;
    background: #FFFFFF;
}

.page-template-template-home .main-header.scroll-check~.header-expand-nav {
    position: fixed;
}

.page-template-template-home .main-header.scroll-check.check,
.main-header.check {
    background: rgba(0, 44, 119, 1);
}

.main-header.check .logo-home-page img {
    filter: invert(43%) sepia(87%) saturate(1471%) hue-rotate(198deg) brightness(220%) contrast(104%) !important;
}

.main-header.check .header-button:hover,
.main-header.check.scroll-check .header-button:hover,
body:not(.page-template-template-home) .main-header .header-button:hover {
    color: #FFFFFF;
}

.main-header.check .header-button:hover,
.main-header.check.scroll-check .header-button:hover {
    color: rgba(0, 44, 119, 1);
}

.main-header.check .header-button,
.main-header.check.scroll-check .header-button {
    background: #FFFFFF;
    color: rgba(0, 44, 119, 1);
}

.main-header.check .main-nav-mobile svg line,
.main-header.check.scroll-check .main-nav-mobile svg line {
    stroke: #FFFFFF;
}

.main-header .main-nav {
    display: flex;
    flex-wrap: nowrap;
    gap: 30px;
}

.page-template-template-home .main-header .main-nav a {
    color: #FFFFFF;
    white-space: nowrap;
}

.page-template-template-home .main-header .main-nav a:hover {
    color: #FFFFFF !important;
}

.page-template-template-home .main-header.scroll-check .logo-home-page img,
body:not(.page-template-template-home) .main-header .logo-home-page img {
    filter: invert(43%) sepia(87%) saturate(1471%) hue-rotate(198deg) brightness(48%) contrast(104%);
}

body:not(.page-template-template-home) .main-header .main-nav a,
.page-template-template-home .main-header.scroll-check .main-nav a {
    color: rgba(0, 44, 119, 1);
    white-space: nowrap;
}

.main-header .main-nav a:hover,
.page-template-template-home .main-header.scroll-check .main-nav a:hover {
    color: rgba(0, 44, 119, 1) !important;
}

.main-header .main-nav-mobile {
    width: 40px;
    height: 40px;
    cursor: pointer;
    padding: 8px 0;
    display: none;
}


.page-template-template-home {}

.page-template-template-home .main-header .main-nav-mobile svg line,
.page-template-template-home .main-header.check.scroll-check .main-nav-mobile svg line {
    stroke: #FFFFFF;
}

.page-template-template-home .main-header.scroll-check .main-nav-mobile svg line,
.main-header .main-nav-mobile svg line {
    stroke: rgba(0, 44, 119, 1);
}

.header-expand-nav {
    display: none;
    background: #002C77;
    position: fixed;
    top: 90px;
    left: 0;
    z-index: 2;
    width: 100%;
    padding: 0 24px 35px;
}

.page-template-template-home .header-expand-nav {
    position: absolute;
}

.header-expand-nav .nav-mobile {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.header-expand-nav .nav-mobile a {
    color: #FFFFFF !important;
}

.header-expand-nav .nav-mobile a:hover {
    color: #FFFFFF !important;
}

.header-expand-nav .social {
    display: flex;
    flex-wrap: nowrap;
    gap: 24px;
    margin-top: 49px;
}

.header-expand-nav .copyright {
    margin-top: 83px;
}

.header-expand-nav .copyright .heading-h3.custom {
    margin-bottom: 15px !important;
    font-size: 24px;
    font-weight: 200;
    line-height: 30px;
    color: #FFFFFF;
    max-width: 208px;
}

.header-expand-nav .copyright .heading-h4.custom {
    font-size: 12px;
    font-weight: 300;
    line-height: 13.8px;
    color: rgba(255, 255, 255, 0.5);
    max-width: 164px;
}

@media (max-width: 1199px) {
    .main-nav.desktop {
        display: none;
    }

    .main-header .main-nav-mobile {
        display: block;
    }
}

@media (max-width: 669px) {
    .div-header-button {
        display: none;
    }
}


@media (max-width: 880px) {
    /* .main-header .main-nav.desktop {
        display: none;
    } */

    /* .main-header .main-nav-mobile {
        display: block;
    } */

    .header-expand-nav {
        display: none;
    }

    .menu-link {
        font-size: 18px;
        font-weight: 300;
        line-height: 22.5px;
        letter-spacing: 0.01em;
    }
}

/* header */

/* footer */

footer {
    background: #22272B;
    padding-bottom: 29px !important;
}

footer .main-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 103px;
}

footer .right-box {
    flex: 0 0 66%;
    display: flex;
    flex-wrap: nowrap;
    gap: 115px;
}

footer .right-box .link-list {
    width: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

footer .right-box .link-list:nth-child(1) {
    max-width: 158px;
}

footer .right-box .link-list:nth-child(2) {
    max-width: 148px;
}

footer .right-box .link-list .footer-header {
    white-space: nowrap;
}

footer .right-box .link-list .footer-link:hover {
    color: #FFFFFF;
}

footer .left-box {
    flex: 0 0 17%;
}

footer .image {
    width: 138px;
    height: 53px;
    margin-bottom: 25px;
}

footer .copyright {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

footer .copyright .right {
    display: flex;
    gap: 24px;
    flex-wrap: nowrap;
}

@media (min-width: 1040px) and (max-width: 1320px) {
    footer .right-box {
        gap: 50px;
    }
}

@media (max-width: 1039px) {
    footer .main-box {
        flex-wrap: wrap;
        gap: 60px;
        margin-bottom: 40px;
    }

    footer .image {
        margin-bottom: 38px;
    }

    footer .main-box .right-box {
        gap: 40px;
        flex-wrap: wrap;
    }

    footer .main-box .right-box .link-list {
        flex: 100%;
        max-width: 100%;
    }

    footer .main-box .right-box,
    footer .main-box .left-box {
        flex: 100%;
    }
}

@media (max-width: 669px) {
    footer {
        padding-bottom: 25px !important;
    }

    footer .copyright {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 62px;
    }

    footer .copyright .left {
        align-items: center;
        padding: 0px 65px;
        text-align: center;
        margin: 0 auto;
    }
}


/* footer */

/* banner-title */

#homepage .swiper.homepage-banner {
    width: 100%;
    /* height: 821px; */
    overflow: hidden;
    /* margin-top: -90px; */
}

#homepage .swiper.homepage-banner .pagination-ver-custom {
    display: flex;
    max-width: 3px;
    gap: 9px;
    flex-direction: column;
    position: absolute;
    bottom: 95px;
    left: auto;
    right: 100px;
}

@media (min-width: 1040px) and (max-width: 1439px) {
    #homepage .swiper.homepage-banner .pagination-ver-custom {
        right: 50px;
    }
}

@media (max-width: 1039px) {
    #homepage .swiper.homepage-banner .pagination-ver-custom {
        right: 24px;
    }
}

@media (max-width: 669px) {
    #homepage .swiper.homepage-banner {
        height: 580px;
    }

    #homepage .swiper.homepage-banner .pagination-ver-custom {
        height: 100%;
        bottom: 0;
        justify-content: center;
    }

    #homepage .banner {
        height: calc(100% - 144px);
    }

    #homepage .swiper.homepage-banner .inner-container {
        height: 100%;
    }

    #homepage .banner-title {
        margin-top: 20px;
        padding: 0px !important;
        display: flex;
        align-items: center;
        height: 100%;
    }
}

#homepage .swiper.homepage-banner .pagination-ver-custom .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 1) !important;
    width: 3px !important;
    height: 57px !important;
}

#homepage .banner {
    background-image: url('https://cdp.vinova.sg/wp-content/uploads/2024/11/image.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    clip-path: polygon(0% 0%, 100% 0, 100% 100%, 50% 98%, 0% 100%);
    /* width: 1440px; */
    /* height: 821px; */
}

#homepage .banner-title {
    padding: 397px 0 15px;
    max-width: 721px;
    padding-left: 2px;
}

/* banner-title */

/* info */

#homepage .info .main {
    display: flex;
    justify-content: space-between;
}

#homepage .info .main .left-box,
#homepage .info .main .right-box {
    flex: 0 0 calc((100% - 177px) / 2);
}

#homepage .info .cross {
    padding-top: 110px;
}

#homepage .info .main .right-box {
    display: flex;
    flex-direction: column;
    align-items: end;
    text-align: right;
}

#homepage .info .main svg {
    margin-bottom: 16px;
}

#homepage .info .main h2 {
    max-width: 330px;
}

#homepage .info .main .text-c1 {
    max-width: 430px;
}

#homepage .info .main .list-link {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#homepage .info .main .left-box .list-link {
    padding-left: 16px;
    border-left: 1px solid color(srgb 0 0 0 / 0.20);
}

#homepage .info .main .right-box .list-link {
    padding-right: 16px;
    border-right: 1px solid color(srgb 0 0 0 / 0.20);
}

#homepage .info .main .link-item {
    text-decoration: none;
    color: #002C77;
}

@media (min-width: 670px) and (max-width: 1239px) {

    #homepage .info .main .left-box,
    #homepage .info .main .right-box {
        flex: 0 0 calc((100% - 100px) / 2);
    }
}

@media (max-width: 669px) {

    #homepage .info .main .right-box {
        margin-top: 32px;
    }

    #homepage .info .main h2 {
        max-width: 100%;
        margin-bottom: 4px !important;
    }

    #homepage .info .cross {
        display: none;
    }

    #homepage .info .main {
        display: block;
    }

    #homepage .info .main .right-box {
        display: block;
        text-align: left;
    }

    #homepage .info .main .right-box .list-link {
        padding-left: 16px;
        border-left: 1px solid color(srgb 0 0 0 / 0.20);
        padding-right: 0px;
        border-right: 0px;
    }

    #homepage .info .main svg {
        margin-bottom: 4px;
    }
}

/* info */

.hr {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* our vision */

.our-vision .heading-h2 {
    max-width: 764px;
    padding-bottom: 60px;
}

.our-vision .heading-h2 span {
    color: #002C77;
}

.page-template-template-careers .our-vision .heading-h2 {
    padding-bottom: 21px;
}

.page-template-template-careers .our-vision .subtitle {
    padding-bottom: 39px;
}

.mask-image {
    -webkit-mask-image: url('https://cdp.vinova.sg/wp-content/uploads/2024/11/mask-image.png');
    mask-image: url('https://cdp.vinova.sg/wp-content/uploads/2024/11/mask-image.png');
    mask-size: 100%;
    mask-repeat: no-repeat;
    max-height: 333px;
    width: 100%;
    object-fit: cover;
    object-position: top;
    mask-size: 100% 333px;
    margin-bottom: 43px;
}

.our-vision .box-desktop {
    display: flex;
    justify-content: space-between;
    gap: 94px;
}

.our-vision .box-mobile {
    display: none;
}

.our-vision .box-mobile .div-title {
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #B3B9C4;
}

.our-vision .box-mobile .div-title:not(.collapsed) {
    padding-bottom: 8px;
    border: none;
}

.our-vision .box-mobile .div-title .icon {
    transform: rotate(0deg);
    transition-duration: 1s;
}

.our-vision .box-mobile .div-title:not(.collapsed) .icon {
    transform: rotate(180deg);
    transition-duration: 1s;
}

.our-vision .box-mobile .div-des {
    border-bottom: 1px solid #B3B9C4;
}

.our-vision .box-mobile .div-des .box-inner {
    padding: 8px 16px 16px;
}


.our-vision .box-desktop .inner-box {
    max-width: 320px;
}

@media (min-width: 670px) and (max-width: 1239px) {
    .our-vision .box-desktop {
        gap: 40px;
    }
}

@media (max-width: 669px) {
    .page-template-template-careers .our-vision {
        padding-bottom: 48px;
    }

    .our-vision .box-desktop {
        display: none;
    }

    .our-vision .box-mobile {
        display: block;
    }

    .our-vision .box-mobile .title-small {
        color: #000000;
        font-size: 22px;
        font-weight: 200;
        line-height: 29.26px;
    }

    .mask-image {
        -webkit-mask-image: url('https://cdp.vinova.sg/wp-content/uploads/2024/11/mask-image-mobile.png');
        mask-image: url('https://cdp.vinova.sg/wp-content/uploads/2024/11/mask-image-mobile.png');
        mask-size: 100%;
        mask-repeat: no-repeat;
        max-height: 327px;
        width: 100%;
        object-position: top;
        mask-size: 100% 327px;
        min-height: 247px;
        max-height: 247px;
        margin-bottom: 14px;
    }

    .our-vision .heading-h2 {
        padding-bottom: 40px;
    }

    .page-template-template-careers .our-vision .heading-h2 {
        padding-bottom: 16px;
    }

    .page-template-template-careers .our-vision .subtitle {
        padding-bottom: 24px;
    }
}

/* our vision */

/* achievements */

.achievements {
    background-image: url('https://cdp.vinova.sg//wp-content/themes/cdp/assect/img/background.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 71px;
    padding-bottom: 73px;
}

.achievements .inner-container {
    display: flex;
    flex-direction: column;
    gap: 45px;
}

.achievements .heading-h2 {
    max-width: 707px;
}

.achievements .box-list {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: center;
    margin-top: 27px;
}

.achievements .box-list .icon svg line {
    stroke: #FFFFFF;
}

.display-desktop {
    display: flex;
}

.display-mobile {
    display: none;
}

.achievements .box-item {}

@media (max-width: 1039px) {
    .achievements .box-list {
        flex-wrap: wrap;
        row-gap: 32px;
        column-gap: 60px;
    }

    .achievements .box-item {
        flex: 0 0 calc((100% - 60px) / 2);
    }

    .achievements .icon {
        display: none;
    }
}

@media (max-width: 669px) {
    .achievements {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .achievements .inner-container {
        gap: 32px;
    }

    .achievements .box-list {
        margin-top: 0px;
    }

    .display-desktop {
        display: none;
    }

    .display-mobile {
        display: flex;
    }

    .achievements .box-item .subtitle {
        font-size: 14px;
        font-weight: 200;
        line-height: 18.62px;
    }
}

/* achievements */

/* our-client */

.our-client {
    padding-bottom: 78.7px;
}

.our-client .title {
    text-align: center;
    margin-bottom: 32px;
}

.our-client .client-list {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    gap: 60px 90px;
}

.our-client .client-list .client-item {
    text-align: center;
}

.our-client .client-list-mobile {
    display: none;
}

.loop-carousel {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.loop-carousel-wrapper {
    display: inline-flex;
    justify-content: space-around;
    /* gap: 48px; */
}

.loop-carousel:not([data-direction]) .loop-carousel-wrapper {
    animation: 20s loopCarouselLeft infinite linear;
}

.partner-mobile .loop-carousel:not([data-direction]) .loop-carousel-wrapper {
    animation: 20s loopCarouselRight infinite linear;
}


.loop-carousel:hover .loop-carousel-wrapper {
    animation-play-state: paused;
}

.our-client .client-list-mobile .client-item {
    min-width: 150px;
    margin: auto 24px;
    text-align: center;
}

@keyframes loopCarouselLeft {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes loopCarouselRight {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@media (min-width: 670px) and (max-width: 1039px) {
    .our-client .client-list {
        gap: 30px 45px;
    }
}

@media (max-width: 669px) {
    .our-client .client-list {
        display: none;
    }

    .our-client .client-list-mobile {
        display: block;
    }

    .our-client .title {
        margin-bottom: 24px;
    }

    .our-client {
        padding-bottom: 0px;
    }
}

/* our-client */

/* testimonials */

#homepage .testimonials {
    padding-bottom: 0px;
}

.testimonials .box-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
}

.testimonials .testimonialSwiper .swiper-slide .item {
    padding: 43px 40px 88px;
    background-color: #F7F8F9;
    border-radius: 5px;
}

.testimonials .testimonialSwiper .swiper-slide .item .info {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.testimonials .testimonialSwiper .info .image {
    width: 58px;
    height: 58px;
    border-radius: 55px;
}

.testimonials .testimonialSwiper .info .name {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0px;
}

.page-template-template-home .testimonials .testimonialSwiper .info .name .title-small {
    font-weight: 700 !important;
}

.testimonials .testimonialSwiper .rate {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    margin-bottom: 10px;
}

.pag-custom {
    margin-top: 25px;
    position: static !important;
}

.swiper-pagination-bullet {
    width: 24px !important;
    height: 6px !important;
    border-radius: 5px !important;
}

.swiper-pagination-bullet-active {
    background: #002C77 !important;
}

@media (max-width: 10000px) {
    #homepage .testimonials {
        padding-bottom: 0px;
    }
}

@media (max-width: 669px) {
    .view-all {
        display: none;
    }

    .testimonials .testimonialSwiper .swiper-slide .item {
        padding: 10px 25px 35px;
    }
}

/* testimonials */

/* blog */

.blog .box-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
}

.blog .blog-list {
    display: flex;
    gap: 37px 24px;
    flex-wrap: wrap;
}

.blog .blog-item {
    flex: 0 0 calc((100% - 48px) / 3);
    border-radius: 2px;
}

.blog .image {
    max-height: 249px;
    overflow: hidden;
    margin-bottom: 4px;
}

.blog .image img {
    width: 100%;
    object-fit: cover;
    transition: 0.4s ease all;
}

.blog .blog-item a:hover>.image img {
    scale: 1.12;
}

.blog .category {
    margin-bottom: 4px;
    font-variant: small-caps;
}

.blog .title-small {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (min-width: 670px) and (max-width: 1039px) {
    .blog .blog-item {
        flex: 0 0 calc((100% - 40px) / 2);
    }
}

@media (max-width: 669px) {
    .blog .blog-list {
        gap: 32px;
    }

    .blog .blog-item {
        flex: 0 0 100%;
    }

    .blog .image {
        max-height: 205px;
    }

    .blog .category {
        font-size: 14px;
        font-weight: 200;
        line-height: 18.62px;
    }

    .blog .title-small {
        font-size: 16px;
        font-weight: 300;
        line-height: 20px;
    }
}

/* blog */

/* blog detail */

#careers .breadcrumb {
    display: none;
}

.breadcrumb {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 40px !important;
    flex-wrap: nowrap !important;
    /* overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical; */
}

.breadcrumb svg {
    min-width: 10px;
    min-height: 14px;
}

.breadcrumb .breadcrumb-text:first-child {
    white-space: nowrap;
    /* min-width: 150px; */
    max-width: 300px;
}

.breadcrumb .breadcrumb-text.last {
    /* opacity: 0.5; */
    color: rgb(0 0 0 / 50%);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

@media (max-width: 699px) {
    .breadcrumb {
        margin-bottom: 32px !important;
    }
}

.case-studies-detail .blog-banner {
    padding-bottom: 24px;
}

.blog-banner .heading-h2 {
    margin-bottom: 80px !important;
}

.blog-banner .image {
    height: 412px;
}

.blog-banner .image img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 412px;
    object-fit: cover;
}

@media (max-width: 699px) {
    .blog-banner {
        padding-bottom: 40px;
    }

    .case-studies-detail .blog-banner {
        padding-bottom: 40px;
    }

    .blog-banner .heading-h2 {
        margin-bottom: 40px !important;
    }

    .blog-banner .image {
        height: 194px;
    }

    .blog-banner .image img {
        height: 194px;
    }
}

.detail {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

.detail .main {
    max-width: 816px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.detail .main .text-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.related-articles .heading-h2 {
    margin-bottom: 32px !important;
}

@media (max-width: 699px) {
    .related-articles .heading-h2 {
        margin-bottom: 27px !important;
    }
}

/* blog detail */

/* our work detail */



/* our work detail */

/* contact-form */

.contact-form {
    background: #002C77;
}

.contact-form .main-box {
    display: flex;
    justify-content: space-between;
}

.contact-form .main-box .left-box {
    flex: 0 0 36%;
}

.contact-form .main-box .left-box .heading-h2 {
    margin-bottom: 39px !important;
}

.contact-form .main-box .left-box .body-text {
    padding-right: 90px;
}

.contact-form .main-box .right-box {
    flex: 0 0 61%;
    display: flex;
    justify-content: space-between;
    gap: 8px 11px;
    flex-wrap: wrap;
}

.contact-form .main-box .right-box form {
    flex: 0 0 61%;
    display: flex;
    justify-content: space-between;
    gap: 8px 11px;
    flex-wrap: wrap;
}

.contact-form .main-box .right-box form .d-flex span {
    display: none;
}

.contact-form .right-box .input {
    background: #406199;
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 0px;
    width: 100%;
    /* height: 100%; */
    padding: 19px 10px 5px;
    color: #FFFFFF;
}

.wpcf7-not-valid-tip {
    color: #FFFFFF !important;
    font-size: 12px !important;
}

.contact-form .right-box .input-name,
.contact-form .right-box .input-email,
.contact-form .right-box .input-phone {
    flex: 0 0 calc((100% - 22px) / 3);
    /* height: 45px; */
}

.contact-form .right-box .input-subject {
    flex: 0 0 100%;
    /* height: 45px; */
}

.contact-form .right-box .input-des {
    flex: 0 0 100%;
    /* height: 165px; */
}

.contact-form .box-input {
    position: relative;
}

.contact-form .floating-label {
    position: absolute;
    top: 10px;
    left: 16px;
    opacity: 50%;
    pointer-events: none;
    transition: 0.2s ease all;
}

form .input:focus~form .floating-label,
form .input:not(:placeholder-shown)~form .floating-label {
    top: 6px;
    left: 10px;
    font-size: 10px;
    font-weight: 300;
    line-height: 13.3px;
    pointer-events: none;
    transition: 0.2s ease all;
}

.input:focus~.floating-label,
.box-input:focus-within .floating-label,
.input:not(:placeholder-shown)~.floating-label,
.floating-label.active {
    top: 6px;
    left: 10px;
    font-size: 10px;
    font-weight: 300;
    line-height: 13.3px;
    pointer-events: none;
    transition: 0.2s ease all;
}

@media (max-width: 669px) {
    .contact-form .main-box {
        justify-content: start;
        flex-wrap: wrap;
        gap: 48px;
    }

    .contact-form .main-box .right-box form {
        justify-content: start;
        flex-wrap: wrap;
    }

    .contact-form .main-box .right-box,
    .contact-form .main-box .left-box {
        flex: 100%;
    }

    .contact-form .main-box .left-box .heading-h2 {
        margin-bottom: 16px !important;
    }

    .contact-form .right-box .box-input {
        flex: 100%;
    }

    .contact-form .right-box .d-flex {
        margin-top: 0px;
    }

    .contact-form .main-box .left-box .body-text {
        padding-right: 0px;
    }
}

/* contact-form */

/* about */

/* banner */

#digital-transformation .banner .main {
    margin-bottom: 24px;
}

.banner .main {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

#about .banner,
#business .banner,
#digital-transformation .banner {
    padding-bottom: 0px;
}

.banner .main .title {
    flex: 0 0 51%;
}

.banner .main .image {
    flex: 0 0 38%;
    max-height: 306px;
}

.banner .main img {
    -webkit-mask-image: url('https://cdp.vinova.sg//wp-content/themes/cdp/assect/img/mask-image-about.png');
    mask-image: url('https://cdp.vinova.sg//wp-content/themes/cdp/assect/img/mask-image-about.png');
    mask-size: 100%;
    mask-repeat: no-repeat;
    /* max-height: 333px; */
    width: 100%;
    object-fit: cover;
    object-position: top;
    height: 100%;
    /* mask-size: 100% 333px; */
}



.banner .subtitle,
.banner .heading-h2 {
    /* display: none; */
}

.banner .subtitle,
.banner .heading-h2 {
    display: flex;
}

main:not(#business) .banner .subtitle.box-title-small {
    /* display: none !important; */
}

#business .banner .heading-h1 {
    max-width: 626px;
}

#business .banner .main {
    margin-bottom: 24px;
}

#business .banner .heading-h2 {
    max-width: 766px;
}

.banner .subtitle div {
    background: #000000;
    border: 1px solid #000000;
    border-radius: 55px;
    padding: 4px 16px;
    color: #FFFFFF;
    margin-bottom: 4px;
}

@media (max-width: 1039px) {
    .banner .main {
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: flex-start;
        gap: 24px;
    }

    .banner .main .title {
        flex: 100%;
    }

    .banner .main .image {
        flex: 100%;
        max-height: 600px;
    }

    .banner .main img {
        height: 500px;
    }

    #business .banner .main {
        margin-bottom: 24px;
    }

    #business .banner .subtitle div {
        margin-bottom: 24px;
        font-size: 16px;
        font-weight: 200;
        line-height: 21.28px;
    }
}

@media (min-width: 500px) and (max-width: 669px) {
    .banner .main .image {
        height: 210px;
    }

    .banner .main img {
        height: 410px;
    }
}

@media (min-width: 450px) and (max-width: 499px) {
    .banner .main img {
        height: 310px;
    }
}

@media (max-width: 499px) {
    .banner .main img {
        height: 210px;
    }
}

/* banner */

/* certification and partner */

.certification {
    padding-bottom: 0px;
}

.certification .main-box {
    display: flex;
    flex-direction: column;
    gap: 76px;
}

.certification .main-box .box-title .title {
    margin-bottom: 10px;
}

.certification .main-box .title-medium {
    margin-bottom: 27px;
}

.certification .main-box .list {
    display: grid;
    align-items: center;
    gap: 36px;
}

.certification .main-box .certified-by .list {
    grid-template-columns: auto auto auto auto auto auto auto;
}

.certification .main-box .partner .list {
    grid-template-columns: auto auto auto auto auto auto;
}

.certification .main-box .certified-by-mobile,
.certification .main-box .partner-mobile {
    /* display: none; */
}

.certification .main-box .certified-by,
.certification .main-box .partner {
    display: none;
}

.certification .certified-by-mobile .image,
.certification .partner-mobile .image {
    min-width: 150px;
    margin: auto 18.33px;
    text-align: center;
}

@media (max-width: 699px) {
    .certification .main-box .title-medium {
        margin-bottom: 29px;
    }

    .certification .main-box .partner-mobile .title-medium {
        margin-bottom: 21px;
    }

    .certification .main-box .certified-by,
    .certification .main-box .partner {
        display: none;
    }

    .certification .main-box .certified-by-mobile,
    .certification .main-box .partner-mobile {
        display: block;
    }

    .certification .main-box {
        gap: 38px;
    }

    .certification .main-box .partner-mobile {
        margin-top: 20px;
    }
}

/* certification and partner */

/* about */

/* careers */

/* banner */

#careers .banner .heading-h1,
#careers .banner .heading-h2 {
    max-width: 746px;
}

.container-image {
    width: 100%;
    max-height: 412px;
    overflow: hidden;
    object-fit: cover;
    object-position: top;
}

.container-image img {
    width: 100%;
    /* height: 100%; */
}

@media (max-width: 699px) {
    #careers .banner {
        padding-bottom: 40px;
    }

    .container-image {
        max-height: 200px;
    }
}

/* banner */

/* job opening */

.job {
    padding-top: 0px;
}

.job .heading-h2 {
    margin-bottom: 19px !important;
}

.job .main-box {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.job .main-box .tabs {
    display: flex;
    flex-direction: column;
    gap: 31px;
    flex: 0 0 23%;
}

.job .main-box .job-list {
    display: flex;
    flex-direction: column;
    flex: 0 0 65%;
}

.job .main-box .job-list .content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.job .main-box .job-list .div-collapse:not(.collapsed) .icon {
    transform: rotate(180deg);
    transition-duration: 1s;
}

.job .main-box .job-list .content .icon {
    transition-duration: 1s;
}

.job .main-box .job-list .div-collapse {
    display: flex;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #B3B9C4;
}

.job .main-box .job-list .div-collapse:not(.collapsed) {
    border-bottom: none;
}

.job .main-box .job-list .div-collapse:not(.collapsed) .subtitle {
    color: #002C77;
}

.job .main-box .job-list .div-des .body {
    padding: 18px 29px 36px 15px;
    border-bottom: 1px solid #B3B9C4;
}

.job .main-box .job-list .div-des .body .text-des {
    margin-bottom: 19px;
}

.job .main-box .job-list .content {
    overflow: hidden;
    display: none;
}

.job .main-box .tabs .tab-link.active {
    color: #002C77;
}

.job .main-box .tabs::-webkit-scrollbar {
    width: 10px;
    height: 5px;
    border-radius: 20px;
}

/* Track */
.job .main-box .tabs::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
.job .main-box .tabs::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
.job .main-box .tabs::-webkit-scrollbar-thumb:hover {
    background: #555;
}

@media (max-width: 800px) {
    .job .main-box {
        flex-direction: column;
        flex-wrap: wrap;
        gap: 24px;
        overflow: hidden;
    }

    .job .main-box .tabs {
        flex-direction: row;
        flex-wrap: nowrap;
        white-space: nowrap;
        flex: 0 0 100%;
        overflow-x: auto;
        max-width: 100%;
        padding-bottom: 5px;
        gap: 16px;
    }

    .job .main-box .job-list {
        flex: 0 0 100%;
    }

    .job .main-box .job-list .div-des .body {
        padding: 16px 16px 28px;
    }

    .job .main-box .job-list .div-des .body .text-des {
        margin-bottom: 16px;
    }

    .job .main-box .job-list .div-collapse:not(.collapsed) {
        padding-bottom: 8px;
    }
}

/* job opening */

/* careers */

/* Business Consultancy Services */

.service {
    padding-bottom: 0px;
}

.service .heading-h2 {
    margin-bottom: 32px !important;
}

.service .service-list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

.service .service-list a {
    flex: 0 0 calc((100% - 24px) / 2);
}

.service .service-list .item {

    padding: 36px 45px 112px;
    background: #F7F8F9;
    transition-duration: 0.5s;
}

.service .service-list .item svg {
    display: none;
    transition-duration: 0.5s;
}

.service .service-list .item:hover svg {
    display: block;
    margin-top: 90px;
    transition-duration: 0.5s;
}

.service .service-list .item:hover {
    background: #002C77;
    padding: 36px 45px;
    transition-duration: 0.5s;
}

.service .service-list .item:hover .title,
.service .service-list .item:hover .body-text {
    color: #FFFFFF;
    transition-duration: 0.5s;
}

.service .service-list .item .title {
    max-width: 348px;
}

.service .service-list .item .title {
    margin-bottom: 32px;
}

@media (max-width: 699px) {
    .service .heading-h2 {
        margin-bottom: 16px !important;
    }

    .service .service-list {
        flex-direction: column;
        gap: 8px;
    }

    .service .service-list .item {
        padding: 36px 31px;
    }

    .service .service-list .item:hover {
        padding: 36px 31px;
    }

    .service .service-list .item .title {
        margin-bottom: 16px;
    }

    .service .service-list .item svg {
        display: block;
        margin-top: 16px;
        stroke: #002C77;
        width: 32px;
        height: 32px;
    }

    .service .service-list .item:hover svg {
        margin-top: 16px;
    }

    .service .service-list .item svg path {
        stroke: #002C77;
        transition-duration: 0.5s;
    }

    .service .service-list .item:hover svg path {
        stroke: #FFFFFF;
        transition-duration: 0.5s;
    }
}

/* Business Consultancy Services */

/* Human Resource Consultancy */

.hr-banner {
    padding-bottom: 0px;
}

.hr-banner .breadcrumb {
    margin-bottom: 40px;

}

.hr-banner .banner-title {
    margin-bottom: 72px;
}

.hr-banner .banner-title .heading-h1 {
    max-width: 1128px;
}

.hr-banner .banner-title .heading-h2 {
    max-width: 826px;
}

.hr-banner .d-flex {
    gap: 40px;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 80px;
}

.banner-image {
    /* position: relative; */
    height: 412px;
}

.banner-image img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 412px;
    object-fit: cover;
}

@media (max-width: 699px) {
    .hr-banner .breadcrumb {
        margin-bottom: 32px !important;
        /* overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical; */
    }

    .hr-banner .banner-title {
        margin-bottom: 40px;
    }

    .hr-banner .d-flex {
        margin-bottom: 40px;
        flex-wrap: wrap;
        gap: 24px 40px;
    }

    .hr-banner .d-flex .subtitle {
        font-size: 16px;
    }

    .hr-banner .d-flex .line {
        display: none;
    }

    .hr-banner .d-flex .divine-box {
        flex: 0 0 calc((100% - 40px) / 2);
    }

    .banner-image {
        max-height: 200px;
    }

    .banner-image img {
        max-height: 200px;
    }
}

.proven-approach .heading-h2 {
    margin-bottom: 13px !important;
}

.proven-approach .subtitle {
    margin-bottom: 48px;
}

.trangle-section.d-flex.desktop {
    flex-wrap: nowrap;
    gap: 0px;
}

.trangle-section.d-flex.desktop .trangle-div {
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    flex: 0 0 24%;
    display: flex;
    justify-content: center;
    padding: 108.86px 0;
    margin-left: -61px;
}

.trangle-section.d-flex.desktop .trangle-div:first-child {
    margin-left: 0px !important;
}

.trangle-section.d-flex.desktop .trangle-div .inside {
    display: flex;
    flex-direction: column;
    margin: 0 22% 0 38%;
    gap: 6px;
}

.trangle-section.d-flex.desktop .trangle-div .inside img {
    width: 32px;
    height: 32px;
    margin: 0 !important;
}

.trangle-section.d-flex.desktop .trangle-div .inside .title-small {
    white-space: nowrap;
}

.trangle-section.d-flex.desktop .trangle-div:nth-child(1),
.trangle-section.d-flex.mobile .trangle-div:nth-child(1) {
    background: color(srgb 0.76 0.84 0.97 / 0.1);
}

.trangle-section.d-flex.desktop .trangle-div:nth-child(2),
.trangle-section.d-flex.mobile .trangle-div:nth-child(2) {
    background: color(srgb 0.76 0.84 0.97 / 0.2);
}

.trangle-section.d-flex.desktop .trangle-div:nth-child(3),
.trangle-section.d-flex.mobile .trangle-div:nth-child(3) {
    background: color(srgb 0.76 0.84 0.97 / 0.3);
}

.trangle-section.d-flex.desktop .trangle-div:nth-child(4),
.trangle-section.d-flex.mobile .trangle-div:nth-child(4) {
    background: color(srgb 0.76 0.84 0.97 / 0.4);
}

.trangle-section.d-flex.desktop .trangle-div:nth-child(5),
.trangle-section.d-flex.mobile .trangle-div:nth-child(5) {
    background: color(srgb 0.76 0.84 0.97 / 0.5);
}

.trangle-section.d-flex.mobile {
    display: none !important;
}

.trangle-section.d-flex.mobile {
    flex-wrap: nowrap;
    gap: 0px;
}

.trangle-section.d-flex.mobile .trangle-div {
    clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0 75%, 0 0, 50% 25%);
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    padding: 67px 113px 60px;
    margin-top: -30px;
}

.trangle-section.d-flex.mobile .trangle-div .inside {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}

.trangle-section.d-flex.mobile .trangle-div .inside div {
    white-space: nowrap;
}

.trangle-section.d-flex.mobile .trangle-div:first-child {
    margin-top: 0px !important;
}

.proven-approach .collapse-menu {
    margin-top: 48px;
}

.proven-approach .collapse-menu .div-item {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid #B3B9C4;
}

.proven-approach .collapse-menu .div-item:not(.collapsed) {
    border-bottom: none;
}

.proven-approach .collapse-menu .div-item-des {
    padding: 0 81px 16px 0;
    border-bottom: 1px solid #B3B9C4;
}

@media (min-width: 1040px) and (max-width: 1239px) {
    .trangle-section.d-flex.desktop .trangle-div {
        margin-left: -52px;
        padding: 94.86px 0;
    }
}

@media (min-width: 830px) and (max-width: 1039px) {
    .trangle-section.d-flex.desktop .trangle-div {
        margin-left: -40px;
        padding: 65.86px 0;
    }
}

@media (max-width: 829px) {
    .trangle-section.d-flex.desktop {
        display: none !important;
    }

    .trangle-section.d-flex.mobile {
        display: flex !important;
        flex-direction: column;
    }

    .proven-approach .subtitle {
        margin-bottom: 40px;
    }

    .proven-approach .collapse-menu {
        margin-bottom: 40px;
    }

    .proven-approach .collapse-menu .div-item {
        padding: 16px;
    }

    .proven-approach .collapse-menu .div-item-des {
        padding: 0px 16px 16px;
    }

    .trangle-section.d-flex.mobile .trangle-div .inside svg {
        width: 24px;
        height: 24px;
    }

    .trangle-section.d-flex.mobile .trangle-div .inside img {
        width: 24px;
        height: 24px;
        min-height: 24px !important;
        min-width: 24px !important;
    }
}

@media (max-width: 669px) {
    .proven-approach .collapse-menu .div-item .title-medium {
        font-weight: 200;
    }
}

section.comp {
    background: #EDF3FD;
    padding-top: 68px;
    padding-bottom: 68px;
}

section.comp .heading-h2 {
    margin-bottom: 31px !important;
}

section.comp .subtitle {
    margin-bottom: 32px;
}

section.comp .box-list {
    display: flex;
    gap: 11px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

section.comp .box-list .box-item {
    flex: 0 0 calc((100% - 11px) / 2);
    background: linear-gradient(90deg, rgba(0, 44, 119, 0.1) 0%, rgba(0, 44, 119, 0) 100%);
    padding: 16px;
    gap: 17px;
    display: flex;
    align-items: center;
}

section.comp .box-list .box-item img {
    width: 32px;
    height: 32px;
}

section.comp .body-text {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (max-width: 669px) {
    section.comp {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    section.comp .heading-h2 {
        max-width: 220px;
        margin-bottom: 26px !important;
    }

    section.comp .subtitle {
        margin-bottom: 26px;
    }

    section.comp .box-list .box-item {
        flex: 0 0 100%;
    }

    section.comp .box-list .box-item img {
        width: 32px;
        height: 32px;
    }

    section.comp .box-list .box-item svg {
        min-width: 32px;
        min-height: 32px;
    }

    section.comp .box-list {
        margin-bottom: 26px;
        gap: 16px;
    }
}

/* Human Resource Consultancy */

/* grant available */

.grant-available-banner {
    background: url("https://cdp.vinova.sg//wp-content/themes/cdp/assect/img/grant-available-banner.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 101px;
    padding-bottom: 109px;
}

.grant-available-banner .heading-h2 {
    margin-bottom: 19px !important;
}

.grant-available-banner .subtitle {
    margin-bottom: 32px;
    max-width: 538px;
}

.grant-available-banner .grant-button {
    padding: 16px 42px;
    border: 1px solid #FFFFFF;
    border-radius: 55px;
}

.grant-available-banner .grant-button:hover {
    color: #FFFFFF !important;
}

@media (max-width: 669px) {
    .grant-available-banner {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .grant-available-banner .heading-h2 {
        margin-bottom: 16px !important;
    }

    .grant-available-banner .subtitle {
        margin-bottom: 16px;
    }
}

.grant-available-descriptions {
    padding-top: 80px;
    padding-bottom: 80px;
}

.grant-available-descriptions .inner-container .grant-content {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.grant-available-descriptions .inner-container .grant-content-no-tab {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.grant-available-descriptions .grant-tabs {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-bottom: 1px solid #0000001a;
    margin-bottom: 80px;
    margin-top: -48px;
    overflow-x: auto;
}

.grant-available-descriptions .grant-tabs .grant-tab {
    flex: 0 0 50%;
    color: #00000080;
    padding: 0px 115px 22px;
    white-space: nowrap;
}

.grant-available-descriptions .grant-tabs .grant-tab.active {
    color: #002C77;
    border-bottom: 1px solid #002C77;
}

.grant-available-descriptions .grant-box-1 .heading-h2 {
    margin-bottom: 14px !important;
}

.grant-available-descriptions .grant-box-2 .heading-h4 {
    margin-bottom: 16px !important;
}

.grant-available-descriptions .grant-box-2 .collapse-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.grant-available-descriptions .grant-box-2 .div-item {
    display: flex;
    justify-content: space-between;
    padding: 16px 0px;
    border-bottom: 1px solid #B3B9C4;
}

.grant-available-descriptions .grant-box-2 .div-item:not(.collapsed) {
    border-bottom: none;
}

.grant-available-descriptions .grant-box-2 .div-item-des {
    padding: 0px 0px 16px;
    border-bottom: 1px solid #B3B9C4;
}

.grant-available-descriptions .grant-box-2 .div-item-des ol {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.grant-available-descriptions .grant-box-3 .heading-h4 {
    margin-bottom: 35px !important;
}

.grant-available-descriptions .grant-box-3 .list-item {
    display: flex;
    flex-wrap: wrap;
    gap: 57px 141px;
}

.grant-available-descriptions .grant-box-3 .item-box {
    flex: 0 0 calc((100% - 282px) / 3);
}

.grant-available-descriptions .grant-box-3 .numbering-small {
    width: 66px;
    height: 66px;
    background: color(srgb-linear 0 0.03 0.18 / 0.1);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}

.grant-available-descriptions .grant-box-3 .subtitle {
    margin-bottom: 8px;
}

.grant-available-descriptions .grant-box-3 .body-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

@media (min-width: 670px) and (max-width: 1039px) {
    .grant-available-descriptions .grant-box-3 .list-item {
        gap: 40px 50px;
    }

    .grant-available-descriptions .grant-box-3 .item-box {
        flex: 0 0 calc((100% - 100px) / 3);
    }
}

@media (max-width: 669px) {
    .grant-available-descriptions .inner-container {
        /* gap: 40px; */
    }

    .grant-available-descriptions .inner-container .grant-content {
        gap: 40px;
    }

    .grant-available-descriptions .grant-box-1 .heading-h2 {
        margin-bottom: 24px !important;
    }

    .grant-available-descriptions .grant-box-1 .subtitle {
        font-size: 18px;
    }

    .grant-available-descriptions .grant-box-2 .div-item {
        padding: 16px 16px 16px 0px;
    }

    .grant-available-descriptions .grant-box-2 .div-item-des {
        padding: 0px 16px 16px 0px;
    }

    .grant-available-descriptions .grant-box-3 .heading-h4 {
        margin-bottom: 24px !important;
    }

    .grant-available-descriptions .grant-box-3 .numbering-small {
        width: 48px;
        height: 48px;
        margin-bottom: 11px;
    }

    .grant-available-descriptions .grant-box-3 .list-item {
        gap: 41px;
    }

    .grant-available-descriptions .grant-box-3 .item-box {
        flex: 0 0 100%;
    }
}

/* grant available */

/* OME Thai */

.ome-banner .heading-h1 {
    max-width: 848px;
    margin-bottom: 24px !important;
}

.esg .ome-banner .heading-h1 {
    max-width: 915px !important;
}

.ome-banner .heading-h2 {
    max-width: 1078px;
}

.tabs-part {
    padding-top: 0px !important;
}

.tabs-part .tabs-panel {
    border-bottom: 1px solid color(srgb 0 0 0 / 0.1);
    display: flex;
    flex-wrap: nowrap;
}

.tabs-part .tabs-panel a {
    flex: 0 0 50%;
    opacity: 0.5;
    text-align: center;
    padding-bottom: 22px;
}

.tabs-part .tabs-panel a.active {
    color: #002C77;
    opacity: 1;
    border-bottom: 1px solid #002C77;
}

.tabs-part .panel .box {
    padding-bottom: 80px;
}

.panel1 .box img {
    -webkit-mask-image: url('https://cdp.vinova.sg/wp-content/uploads/2024/11/Rectangle-1302.png');
    mask-image: url('https://cdp.vinova.sg/wp-content/uploads/2024/11/Rectangle-1302.png');
    mask-size: 100%;
    mask-repeat: no-repeat;
    max-height: 310px;
    width: 100%;
    object-fit: cover;
    mask-size: 100% 310px;
}

.panel2 .box img {
    -webkit-mask-image: url('https://cdp.vinova.sg/wp-content/uploads/2024/11/image-5.png');
    mask-image: url('https://cdp.vinova.sg/wp-content/uploads/2024/11/image-5.png');
    mask-size: 100%;
    mask-repeat: no-repeat;
    max-height: 310px;
    width: 100%;
    object-fit: cover;
    mask-size: 100% 310px;
}

.our-services {
    display: flex;
    flex-wrap: wrap;
    gap: 23px 16px;
}

.our-services.heading-h2 {
    margin-bottom: 32px !important;
}

.our-services a.item-link {
    flex: 0 0 calc((100% - 32px) / 3);
    min-height: 308px;
}

.our-services .item {
    width: 100%;
    height: 100%;
    padding: 32px 41px 32px 36px;
    gap: 53px;
    background: #F7F8F9;
    display: flex;
    flex-direction: column;
}

.our-services .item:hover {
    background: #002C77;
}

.our-services .item:hover .title,
.our-services .item:hover .body-text {
    color: #FFFFFF;
}

.our-services .item .title {
    max-width: 293px;
}

.modal {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

.modal.show {
    display: flex !important;
}

.custom-modal {
    margin: auto auto !important;
    max-width: 100vw !important;
    width: 100vw;
    max-height: 100vh !important;
    height: 100vh;
    /* max-width: 1440px !important; */
    /* max-height: 951px; */
}

.modal-service {
    /* display: flex; */
}

.modal-body.d-flex {
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0px;
}

.modal-body.d-flex .left-menu {
    flex: 0 0 36%;
    background: #002C77;
    position: relative;
    padding: 96px 92px 101px 56px;
}

.modal-body.d-flex .right-content {
    flex: 0 0 64%;
    background: #FFFFFF;
    padding: 96px 55px 101px;
}

.custom-modal .right-content .content-detail {
    max-height: 754px;
    overflow-y: auto;
}

.modal-body.d-flex .left-menu .left-content {
    height: 754px;
    overflow-y: auto;
}

.custom-modal .right-content .content-detail::-webkit-scrollbar,
.modal-body.d-flex .left-menu .left-content::-webkit-scrollbar,
.modal-service .popup-menu::-webkit-scrollbar,
.grant-available-descriptions .grant-tabs::-webkit-scrollbar {
    width: 5px;
    border-radius: 10px;
}

.modal-service .popup-menu::-webkit-scrollbar,
.grant-available-descriptions .grant-tabs::-webkit-scrollbar {
    height: 3px;
}

.custom-modal .right-content .content-detail::-webkit-scrollbar-track,
.modal-body.d-flex .left-menu .left-content::-webkit-scrollbar-track,
.modal-service .popup-menu::-webkit-scrollbar-track,
.grant-available-descriptions .grant-tabs::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.custom-modal .right-content .content-detail::-webkit-scrollbar-thumb,
.modal-body.d-flex .left-menu .left-content::-webkit-scrollbar-thumb,
.modal-service .popup-menu::-webkit-scrollbar-thumb,
.grant-available-descriptions .grant-tabs::-webkit-scrollbar-thumb {
    background: #888;
}

.custom-modal .right-content .content-detail::-webkit-scrollbar-thumb:hover,
.modal-body.d-flex .left-menu .left-content::-webkit-scrollbar-thumb:hover,
.modal-service .popup-menu::-webkit-scrollbar-thumb:hover,
.grant-available-descriptions .grant-tabs::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.dismiss-button {
    max-width: 56px;
    max-height: 56px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}

.modal-service .popup-menu {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.popup-header {
    font-size: 40px;
    font-weight: 300;
    line-height: 50px;
    max-width: 304px;
    margin-bottom: 71px !important;
}

.popup-header span {
    font-weight: 600;
}

.modal-service .popup-menu a {
    color: #ffffff80;
}

.custom-modal .right-content .tem-des {
    font-size: 24px;
    font-weight: 300;
    line-height: 32.4px;
    margin-bottom: 32px;
}

.custom-modal .right-content h5.custom-text {
    font-size: 22px;
    font-weight: 500;
    line-height: 34.1px;
    margin-bottom: 8px !important;
}

.custom-modal .right-content .tag {
    max-width: 435px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.custom-modal .right-content ul.list-text {
    font-size: 18px;
    font-weight: 300;
    line-height: 27.9px;
    margin: 0px;
}

.modal-service .popup-menu a.active {
    color: #FFFFFF;
}


.modal-service hr {
    margin: 0 !important;
}

@media (min-width: 670px) and (max-width: 1039px) {
    .our-services a.item-link {
        flex: 0 0 calc((100% - 16px) / 2);
        min-height: 308px;
    }
}

@media (min-width: 800px) and (max-width: 1039px) {
    .modal-body.d-flex .right-content {
        padding: 96px 25px;
    }

    .modal-body.d-flex .left-menu {
        padding: 96px 40px 101px 40px;
    }
}

@media (max-width: 799px) {
    .custom-modal {
        max-width: 100% !important;
        height: 100% !important;
    }

    .dismiss-button {
        right: 0px;
        left: auto;
    }

    .modal-body.d-flex {
        display: block !important;
        height: 100vh;
        /* flex-direction: column; */
    }

    .modal-body.d-flex .left-menu {
        flex: 0 0 100%;
        padding: 56px 21px 31px;
        /* height: 192px; */
    }

    .modal-body.d-flex .left-menu .left-content {
        height: auto;
    }

    .modal-service hr {
        display: none;
    }

    .modal-service .popup-menu {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: hidden;
        overflow-x: auto;
        gap: 16px;
    }

    .popup-header {
        margin-bottom: 27px !important;
        max-width: 100%;
        font-size: 24px;
        font-weight: 300;
        line-height: 30px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .modal-service .popup-menu a {
        white-space: nowrap;
        font-size: 16px;
        font-weight: 300;
        line-height: 18.4px;
    }

    .modal-body.d-flex .right-content {
        flex: 0 0 100%;
        padding: 27px 24px;
    }

    .custom-modal .right-content .content-detail {
        /* max-width: 684px;
        max-height: 618px; */
        height: 74vh;
    }

    .custom-modal .right-content .tem-des {
        font-size: 18px;
        font-weight: 300;
        line-height: 24.3px;
        margin-bottom: 27px;
    }

    .custom-modal .right-content .tag {
        max-width: 100%;
    }

    .custom-modal .right-content h5.custom-text {
        font-size: 18px;
        font-weight: 500;
        line-height: 27.9px;
    }

    .custom-modal .right-content ul.list-text {
        font-size: 16px;
        font-weight: 300;
        line-height: 24.8px;
    }
}

@media (max-width: 669px) {
    .tabs-part .tabs-panel a {
        padding-bottom: 18px;
    }

    .tabs-part .tabs-panel a {
        padding: 0 18px 18px;
        font-size: 20px;
        font-weight: 200;
        line-height: 20px;
        text-align: center;
    }

    .panelLeft .box,
    .panelRight .box {
        height: 337px;
    }

    .panelLeft .box img,
    .panelRight .box img {
        max-height: 257px;
        min-height: 257px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
    }

    .our-services.heading-h2 {
        margin-bottom: 16px !important;
    }

    .our-services a.item-link {
        flex: 0 0 100%;
        min-height: 232px;
    }

    .our-services .item {
        padding: 26px 20px;
        gap: 26px;
    }

    .our-services {
        gap: 8px;
    }

}

/* OME Thai */

/* ESG */

.esg-banner .custom-padding {
    padding-bottom: 80px !important;
}

.esg-banner .image {
    overflow: hidden;
    height: 412px;
}

.esg-banner img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 412px;
    object-fit: cover;
}

.anchor-services {
    padding-top: 0px !important;
}

.anchor-services .heading-h2 {
    margin-bottom: 32px !important;
}

.anchor-services .our-services {
    margin-bottom: 128px;
}

.anchor-down {
    display: flex;
    flex-direction: column;
    /* gap: 128px; */
}

.page-template-template-branding-mkt .anchor-down,
.page-template-template-esg .anchor-down {
    display: flex;
    flex-direction: column;
    gap: 128px;
}

.anchor-down .service-detail {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.anchor-down .service-detail .heading-h2 {
    margin-bottom: 11px !important;
}

.anchor-down .service-detail img {
    width: 100%;
    max-height: 326px;
    border-radius: 8px;
}

.anchor-down .service-detail .div-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #B3B9C4;
}

.anchor-down .service-detail .div-item:not(.collapsed) {
    border-bottom: none;
}

.anchor-down .service-detail .div-item-des {
    padding: 0px 0px 16px;
    border-bottom: 1px solid #B3B9C4;

}

@media (max-width: 699px) {
    .esg-banner .custom-padding {
        padding-bottom: 72px !important;
    }

    .anchor-services .heading-h2 {
        margin-bottom: 24px !important;
    }

    .esg-banner .image {
        max-height: 200px;
    }

    .esg-banner .image img {
        height: 200px;
    }

    .anchor-down {
        gap: 64px;
    }

    .anchor-down .service-detail img {
        min-height: 200px;
        object-fit: cover;
    }

    .anchor-services .our-services {
        margin-bottom: 36px;
    }

    .anchor-down .service-detail .heading-h2 {
        margin-bottom: 16px !important;
    }

    .anchor-down .service-detail {
        gap: 16px;
    }

    .anchor-down .service-detail .div-item {
        padding: 16px 16px 16px 0px;
    }

    .anchor-down .service-detail .div-item-des {
        padding: 0px 16px 16px 0px;
    }
}

/* ESG */

/* erp */

#erp .banner .heading-h1 {
    max-width: 610px;
}

.our-expertise .heading-h2.expertise-title {
    margin-bottom: 40px !important;
}

.our-expertise .our-services {
    margin-bottom: 80px;
}

.our-expertise .expertise-anchor {
    display: flex;
    flex-direction: column;
    gap: 72px;
}

.our-expertise .expertise-anchor .anchor-target {
    display: flex;
    gap: 11px;
    flex-direction: column;
}

.our-expertise .expertise-anchor .anchor-target img {
    margin: 29px 0;
    border-radius: 8px;
}

.our-expertise .split-box {
    display: flex;
    justify-content: space-between;
    gap: 72px;
}

.our-expertise .split-box .anchor-target {
    flex: 0 0 calc((100% - 72px) / 2);
}

.our-expertise .split-box .anchor-target .heading-h2 {
    margin-bottom: 5px !important;
}

.our-expertise .split-box .anchor-target .subtitle {
    margin-bottom: 29px;
}

.collapse-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.div-item {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 16px 0;
    align-items: center;
    border-bottom: 1px solid #B3B9C4;
}

.div-item:not(.collapsed) {
    border: none;
    padding-bottom: 8px;
}

.div-item .icon {
    transform: rotate(0);
    transition-duration: 1s;
}

.div-item:not(.collapsed) .icon {
    transform: rotate(180deg);
    transition-duration: 1s;
}

.div-item-des {
    padding: 0 0 16px;
    border-bottom: 1px solid #B3B9C4;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 699px) {
    .our-expertise .our-services {
        margin-bottom: 72px;
    }

    .our-expertise .expertise-anchor .anchor-target {
        gap: 24px;
    }

    .our-expertise .expertise-anchor .anchor-target img {
        margin: 0;
        min-height: 200px;
        object-fit: cover;
    }

    .div-item {
        padding: 16px 16px 16px 0px;
    }

    .div-item-des {
        padding: 0 16px 16px 0;
    }

    .our-expertise .split-box {
        flex-wrap: wrap;
        flex-direction: column;
        gap: 48px;
    }

    .our-expertise .split-box .anchor-target .heading-h2 {
        margin-bottom: 0 !important;
    }

    .our-expertise .split-box .subtitle {
        margin-bottom: 0 !important;
    }
}

/* why odoo */

.why-odoo {
    background: #002C77;
    padding-top: 89px;
    padding-bottom: 90px;
}

.why-odoo .heading-h2 {
    margin-bottom: 56px !important;
}

.why-odoo .list-item {
    display: flex;
    flex-wrap: wrap;
    gap: 56px 85px;
}

.why-odoo .list-item .item {
    flex: 0 0 calc((100% - 170px) / 3);
    max-width: 312px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.why-odoo .list-item .item .icon {
    max-width: 66px;
    max-height: 66px;
    background: #F7F8F933;
    border-radius: 5px;
    padding: 14px 13px 12px;
}

.why-odoo .list-item .item .title {
    max-width: 312px;
}

.why-odoo .d-flex {
    margin-top: 75px;
}

@media (min-width: 670px) and (max-width: 1039px) {
    .why-odoo .list-item {
        gap: 40px;
    }

    .why-odoo .list-item .item {
        flex: 0 0 calc((100% - 40px) / 2);
        max-width: 1000px;
    }
}

@media (max-width: 669px) {
    .why-odoo {
        padding-bottom: 65px;
        padding-top: 46px;
    }

    .why-odoo .list-item {
        gap: 40px;
    }

    .why-odoo .list-item .item .title {
        font-size: 24px;
        font-weight: 200;
        line-height: 27.6px;
    }

    .why-odoo .list-item .item {
        flex: 0 0 100%;
        max-width: 100%;
        gap: 14px;
    }

    .why-odoo .list-item .item .icon {
        padding: 8px;
        max-width: 48px;
        max-height: 48px;
    }

    .why-odoo .list-item .item .icon svg {
        width: 32px;
        height: 32px;
    }

    .why-odoo .d-flex {
        margin-top: 23px;
    }
}

/* why odoo */

/* erp */

/* software */

.box-achievements {
    display: none;
}

#software .box-achievements {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    align-items: center;
}

#software .heading-h1 {
    max-width: 870px;
}

#software .heading-h2 {
    max-width: 948px;
    margin-bottom: 40px !important;
}

.why-us {
    background: #002C77;
    padding-top: 130px;
    padding-bottom: 130px;
}

.why-us .heading-h2 {
    margin-bottom: 48px !important;
}

.why-us .list-item {
    display: flex;
    flex-wrap: wrap;
    gap: 76px 122px;
}

.why-us .list-item .item .body-text {
    color: #ffffffcc;
}

.why-us .list-item .item {
    display: flex;
    flex-direction: column;
    gap: 17px;
    flex: 0 0 calc((100% - 244px) / 3);
    max-width: 333px;
}

.why-us .list-item .item .icon {
    max-width: 66px;
    max-height: 66px;
    padding: 17px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
}

#software .certification {
    margin-top: 161px;
}

#software .certification .main-box {
    gap: 0px;
}

#software .certification .heading-h2 {
    margin-bottom: 19px !important;
}

#software .certification .subtitle {
    margin-bottom: 50px;
}

@media (min-width: 670px) and (max-width: 1039px) {
    .why-us .list-item {
        gap: 60px;
    }

    .why-us .list-item .item {
        max-width: 100%;
        flex: 0 0 calc((100% - 60px) / 2);
    }
}

@media (max-width: 799px) {
    #software .box-achievements {
        flex-wrap: wrap;
        gap: 24px 26px;
    }

    #software .box-achievements .box-item {
        flex: 0 0 calc((100% - 26px) / 2);
    }

    #software .box-achievements .icon {
        display: none;
    }
}

@media (max-width: 669px) {
    #software .box-achievements .box-item .numbering {
        font-size: 30px;
        font-weight: 200;
        line-height: 39.9px;
    }

    #software .box-achievements .box-item .subtitle {
        font-size: 16px;
        font-weight: 200;
        line-height: 21.28px;
    }

    #software .heading-h2 {
        margin-bottom: 32px !important;
    }

    .why-us {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .why-us .heading-h2 {
        margin-bottom: 24px !important;
    }

    .why-us .list-item {
        gap: 40px;
    }

    .why-us .list-item .item {
        max-width: 100%;
        gap: 14px;
        flex: 0 0 100%;
    }

    .why-us .list-item .item .icon {
        max-width: 48px;
        max-height: 48px;
        padding: 8px;
    }

    #software .certification {
        margin-top: 88px;
    }
}

/* software */

/* blog */

.main-blog {
    padding-bottom: 40px;
}

@media (max-width: 699px) {
    .main-blog {
        padding-bottom: 72px;
    }
}

.main-blog .heading-h1 {
    margin-bottom: 31px !important;
}

.main-blog .featured-article {
    margin-bottom: 18px !important;
}

.main-blog .image {
    width: 100%;
    overflow: hidden;
    margin-bottom: 4px !important;
    max-height: 412px;
}

.main-blog .image img {
    width: 100%;
    height: 412px;
    object-fit: cover;
}

.main-blog .info .category {
    font-variant: small-caps;
    margin-bottom: 4px !important;
}

.blog-list {
    padding-top: 0px;
}

.blog-list .filter {
    display: flex;
    /* justify-content: space-between; */
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.blog-list .filter .custom-select {
    position: relative;
    display: inline-block;
}

.blog-list .filter .search {
    width: 289px;
    border: 1px solid #B3B9C4;
    border-radius: 55px;
    padding: 8px 16px;
    color: #8590A2;
}

.blog-list .filter .search::placeholder {
    font-family: "Readex Pro", serif !important;
    font-size: 16px;
    font-weight: 300;
    line-height: 21.28px;
    color: #8590A2;
    background-image: url('https://cdp.vinova.sg//wp-content/themes/cdp/assect/img/search.png');
    background-repeat: no-repeat;
    background-position: right;
}

.blog-list .filter .select-button {
    padding: 8px 48px 8px 16px;
    font-size: 16px;
    font-weight: 300;
    line-height: 21.28px;
    border: 1px solid #121212;
    border-radius: 55px;
    appearance: none;
    color: #121212;
}

.blog-list .filter .select-icon {
    width: 24px;
    height: 24px;
    position: absolute;
    right: 16px;
    top: 7px;
    pointer-events: none;
}

@media (max-width: 699px) {
    .main-blog .heading-h1 {
        margin-bottom: 24px !important;
    }

    .main-blog .featured-article {
        margin-bottom: 8px !important;
    }

    .main-blog .image {
        margin-bottom: 24px !important;
        height: 194px;
    }

    .main-blog .info .category {
        margin-bottom: 8px !important;
    }

    .blog-list .filter {
        row-gap: 8px;
        margin-bottom: 24px !important;
    }

    .blog-list .filter .search {
        flex: 100%;
    }
}

/* blog */

/* our work */

.work-detail {
    padding-top: 0px;
}

.work-detail .anchor-down {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto;
    border-bottom: 1px solid #DCDFE4;
}

.work-detail .main-anchor {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.work-detail .anchor-down a {
    padding: 13px 0px;
    margin: 0 auto;
    color: #000000;
    opacity: 0.5;
    width: 100%;
    text-align: center;
}

.work-detail .anchor-down a.active {
    color: #002C77;
    border-bottom: 1px solid #002C77;
    opacity: 1;
}

.work-detail .anchor-about .heading-h2,
.work-detail .anchor-about .heading-h4,
.work-detail .anchor-challenges .heading-h2,
.work-detail .anchor-solution .heading-h2,
.work-detail .anchor-technology .heading-h2,
.work-detail .anchor-outcome .heading-h2 {
    margin-bottom: 16px !important;
}

.work-detail .anchor-about .editor-text h4 {
    margin: 8px 0 8px !important;
    margin-bottom: 8px !important;
}

.work-detail .anchor-about .description-detail {
    margin-bottom: 24px;
}

.work-detail .anchor-about .description-detail:last-child {
    margin-bottom: 0px;
}

.work-detail .anchor-about .body-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tag-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-items a {
    padding: 8px 16px;
    border-radius: 55px;
    border: 1px solid #8590A2;
    color: #22272B;
    font-weight: 300;
    font-size: 14px;
    line-height: 16.1px;
}

#software .tag-items a {
    font-size: 16px;
}

.anchor-combo {
    gap: 11px;
}

.anchor-combo .anchor-target {
    flex: 0 0 calc((100% - 11px) / 2);
}

.work-detail .anchor-ux-ui .heading-h2 {
    margin-bottom: 32px !important;
}

.work-detail .anchor-ux-ui .ux-ui-design img {
    width: 100%;
    height: 610px;
    border-radius: 12px;
    object-fit: cover;
}

.work-detail .anchor-challenges .body-text,
.work-detail .anchor-solution .body-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.work-detail .anchor-technology .div-item {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 16px 0;
    align-items: center;
    border-bottom: 1px solid #B3B9C4;
}

.work-detail .anchor-technology .div-item:not(.collapsed) {
    border: none;
    padding-bottom: 8px;
}

.work-detail .anchor-technology .div-item .icon {
    transform: rotate(0);
    transition-duration: 1s;
}

.work-detail .anchor-technology .div-item:not(.collapsed) .icon {
    transform: rotate(180deg);
    transition-duration: 1s;
}

.work-detail .anchor-technology .div-item-des {
    padding: 8px 0 16px;
    border-bottom: 1px solid #B3B9C4;
}


.work-detail .anchor-outcome .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-bottom: 0px;
}

.work-detail .anchor-outcome .gallery .image {
    flex: 0 0 calc((100% - 11px) / 2);
    overflow: hidden;
    border-radius: 12px;
}

@media (max-width: 669px) {
    .work-detail .anchor-about .description-detail {
        margin-bottom: 40px;
    }

    .work-detail .main-anchor {
        gap: 72px;
    }

    .work-detail .anchor-about .heading-h2,
    .work-detail .anchor-about .heading-h4,
    .work-detail .anchor-challenges .heading-h2,
    .work-detail .anchor-solution .heading-h2,
    .work-detail .anchor-technology .heading-h2,
    .work-detail .anchor-outcome .heading-h2 {
        margin-bottom: 24px !important;
    }

    .work-detail .anchor-ux-ui .heading-h2 {
        margin-bottom: 24px !important;
    }

    .work-detail .anchor-down {
        overflow-x: auto;
        max-width: 100%;
    }

    .work-detail .anchor-down a {
        min-width: 203.67px;
    }

    .work-detail .anchor-ux-ui .ux-ui-design img {
        height: 165px;
    }

    .anchor-combo {
        gap: 72px;
        flex-direction: column;
    }

    .work-detail .anchor-challenges,
    .work-detail .anchor-solution {
        flex: 0 0 100%;
    }
}

.testimonial-work .info {
    background: #F7F8F9;
    padding: 42px 0;
    text-align: center;
    border-radius: 5px;
}

/* our work */

/* testimonial-work */

.testimonial-work {
    padding-top: 0px;
    /* padding-bottom: 0px; */
}

.testimonial-work .inside-box {
    max-width: 676px;
    margin: 0 auto;
}

.testimonial-work .inside-box img {
    width: 58px;
    height: 58px;
    border-radius: 55px;
    margin-bottom: 15px;
}

.testimonial-work .inside-box .body-text {
    margin-bottom: 12px;
}

.testimonial-work .inside-box .rate {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8.73px;
}

@media (max-width: 699px) {
    .testimonial-work .inside-box {
        padding: 0 45px;
    }
}

/* testimonial-work */

/* single post */

#primary .section-padding.thumbnail-header {
    padding-bottom: 24px;
}

#primary h1.entry-title {
    font-size: 40px;
    font-weight: 200;
    line-height: 46px;
    margin-bottom: 80px !important;
    color: #121212;
}

.single-our-work .entry-content {
    display: none !important;
}

#primary .post-thumbnail {
    height: 412px;
}

#primary .post-thumbnail img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 412px;
    object-fit: cover;
}

#primary article:last-child {
    margin-bottom: 0px;
}

#primary .entry-content {
    margin-top: 80px !important;
    display: flex;
    flex-direction: column;
    max-width: 816px;
    margin: 0 auto;
}

#primary .entry-content h2 {
    font-size: 40px;
    font-weight: 200;
    line-height: 46px;
    color: #121212;
    margin-bottom: 24px !important;
}

#primary .entry-content img {
    margin-bottom: 0px !important;
}

#primary .entry-content P {
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
    color: #121212;
    margin-bottom: 24px !important;
}

#primary .entry-content P:last-child {
    margin-bottom: 0px !important;
}

@media (max-width: 669px) {
    #primary .section-padding {
        padding-bottom: 40px;
    }

    #primary h1.entry-title {
        margin-bottom: 40px !important;
    }

    #primary .post-thumbnail {
        height: 194px;
        1
    }

    #primary .post-thumbnail img {
        height: 194px;
    }

    #primary .entry-content {
        margin-top: 40px;
    }

    #primary .entry-content P {
        font-size: 15px;
        font-weight: 300;
        line-height: 20.25px;
    }
}


/* single post */

/* Contact */

.contact .heading-h1 {
    max-width: 626px;
    margin-bottom: 24px !important;
}

.contact .heading-h2 {
    max-width: 748px;
    margin-bottom: 40px !important;
}

.contact .info {
    margin-bottom: 34px !important;
}

.contact .info a {
    margin-right: 41.98px;
}

.contact .address {
    max-width: 490px;
}

iframe {
    margin-bottom: -6px;
    width: 100% !important;
    height: 412px !important;
}

@media (max-width: 699px) {
    .section-padding {
        /* padding: 48px 24px; */
    }

    .contact .info a {
        margin-bottom: 8px !important;
    }

    .contact .info {
        margin-bottom: 32px !important;
    }
}

.contact-form .wpcf7 form .wpcf7-response-output {
    color: #ffffff;
}

/* Contact */