:root {
    --ky-primary-color: #f58220;
    --ky-secondary-color: #006838;
}

.bg-primary {
    background-color: var(--ky-primary-color);
}

.bg-secondary {
    background-color: var(--ky-secondary-color);
}

.text-primary {
    color: var(--ky-primary-color);
}

.text-secondary {
    color: var(--ky-secondary-color);
}

.hover\:bg-primary:hover {
    background-color: var(--ky-primary-color);
}

.hover\:bg-secondary:hover {
    background-color: var(--ky-secondary-color);
}

.hover\:rotate-0:hover {
    transform: rotate(0deg);
}

.active.active\:bg-primary {
    background-color: var(--ky-primary-color);
}

.active.active\:border-primary {
    border-color: var(--ky-primary-color);
}

.active.active\:text-white {
    color: #fff;
}

.iconrotate {
    i {
        transition: transform 0.3s ease-in-out;
        transform: rotate(45deg);
    }

    &:hover {
        i {
            transform: rotate(0deg);
        }
    }
}