@charset "UTF-8";

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap; /* Quyết định việc giảm CLS */
    src: url('../fonts/inter-fonts.woff2') format('woff2-variations'),
         url('../fonts/inter-fonts.woff2') format('woff2');
    /* Dải ký tự Latin cơ bản cho tiếng Anh */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap; /* Quyết định việc giảm CLS */
    src: url('../fonts/inter-fonts.woff2') format('woff2-variations'),
        url('../fonts/inter-fonts.woff2') format('woff2');
    /* Dải ký tự Latin cơ bản cho tiếng Anh */
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;

    font-style: italic;
}

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

p {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
}

body {
    font-family: 'Inter';
    background-color: #fff;
    color: #222;
    margin: 0;
}

.groove-section {
    max-width: 1170px;
    margin: 0 auto;
}

.width-fit {
    width: fit-content;
}

.text-center {
    text-align: center;
}

.font15 {
    font-size: 15px;
    line-height: 20px;
}

.relative {
    position: relative;
}

.color {
    color: #E60078;
}

.color-white {
    color: #fff;
}

.color-black {
    color: #000;
}

.color-blue {
    color: #3381F2;
}

.color-red {
    color: red;
}

.font-bold2x {
    font-weight: bold;
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500;
}

.font-semibold {
    font-weight: 600;
}

.color-222 {
    color: #222;
}

.color-444 {
    color: #444;
}

.grid {
    display: grid;
}

.flex {
    display: flex;
}

img {
    max-width: 100%;
}

.grid11 {
    grid-template-columns: 1fr 1fr;
}

.font17 {
    font-size: 17px;
    line-height: 24px;
}

.font24 {
    font-size: 24px;
    line-height: 32px;
}

.font36 {
    font-size: 36px;
    line-height: 46px;
}

h2 span,
h3 span,
h4 span {
    font-size: inherit;
    line-height: inherit;
}

.cursor {
    cursor: pointer;
}

.m0 {
    margin: 0;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.ml20 {
    margin-left: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mb0 {
    margin-bottom: 0;
}

.mb5 {
    margin-bottom: 5px;
}

.mb7 {
    margin-bottom: 7px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb35 {
    margin-bottom: 35px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb60 {
    margin-bottom: 60px;
}

.p0 {
    padding: 0;
}

.pl20 {
    padding-left: 20px;
}

.decoration-none {
    text-decoration: none;
}

.padding-section50 {
    padding: 50px 0;
}

.padding-section70 {
    padding: 70px 0;
}

.padding-section75 {
    padding: 75px 0;
}

.justify-space {
    justify-content: space-between;
}

.align-center {
    align-items: center;
}

.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;
}

.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;
}

.build-section .slick-arrow {
    width: 48px;
    height: 48px;
    background: #F9FAFD url(../img/arrow.svg);
    transition: 0.3s;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border-radius: 50%;
}

.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/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: 144px;
}

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

.only-mobile {
    display: none;
}

/* ===== 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/user.png);
}

.icon-field.email-field::after {
    background-image: url(../img/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/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;
}

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

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

    .text-center-mobile {
        text-align: center;
    }

    .mm0 {
        margin: 0;
    }

    .mmt10 {
        margin-top: 10px;
    }

    .mmt20 {
        margin-top: 20px;
    }

    .mmb5 {
        margin-bottom: 10px;
    }

    .mmb10 {
        margin-bottom: 10px;
    }

    .mmb15 {
        margin-bottom: 15px;
    }

    .mmb20 {
        margin-bottom: 20px;
    }

    .mmb30 {
        margin-bottom: 30px;
    }

    .mp0 {
        padding: 0;
    }

    .mpb30 {
        padding-bottom: 30px;
    }

    .mpb50 {
        padding-bottom: 50px !important;
    }

    .mplr {
        padding-left: 15px;
        padding-right: 15px;
    }

    .only-mobile {
        display: block;
    }

    .font28m {
        font-size: 28px;
        line-height: 36px;
    }

    .font20m {
        font-size: 20px;
        line-height: 24px;
    }

    .font17m {
        font-size: 17px;
        line-height: 24px;
    }

    .font15m {
        font-size: 15px;
        line-height: 20px;
    }

    .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;
    }

    .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 {
        margin: 0 auto;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="361" height="307.044" viewBox="0 0 361 307.044"><path id="Path_114603" data-name="Path 114603" d="M354.46,251.551,191.2,304.3a35.184,35.184,0,0,1-21.585.015L5.55,251.546A8,8,0,0,1,0,243.932V8A8,8,0,0,1,8,0H352a8,8,0,0,1,8,8V243.941a8,8,0,0,1-5.54,7.61" transform="translate(0.5 0.5)" fill="none" stroke="%23e60078" stroke-width="1"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 360px;
        min-height: 306px;
    }

    .mobile-package-container {
        padding: 20px 0;
    }

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

    .request-pilot {
        display: none;
    }

    .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: 956px;
    }

    .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;
    }

    .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;
    }
}