/* Start of Typography */

.text-display{
    font-size: var(--font-size-6xl);
    line-height: 140%;
    font-weight: var(--font-weight-bold);
    color: var(--text-default);
}
h1{
    font-size: var(--font-size-5xl);
    line-height: 140%;
    font-weight: var(--font-weight-semi-bold);
    color: var(--text-default);
}
h2, .big-title{
    font-size: var(--font-size-4xl);
    line-height: 140%;
    font-weight: var(--font-weight-semi-bold);
    color: var(--text-default);
}
.title{
    font-size: var(--font-size-2xl);
    line-height: 140%;
    font-weight: var(--font-weight-semi-bold);
    color: var(--text-default);
}
.sub-title{
    font-size: var(--font-size-lg);
    line-height: 140%;
    font-weight: var(--font-weight-medium);
    color: var(--text-default);
}
p{
    font-size: var(--font-size-md);
    line-height: 160%;
    font-weight: var(--font-weight-reguler);
    color: var(--text-body);
}
.helper{
    font-size: var(--font-size-sm);
    line-height: 140%;
    font-weight: var(--font-weight-medium);
    color: var(--text-default);
}
a{
    color: var(--text-action);
    text-decoration: none;
    transition: 0.2s ease;
}
a:hover{
    color: var(--text-action-hover);
    text-decoration: underline;
}
@media (max-width: 1280px){
    .text-display{
        font-size: var(--font-size-5xl);
    }
    h1{
        font-size: var(--font-size-4xl);
    }
    h2, .big-title{
        font-size: var(--font-size-3xl);
    }
    .title{
        font-size: var(--font-size-xl);
    }
    .sub-title{
        font-size: var(--font-size-md);
    }
    p{
        font-size: var(--font-size-md);
    }
    .helper{
        font-size: var(--font-size-sm);
    }
}
@media (max-width: 1024px){
    .text-display{
        font-size: var(--font-size-4xl);
    }
    h1{
        font-size: var(--font-size-3xl);
    }
    h2, .big-title{
        font-size: var(--font-size-2xl);
    }
    .title{
        font-size: var(--font-size-lg);
    }
    .sub-title{
        font-size: var(--font-size-sm);
    }
    p{
        font-size: var(--font-size-sm);
    }
    .helper{
        font-size: var(--font-size-xs);
    }
}
@media (max-width: 991px){
    .text-display{
        font-size: var(--font-size-3xl);
    }
    h1{
        font-size: var(--font-size-2xl);
    }
    h2, .big-title{
        font-size: var(--font-size-xl);
    }
    .title{
        font-size: var(--font-size-md);
    }
    .sub-title{
        font-size: var(--font-size-sm);
    }
    p{
        font-size: var(--font-size-sm);
    }
    .helper{
        font-size: var(--font-size-xs);
    }
}
@media (max-width: 640px){
    .text-display{
        font-size: var(--font-size-2xl);
    }
    h1{
        font-size: var(--font-size-xl);
    }
    h2, .big-title{
        font-size: var(--font-size-lg);
    }
    .title{
        font-size: var(--font-size-md);
    }
    .sub-title{
        font-size: var(--font-size-sm);
    }
    p{
        font-size: var(--font-size-sm);
    }
    .helper{
        font-size: var(--font-size-xs);
    }
}
@media (max-width: 320px){
    .text-display{
        font-size: var(--font-size-xl);
    }
    h1{
        font-size: var(--font-size-lg);
    }
    h2, .big-title{
        font-size: var(--font-size-md);
    }
    .title{
        font-size: var(--font-size-sm);
    }
    .sub-title{
        font-size: var(--font-size-xs);
    }
    p{
        font-size: var(--font-size-xs);
    }
    .helper{
        font-size: var(--font-size-xs);
    }
}

/* End of Typography */

/* Input */

.input-group{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
label{
    width: fit-content;
    color: var(--text-ghost);
    font-size: 16px;
}
input, textarea, select{
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: var(--width-border-1) solid var(--border-light);
    border-radius: var(--radius-rounded);
    font-size: 16px;
    transition: 0.2s ease;
}
input::placeholder, textarea::placeholder, select::placeholder{
    font-size: 16px;
    color: var(--text-ghost);
}
.input-group .input-alert{
    color: var(--text-ghost);
    display: none;
}
.input-wrapper {
    position: relative;
    width: 100%;
}
.input-icon {
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-ghost);
    pointer-events: none;
    transition: 0.2s ease, opacity 0.2s ease;
    opacity: 1;
}
.input-wrapper input, .input-wrapper textarea, .input-wrapper select {
    padding-left: calc(var(--space-4) * 2 + 10px);
}
textarea{
	resize: none;
}
.input-wrapper:focus-within .input-icon {
    display: none;
    opacity: 0;
}
.input-wrapper input:focus, .input-wrapper textarea:focus, .input-wrapper select:focus {
    padding-left: calc(var(--space-1) * 2 + 10px);
}
.search-group .cta-group .cta-button{
    max-width: 100%;
    margin-top: var(--space-3);
}

/* Input */

/* Button */

.cta-button{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-rounded-md);
    gap: var(--space-3);
    max-width: fit-content;
    width: 100%;
    transition: 0.2s ease;
    cursor: pointer;
}
.float-btn{
    width: 48px;
    height: 48px;
    right: 33px;
    bottom: 124px;
    z-index: 1;
    border-radius: var(--radius-rounded-full);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    transition: 0.2s ease;
    cursor: pointer;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
}
.float-btn.show{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.cta-button.disabled{
    background: var(--surface-disable) !important;
    border: var(--width-border-1) solid var(--border-default) !important;
    color: var(--text-white) !important;
    cursor: not-allowed !important;
}
.cta-button .cta-icon{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.cta-icon svg{
    width: 100%;
    height: 100%;
    fill: inherit;
}
a.cta-button{
    text-decoration: none;
}
.cta-button .cta-text{
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: 160%;
    color: inherit;
    white-space: nowrap;
}
.cta-button.cta-primary{
    background: var(--surface-action);
    color: var(--text-white);
    border: var(--width-border-1) solid var(--border-action);
}
.cta-button.cta-primary:hover{
    background: var(--surface-action-hover);
}
.cta-button.cta-secondary{
    border: var(--width-border-1) solid var(--border-action);
    color: var(--text-primary);
    fill: var(--text-primary);
}
.cta-button.cta-secondary:hover{    
    background: var(--surface-action);
    color: var(--text-white);
    fill: var(--text-white);
    border: var(--width-border-1) solid var(--border-action-hover);
}
.cta-button.cta-tertiary{
    color: var(--text-action);
    padding: var(--space-2) var(--space-0);
}
.cta-button.cta-tertiary:hover{
    color: var(--text-action-hover);
}
.float-btn.top-scroll{
    border: var(--width-border-2) solid var(--surface-white);
    color: var(--text-primary);
    fill: var(--text-primary);
    background: var(--surface-action);
}
.float-btn svg{
    width: 100%;
    height: 100%;
    color: var(--text-white);
    fill: var(--icon-white);
}
.cta-group{
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
@media (max-width: 1280px){
    /* .cta-group{
        gap: var(--space-2);
    } */
}
@media (max-width: 991px){
    .cta-button{
        max-width: 100%;
    }
}
@media (max-width: 640px){
    .cta-button{
        padding: var(--space-1) var(--space-4);
    }
    .cta-button .cta-text{
        font-size: var(--font-size-sm);
    }
    .cta-group{
        flex-direction: column;
    }
    .float-btn{
        width: 32px;
        height: 32px;
    }
}

/* Button */

/* Chip */

.chip-group{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2);
    border-radius: var(--radius-rounded-full);
    background: var(--surface-default);
    max-width: fit-content;
    position: sticky;
    top: var(--space-5);
    justify-content: center;
}

.chip{
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-rounded-full);
    color: var(--text-action);
    background: var(--surface-white);
    border: var(--width-border-1) solid var(--border-light);
    cursor: pointer;
    font-weight: 500;
    transition: 0.1s ease-in;
}

.chip:hover{
    background: var(--surface-action);
    border: var(--width-border-1) solid var(--border-action);
    color: var(--text-white);
}

.chip.active{
    background: var(--surface-action);
    border: var(--width-border-1) solid var(--border-action);
    color: var(--text-white);
}

.chip.active:hover{
    background: var(--surface-action-hover);
    border: var(--width-border-1) solid var(--border-action-hover);
}

/* Chip */

/* Header Section */

body.menu-open{
    overflow: hidden;
}
header{
    padding: var(--space-4) var(--space-3);
    min-height: 66px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 9999999999;
    background: var(--surface-white);
    transition: border-bottom .2s ease;
}
header.scroll{
    border-bottom: var(--width-border-1) solid var(--border-light);
}
.header-group{
    max-width: var(--xl);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-8);
}
.header-left{
    display: flex;
    align-items: center;
    gap: var(--space-9);
    flex-shrink: 0;
    z-index: 2;
}
.header-right{
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    z-index: 2;
}
.header-logo{
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.header-logo svg{
    width: 100%;
    height: 100%;
}
.header-right .divider{
    content: '';
    width: 1px;
    border-left: var(--width-border-1) solid var(--border-default);
    flex-shrink: 0;
}
.header-mobile{
    display: none;
}
.nav-menu-group{
    display: flex;
    align-items: center;
    gap: var(--space-0);
    position: relative;
}
.menu-item{
    position: relative;
    list-style: none;
    flex-shrink: 0;
    white-space: nowrap;
    padding: var(--space-3) var(--space-3);
}
.menu-item a{
    color: var(--text-default);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.menu-item > a .menu-title {
    color: var(--text-default);
	font-size: var(--font-size-sm);
}
.menu-item:hover > a .menu-title {
    color: var(--text-action);
}
.menu-item a .caret-icon{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    fill: inherit;
    flex-shrink: 0;
}
.caret-icon svg{
    width: 100%;
    height: 100%;
    fill: inherit;
    color: inherit;
}
.menu-item > a .caret-icon{
    color: var(--icon-default);
    fill: var(--icon-default);
}
.menu-item:hover > a .caret-icon{
    color: var(--icon-action);
    fill: var(--icon-action);
}
.hamburger {
    width: 48px;
    height: 48px;
    display: none;
    flex-direction: column;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: var(--surface-action-hover2);
    border: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-rounded-lg);
}
.hamburger span {
    height: 3px;
    width: 100%;
    background-color: var(--text-body);
    border-radius: 5px;
    display: block;
    transition: all 0.35s ease;
    transform-origin: center;
}
.hamburger.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
    transform: translateY(-9px) rotate(-45deg);
}
.parent-duplicate-title{
    list-style: none;
    color: var(--text-ghost);
    padding: var(--space-2) var(--space-2);
    border-bottom: var(--width-border-2) solid var(--border-light);
    margin-bottom: var(--space-3);
}
.menu-title-group{
    width: 100%;
}

/* Menu Dropdown */

@keyframes pulseOrange {
    0% {
        box-shadow: 0 0 0 0 rgba(251, 99, 36, 0.5);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(251, 99, 36, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(251, 99, 36, 0);
    }
}

.menu-item .sub-menu{
    max-height: 0;
    position: absolute;
    display: none;
    flex-direction: column;
    min-width: 300px;
    width: 100%;
    top: 43px;
    z-index: 2;
    background: var(--surface-white);
    border-radius: var(--radius-rounded-xl);
    padding: var(--space-5) var(--space-3);
    opacity: 0;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    transition: opacity 0.2s ease, max-height 0.2s ease, display 0.2s ease;
}
.menu-item:hover .sub-menu{
    display: flex;
/*     max-height: 500px; */
	max-height: fit-content;
    opacity: 1;
}
.sub-menu .menu-item.disabled{
	opacity: 0.5;
	pointer-events: none;
}
.sub-menu .menu-item{
    border-radius: var(--radius-rounded-xl);
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.sub-menu .menu-item:hover{
    background: var(--surface-action-hover2);
}
.sub-menu .menu-item a{
    padding: var(--space-1);
    color: var(--text-default);
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    height: 100%;
    width: 100%;
}
.sub-menu .menu-item:hover a{
    color: var(--text-action);
}
.sub-menu .menu-item .new-feature-badge {
    background: linear-gradient(135deg, #fb6324, #ff7a3b);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-white);
    position: relative;
    animation: pulseOrange 1.8s infinite ease-out;
}
.sub-menu .menu-item .menu-description{
    color: var(--text-ghost);
}
.sub-menu .menu-item .sub-menu {
    top: 0;
    left: 100%;
    position: absolute;
    min-width: 260px;
	width: fit-content;
    transform: translateX(10px);
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    transition: opacity .25s ease, transform .25s ease;
}
.sub-menu .menu-item:hover > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    max-height: 500px;
    transform: translateX(0);
}
.caret-depth-1 svg, .caret-depth-2 svg{
    transform: rotate(-90deg);
}

.sub-menu .menu-item a:has(.caret-depth-1){
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-3);
}

@media (max-width: 1280px){
    .menu-item{
        padding: var(--space-3) var(--space-3);
    }
    .header-group{
        gap: var(--space-3);
    }
    .header-left{
        gap: var(--space-3);
    }
    .menu-item a{
        gap: var(--space-1);
    }
    .header-logo{
        height: 32px;
    }
}
/* @media (max-width: 991px){
    .hamburger{
        display: flex;
    }
    .header-left .nav-group{
        display: none;
    }
    .header-mobile.active{
        display: flex;
        position: absolute;
        width: 100%;
        height: calc(100vh - 215px);
        top: 74px;
        left: 0;
        flex-direction: column;
        background: var(--surface-white);
        padding: var(--space-6) var(--space-4); 
        overflow-y: auto;
    }
    .header-mobile .nav-menu-group{
        flex-direction: column;
        width: 100%;
        align-items: start;
        background: var(--surface-white);
        gap: var(--space-0);
    }
    .header-mobile .menu-item .sub-menu{
        max-width: 100%;
        width: 100%;
        position: static;
        max-height: fit-content;
        opacity: 1;
        box-shadow: none;
        display: flex;
        min-width: max-content;
        border-radius: 0;
    }
    .header-mobile .sub-menu .menu-item > .sub-menu{
        transform: translateX(0);
        padding: var(--space-0) var(--space-0);
        border-top: 0;
    }
    .header-mobile .sub-menu .menu-item:hover{
        background: var(--surface-white);
    }
    .header-mobile .menu-item{
        max-width: 100%;
        width: 100%;
        flex-direction: column;
        padding: var(--space-0) var(--space-0);
        gap: var(--space-0);
    }
    .header-mobile .menu-item:has(.sub-menu){
        padding: var(--space-0) var(--space-0);
        white-space: unset;
    }
    .header-cta{
        width: 100%;
    }

    .header-mobile .header-support{
        background: var(--surface-white);
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: var(--space-3) var(--space-3); 
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: var(--space-2);
        border-top: var(--width-border-1) solid var(--border-light);
		z-index: 2;
    }
    .header-support .header-lang{
        width: 100%;
    }
    .header-mobile .menu-item a{
        color: var(--text-ghost);
        font-size: 12px;
    }
    .header-mobile .sub-menu .menu-item a{
        color: var(--text-default);
        font-size: 14px;
        padding: var(--space-3) var(--space-0);
        flex-direction: row;
        align-items: center;
    }
    .header-mobile .sub-menu{
        position: static;
        max-height: 500px;
        width: 100%;
        opacity: 1;
        box-shadow: none;
        padding: var(--space-3) var(--space-0);
        gap: var(--space-0);
        border-top: var(--width-border-1) solid var(--border-light);
    }
    .new-feature .sub-menu{
        border-top: 0;
    }
    .header-mobile .parent-duplicate-title{
        padding: var(--space-0) var(--space-0);
    }
    .header-right .header-cta{
        display: none;
    }
    .header-right .header-lang{
        display: none;
    }
} */
@media (max-width: 991px){

    .hamburger{
        display: flex;
    }

    .header-left .nav-group{
        display: none;
    }

    .header-mobile.active{
        display: flex;
        position: absolute;
        width: 100%;
        height: calc(100vh - 165px);
        top: 74px;
        left: 0;
        flex-direction: column;
        background: var(--surface-white);
        padding: var(--space-6) var(--space-4);
        overflow-y: auto;
    }

    .header-mobile .nav-menu-group{
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        gap: 0;
    }

    .header-mobile .sub-menu,
    .header-mobile .sub-menu .sub-menu{
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-height: none !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    .header-mobile .menu-item:hover > .sub-menu,
    .header-mobile .sub-menu .menu-item:hover > .sub-menu{
        position: static !important;
        display: flex !important;
        opacity: 1 !important;
        transform: none !important;
        max-height: none !important;
    }

    .header-mobile .menu-item{
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin: 0;
        white-space: normal;
        gap: 0;
    }

    .header-mobile .menu-item a{
        width: 100%;
        padding: var(--space-3) 0;
        color: var(--text-default);
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header-mobile .menu-item:hover{
        background: transparent !important;
    }

    .header-mobile .menu-item:hover a{
        color: var(--text-default) !important;
    }

    .header-mobile .menu-item:hover .menu-title{
        color: var(--text-default) !important;
    }

    .header-mobile .menu-item:hover .caret-icon{
        color: var(--icon-default) !important;
    }

    .header-mobile .caret-icon svg{
        transform: none !important;
    }

    .header-mobile .parent-duplicate-title{
        padding-left: 0;
        margin-top: 8px;
        font-size: 12px;
        color: var(--text-ghost);
    }

    .header-mobile .header-support{
        background: var(--surface-white);
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: var(--space-3);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        border-top: var(--width-border-1) solid var(--border-light);
        z-index: 2;
    }

    .header-support .header-lang{
        width: 100%;
    }

    .header-right .header-cta{
        display: none;
    }

    .header-right .header-lang{
        display: none;
    }
}

@media (max-width: 640px){
    .header-left{
        flex-shrink: 1;
    }
    .header-right{
        flex-shrink: 1;
    }
    .hamburger{
        width: 28px;
        height: 28px;
        padding: var(--space-2);
    }
    .hamburger.active span:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }
    header{
        padding: var(--space-4) var(--space-0);
    }
    .header-logo{
        height: 24px;
    }
}

/* Menu Dropdown */

/* Header Section */

/* Header Event */

.header-event-section{
    padding: var(--space-3) var(--space-4);
    background: var(--surface-action-hover2);
}
.header-event-group{
    max-width: var(--xl);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}
.header-event{
    align-items: center;
    display: flex;
    gap: var(--space-6);
    margin: 0 auto;
}
.header-event-label-group{
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: var(--width-border-1) solid var(--border-light);
    border-radius: var(--radius-rounded-full);
    background: var(--surface-white);
    color: var(--text-action);
    fill: var(--icon-action);
    max-width: fit-content;
    flex-shrink: 0;
}
.event-label{
    color: inherit;
    text-align: center;
}
.event-label-icon{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    fill: inherit;
    flex-shrink: 0;
}
.event-label-icon svg{
    width: 100%;
    height: 100%;
    color: inherit;
    fill: inherit;
}
.header-event-title{
    color: var(--text-default);
    text-align: center;
}
@media (max-width: 640px){
    .header-event{
        flex-direction: column;
        gap: var(--space-2);
    }
    .header-event-label-group{
        padding: var(--space-1) var(--space-3);
    }
    .header-event-section{
        padding: var(--space-3) var(--space-2);
    }
}

/* Header Event */

/* Hero Section */

.hero-section{
    padding: var(--space-12) var(--space-4);
}
.hero-content-group{
    max-width: var(--xl);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}
/* .hero-content-group.column{
	flex-direction: column;
	justify-content: center;
	align-items: center;
} */
.hero-content-detail-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex: 0 0 calc(50% - var(--space-8));
    width: 100%;
    padding: var(--space-0) var(--space-3);
}
.hero-content-image{
    flex: 0 0 calc(50% - var(--space-8));
    padding: var(--space-0) var(--space-3);
    width: 100%;
}
.hero-content-image img{
    object-fit: cover;
    object-position: top center;
    align-self: stretch;
}
.hero-content-detail-group .hero-content-detail{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.hero-content-detail .hero-content-helper{
    color: var(--text-primary);
}
@media (max-width: 991px){
    .hero-content-group{
        flex-direction: column;
        align-items: start;
    }
    .hero-content-detail-group{
        flex: 0 0 calc(100%);
    }
    .hero-content-image{
        flex: 0 0 calc(100%);
        padding: var(--space-0) var(--space-0);
    }
}

/* Hero Section */

/* Logo Carousel Section */

.logo-carousel-section{
    padding: var(--space-12) var(--space-4);
}
.logo-carousel-group{
    display: flex;
    max-width: var(--xl);
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    margin: 0 auto;
}
.logo-carousel-head-group{
    max-width: var(--md-head);
    margin: 0 auto;
}
.logo-carousel-head-title{
    text-align: center;
}
.logo-carousel-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.logo-carousel-item{
    flex: 0 0 calc(100%/7);
    padding: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-carousel-item img{
    object-fit: contain;
}
@media (max-width: 991px){
    .logo-carousel-item{
        flex: 0 0 calc(100%/4);
    }
}
@media (max-width: 640px){
    .logo-carousel-item{
        flex: 0 0 calc(100%/3);
    }
}

/* Logo Carousel Section */


/* Feature Spotlight Section */

.feature-spotlight-section{
    padding: var(--space-12) var(--space-4);
}
.feature-spotlight-group{
    display: flex;
    max-width: var(--xl);
    flex-direction: column;
    gap: var(--space-8);
    align-items: center;
    margin: 0 auto;
}
.feature-spotlight-head-group{
    max-width: var(--md-head);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}
.feature-spotlight-head-title{
    text-align: center;
}
.feature-spotlight-head-desc p{
    text-align: center;
}
.feature-spotlight-card-group{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    width: 100%;
}
.feature-spotlight-card-list-group{
    width: 100%;
}
.feature-spotlight-card-list{
    display: none;
}
.feature-spotlight-card-list.active{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
}

.feature-spotlight-card-list.overview-card-list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
	width: 100%;
}

.feature-spotlight-card-list.overview-card-list .overview-card-item{
	flex: 0 0 calc((100%/3) - var(--space-8));
}

.feature-spotlight-card-item{
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    border: var(--width-border-1) solid var(--border-light);
    gap: var(--space-6);
    border-radius: var(--radius-rounded-xl);
}
.feature-spotlight-card-list.two-row .feature-spotlight-card-item{
    flex: 0 0 calc((100%/2) - var(--space-8));
}
.feature-spotlight-card-list.default .feature-spotlight-card-item{
    flex: 0 0 calc((100%/3) - var(--space-8));
}
.feature-spotlight-card-item-detail{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.feature-spotlight-card-item-image{
    height: 326px;
    overflow: hidden;
}
.feature-spotlight-card-item-image img{
    object-fit: cover;
    object-position: center;
    align-self: stretch;
}
@media (max-width: 991px){
    .feature-spotlight-card-item{
        padding: var(--space-3);
    }
    .feature-spotlight-card-list.default .feature-spotlight-card-item{
        flex: 0 0 calc((100%/2) - var(--space-8));
    }
	.feature-spotlight-card-list.overview-card-list .overview-card-item{
		flex: 0 0 calc((100%/2) - var(--space-8));
	}
    .feature-spotlight-card-item .cta-button{
        justify-content: start;
    }
}
@media (max-width: 640px){
    .feature-spotlight-card-list.two-row .feature-spotlight-card-item{
        flex: 0 0 calc(100%);
    }
    .feature-spotlight-card-list.default .feature-spotlight-card-item{
        flex: 0 0 calc(100%);
    }
	.feature-spotlight-card-list.overview-card-list .overview-card-item{
		flex: 0 0 calc(100%);
	}
}


/* Feature Spotlight Section */


/* USP Section */

.usp-section{
    padding: var(--space-12) var(--space-4);
}
.usp-group{
    display: flex;
    max-width: var(--xl);
    flex-direction: column;
    gap: var(--space-8);
    align-items: center;
    margin: 0 auto;
}
.usp-head-group{
    max-width: var(--md-head);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}
.usp-head-group .usp-head-title{
    text-align: center;
}
.usp-head-desc p{
    text-align: center;
}
.usp-list-group{
	width: 100%;
}
.usp-list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
	width: 100%;
}
.usp-item{
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
    border-radius: var(--radius-rounded-lg);
    border: var(--width-border-1) solid var(--border-light);
}
.usp-list.two-row .usp-item{
    flex: 0 0 calc((100%/2) - var(--space-8));
}
.usp-list.default .usp-item{
    flex: 0 0 calc((100%/3) - var(--space-8));
}
.usp-item.simple{
    align-items: center;
}
.usp-item.simple .usp-item-detail-group{
    align-items: center;
}
.usp-item.simple .usp-item-detail-group .usp-item-detail-title{
    text-align: center;
}
.usp-item.simple .usp-item-detail-group .usp-item-detail-desc p{
    text-align: center;
}
.usp-item .usp-item-detail-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.usp-item .usp-item-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-2);
    border-radius: var(--radius-rounded-lg);
    border: var(--width-border-1) solid var(--border-tertiary);
    background: var(--surface-tertiary-hover);
    color: var(--icon-tertiary);
    fill: var(--icon-tertiary);
    width: 56px;
    height: 56px;
}
.usp-item-icon svg{
    width: 100%;
    height: 100%;
    fill: inherit;
    color: inherit;
}

@media (max-width: 991px){
    .usp-item .cta-button{
        justify-content: start;
    }
    .usp-list.default .usp-item{
        flex: 0 0 calc((100%/2) - var(--space-8));
    }
}
@media (max-width: 640px){
    .usp-item .cta-button{
        justify-content: center;
    }
    .usp-item .cta-group{
        width: 100%;
    }
    .usp-item{
        align-items: center;
    }
    .usp-item .usp-item-detail-group{
        align-items: center;
    }
    .usp-item-detail-group .usp-item-detail-title{
        text-align: center;
    }
    .usp-item-detail-group .usp-item-detail-desc p{
        text-align: center;
    }
    .usp-list.two-row .usp-item{
        flex: 0 0 calc(100%);
    }
    .usp-list.default .usp-item{
        flex: 0 0 calc(100%);
    }
}

/* USP Section */


/* Feature Overview Section */

.feature-overview-section{
    padding: var(--space-12) var(--space-4);
}
.feature-overview-group{
    max-width: var(--xl);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    padding: var(--space-12) var(--space-0);
}
.feature-overview-group:nth-child(even){
    flex-direction: row-reverse;
}
.feature-overview-detail-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex: 0 0 calc(50% - var(--space-8));
    width: 100%;
    padding: var(--space-0) var(--space-4);
}
.feature-overview-image{
    flex: 0 0 calc(50% - var(--space-8));
    padding: var(--space-0) var(--space-3);
    width: 100%;
}
.feature-overview-detail-head-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.feature-overview-detail-head-desc li{
    margin-left: var(--space-6);
    margin-bottom: var(--space-3);
}

.feature-overview-detail-point-list{
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.feature-overview-detail-point-item{
    display: flex;
    align-items: center;
    gap: var(--space-6);
}
.feature-overview-detail-point-item.point-start{
    align-items: start;
}
.feature-overview-detail-point-item .point-item-icon{
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    border-radius: var(--radius-rounded-lg);
    border: var(--width-border-1) solid var(--border-tertiary);
    background: var(--surface-tertiary-hover);
    color: var(--icon-tertiary);
    fill: var(--icon-tertiary);
    flex-shrink: 0;
}
.point-item-icon svg{
    width: 100%;
    height: 100%;
    color: inherit;
    fill: inherit;
}
.feature-overview-detail-point-item .point-item-detail-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
@media(max-width: 991px){
    .feature-overview-detail-point-item .cta-button{
        justify-content: start;
    }

    .feature-overview-group{
        flex-direction: column-reverse;
    }
    .feature-overview-group:nth-child(even){
        flex-direction: column-reverse;
    }
    .feature-overview-detail-point-item .point-item-icon{
        width: 38px;
        height: 38px;
    }
}
@media (max-width: 640px){
    .feature-overview-detail-point-item{
        flex-direction: column;
        align-items: start;
        gap: var(--space-4);
    }
}

/* Feature Overview Section */

/* Feature Overview Accordion Section */

.accordion-head{
    display: flex;
    align-items: center;
    gap: var(--space-6);
    width: 100%;
    justify-content: space-between;
    cursor: pointer;
    padding: var(--space-3) var(--space-4);
}
.feature-overview-detail-point-item.accordion-item{
    flex-direction: column;
    gap: var(--space-0);
}
.feature-overview-detail-point-item.accordion-item .point-item-head .point-item-detail-title{
    flex: 1;
    width: auto;
}
.accordion-item.active .accordion-head .accordion-title{
    color: var(--text-action);
}
.accordion-item .accordion-caret-icon{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-default);
    fill: var(--icon-default);
    flex-shrink: 0;
}
.accordion-caret-icon svg{
    width: 100%;
    height: 100%;
    fill: inherit;
    color: inherit;
}
.feature-overview-detail-point-item .accordion-content{
    padding: var(--space-0) var(--space-4) var(--space-2) var(--space-4);
}
.accordion-item .accordion-content{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    padding: var(--space-0) var(--space-4) var(--space-4) var(--space-4);
}
.accordion-item.active .accordion-content{
    opacity: 1;
    max-height: 500px;
}
.accordion-item .accordion-caret-icon{
    transition: transform 0.3s ease;
}
.accordion-item.active .accordion-caret-icon{
    transform: rotate(-180deg);
    color: var(--icon-action);
}
.feature-overview-detail-point-list:has(.accordion-item){
    gap: var(--space-0);
}
.accordion-image {
    display: none;
}
.accordion-image.active {
    display: block;
}

/* Feature Overview Accordion Section */

/* FAQ Section */

.faq-accordion-section{
    padding: var(--space-12) var(--space-4);
}
.faq-accordion-group{
    max-width: var(--xl);
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--space-8);
}
.faq-accordion-head-group{
    max-width: var(--md-head);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.faq-accordion-head-group .faq-accordion-head-title{
    text-align: center;
}
.faq-accordion-head-group .faq-accordion-head-desc p{
    text-align: center;
}
.faq-accordion-list{
    max-width: var(--md-head);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.faq-item .accordion-content{
    border-bottom: var(--width-border-1) solid var(--border-light);
}
.faq-content .cta-button{
    justify-content: start;
}

/* FAQ Section */

/* Banner CTA Section */

.banner-cta-section{
    padding: var(--space-12) var(--space-4);
    border-top: var(--width-border-1) solid var(--border-light);
}
.banner-cta-group{
    max-width: var(--xl);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}
.banner-cta-detail-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex: 0 0 calc(50% - var(--space-8));
    width: 100%;
    padding: var(--space-0) var(--space-3);
}
.banner-cta-image{
    flex: 0 0 calc(50% - var(--space-8));
    padding: var(--space-0) var(--space-3);
    width: 100%;
}
.banner-cta-image img{
    object-fit: cover;
    object-position: top center;
    align-self: stretch;
}
.banner-cta-detail-group .banner-cta-detail{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.banner-cta-detail-group .wpcf7 .cta-button{
    max-width: fit-content;
    margin-top: var(--space-8);
}
@media (max-width: 991px){
    .banner-cta-group{
        flex-direction: column;
    }
    .banner-cta-detail-group .wpcf7 .cta-button{
        max-width: 100%;
    }
}

/* Banner CTA Section */

/* Solution Role Section */

.solution-role-section{
    padding: var(--space-12) var(--space-4);
}
.solution-role-group{
    max-width: var(--xl);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    flex-direction: column;
}
.solution-role-group .cta-group{
    padding: var(--space-0) var(--space-3);
}
.solution-role-list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: start;
}
.solution-role-item{
    flex: 0 0 calc((100%/4) - var(--space-6));
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-0) var(--space-6);
    border-right: var(--width-border-1) solid var(--border-light);
}
.solution-role-item:last-child{
    border-right: none;
}
.solution-role-item-head-group{
    display: flex;
    align-items: center;
    gap: var(--space-6);
}
.solution-role-head-detail{
    display: flex;
    flex-direction: column;
}
.solution-role-head-detail .solution-role-head-helper{
    color: var(--text-ghost);
}
.solution-role-item .solution-role-head-icon{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-2);
    border-radius: var(--radius-rounded-lg);
    border: var(--width-border-1) solid var(--border-tertiary);
    background: var(--surface-tertiary-hover);
    color: var(--icon-tertiary);
    fill: var(--icon-tertiary);
    width: 56px;
    height: 56px;
}
.solution-role-head-icon svg{
    width: 100%;
    height: 100%;
    fill: inherit;
    color: inherit;
}
@media (max-width: 991px){
    .solution-role-item{
        flex: 0 0 calc((100%/2) - var(--space-6));
        padding: var(--space-0) var(--space-4);
        border-right: none;
    }
    .solution-role-group .cta-group{
        width: 100%;
    }
    .solution-role-item .solution-role-head-icon{
        width: 40px;
        height: 40px;
    }
}
@media (max-width: 640px){
    .solution-role-item{
        flex: 0 0 calc(100%);
    }
    .solution-role-item-head-group{
        justify-content: space-between;
        flex-direction: column-reverse;
        align-items: start;
        gap: var(--space-3);
    }
}

/* Solution Role Section */

/* Proof Number Section */

.proof-number-section{
    padding: var(--space-12) var(--space-4);
}
.proof-number-group{
    max-width: var(--xl);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}
.proof-number-detail-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex: 0 0 calc(50% - var(--space-8));
    width: 100%;
    padding: var(--space-0) var(--space-3);
    align-items: start;
}
.proof-number-detail-group .proof-number-detail{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.proof-number-detail-group .proof-detail-logo{
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.proof-detail-logo img{
    object-fit: contain;
    object-position: center;
    align-self: stretch;
}
.proof-number-list{
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-0);
    flex: 0 0 calc(50% - var(--space-8));
    padding: var(--space-0) var(--space-3);
}
.proof-number-item{
    flex: 0 0 calc((100%/2) - var(--space-0));
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
    border: var(--width-border-1) solid var(--border-light);
}
.proof-number-item .proof-number{
    color: var(--text-primary);
}
@media (max-width: 991px){
    .proof-number-group{
        flex-direction: column;
    }
    .proof-number-list{
        flex: 0 0 calc(100%);
    }
    .proof-number-detail-group{
        flex: 0 0 calc(100%);
    }
    .proof-number-item .cta-button{
        justify-content: start;
    }
    .proof-number-group .cta-group{
        width: 100%;
    }
}
@media (max-width:640px){
    .proof-number-item{
        flex: 0 0 calc(100%);
    }
}

/* Proof Number Section */

/* Resource Section */

.resource-section{
    padding: var(--space-12) var(--space-4);
}
.resource-group{
    display: flex;
    max-width: var(--xl);
    justify-content: center;
    margin: 0 auto;
    gap: var(--space-8);
}
.resource-sidebar-group{
    max-width: 256px;
    width: 100%;
    padding: var(--space-12) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    position: sticky;
    top: 60px;
    height: max-content;
    bottom: 24px;
}
.sidebar-item{
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    gap: var(--space-3);
    border: var(--width-border-1) solid var(--border-light);
    border-radius: var(--radius-rounded-lg);
    background: var(--surface-white);
}
.sidebar-item-title{
    color: var(--text-ghost);
}
.resource-main-group{
    max-width: var(--lg);
    width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}
@media (max-width: 991px){
    .resource-group{
        flex-direction: column;
    }
    .resource-sidebar-group{
        max-width: 100%;
        padding: var(--space-12) var(--space-0);
        position: static;
    }
    .resource-main-group{
        max-width: 100%;
    }
}

/* Resource Section */

/* Blog */

.blog-detail{
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.blog-detail .blog-category{
    color: var(--text-action);
}
.blog-info{
    display: flex;
    gap: var(--space-3);
    align-items: center;
}
.blog-info .separator{
    width: 6px;
    height: 6px;
    border-radius: var(--radius-rounded-full);
    background: var(--icon-disable);
    flex-shrink: 0;
}
.blog-image{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.blog-image a{
    width: 100%;
    height: 100%;
}
.blog-image a img{
    object-fit: cover;
    object-position: top left;
    align-self: stretch;
}
.blog-info .info{
    color: var(--text-ghost);
}
@media (max-width: 991px){
    .blog-info{
        gap: var(--space-3);
        flex-wrap: wrap;
    }
    .blog-info .separator{
        display: none;
    }
}

/* Blog */

/* Head Blog */

.head-blog-section{
    padding: var(--space-12) var(--space-0);
}
.head-blog-group{
    display: flex;
    max-width: var(--lg);
    margin: 0 auto;
    gap: var(--space-8);
}
.blog-highlight-list-group{
    flex: 0 0 calc(50% - var(--space-8));
    flex-shrink: 0;
    width: 100%;
}
.blog-latest-list-group{
    flex: 0 0 calc(50% - var(--space-8));
    flex-shrink: 0;
    width: 100%;
}
.blog-highlight-item{
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.blog-highlight-item .blog-image{
    height: 326px;
}
@media (max-width: 991px){
    .head-blog-group{
        flex-direction: column;
    }
}

/* Head Blog */

/* Blog Latest */

.blog-latest-item{
    display: flex;
    gap: var(--space-3);
    align-items: start;
}
.blog-latest-item .blog-image{
    max-width: 140px;
    width: 100%;
    height: 148px;
}
.blog-latest-list{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
@media (max-width: 320px){
    .blog-latest-item{
        flex-direction: column;
    }
}

/* Blog Latest */

/* Blog List */

.blog-section{
    padding: var(--space-12) var(--space-0);
}
.blog-list-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}
.blog-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.blog-divider-group{
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}
.blog-divider-group .blog-category{
    color: var(--text-default);
    width: 100%;
    display: flex;
    align-items: end;
    white-space: nowrap;
}
.blog-divider-group .blog-category:after{
    content: '';
    border-bottom: var(--width-border-1) solid var(--border-default);
    width: auto;
    display: block;
    flex-grow: 1;
    margin: var(--space-0) var(--space-3);
}
.blog-divider-group .cta-group{
    flex-shrink: 0;
}
.blog-list{
    display: flex;
    gap: var(--space-8);
    flex-wrap: wrap;
    width: 100%;
}
.blog-item{
    flex: 0 0 calc((100%/3) - var(--space-8));
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.blog-item .blog-info{
    flex-direction: column;
    gap: var(--space-2);
    align-items: start;
}
.blog-item .blog-info .separator{
    display: none;
}
.blog-item .blog-image{
    height: 312px;
}
@media (max-width: 991px){
    .blog-item{
        flex: 0 0 calc((100%/2) - var(--space-8));
    }
}
@media (max-width: 640px){
    .blog-item{
        flex: 0 0 calc(100%);
    }
}
@media (max-width: 320px){
    .blog-divider-group .blog-category:after{
        display: none;
    }
}

/* Blog List */

/* Table of Content */

.toc-list .toc-item{
    list-style: none;
    padding: var(--space-2);
}

/* Table of Content */

/* Single Content */

.single-head{
    margin-bottom: var(--space-6);
    padding: var(--space-12) var(--space-0);
}
.single-content h1, .single-content h2, .single-content h3, .single-content h4, .single-content h5, .single-content h6{
    margin-bottom: var(--space-6);
}
.single-content figure img{
    object-fit: cover;
    object-position: center top;
    border-radius: var(--radius-rounded-lg);
    height: 100%;
}
.single-content figure{
    margin-bottom: var(--space-6);
    height: 435px;
    overflow: hidden;
    border-radius: 15px;
}
.single-content ul li{
    margin-bottom: var(--space-3);
}
.single-content ul{
    padding-left: var(--space-6);
}
.single-content p strong{
    font-weight: 600;
}
.single-content p{
    margin-bottom: var(--space-6);
}

/* Single Content */

/* Category Page */

.category-list{
    padding: var(--space-12) var(--space-0);
}

/* Category Page */

/* Tag Page */

.tag-list{
    padding: var(--space-12) var(--space-0);
}

/* Tag Page */

/* Pagination Group */

.pagination-group{
    max-width: fit-content;
    margin: 0 auto;
}
.pagination-group ul{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.pagination-group ul li{
    list-style: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-rounded-full);
    background: var(--surface-action);
}
.pagination-group ul li .page-numbers{
    color: var(--text-white);
}
.pagination-group ul li .page-numbers{
    color: var(--text-white);
}
.pagination-group ul li:has(.current){
    background: var(--surface-action-hover);
}

/* Pagination Group */

/* Subscribe Group */

.subscribe-group .cta-group .cta-button{
    max-width: 100%;
    margin-top: var(--space-3);
}

/* Subscribe Group */

/* Topic Group */

.topic-list{
    display: flex;
    flex-direction: column;
}
.topic-item{
    list-style: none;
    padding: var(--space-2);
}

/* Topic Group */

/* WP Contact Form 7 */

.wpcf7-acceptance input[type="checkbox"]{
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    --webkit-appearance: none;
    color: var(--icon-white);
    padding: var(--space-1);
}
.wpcf7-form input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 12px;
    border: solid var(--icon-white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.wpcf7-acceptance input[type="checkbox"]:checked{
    background: var(--surface-action);
    border: var(--width-border-1) solid var(--border-action);
}
.wpcf7-acceptance .wpcf7-list-item{
    margin: 0;
}
.wpcf7-acceptance .wpcf7-list-item label{
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.contact-form{
    background: var(--surface-primary);
    border-radius: var(--radius-rounded-lg);
    padding: var(--space-3);
}
.contact-form .wpcf7{
    border-radius: var(--radius-rounded);
    background: var(--surface-white);
    padding: var(--space-3);
}
.wpcf7 .wpcf7-form{
    display: flex;
    flex-direction: column;
}
.wpcf7-form p label .wpcf7-form-control-wrap{
    margin-top: var(--space-2);
    display: block;
}
.wpcf7 .wpcf7-submit:disabled{
    background: var(--surface-disable);
    border: var(--width-border-1) solid var(--border-disable);
}
.wpcf7 .cta-button{
    max-width: 100%;
    padding: 9.5px var(--space-6);
}
.wpcf7 .wpcf7-form p:has(.wpcf7-form-control-wrap) label{
    color: var(--text-default);
}
.wpcf7 .wpcf7-form p:has(.wpcf7-submit){
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
}
.wpcf7 .wpcf7-form p:has(.wpcf7-submit) .wpcf7-spinner{
    position: absolute;
    left: 45%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.wpcf7 form .wpcf7-response-output{
    margin: 0;
    padding: var(--space-2);
}

.wpcf7-checkbox {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.wpcf7-checkbox .wpcf7-list-item {
    margin: 0;
    width: 100%;
}

.wpcf7-checkbox .wpcf7-list-item label {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    transition: all 0.25s ease;
    font-size: 14px;
    line-height: 1.4;
	width: 100%;
}

/* hide default checkbox */
.wpcf7-checkbox .wpcf7-list-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* text */
.wpcf7-checkbox .wpcf7-list-item-label {
    display: block;
    width: 100%;
    color: #1f2937;
    font-weight: 500;
}

/* hover */
.wpcf7-checkbox .wpcf7-list-item label:hover {
    border-color: #fb923c;
    background: #fff7ed;
    transform: translateY(-1px);
}

/* checked state */
.wpcf7-checkbox .wpcf7-list-item input:checked + .wpcf7-list-item-label {
    color: #ffffff;
}

.wpcf7-checkbox .wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
    content: "✓";
    margin-right: 8px;
    font-weight: 700;
}

.wpcf7-checkbox .wpcf7-list-item input:checked ~ .wpcf7-list-item-label,
.wpcf7-checkbox .wpcf7-list-item label:has(input:checked) {
    background: #f97316;
/*     border-radius: 12px; */
/*     padding: 14px 16px; */
}

/* mobile */
@media (max-width: 991px) {
    .wpcf7-checkbox {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .wpcf7-checkbox {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px){
    .wpcf7 .cta-button{
        padding: 4px var(--space-6);
    }
}

/* WP Contact Form 7 */

/* Contact Form Section */

.contact-form-section{
    padding: var(--space-12) var(--space-4);
}
.contact-form-group{
    max-width: var(--xl);
    margin: 0 auto;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-8);
	flex-direction: column;
}
.contact-form-detail-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex: 0 0 calc(50% - var(--space-8));
    width: 100%;
    padding: var(--space-0) var(--space-3);
}
.contact-form-group .contact-form{
    flex: 0 0 calc(50% - var(--space-8));
    width: 100%;
}
.contact-form-detail-head{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.contact-info-detail-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.contact-info-list{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.contact-info-item{
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.contact-info-icon{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-default);
    fill: var(--icon-default);
    flex-shrink: 0;
}
.contact-info-icon svg{
    width: 100%;
    height: 100%;
    fill: inherit;
    color: inherit;
}
.contact-form-aggreement{
    margin-top: var(--space-3);
}
@media (max-width: 991px){
    .contact-form-group{
        flex-direction: column;
    }
    .contact-form-detail-group{
        flex: 0 0 calc(100%);
    }
    .contact-form-group .contact-form{
        flex: 0 0 calc(100%);
    }
}

/* Contact Form Section */

/* Footer Section */

footer{
    padding: var(--space-12) var(--space-3);
    background: var(--surface-action);
    margin-top: 64px;
}
.footer-group{
    max-width: var(--xl);
    margin: 0 auto;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-8);
    color: var(--text-white);
}
.footer-detail-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    flex: 0 0 calc(50% - var(--space-8));
    width: 100%;
    padding: var(--space-0) var(--space-3);
}
.footer-right{
    display: flex;
    gap: var(--space-9);
    flex: 0 0 calc(50% - var(--space-8));
    position: relative;
    flex-direction: column;
}
.footer-nav-group{
    display: flex;
    gap: var(--space-9);
    position: relative;
    flex-wrap: wrap;
}
.footer-detail-logo{
    width: fit-content;
    height: 42px;
    display: flex;
    justify-content: start;
    flex-shrink: 0;
}
.footer-detail-logo svg{
    width: 100%;
    height: 100%;
}
.footer-detail-list{
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}
.footer-detail-item{
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.footer-detail-item-title{
    color: inherit;
}
.footer-detail-item-desc p{
    color: inherit;
}
.footer-socmed-title{
    color: inherit;
}
.footer-socmed-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.footer-info-title{
    color: inherit;
}
.footer-info-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.footer-info-list{
    display: flex;
    gap: var(--space-3);
    flex-direction: column;
}
.footer-info-item a{
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
}
.footer-info-icon{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    fill: inherit;
    flex-shrink: 0;
}
.footer-info-icon svg{
    width: 100%;
    height: 100%;
    fill: inherit;
    color: inherit;
}
.footer-menu{
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.footer-menu li{
    list-style: none;
}
.footer-menu li a{
    color: inherit;
}
.footer-menu-block{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 155px;
    width: 100%;
}
.app-download-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.app-download-item{
    flex: 0 0 calc(25% - var(--space-3));
    width: 100%;
    max-width: fit-content;
}
.app-download-item a{
    width: 100%;
    display: inline-flex;
    max-width: fit-content;
}
.app-download-item img{
    object-fit: contain;
}
.logo-list-group{
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.logo-list-group .logo-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.logo-list-group .logo-list .logo-item{
    flex: 0 0 calc(20% - var(--space-3));
    width: 100%;
    max-width: fit-content;
}
.logo-list-group .logo-list .logo-item img{
    object-fit: contain;
}
@media (max-width: 991px){
    .footer-group{
        flex-direction: column;
        gap: var(--space-12);
    }
    .footer-detail-group{
        flex: 0 0 calc(100%);
        width: 100%;
    }
    .footer-nav-group{
        width: 100%;
    }
}

/* Footer Section */

/* Socmed Group */

.socmed-list{
    display: flex;
    gap: var(--space-3);
    align-items: center;
	flex-wrap: wrap;
}
.socmed-item a{
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
}
.socmed-icon{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    fill: inherit;
    flex-shrink: 0;
}
.socmed-icon svg{
    width: 100%;
    height: 100%;
    fill: inherit;
    color: inherit;
}

/* Socmed Group */

/* Legal Section */

.download-group.sidebar-item{
    align-items: start;
}
.resource-main-group.legal-group{
    padding: var(--space-12) var(--space-0);
}

/* Legal Section */

/* WPML */

.wpml-group {
    position: relative;
    display: flex;
    align-items: center;
}

.wpml-trigger {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.wpml-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--surface-white);
    border-radius: var(--radius-rounded-xl);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    padding: var(--space-3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
    z-index: 10;
}
.wpml-group.active .wpml-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
.wpml-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.wpml-dropdown li a {
    display: flex;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-rounded-lg);
    text-decoration: none;
    color: var(--text-default);
    font-size: 14px;
}
.wpml-dropdown li a:hover {
    background: var(--surface-action-hover2);
    color: var(--text-action);
}
.wpml-ls-current-language a {
    font-weight: 600;
}
.wpml-active-lang {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-default);
    white-space: nowrap;
}
.wpml-caret svg {
    transition: transform .2s ease;
}
.wpml-group.active .wpml-caret svg {
    transform: rotate(180deg);
}
.wpml-group{
    display: flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    cursor: pointer;
}
.wpml-icon{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-default);
    fill: var(--icon-default);
    flex-shrink: 0;
}
.wpml-icon svg{
    width: 100%;
    height: 100%;
    fill: inherit;
    color: inherit;
}
@media (max-width: 991px) {
    .header-mobile .wpml-dropdown {
        position: static;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transform: none;
        transition: max-height .25s ease, opacity .2s ease;
        box-shadow: none;
    }

    .header-mobile .wpml-group.active .wpml-dropdown {
        max-height: 300px;
        opacity: 1;
        pointer-events: auto;
        width: 100%;
    }
}

/* WPML */

/* Overview Section */

.overview-section{
    background-color: var(--surface-primary);
}

/* Overview Section */


/* Update List Desc Component */

.feature-overview-detail-head-desc li,
.feature-spotlight-card-item-desc li,
.usp-item-detail-desc li,
.point-item-detail-desc li,
.hero-content-desc li,
.solution-role-desc li{
    margin-left: var(--space-4);
    margin-bottom: var(--space-3);
}

.feature-overview-detail-head-desc li::marker,
.feature-spotlight-card-item-desc li::marker,
.usp-item-detail-desc li::marker,
.solution-role-desc li::marker,
.hero-content-desc li::marker,
.point-item-detail-desc li::marker{ 
    color: var(--text-primary);
    background-color: var(--surface-primary);
}


/* Update List Desc Component */