/* Process Card ---------------------------------- */ .process-card { &-wrap { padding: 10px 0 0 0; position: relative; &:not(:last-child) { border-right: 1px solid $border-color; &:after { content: url("data:image/svg+xml,%3Csvg width='98' height='16' viewBox='0 0 98 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M97.7071 8.70711C98.0976 8.31658 98.0976 7.68342 97.7071 7.29289L91.3431 0.928932C90.9526 0.538408 90.3195 0.538408 89.9289 0.928932C89.5384 1.31946 89.5384 1.95262 89.9289 2.34315L95.5858 8L89.9289 13.6569C89.5384 14.0474 89.5384 14.6805 89.9289 15.0711C90.3195 15.4616 90.9526 15.4616 91.3431 15.0711L97.7071 8.70711ZM0 9H97V7H0V9Z' fill='%23E83A15'/%3E%3C/svg%3E"); height: 50px; line-height: 50px; width: 130px; background-color: $smoke-color; text-align: center; position: absolute; top: 90px; right: -65px; border-top: 1px solid $border-color; border-bottom: 1px solid $border-color; } } } text-align: center; padding: 0 10px; &_img { border: 2px solid $theme-color; border-radius: 50%; padding: 15px; max-width: 230px; margin: 0 auto 30px auto; position: relative; > img { border-radius: inherit; } } .box-title { font-size: 30px; font-weight: 600; margin-bottom: 14px; } &_icon { @include equal-size(60px); line-height: 56px; border-radius: 50%; position: absolute; top: 0; left: 0; z-index: 3; &:before, &:after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-color: $white-color; z-index: -1; } &:before { inset: -13px; background-color: $theme-color; opacity: 0.2; } } &_text { max-width: 355px; margin: 0 auto -0.5em auto; } } @include lg { .process-card { &-wrap { &:not(:last-child) { border-right: none; &:after { display: none; } } } } } @include xs { .process-card { &-wrap { &:has(.pulse) { &:nth-child(even) { padding-top: 0; } } } } } /* Process Box ---------------------------------- */ .process-box { text-align: center; padding: 0 10px; position: relative; &-wrap { padding-top: 146px; } &-line { position: relative; max-width: 847px; margin: 0 auto; &:before { content: ''; height: 2px; width: 100%; background-color: $theme-color; position: absolute; bottom: 115px; left: 0; } } &-img { position: relative; z-index: 3; background-color: $smoke-color2; border: 2px solid $theme-color; padding: 15px; width: 230px; height: 230px; max-width: 230px; border-radius: 999px; margin: 0 auto -115px auto; .step-name { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 20px; font-weight: 500; color: $white-color; visibility: hidden; opacity: 0; transition: 0.3s ease-in-out; &.active { visibility: visible; opacity: 1; } } &:after { content: ''; position: absolute; inset: 13px; background-image: linear-gradient(180deg, rgba(22, 25, 33, 0) 0%, #161921 100%); border-radius: inherit; } img { position: absolute; top: 13px; left: 13px; border-radius: inherit; visibility: hidden; opacity: 0; transform: scale(0); transition: 0.4s ease-in-out; &.active { visibility: visible; opacity: 1; transform: scale(1); } } } &:before { content: ''; height: 146px; width: 2px; position: absolute; bottom: calc(100% + 13px); left: calc(50% - 1px); background-color: $theme-color; } .box-title { font-size: 30px; font-weight: 600; margin-bottom: 14px; } &_icon { @include equal-size(60px); line-height: 56px; border-radius: 50%; z-index: 3; margin: 13px auto 43px auto; position: relative; img { transition: 0.4s ease-in-out; } &:before, &:after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-color: $white-color; z-index: -1; transition: 0.4s ease-in-out; } &:before { inset: -13px; background-color: $theme-color; opacity: 0.2; } } &_text { max-width: 355px; margin: 0 auto -0.5em auto; } &:hover { .process-box { &_icon { &:after { background-color: $theme-color; } img { filter: brightness(0) invert(1); transform: rotateY(180deg); } } } } } @include xl { .process-box-line { max-width: 762px; } } @include lg { .process-box-line { max-width: 642px; } } @include md { .process-box { &-line { display: none; } &-wrap { padding-top: 0; } &-area { .row { --bs-gutter-y: 45px; justify-content: center; } } &:before { display: none; } } } @include xs { .process-box { .box-title { font-size: 24px; } } }