.bg-yellow-custom {
    background-color: $yellow-custom;
}

.bg-dark-12 {
    background-color: $dark-12;
}

.text-red-custom {
    color: $red-custom;
}

.text-yellow-custom {
    color: $yellow-custom;
}

.hero-12 {
    padding-top: clamp(9rem,11.5vw + 1rem,13.75rem);
    position: relative;
    z-index: 2;
    &::after {
        position: absolute;
        content: "";
        inset: 0;
        background-image: url(../img/shape/hero_12_bg.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        z-index: -1;
        opacity: .4;
    }
}

// Card
.icon_box {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba($yellow-custom, 0.1);
}

.card_12_item {
    &:hover {
        background-color: $dark-11;
        .icon_box {
            background-color: rgba($yellow-custom, 1);
            svg {
                path {
                    fill: $dark
                }
            }
        }
    }
}