@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');

:root {
    --color-400: #0ACF97;
    --color-500: #FFB64B;
    --color-600: #754FFE;
    --color-700: #E91E63;
    --color-800: #0D6EFD;
    --font-size: .875em;
    --font-size-h1: 1.125em;
    --font-size-h2: 1.125em;
    --font-size-icon: 1em;
    --font-size-table: .84em;
    --sidebar-width: 16rem;
    --border-color: #DEE2E6;
    --border-radius: .28rem;
}
[data-bs-theme=light] {
    --color-100: #FFFFFF;
}
[data-bs-theme=dark] {
    --color-100: #090B0B;
}

/*---- =======================
BODY START -------------*/
body {
    scroll-behavior: smooth !important;
    background-color: var(--color-100);
    font-size: var(--font-size) !important;
    font-family: "Varela Round", sans-serif !important;
}
/*---- =======================
BODY END ---------------*/

/*---- =======================
NAVBAR START -----------*/
nav.navbar {
    background-color: rgba(255, 255, 255, .1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    transition: all .5s ease;
}
nav.navbar.scrolled {
    background-color: var(--color-100) !important;
}
.dropdown-menu {
    min-width: 8rem;
    border: none !important;
    background-color: var(--color-100) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, .15) !important;
}
/*---- =======================
NAVBAR END -------------*/

/*---- =======================
FIELD START ------------*/
.field-group {
    padding: .26rem;
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--color-100);
    gap: .6rem;
}
.field-group > .field-group-search {
    width: 100%;
    margin-left: .6rem;
    background: var(--color-100);
    border: none;
    outline: none;
}
@media only screen and (max-width: 768px) {
    .field-group {
        width: 100%;
    }
}
/*---- =======================
FIELD END --------------*/

/*---- =======================
SECTION START ----------*/
section.section,
section.section > .section-overlay {
    width: 100%;
    height: 90vh;
}
section.section {
    display: flex;
    align-items: center;
    background-image: url('../images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
section.section > .section-overlay {
    position: absolute;
    background: linear-gradient(135deg, rgba(61, 64, 91, .6) 0%, rgba(61, 64, 91, .8) 100%);
}
section.section > .container {
    padding-top: 4rem;
    z-index: 1001;
}
section.section > .container > h1,
section.section > .container > h2 {
    font-size: 1.6rem;
    color: #FFFFFF;
}
section.section > .container > p {
    color: #FFFFFF;
}
@media only screen and (max-width: 768px) {
    section.section,
    section.section > .section-overlay {
        height: 76vh;
    }
    section.section > .container {
        text-align: center;
    }
    section.section > .container > h1,
    section.section > .container > h2 {
        font-size: 1.4rem;
    }
}
/*---- =======================
SECTION END ------------*/

/*---- =======================
ARTICLE START ----------*/
article.article {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
/*---- =======================
ARTICLE END ------------*/

/*---- =======================
FOOTER START -----------*/
footer {
    color: #9C9C9C;
    background-color: #121212;
}
footer a {
    color: #FFFFFF;
    text-decoration: none;
}
footer > .container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
footer > .footer-copyright {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #2A2A2A;
}
/*---- =======================
FOOTER END -------------*/