@tailwind base;
@tailwind components;
@tailwind utilities;
.bg-custom-primary {
    background-color: var(--color-primary);
}
.text-custom-primary {
    color: var(--text-color-primary);
}
.bg-custom-primary-active {
    background-color: var(--text-color-primary);
}
.text-custom-primary-active {
    color: var(--color-primary);
}
.bg-custom-secondary {
    background-color: var(--color-secondary);
}
.text-custom-secondary {
    color: var(--text-color-secondary);
}
.bg-custom-secondary-active {
    background-color: var(--text-color-secondary);
}
.text-custom-secondary-active {
    color: var(--color-secondary);
}
.menu-one {
    background-color: var(--color-primary);
}
.menu-one-item {
    background-color: var(--color-primary);
    color: var(--text-color-primary);
}
.menu-one-item:hover {
    background-color: var(--color-secondary);
    color: var(--text-color-secondary);
}
.img-wa {
    @apply sm:w-3/5 w-full mx-auto;
}
.border-custom-primary {
    border-color: var(--color-primary);
}
.border-custom-secondary {
    border-color: var(--color-secondary);
}
.btn-primary {
    @apply px-4 py-2 bg-custom-primary text-custom-primary rounded hover:bg-[var(--text-color-primary)] hover:text-[var(--color-primary)] border hover:border-[var(--color-primary)];
}
.btn-secondary {
    @apply px-4 py-2 bg-custom-secondary text-custom-secondary rounded hover:bg-[var(--text-color-secondary)] hover:text-[var(--color-secondary)] border border-[var(--color-secondary)] hover:border-[var(--color-secondary)];
}

.menu-two {
    @apply border-t;
    background-color: var(--text-color-primary);
}
.menu-two-item {
    background-color: var(--text-color-primary);
    color: var(--color-secondary);
}
.menu-two-item:hover {
    background-color: var(--color-primary);
    color: var(--text-color-primary);
}

.menu-three {
    @apply border-t;
    background-color: var(--text-color-primary);
}
.menu-three-item {
    background-color: var(--text-color-primary);
    color: var(--color-secondary);
}
.menu-three-item:hover {
    background-color: var(--color-primary);
    color: var(--text-color-primary);
}

p {
    margin: 0 0 10px !important;
}

.sub-header p {
    margin: 0 0 0px !important;
}

/* Mengubah default gaya ul, ol, dan li */
ul {
    margin-left: 1rem;
    padding-left: 1.5rem;
    list-style-type: disc;
}

ol {
    margin-left: 1rem;
    padding-left: 1.5rem;
    list-style-type: decimal;
}