/****************************
 * Icon & Description
****************************/
.icon-item {
    --id-width:114px;
    --id-height-icon:45px;
}
.twc-icon-description__inner {
    --grid-col:4;
    --grid-gap-x:96px;
    --grid-gap-y:var(--twc-spacing-default);
}

/* icon */
.twc-icon-description__icon {
    width:var(--id-width); aspect-ratio:1;
    border-radius:50%; background:var(--twc-color-gray);
}
.vc_row.twc-bg-gray .twc-icon-description__icon {--twc-color-gray:#fff;}
.twc-icon-description__icon-bg {height:var(--id-height-icon); max-width:48px;}

/* Content */
.twc-icon-description__item-content, .twc-icon-description__item-content a:not([class*="btn_"]) {
    color:var(--twc-color-dark-blue); font-weight:400; font-size:var(--twc-size-18);
    line-height:1.4;
}
.twc-icon-description__item-content a:not([class*="btn_"]) {border-bottom-color:rgba(0, 0, 0, 0);}
.twc-icon-description__item-content a:not([class*="btn_"]):hover,
.twc-icon-description__item-content a:not([class*="btn_"]):focus {border-bottom-color:var(--twc-color-primary);}
.twc-icon-description__item-content a:not([class*="btn_"]):focus-visible {
    outline:2px solid var(--twc-color-dark-blue); border-radius:2px; transition:none;
}

/* Option has link */
a.twc-icon-description__item .twc-icon-description__icon {position:relative;}
a.twc-icon-description__item .twc-icon-description__icon-bg {animation:hoverImageOut .5s ease forwards;}
a.twc-icon-description__item .twc-icon-description__icon:before {
    width:54px; aspect-ratio:1;
    background:var(--twc-color-primary); border-radius:50%;
    font-family:var(--twc-font-icomoon); content:"\e93b";
    line-height:1; color:var(--twc-color-on-primary); font-size:20px;
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:50%; left:50%; transform:translate(-150%, -50%);
    transition:var(--twc-transition);
    animation:hoverIconOut .5s ease forwards;
}
a.twc-icon-description__item:hover .twc-icon-description__icon:before {animation:hoverIconIn .5s ease forwards;}
a.twc-icon-description__item:hover .twc-icon-description__icon-bg {animation:hoverImageIn .5s ease forwards;}
a.twc-icon-description__item:focus-visible {outline:2px solid var(--twc-color-dark-blue); transition:none;}

@keyframes hoverIconIn {
    0% {transform:translate(-250%, -50%) rotate(-90deg);}
    100% {transform:translate(-50%, -50%) rotate(0deg);}
}
@keyframes hoverIconOut {
    0% {transform:translate(-50%, -50%) rotate(0deg);}
    30% {transform:translate(-40%, -50%) rotate(0deg);}
    100% {transform:translate(-250%, -50%) rotate(-90deg);}
}
@keyframes hoverImageIn {
    0% {opacity:1;}
    100% {opacity:0;}
}
@keyframes hoverImageOut {
    0% {opacity:0;}
    30% {opacity:0;}
    100% {opacity:1;}
}

/*********************************
 * Icon & Description Responsive
*********************************/
@media only screen and (max-width:1439px) {
    .twc-icon-description__inner {--grid-gap-x:60px;}
}
@media only screen and (max-width:1180px) {
    .twc-icon-description__inner {
        --grid-gap-x:var(--twc-gap-container);
        --grid-gap-y:var(--twc-spacing-default);
    }
}
@media only screen and (max-width:1024px) {
    .twc-icon-description__inner {--grid-col:3;}
}
@media only screen and (max-width:767px) {
    .twc-icon-description__inner {--grid-col:2;}
    .twc-icon-description__item:last-child:nth-child(odd) {width:100%;}
    .twc-icon-description__item.has-link .twc-icon-description__item-content {--twc-size-h4:16px; max-width:114px; margin-left:auto; margin-right:auto;}

    /* Show title mobile */
    .has-title-mobile .twc-icon-description__item-content-inner {display:none;}
    .has-title-mobile .twc-icon-description__item-title-mobile {display:block; text-align:center;}
}