/* 
    styles.css
    © 2025 Keyza Richi, licensed under the Yuuki and Yuika Project

    CATATAN:
    Ini adalah file gaya CSS utama untuk modifikasi layout elemen yang sudah tersedia di file CSS Rave, biasanya agar responsif dengan ukuran layar, menambahkan efek, atau perubahan lainnya.
*/


.btn {
    font-family: 'Times New Roman', Times, serif
}

p,
a {
    font-family: "Open Sans", sans-serif;
}

.full-name {
    color: var(--text-color)
}

.people {
    opacity: 1;
    transform: translateY(0px);
}

/* .people * {
    opacity: 0;
    transform: translateY(20px);
    transition: transform .5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity .4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@media (max-width: 768px) {
    .people * {
        opacity: 0;
        transform: translateY(-20px);
    }
} */

.people .people-img {
    transition: opacity .4s cubic-bezier(0.075, 0.82, 0.165, 1), transform .5s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}

.visible, .people *.visible {
    opacity: 1;
    transform: translateY(0px);
}

.video-container, .image-container {
    padding: 70px 90px;
    will-change: padding;
    backface-visibility: hidden;
}

.video-container .video {
    border-radius: 42px;
}

.video, .image {
    position: relative;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.features .flex-box {
    opacity: 0;
    transform: translateY(-30px);
    transition: .6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
/* .section-header.stylish .section-title {
    opacity: 0;
    transform: translateY(-120px);
    transition: transform .6s cubic-bezier(0.075, 0.82, 0.165, 1), opacity .6s cubic-bezier(0.075, 0.82, 0.165, 1);
} */
/* 
.features {
    height: 80vh;
    overscroll-behavior: contain;
    padding: 0 20px;
    overflow-y: scroll;
}

.nested-content {
    height: 200%;
} */


#rating .rating-container {
    width: 100%;
    height: 90vh; overflow-y: scroll;
}
#rating .rating-card {
    width: 100%;
    margin: 0 auto;
}
#rating .rating-container::-webkit-scrollbar {
    width: 6px;
    height: 0px;
}

@font-face {
    font-family: Raleway;
    src: url("./fonts/Raleway-VariableFont_wght.woff2") format('woff2');
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("./fonts/OpenSans-VariableFont.woff2") format('woff2'); /* fix sementara */
    font-display: swap;
}

@font-face {
    font-family: 'Open-Dyslexic';
    src: url("./fonts/OpenDyslexic-Regular.otf") format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'lineicons';
    src: url('./fonts/Lineicons.woff2') format('woff2');
    font-display: swap;
    /* Or optional */
}

@font-face {
    font-family: 'unicons-17';
    src: url('/fonts/line/unicons-17.woff2') format('woff2');
    font-display: swap;
    /* Or optional */
}

@font-face {
    font-family: 'unicons-0';
    src: url('/fonts/line/unicons-0.woff2') format('woff2');
    font-display: swap;
    /* Or optional */
}

@font-face {
    font-family: 'unicons-13';
    src: url('/fonts/line/unicons-13.woff2') format('woff2');
    font-display: swap;
    /* Or optional */
}

@font-face {
    font-family: 'unicons-4';
    src: url('/fonts/line/unicons-4.woff2') format('woff2');
    font-display: swap;
    /* Or optional */
}

@font-face {
    font-family: 'unicons-18';
    src: url('/fonts/line/unicons-18.woff2') format('woff2');
    font-display: swap;
    /* Or optional */
}


.highlight {
    background: var(--primary-color);
    background-blend-mode: difference;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-emphasis-color: transparent;
}

.text-container {
    margin: 20px 0px 10px 0 !important;
    flex-direction: row;
    gap: 0 !important;
    width: 100%;
    flex-wrap: nowrap !important;
}

#search-course-hero {
    position: relative;
    left: 0em;
    font-size: 1em;
    background-color: rgba(var(--bg-color-value), 0.9) !important;
    min-width: 60% !important;
    min-height: 60px !important;
    animation: fadeInDown .6s cubic-bezier(0.39, 0.575, 0.565, 1);
}

#search-course-hero::-webkit-search-cancel-button {
    right: 16%;
    filter: invert();
}

.search-buttons {
    position: absolute;
    right: 21%;
    box-sizing: initial;
    min-width: 0px !important;
}

.search-buttons .searchBtn {
    position: relative;
    right: 0 !important;
    margin: 0;
    font-size: 1.6em;
}

#search-btn {
    background: linear-gradient(110deg, var(--primary-color), var(--primary-color), rgb(200, 200, 200));
    margin-left: -12px;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-emphasis-color: transparent;
}

.label-by-richi-ai {
    color: rgb(200, 200, 200);
}

@media (max-width: 900px) {
    #search-course-hero {
        min-width: 100% !important;
    }

    .search-buttons {
        gap: 10px !important;
        right: 11%;
    }


    dialog {
        animation: fadeIn .5s;
    }

}

.float-message {
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    background-color: rgba(211, 123, 23, 0.719);
    color: inherit;
    font-family: "Open Sans", sans-serif;
    z-index: -1;
    animation: fadeInOut 8s ease-in-out forwards;
}

.hero {
    width: 100%;
    height: 100%;
    margin: 8.5% 0 2em 0;
    overflow: hidden;
}

.hero i {
    font-family: 'Lineicons';
}

.hero video {
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Centers the video */
    /* The key property: ensures the video covers the container while maintaining its aspect ratio */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: rgba(15, 8, 0, 0.87);
}


@media (max-width: 768px) {
    .hero video {
        display: none;
    }

}