* {
    /* font-size: 16px; */
    font-family: "Anek Latin", sans-serif;
    scroll-behavior: smooth;
}

:root {
    --main: #fed980;
    --sub: #8b4513;
    --sub-2: #6b350f;
    --shd-main: 0px 0px 8px -5px #121212;
}

html {
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    display: flex;
    flex-flow: column;
}

main {
    flex-grow: 1;
}

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

.text-main {
    color: var(--main);
}

.text-sub {
    color: var(--sub);
    text-decoration: none;
}

a.text-sub:hover {
    color: var(--bs-white);
}

.btn-main {
    background-color: var(--main);
    color: var(--sub);
    transition: 0.3s ease;
    transition-property: background-color, color;
}

.btn-main:hover {
    background-color: var(--sub);
    color: var(--bs-white);
}

.box-shadow-1 {
    box-shadow: var(--shd-main);
}

nav {
    box-shadow: var(--shd-main);
}

nav .navbar-brand {
    padding: 1.5rem;
    padding-left: calc(35vw - 250px);
    padding-right: 1.5rem;
    background-color: var(--bs-white);
    font-size: 1.1rem;
    font-weight: bold;
}

@media (max-width: 768px) {
    * {
        font-size: 14px;
    }

    nav .navbar-brand {
        padding-left: 1.5rem;
    }
}

#navbar-menu .nav-item .nav-link {
    padding: 1.5rem !important;
    font-size: 1.1rem;
    color: var(--sub) !important;
    font-weight: bold;
}

#navbar-menu .nav-item .nav-link.active {
    background-color: var(--sub);
    color: var(--bs-white) !important;
}

#navbar-menu .nav-item {
    transition: all 300ms ease;
}

#navbar-menu .nav-item:hover {
    background-color: var(--sub);
}

#navbar-menu .nav-item:hover > a {
    color: var(--bs-white) !important;
}

.dropdown-menu {
    display: block;
    padding: 0;
    border: none;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    background-color: var(--main);
    color: var(--sub) !important;

    transition: all 300ms ease;
    opacity: 0;
    height: 0;
    overflow: hidden;
}

.dropdown-item {
    transition: all 150ms ease;
    padding: 0.5rem 1rem;
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: var(--sub-2);
    color: var(--bs-white);
}

.dropdown:hover > .dropdown-menu {
    opacity: 100%;
    height: auto;
}

#banner {
    height: 90vh;
}

.bg-img {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.object-fit-cover {
    object-fit: cover;
}

.object-fit-contain {
    object-fit: contain;
}

.banner-cover {
    background-color: rgba(32, 32, 32, 0.6);
}

.berita-img {
    min-height: 250px;
    max-height: 300px;
}

.berita-img-preview {
    min-height: 200px;
    max-height: 250px;
}

.berita-img-single {
    min-height: 350px;
    max-height: 450px;
}

.berita-title.text-main,
.karya-title.text-main {
    color: var(--bs-white);
    text-decoration: none;
}

.berita-title.text-main:hover,
.karya-title.text-main:hover {
    color: var(--bs-white);
    text-decoration: underline;
}

.berita-title,
.karya-title {
    color: var(--bs-dark);
    text-decoration: none;
}

.berita-title:hover,
.karya-title:hover {
    color: var(--bs-dark);
    text-decoration: underline;
}

.border-8 {
    border-width: 8px !important;
}

#berita-n-karya {
    background-color: #8b4513;
}

#btn-scroll-up {
    height: 45px;
    width: 45px;
}

.folder-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.galeri-item {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    transition: 300ms ease;
    transition-property: transform, box-shadow;
}

.galeri-item:hover {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    transform: scale(101%);
}

.staff-card img {
    width: 13.75rem;
    max-width: 250px;
}