/* Groove Company Profile */

/* Section 1 */

.cp-herosection-box {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 70px;
    align-items: center;
}

.company-profile-section-1 {
    padding: 50px 0;
}

.company-profile-section-1 h2 {
    font-size: 80px !important;
    line-height: 96px !important;
    color: #222;
    margin: 31px 0 0;
}

/* End - Section 1 */
/* Section 2 */

.company-profile-section-2 {
    background: url(../img/company-profile/groove-technology-company-profile-vn-for-it-talents-bg.svg) no-repeat top center;
    padding: 70px 0 76px;
}

.company-profile-section-2 .wccas-wrapper-box {
    grid-template-columns: 470px 1fr;
    gap: 70px;
    margin-top: 50px;
    padding-left: 60px;
}

.company-profile-section-2 .wccas__sub-box img {
    padding-left: 0;
}

.company-profile-section-2 .wccas__sub-box.one img {
    margin-left: 26px;
    width: 36px;
}

.company-profile-section-2 .wccas__sub-box.two img {
    margin-left: 29px;
    width: 33px;
}

.company-profile-section-2 .wccas__sub-box.three img {
    margin-left: 28px;
    width: 37px;
}

.company-profile-section-2 .wccas__sub-box {
    margin-bottom: 20px;
    margin-left: 0;
}

.company-profile-section-2 .wccas__sub-box h3,
.company-profile-section-2 .wccas__sub-box h3 span {
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 600;
}

.company-profile-section-2 .wccas__sub-box h3 {
    color: #222;
    margin-bottom: 0;
    max-width: 360px;
}

.company-profile-section-2 .wccas__sub-link {
    max-width: 481px;
    margin-top: 27px;
}

.wccas__sub-link h4 {
    font-size: 15px !important;
    line-height: 28px !important;
    color: #222;
    font-weight: 600;
}

.wccas__sub-link a {
    color: #3381F2;
    font-size: 15px;
    line-height: 20px;
}

/* End - Section 2 */
/* Section 3 */

.company-profile-section-3.hero-section {
    background: transparent;
    padding: 20px 0 50px;
    margin-top: 0;
}

.company-profile-section-3 .hero-wrapper-box {
    margin-top: 0;
    box-shadow: none;
    padding: 0;
}

.company-profile-section-3 .hero-wrapper-box h2 {
    padding-left: 0;
    text-align: center;
    margin-bottom: 30px;
}

.company-profile-section-3 .hero-wrapper-box h2,
.company-profile-section-3 .hero-wrapper-box h2 span {
    font-size: 44px !important;
    line-height: 54px !important;
}

.company-profile-section-3 .hero-wrapper-box .wrapper-box {
    padding: 8px 20px 10px 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0px 0px 30px #A9AAB921;
    align-items: center;
}

/* End - Section 3 */
/* Section 4 */

.company-profile-section-4.aps-section-2 {
    padding: 40px 0;
    background: url(../img/company-profile/groove-technology-company-profile-we-have-happy-clients-bg.svg) no-repeat top center;
}

/* End - Section 4 */
/* Section 5 */

.aps-section-3.company-profile-section-5 {
    padding: 50px 0;
}

.company-profile-section-5 .wmud-wrapper-box h2 {
    margin-bottom: 52px;
}

.company-profile-section-5 .wmud__sub-box {
    gap: 0;
    grid-template-columns: 62px 1fr;
    max-width: 440px;
}

.company-profile-section-5 .wmud__sub-box.one img {
    width: 28px;
}

.company-profile-section-5 .wmud__sub-box.two img,
.company-profile-section-5 .wmud__sub-box.three img {
    width: 32px;
}

/* End - Section 5 */
/* Section 6 */

.company-profile-section-6 .wmud-wrapper-box {
    background: none;
    padding-bottom: 50px;
    padding-right: 0;
    align-items: center;
    grid-template-columns: 470px 560px;
}

.company-profile-section-6 .wmud-wrapper-box h2 {
    margin-bottom: 40px;
}

.company-profile-section-6 .wmud__sub-box {
    grid-template-columns: 56px 1fr;
}

.company-profile-section-6 .wmud__sub-box.last {
    padding-bottom: 0;
}

/* End - Section 6 */
/* Section 7 */

.company-profile-section-7.aswo-section {
    padding: 50px 0;
    background: url(../img/company-profile/groove-technology-company-profile-ai-service-we-offer-bg.svg) no-repeat top center;
}

.company-profile-section-7 .aswo-wrapper-box {
    padding: 0 52px 0 0;
    grid-template-columns: 570px 1fr;
    gap: 100px;
}

.company-profile-section-7 .aswo__sub-box {
    grid-template-columns: 28px 1fr;
    gap: 20px;
    padding: 20px 0;
    border-bottom: none;
}

.company-profile-section-7 .aswo__sub-box img {
    padding-top: 2px
}

.company-profile-section-7  .aswo__sub-box:first-child {
    padding-top: 0;
}

.company-profile-section-7  .aswo__sub-box:last-child {
    padding-bottom: 0;
}

.aswo__sub-left-box {
    background-color: #FFFFFF;
    border-radius: 18px;
    box-shadow: 0px 0px 20px #C9CEDB29;
    padding: 30px 85px 20px;
}

.aswo__sub-left-box.dedicated-team-box {
    margin-top: 10px;
}

.aswo__sub-left-box h3 {
    margin-bottom: 10px;
    font-size: 20px !important;
    line-height: 28px !important;
    font-weight: 600;
    text-align: center;
}

.staff-augmentation__animation-box,
.dedicated__animation-box,
.box-position {
    width: 307px;
    margin: 0 auto;
}

.box-position p {
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 0;
    display: inline-block;
}

.staff-augmentation-box .your-team {
    padding-left: 74px;
}

.dedicated-team-box .your-pm {
    padding-left: 15px;
}

.dedicated-team-box .groove-dev {
    padding-left: 68px;
}

/* End - Section 7 */
/* Section 8 */

.company-profile-section-8.technology-stacks-section {
    padding-top: 60px;
}

/* End - Section 8 */

@media (max-width: 768px) {
    /* Section 1 */

    .company-profile-section-1 {
        padding: 70px 15px 25px;
    }

    .cp-herosection-box {
        display: flex;
        flex-direction: column;
        gap: 21px;
    }

    .company-profile-section-1 h2 {
        font-size: 50px !important;
        line-height: 60px !important;
        margin: 10px 0 0;
        text-align: center;
        font-weight: 700;
    }

    .cp-herosection-box .box-left {
        order: 2;
        padding: 0 23px;
    }

    .cp-herosection-box .box-left video {
        width: 100% !important;
        height: 100% !important;
    }

    .cp-herosection-box .box-right {
        order: 1;
        text-align: center;
    }

    .cp-herosection-box .box-right img {
        max-width: 277px;
    }

    /* End - Section 1 */
    /* Section 2 */

    .company-profile-section-2 {
        padding: 40px 15px 25px;
        background-image: url(../img/company-profile/groove-technology-company-profile-vn-for-it-talents-mobile-bg.svg);
        background-size: contain;
    }

    .company-profile-section-2 .wccas-wrapper-box {
        margin-top: 30px;
        padding: 0px;
    }

    .company-profile-section-2 .wccas-wrapper-box .box-left {
        padding: 0 23px;
        margin-bottom: 10px;
    }

    .company-profile-section-2 .wccas__sub-box-background.normal,
    .company-profile-section-2 .wccas__sub-box-background.hover {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .company-profile-section-2 .wccas__sub-box img.icon {
        margin-left: 0 !important;
        width: 33px;
        left: 26px;
    }

    .company-profile-section-2 .wccas__sub-box.three img.icon {
        width: 34px;
        left: 25px;
    }

    .company-profile-section-2 .wccas__sub-box.two img.icon {
        left: 24px;
    }

    .wccas__sub-box h3 {
        left: 84px;
        padding-right: 30px;
        width: calc(100% - 84px);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }

    .company-profile-section-2 .wccas__sub-box h3,
    .company-profile-section-2 .wccas__sub-box h3 span {
        font-size: 17px !important;
        line-height: 24px !important;
    }

    .company-profile-section-2 .wccas__sub-box {
        margin-bottom: 10px;
    }

    .company-profile-section-2 .wccas__sub-link {
        margin-top: 10px;
    }

    .company-profile-section-2 .wccas__sub-link {
        max-width: 100%;
    }

    .wccas__sub-link a {
        display: block;
    }

    .wccas__sub-link h4 {
        line-height: 20px !important;
        margin-bottom: 7px;
    }

    /* End - Section 2 */

    /* Section 3 */

    .company-profile-section-3.hero-section {
        padding: 25px 15px 25px;
    }

    .company-profile-section-3 .hero-wrapper-box h2,
    .company-profile-section-3 .hero-wrapper-box h2 span {
        font-size: 36px !important;
        line-height: 44px !important;
        font-weight: 600;
    }

    .company-profile-section-3 .hero-wrapper-box h2 {
        margin-bottom: 20px;
    }

    .company-profile-section-3 .wrapper-box .box-image {
        margin-bottom: 20px;
        padding: 3px;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0px 0px 30px #A9AAB921;
    }

    .company-profile-section-3 .hero-wrapper-box .wrapper-box {
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
    /* End - Section 3 */
    /* Section 4 */

    .company-profile-section-4.aps-section-2 {
        padding: 25px 15px;
        background: transparent;
    }

    /* End - Section 4 */
    /* Section 5 */

    .aps-section-3.company-profile-section-5 {
        padding: 25px 15px 62px;
    }

    .company-profile-section-5 .wmud-wrapper-box h2 {
        margin-bottom: 30px;
    }

    /* End - Section 5 */

    /* Section 6 */

    .company-profile-section-6 {
        padding: 30px 15px 50px;
    }

    .company-profile-section-6 .wmud-wrapper-box {
        display: flex;
        flex-direction: column;
        padding-bottom: 0;
    }

    .company-profile-section-6 .wmud-wrapper-box .box-left {
        order: 2;
        margin-top: 20px;
        margin-bottom: 0;
    }

    .company-profile-section-6 .wmud-wrapper-box .box-right {
        order: 1;
    }

    .company-profile-section-6 .wmud-wrapper-box h2 {
        margin-bottom: 30px;
    }

    .company-profile-section-6 .wmud__sub-box {
        grid-template-columns: 48px 1fr;
        gap: 21px;
    }

    /* End - Section 6 */
    /* Section 7 */

    .company-profile-section-7.aswo-section {
        padding: 30px 15px 50px;
        background-image: url(../img/company-profile/groove-technology-company-profile-ai-service-we-offer-mobile-bg.svg);
        background-size: cover;
    }

    .company-profile-section-7 .aswo-wrapper-box {
        margin-top: 20px;
        padding: 0;
        display: block;
    }

    .aswo__sub-left-box {
        padding: 30px 19px 20px;
    }

    .aswo__sub-left-box.staff-augmentation-box .box-position {
        display: flex;
        gap: 5px;
    }

    .aswo__sub-left-box.staff-augmentation-box .box-position .groove-dev {
        width: 86px;
    }

    .aswo__sub-left-box.staff-augmentation-box .box-position .your-team {
        width: calc(100% - 91px);
        padding: 0;
        text-align: center;
    }

    .dedicated-team-box .groove-dev {
        padding-left: 70px;
    }

    .company-profile-section-7 .aswo-wrapper-box .box-right {
        margin-top: 25px;
    }

    .company-profile-section-7 .aswo__sub-box {
        grid-template-columns: 24px 1fr;
    }

    .company-profile-section-7 .aswo__sub-box .title {
        font-weight: 600;
    }

    .company-profile-section-7 .aswo__sub-box .description {
        color: #222;
    }

    .company-profile-section-7 .aswo__sub-box {
        padding: 10px 0;
    }

    .company-profile-section-8.technology-stacks-section {
        padding-top: 20px;
    }

    /* End - Section 7 */
    /* Section 9 */

    .our-process-section.company-profile-section-9 {
        margin-top: 30px;
        padding-top: 20px;
    }

    .company-profile-section-9 .op-wrapper-box {
        margin-top: 30px;
    }

    /* End - Section 9 */
}

/* End - Groove Company Profile */

*::before,
*::after {
  box-sizing: border-box;
}

.slide {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.button {
    background-color: #E60078;
    border-radius: 4px;
    padding: 0 12px;
    display: flex;
    height: 46px;
    align-items: center;
}

.button span {
    color: #fff;
}

.grid-welcome-template {
    grid-template-columns: 545px 586px;
    gap: 20px;
}

.menu,
.menu-section {
    height: 70px;
    position: relative;
    z-index: 99;
}

.menu-section-wrapper {
    background: #fff;
    height: 70px;
}

.menu-section.sticky .menu-section-wrapper {
    position: fixed;
    width: 100%;
    top: 0;
    border-bottom: 1px solid #e6ebf0;
}

.intro-section .grid {
    grid-template-columns: 468px 500px;
    gap: 102px;
    justify-content: center;
}

.hero-title {
    font-size: 70px;
    line-height: 80px;
    margin: 40px 0 0;
}

.intro-section .col-right img {
    max-width: 450px;
}

.section-color {
    background-color: #F9FAFD;
}

.global-section h2 {
    margin: 20px 0 40px;
}

.global-section .grid-welcome-template {
    grid-template-columns: 545px 360px;
    gap: 132px;
}

.global-box {
    background: linear-gradient(90deg, #FFFFFF, #F7F9FC00);
    border-left: solid 1px #222;
    height: 80px;
    display: grid;
    min-width: 584px;
    padding-left: 17px;
    grid-template-columns: 34px 1fr;
    gap: 20px;
}

.about-groove-box {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 22px;
}

.about-box-left img {
    padding-top: 3px;
}

.happy-content .font24 {
    line-height: 24px !important;
}

.happy-content {
    max-width: 420px;
}

.happy-content::before,
.ai-custom-subHead::before {
    display: block;
    content: "";
    width: 1px;
    height: 20px;
    background-color: #E60078;
    position: absolute;
    left: 0;
    top: 3px;
}

.client-logo {
    gap: 15px 50px;
    padding: 0 25px;
}

.ai-custom-subHead::before {
    top: 50%;
    transform: translateY(-50%);
}

.custom-content-list {
    list-style-type: none;
}

.custom-content-list li {
    padding-left: 15px;
    margin-bottom: 10px;
    position: relative;
}

.custom-content-list li:last-child {
    margin-bottom: 0;
}

.custom-content-list li::before {
    width: 4px;
    height: 4px;
    content: "";
    display: block;
    background-color: #444444;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.ai-custom-section .button,
.visit-section .button {
    padding-left: 27px;
    padding-right: 27px;
}

.ai-custom-section .col-left {
    max-width: 465px;
}

.build-section .slick-slide img {
    box-shadow: 0 3px 18px #5D628829;
}

.build-section .slick-slide {
    padding: 20px;
}

.build-box-container {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.build-box {
    grid-template-columns: 43px 1fr;
    gap: 15px;
    height: 56px;
    background: #FFFFFF;
    border-radius: 8px;
    border: solid 1px #CDD5DE;
    padding: 0 15px;
}

.build-box-image img {
    width: 28px;
}

.build-box-image::after {
    display: block;
    content: "";
    width: 1px;
    height: 24px;
    background: #CDD5DE;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.build-section .slick-list,
.build-section .slick-slide,
.build-section .slick-slide img {
    border-radius: 10px;
}

.build-section .slick-list {
    min-width: 1210px;
    margin-left: -20px;
    max-height: 560px;
}

.build-section .slick-arrow {
    width: 48px;
    height: 48px;
    background: #F9FAFD url(../img/company-profile/arrow.svg);
    transition: 0.3s;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border-radius: 50%;
    font-size: 0;
    background-repeat: no-repeat;
    position: absolute;
    padding: 0;
}

.build-section .slick-arrow.slick-prev {
    right: calc(100% + 10px);
    left: auto;
}

.build-section .slick-arrow.slick-next {
    transform: translateY(-50%) rotate(180deg);
    left: calc(100% + 10px);
}

.build-section .slick-arrow::before {
    display: none;
}

.build-section .slick-arrow:hover {
    background-image: url(../img/company-profile/arrow-hover.svg);
}

.diff-box {
    grid-template-columns: 32px 1fr;
    gap: 20px;
}

.technology-row {
    grid-template-columns: 170px 1fr;
}

.technology-image-container {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.technology-row.large .technology-image-container {
    grid-template-columns: 1fr 1fr 1fr;
}

.technology-image-container .technology-image {
    height: 70px;
    display: flex;
    align-items: center;
    border-right: solid 1px #E7EDF4;
    border-bottom: solid 1px #E7EDF4;
    border-top: none;
    justify-content: center;
}

.technology-row.large .technology-image {
    height: 80px;
}

.technology-title h3 {
    padding-left: 14px;
}

.technology-title h3::before {
    display: block;
    content: "";
    width: 1px;
    height: 20px;
    background-color: #E60078;
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
}

.technology-container {
    border-left: 1px solid #E7EDF4;
}

.technology-container.first {
    border-top: 1px solid #E7EDF4;
}

.technology-title {
    height: 100%;
    display: flex;
    align-items: center;
    width: 100%;
    border-right: 1px solid #E7EDF4;
    border-bottom: 1px solid #E7EDF4;
}

.technology-container:nth-child(2n + 1) {
    background: linear-gradient(90deg, #FFFFFF, #FFFFFF4D);
}

.technology-table {
    transition: 0.5s;
    overflow: hidden;
    max-height: 881px;
}

.technology-table.isMore {
    max-height: 1700px;
}

.technology-button {
    margin: 20px auto 0;
    justify-content: center;
    height: 40px;
    align-items: center;
    padding: 0 15px;
    border: solid 1px #000000;
    border-radius: 4px;
    gap: 10px;
}

.technology-button:hover {
    background-color: #000000;
}

.technology-button::after {
    display: block;
    content: "";
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.697" height="11.088" viewBox="0 0 9.697 11.088"><g id="Icon_feather-arrow-right" data-name="Icon feather-arrow-right" transform="translate(0.849 10.488) rotate(-90)"><path id="Path_84478" data-name="Path 84478" d="M7.5,18h9.888" transform="translate(-7.5 -14)" fill="none" stroke="%23222" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/><path id="Path_84479" data-name="Path 84479" d="M18,7.5l4,4-4,4" transform="translate(-12.112 -7.5)" fill="none" stroke="%23222" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/></g></svg>');
    width: 10px;
    height: 11px;
    transform: rotate(180deg);
}

.technology-button:hover span {
    color: #fff;
}

.technology-button:hover::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.697" height="11.088" viewBox="0 0 9.697 11.088"><g id="Icon_feather-arrow-right" data-name="Icon feather-arrow-right" transform="translate(0.849 10.488) rotate(-90)" style="&%2310;"><path id="Path_84478" data-name="Path 84478" d="M7.5,18h9.888" transform="translate(-7.5 -14)" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/><path id="Path_84479" data-name="Path 84479" d="M18,7.5l4,4-4,4" transform="translate(-12.112 -7.5)" fill="none" stroke="%23fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"/></g></svg>');
}

.technology-button.isShowMore::after {
    transform: rotate(0deg);
}

.process-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
    position: relative;
    margin-bottom: 30px;
}

.process-line {
    display: grid;
    grid-template-columns: 380px 381px 1fr;
}

.process-line .process-left {
    margin-right: 38px;
}

.process-line .process-center {
    margin-right: 30px;
}

.process-line1 img.process-icon {
    height: 50px;
}

.process-title,
.process-content {
    max-width: 270px;
}

.arrow-end-top {
    position: absolute;
    top: 25px;
    right: 80px;
    min-width: 565px;
}

.arrow-start-top {
    position: absolute;
    top: -108px;
    left: -40px;
    min-width: 524px;
}

.process-line3 {
    margin-top: 122px;
}

.visit-section .grid-welcome-template {
    grid-template-columns: 479px 479px;
    padding: 0 35px 0 20px;
}


/* ===== POPUP ANIMATION ===== */
.redirect-popup {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
  }
  
.redirect-popup.active {
    display: block;
}
  
.redirect-popup .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
    opacity: 0;
    transition: opacity 0.3s ease;
}
  
.popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    background: #fff;
    padding: 30px 25px;
    text-align: center;
    width: 320px;
  
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
  
/* ACTIVE STATE */
.redirect-popup.active .overlay {
    opacity: 1;
}
  
.redirect-popup.active .popup {
    opacity: 1;
    transform: translate(-50%, -50%);
}
  
/* ===== CIRCLE ===== */
.circle svg {
    transform: rotate(-90deg);
  }
  
.circle circle {
    fill: none;
    stroke-width: 3;
}
  
.circle .bg {
    stroke: #eee;
}
  
.circle .progress {
    stroke: #e6007a;
    stroke-linecap: round;
    stroke-width: 3;

    stroke-dasharray: 283;
    stroke-dashoffset: 283;

    transition: none;
}

.popup .circle {
    position: relative;
}

.popup .circle .count {
    font-size: 50px;
    line-height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 500;
}

.popup .circle p {
    max-width: 320px;
    margin: 0 auto;
}

.redirect-popup .actions {
    grid-template-columns: 120px 1fr;
    gap: 10px;
}

.redirect-popup .actions button {
    height: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border-color: transparent;
    cursor: pointer;
}

.redirect-popup .actions .stay {
    background-color: #E8E8E8;
}

.form-popup {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
  }
  
  .form-popup.active {
    display: block;
  }
  
  .form-popup .overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
  }
  
  .form-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 35px 50px 40px;
    border-radius: 16px;
    width: 600px;
}
  
.close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.two-col-one-row {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.custom-field label {
    font-size: 15px;
    line-height: 20px;
    color: #000;
    display: block;
    margin-bottom: 5px;
}

.custom-field input,
.custom-field textarea {
    width: 100%;
    margin-bottom: 5px;
}

.custom-field input,
.custom-field textarea{
    min-height: 46px;
    display: block;
    padding: 6px 12px;
    border: 1px solid #dbdbdb;
    max-width: 100%;
    font-size: 15px;
    line-height: 20px;
    font-family: 'Inter';
}

.custom-field {
    margin-top: 15px;
}

.custom-field input {
    padding: 6px 40px 6px 12px;
    margin-bottom: 0;
}

.button-form {
    border-color: transparent;
    border-radius: 40px;
    padding: 0 30px;
    margin: 15px 0 0 auto;
    cursor: pointer;
}

.icon-field::after {
    background-size: 17px 17px;
    background-repeat: no-repeat;
    content: "";
    display: block;
    width: 17px;
    height: 17px;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.icon-field {
    position: relative;
}

.icon-field.name-field::after {
    background-image: url(../img/company-profile/user.png);
}

.icon-field.email-field::after {
    background-image: url(../img/company-profile/email.png);
    background-position: center;
    top: 13px;
    transform: translateY(0);
}

.error {
    color: #f00;
    display: block;
    margin-top: 5px;
    font-size: 15px;
    line-height: 20px;
}

.form-box.isSending::before  {
    content: 'Form in progress...';
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #222222;
    background-color: #ffffffd8;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    z-index: 4;
    border-radius: 16px;
    font-size: 15px;
    line-height: 20px;
}

.form-box.isSending::after {
    content: '';
    width: 100px;
    height: 100px;
    position: absolute;
    left: calc(50% - 140px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-image: url(../img/company-profile/loading-new.gif);
    background-size: contain;
}

.form-success {
    text-align: center;
    border: 1px solid #46b450;
    border-radius: 4px;
    margin-right: 0px;
    background-color: #E9F5EE;
    color: #40B56D;
    margin-top: 15px;
    padding: 6px 0;
    font-size: 15px;
    line-height: 20px;
}

.ocss-box {
    max-width: 535px;
    border: solid 1px #CDD5DE;
    border-radius: 8px;
}

.ocss-section .grid-welcome-template {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.ocss-section .col-right img {
    min-height: 600px;
    object-fit: cover;
    border-radius: 8px;
}

.ocss-box-wrapper {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 22px;
    align-items: center;
}

.ocss-box-content h3 {
    font-size: 20px !important;
    line-height: 27px !important;
}

.ocss-box-content p {
    position: relative;
    padding-left: 20px;
    font-size: 17px;
    line-height: 27px;
}

.ocss-box-content p::before {
    display: block;
    content: "";
    width: 5px;
    height: 5px;
    background-color: #000;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.staff-agm__form-box h2 {
    text-align: left;
}

#staff-agm__form {
    padding-top: 0;
}

.staff-agm__form-box h2, .staff-agm__form-box .font-h2 span {
    font-size: 36px !important;
    line-height: 46px !important;
    margin-bottom: 30px;
}

@media only screen and (min-width: 767px) {
    .height20pc {
        height: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .only-pc {
        display: none;
    }


    .intro-section .grid,
    .global-section .grid-welcome-template,
    .grid-welcome-template {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .intro-section .col-right img {
        max-width: 250px;
    }

    .intro-section .col-right {
        text-align: center;
    }

    .hero-title {
        font-size: 44px;
        line-height: 54px;
        text-align: center;
    }

    .padding-section50,
    .padding-section75 {
        padding: 30px 15px;
    }

    .menu-section-wrapper {
        padding: 0;
        border-bottom: 1px solid #e6ebf0;
    }

    .menu-section.sticky .menu-section-wrapper {
        width: 100%;
    }

    .menu-section .menu {
        padding: 0 15px 0 20px;
    }

    .intro-section .col-right,
    .global-section .col-right {
        order: 1;
    }

    .intro-section .col-left,
    .global-section .col-left {
        order: 2;
    }

    .global-box {
        min-width: auto;
        padding: 0 15px;
    }

    .global-section .only-mobile img {
        height: 350px;
        margin-left: 60px;
        width: fit-content;
    }

    .happy-content::before, .ai-custom-subHead::before {
        top: 2px;
    }

    .client-logo {
        gap: 10px 20px;
        padding: 0 5px;
    }

    .happy-section {
        padding-bottom: 40px;
    }

    .ai-custom-subHead::before {
        display: none;
    }

    .custom-content-list li::before {
        width: 20px;
        height: 20px;
        background: none;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 0;

    }

    .custom-content-list li.mvp::before {
        background-image: url('data:image/svg+xml,<svg id="Group_189782" data-name="Group 189782" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path id="Path_114514" data-name="Path 114514" d="M10.628,20H9.372a1.843,1.843,0,0,1-1.841-1.841v-.425a8.074,8.074,0,0,1-1.254-.52l-.3.3a1.841,1.841,0,0,1-2.6,0l-.887-.887a1.841,1.841,0,0,1,0-2.6l.3-.3a8.075,8.075,0,0,1-.52-1.254H1.841A1.843,1.843,0,0,1,0,10.628V9.372A1.843,1.843,0,0,1,1.841,7.531h.425a8.077,8.077,0,0,1,.52-1.254l-.3-.3a1.841,1.841,0,0,1,0-2.6l.887-.887a1.841,1.841,0,0,1,2.6,0l.3.3a8.082,8.082,0,0,1,1.254-.52V1.841A1.843,1.843,0,0,1,9.372,0h1.255a1.843,1.843,0,0,1,1.841,1.841v.425a8.074,8.074,0,0,1,1.254.52l.3-.3a1.841,1.841,0,0,1,2.6,0l.887.887a1.841,1.841,0,0,1,0,2.6l-.3.3a8.075,8.075,0,0,1,.52,1.254h.425A1.843,1.843,0,0,1,20,9.372v1.255a1.843,1.843,0,0,1-1.841,1.841h-.425a8.076,8.076,0,0,1-.52,1.254l.3.3a1.841,1.841,0,0,1,0,2.6l-.887.887a1.841,1.841,0,0,1-2.6,0l-.3-.3a8.082,8.082,0,0,1-1.254.52v.425A1.843,1.843,0,0,1,10.628,20ZM6.473,15.983a6.907,6.907,0,0,0,1.79.743.586.586,0,0,1,.44.567v.865a.67.67,0,0,0,.669.669h1.255a.67.67,0,0,0,.669-.669v-.865a.586.586,0,0,1,.44-.567,6.907,6.907,0,0,0,1.79-.743.586.586,0,0,1,.713.09l.613.613a.669.669,0,0,0,.946,0l.888-.888a.669.669,0,0,0,0-.946l-.613-.613a.586.586,0,0,1-.09-.713,6.905,6.905,0,0,0,.743-1.79.586.586,0,0,1,.567-.439h.865a.67.67,0,0,0,.669-.669V9.372a.67.67,0,0,0-.669-.669h-.865a.586.586,0,0,1-.567-.439,6.907,6.907,0,0,0-.743-1.79.586.586,0,0,1,.09-.713l.613-.613a.669.669,0,0,0,0-.946L15.8,3.314a.669.669,0,0,0-.946,0l-.613.613a.586.586,0,0,1-.713.09,6.907,6.907,0,0,0-1.79-.743.586.586,0,0,1-.44-.567V1.841a.67.67,0,0,0-.669-.669H9.372a.67.67,0,0,0-.669.669v.865a.586.586,0,0,1-.44.567,6.907,6.907,0,0,0-1.79.743.586.586,0,0,1-.713-.09l-.613-.613a.669.669,0,0,0-.946,0L3.314,4.2a.669.669,0,0,0,0,.946l.613.613a.586.586,0,0,1,.09.713,6.905,6.905,0,0,0-.743,1.79.586.586,0,0,1-.567.439H1.841a.67.67,0,0,0-.669.669v1.255a.67.67,0,0,0,.669.669h.865a.586.586,0,0,1,.567.439,6.907,6.907,0,0,0,.743,1.79.586.586,0,0,1-.09.713l-.613.613a.669.669,0,0,0,0,.946l.888.888a.669.669,0,0,0,.946,0l.613-.613a.589.589,0,0,1,.713-.09Z" fill="%23222"/><path id="Path_114515" data-name="Path 114515" d="M148.952,153.3a4.352,4.352,0,1,1,4.352-4.352A4.356,4.356,0,0,1,148.952,153.3Zm0-7.531a3.18,3.18,0,1,0,3.18,3.18A3.183,3.183,0,0,0,148.952,145.772Z" transform="translate(-138.952 -138.952)" fill="%23222"/></svg>');
    }

    .custom-content-list li.security::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g id="Group_189792" data-name="Group 189792" transform="translate(-550 -2743)"><rect id="Rectangle_9279" data-name="Rectangle 9279" width="20" height="20" transform="translate(550 2743)" fill="none"/><g id="Group_189792-2" data-name="Group 189792" transform="translate(537.228 2739.82)"><path id="Path_114507" data-name="Path 114507" d="M30.048,11.709a2.709,2.709,0,0,0-1.928-.8h-.2V8.2A5.026,5.026,0,0,0,22.9,3.18h-.186A5.026,5.026,0,0,0,17.7,8.2v2.71h-.2a2.727,2.727,0,0,0-2.727,2.727v6.816A2.727,2.727,0,0,0,17.5,23.18H28.12a2.727,2.727,0,0,0,2.727-2.727V13.638a2.71,2.71,0,0,0-.8-1.928ZM19.011,8.2A3.71,3.71,0,0,1,22.717,4.5H22.9A3.71,3.71,0,0,1,26.608,8.2v2.71h-7.6Zm10.52,12.253a1.422,1.422,0,0,1-.413,1,1.4,1.4,0,0,1-1,.414H17.5a1.412,1.412,0,0,1-1.412-1.411V13.638A1.411,1.411,0,0,1,17.5,12.226H28.12a1.411,1.411,0,0,1,1.412,1.412v6.816Z" fill="%23222"/><path id="Path_114508" data-name="Path 114508" d="M60.314,76.464a.658.658,0,0,0-.658.658v2.317a.658.658,0,0,0,1.315,0V77.122A.658.658,0,0,0,60.314,76.464Z" transform="translate(-37.504 -61.235)" fill="%23222"/></g></g></svg>');
    }

    .custom-content-list li.dedicate::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g id="Group_189790" data-name="Group 189790" transform="translate(-531 -2752)"><rect id="Rectangle_9278" data-name="Rectangle 9278" width="20" height="20" transform="translate(531 2752)" fill="none"/><g id="Group_189790-2" data-name="Group 189790" transform="translate(529.34 2750.75)"><path id="Path_114499" data-name="Path 114499" d="M11.6,11.948A5.349,5.349,0,1,1,16.948,6.6,5.356,5.356,0,0,1,11.6,11.948Zm0-9.3A3.953,3.953,0,1,0,15.552,6.6,3.962,3.962,0,0,0,11.6,2.645Z" transform="translate(-0.25 0)" fill="%23222"/><path id="Path_114500" data-name="Path 114500" d="M19.339,22.157a.7.7,0,0,1-.7-.7c0-3.209-3.274-5.814-7.293-5.814s-7.293,2.6-7.293,5.814a.7.7,0,1,1-1.4,0c0-3.972,3.9-7.209,8.688-7.209s8.688,3.237,8.688,7.209A.7.7,0,0,1,19.339,22.157Z" transform="translate(0 -0.907)" fill="%23222"/></g></g></svg>');
    }

    .custom-content-list li.functional::before {
        background-image: url('data:image/svg+xml,<svg id="Group_189789" data-name="Group 189789" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g id="Group_189768" data-name="Group 189768" transform="translate(4.749 2.513)"><g id="Group_189767" data-name="Group 189767"><path id="Path_114505" data-name="Path 114505" d="M136.247,64.549a.754.754,0,0,0-1.066,0l-9.043,9.019-3.263-3.543a.754.754,0,1,0-1.109,1.021l3.794,4.12a.753.753,0,0,0,.538.243h.016a.755.755,0,0,0,.532-.22l9.6-9.573A.754.754,0,0,0,136.247,64.549Z" transform="translate(-121.568 -64.327)" fill="%23222"/></g></g><g id="Group_189770" data-name="Group 189770"><g id="Group_189769" data-name="Group 189769"><path id="Path_114506" data-name="Path 114506" d="M19.246,9.246a.754.754,0,0,0-.754.754A8.492,8.492,0,1,1,10,1.508.754.754,0,1,0,10,0,10,10,0,1,0,20,10,.754.754,0,0,0,19.246,9.246Z" fill="%23222"/></g></g></svg>');
    }

    .custom-content-list li.demo::before {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20"><defs><clipPath id="clip-path"><path id="Path_114518" data-name="Path 114518" d="M0,0H20V20H0Z" fill="none"/></clipPath></defs><g id="Group_189788" data-name="Group 189788" clip-path="url(%23clip-path)"><path id="Path_114516" data-name="Path 114516" d="M19.756,5.244a.833.833,0,0,1,0,1.179l-7.917,7.917a.833.833,0,0,1-1.178,0L7.083,10.762,1.423,16.423A.833.833,0,1,1,.244,15.244l6.25-6.25a.833.833,0,0,1,1.179,0l3.577,3.577,7.327-7.327a.833.833,0,0,1,1.179,0Z" transform="translate(0 -0.833)" fill="%23222" fill-rule="evenodd"/><path id="Path_114517" data-name="Path 114517" d="M16,5.833A.833.833,0,0,1,16.833,5h5a.833.833,0,0,1,.833.833v5a.833.833,0,1,1-1.667,0V6.667H16.833A.833.833,0,0,1,16,5.833Z" transform="translate(-2.667 -0.833)" fill="%23222" fill-rule="evenodd"/></g></svg>');
    }

    .custom-content-list li {
        padding-left: 30px;
        margin-bottom: 20px;
        text-align: left;
    }

    .custom-content-list {
        padding: 0 30px;
    }

    .ai-custom-section {
        padding: 30px 0;
    }

    .mobile-package {
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin: 0 15px;
    }

    .mobile-package-container {
        padding: 20px 0 0;
        border: solid 1px #E60078;
        border-bottom: 0;
        border-radius: 8px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .typical-content {
        line-height: 24px;
    }

    .request-pilot {
        margin: 20px auto 0;
    }

    .build-section .slider {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .build-box-container {
        grid-template-columns: 1fr;
    }

    .build-box {
        background: linear-gradient(90deg, #ECEEF5, #F9FAFD);
        border: none;
    }

    .technology-row {
        grid-template-columns: 1fr;
    }

    .technology-container:nth-child(2n + 1) {
        background: transparent;
    }

    .technology-title,
    .technology-container.first,
    .technology-container {
        border: none;
    }

    .technology-title h3::before {
        display: none;
    }

    .technology-image {
        border: solid 1px #E7EDF4 !important;
        border-radius: 4px;
    }

    .technology-image-container {
        gap: 5px;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    .large .technology-image-container {
        gap: 6px;
    }

    .technology-row .technology-image {
        height: 40px;
    }

    .technology-row.large .technology-image {
        height: 50px;
    }

    .width90 {
        width: 90px;
    }

    .width80 {
        width: 80px;
    }

    .width60 {
        width: 60px;
    }

    .height36 {
        height: 36px;
    }

    .height32 {
        height: 32px;
    }

    .height24 {
        height: 24px;
    }

    .height21 {
        height: 21px;
    }

    .height20 {
        height: 20px;
    }

    .height18 {
        height: 18px;
    }

    .height16 {
        height: 16px;
    }

    .height12 {
        height: 12px;
    }

    .height10 {
        height: 10px;
    }

    .height8 {
        height: 8px;
    }

    .height6 {
        height: 6px;
    }

    .d-none {
        display: none !important;
    }

    .technology-title h3 {
        padding-left: 0;
        margin-bottom: 6px;
    }

    .technology-container {
        margin-top: 30px;
    }

    .technology-container.first {
        margin-top: 0;
    }

    .technology-table {
        max-height: 857px;
    }

    .technology-table.isMore {
        max-height: 2150px;
    }

    .process-arrow {
        display: none;
    }

    .process-line .process-left {
        margin: 0;
    }

    .process-line {
        grid-template-columns: 1fr;
    }

    .process-col {
        display: grid;
        grid-template-columns: 60px 1fr;
        gap: 21px;
        align-items: start;
        position: relative;
    }

    .process-line1 img.process-icon {
        height: 60px;
    }

    .process-top {
        display: block;
        text-align: center;
        position: relative;
    }

    .process-col {
        padding-bottom: 10px;
    }

    .process-top::after {
        display: block;
        content: "";
        width: 1px;
        height: 120px;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1" height="100" viewBox="0 0 1 100"><path id="Path_114606" data-name="Path 114606" d="M30,0H130" transform="translate(0.5 -30) rotate(90)" fill="none" stroke="%23cbcbcb" stroke-width="1" stroke-dasharray="4"/></svg>');
        margin: 0 auto;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 70px;
        overflow: hidden;
        background-size: cover;
    }

    .build-mobile {
        width: 60px;
        height: 60px;
        background-color: #f2f2f2;
        border-radius: 50%;
    }

    .build-mobile img {
        width: 30px;
        height: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .process-col::before {
        display: block;
        content: "";
        width: 100%;
        height: 10px;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        z-index: 2;
    }

    .process-line3 {
        margin-top: 0;
    }

    .process-line3 .process-right .process-top::after {
        display: none;
    }

    .visit-section .grid-welcome-template {
        grid-template-columns: 1fr;
    }

    .ocss-section .grid-welcome-template {
        grid-template-columns: 1fr !important;
    }

    .ocss-box-content p {
        padding-left: 15px;
    }

    .ocss-box-content p::before {
        transform: translateY(0);
        top: 11px;
    }

    .ocss-box-wrapper {
        grid-template-columns: 1fr;
    }

    .staff-agm__form-box h2, .staff-agm__form-box .font-h2 span {
        font-size: 28px !important;
        line-height: 34px !important;
    }

    .build-section .slick-list {
        max-height: auto;
    }
}