:root {
    --purple-000: #f1ecf9;
    --purple-100: #e2d9f3;
    --purple-200: #c5b3e6;
    --purple-300: #a98eda;
    --purple-400: #8c68cd;
    --purple-500: #6f42c1;
    --purple-600: #59359a;
    --purple-700: #432874;
    --purple-800: #2c1a4d;
    --purple-900: #160d27;
}

html, body { height: 100%; }
html { scroll-behavior: smooth; }
body { position: relative; font-family: "Nunito", sans-serif; color: var(--bs-dark); }

header {
    /* background-image: url("assets/img/header-bg.png"); */
    background: linear-gradient(-90deg, var(--purple-500), var(--purple-900));
    min-height: 50vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bottom-1 { bottom: 1rem; }
.right-1 { right: 1rem; }
.left-1 { left: 1rem; }

.opacity-0 { opacity: 0; }
.opacity-1 { opacity: 1; }

#navbar.bg-transparent .nav-link, #navbar.bg-transparent .nav-link:hover { color: white }
.bg-transparent .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") }
.nav-link { color: var(--purple-500); font-weight: bold; position: relative; }
.nav-link.active { background-color: inherit!important; color: var(--purple-500)!important; }
.nav-link:focus, .bg-white .nav-link:hover { color: var(--purple-900); }
.nav-link::after { content: ''; background: var(--purple-500); position: absolute; border-radius: 1px; top: 2rem; left: .5rem; right: .5rem; margin: auto; height: 2px; width: 0%; transition: all .5s; }
.nav-link.active::after { width: calc(100% - 1rem); }

.fs-7 { font-size: 85%; }

.card-shadow { box-shadow: 0px 0 30px rgb(70 35 105 / 8%); transition: 0.3s; border: none; }

.form-control:focus { border-color: var(--purple-200); box-shadow: 0 0 0 0.25rem rgb(173 66 255 / 25%); }

.hover-in { transform: scale(1); transition: 0.5s; }
.hover-in:hover { transform: scale(.9); }

.hover-out { transform: scale(.95); transition: 0.5s; }
.hover-out:hover { transform: scale(1); }
.hover-out:hover .text-purple-100 { color: var(--purple-500) }

.pointer { cursor: pointer } 

.img-profile { object-fit: cover; object-position: top; }

.lh-md { line-height: 1.2; }

.carousel-control-next, .carousel-control-prev { background-color: rgba(0,0,0,.5); border-radius: 50%; width: 3rem; height: 3rem; background-size: 2rem; margin: auto; }

#back-to-top { transition: opacity 0.3s linear; }
#navbar { transition: background-color 0.3s linear; }

/* Backgrounds */
.bg-purple-000 { background-color: var(--purple-000) }
.bg-purple-100 { background-color: var(--purple-100) }
.bg-purple-200 { background-color: var(--purple-200) }
.bg-purple-300 { background-color: var(--purple-300) }
.bg-purple-400 { background-color: var(--purple-400) }
.bg-purple-500 { background-color: var(--purple-500) }
.bg-purple-600 { background-color: var(--purple-600) }
.bg-purple-700 { background-color: var(--purple-700) }
.bg-purple-800 { background-color: var(--purple-800) }
.bg-purple-900 { background-color: var(--purple-900) }

/* Texts */
.text-purple-000 { color: var(--purple-000) }
.text-purple-100 { color: var(--purple-100); transition: 0.5s; }
.text-purple-200 { color: var(--purple-200) }
.text-purple-300 { color: var(--purple-300) }
.text-purple-400 { color: var(--purple-400) }
.text-purple-500 { color: var(--purple-500) }
.text-purple-600 { color: var(--purple-600) }
.text-purple-700 { color: var(--purple-700) }
.text-purple-800 { color: var(--purple-800) }
.text-purple-900 { color: var(--purple-900) }

.btn-link.text-purple-500:hover, a.text-purple-500:hover { color: var(--purple-800) }
a.text-purple-700:hover { color: var(--purple-900) }

/* Buttons */
.btn-custom { font-size: .9rem; font-weight: 700; text-transform: uppercase; padding: 1rem 2rem; display: inline-flex; align-items: center; justify-content: center; }
.btn-custom span { line-height: 1; }
.btn-custom i.fa-angle-double-right { transition: 0.5s; }
.btn-custom:hover i.fa-angle-double-right { transform: translateX(5px); }

.btn-purple { color: #fff; background-color: var(--purple-700); border-color: var(--purple-700); }
.btn-purple:hover, .btn-purple:focus { background-color: var(--purple-800); border-color: var(--purple-900); }
.btn-purple:hover { color: #fff; }
.btn-purple:active { background-color: var(--purple-800); border-color: var(--purple-900); }
.btn-purple:focus, .btn-link:focus { outline: 0; box-shadow: 0px 5px 30px rgb(68 0 136 / 40%) }

.btn-orange { color: white; background-image: linear-gradient(101deg, #f36c21, #f37022 15%, #f47c24 40%, #f78f2b 63%, #fbaa36 84%, #febd3e); border: none; }
.btn-orange:hover { color: white; background-image: linear-gradient(101deg, #d1520b, #d2550b 15%, #d5600a 40%, #df7108 63%, #ef8e04 84%, #fba601); border: none; }
.btn-orange:focus { box-shadow: 0 0 0 0.25rem rgb(249 160 50/ 50%); }

@media (max-width: 768px) {
    .vh-100 { height: auto!important; }

    .nav-link::after { content: none; }
    .navbar-toggler:focus { box-shadow: none }

    .navbar-collapse { border-radius: .25rem;}
    .navbar-collapse ul.nav { display: block; text-align: center;}
    .navbar-collapse ul.nav .nav-link {  padding-top: 1rem; padding-bottom: 1rem;}

    .bg-transparent .navbar-collapse { background-color: white; }
    .bg-transparent .nav-link { color: var(--purple-700) }
    .bg-white .navbar-collapse { background-color: var(--purple-600); }
    .bg-white .nav-link, .bg-white .nav-link.active { color: white !important }
}