/*!
* PT. IMAJIKU CIPTA MEDIA
* Copyright 2019-2024 IMAJIKU.
*/

/* = GENERAL
-------------------------------------------------------------*/
.bg-radial-gradient {
    background: radial-gradient(circle, #1c2e4a 0%,
            #050a12 70%,
            #000000 100%);
    background-repeat: no-repeat;
}

.bg-malibu {
    background-color: var(--hc-color-main-1);
}

.hc-center-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Article */
.article p {
    font-size: 16px;
    color: var(--hc-color-text-2);
    font-family: var(--hc-font-family-2);
    font-weight: 400;
    font-size: 16px;
    line-height: unset;
}

.article ul {
    list-style: none;
    padding: 0;
}

.article ul li {
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: var(--hc-color-text-2);
    margin-bottom: 8px;
    font-family: var(--hc-font-family-1);
    font-weight: 400;
    line-height: 1.8;
}

.article ul li::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: auto 0;
    background: url(../images/content/checklist.svg) no-repeat center / contain;
}

/* = RELATED
-------------------------------------------------------------*/
.hc-related-post-title {
    font-family: var(--hc-font-family-1);
    color: var(--hc-heading-color);
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 48px;
}

/* = NAVBAR
-------------------------------------------------------------*/
.hc-select-languange .ts-control {
    border-radius: 30px;
}

.ts-wrapper:not(.form-control):not(.form-select).single .ts-control {
    background-image: none;
}

.contact-btn {
    border-radius: 30px;
}

/* = BANNER TOP
-------------------------------------------------------------*/
.banner-top-box {
    height: auto;
    min-height: 430px;
    position: relative;
}

.banner-top-caption-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 430px;
    padding: 20px 0;
    z-index: 5;
    overflow: visible;
    height: auto;

}

.banner-top-caption {
    background-color: unset;
    backdrop-filter: unset;
    width: 100%;
}

.banner-top-caption h2 {
    color: var(--hc-color-main-2);
    padding: 8px 20px;
    border-radius: 30px;
    background-color: rgba(92, 165, 255, 0.05);
    font-size: 16px;
    margin-bottom: 32px;
}

.banner-top-caption h3 {
    color: var(--hc-heading-color);
    font-size: 52px;
    margin-bottom: 24px;
    font-weight: 700;
    font-family: var(--hc-font-family-1);
}

.banner-top-caption h3 b {
    background-clip: text;
    color: #1F0064;
    background-image: -webkit-linear-gradient(129deg, rgba(31, 0, 100, 1) 0%, rgba(92, 166, 255, 1) 50%, rgba(87, 65, 253, 1) 100%);
    background-image: -moz-linear-gradient(129deg, rgba(31, 0, 100, 1) 0%, rgba(92, 166, 255, 1) 50%, rgba(87, 65, 253, 1) 100%);
    background-image: linear-gradient(129deg, rgba(31, 0, 100, 1) 0%, rgba(92, 166, 255, 1) 50%, rgba(87, 65, 253, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1F0064", endColorstr="#5741FD", GradientType=0);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

.banner-top-caption .hc-banner-top-desc {
    color: var(--hc-color-gray-400);
    font-size: 18px;
    max-width: 600px;
    line-height: 1.6;
    font-family: var(--hc-font-family-2);
    margin-bottom: 40px;
}

.hc-banner-top-action {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.banner-top-caption .hc-banner-top-tag-list {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.banner-top-caption .hc-banner-top-tag-list .hc-banner-tag-item {
    background-color: var(--hc-color-white);
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 400;
    color: var(--hc-color-gray-500);
    font-family: var(--hc-font-family-2);
}

.banner-top-box.hc-variant-2 .banner-top-caption .hc-banner-top-title {
    display: flex;
    gap: 8px;
    padding: 8px 20px;
    margin-bottom: 32px;
    border-radius: 30px;
    background-color: rgba(92, 165, 255, 0.05);
}

.banner-top-box.hc-variant-2 .banner-top-caption img {
    width: 20px;
    height: 20px;
    margin: auto;
}

.banner-top-box.hc-variant-2 .banner-top-caption h2 {
    margin-bottom: 0;
    padding: 0;
    background-color: none;
    border-radius: 0;
}

.banner-top-box.hc-variant-3 .banner-top-caption h3 {
    font-size: 112px;
}

/* = CARD
------------------------------------------------------------ */
.hc-card-box {
    position: relative;
}

.hc-card-box .hc-card.hc-card-animation {
    transition: 0.6s;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}

.hc-card-box .hc-card.hc-card-animation:hover {
    transform: translateY(-8px);
    transition: 0.6s;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}

.hc-card-box .hc-card.hc-card-animation.hc-shadow:hover {
    box-shadow: 5px 10px 20px 0px rgb(0 0 0 / 10%);
}

.hc-shadow {
    backdrop-filter: blur(15px);
    box-shadow: 0px 10px 15px -3px rgb(0 0 0 / 10%);
}

.hc-card {
    background-color: var(--hc-color-white);
    border-radius: 16px;
}

.hc-card-img {
    position: relative;
}

.hc-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    transition: 0.6s;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}

.hc-card-content {
    position: relative;
    padding: 20px;
}

.hc-card-title h3 {
    font-family: var(--hc-font-family-1);
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: var(--hc-heading-color);
}

.hc-card-tag-list li {
    font-family: var(--hc-font-family-1);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
}

.hc-card-tag-list {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0px;
}

.hc-card-meta {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
}

.hc-card-action {
    position: relative;
    margin-top: 26px;
}

/* Variant Blog */
.hc-card-box.variant-blog .hc-card-img figure {
    border-radius: 16px 16px 0px 0px;
}

.hc-card-box.variant-blog .hc-card-title h3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* Number of lines to show */
    -webkit-box-orient: vertical;
    margin-bottom: 12px;
}

.hc-card-box.variant-blog .hc-card-desc p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Number of lines to show */
    -webkit-box-orient: vertical;
    margin-bottom: 12px;
    font-family: var(--font-family-2);
    font-size: 14px;
    font-weight: 400;
    color: var(--hc-color-text-2);
}

.hc-card-box.variant-blog .hc-card-content .hc-card-meta .hc-card-date p {
    font-family: var(--hc-font-family-2);
    font-weight: 400;
    font-size: 14px;
    color: var(--hc-color-gray-400);
    margin-bottom: 12px;
}

.read-more-btn {
    justify-content: flex-start !important;
}

.hc-blog-category-filter {
    display: flex;
    justify-content: center;
    margin-bottom: 48px;
    margin-top: 22px;
}

.hc-blog-category-filter .hc-blog-category-filter-list {
    display: flex;
    gap: 12px;
    list-style-type: none;
    flex-wrap: wrap;
    justify-content: center;
}

.hc-blog-category-filter .hc-blog-category-filter-list .hc-blog-category-filter-item {
    padding: 10px 20px;
    background-color: var(--hc-color-white);
    border-radius: 30px;
    border: 1px solid var(--hc-color-gray-400);
    font-family: var(--hc-font-family-2);
    font-weight: 600;
    font-size: 16px;
}

.hc-blog-category-filter .hc-blog-category-filter-list .hc-blog-category-filter-item:hover,
.hc-blog-category-filter .hc-blog-category-filter-list .hc-blog-category-filter-item.active {
    background-color: var(--hc-color-main-1);
    color: var(--hc-color-white);
    border: 1px solid var(--hc-color-main-1);
}

/* Variant 2 */
.variant-2 .hc-card-label {
    bottom: 16px;
    top: auto !important;
}

/* = PAGINATION
------------------------------------------------------------ */
.pagination .page-item.active .page-link {
    background-color: var(--hc-color-main-1);
    border-color: var(--hc-color-main-1);
}

.pagination .page-item .page-link {
    font-family: var(--hc-font-family-2);
}

/* = BLOG DETAIL
------------------------------------------------------------ */
.hc-back-btn {
    background-color: var(--hc-color-white);
    border-radius: 30px;
    border: 1px solid var(--hc-color-gray-200);
    padding: 10px 20px;
}

.hc-back-btn:hover {
    background-color: var(--hc-color-main-1);
    color: var(--hc-color-white);
}

.blog-category p {
    padding: 6px 16px;
    background-color: var(--hc-color-main-1);
    font-weight: 700;
    font-family: var(--hc-font-family-2);
    font-size: 12px;
    width: fit-content;
    border-radius: 30px;
    text-transform: uppercase;
    color: var(--hc-color-white);
    margin-bottom: 24px;
}

.blog-title h1 {
    font-family: var(--hc-font-family-1);
    font-size: 60px;
    font-weight: 700;
    color: var(--hc-heading-color);
    margin-bottom: 32px;
}

.article-meta ul li {
    display: flex;
    gap: 8px;
}

.article-meta ul li span {
    margin: auto;
}

.hc-more-padding {
    padding: 0 100px;
}

.hc-blog-img {
    display: flex;
    justify-content: center;
}

.hc-blog-img img {
    border-radius: 24px;
    margin: 16px 0;
}

.hc-card-label {
    padding: 5px 10px;
    background: var(--hc-color-white);
    width: fit-content;
    border-radius: 30px;
    font-size: 12px;
    position: absolute;
    top: 16px;
    z-index: 1;
    left: 16px;
    font-family: var(--hc-color-main-2);
    font-weight: 600;
    color: var(--hc-color-main-2);
}

/* = CONTACT
------------------------------------------------------------ */
.hc-contact-detail {
    padding: 25px;
    border-radius: 24px;
    background-color: var(--hc-color-gray-50);
    margin-bottom: 32px;
}

.hc-contact-detail .hc-contact-detail-title {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.hc-contact-detail .hc-contact-detail-title .hc-contact-detail-title-icon {
    padding: 12px;
    border-radius: 12px;
    background-color: rgba(92, 165, 255, 0.1);
    display: flex;
}

.hc-contact-detail .hc-contact-detail-title .hc-contact-detail-title-icon span {
    color: var(--hc-color-main-1);
    width: 16px;
    height: 16px;
    margin: auto;
}

.hc-contact-detail .hc-contact-detail-title .hc-contact-detail-title-text {
    margin: auto 0;
}

.hc-contact-detail .hc-contact-detail-title .hc-contact-detail-title-text label {
    color: var(--hc-color-gray-400);
    font-family: var(--hc-font-family-2);
    font-size: 14px;
    font-weight: 400;
}

.hc-contact-detail-text p {
    font-family: var(--hc-font-family-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--hc-heading-color);
}

.hc-contact-sosmed .hc-contact-sosmed-title h4 {
    font-family: var(--hc-font-family-2);
    font-size: 14px;
    font-weight: 400;
    color: var(--hc-color-gray-400);
    margin-bottom: 16px;
}

.hc-contact-sosmed .hc-contact-sosmed-list {
    display: flex;
    gap: 12px;
}

.hc-contact-sosmed .hc-contact-sosmed-list .hc-contact-sosmed-item {
    padding: 12px;
    border-radius: 12px;
    background-color: var(--hc-color-white);
    display: flex;
    cursor: pointer;
    border: 1px solid var(--hc-color-gray-400);
}

.hc-contact-sosmed .hc-contact-sosmed-list .hc-contact-sosmed-item span {
    color: var(--hc-color-main-2);
}

.hc-contact-sosmed .hc-contact-sosmed-list .hc-contact-sosmed-item:hover {
    background-color: var(--hc-color-main-1);
}

.hc-contact-sosmed .hc-contact-sosmed-list .hc-contact-sosmed-item:hover span {
    color: var(--hc-color-white);
}

.hc-contact-sosmed .hc-contact-sosmed-list .hc-contact-sosmed-item span {
    width: 20px;
    height: 20px;
    margin: auto;
}

.contact-form-box {
    padding: 32px;
    border-radius: 24px;
    background-color: var(--hc-color-white);
}

.contact-box-info-heading h4 {
    font-family: var(--hc-font-family-1);
    font-weight: 700;
    font-size: 24px;
    color: var(--hc-heading-color);
}

.hc-send-message-btn {
    padding: 16px 20px !important;
    border-radius: 40px;
}

.hc-contact-map iframe {
    width: 100%;
    margin-top: 24px;
}

/* = BANNER
------------------------------------------------------------ */
.hc-banner-sc-box {
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
    z-index: 1;
    overflow: hidden;
}

.hc-banner-sc-caption-box {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 15px;
    padding: 30px 30px;
    min-height: 388px;
    max-width: 980px;
    margin: 0 auto;
    z-index: 5;
    overflow: hidden;
}

.hc-banner-sc-desc {
    position: relative;
    text-align: center;
}

.hc-banner-sc-desc h2 {
    font-family: var(--font-family-1);
    font-size: 48px;
    font-weight: 700;
    color: var(--hc-color-white);
    line-height: 1.4;
    margin-bottom: 15px;
}

.hc-banner-sc-desc p {
    font-family: var(--font-family-2);
    font-weight: 500;
    font-size: 18px;
    color: var(--hc-color-gray-400);
    line-height: 1.6;
}

.hc-banner-sc-desc .hc-subtitle-tag {
    padding: 10px 20px;
    background-color: rgb(255 255 255 / 10%);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
}

.hc-banner-sc-action .hc-btn {
    font-size: 18px;
}

.hc-banner-sc-bg-box {
    display: block;
}

.hc-banner-sc-bg-box img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    object-fit: cover;
    object-position: center;
    transition: 0.6s;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}

.hc-banner-sc-bg-box:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgb(47 55 102 / 0%);
    z-index: -1;
}

.hc-cta-btn {
    border-radius: 30px;
    padding: 16px 32px !important;
}

/* = HEADING
------------------------------------------------------------ */
.hc-heading-section .hc-title {
    font-size: 60px;
    line-height: unset;
}

.hc-heading-section .hc-subtitle {
    padding: 8px 16px;
    background-color: rgba(92, 165, 255, 0.1);
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    color: var(--hc-color-main-2);
}

.hc-heading-section .hc-desc {
    color: var(--hc-color-gray-400);
}

.hc-heading-section .hc-subtitle.variant-2 {
    color: #6B8AFD;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.hc-heading-section.hc-variant-3 {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.hc-heading-section.hc-variant-3 .hc-title {
    text-align: left;
    line-height: 1.2;
    font-family: var(--hc-font-family-1);
}

.hc-heading-section.hc-variant-3 .hc-subtitle {
    background-color: unset;
    color: var(--hc-color-main-1);
    padding: 0;
}

.hc-heading-section.hc-variant-3 .hc-desc {
    text-align: left;
    line-height: 1.6;
}

.hc-heading-section.hc-variant-4 .hc-subtitle {
    padding: 0;
    background-color: unset;
    color: var(--hc-color-main-3);
}

.hc-heading-section.hc-variant-4 .hc-title {
    color: var(--hc-color-white);
}

/* = CARD VARIANT 2
------------------------------------------------------------ */
.hc-card-box.hc-variant-2 .hc-card-img {
    background-color: var(--hc-color-main-1);
    border-radius: 16px;
    padding: 14px;
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
}

.hc-card-box.hc-variant-2 .hc-card-content {
    background-color: rgba(92, 165, 255, 0.05);
    border-radius: 24px;
}

.hc-card-box.hc-variant-2 .hc-card-title h3 {
    font-size: 24px;
    margin-bottom: 12px;
}

.hc-card-box.hc-variant-2 .hc-btn.variant-plain {
    font-weight: 600;
}

/* = CARD VARIANT 3
------------------------------------------------------------ */
.hc-card-box.hc-variant-3 .hc-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 24px;
}

.hc-card-box.hc-variant-3 .hc-card-content {
    padding: 41px;
}

.hc-card-box.hc-variant-3 .hc-card-title h3 {
    font-size: 24px;
}

.hc-card-box.hc-variant-3 .hc-card-desc p {
    font-size: 16px;
    color: var(--hc-color-gray-400);
}

.hc-card-box.hc-variant-3 .hc-card-title h3 {
    text-align: center;
    color: var(--hc-color-white);
    font-size: 16px;
}

.hc-card-box.hc-variant-3 .hc-card-title h4 {
    text-align: center;
    color: var(--hc-color-main-3);
    font-family: var(--hc-font-family-1);
    font-size: 36px;
    font-weight: 700;
}

.hc-card-box.hc-variant-3 .hc-card-desc p {
    text-align: center;
    font-size: 14px;
}

/* = CARD VARIANT 4
------------------------------------------------------------ */
.hc-card-box.hc-variant-4 .hc-card {
    background-color: rgba(92, 165, 255, 0.05);
    border-radius: 24px;
}

/* = CARD VARIANT 5
------------------------------------------------------------ */
.hc-card-box.hc-variant-5 .hc-card-img {
    background-color: rgba(92, 165, 255, 0.1);
    border-radius: 16px;
    padding: 14px;
    width: 56px;
    height: 56px;
}

.hc-card-box.hc-variant-5 .hc-card-content {
    background: #F9FAFB;
    background: -webkit-linear-gradient(343deg, rgba(249, 250, 251, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: -moz-linear-gradient(343deg, rgba(249, 250, 251, 1) 0%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(343deg, rgba(249, 250, 251, 1) 0%, rgba(255, 255, 255, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F9FAFB",
            endColorstr="#FFFFFF",
            GradientType=0);
    border-radius: 24px;
}

.hc-card-box.hc-variant-5 .hc-card-title h3 {
    font-size: 24px;
}

.hc-card-box.hc-variant-5 .hc-card-desc p {
    font-size: 16px;
    color: var(--hc-color-text-2);
}

.hc-card-box.hc-variant-5 ul.hc-checklist-list li {
    font-size: 14px;
    color: var(--hc-color-text-2);
    margin-bottom: 8px;
}

.hc-card-box.hc-variant-5 .hc-btn.variant-plain {
    font-weight: 600;
}

.hc-card-box.hc-variant-5 .hc-card-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.hc-card-box.hc-variant-5 .hc-card-top p {
    font-size: 40px;
    margin: auto 0;
    color: var(--hc-color-gray-200);
    /* font-family: var(--hc-font-family-1); */
    font-weight: 700;
}

/* = PRODUCT
------------------------------------------------------------ */
.hc-why-our-product-section .hc-center-content {
    min-height: 550px;
}

.hc-why-our-product-section .hc-center-content .hc-heading-section {
    margin-bottom: 80px;
}

.hc-product-cta-section {
    background-image: url(../images/content/bg-product-cta.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hc-product-cta-section .hc-center-content {
    padding-top: 40px;
    padding-bottom: 40px;
}

.hc-product-cta-section .hc-center-content .hc-heading-section {
    margin-bottom: 48px;
}

/* = Timeline
------------------------------------------------------------ */
.hc-how-we-work-heading {
    flex-direction: column;
    text-align: center;
}

.hc-process-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 0;
}

.hc-process-timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, #6B8AFD 10%, #6B8AFD 90%, transparent 100%);
    transform: translateX(-50%);
    box-shadow: 0 0 20px rgba(107, 138, 253, 0.5);
}

.hc-process-step {
    position: relative;
    display: flex;
    margin-bottom: 48px;
    z-index: 1;
}

.hc-process-step:last-child {
    margin-bottom: 0;
}

.hc-process-step-left {
    justify-content: flex-end;
    padding-right: calc(50% + 40px);
}

.hc-process-step-left .hc-process-card {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.hc-process-step-left .hc-process-icon-box {
    flex-direction: row-reverse;
}

.hc-process-step-right {
    justify-content: flex-start;
    padding-left: calc(50% + 40px);
}

.hc-process-step-right .hc-process-card {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.hc-process-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    max-width: 380px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    width: 100%;
}

.hc-process-card.hc-variant-2 {
    max-width: unset;
}

.hc-process-icon-box {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.hc-process-icon {
    width: fit-content;
    padding: 10px;
    background: var(--hc-color-main-1);
    border-radius: 16px;
}

.hc-process-num {
    font-size: 14px;
    font-weight: 400;
    color: var(--hc-color-main-3);
    margin: auto 0;
}

.hc-process-title {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}

.hc-process-desc {
    color: #B0B0B0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

/* Timeline dots on the line */
.hc-process-step::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    background: #6B8AFD;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px rgba(107, 138, 253, 0.6);
    z-index: 2;
}

.hc-process-timeline.hc-variant-2 .hc-process-step .hc-process-card {
    background: unset;
    box-shadow: none;
    border: 0;
}

.hc-process-timeline.hc-variant-2 .hc-process-step-left .hc-process-card .hc-process-img {
    margin-bottom: 16px;
}

.hc-process-timeline.hc-variant-2 .hc-process-card .hc-process-img img {
    border-radius: 16px;
}

.hc-process-timeline .hc-process-step-left .hc-process-card .hc-process-desc {
    text-align: end;
}

.hc-process-timeline.hc-variant-2 .hc-process-step-left .hc-process-card .hc-process-year {
    font-size: 48px;
    font-family: var(--hc-font-family-1);
    background-clip: text;
    color: #1F0064;
    background: #1F0064;
    background: -webkit-linear-gradient(121deg, rgba(31, 0, 100, 1) 0%, rgba(92, 166, 255, 1) 50%, rgba(87, 65, 253, 1) 100%);
    background: -moz-linear-gradient(121deg, rgba(31, 0, 100, 1) 0%, rgba(92, 166, 255, 1) 50%, rgba(87, 65, 253, 1) 100%);
    background: linear-gradient(121deg, rgba(31, 0, 100, 1) 0%, rgba(92, 166, 255, 1) 50%, rgba(87, 65, 253, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1F0064", endColorstr="#5741FD", GradientType=0);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

/* = BUTTON
------------------------------------------------------------ */
.hc-btn.variant-solid.hc-variant-2 {
    background-color: var(--hc-color-white);
    color: var(--hc-color-main-3) !important;
    border: 1px solid var(--hc-color-main-2);
    border-radius: 30px;
    padding: 16px 32px !important;
}

.hc-btn.variant-solid.hc-variant-2:hover {
    background-color: var(--hc-color-main-3);
    color: var(--hc-color-white) !important;
}

.hc-btn.variant-solid.hc-variant-3 {
    background-color: var(--hc-color-main-1);
    color: var(--hc-color-white) !important;
    border-radius: 30px;
    padding: 16px 32px !important;
}

.hc-btn.variant-outline {
    background-color: transparent;
    color: var(--hc-color-white) !important;
    border: 1px solid var(--hc-color-white);
    border-radius: 30px;
    padding: 16px 32px !important;
}

.hc-btn.variant-outline:hover {
    background-color: var(--hc-color-main-3);
    color: var(--hc-color-white) !important;
}

.hc-btn.variant-outline.hc-variant-2 {
    color: var(--hc-color-main-1) !important;
    border: 1px solid var(--hc-color-main-1);
}

.hc-btn.variant-outline.hc-variant-2:hover {
    background-color: var(--hc-color-main-1);
    color: var(--hc-color-white) !important;
}

/* = PRODUCT DETAIL
------------------------------------------------------------ */
.collapse-mjk-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.collapse-mjk-item {
    background: rgba(92, 166, 255, 0.05);
    padding: 15px 24px;
    border-radius: 16px;
}

.collapse-mjk-link.nav-variant-1[aria-expanded="false"]::after {
    background: rgba(92, 166, 255, 0.5);
    border-radius: 8px !important;
    height: 40px !important;
    width: 40px !important;
    color: var(--hc-color-main-1);
}

.collapse-mjk-link.nav-variant-1[aria-expanded="true"]::after {
    background: var(--hc-color-main-1);
    border-radius: 8px !important;
    height: 40px !important;
    width: 40px !important;
    color: var(--hc-color-white);
}

.hc-product-cta-section-btn-list {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* = ABOUT
------------------------------------------------------------ */
.hc-expertise-list {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}

.hc-expertise-list .hc-expertise-item {
    align-items: center;
    display: flex;
    gap: 16px;
    flex-direction: column;
    justify-content: center;
    width: 140px;
    height: 122px;
    border-radius: 16px;
    border: 1px solid var(--hc-color-gray-200);
}

.hc-expertise-list .hc-expertise-item .hc-expertise-item-img {
    width: 40px;
    height: 40px;
}

.hc-expertise-list .hc-expertise-item .hc-expertise-item-title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    text-align: center;
    padding: 0 16px;
}

.hc-counter-item .hc-counter-item-title {
    font-family: var(--font-family-1);
    font-weight: 700;
    font-size: 60px;
    color: var(--hc-color-white);
    text-align: center;
}

.hc-counter-item .hc-counter-item-desc {
    font-weight: 400;
    font-size: 14px;
    color: var(--hc-color-white);
    text-align: center;
    margin-bottom: 0;
}

/* = HOME
------------------------------------------------------------ */
.client-session {
    padding: 81px 0;
    border-top: 1px solid var(--hc-color-gray-100);
}

.client-session .client-session-title {
    font-family: var(--font-family-2);
    font-size: 14px;
    font-weight: 500;
    color: var(--hc-color-gray-300);
    text-align: center;
    margin-bottom: 48px;
    text-transform: uppercase;
}

.client-session .client-slider img {
    height: 192px;
}