/* ======================================================= */
/* ---------------------- Fonts --------------------- */
/* ======================================================= */

@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Russo+One&display=swap');


/* ======================================================= */
/* ---------------------- Variable --------------------- */
/* ======================================================= */


:root{
    /* ---------------------- Color --------------------- */
    --primary-color:#751012;
    --Secondary-color:#404042;
    --black-color:#1c1c1c;
    --white-color:#f9f9f9;

    /* ---------------------- Text Color --------------------- */
    --text-color-dark: #404042;
    --text-color-light: #ffffff;
    --text-color-grey: #a1a1a1;
    --text-color-muted: #999999;

    /* ------------------ Condition Color ------------------  */
    --error-color: #e74c3c;
    --success-color: #28a745;
    --info-color: #0064ef;
    --warning-color: #f39c12;

    /* ---------------------- Font ---------------------  */
    --font-primary:"Inter", sans-serif ;  /* Para font */
    --font-secondary:"Oswald", sans-serif;  
    --font-title:"Exo", sans-serif; 
    --font-prize:"Russo One", sans-serif;
    --icon-font:"FontAwesome";


    /* ---------------------- Font Size ---------------------  */
    --fs-h1: 42px;
    --fs-h2: 38px;
    --fs-h3: 34px;
    --fs-h4: 24px;
    --fs-h5: 20px;
    --fs-h6: 16px;
    --fs-big:34px;
    --fs-medium:20px;
    --fs-base: 16px;
    --fs-small:10px;
    --fs-xsmall:8px;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-semibold:600;
    --fw-bold: 700;
    --font-weight-black: 900;
    --z-default: 1;
    --z-dropdown: 10;
    --z-modal: 20;
    --z-tooltip: 30;
    --z-toast: 40;
    --z-max: 9999;


}

/* Label Components */
.form-item__label {
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    margin-bottom: 10px;
}
.form-item__label.form-required::after {
    content: "*";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-inline: 0.3em;
    vertical-align: text-top;
    background-image: none !important;
    background-repeat: no-repeat;
    background-size: 0.5rem 0.5rem;
    color: var(--error-color);
}

@keyframes fade-right {
    from{
        left: -33%;
    }
    to{
        left: 0%;
    }
}
@keyframes fade-left {
    from{
        right: -33%;
    }
    to{
        right: 0%;
    }
}
@keyframes hero-in {
    0% {
        opacity: 0;
        transform: translateY(34px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoom-in {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(0);
    }
}

@keyframes slide-left {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(-100%);;
    }
}
.reveal {
    opacity: 0;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 1.2s;
    transition-property: opacity, transform, clip-path, filter, scale;
}
.reveal.active { opacity: 1; }
.slide-left{
    transform: translateX(-10%);
}
.slide-left.active{
    transform: translateX(0%);
}
.slide-right{
    transform: translateX(10%);
}
.slide-right.active{
    transform: translateX(0%);
}
.scale-up{
    transform: scale(0);
    transform-origin: bottom left;
}
.scale-up{
    transform: scale(1);
    transform-origin: bottom left;
}