@font-face {
    font-family: estetik;
    src: url("../fonts/esthetique.otf");
    /* Perpetua Regular */
}
@font-face {
    font-family: "Perpetua";
    src: url("../fonts/PER_____.TTF");
    /* Perpetua Regular */
}
@font-face {
    font-family: "Perpetua Bold";
    src: url("../fonts/PERB____.TTF");
    /* Perpetua Bold */
}
@font-face {
    font-family: "Perpetua Bold Italic";
    src: url("../fonts/PERBI___.TTF");
    /* Perpetua Bold italic */
}
@font-face {
    font-family: "Perpetua Titling MT Bold";
    src: url("../fonts/PERTIBD.TTF");
    /* Perpetua Titling MT Bold */
}
@font-face {
    font-family: "Perpetua Titling MT Light";
    src: url("../fonts/PERTILI.TTF");
    /* Perpetua Titling MT Light */
}
@font-face {
    font-family: "Perpetua Italic";
    src: url("../fonts/PERI____.TTF");
    /* Perpetua Italic */
}

:root {
    --primary: #432818;
    --secondary: #ffe6a7;
}
.font-poppins {
    font-family: "Poppins", sans-serif;
}
* {
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

body {
    font-family: "Poppins", sans-serif;
    /* font-family: "Perpetua"; */
    /* width: 100%; */
}
.floating {
    animation-name: floating;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
.floating-reverse {
    animation-name: floating-reverse;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes floating {
    0% {
        transform: translate(0, 0px);
    }
    50% {
        transform: translate(0, -20px);
    }
    100% {
        transform: translate(0, -0px);
    }
}
@keyframes floating-reverse {
    0% {
        transform: translate(0, -0px);
    }
    50% {
        transform: translate(0, 20px);
    }
    100% {
        transform: translate(0, 0px);
    }
}
.background-terang {
    background-color: #fff6c3 !important;
}
.background-gelap {
    background-color: #432818 !important;
}
.tulisan-terang {
    color: #ffe6a7 !important;
}
.tulisan-gelap {
    color: #432818 !important;
}
.hover-breadcrumb:hover {
    color: red !important;
    text-decoration: underline;
}
.card-ukm {
    width: 30% !important;
    box-shadow: 0 0 14px 0px black;
    transition: 1s;
}
.card-ukm:hover {
    box-shadow: none;
    transform: translateY(-1px);
}
.detail-btn-ukm {
    transition: 1s;
}
.detail-btn-ukm:hover {
    background-color: #432818 !important;
    border: 2px solid #ffe6a7 !important;
    color: #ffe6a7 !important;
}
.card-others {
    box-shadow: 0 0 14px 0px black;
    transition: 1s;
}
.card-others:hover {
    box-shadow: none;
    transform: translateY(-1px);
    background-color: #ffe6a7 !important;
    color: #432818 !important;
}
.card-others:hover h5 {
    color: #432818 !important;
}
.border-coklat-muda {
    border: 5px solid #fff6c3;
    box-shadow: 0px 0px 12x 2px #fff6c3;
}
.card-others a div h5 {
    text-align: right;
    line-height: 2rem;
}
.nav-hamburger-menu {
    display: none;
}
@media (max-width: 575.98px) {
    .search-faq {
        width: 100% !important;
    }
    .profil .profil-content {
        margin: 0 !important;
        padding-bottom: 2rem;
    }
    .carousel-item img {
        width: 300px !important;
    }
    #carouselExampleSlidesOnly,
    #carouselExampleSlidesOnly2 {
        margin: 0 !important;
        /* margin-left: 0 !important;
        margin-right: 0 !important; */
    }
    .profil-content .galeri-profil-unida {
        flex-direction: column;
        margin-left: 0 !important;
    }
    .card-seragam {
        width: 100% !important;
    }
    /* Card Barang */
    .card-barang {
        width: 100% !important;
    }
    /* Halaman Lainnya */
    .card-others {
        width: 100% !important;
    }
    .card-ukm {
        width: 100% !important;
    }
    .hamburger {
        display: block !important;
    }
    /* .navbar {
        justify-content: left !important;
    } */
    .nav-menu {
        display: none !important;
    }
    .nav-menu-responsive {
        display: block;
        width: 100%;
    }
    #hamburger-menu {
        color: var(--secondary);
        font-size: 2rem;
        position: absolute;
        right: 20px;
        cursor: pointer;
    }
    #hamburger-menu:hover {
        color: white;
    }
    .nav-hamburger {
        position: absolute;
        top: 9vh;
        right: -100%;
        background-color: #ffe6a7f1;
        width: 43vw;
        height: auto;
        text-decoration: none;
        padding-bottom: 3rem;
        transition: 1s;
        z-index: 999;
        display: none;
    }
    .nav-hamburger.active {
        right: 0;
        display: block;
    }
    .nav-hamburger-menu {
        display: block;
        padding-left: 1rem;
        padding-top: 2rem;
        /* position: absolute;
        bottom: 0; */
        display: grid;
        gap: 1.5rem;
    }
    .nav-hamburger-menu a {
        font-family: Poppins, sans-serif;
        font-weight: 500;
        color: var(--primary);
    }
}