:root {

    --primary-color-base: #2A6F2B;
    --primary-color-1: #EEF2E3;
    --primary-color-2: #C8F169;
    --primary-color-3: #78C51C;
    --primary-color-4: #043F2E;

    --success-color-base: #2EC86E;
    --success-color-0: #F0FEF6;
    --success-color-1: #C4FDDC;
    --success-color-2: #B0FCD0;
    --success-color-3: #89FBB8;
    --success-color-4: #61F9A1;
    --success-color-6: #3AF889;
    --success-color-7: #239954;
    --success-color-8: #176939;

    --error-color-base: #E33B3B;
    --error-color-0: #FCEBEB;
    --error-color-1: #F9D8D8;
    --error-color-1_5: #F7C4C4;
    --error-color-2: #F4B1B1;
    --error-color-3: #EE8989;
    --error-color-4: #E96262;
    --error-color-6: #B62F2F;
    --error-color-7: #882323;

    --warning-color-base: #FEA82F;
    --warning-color-0: #FFF6EA;
    --warning-color-1: #FFEED5;
    --warning-color-1_5: #FFE5C1;
    --warning-color-2: #FFDCAC;
    --warning-color-3: #FECB82;
    --warning-color-4: #FEB959;
    --warning-color-6: #CC8726;

    --white-color: #FFFFFF;

    /* --primary-color: #0C2C68; */
    /* Pink */
    /* --secondary-color: #030749; */
    /* Dark Blue */
    /* --alternate-color: #b3afbf; */
    /* Light Gray */
    /* --alternate-primary-color: #FFF7F2; */
    /* Light pink */
    /* --primary-background: #161694; */
    /* Dark Pink */
    /* --secondary-background: #f8f7f8; */
    /* Light Gray */
    /* --alternate-background: #ECFBEC; */
    /* Dark Gray */
    /* --alternate-primary-background: #004A3D; */
    /* Dark Pink */
    /* --white-color: #fff; */
    /* White */
    /* --light-primary-color: #E8E8F4; */
    /* --light-orange: #FF7043; */
    /* --light-gray: #BFBDBD; */
    /* --dark-orange: #FF5915; */
    /* --red: #D40303; */
    --gap: 1rem;
    --duration: 20s;

}

@font-face {
    font-family: "InterTight Regular";
    src: url('/assets/fonts/InterTight-Regular.ttf');
}

@font-face {
    font-family: "InterTight Medium";
    src: url('/assets/fonts/InterTight-Medium.ttf');
}

@font-face {
    font-family: "InterTight Semibold";
    src: url('/assets/fonts/InterTight-SemiBold.ttf');
}

@font-face {
    font-family: "InterTight Bold";
    src: url('/assets/fonts/InterTight-Bold.ttf');
}

/* *{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
} */

body {
    /* font-family: "InterTight Regular" !important; */
    background-color: var(--white-color);
    padding: 0;
    margin: 0;
}

.inter-tight-regular {
    font-family: "InterTight Regular";
}

.inter-tight-medium {
    font-family: "InterTight Medium";
}

.inter-tight-semibold {
    font-family: "InterTight Semibold";
}

.inter-tight-bold {
    font-family: "InterTight Bold";
}

.btn.btn-primary {
    background-color: var(--primary-color-base)!important;
}

.btn.btn-primary:hover, .btn-check:active + .btn.btn-primary, .btn-check:checked + .btn.btn-primary, .btn.btn-primary.active, .btn.btn-primary.show, .btn.btn-primary:active:not(.btn-active), .btn.btn-primary:focus:not(.btn-active), .btn.btn-primary:hover:not(.btn-active), .show > .btn.btn-primary {
    background-color: var(--primary-color-4)!important;
}

.btn.btn-outline-primary {
    background-color: transparent!important;
    border: solid 2px var(--primary-color-base)!important;
    color: var(--primary-color-base)!important;
}

.btn.btn-outline-primary:hover, .btn-check:active + [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom, .btn-check:checked + [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom, .show > [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom, [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom.active, [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom.show, [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom:active:not(.btn-active), [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom:focus:not(.btn-active), [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom:hover:not(.btn-active) {
    background-color: var(--primary-color-base)!important;
    border: 0px!important;
    color: var(--white-color)!important;
}

.btn.btn-light-primary {
    background-color: var(--primary-color-1)!important;
    color: var(--primary-color-base)!important;
}

.btn-check:active + [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom, .btn-check:checked + [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom, .show > [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom, [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom.active, [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom.show, [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom:active:not(.btn-active), [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom:focus:not(.btn-active), [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom:hover:not(.btn-active), .active > .page-link, .page-link.active {
    background-color: var(--primary-color-base)!important;
}

.page-item:hover:not(.active):not(.offset):not(.disabled) .page-link {
    color: var(--primary-color-4)!important;
}

.btn-check:active + .btn.btn-active-color-primary .svg-icon, .btn-check:active + .btn.btn-active-color-primary i, .btn-check:checked + .btn.btn-active-color-primary .svg-icon, .btn-check:checked + .btn.btn-active-color-primary i, .btn.btn-active-color-primary.active .svg-icon, .btn.btn-active-color-primary.active i, .btn.btn-active-color-primary.show .svg-icon, .btn.btn-active-color-primary.show i, .btn.btn-active-color-primary:active:not(.btn-active) .svg-icon, .btn.btn-active-color-primary:active:not(.btn-active) i, .btn.btn-active-color-primary:focus:not(.btn-active) .svg-icon, .btn.btn-active-color-primary:focus:not(.btn-active) i, .btn.btn-active-color-primary:hover:not(.btn-active) .svg-icon, .btn.btn-active-color-primary:hover:not(.btn-active) i, .show > .btn.btn-active-color-primary .svg-icon, .show > .btn.btn-active-color-primary i {
    color: var(--primary-color-3)!important;
}

.menu-state-bg-light-primary .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here), .menu-state-bg-light-primary .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    background-color: var(--primary-color-1)!important;
    color: var(--primary-color-base)!important;
}

.bg-primary {
    background-color: var(--primary-color-base)!important;
    color: var(--white-color)!important;
}

.bg-light-primary {
    background-color: var(--primary-color-1)!important;
    color: var(--primary-color-base)!important;
}

.text-primary {
    color: var(--primary-color-base)!important;
}


.btn.btn-danger {
    background-color: var(--error-color-base)!important;
}

.btn.btn-danger:hover, .btn-check:active + .btn.btn-danger, .btn-check:checked + .btn.btn-danger, .btn.btn-danger.active, .btn.btn-danger.show, .btn.btn-danger:active:not(.btn-active), .btn.btn-danger:focus:not(.btn-active), .btn.btn-danger:hover:not(.btn-active), .show > .btn.btn-danger {
    background-color: var(--error-color-4)!important;
}

.btn.btn-outline-danger {
    background-color: transparent!important;
    border: solid 2px var(--error-color-base)!important;
    color: var(--error-color-base)!important;
}

/* .btn.btn-outline-primary:hover, .btn-check:active + [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom, .btn-check:checked + [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom, .show > [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom, [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom.active, [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom.show, [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom:active:not(.btn-active), [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom:focus:not(.btn-active), [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom:hover:not(.btn-active) {
    background-color: var(--primary-color-base)!important;
    border: 0px!important;
    color: var(--white-color)!important;
} */

.btn.btn-light-danger {
    background-color: var(--error-color-1)!important;
    color: var(--error-color-base)!important;
}

/* .btn-check:active + [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom, .btn-check:checked + [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom, .show > [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom, [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom.active, [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom.show, [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom:active:not(.btn-active), [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom:focus:not(.btn-active), [data-kt-app-layout="dark-sidebar"] .app-sidebar .btn-custom:hover:not(.btn-active), .active > .page-link, .page-link.active {
    background-color: var(--primary-color-base)!important;
} */

.btn-check:active + .btn.btn-active-color-danger .svg-icon, .btn-check:active + .btn.btn-active-color-danger i, .btn-check:checked + .btn.btn-active-color-danger .svg-icon, .btn-check:checked + .btn.btn-active-color-danger i, .btn.btn-active-color-danger.active .svg-icon, .btn.btn-active-color-danger.active i, .btn.btn-active-color-danger.show .svg-icon, .btn.btn-active-color-danger.show i, .btn.btn-active-color-danger:active:not(.btn-active) .svg-icon, .btn.btn-active-color-danger:active:not(.btn-active) i, .btn.btn-active-color-danger:focus:not(.btn-active) .svg-icon, .btn.btn-active-color-danger:focus:not(.btn-active) i, .btn.btn-active-color-danger:hover:not(.btn-active) .svg-icon, .btn.btn-active-color-danger:hover:not(.btn-active) i, .show > .btn.btn-active-color-danger .svg-icon, .show > .btn.btn-active-color-danger i {
    color: var(--error-color-3)!important;
}

.menu-state-bg-light-danger .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here), .menu-state-bg-light-danger .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    background-color: var(--error-color-1)!important;
    color: var(--error-color-base)!important;
}


.dropzone {
    border: 1px dashed var(--primary-color-3)!important;
    background-color: var(--primary-color-1)!important;
}

.hero-section {
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
    border-radius: 20px;
    height: auto;
}

@keyframes marquee {
    0% {
        transform: translateX(0)
    }

    to {
        transform: translateX(calc(-100% - var(--gap)))
    }
}

.animate-marquee {
    animation: marquee var(--duration) linear infinite
}

.animate-marquee-right {
    animation: marquee var(--duration) linear infinite reverse;
}

@keyframes marquee-reverse {
    0% {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(100% + var(--gap)));
    }
}

@keyframes marquee-vertical {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(calc(-100% - var(--gap)))
    }
}

.animate-marquee-vertical {
    animation: marquee-vertical var(--duration) linear infinite
}

@keyframes shimmer {
    0% {
        background-position: 0 0
    }

    to {
        background-position: -200% 0
    }
}

.animate-shimmer {
    animation: shimmer 2s linear infinite
}

@keyframes typing {
    0% {
        width: 0;
    }
    33% {
        width: 100%;
    }
    66% {
        width: 100%;
    }
    100% {
        width: 100%;
    }
}

@keyframes blink {
    50% {
    border-color: transparent;
    }
}

.typing-animation span {
    animation: typing 6s steps(20, end), blink 0.7s step-end infinite;
    width: 0;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    animation-fill-mode: forwards;
}

.typing-animation span:nth-child(1) {
    animation-delay: 0s;
}

.typing-animation span:nth-child(2) {
    animation-delay: 2s; /* Start after the first line finishes */
}

.typing-animation span:nth-child(3) {
    animation-delay: 4s; /* Start after the second line finishes */
}