/* font rubik */

.font-rubik {
    font-family: "Rubik", sans-serif;
}


/* font jakarta */

body {
    font-family: "Plus Jakarta Sans", sans-serif;
}


/* background solid */

.bg-primary {
    background-color: #FD4A07;
}

.bg-accent {
    background-color: #7F32CC;
}

.bg-success {
    background-color: #1F9F04;
}

.bg-danger {
    background-color: #980D05;
}

.bg-secondary {
    background-color: #FED6A9;
}

.bg-info {
    background-color: #04926A;
}

.bg-light {
    background-color: #26355B;
}

.bg-dark {
    background-color: #1D2028;
}
.bg-dark-subtle {
    background-color: #23252B;
}

.bg-muted {
    background-color: #e5e7eb;
}

.bg-tertiary {
    background-color: #363A43;
}

.bg-highlight {
    background-color: #DAB4FF;
}

.bg-energy {
    background-color: #8DCEFF;
}

.bg-focus {
    background-color: #ECBCB9;
}


/* Indigo / Blue */


/* background gradient */

.bg-gradient-primary {
    background: #FF5B1D;
    background: linear-gradient(150deg, rgba(255, 91, 29, 1) 0%, rgb(255, 157, 121) 100%);
}

.bg-gradient-secondary {
    background: #0E98FD;
    background: linear-gradient(120deg, rgba(14, 152, 253, 1) 0%, rgb(131, 201, 251) 100%);
}


/* text */

.text-primary {
    color: #FD4A07;
}

.text-accent {
    color: #7F32CC;
}

.text-success {
    color: #1F9F04;
}

.text-danger {
    color: #980D05;
}

.text-secondary {
    color: #FED6A9;
}

.text-info {
    color: #04926A;
}

.text-light {
    color: #0E98FD;
}

.text-dark {
    color: #1D2028;
}

.text-muted {
    color: #e5e7eb;
}

.text-tertiary {
    color: #363A43;
}

.text-highlight {
    color: #DAB4FF;
}


/* button */

.btn-primary {
    background-color: #FD4A07;
    color: white;
}
.btn-primary:hover {
    cursor: pointer;
}

.btn-white {
    background-color: white;
    color: #FD4A07;
}
.btn-white:hover {
    cursor: pointer;
}

.btn-gradient-primary {
    background: #FD4A07;
    background: linear-gradient(120deg, rgb(255, 255, 255) 0%, rgba(253, 74, 7, 1) 50%);
    color: white;
    border: 2px solid #FD4A07;
}

.btn-secondary {
    background: #d3dfed;
    background: linear-gradient(120deg, rgba(211, 223, 237, 1) 0%, rgba(0, 132, 228, 1) 100%);
    color: white;
}

.btn-success {
    background: #a5b8a0;
    background: linear-gradient(120deg, rgba(165, 184, 160, 1) 0%, rgba(35, 153, 11, 1) 100%);
    color: white;
}


/* text stroke */

.text-stroke-primary {
    text-shadow: -2px -2px 0 #FD4A07, 2px -2px 0 #FD4A07, -2px 2px 0 #FD4A07, 2px 2px 0 #FD4A07, 0px -2px 0 #FD4A07, 0px 2px 0 #FD4A07, -2px 0px 0 #FD4A07, 2px 0px 0 #FD4A07;
}

.text-stroke-success {
    text-shadow: -2px -2px 0 #1F9F04, 2px -2px 0 #1F9F04, -2px 2px 0 #1F9F04, 2px 2px 0 #1F9F04, 0px -2px 0 #1F9F04, 0px 2px 0 #1F9F04, -2px 0px 0 #1F9F04, 2px 0px 0 #1F9F04;
}

.text-stroke-white {
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: white;
    color: #fd4a07;
    text-align: center;
    vertical-align: text-top;
}


/* border */

.border-primary {
    border: 3px solid #FD4A07;
}

.border-primary-light {
    border: 1px solid #FD4A07;
}

.border-secondary {
    border: 2px solid #FED6A9;
}


/* pulse icon promosi */

@keyframes pulse-scale {
    0%,
    100% {
        transform: scale(.3);
    }
    50% {
        transform: scale(1);
    }
}

.animate-pulse-scale {
    animation: pulse-scale 1.5s ease-in-out infinite;
}

@keyframes pulse-scale-opacity {
    0%,
    100% {
        transform: scale(.3);
        opacity: 0%;
    }
    50% {
        transform: scale(1);
        opacity: 100%;
    }
}

.animate-pulse-scale-opacity {
    animation: pulse-scale-opacity 1.5s ease-in-out infinite;
}


/* marque */

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: marquee;
    will-change: transform;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-down {
    animation: fadeInDown 0.5s ease-out;
}
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-fade-in-left {
    animation: fadeInLeft 0.5s ease-out;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px); 
    }
}

.bounce-icon {
    display: inline-block;
    animation: bounce 0.8s infinite ease-in-out;
}