:root {
    --bs-primary-rgb: 118, 70, 184;
    --bs-primary: #7646b8;
    --bs-secondary: #e85033;

    --purple-70:#4e327c;
    --purple-60: #7446b8;
    --purple-50: #7646b8;
    --purple-40: #9d6fe2;
    --purple-30: #a171ea;

    --blue-light: #f3f6f8;

    --font: 'Nunito', sans-serif;
}

* {
    font-family: var(--font);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--purple-30);
    --bs-btn-hover-border-color: var(--purple-30);
    --bs-btn-active-bg: var(--purple-30);
    --bs-btn-active-border-color: var(--purple-30);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
}

.btn-secondary {
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: #d7614a;
    --bs-btn-hover-border-color: #d7614a;
    --bs-btn-active-bg: #d7614a;
    --bs-btn-active-border-color: #d7614a;
}

.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
}

.btn-outline-dark:hover {
    --bs-btn-hover-color: var(--bs-btn-color);
    --bs-btn-hover-bg: var(--bs-btn-bg);
    box-shadow: rgb(0 0 0 / 70%) 0 0 0 2px inset;
}

.btn-outline-dark:active {
     --bs-btn-active-color: var(--bs-btn-color);
    --bs-btn-active-bg: var(--bs-btn-bg);
}

.bg-primary-dark {
    background-color: var(--purple-70);
}

.bg-blue-light {
    background-color: var(--blue-light);
}

.btn-muted {
    --bs-btn-color: white;
    --bs-btn-bg: #6c757d;
}

.btn-muted:hover {
    --bs-btn-hover-color: white;
    --bs-btn-hover-bg: #5c636a;
}

.btn-muted:active {
    --bs-btn-active-color: white;
    --bs-btn-active-bg: #5c636a;
}

.bg-primary-gradient {
    background: #03001e;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #fdeff9, #ec38bc, #7303c0, #03001e);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(140deg, rgba(21,3,50,1) 5%, rgba(115,3,192,1) 63%, rgba(141,104,195,1) 96%);
}

.g-lg {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem;
}

ul {
    padding: 0;
    list-style: none;
}

.list-style-disc {
    padding-left: 1rem;
    list-style: disc;
}

.subtitle {
    font-size: 1rem;
    font-weight: 900;
    text-transform: uppercase;
}

.subtitle-text {
    font-size: 2rem;
    font-weight: 700;
    width: 75%;
}

.btn-arrow-animation {
    --btn-padding-right: 1.6rem;
    --btn-padding-left: 2rem;
    --icon-margin-left: .5rem;
    --icon-margin-diff-hover: .6rem;

    padding-right: var(--btn-padding-right);
    padding-left: var(--btn-padding-left);
}

.btn-arrow-animation > i {
    transition: margin-left 150ms ease-in;
}

.btn-arrow-animation {
    transition: padding-right 150ms ease-in;
}

.btn-arrow-animation > i {
    margin-left: var(--icon-margin-left);
}

.btn-arrow-animation:hover {
    padding-right: calc(var(--btn-padding-right) - var(--icon-margin-diff-hover));
}

.btn-arrow-animation:hover > i {
    margin-left: calc(var(--icon-margin-left) + var(--icon-margin-diff-hover));
}

.animation-scale-up {
    transition: transform 150ms ease-in-out;
}

.animation-scale-up:hover {
    transform: scale(1.06);
}

@keyframes go-right {
    0%, 100% {
        left: -0.5rem;
    }

    50% {
        left: 0;
    }
}

@keyframes go-left {
    0%, 100% {
        right: -0.5rem;
    }

    50% {
        right: 0;
    }
}

.animation-loop-highlight-arrow {
    position: relative;
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.animation-loop-highlight-arrow::before {
    position: absolute;
    left: -0.5rem;
    content: '>>';
    animation: 1s linear 1s infinite go-right;
}

.animation-loop-highlight-arrow::after {
    position: absolute;
    content: '<<';
    right: -0.5rem;
    animation: 1s linear 1s infinite go-left;
}

.loading-content {
    width: 150px;
    height: 150px;
    color: var(--bs-primary);
}

.text-underline-hover {
    text-decoration: none;
}

.text-underline-hover:hover {
    text-decoration: underline;
}

.overflow-x-auto {
    overflow-x: auto;
}

[data-bs-toggle="collapse"] > i.fa-chevron-down {
    transition: transform 150ms ease;
}

[data-bs-toggle="collapse"]:not(.collapsed) > i.fa-chevron-down {
    transform: rotate(180deg);
}