/*  NOTE: Use this framework correctly and in a structured manner for it to function properly! Otherwise, elements will appear disorganized, display incorrectly, and overlap with other elements! Elements that still under development or improvement will be placed in separate CSS/JS. */
#preloader-wrapper {
    position: fixed;
    inset: 0;
    background-color: var(--background-color);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    z-index: 999;
    opacity: 1;
    gap: 15px;
    visibility: visible;
    transition: opacity .8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.preloader-content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 0px 4% 0 2%;
}

.preloader-content img {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.preloader-content h1 {
    font-size: 3rem;
}

.dot {
    width: 35px;
    height: 35px;
    background-color: rgba(100, 100, 100, 0.2);
    border-radius: 50px;
}

.progbar {
    width: 0px;
    height: 4px;
    background-color: var(--primary-color);
    border-radius: 50px;
    animation: progress-glow 5s infinite cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.dot-outer {
    background-color: transparent;
    width: 55px;
    height: 55px;
    border: 4px solid;
    border-color: var(--primary-color) var(--primary-color) var(--primary-color) transparent;
    box-shadow: 0px 0px 5px var(--bg-icon-color);
    animation: border-rotate 1.5s infinite;
}

@keyframes border-rotate {
    from {
        transform: rotate(0deg);
        box-shadow: 0px 0px 5px var(--bg-icon-color);
    }

    to {
        box-shadow: 0px 200px 30px var(--bg-icon-color);
        transform: rotate(360deg);
    }
}

@keyframes progress-glow {
    0% {
        width: 0%;
        filter: hue-rotate(0deg)
    }

    80% {
        width: 100%;
        filter: hue-rotate(180deg);
    }

    100% {
        width: 0%;
        filter: hue-rotate(360deg);
    }
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes rotateGradient {
    0% {
        --angle: 0deg;
    }

    100% {
        --angle: 360deg;
    }
}

@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 */
}

.lni {
    font-family: "Lineicons";
}

@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 */
}

/* ======Universal====== */
* {
    appearance: none;
}

.legacy {
    display: none;
}

body.anim-disabled *:not(.nav-pane, dialog),
.anim-disabled {
    transition: none !important;
    animation: none !important;
}

body.anim-disabled .people {
    animation: fadeInDown .6s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
    transition: transform .6s, opacity .6s !important;
}

body.anim-disabled>dialog {
    animation: windows8ScaleIn .8s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
    transition: .4s !important;
}

body.high-contrast main {
    filter: contrast(1.5);
}

::-webkit-scrollbar,
.scrollbar-track {
    border-radius: 50px;
    width: 8px;
    display: none;
    background-color: var(--surface-color) !important;
    border-radius: 50px;
}

::-webkit-scrollbar-track,
.scrollbar-track {
    background-color: var(--surface-color) !important;
    border-radius: 50px;
}

::-webkit-scrollbar-thumb,
.scrollbar-thumb {
    background-color: rgb(120, 120, 120);
    border-radius: 50px;
    width: 8px;
    position: relative;
    right: 5px;
}

:root.dark-mode ::-webkit-scrollbar-thumb {
    background-color: rgb(50, 50, 50);
}

::-webkit-scrollbar-track:horizontal {
    background-color: var(--background-color);
}

::-webkit-scrollbar:horizontal {
    background-color: var(--background-color);
    height: 5px;
}

.richiTheme {
    margin: 0;
    padding: 10px 0 20px 0;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.richiTheme-item h5 {
    font-size: 16px;
    font-weight: 400;
    margin: 4px 0 3px 0;
}

select {
    appearance: base-select;
    background-color: var(--surface-color) !important;
    min-width: 200px;
    padding: 12px 16px;
    border: 1px solid rgba(100, 100, 100, 0.2);
    border-radius: 50px;
    outline: none;
    transition: border .2s cubic-bezier(0.075, 0.82, 0.165, 1);
    font-family: "Open Sans", sans-serif;
}

select::after {
    display: none;
}

select::picker-icon {
    content: url('https://img.icons8.com/material-rounded/16/chevron-down.png');
}

select:open::picker-icon {
    content: url('https://img.icons8.com/material-rounded/16/chevron-up.png');
}

select:hover {
    border-color: var(--primary-color);
}

select::picker(select) {
    appearance: base-select;
    opacity: 0;
    transform: translateY(20px);
    transition: .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    border-radius: 20px;
    padding: 8px;
    margin-bottom: 12px;
    border: 1px solid rgba(100, 100, 100, 0.1);
}

select:open::picker(select) {
    transform: translateY(0);
    opacity: 1;
}

select option {
    background-color: var(--surface-color);
    color: #333;
    padding: 5px 20px;
    border-radius: 50px;
    margin-bottom: 10px;
}

select option:hover {
    accent-color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
}

select option:checked {
    accent-color: var(--surface-color) !important;
    background-color: var(--surface-color) !important;
}

option::checkmark {
    content: url('https://img.icons8.com/forma-regular/20/checked.png');
    transform: translateY(2px);
}

.color-picker {
    appearance: none;
    height: 51px;
    border: none;
    background-color: transparent;
}

.color-picker::-webkit-color-swatch-wrapper {
    background-color: transparent;
}

.color-picker::-webkit-color-swatch {
    border-radius: 50px;
    width: 80px;
    height: 40px;
}

:root {
    --primary-color: rgb(31, 31, 31);
    --secondary-color: rgb(68, 68, 68);
    --tertiary-color: rgb(165, 165, 165);
    --bg-color-value: 250, 250, 250;
    --backdrop-color: rgba(var(--bg-color-value), 0.95);
    --background-color: rgb(249, 244, 244);
    --surface-color: rgb(252, 248, 248);
    --on-surface-color: rgb(105, 105, 105);
    --gradient-color: linear-gradient(90deg, rgb(68, 68, 68) 0%, rgb(145, 145, 145) 50%, rgb(235, 235, 235) 100%);
    --bg-icon-color: rgba(212, 212, 212, 0.2);
    --conic-gradient: conic-gradient(from var(--angle), #361d00, #FF5A00, #361d00);
    --text-color: rgb(0, 0, 0);
    color-scheme: light dark;
}

:root.dark-mode,
html[data-theme="dark"] {
   --primary-color: rgb(255, 255, 255);
    --secondary-color: rgb(122, 122, 122);
    --background-color: rgb(10, 10, 10);
    --surface-color: rgb(15, 15, 15);
    --on-surface-color: rgb(196, 196, 196);
    --bg-color-value: 20, 20, 20;
    --text-color: white;
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

:root.dark-mode .adaptive-logo {
    filter: invert(1) brightness(1.4);
}

.default {
    --primary-color: rgb(150, 111, 38);
    --secondary-color: rgb(214, 166, 36);
    --tertiary-color: rgb(211, 195, 165);
    --background-color: rgb(255, 251, 240);
    --bg-color-value: 255, 252, 242;
    --backdrop-color: rgba(var(--bg-color-value), 0.95);
    --surface-color: rgb(255, 248, 228);
    --surface-color-2: rgb(255, 240, 231);
    --on-surface-color: rgb(97, 89, 72);
    --gradient-color: linear-gradient(90deg, rgb(255, 183, 125) 0%, rgb(255, 183, 125) 50%, rgb(250, 239, 233) 100%);
    --conic-gradient: conic-gradient(from var(--angle), #361d00, #FF5A00, #361d00);
    --bg-icon-color: rgba(216, 170, 117, 0.151);
    --text-color: #000000;
}

.dark-mode .default {
    --primary-color: rgb(255, 206, 114);
    --background-color: rgb(18, 14, 0);
    --surface-color: rgb(25, 18, 0);
    --on-surface-color: rgb(168, 158, 137);
    --text-color: #ffffff;
    --bg-color-value: 17, 12, 0;
}

.mono {
    --primary-color: rgb(31, 31, 31);
    --secondary-color: rgb(68, 68, 68);
    --tertiary-color: rgb(165, 165, 165);
    --bg-color-value: 250, 250, 250;
    --backdrop-color: rgba(var(--bg-color-value), 0.95);
    --background-color: rgb(249, 244, 244);
    --surface-color: rgb(252, 248, 248);
    --on-surface-color: rgb(105, 105, 105);
    --gradient-color: linear-gradient(90deg, rgb(68, 68, 68) 0%, rgb(145, 145, 145) 50%, rgb(235, 235, 235) 100%);
    --bg-icon-color: rgba(212, 212, 212, 0.2);
    --conic-gradient: conic-gradient(from var(--angle), #361d00, #FF5A00, #361d00);
    --text-color: rgb(0, 0, 0);
}

.dark-mode .mono .accent,
.dark-mode .mono #float-button,
.dark-mode .mono .promo {
    color: black !important
}

.mono .accent,
.mono #float-button, .mono .labelTag {
    color: white !important
}

.mono .slider::before
{
    background-color: black;
}

:root.dark-mode .mono .slider::before,
:root.dark-mode .mono input[type=checkbox]:checked+.slider::before {
    background-color: white;
}


.mono .people-banner {
    filter: grayscale(1) brightness(1);
}


.mono .people-banner:has(img) {
    filter: none !important;
}

:root.dark-mode .mono {
    --primary-color: rgb(255, 255, 255);
    --secondary-color: rgb(122, 122, 122);
    --background-color: rgb(10, 10, 10);
    --surface-color: rgb(15, 15, 15);
    --on-surface-color: rgb(156, 156, 156);
    --bg-color-value: 20, 20, 20;
    --text-color: white;
}

.sarah-olive {
    --primary-color: rgb(139, 161, 40);
    --secondary-color: rgb(189, 15, 73);
    --tertiary-color: rgb(225, 236, 198);
    --background-color: rgb(253, 255, 246);
    --bg-color-value: 251, 255, 245;
    --backdrop-color: rgba(var(--bg-color-value), 0.95);
    --surface-color: rgb(248, 253, 229);
    --on-surface-color: rgb(100, 100, 100);
    --gradient-color: linear-gradient(90deg, rgba(211, 233, 110, 0.822) 0%, rgb(255, 125, 136) 50%, rgb(245, 250, 233) 100%);
    --conic-gradient: conic-gradient(from var(--angle), rgb(196, 224, 74), rgb(168, 184, 76), rgb(221, 221, 221));
    --bg-icon-color: rgba(195, 216, 117, 0.151);
    --text-color: rgb(0, 0, 0);
}

:root.dark-mode .sarah-olive {
    --background-color: rgb(22, 22, 18);
    --primary-color: rgb(164, 190, 44);
    --surface-color: rgb(23, 24, 22);
    --on-surface-color: rgb(132, 136, 101);
    --bg-color-value: 21, 22, 20;
    --text-color: white;
}

.sarah-olive .people-banner {
    filter: hue-rotate(50deg);
}

.sarah-olive .people-banner:has(img) {
    filter: none !important;
}

.nia-charm {
    --primary-color: rgb(179, 130, 98);
    --secondary-color: rgb(99, 43, 53);
    --tertiary-color: rgb(236, 198, 216);
    --background-color: rgb(253, 244, 223);
    --bg-color-value: 255, 252, 245;
    --backdrop-color: rgba(var(--bg-color-value), 0.95);
    --surface-color: rgb(252, 243, 230);
    --on-surface-color: rgb(105, 95, 86);
    --gradient-color: linear-gradient(90deg, rgba(233, 159, 110, 0.822) 0%, rgb(255, 183, 125) 50%, rgb(250, 243, 233) 100%);
    --conic-gradient: conic-gradient(from var(--angle), rgb(196, 224, 74), rgb(168, 184, 76), rgb(221, 221, 221));
    --bg-icon-color: rgba(216, 153, 117, 0.151);
    --text-color: rgb(19, 14, 1);
}

:root.dark-mode .nia-charm {
    --background-color: rgb(34, 26, 21);
    --primary-color: rgb(202, 147, 111);
    --surface-color: rgb(37, 26, 21);
    --bg-color-value: 27, 23, 21;
    --on-surface-color: rgb(172, 149, 114);
    --text-color: white;
}

.netralize {
    --background-color: rgb(251, 251, 251);
    --bg-icon-color: rgba(200, 200, 200, 0.1);
    --bg-color-value: 251, 251, 251;
    --backdrop-color: rgba(var(--bg-color-value), 0.95);
    --text-color: rgb(0, 0, 0);
    --surface-color: rgb(250, 250, 250) !important;
}

:root.dark-mode.netralize,
:root.dark-mode.netralize :root {
    --background-color: rgb(18, 18, 18);
    --text-color: rgb(252, 252, 252);
    --bg-color-value: 18, 18, 18;
    --surface-color: rgb(25, 25, 25) !important;
}

/* General */
body,
html {
    overscroll-behavior: auto !important;
    margin: 0;
    padding: 0;
    min-height: 100%;
    overflow-y: scroll;
    height: auto;
    scroll-behavior: initial;
    background-color: var(--background-color) !important;
    color: var(--text-color);
    font-family: Raleway, sans-serif;
}

/* Mode gelap */
.raveLogo {
    width: 250px;
    height: 250px;
    aspect-ratio: 1/1;
}

:root.dark-mode .raveLogo {
    filter: invert();
}

:root.dark-mode .price-tag {
    color: white !important;
}

:root.dark-mode .header-container {
    border: 1px solid rgba(128, 128, 128, 0.1);
}

:root.dark-mode .btn,
:root.dark-mode .btn.blinking i {
    background-color: #303030;
}

:root.dark-mode .btn.outline {
    background-color: transparent;
}

:root.dark-mode input[type=search] {
    background-color: var(--dark-surface-color);
    border-color: #2e2e2e63;
}

:root.dark-mode input[type=search]::-webkit-search-cancel-button {
    filter: invert();
}

:root.dark-mode .hamburger {
    background-color: var(--secondary-color);
    color: white !important;
}

:root.dark-mode .overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

span {
    color: var(--on-surface-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Raleway, sans-serif !important;
    margin: 4px 0 4px 0;
}

h1.center {
    font-weight: 400;
    text-align: center;
    margin: 0 2em 2em 2em;
    line-height: 32px;
    font-size: clamp(16px, 5vw, 26px);
}

a {
    color: var(--on-surface-color) !important;
} 

a:has(i) {
    color: var(--text-color) !important
}

i {
    font-family: 'Unicons', 'unicons-17', 'unicons-0', 'unicons-13', 'unicons-4', 'unicons-18', 'lineicons', sans-serif;
}

dialog {
    background-color: var(--background-color);
    width: 800px;
    min-height: 280px;
    max-height: 100%;
    padding: 0em 0;
    border: 1px solid rgba(100, 100, 100, 0.1);
    border-radius: 35px;
    animation: fadeIn .3s cubic-bezier(0.075, 0.82, 0.165, 1)
}

dialog[open] {
    display: block;
}

dialog .dialog-header {
    display: flex;
    width: 100%;
    position: sticky;
    top: 0px;
    right: 0px;   
    z-index: 1;
    justify-content: space-between;
    align-items: center;
    padding: 10px 2em 10px 2em;
}
.dialog-mintopbar {
    opacity: 0;
    transition: opacity .6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.dialog-header.scrolled, .panel-header.scrolled {
    background-color: rgba(var(--bg-color-value), 0.95);
    backdrop-filter: blur(12px);
}
.dialog-header.scrolled .dialog-mintopbar {
    opacity: 1;
}

dialog .dialog-topbar {
    margin: 2% 10px 2em 10px;
}

.dialog-topbar h1 {
    font-family: Raleway, sans-serif;
    font-size: 5rem !important;
    font-weight: 500;
}

.side-panel .close-btn {
    display: flex;
    align-items: center;
}
.close-btn:hover {
    cursor: pointer;
    border: 1px solid rgba(100, 100, 100, 0.2) !important;
}
.close-btn span {
    background-color: #707070;
    width: 2px; height: 30px;
    position: relative;
}
.close-btn .div-1 {
    transform: rotate(45deg) translate(10px, 0px);
    top: -10px;
}
.close-btn .div-2 {
    transform: rotate(-45deg) translate(-10px, -0px);
    top: -10px;
}
.dialog-header .btn {
    padding: 5px 10px 0px 10px;
    min-width: 50px;
    height: 50px;
    position: relative;
    right: -10px;
    max-height: auto;
} 
.dialog-header .btn span {
    font-size: 4rem;
    position: relative;
    top: -8px;
}

.dialog-header h1 {
    font-family: Raleway, sans-serif;
}

dialog .content {
    padding: 0px 2em 20px 2em;
    width: 100%;
    overflow-y: auto;
}

dialog .dialog-divider {
    font-weight: 600;
    padding-bottom: 10px;
    letter-spacing: 0px;
    border-bottom: 2px solid var(--tertiary-color);
    margin: 20px 16px 20px 16px;
}

dialog .tab-panel {
    width: 100%; 
}

dialog h1 {
    font-size: 28px !important;
}

.dialog-btns {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: auto;
    tab-size: 300px;
    position: relative;
    margin-top: 20px !important;
    bottom: 10px;
    left: 0;
    right: 0;
}

dialog .tab-content {
    
    height: auto;
}

.text-center {
    text-align: center;
    margin: 8px;
    font-family: "Open Sans";
}

hr {
    text-align: center;
    max-width: 90%;
    border: 1px solid rgba(100, 100, 100, 0.1) !important;
    margin: 20px auto;
}

p {
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
}

ul li {
    margin: 10px 0;
    font-weight: 500;
}

.accent, .highlight {
    color: var(--primary-color) !important;
}


.full-div,
.content-blurred {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.content-blurred {
    overflow: hidden;
    position: absolute;
    z-index: 2;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px) !important;
    border-radius: inherit;
    padding: 0 40px;
    inset: 0;
    pointer-events: auto !important;
    transition: .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.content-blurred i {
    font-size: 4em;
    margin-bottom: 20px;
}

.content-blurred h1 {
    color: inherit
}

.content-blurred p {
    font-size: 18px;
    font-family: "Open Sans", sans-serif;
}

:root.dark-mode .content-blurred {
    background-color: rgba(20, 20, 20, 0.7);
}

.blurred-content {
    pointer-events: none !important;
}

* .blurred-content {
    overflow: hidden !important;
}

.promo {
    margin: 4px 0px;
    padding: 8px 16px;
    border-radius: 45px;
    width: fit-content;
    display: inline-block;
    text-align: center;
    position: relative;
    color: var(--primary-color);
    font-size: 30px;
    font-weight: 400;
}

.promo.small {
    background-color: var(--primary-color);
    margin: 0px 2px 0px 6px;
    padding: 2px 12px;
    font-size: 15px;
    top: -1px;
    color: white;
}

:root.dark-mode .promo.small {
    color: black;
}

.promo.dev {
    background-color: #8098ff;
}

.promo.new {
    background-color: var(--primary-color);
    color: white;
}

.promo.unstable {
    background-color: #fa1818c7;
    color: white;
}

.error {
    color: red;
}

.warning {
    color: rgb(245, 167, 0) !important
}

/* ======Elemen HTML====== */
/* sponsor */
.powered-by h1 {
    text-align: center;
    margin: 3em 0 3em 0;
}

.marquee {
    width: 100%;
    white-space: nowrap;
    padding: 0;
    margin: 4em 0 2em 0;
    overflow: hidden;
}

.marquee.mono .sponsor-logo img {
    filter: grayscale(1) brightness(1.5) !important;
}

:root.dark-mode .marquee .mono-logo {
    filter: invert(1) grayscale(1) brightness(1.5) !important;
}

.marquee .track {
    display: flex;
    gap: 50px;
    width: max-content;
    will-change: transform;
    animation: marquee 30s linear infinite;
}

.marquee .track.reversed {
    animation: marquee 30s linear infinite reverse;
}

.sponsor-logo img {
    object-fit: contain;
    width: var(--w);
    height: var(--h);
    margin: 0 24px;
    flex-shrink: 0;
}

@keyframes marquee {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Tipografi */
/* Sidebar */
.sidebar {
    position: fixed;
    top: -25px;
    bottom: -25px;
    left: -5px;
    border-radius: 0 32px 32px 0;
    background-color: var(--surface-color);
    padding: 8px 6px 16px 6px;
    width: 80px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: inset rgba(17, 17, 26, 0.103) -1px 2px 5px;
    transition: .6s cubic-bezier(1, 0, 0, 1);
    z-index: 100;
    transform: scale(0.93);
}

.sidebar .sideSearch {
    display: none;
}

.sidebar.expanded .sideSearch {
    display: flex;
    width: 90%;
}

.sidebar.expanded #sideSearchBtn {
    display: none;
}

.sidebar.expanded {
    width: 280px;
    left: -10px;
}

.sidebar.expanded .sidebar-btn {
    width: 250px;
    justify-content: flex-start;
}

.sidebar.expanded .sidebar-btn.active,
.sidebar.expanded .sidebar-item.active {
    width: 250px;
}

.sidebar.expanded .sidebar-btn.active i,
.sidebar.expanded .sidebar-item.active i {
    transform: translateX(0);
}

.sidebar.expanded .sidebar-item.active {
    background-color: var(--primary-color);
}

.sidebar.expanded span {
    display: inline;
    white-space: nowrap;
}

:root.dark-mode .sidebar {
    background-color: var(--surface-color);
    box-shadow: inset rgba(121, 121, 121, 0.1) -2px 2px 3px, inset rgba(160, 160, 160, 0.1) 1px 2px 0px;
}

#expander {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -25px;
    border-radius: 50px;
    width: 45px;
    height: 45px;
    background-color: rgb(250, 250, 250);
    box-shadow: inset rgba(121, 121, 121, 0.1) -2px 2px 3px, inset rgba(160, 160, 160, 0.1) 1px 2px 0px;
    transition: .2s cubic-bezier(1, 0, 0, 1);
}

:root.dark-mode #expander {
    background-color: #181818;
    box-shadow: inset rgba(121, 121, 121, 0.1) -2px 10px 5px, inset rgba(110, 110, 110, 0.1) 50px 20px 0px;
}

#expand {
    border-radius: 50px;
}

#expander i {
    transition: .2s cubic-bezier(1, 0, 0, 1);
    color: var(--on-surface-color) !important;
}

#expander .sidebar-btn {
    width: 45px;
    height: 45px;
}

.sidebar.expanded #expander span {
    display: none;
}

.sidebar.expanded #expander i {
    padding: 0;
    position: relative;
    left: -10px;
    transform: rotate(-180deg);
}

.sidebar.expanded #expander {
    width: 45px;
    height: 45px;
}

.sidebar-logo {
    position: relative;
    object-fit: cover;
    width: 70px;
    height: 70px;
    transition: transform .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.sidebar-logo.large {
    transform: translate(0px, 5px);
    left: -10px;
    width: 140px;
}

.sidebar-header {
    width: 100%;
    padding: 8px 50px 0px 6em;
    align-items: center;
}

.sidebar.expanded .sidebar-header {
    padding: 20px 20px 20px 6em;
}

.sidebar-header #sidebar-clock {
    display: none;
    opacity: 0;
    width: 80px;
    text-align: center;
    visibility: hidden;
    position: relative;
    right: 20px;
    font-size: 28px;
    letter-spacing: .8px;
    background-color: var(--surface-color);
    box-shadow: inset rgba(100, 100, 100, 0.466) 1px 1px 5px;
    padding: 4px 12px;
    border-radius: 50px;
    font-weight: 600;
    font-family: Raleway, sans-serif;
}

.time-condition {
    font-family: Raleway, sans-serif;
    margin: 5px 0;
    font-size: 16px;
    font-weight: 400;
    display: none;
}

.sidebar.sidebar.expanded #sidebar-clock,
.sidebar.expanded .time-condition {
    display: block;
    opacity: 1;
    visibility: visible;
}

.sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0 8px;
    overflow: hidden;
    margin-top: 20px;
}

.sidebar hr {
    margin: 0;
    width: 100%;
    border: 1px solid rgba(126, 126, 126, 0.1);
    border-radius: 50px;
}

.sidebar-item {
    border-radius: 45px;
    transition: .4s cubic-bezier(1, 0, 0, 1);
    border: 2px solid transparent;
}

.sidebar-btn {
    width: 52px;
    height: 52px;
    font-size: 1.8rem;
    border: 2px solid transparent;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 45px;
    transition: .4s cubic-bezier(1, 0, 0, 1);
}

.sidebar-btn span {
    font-size: 15px;
    display: none;
    font-family: "Open Sans", sans-serif;
    animation: fadeInLeft .6s cubic-bezier(1, 0, 0, 1);
}

.sidebar-btn i {
    padding: 8px;
    color: var(--on-surface-color) !important;
}

.sidebar-item:hover {
    border-color: var(--secondary-color) !important;
}

.sidebar-item:focus,
.sidebar-item.active,
.sidebar-btn.active,
.sidebar-btn:focus {
    background-color: var(--primary-color);
    border-color: var(--secondary-color) !important;
}

.sidebar-item:active {
    background-color: var(--primary-color);
}

.sidebar-item.active span,
.sidebar-btn:focus span,
.sidebar-item.active i,
.sidebar-btn:focus i {
    color: var(--on-surface-color);
}

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding: 8px 0 0 0;
    border-top: 2px dashed rgba(100, 100, 100, 0.2);
}

/* Header */
header, .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10 !important;
    mix-blend-mode: difference;
}

header.no-blend {
    mix-blend-mode: normal;
}

header.no-blend .equal div {
    filter: invert(1);
}
:root.dark-mode header.no-blend .equal div {
    filter: invert(0);
}

.header-container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 1em 22px 1em;
    will-change: transform;
    transition: transform 1s cubic-bezier(0.075, 0.81, 0.265, 1), opacity .5s cubic-bezier(0.075, 0.82, 0.165, 1), padding .3s cubic-bezier(0.075, 0.81, 0.265, 1) !important;
}



:root.dark-mode .header-container {
    border-color: transparent;
}

.header-container.scrolled {
    padding: 12px 1.0em 12px 1.0em;
}

.header-container.scrolled .navigation {
    opacity: 0;
}

.header-container.hide {
    transform: translateY(-100px);
}

.header-container.scrolled .navBtn a,
.header-container.scrolled .navBtn.hasChevron {
    text-shadow: none;
}


/* Hyperlinks dan highlight */
.category-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 20px 0 40px 0;
}
.category {
    background-color: var(--surface-color) !important;
    display: flex;
    border: 1px solid rgba(100, 100, 100, 0.3);
    gap: 10px;
    font-family: inherit;
    font-size: 16px;
    padding: 12px 20px;
    border-radius: 50px;
    align-items: center;
    transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.category i {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50px;
    font-size: 24px;
    padding: 8px;
}
.category:hover {
    background-color: var(--surface-color);
    border-color: var(--primary-color);
}
a,
.link {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--primary-color);
}

a:hover,
.link:hover {
    color: var(--primary-color) !important;
}

a:active {
    color: rgb(100, 100, 100);
}

.code-editor-container {
    width: 100%;
    min-height: 320px;
    padding: 10px;
    background-color: var(--surface-color);
    border: 1px solid rgba(209, 209, 209, 0.2);
    border-radius: 12px;
}

.code-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tab .btn {
    border-radius: 5px 5px 0 0;
    ;
}

.tab .btn.active {
    background-color: var(--primary-color) !important;
    border-bottom: 1px solid var(--secondary-color) !important;
}

.code-editor-header h2 {
    margin: 2px 0 6px 20px;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--dark-highContrast) !important;
}

.code-editor-container textarea {
    width: 100% !important;
    min-height: 400px;
    font-family: monospace;
    font-size: 14.80px;
    border-radius: 20px;
    overflow-y: scroll;
    resize: none;
}

.project-type {
    display: flex;
    justify-content: space-between;
    margin-right: 8px;
}

.project-lang {
    text-transform: lowercase !important;
}

.text-editor {
    display: flex;
}

.line-numbering {
    padding: 14px 5px;
    margin-right: 5px;
    font-size: 14px;
    overflow-y: visible;
    text-align: center;
    border-radius: 50px;
    background-color: rgba(216, 216, 216, 0.05);
}

.line-numbering span {
    font-family: monospace, sans-serif;
    font-weight: 500;
    margin-bottom: 1px;
    display: block;
}

.code-editor-footer {
    padding: 10px;
    display: flex;
    justify-content: right;
}

code {
    font-family: monospace, sans-serif;
    padding: 2px;
    border: 1px solid gray;
    line-height: 1.5em;
}

/* Tombol dan input form */
.btn {
    border: 2px solid rgba(100, 100, 100, 0.1);
    color: var(--text-color);
    padding: 8px 16px 8px 16px;
    display: inline-flex;
    vertical-align: middle;
    justify-content: center;
    min-width: 100px;
    max-height: 100px;
    min-height: 40px;
    align-items: center;
    gap: 12px;
    border-radius: 50px;
    transition: background-color .6s cubic-bezier(0.075, 0.82, 0.165, 1), border-radius .6s cubic-bezier(0.075, 0.82, 0.165, 1), width .5s cubic-bezier(0.075, 0.82, 0.165, 1), transform .5s cubic-bezier(0.075, 0.82, 0.165, 1), box-shadow .5s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
    overflow: hidden;
    box-shadow: none;
    backface-visibility: hidden;
    will-change: transform;
    margin: 0 10px;
    white-space: nowrap;
    font-family: "Raleway", sans-serif !important;
}

.btn i {
    position: relative;
    width: 25px;
    font-size: 30px;
}

.btn span {
    font-family: "Raleway", sans-serif !important;
    transition: opacity .6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.btn:active {
    border-color: 2px solid rgba(100, 100, 100, 0.2) ;
    box-shadow: 0px 0px 20px rgba(200, 200, 200, 0.452);
}

.btn.outline {
    background-color: transparent;
    border-color: var(--primary-color);
}

.btn.outline:hover {
    border-color: transparent;
    box-shadow: inset 0px -100px 50px 0px rgb(10, 10, 10);
    color: white;
}

.btn.empty {
    background-color: transparent !important;
    border-color: transparent !important;
}

.btn.empty:hover {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--primary-color) !important;
}

.btn.blinking {
    background-color: transparent;
    border: 2px solid rgba(235, 107, 21, 0.247) !important;
    padding: 6px 16px 6px 14px !important;
    gap: 12px;
    flex-direction: row-reverse;
    position: relative;
    isolation: isolate;
    border: none !important;
}

.btn.blinking::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: inherit;
    z-index: -1;
    background: conic-gradient(from var(--angle), var(--primary-color), var(--secondary-color), rgba(90, 90, 90, 0.1));
    animation: rotateGradient 7s linear infinite;
}

.btn.blinking::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    opacity: 1;
    z-index: -1;
    background-color: var(--surface-color);
}

.btn.blinking:hover {
    background-color: var(--secondary-color) !important;
}

.btn.blinking:active {
    background-color: var(--tertiary-color) !important;
    color: white;
}

.btn.blinking i {
    background-color: var(--bg-icon-color);
    border-radius: 50px;
    padding: 10px;
    transition: all .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    color: black;
}

.btn.blinking:hover i {
    transform: translateX(calc(210px / 3));
    width: 15%;
}

:root.dark-mode .btn.blinking:hover i {
    color: white !important;
}

.btn.blinking:hover span {
    opacity: 0;
}

.btn.small {
    padding: 6px 8px;
    font-size: 14px;
}

.btn.medium {
    padding: 10px 14px;
    font-size: 16px;
}

.btn.medium.blinking:hover span {
    opacity: 1;
}

.btn.large {
    padding: 12px 20px;
    font-size: 17px;
    font-family: "Open Sans", sans-serif;
}

.btn.xl {
    padding: 16px 60px;
    font-size: 22px;
}

.btn.accent {
    background-color: var(--primary-color) !important;
    font-size: 15px;
    color: white !important;
}

@layer components {
    .btn.accent, .btn.accent span {
        color: white;
    }
}

.btn.no-bg,
.btn.no-bg:hover,
.btn.no-bg:active {
    background-color: transparent !important;
}

:root.dark-mode .btn.accent {
    color: black !important;
}

.btn.accent:hover {
    border-color: transparent;
}

.btn.accent:active {
    background-color: var(--primary-color) !important;
    color: white;
}

.btn.transparent {
    background-color: transparent;
    border-color: transparent;
}

.btn.media {
    padding: 6px 8px !important;
    width: fit-content;
    min-width: auto;
}

.btn.media span {
    margin: 0 6px;
}

.btn.media i {
    background-color: rgba(100, 100, 100, 0.2);
    border-radius: 50px;
    padding: 12px 10px;
    transition: all .7s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* Konten */
body.dyslexia :is(p, h1, h2, h3, h4, h5, h6, span, a) {
    font-family: 'Open-Dyslexic', sans-serif !important;
    font-size: 14px !important;
}

.tab-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 14px 0;
}

.tab-buttons {
    position: sticky;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.2em;
    padding: 7px 6px;
    transition: padding .5s;
    overflow: hidden;
}

.tab-buttons :first-child {
    border-left: none;
}

.tab-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 10px 24px 10px 24px;
    cursor: pointer;
    height: 100%;
    margin: 0px;
    color: rgb(128, 128, 128);
    font-family: "Open Sans", sans-serif;
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}

.tab-button:hover {
    color: inherit;
}

.tab-button i {
    border-radius: 30px;
    font-size: 30px;
    padding: 6px 12px;
    margin-bottom: 5px;
}

.tab-button.active i {
    background-color: var(--bg-icon-color);
}

.tab-button:has(i) span {
    display: none;
}

.tab-button:has(i):hover {
    color: inherit;
}

.tab-button.active:has(i) span {
    display: block;
    animation: fadeInUp 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    padding: 6px;
    color: var(--primary-color) !important;
}

.tab-button.active:has(i) i {
    font-size: 20px;
    padding: 6px;
    animation: fadeInUp .7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.tab-panel {
    margin-top: 20px;
    width: 100%;
    padding: 10px 0px;
}

.tab-content {
    display: none;
}

.tab-button.active {
    color: var(--primary-color) !important;
    font-weight: 600;
    padding: 10px 26px 10px 26px;
}

.tab-button.active:only-child {
    position: relative;
    top: -2px;
}

.tab-button::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: auto;
    right: auto;
    width: 30px;
    height: 3px;
    border-radius: 50px;
    z-index: 1;
    background-color: var(--primary-color);
    opacity: 0;
    transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.tab-button.active::after {
    width: 60px;
    opacity: 1;
}

.tab-button.active:hover {
    color: var(--primary-color) !important;
}

.tab-buttons.alternate {
    position: sticky;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    border-radius: 0;
    background-color: transparent;
}

.tab-buttons.alternate .tab-button {
    font-size: 16px;
    background-color: transparent;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    color: rgb(100, 100, 100);
    font-family: "Open Sans", sans-serif;
    transition: color .4s cubic-bezier(0.075, 0.82, 0.165, 1), padding .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.tab-button:hover {
    color: inherit !important;
}

.tab-buttons.alternate .tab-button.active {
    color: var(--primary-color) !important;
    font-weight: 700;
    padding: 8px 20px;
    border-bottom: 2px solid var(--primary-color);
}

.tab-content.active {
    animation: fadeInDown .36s cubic-bezier(0.39, 0.575, 0.565, 1);
    display: block;
}

main,
#scroll {
    overflow-x: hidden;
    transition: .7s cubic-bezier(0.075, 0.82, 0.165, 1);
}

div {
    box-sizing: border-box;
}

.intro {
    position: relative;
    width: 100%;
    padding: 3% 0 0px 0 !important;
    transition: none;
}

.section {
    position: relative;
    transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1), opacity .7s cubic-bezier(0.075, 0.82, 0.165, 1), filter .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    padding: 2em 0;
}

@media (prefers-reduced-motion: reduce) {
    .section {
        filter: none !important;
        transition: none !important;
    }
}

.section.desc {
    padding: 5em 0;
}

.section.compact {
    padding: 3em 0;
}

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

.section-header {
    margin: 10px 2.5% 10px 2.5%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section-header.inline {
    margin: 10px 3.5% 10px 2.5% ;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.section-header.small .section-title {
    font-size: 2rem;
    margin: 10px 20px 10px 20px;
    padding-bottom: 20px;
}

.section-header.medium {
    margin: 1.2em 0.3em 0.7em 0.3em;
}

.section-header.stylish {
    width: 100%;
    margin: 10px 6px 10px 6px;
}
.section-header.stylish .section-title {
    width: 68%;
    font-weight: 500;
    margin: 0 20px 10px 20px;
    font-size: 4.5rem;
    letter-spacing: .7px;
}

.section-header.stylish :first-child {
    padding-bottom: 12px;
}
.section-header.stylish :last-child {
    border-bottom: none;
}

.section-header.stylish .section-title.right-align {
    text-align: right;
}

.section-header.large {
    margin: 20% 0.5em 2em 0.2em;
}
.section-header.large .section-title {
    font-size: clamp(3rem, -3rem + 16vw, 10rem) !important;
    font-weight: 600;
}
.section-header.large .section-desc {
    font-size: 1.3rem;
    max-width: 70%;
}
.section-title {
    color: var(--text-color) !important;
    font-size: 3.5rem;
    font-weight: 500;
    margin: 0 30px 10px 30px;
    font-family: Raleway, sans-serif;
}

.section-title.small {
    font-size: 2rem;
    margin: 10px 16px 10px 16px;
    padding-bottom: 20px;
    font-weight: 400;
}

.section-desc {
    font-family: "Open Sans", sans-serif;
    font-size: 1.1rem;
    line-height: 29px;
    margin: 6px 40px 30px 40px;
}

.section-content {
    padding: 0 1%;
}

.section-content.compact {
    padding: 0 10%;
}

.hero-section {
    text-align: center;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 0 10px 0;
}

.hero-caption {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    transition: none !important;
}

.hero-section .role {
    font-size: 4rem;
    font-weight: 600;
    line-height: 1.1em;
    max-width: 85%;
    font-family: Raleway, sans-serif;
}

.hero-section p {
    font-size: 16px;
    line-height: 26px;
    width: 50%;
    font-family: "Open Sans", sans-serif;
}

.statistics {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10vw;
    margin: 2em 4em 1em 4em;
}

.statistics span {
    font-size: 16px;
    margin-top: 12px;
    font-family: "Open Sans", sans-serif;
    color: rgb(70, 70, 70);
}

:root.dark-mode .statistics span {
    color: #bbbbbb;
}

.statistics h2 {
    color: var(--primary-color);
    padding: 2px 0px;
    font-weight: 300;
    width: 90%;
    font-size: 5rem;
    border-bottom: 1px solid rgba(100, 100, 100, 0.2);
    padding-bottom: 20px;
}

.review {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    max-width: 450px;
}

.review * {
    margin: 2px;
}

.review i {
    margin: 0 0 0 5px;
    display: inline;
    vertical-align: -4px;
}

.prev-search-text {
    color: var(--primary-color);
}

.hero-section strong {
    color: var(--primary-color);
    font-weight: 600;
}

.social-media {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 30px;
    margin: 10px 0 10px 0;
    padding: 0;
    position: relative;
}

.timeline-item-content .social-media {
    justify-content: flex-start;
}

.social-media a {
    -webkit-user-drag: none;
}

.social-media i {
    background-color: var(--bg-icon-color);
    border-radius: 50px;
    padding: 6px;
    z-index: 1;
}

.social-media span {
    font-family: "Open Sans", sans-serif;
    z-index: 0;
    color: #909090;
    padding: 8px;
    -webkit-user-drag: none;
    transition: .6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.social-media span:hover {
    color: var(--primary-color);
}


.pageOne,
.pageTwo {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.social-media h5 {
    margin: 0 0 10px 0;
}

.social-media div {
    display: flex;
    gap: 1.7em;
}

@media (min-width: 1500px) {
    .section-header {
        margin: 5em 3% 3em 3%;
    }
    .section-title {
        font-size: 4.5rem;
    }
    .hero-section .role {
        font-size: 4rem;
    }
    .hero-section p {
        font-size: 21px;
        line-height: 38px;
    }
}

@media (max-width: 1024px) {
    .intro {
        height: auto !important;
        padding: 4em 0 0 0 !important;
    }

    .hero {
        margin: 6em 0 5em 0 !important;
    }
    .hero-section {
        padding: 0 25px;
    }

    .hero-section .role {
        width: 100%;
        font-size: 3rem;
    }

    .hero-section p {
        font-size: 14px;
        width: 100%;
    }

    .hideAndSeek {
        width: 90% !important;
        max-width: 91%;
        max-height: 50px;
    }

    .hideAndSeek.selected {
        max-height: 600px;
    }

    .flex-grids {
        margin: 0 2em;
    }

    .section-header {
        margin: 0 0.3em;
    }

    .section-title {
        font-size: 3rem;
    }

    .section-desc {
        margin: 20px 2.5em;
        font-size: 16px;
    }
}

@keyframes bounceChevronDown {
    from {
        transform: translateY(-30px);
    }

    to {
        transform: translateY(0);
    }
}

.chevron-down i {
    font-size: 3.5rem;
}

/* Elements */
.cards {
    position: relative;
    width: 380px;
    min-height: 450px;
    background-color: var(--surface-color) !important;
    border: 1px solid rgba(100, 100, 100, 0.11);
    border-radius: 32px;
    border: 1px solid rgba(100, 100, 100, 0.1);
    transition: background-color .2s;
}

.cards p {
    line-height: normal !important;
    font-size: 14px !important;
    color: var(--text-color) !important;
}

.cards h2 {
    font-size: 24px;
    margin: 0 3px 10px 3px;
    color: var(--primary-color) !important;
    font-family: Raleway, sans-serif;
    font-weight: 500;
}

.cards i {
    background-color: rgba(100, 100, 100, 0.2);
    font-size: 24px;
    padding: 8px;
    border-radius: 50px;
}

.card-info {
    padding: 15px 4px;
    color: white !important;
}

.card-desc ul {
    border-radius: 20px;
    padding: 20px 30px 20px 38px;
}

.card-desc ul li {
    list-style-image: url("https://img.icons8.com/forma-regular/14/checked.png");
    list-style-position: inside;
}

.card-desc {
    padding: 25px 26px;
    color: white !important;
}

.card-desc p {
    margin: 5px 0 18px 0;
    font-size: 13.5px;
    line-height: 20px;
}

.card-desc .btn {
    animation: none;
    /* Prevent blinking animation from hero section */
}

.card-header {
    width: 100%;
    height: 200px;
}

.price-tag {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--text-color) !important;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid rgba(100, 100, 100, 0.1);
    font-size: 14px;
    text-shadow: none;
}

.card-image {
    width: 100%;
    height: 100%;
    border-radius: 24px 24px 0 0;
    object-fit: cover;
}

.labelTag {
    background-color: var(--secondary-color);
    color: white !important;
    padding: 6px 16px;
    font-size: 1.2rem;
    border-radius: 50px;
    color: inherit;
    z-index: 2;
}

.people .labelTag {
    display: none;
}

.card-btns {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 16px 25px 16px 25px;
    border-radius: 0 0 32px 32px;
}

.flex-grids {
    position: relative;
    scroll-behavior: auto;
}

.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    min-width: 100% !important;
    gap: 24px;
    z-index: 0;
}

.flex.two-sided {
    justify-content: center;
    gap: 4%;
}

.flex.two-sided>div {
    flex-basis: 35%;
}

.flex.rm-padding {
    padding: 0;
    margin: 0;
}

.flex.full {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 1.3em 20px 0em;
    flex-wrap: nowrap;
}

.flex.full .btn {
    width: 148px;
}

.flex.nowrap {
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
}

.flex.hidden {
    visibility: hidden !important;
}

.container {
    margin: 15px 10px;
}

.container .content {
    display: flex;
    flex-direction: row;
}

.vertical-line {
    width: 2px;
    height: 20px;
    border-radius: 50px;
    background-color: rgba(100, 100, 100, 0.2);
    margin: auto 0.2em;
}

.line {
    width: 5px;
    height: 140px;
    border-radius: 50px;
    background-color: rgba(100, 100, 100, 0.2);
}

.flex-box {
    width: 100%;
    min-height: auto;
    display: flex;
    gap: 4em;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
}

.flex-box.rtl {
    flex-direction: row-reverse;
}

.flex-box .flex.two-sided {
    gap: 36px;
    flex-wrap: nowrap;
}

.flex-box .social-media {
    display: flex;
    width: min-content;
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: 100%;
    left: 0;
}

.flex-box-number {
    justify-content: flex-start;
    margin: 0 0 20px 0;
}

.flex-box-number i {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 300 !important;
    background-color: var(--bg-icon-color);
}

.flex-box-number span {
    font-family: "Open Sans", sans-serif;
    font-size: 32px;
    color: var(--primary-color);
}

.flex-box .img-container {
    width: 380px;
    height: 400px;
    position: relative;
    border-radius: 40px;
    overflow: hidden;
}

.flex-box .img-container .img {
    width: 380px;
    height: 400px;
    aspect-ratio: 1 / 1;
    border-radius: 40px;
    object-fit: cover;
}

.img.riley.active {
    display: block;
}

.flex-box .box-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 52%;
    margin: 0 0px 0 0px;
    padding: 2em 0em 0px 0em;
}


.flex-box .box-content-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-box .box-content h1 {
    font-family: 'Raleway', sans-serif !important;
    margin: 0;
    font-size: 50px;
}

.flex-box .box-content h2 {
    font-size: 38px;
    font-weight: 500;
    text-transform: uppercase;
    margin: 20px 0 20px 0;
    font-family: Raleway, sans-serif !important;
}

.flex-box .box-content p {
    font-size: 20px;
    line-height: 32px;
    font-weight: 300;
}

.flex-box .box-content .richi-bio {
    font-size: 15px;
    text-align: justify;
    line-height: 26px;
    font-weight: 400;
    max-width: 100%;
}

.flex-box .box-content b {
    line-height: 24px;
    font-weight: 700;
}

.flex-box .box-biography {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.flex-box .tree {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    font-size: 15px;
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
}

.tree-li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 3em;
    flex-wrap: wrap;
    padding: 8px 20px 8px 0;
    border-radius: 30px;
}

.tree li {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0 0px 5px 0px;
    font-size: 18px;
    padding: 0;
}

.tree b {
    font-size: 18px;
    font-weight: 500;
    font-family: "Raleway", sans-serif;
    margin-bottom: 1px;
}

@keyframes upToDown {
    25% {
        transform: translateY(20px);
    }

    50% {
        transform: translateX(-20px);
    }
}

@keyframes downToUp {
    25% {
        transform: translateY(-20px);
    }

    50% {
        transform: translateX(20px);
    }
}

.box-content .name {
    text-align: left;
    margin: 5px 0 0px 0;
    font-weight: 500;
    color: var(--primary-color);
}

.alternate-name {
    color: var(--primary-color) !important;
    font-weight: 600;
}

@keyframes changeRadius {
    0% {
        background-size: 100% 500%;
    }

    25% {
        background-size: 100% 109000000%;
    }

    50% {
        background-size: 150% 100%;
    }

    75% {
        background-size: 100% 500%;
    }

    100% {
        background-size: 100% 100%;
    }
}

.flex-box-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
}

.modern-flex-box {
    width: 345px;
    height: auto;
    margin: 12px 0px 8px 0px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 32px;
    transition: border .4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.flex-box-img {
    width: 70px;
    height: 70px;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 300 !important;
    background-color: var(--bg-icon-color);
}

.modern-flex-box .flex-box-desc {
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    overflow: hidden;
    white-space: inherit;
    text-overflow: ellipsis;
}

.flex-box-desc h1 {
    font-weight: 400;
    font-size: 3rem;
    margin-bottom: 10px;
    color: inherit !important;
    font-family: Raleway, sans-serif;
}

.flex-box-desc p {
    font-size: 16px;
    line-height: 24px;
}

.modern-flex-box:hover,
.cards:hover {
    border-color: var(--secondary-color);
}

@media (max-width: 800px) {
    .tab-buttons {
        gap: 20px;
    }
    
    .tab-button, .tab-button.active {
        padding: 10px 9px;
    }
    
    .flex-box {
        flex-direction: column;
        width: 100%;
        align-items: flex-start;
        height: auto;
        gap: 0;
        
    }

    .flex-box h1 {
        text-align: left;
    }

    .flex-box .box-content {
        max-width: 100%;
        width: 100%;
        padding: 0.2em 1.5em 1em 1.5em;
        align-items: center;
    }
    .flex-box .box-content h2 {
        font-size: 34px;
        text-transform: initial;
        margin: 20px 0px 20px 0;
    }
    .box-content .name {
        margin: 0px 0 0px 0;
        
    }

    .tree-li,
    .flex-box .tree {
        flex-direction: column !important;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }
    
    .tree-li b {
        font-size: 2.5rem;
        
    }

    .flex-box .img-container {
        width: 320px;
        height: 320px;
        left: 22px;
    }
    .flex-box .img-container .img {
        width: 100%;
        height: 100%;
    }
}

.social-media .link {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.social-media .link i {
    position: relative;
    background-color: var(--bg-icon-color);
    padding: 6px;
    border-radius: 16px;
    font-size: 26px;
    transition: .4s cubic-bezier(1, 0, 0, 1);
    color: var(--primary-color);
}

.sponsored {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 2em;
}

.chevron-down {
    position: absolute;
    bottom: 20px;
    left: 8%;
    right: 8%;
    text-align: center;
    animation: bounceChevronDown 3s infinite alternate;
}

.centered-hero {
    width: 100%;
    height: 100vh;
    padding: 0 0 0 0em;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.centered-hero .section-title {
    text-transform: none;
    font-size: 5rem;
    animation: fadeInUp .8s cubic-bezier(1, 0, 0, 1);
    color: var(--text-color) !important;
}

.centered-hero .section-desc {
    animation: fadeInUp .95s cubic-bezier(1, 0, 0, 1);
}

.timeline {
    width: 100%;
    height: 100%;
    margin: 0em 0 2em 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.timeline-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0 1em;
    gap: 2em;
}

.timeline-item {
    width: 100%;
    padding: 30px 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    gap: 3em;
    border-bottom: 2px solid rgba(100, 100, 100, 0.11);
}

.timeline-content :last-child {
    border-bottom: none;
}

.timeline-item-header {
    width: 500px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.timeline-item-header h1 {
    font-weight: 400;
    font-size: 2.6rem;
    width: 100%;
    animation: fadeInDown .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.timeline-item-header img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 32px;
    aspect-ratio: 1/1;
}

.timeline-item-header:has(img) {
    width: 290px;
}

.timeline-item-content {
    padding: 20px 2em;
    max-width: 620px;
}

.timeline-item-content h1 {
    font-weight: 300;
    font-size: 23px;
    line-height: 40px;
    animation: fadeInDown .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.timeline-item-content .highlight {
    font-size: 1.8rem;
    margin-bottom: 10px;
    font-weight: 500;
}

.timeline-item-content p {
    line-height: 29px;
    animation: fadeInDown .8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.people-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(410px, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    justify-content: center;
    padding: 20px 10px 40px 26px;
    column-gap: 2.4vw;
    row-gap: 2.2vw;
}

.people-container.two-column {
    grid-template-columns: repeat(2, 1fr);
}

.people-container.rtl {
    grid-template-columns: repeat(2, 1fr); direction: rtl;
    padding-right: 26px;
    column-gap: 1vw !important;
}

.people-container.rtl .people {
    direction: ltr;
}

.people {
    break-inside: avoid;
    position: relative;
    grid-column: span 1;
    grid-row: span 20;
    overflow: hidden;
    width: 380px;
    transition: transform .7s cubic-bezier(0.175, 0.885, 0.32, 1.275), border .4s cubic-bezier(0.075, 0.82, 0.165, 1), opacity .4s cubic-bezier(0.215, 0.610, 0.355, 1), background-color .4s cubic-bezier(0.075, 0.82, 0.165, 1);
    padding: 10px 6px;
    pointer-events: auto;
}
.people.row-2 {
    grid-column: 1 / span 2;
}
.people.span-1 {
    grid-column: span 27;
}
.people.span-2 {
    margin-top: 6em;
    grid-row: span 23;
}

.people:hover {
    cursor: pointer;
}

.people .people-img {
    object-fit: cover;
    width: 370px;
    height: 430px;
    margin: 5px 0px 8px 0px;
    background: rgba(100, 100, 100, 0.05) url('/assets/logo/keyzarichi.org-200w.webp') no-repeat;
    background-position: center center;
}

.people:hover .people-img{
    transform: scale(1.02);
}

.people-img:has(img) {
    background: rgba(100, 100, 100, 0) no-repeat !important;
}

.people .people-img img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center 15%;
    background-color: var(--bg-icon-color);
    aspect-ratio: 3/4;
}

.people .name {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    column-gap: 20px;
    row-gap: 6px;
    width: 100%;
    transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    margin: 0px 0px 10px 0px;
    padding-top: 10px;
    border-top: 1px solid rgba(100, 100, 100, 0.3);
}

.people .people-bio {
    user-select: none;
    width: 100%;
    padding: 5px 0px 12px 0px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: opacity .2s, transform .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.people .name h2 {
    color: var(--text-color);
    font-size: 18px;    
    font-family: Raleway, sans-serif;
    font-weight: 600;
    
}

.people .nickname {
    position: relative;
    text-align: right;
    font-size: 17px !important;
}

.people .people-bio span {
    color: var(--primary-color);
    font-weight: 550;
    word-spacing: normal;
    font-size: 16px;
}

.people .people-bio .alias {
    font-weight: 700;
    color: inherit !important;
}

.people .alias::after {
    content: "|";
    margin: 0 8px;
}

.people .people-bio p {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 26px;
    overflow: hidden;
    max-height: calc(2em * 5);
    display: none;
    line-clamp: 4;
    font-weight: 400;
    box-orient: vertical;
    text-overflow: ellipsis;
    margin: 10px 0 4em 0;
    padding: 0px 1.6em 40px 1.6em;
}

.people-bio p.empty {
    color: rgb(100, 100, 100);
}

.people .social-media a {
    color: inherit !important;
}

.people .people-btns {
    display: none;
    flex-direction: column;
    margin-bottom: 18px;
    padding: 10px 20px 10px 20px;
    justify-content: space-between;
}

.people .social-media {
    width: fit-content !important;
    gap: 2em;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 8px 10px;
    padding: 6px 10px !important;
    border-radius: 50px;
    background-color: rgba(100, 100, 100, 0.05);
}

.people .social-media span {
    display: none;
}

.people .social-media i {
    background: none;
    background-color: transparent !important;
    padding: 4px;
    transition: color .4s;
    font-size: 32px !important;
}

.people .social-media i:hover {
    color: var(--tertiary-color);
}

.people-icon {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    box-shadow: 1px 1px 5px #808080;
}

/* i[class="lni lni-instagram"] { position: relative; background: #833ab4; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } i[class="lni lni-tiktok"] { position: relative; background-color: black !important; } */
.people .social-media i[class="lni lni-instagram"] {
    position: relative;
    background: #833ab4;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-emphasis-color: transparent;
}

.people .social-media i[class="lni lni-tiktok"] {
    position: relative;
    background: transparent;
    color: inherit;
}

.people .like-count,
.people .comment-count {
    cursor: pointer;
}

.people .like-count.liked,
.like-count.liked .people .person-interaction-count i {
    color: rgb(209, 62, 62) !important;
}

/* New PeopleCard (experimental) */
.people.new {
    background-color: rgba(253, 253, 253, 0.95);
}

.people.new:hover {
    filter: drop-shadow(0px 5px 20px rgba(var(--bg-color-value), 0.2));
}

.people.new:focus {
    border: 1px solid var(--tertiary-color) !important;
}

:root.dark-mode .people.new {
    background: rgba(20, 20, 20, 0.9);
}

.people.new .people-banner {
    display: none;
}

.people.new .people-bio span,
.people.new .people-bio .badge {
    margin-bottom: 10px;
}

.people .people-bio .badge {
    color: var(--text-color);
    font-weight: 500;
    word-spacing: normal;
    font-size: 15px;
    display: none;
    background-color: rgba(100, 100, 100, 0.1);
    border-radius: 50px;
    margin: 10px 0 10px 0px;
    padding: 5px 16px;
}

.people.new .people-bio .badge {
    margin: 0 0 10px 10px;
    padding: 5px 16px;
}


.people.new .people-bio p {
    margin: 0 0 2.5em 0 !important;
    padding: 0 36px 20px 36px;
}

.people.new .name {
    margin: 10px 36px 10px 36px;
}

.people.new .name h2 {
    display: inline;
    min-width: fit-content;
    margin: 0px 10px 12px 0;
}

.people.new .people-img img {
    border: none !important;
    border-radius: 30px;
    height: 100%;
    background-color: transparent !important;
    object-position: center 11%;
    border-radius: inherit;
}

.people.new .people-bio {
    margin: 0 0 3em 0;
    padding: 0;

    
    transform: translateY(-5.1em);
}

.people.new .people-btns {
    padding: 10px 20px;
}

.people .interaction {
    display: none;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
    background-color: rgba(100, 100, 100, 0.05);
    padding: 8px 0px 8px 10px;
    border-radius: 24px;
}

.people.new .interaction {
    display: flex;
}

.people .person-interaction-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.people .person-interaction-count i {
    font-size: 20px;
    color: var(--primary-color);
    padding: 6px;
    background-color: var(--bg-icon-color);
    border-radius: 50px;
    margin-right: 4px;
}

.people .person-interaction-count span {
    position: relative;
    top: -4px;
}

.people.new .social-media {
    justify-content: flex-start;
    padding: 0 10px;
    gap: 30px;
}

.rating-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0 8px 0;
}

.rating-container :last-child {
    border-right: none;
}

.rating-card {
    position: relative;
    width: 370px;
    padding: 20px 1.2em 20px 1.2em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.rating-pic {
    position: relative;
    width: 45px;
    height: 45px;
    object-fit: cover;
    top: -10px;
    border-radius: 50px;
}

.rating-card h1 {
    font-family: Raleway, sans-serif !important;
}

.rating-desc p {
    color: inherit;
    font-size: 15px;
    text-align: left;
    padding: 0 0px;
    line-height: 24px;
    font-weight: 400;
}

.quote-icon {
    font-size: 3rem !important;
    color: var(--primary-color) !important;
    padding: 0 12px 0 0;
}

.rating-desc {
    padding: 8px 12px;
    margin-bottom: 5em;
    display: flex;
    justify-content: center;
    align-items: center;
}

.rating-star {
    width: 100%;
    padding: 8px 16px 10px 16px;
    border-radius: 50px;
    font-size: 1.5rem;
    justify-content: flex-start;
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #ccc;
}


.rating-star span {
    color: var(--secondary-color);
}

.quarter-star {
    overflow: hidden;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.reviewer-data {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    width: 88%;
    position: absolute;
    bottom: 2px;
    left: 0px;
    margin: 0 20px;
    right: 0px;
    padding: 20px 10px 0 10px;
}

.reviewer-data .role {
    font-size: 13px;
    font-weight: 400;
    margin: 0;
}

.reviewer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 5px;
    left: 0;
    right: 0;
    margin: 0 0 20px 0;
}

.rating-value {
    margin-right: 20px;
    font-weight: 600;
}

.reviewer-name {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    color: var(--text-color) !important;
}

.gallery-container {
    width: 100%;
    height: 100%;
    padding: 4px 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}

.gallery-container img {
    width: 250px !important;
    height: 250px !important;
    object-fit: cover;
    border-radius: 32px;
}

/* ItemButton */
.color-template .flex {
    margin: 20px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: normal;
}

.panel {
    position: relative;
    padding: 18px 26px;
    width: 300px;
    min-height: 300px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 30px;
    transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1);
    background-color: rgba(100, 100, 100, 0.05);
}

.panel:hover {
    background-color: rgba(100, 100, 100, 0.2);
}

.panel h1 {
    color: var(--text-color);
    font-size: 22px;
    transition: all .4s;
    font-family: Raleway;
}

.panel h1::before {
    transition: margin .4s;
    opacity: 0;
    visibility: hidden;
}

.panel p {
    transition: .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    font-size: 13px;
}

.panel-image {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
    margin: 24px 0;
}

.panel-image div {
    width: 70px;
    height: 50px;
    border-radius: 0px !important;
    margin-right: 1px;
}

.gold-luxury .primary {
    background-color: rgb(255, 206, 114);
}

.gold-luxury .secondary {
    background-color: rgb(214, 166, 36);
}

.gold-luxury .tertiary {
    background-color: rgb(211, 195, 165);
}

.panel-image.mono .primary {
    background-color: rgb(30, 30, 30);
}

.panel-image.mono .secondary {
    background-color: rgb(68, 68, 68);
}

.panel-image.mono .tertiary {
    background-color: rgb(165, 165, 165);
}

.panel-image.sarah-olive .primary {
    background-color: rgb(160, 185, 47);
}

.panel-image.sarah-olive .secondary {
    background-color: rgb(189, 15, 73);
}

.panel-image.sarah-olive .tertiary {
    background-color: rgb(225, 236, 198);
}

.panel-image.nia-charm .primary {
    background-color: rgb(129, 95, 72);
}

.panel-image.nia-charm .secondary {
    background-color: rgb(189, 108, 15);
}

.panel-image.nia-charm .tertiary {
    background-color: rgb(236, 198, 216);
}

.panel.selected {
    background-color: var(--bg-icon-color);
}


.item {
    padding: 12px 16px 12px 16px;
    text-align: left;
    width: 70%;
    border-radius: 50px;
    margin-bottom: 20px;
    transition: .4s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
}

.item * {
    color: var(--text-color);
}

.accordion-tab {
    display: flex;
    align-items: center;
    gap: 20px;
}

.accordion-tab i {
    background-color: var(--bg-icon-color);
    padding: 8px 10px;
    border-radius: 50px;
    font-size: 2rem;
}

.accordion-tab h2 {
    display: inline !important;
    font-family: Raleway, sans-serif;
    margin: 5px 0 0px 0;
    font-weight: 600;
}

.accordion-tab p {
    margin: 5px 0;
    font-size: 14px;
    word-spacing: 2px;
    font-family: "Open Sans", sans-serif;
}

.settings {
    width: 60% !important;
    margin: 0 20px 0 0;
    gap: 2px;
    border-radius: 50px;
    overflow: hidden;
    animation: fadeInUp .6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 50%;
    user-select: none;
}

.accordion-header::after {
    content: '\eb3a';
    font-family: 'unicons-line';
    padding: 8px;
    font-size: 1.5rem;
    background-color: var(--bg-icon-color);
    border-radius: 50px;
    transition: transform .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.accordion-image {
    width: 100%;
    height: 200px;
    border-radius: 32px;
    background-color: rgba(100, 100, 100, 0.1);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.accordion-image img {
    width: 35%;
    height: 200px;
    object-fit: cover;
}

.accordion-image-caption {
    margin: 20px 30px;
}

.accordion-content {
    height: 0;
    padding: 14px 12px;
    overflow: hidden;
    transition: height .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.accordion-content h2 {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
}

.opening {
    height: auto;
    animation: fadeInDown .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.closing {
    height: 0;
    animation: fadeOutDown .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

details[open] .accordion-header::after {
    transform: rotate(180deg);
}

.accordion-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    transition: .4s;
    padding: 12px 14px 12px 14px;
    margin-bottom: 5px;
    border-radius: 40px;
    user-select: none;
}

.accordion-item.block {
    display: block !important;
}

.accordion-item-title {
    font-size: 20px;
    font-family: Raleway, sans-serif;
    font-weight: 600;
    margin: 2px 20px 8px 0;
    width: 100%;
    max-width: 70%;
    line-height: 22px;
}

.accordion-item-desc {
    font-size: 16px;
    font-family: "Open Sans", sans-serif;
    font-weight: 500;
    margin: 2px 0;
    line-height: 20px !important;
    width: 320px !important;
}

.accordion-item-title.full {
    max-width: 100%;
}

.accordion-item.column {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.accordion-item .toggle {
    top: 0;
    margin-left: 1em;
}

.richiTheme p {
    margin: 0 0 5px 0;
}

.version-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.version-content .brand-logo {
    width: 250px;
    height: 120px;
    object-fit: cover;
    margin-bottom: 10px;
}

.version-content p {
    margin: 0;
}

.chevron-right {
    width: 11px;
    height: 11px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    border-bottom-color: #cfcfcf;
    border-right-color: var(--primary-color);
    border-radius: 3px;
    transform: rotate(-45deg);
    margin-right: 5px;
    display: inline-block;
}

.chevrondown {
    width: 9px;
    height: 9px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    border-bottom-color: #cfcfcf;
    border-right-color: #e78607;
    transform: rotate(45deg);
    display: inline-block;
}

/* Input */
input {
    accent-color: var(--primary-color);
}

input[type="search"] {
    width: 280px;
    height: 25px;
    background-color: rgba(var(--bg-color-value), 0.95) !important;
    border: 2px solid rgba(100, 100, 100, 0.05);
    border-radius: 20px;
    padding: 24px 1em 24px 1.2em;
    outline: none;
    font-family: "Open Sans", sans-serif;
    ;
}

input[type="search"]:focus {
    border-color: var(--primary-color) !important;
}

input[type=search]::-webkit-search-cancel-button {
    appearance: none;
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%22ff0000'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");
    width: 24px;
    height: 24px;
    position: relative;
    top: 0px;
    right: 3px;
    color: inherit !important;
    cursor: pointer;
}

.searchBtn {
    width: 50px;
    min-height: 45px;
    font-size: 23px;
    border: 2px solid transparent;
    background-color: transparent !important;
    border-radius: 50px;
    position: absolute;
    right: 35px !important;
    cursor: pointer;
}

.searchBtn:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.searchBtn i {
    display: flex;
    place-content: center center;
}

.checkbox {
    display: inline-flex;
    align-items: center;
    transition: background-color .4s cubic-bezier(0.39, 0.575, 0.565, 1);
    padding: 10px;
    border-radius: 5px;
    width: 24px;
    height: 24px;
    background-color: var(--surface-color);
    border: 1px solid rgba(100, 100, 100, 0.2);
}

label {
    display: inline-flex !important;
    font-weight: 600;
    font-family: "Open Sans", sans-serif;
}

.checkbox:checked {
    background-color: rgba(var(--bg-color-value), 0.85);
    background-image: url('https://img.icons8.com/material-rounded/22/checkmark--v1.png');
    background-blend-mode: multiply;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    background-color: transparent;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-bottom: 2px solid rgba(100, 100, 100, 0.2);
    height: 30px;
    font-size: 16px;
    outline: none;
    font-family: "Open Sans", sans-serif;
    transition: .2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    border-bottom: 2px solid var(--primary-color);
}

input[type=range] {
    appearance: none;
    border-radius: 50px;
    width: 100%;
    height: 16px;
    margin: 24px 0px 0px 0;
    transition: .4s;
    background-color: var(--bg-icon-color);
}

input[type=range]:active {
    height: 40px;
}

/* WebKit Track */
input[type=range]::-webkit-slider-runnable-track {
    appearance: none;
    border-radius: 50px;
}

datalist {
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
}

datalist option {
    border-radius: 50px;
    text-align: center;
    min-width: 30px;
    width: 40px;
    height: 20px;
    font-size: 13px;
    padding: 4px 0;
}

input[type=range]::-webkit-slider-thumb {
    appearance: none;
    height: 28px;
    width: 28px;
    position: relative;
    top: -3px;
    background-color: var(--primary-color);
    border-radius: 16px !important;
    transition: height .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

input[type=range]:active::-webkit-slider-thumb {
    height: 40px;
    top: 0;
}

/* Firefox Track */
input[type=range]::-moz-range-track {
    background-color: var(--surface-color);
    border-radius: 50px;
}

/* Lainnya */
.hideAndSeek {
    background-color: var(--surface-color) !important;
    position: relative;
    font-size: 24px;
    min-height: 450px;
    transition: width .8s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
    border-radius: 30px;
    user-select: none;
    border: 1px solid rgba(100, 100, 100, 0.1);
    display: flex;
    width: 400px;
    flex-direction: column;
}

.hideAndSeek .caption {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 250px;
    padding: 22px 30px;
}

.caption-title {
    font-family: Raleway, sans-serif;
    font-weight: 500;
    font-size: 25px;
    margin: 0 0 5px 0 !important;
    color: inherit !important;
    transition: opacity .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.caption .caption-desc {
    margin: 0 0 20px 0;
    font-size: 14px;
    font-family: "Open Sans", sans-serif;
    transition: .8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.hideAndSeek .img .icon {
    font-size: 6rem;
    width: 120px;
    height: 90px;
}

.hideAndSeek .img {
    overflow: hidden;
    position: relative;
    min-height: 260px;
    max-height: 300px;
    height: 300px;
    border-radius: 30px;
    background-color: rgba(100, 100, 100, 0.1);
}

.hideAndSeek .img img {
    position: relative;
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    transition: filter 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.hideAndSeek .btn {
    color: white;
}

/* Karousel */
.inline-caption-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 22px;
    margin: 0px 0 30px 0;
    padding: 16px 0px;
}

.inline-caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2em;
    overflow-x: scroll;
    transition: transform .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    padding: 0px 20px 16px 20px;
}

.inline-caption::-webkit-scrollbar {
    display: none;
}

.inline-caption-item {
    width: 400px;
    overflow: hidden;
    position: relative;
    transition: border .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}


.inline-caption-item h1 {
    font-weight: 400;
    text-transform: uppercase;
    font-size: 30px;
    color: inherit !important;
    font-family: Raleway, sans-serif;
    margin: 0px 0 20px 0;
}

.inline-caption-item img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.inline-caption-desc {
    padding: 18px 22px;
    display: flex;
    flex-wrap: wrap;
}

.inline-caption-desc p {
    display: none;
    font-size: 13px;
    line-height: 24px
}

.inline-caption-item .timestamp {
    font-size: 12px;
    font-weight: 400;
}

.inline-caption-item .inline-caption-desc p {
    display: inline-block;
}

.inline-caption-left {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50px;
    background-color: rgb(248, 248, 248);
    font-size: 1.5rem;
    min-width: 50px;
    z-index: 2;
}

.inline-caption-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 50px;
    background-color: rgb(248, 248, 248);
    font-size: 1.5rem;
    min-width: 50px;
    z-index: 2;
}

/* Carousel */
.carousel {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin-top: -7.1% !important;
    overflow: hidden;
}

.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform .5s cubic-bezier(1, 0, 0, 1);
}

.slide {
    min-width: 100vw;
    height: 100%;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.carousel-caption {
    position: absolute;
    bottom: 60px;
    left: 60px;
    color: inherit;
    max-width: 550px;
    z-index: 2;
}

.carousel-caption * {
    color: white;
    text-shadow: 0px 0px 5px #070707;
}

.carousel-news-type {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0.91;
}

.caption-title {
    font-family: Raleway, sans-serif;
    font-size: 2rem;
    margin: 10px 2px;
}

.caption-subtitle {
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0.9;
}

.carousel-indicators {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background-color: var(--surface-color);
    z-index: 3;
}

.indicator {
    width: 10px;
    height: 10px;
    border-radius: 50px;
    background-color: #aaa;
    opacity: 0.5;
    cursor: pointer;
    transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.indicator.active {
    background-color: var(--primary-color);
    opacity: 1;
    width: 20px;
    height: 10px;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.prev-btn {
    background-color: var(--surface-color) !important;
    min-width: 50px;
    font-size: 18px;
    left: 15px;
}

.next-btn {
    background-color: var(--surface-color) !important;
    min-width: 50px;
    font-size: 18px;
    right: 15px;
}

/* Article */
.article {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-bottom: 3em;
}

.article .article-header {
    margin: 2em 0 2em 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
}

.article-header .links {
    font-size: 20px;
}

.article .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    border-radius: 0px 0px 20px 20px;
    border-bottom: 1px solid var(--lightgray);
    background-color: var(--surface-color) !important;
}

.title-container {
    width: 80%;
    padding: 3em 0em 6em 0em;
    border-radius: 0 0 20px 20px;
}

.article-title {
    font-size: 3.5rem;
    margin: 30px 0 0px 0;
    text-shadow: 1px 1px 1px #555;
}

.article .content {
    padding: 1em 7em 3em 7em;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
}

.article .content h1 {
    font-size: 3.5rem;
    text-align: center;
    margin: 3em 0 24px 0;
}

.article .content p {
    font-family: "Open Sans", sans-serif;
    font-size: 19px;
    font-weight: 400;
    line-height: 27px;
}

.article .content .ad .sidebar-ad {
    flex: 30%;
}

.article .content b {
    font-weight: 600;
}

.article .article-information {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 30px;
    margin-bottom: 30px;
}

.article-information .btn {
    background-color: transparent !important;
    border: none;
}

.article-image-container {
    width: 100%;
    height: 200px;
    margin: 10px 0;
    border-radius: 20px;
    object-fit: contain;
    background-color: var(--light);
    border: 1px solid var(--lightgray);
}

.article .title .article-image-container {
    height: 400px;
}

:root.dark-mode .article-image-container {
    background-color: var(--dark);
    border-color: var(--borderdark);
}

.article-image-container .article-images,
.article-image-container img {
    width: 100%;
    height: inherit;
    object-fit: scale-down;
}

/* ======Tindakan====== */
.tooltip {
    position: absolute;
    display: none;
    background-color: var(--surface-color);
    border: 1px solid rgba(100, 100, 100, 0.2);
    animation: fadeInDown .7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    text-align: center;
    padding: 8px 15px;
    border-radius: 20px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 100;
}

.verified,
.people .social-media i.verified {
    position: absolute;
    display: none;
    bottom: -10px;
    right: -8px;
    background-repeat: no-repeat;
    content: "";
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(39%) sepia(51%) saturate(200%) hue-rotate(180deg) brightness(100%) contrast(90%);
    background-image: url('https://img.icons8.com/material-rounded/24/verified-account.png');
}

.private,
.people .social-media i.private {
    position: absolute;
    display: none;
    bottom: -10px;
    right: -8px;
    background-repeat: no-repeat;
    content: "";
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(39%) sepia(51%) saturate(200%) hue-rotate(180deg) brightness(100%) contrast(90%);
    background-image: url('https://img.icons8.com/material-rounded/24/lock--v1.png');
}

:root.dark-mode .verified,
:root.dark-mode .people .social-media i.verified,
:root.dark-mode .private,
:root.dark-mode .people .social-media i.private {
    filter: invert(1);
}

:root.dark-mode .toggle {
    box-shadow: inset 0px 0px rgba(0, 0, 0, 0.1), inset 2px 10px 0px rgba(0, 0, 0, 0.1);
}

.toggle {
    position: relative;
    top: 3px;
    min-width: 60px !important;
    height: 24.5px;
    border: 2px solid rgba(100, 100, 100, 0.1);
    border-radius: 50px;
}

.toggle input {
    display: none;
}

.toggle:active .slider {
    background-color: rgba(100, 100, 100, 0.1);
}

.slider {
    position: absolute;
    content: '';
    cursor: pointer;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: transparent;
    transition: .2s;
    border-radius: 50px;
}

.slider::before {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    top: 2px;
    left: 4px;
    background-color: var(--primary-color);
    transition: .3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-radius: 50px;
}

input[type=checkbox]:checked+.slider {
    background-color: var(--bg-icon-color);
    border-radius: 50px;
}

input[type=checkbox]:checked+.slider::before {
    transform: translateX(31px);
    border-radius: 50px;
}

.leftOption,
.rightOption {
    position: relative;
    padding: 6px 10px 8px 10px;
    top: -5px;
    letter-spacing: .8px;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Open Sans", sans-serif;
    border: 2px solid transparent;
    transition: .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    cursor: pointer;
}

.leftOption:hover,
.rightOption:hover {
    color: inherit !important;
    border-bottom: 2px solid rgba(100, 100, 100, 0.1);
}

.leftOption.active,
.rightOption.active {
    color: inherit !important;
    border-bottom: 2px solid var(--primary-color);
}

.leftOption i,
.rightOption i {
    font-size: 20px;
    padding: 4px 4px 6px 6px;
    position: relative;
    top: 0px;
    background-color: var(--bg-icon-color);
    color: var(--on-surface-color);
    border-radius: 50px;
    margin-right: 10px;
}

.leftOption.active i,
.rightOption.active i {
    color: var(--primary-color);
    animation: rotateIn 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.beta {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    padding: 8px 16px;
    background-color: var(--primary-color);
    color: white;
    font-size: 18px;
    margin-left: 10px;
    font-weight: 400;
    border-radius: 50px;
}

/* uppercase, kapital, dan lowercase */
.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

/* Overlay */
.overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(126, 126, 126, 0.3);
    opacity: 0;
    z-index: 1;
    visibility: hidden;
    transition: opacity 1s ease;
}

.showOverlay {
    opacity: 1;
    visibility: visible;
}

/* iklan */
.ad {
    cursor: pointer;
    width: 100vw;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: inline-flex;
    justify-content: center;
    background-color: white;
}

:root.dark-mode .ad {
    background-color: #1a1a1a;
    border: 1px solid #202020
}

.ad-banner {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background-color: white;
    z-index: 10;
}

.ad-banner.hidden {
    display: none;
}

.square-ad {
    position: relative;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    width: 250px;
    height: 250px;
    z-index: 10;
    display: flex;
    justify-content: center;
}

.rect-ad {
    position: relative;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    width: 600px;
    height: 314px;
    z-index: 10;
    display: flex;
    justify-content: center;
}

.sidebar-ad {
    position: relative;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    right: 0;
    width: 160px;
    height: 600px;
    z-index: 10;
    display: flex;
    justify-content: center;
}

.ad img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ad-banner .close {
    position: absolute;
    top: -12px;
    right: 30px;
}

/* Visibilitas elemen */
/* NOTE: .hidden atau #hidden tidak sama dengan .disappear/#disappear - .hidden/#hidden = menyembunyikan elemen tanpa jejak atau ruang kosong tempat elemen itu sendiri berada. - .disappear/#disappear = menyembunyikan elemen namun akan meninggalkan ruang kosong tempat elemen yang disembunyikan berada. !important = sebuah emmet untuk memastikan elemen yang akan disembunyikan menghilang dengan baik dan benar tanpa tumpang tindih dengan elemen lain yang menggunakan properti display. */
.hidden,
#hidden {
    display: none;
}

.disappear,
#disappear {
    opacity: 0;
    visibility: hidden;
}

/* Keyframes animasi */
.fadeInLeft {
    animation: fadeInLeft .5s cubic-bezier(1, 0, 0, 1) forwards;
}

.fadeInRight {
    animation: fadeInRight .5s cubic-bezier(1, 0, 0, 1) forwards;
}

.fadeOutLeft {
    animation: fadeOutLeft .5s cubic-bezier(1, 0, 0, 1);
}

.fadeOutRight {
    animation: fadeOutRight .5s cubic-bezier(1, 0, 0, 1);
}

@keyframes start {
    0% {
        background-color: transparent
    }

    100% {
        background-color: rgba(228, 109, 11, 0.678);
    }
}

@keyframes bounce {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(20px);
        border-radius: 150px;
        height: 450px;
    }
}

@keyframes windows8Left {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0px);
    }
}
@keyframes windows8OutLeft {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes windows8Right {
    from {
        transform: translateX(-500px)
    }

    to {
        transform: translateX(0px)
    }
}

@keyframes glowCard {
    50% {
        box-shadow: 0px 0px 30px rgba(236, 159, 58, 0.774);
    }
}

@keyframes fadeInUp {
    0% {
        transform: translateY(260px);
        opacity: 0.0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes fadeOutUp {
    0% {
        transform: translateY(0px);
        opacity: 1;
    }

    25% {
        opacity: 0.0;
    }

    100% {
        transform: translateY(50px);
        opacity: 0.0;
    }
}

@keyframes Left2 {
    0% {
        transform: translateX(70px);
        opacity: 0.0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1.0;
    }
}

@keyframes fadeOutLeft {
    0% {
        transform: translateX(0px);
        opacity: 1.0;
    }

    50% {
        opacity: 0.0;
    }

    100% {
        transform: translateX(-50px);
        opacity: 0.0;
    }
}

@keyframes windows8ScaleIn {
    from {
        opacity: 0;
        transform: scale(1.2);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

@keyframes left {
    from {
        transform: translateX(-50px);
    }

    to {
        transform: translateX(0px);
    }
}

@keyframes right {
    from {
        transform: translateX(50px);
    }

    to {
        transform: translateX(0px);
    }
}

@keyframes fadeOutRight {
    0% {
        opacity: 1;
        transform: translateX(0px);
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: translateX(50px);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

@keyframes fadeOutDown {
    0% {
        opacity: 1;
        transform: translateY(0px);
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: translateY(-50px);
    }
}

@keyframes bounceToDown {
    0% {
        transform: translateY(100px) translateX(0px) scale(1);
    }

    25% {
        transform: translateY(100px) translateX(-30px);
    }

    50% {
        transform: translateY(50px) translateX(0px);
    }

    75% {
        transform: translateY(50px) translateX(0px);
    }

    100% {
        transform: translateY(0px) translateX(10px);
    }
}

@keyframes bounceToUp {
    0% {
        transform: translateY(-100px) translateX(0px) scale(1);
    }

    25% {
        transform: translateY(-100px) translateX(30px);
    }

    50% {
        transform: translateY(-50px) translateX(0px);
    }

    75% {
        transform: translateY(-50px) translateX(0px);
    }

    100% {
        transform: translateY(0px) translateX(10px);
    }
}

@keyframes rotateIn {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Header  */
header * {
    user-select: none;
    font-family: "Open Sans", sans-serif;
}

.header, header, .header-desktop, .header-container {
    isolation: auto !important;
}

.header-desktop {
    width: 100%;
    display: flex;
    mix-blend-mode: difference;
    justify-content: space-between;
    align-items: center;
}

.header-mobile {
    display: none;
    justify-content: space-between;
    align-items: center;
    transition: opacity .6s;
}

#float-button {
    position: fixed;
    right: 4.6% !important;
    bottom: 120px !important;
    z-index: 98;
    padding: 8px !important;
    min-width: 30px;
    width: 30px;
    height: 50px !important;
    transition: width .4s cubic-bezier(0.075, 0.82, 0.165, 1);
    z-index: 0;
    background-color: var(--surface-color) !important;
    animation: fadeInUp .4s cubic-bezier(0.075, 0.82, 0.165, 1);
    color: white;
    border-radius: 50px;
    gap: 16px;
}

#richi-ai-button {
    background-color: black;
    position: fixed;
    display: flex;
    gap: 30px;
    left: 0.5%;
    bottom: 10px;
    padding: 8px !important;
    min-width: 50px;
    width: 55px;
    height: 55px !important;
    transition: width .4s cubic-bezier(0.075, 0.82, 0.165, 1), opacity .8s cubic-bezier(0.075, 0.82, 0.165, 1), transform .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    filter: invert(1);
    
    isolation: isolate;
    z-index: 1;
    gap: 16px;
}

.float-button span {
    position: relative;
    top: -1px;
    font-weight: 600;
    display: none;
}

.float-button:hover {
    width: 200px !important;
    color: white;
}

.float-button:hover i {
    color: white;
}

.float-button:hover span {
    display: inline;
    color: black !important;
    animation: fadeInLeft .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.float-button i {
    font-size: 1.5rem;
}

#richi-ai-button i {
    font-size: 1.5rem;
    color: white !important;
}

.flex.full {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 1.3em 20px 0em;
    flex-wrap: nowrap;
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 0%;
    height: 3.5px;
    background-image: var(--gradient-color) !important;
    border-radius: 0 50px 50px 0;
    z-index: 999;
    transition: width .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

button i,
.hamburger i {
    display: flex;
    place-content: center center;
}

.nav-pane:not(.hidden) .header {
    mix-blend-mode: normal;
}

.brand {
    position: relative;
    display: flex;
    gap: 0.2em;
    width: fit-content;
    height: 50px;
    align-items: center;
    left: 0px;
}

header:has(.nav-pane:not(.hidden)) :is(.product, .logo) {
    opacity: 0;
    transform: translateY(-30px);
}
header:has(.nav-pane:not(.hidden)) .navigation {
    opacity: 0;
    visibility: hidden;
}

.logo {
    width: 140px !important;
    height: 55px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    opacity: 1;
    transform: translateY(0px);
    transition: opacity .3s cubic-bezier(0.075, 0.82, 0.165, 1), transform .3s cubic-bezier(0.075, 0.92, 0.403, 1);
    filter: invert();
}


.product {
    color: white;
    font-family: Raleway, sans-serif !important;
    font-size: 19px;
    font-weight: 500;
    line-height: 22px;
    opacity: 1;
    transform: translateY(0px);
    transition: opacity .3s cubic-bezier(0.075, 0.82, 0.165, 1), transform .7s cubic-bezier(0.075, 0.92, 0.403, 1) !important;
}

.sub-brand {
    font-weight: 300;
    font-size: 14px;
    color: rgb(209, 209, 209);
    letter-spacing: 0.03em
}

.navigation {
    display: flex;
    gap: 1.1em;
    padding: 4px 10px;
    border-radius: 50px;
    opacity: 1;
    transition: opacity .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}


.navBtn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    border: 1px solid transparent;
    width: fit-content;
    font-size: 14px;
    color: black;
    cursor: pointer;
    padding: 12px 12px;
    filter: invert(1);
    border-radius: 25px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.actions .hamburger {
    filter: invert(0)
}
:root.dark-mode .actions .navBtn, :root.dark-mode .navBtn {
    color: white;
    filter: invert(0)
}

.navBtn::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: auto;
    right: auto;
    width: 0px;
    height: 3px;
    border-radius: 50px;
    z-index: 1;
    background-color: var(--primary-color);
    opacity: 0;
    transition: width .4s cubic-bezier(0.075, 0.82, 0.165, 1), opacity .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.navBtn:hover::after {
    width: 30px;
    opacity: 1;
}
.navBtn:not(:hover)::after {
    width: 0px;
    opacity: 0;
}

.navBtn.active {
    color: var(--primary-color) !important;
}

.navBtn a {
    font-family: Raleway, sans-serif !important;
    color: inherit !important;
    display: inline-block;
    padding: 12px 4px;
    vertical-align: middle;
}

.navBtn.active a {
    text-shadow: 0px 0px 20px var(--primary-color) !important;
}

.navBtn i {
    font-size: 2rem;
}

.navBtn .promo.small {
    font-family: Raleway, sans-serif;
    position: absolute;
    top: unset;
    bottom: 0;
    right: 0;
    padding: 0px 8px;
}

.navBtn:hover {
    border-radius: 50px;
    color: var(--primary-color) !important;
}

.navBtn.hasChevron {
    position: relative;
    top: -1.3px;
    font-family: Raleway, sans-serif !important;
}

.hasChevron::after {
    content: "\eb3a";
    font-family: 'unicons-line';
    position: absolute;
    color: #808080;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    transform: translateY(-50%);
    right: -22px;
    font-size: 22px;
    font-weight: 300;
    padding: 0px 6px;
    transition: transform .5s cubic-bezier(1, 0, 0, 1);
}

.hasChevron:hover::after {
    color: var(--primary-color);
    transform: rotate(180deg) translateY(54%) !important;
}

.drop-down:hover .navButton {
    color: var(--primary-color) !important;
}

.drop-down {
    position: fixed;
    top: auto;
    left: 0;
    right: auto;
    margin-top: 12px;
    overflow: hidden;
    will-change: transform;
    background-color: transparent;
    border: none;
    outline: none;
    margin-right: 10px;
}

#navigation {
    inset: auto 35px auto auto;
}

#navigation .drop-down-content {
    width: 400px;
    padding: 8px 16px;
}

#navigation .drop-down-button:hover {
    box-shadow: inset rgba(100, 100, 100, 0.05) 500px 0px 0px;
}

.search-alt .drop-down {
    inset: auto 125px auto auto;
}

#cart-dropdown {
    inset: auto 105px auto auto;
}

.drop-down:popover-open>*:has(.tooltip) {
    display: none;
}

.drop-down-content {
    animation: fadeInDown .4s cubic-bezier(0.075, 0.82, 0.165, 1);
    display: flex;
    flex-direction: column;
    background-color: var(--surface-color);
    border: 1px solid rgba(100, 100, 100, 0.2);
    width: 320px;
    padding: 8px 6px;
    margin-top: 0px;
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
}

.drop-down-content .header {
    margin: 20px 0 40px 0;
}

.sub::after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    bottom: 10px;
    content: '\eb9f';
    font-family: 'unicons-line';
    display: flex;
    align-items: center;
}

.drop-down-content h1 {
    margin: 0;
}

.drop-down-content h1::before {
    display: none;
}

.drop-down-button {
    background-color: transparent;
    width: 100%;
    color: #aaa;
    border: 1px solid transparent;
    text-align: left;
    padding: 14px 16px 14px 18px;
    font-size: 15px;
    border-radius: 50px;
    margin: 0 0px 0px 0;
    transition: all .5s;
    animation: fadeInDown .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    font-family: "Open Sans", sans-serif !important;
    position: relative;
}

.drop-down-button:hover {
    box-shadow: inset rgba(100, 100, 100, 0.05) 300px 0px 0px;
    color: inherit;
}

.drop-down-button:active {
    background-color: rgb(100, 100, 100) !important;
}

.drop-down-button:focus {
    background-color: var(--primary-color) !important;
    color: white;
}

.actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    position: relative;
    left: 2px;
    padding: 9px 18px;
    border-radius: 50px;
}

.mobile-actions {
    display: none;
}

.actions .navBtn.nav {
    top: -2px
}

.actions .navBtn.nav::after {
    display: none;
}

.actions .navBtn.nav i {
    font-size: 1.8rem;
    position: relative;
    top: 2px;
}

.actions .search {
    display: none !important;
    position: relative;
}

.search-alt {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0px;
    border-radius: 50px;
}

.search-alt input[type=search] {
    top: -1px !important;
    min-width: 130px !important;
    background-color: var(--surface-color) !important;
}

.search .searchBtn {
    top: 2px;
    right: 0.2% !important;
}

.search-alt .btn {
    top: 15px !important;
    right: 28px !important;
}

.search-box,
.search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 10px;
}

.search input[type=search],
.search-box input[type=search] {
    background-color: transparent;
    position: relative;
    padding-right: 40px;
    transition: border .4s;
}

.search input[type=search] {
    min-width: 285px;
    height: 30px;
}

.search-box input[type=search] {
    min-width: 325px;
    top: -20px;
}

.search-box .searchBtn,
.search .searchBtn {
    min-width: 50px !important;
    text-align: center;
    padding: 0;
    transform: translate(10px, 0px);
    border: none;
}

.search-box .searchBtn:hover,
.search-box .searchBtn:active {
    background-color: transparent !important;
    border: none !important;
}

.search-box .searchBtn:hover i {
    color: var(--primary-color)
}

.search-box.alt {
    margin-bottom: 10px;
    padding-right: 10px;
    display: none;
}

:root.dark-mode .search-box.alt input[type=search] {
    background-color: rgb(39, 39, 39);
}

.actionsBtns {
    display: flex;
    align-items: center;
    position: relative;
    gap: 1em;
    margin: 0;
}

.side-panel {
    position: fixed;
    inset: 0 0 0 auto;
    background-color: var(--surface-color);
    width: 700px;
    z-index: 10;
    overflow-y: auto;
    overscroll-behavior: auto;
    will-change:transform;
    transition: border .8s cubic-bezier(0.075, 0.82, 0.165, 1);
    animation: fadeInRight .8s cubic-bezier(0.19, 1, 0.22, 1);
}
.side-panel #people-topbar {
    opacity: 0;
    visibility: hidden;
    font-weight: 600;
    font-size: 24px;
    transition: opacity .6s cubic-bezier(0.075, 0.82, 0.165, 1), background-color .6s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.divider {
    font-size: 32px !important;
    color: var(--on-surface-color)
}
.panel-header.scrolled #people-topbar {
    opacity: 1;
    visibility: visible;
}

.side-panel #close-panel {
    display: flex;
    align-items: center;
}
#close-panel:hover {
    cursor: pointer;
    border: 1px solid rgba(100, 100, 100, 0.2) !important;
}
#close-panel span {
    background-color: #666666;
    width: 2px; height: 30px;
    position: relative;
}
#close-panel .div-1 {
    transform: rotate(45deg) translate(10px, 0px);
    top: -10px;
}
#close-panel .div-2 {
    transform: rotate(-45deg) translate(-10px, -0px);
    top: -10px;
}
.side-panel::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
.side-panel .panel-header {
    position: sticky;
    padding: 20px 30px;
    top: 0px;
    right: 0px;   
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-header .btn {
    padding: 5px 10px 0px 10px;
    min-width: 50px;
    height: 50px;
    position: relative;
    right: -25px;
    max-height: auto;
} 
.panel-header .btn span {
    font-size: 4rem;
    position: relative;
    top: -8px;
}

.side-panel:not(.hidden) .people-bio {
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 10px 2em 40px 2em;
}

.side-panel .people-info {
    display: flex;
    flex-direction: row;
    gap:2em;
    animation: fadeInRight .6s cubic-bezier(0.075, 0.82, 0.165, 1);
    margin-top: 30px;
    padding-right: 20px;
}

.people-info.alt {
    flex-direction: column;
    gap: 10px;
}

.people-info.alt .name {
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
}

.people-info.alt .name h2 {
    font-size: 32px;
}

.people-info.alt .people-img {
    order: 1;
}

.side-panel:has(.people-info.alt) {
    width: 600px;
}

.side-panel .name {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
}

.side-panel .name h2 {
    color: var(--text-color);
    font-size: 28px;
    font-family: Raleway, sans-serif;
    font-weight: 600;
}

.side-panel .nickname {
    text-align: right;
    font-size: 19px !important;
    color: var(--primary-color);
    font-weight: 500;
    word-spacing: normal;
    font-size: 16px;
    margin: 0px 0;
}

.side-panel h1 {
    animation: fadeInRight .8s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.side-panel p {
    animation: fadeInRight 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 27px;
    font-weight: 450;
    margin: 0;
}

.side-panel .people-img img {
    object-fit: cover;
    border-radius: 24px;
    object-position: center 10%;
}
.side-panel .social-media {
    margin: 20px 0;
    padding: 10px 0;
    gap: 16px;
}

@keyframes rotateLogo {
    from {
        opacity: 0;
        transform: rotate(-90deg);
    }

    to {
        opacity: 1;
        transform: rotate(0deg);
    }
}

.hamburger {
    background-color: transparent !important;
    height: 55px;
    position: relative;
    top: -3px;
    left: -3px;
    margin-left: 0px;
    font-size: 16px !important;
}

.hamburger.no-pointer {
    pointer-events: none;
}


.hamburger:hover::after {
    width: 0px !important;
    opacity: 0;
}

.hamburger.active .equal div {
    background-color: var(--primary-color) !important;
}

.hamburger.active .equal .div2 {
    background-color: var(--secondary-color) !important;
}

.hamburger.active .equal .div3 {
    background-color: var(--tertiary-color) !important;
}

:root.dark-mode .hamburger {
    background-color: transparent;
}

.equal {
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: column;
    gap: 6px;
    padding: 5px 2px;
    position: relative;
    transform: scale(1.25);
    left: 3px;
}

.equal div {
    position: relative;
    width: 33px;
    height: 3px;
    border-radius: 100px;
    top: 0px;
    background-color: white;
    transition: all .4s cubic-bezier(1, 0, 0, 1);
}

.equal .div2 {
    width: 18px;
}

.equal .div3 {
    width: 26px;
}

.hamburger span {
    font-size: 2.3rem;
    contain: paint;
    color: #909090;
}

.hamburger.left .equal {
    justify-content: flex-start;
    align-items: flex-start;
}

.hamburger.veggie {
    background-color: transparent;
    border: 2px solid var(--secondary-color);
    box-shadow: inset rgba(121, 121, 121, 0.1) -2px 2px 3px, inset rgba(160, 160, 160, 0.1) 1px 2px 0px;
    border-radius: 50px;
    min-width: 90px;
    height: 48px;
    position: relative;
    top: -1px;
    transition: box-shadow .7s cubic-bezier(0.075, 0.82, 0.165, 1);
    margin-left: 0px;
    font-size: 16px !important;
}

.hamburger.veggie.active {
    background-color: var(--primary-color) !important;
}

.hamburger.veggie.active .equal div {
    background-color: white;
    transform: rotate(180deg);
}

:root.dark-mode .hamburger.veggie {
    background-color: transparent;
}

.hamburger.veggie:hover {
    box-shadow: inset rgb(39, 39, 39) -100px 0px 5px, inset rgba(160, 160, 160, 0.1) 1px 2px 0px;
}

.hamburger.veggie:hover .equal div {
    background-color: white;
}

.hamburger.veggie:active {
    background-color: white;
}

.hamburger.veggie .equal {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 7px;
    padding: 16px 0;
    position: relative;
    top: -9px
}

.hamburger.veggie .equal div {
    width: 32px;
    height: 3px;
    border-radius: 50px;
    background-color: #909090;
    transition: all .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.hamburger.veggie .hamburger span {
    font-size: 2.3rem;
    contain: paint;
    color: #909090;
}

/* NavPane */
.nav-pane {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0px;
    bottom: 0px;
    height: 100vh;
    z-index: 2;
    background-color: var(--surface-color);
}

.nav-pane hr {
    width: 90%;
    border-radius: 50px;
    border: 1px dashed rgba(187, 132, 29, 0.308);
}

.nav-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    
    height: 100vh;
}

.menuButton {
    position: relative;
    background-color: transparent;
    border: 1px solid transparent;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3.8rem;
    gap: 14px;
    text-align: left;
    padding: 12px 8px 12px 8px;
    border-radius: 16px;
    opacity: 0;
    color: var(--text-color);
    transform: translateY(40px);
    transition: opacity .3s cubic-bezier(0.075, 0.82, 0.165, 1), transform .6s cubic-bezier(0.125, 0.27, 0.165, 1), color .2s !important;
    font-family: Raleway, sans-serif;
}

.fade-in {
    opacity: 1;
    transform: translateY(0px);
}
.fade-out {
    opacity: 0;
    transform: translateY(40px);
}


.content-item:hover .menuButton  {
    color: rgb(100, 100, 100)
}
.content-item .menuButton:hover {
    color: var(--text-color);
}

.menuButton span {
    display: inline-block;
}


.menuButton.flex {
    display: inline-flex;
    justify-content: left;
    align-items: center;
    flex-direction: row;
}

.menuButton.flex select {
    min-width: 100%;
}

.menuButton.flex> :nth-child(1) {
    display: flex;
    align-items: center;
}

.menuButton.flex *> :nth-child(2) {
    margin: 6px auto;
}

.menuButton.flex> :nth-child(2) {
    width: 100%;
}

.menuButton.navigate {
    display: inline-flex;
    color: rgba(125, 125, 125, 0.7);
}

.chevron-right {
    /* width: 9px; height: 9px; border-style: solid; border-width: 0 2px 2px 0; border-bottom-color:#cfcfcf; border-right-color: var(--primary-color); transform: rotate(-45deg);  */
    display: inline-block;
    content: '\2192';
}

.navigation-button-list {
    padding: 20px 0 20px 0;
}

.menuButton i {
    display: none;
}

.menuButton.flex-toggle {
    display: inline-flex;
}

.account-panel:hover {
    background-color: rgba(100, 100, 100, 0.1);
    color: inherit !important;
}


.menuButton:focus {
    color: var(--primary-color);
}

.login {
    display: none;
}

.nav-pane .pane-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    border-radius: 50px;
}

.pane-header .btn {
    background-color: transparent !important;
    border: none !important;
}

.pane-header .btn:hover {
    color: var(--primary-color) !important;
}

.pane-header .btn i {
    font-size: 26px;
}

.pane-header .logo {
    width: 45px
}

.pane-header p {
    margin: 0;
    text-align: center;
    font-size: 12px;
}

.login-panel {
    position: relative;
    margin-top: -30px;
    padding: 30px 0 30px 0;
    gap: 2.5em;
    left: 10px;
}

.login-panel span {
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 2px;
    transition: color .4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.login-panel span:hover {
    color: var(--primary-color)
}

.nav-pane .logo {
    position: relative;
    top: 3px;
}

.toggleTheme {
    min-width: 0px !important;
    min-height: 0px;
    margin: 0 20px 0 0;
    padding: 8px 16px !important;  
}
.chat {
    position: relative;
    border: none;
    top: 3px;
    padding: 12px 24px;
}

.toggleTheme:hover,
.toggleTheme:active {
    transform: none;
    box-shadow: none;
    background-color: transparent !important;
}



.theme-icon.active i {
    color: var(--primary-color) !important;
    transform: rotate(360deg);
}

.nav-pane .content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    overflow-y: hidden;
    padding: 10px 40px;
    margin: 6em 0;
}

.preview {
    display: grid !important;

}

.preview-item {
    grid-area: 1/1;
    opacity: 0;
    transform: scale(1.12);
    visibility: hidden;
    transition: .5s cubic-bezier(0.77, 0, 0.175, 1);
}

.preview-item.show {
    opacity: 1;
    transform: scale(1);
    visibility: visible;
}

.content-item {
    width: 100%;
    display: flex;
    gap: 14px;
    justify-content: flex-end;
    align-items: stretch;
    flex-direction: column;
}

.nav-pane .content-item.flex {
    display: none;

}


@keyframes fadeInUpSmooth {
    from {
        transform: translateY(100%);
        border-radius: 100%;
    } to {
        transform: translateY(0px);
        border-radius: 0px;
    }
}
@keyframes fadeOutUpSmooth {
    from {
        transform: translateY(0);
        border-radius: 0px;
    } to {
        transform: translateY(100%);
        border-radius: 100%;
    }
}
@keyframes fadeInDownSmooth {
    from {
        opacity: 0;
        transform: translateY(100%);
    } to {
        opacity: 1;
        transform: translateY(0px);
    }
}

.content h1 {
    font-size: 1.5em;
}

.content h2 {
    font-family: Raleway, sans-serif;
    padding: 20px 0.7em 10px 0.7em;
}

.nav-pane .footer {
    padding: 30px 3em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .2s cubic-bezier(0.075, 0.82, 0.165, 1), transform .5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.navpane-footer-links, .navpane-footer-actions {
    display: flex;
    align-items: center;
    gap: 26px;
}

.navpane-footer-actions i {
    font-size: 1.5rem !important;
}

.nav-pane .footer.fade-in {
    animation: fadeInDownSmooth .5s cubic-bezier(0.075, 0.82, 0.165, 1);
    opacity: 1;
    transform: translateY(0px);
}

.nav-pane .footer-flex {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.footer-actions {
    align-items: center;
    display: inline-flex;
    gap: 20px;
}

.transparent {
    border: none;
    box-shadow: none;
}

.nav-pane .footer .chat-alt {
    display: none;
}

.copyright {
    position: relative;
    left: 20px;
    color: #696969;
}

@media (max-width: 900px) {
    .header-container {
        padding: 20px 0em 20px 0em;
    }
    .header-container.scrolled {
        padding: 16px 0em 16px 0em;
    }
    .video-container .video, .image {
        aspect-ratio: 4 / 3;
        height: 300px;
    }
    
    .video-container, .image-container {
        padding: 10px 0px !important;
    }
    .navigation {
        display: none;
    }
    .settings {
        margin: 0 !important;
        width: 100%;
        padding: 0;
    }
    .panel {
        width: 100%;
    }

    .panel-image {
        margin: 2.5em 0;
    }

    .panel-image div {
        width: 90px;
        height: 70px;
    }

}


@media (max-width: 600px) {
    .content .content-container {
        padding-right: 10px;
    }
    
    .menuButton {
        font-size: 2.5rem;
        opacity: 1;
        transform: translateY(0px);
    }
    
    
    .nav-pane {
        box-shadow: none;
        background-color: var(--surface-color);
    }

    .nav-pane .content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        height: 100vh;
        margin: 0em 24px 0em 24px !important;
        padding: 0;
        overflow: hidden;
    }
    .nav-pane .preview {
        display: none !important;
        visibility: hidden;
    }
    .nav-pane .footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        top: 0;
        opacity: 1;
        transform: none;
        transition: none !important;
        gap: 16px;
        padding: 10px 2em 20px 2em;
    }
    .nav-pane .footer.fade-in {
        animation: none;
        transform: none;
    }
    .nav-pane .chat {
        display: none;
    }
    header:has(.nav-pane:not(.hidden)) :is(.product, .logo) {
        opacity: 0;
        transform: translateY(0px) !important;
    }
    .nav-pane .footer .chat-alt {
        box-sizing: border-box;
        position:relative;
        display: block;
        margin: 0;
        width: 88dvw !important;
        max-width: none !important;
    }
    .nav-pane .content-item {
        justify-content: flex-end;
        gap: 3px;
    }
    .nav-pane .content-item.flex {
        display: none;
        flex-direction: row;
        margin: 20px 0px 10px 20px;
        justify-content: flex-start;
        gap: 30px;
    }

    .overlay {
        background-color: rgba(100, 100, 100, 0.2)
    }

    .side-panel .name {
        flex-direction: column;
        align-items: flex-start;
    }
    
}


/* Footer */
footer {
    background: var(--surface-color);
    font-family: "Open Sans", sans-serif;
    padding: 60px 10px 30px 10px;
    user-select: none;
}

footer a, footer .copyright {
    color: #949494 !important;
    transition: all .7s cubic-bezier(0.075, 0.82, 0.165, 1);
}

footer a:hover {
    color: var(--primary-color) !important
}



.footer-bottom {
    padding: 24px 2em 8px 2em;
    margin: 0 2em 0 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 50px;
}

.footer-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 3em;
    padding: 40px 10px 40px 10px;
}
.additional-links {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 8px 0;
}
.footer-column {
    margin-bottom: 20px;
    width: 400px;
    display: flex;
    justify-content: flex-start;
    text-align: left;
    flex-direction: column;
}
.footer-section-links .footer-column {
    width: 100%;
}
.footer-column.full {
    min-width: 90% !important;
    max-width: 90% !important;
}
.footer-column.two-sided {
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 4em;
}
.footer-column.two-sided div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer-column h1 {
    opacity: 0.7;
    display: inline-block;
    width: inherit;
    margin-bottom: 16px;
    font-size: 28px;
    padding: 2px 0px;
    font-weight: 500;
    font-family: Raleway, sans-serif;
}

.footer-column p {
    font-size: 15px;
    font-family: Raleway, sans-serif;
}

.footer-column img {
    width: 150px;
    height: 80px;
    object-fit: cover;
    position: relative;
    left: -2.5em;
}

.footer-links {
    display: flex;
    justify-content: flex-start;
    text-align: left;
    flex-direction: column;
    gap: 12px
}

.footer-social-media {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.footer-social-icon {
    font-size: 24px;
}

.copyright {
    color: inherit !important;
    font-size: 14px;
    left: 0;
}

.input-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 12px 4px;
}

.input-text #newsletter-email {
    width: 100%;
    padding: 6px 12px;
    color: white;
}

#newsletter-email:focus {
    outline: none;
    border-color: var(--primary-color);
}

.input-text .btn {
    min-width: 60px !important;
    padding: 12px !important;
    font-size: 1.1rem;
}

.footer-top {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 40px;
    border-bottom: 2px solid rgba(100, 100, 100, 0.2);
    margin: 10px 4% 20px 4%;
}

.footer-top .adaptive-logo {
    width: 200px;
    object-fit: cover;
    height: 90px;
}

.footer-top h1 {
    width: 700px;
    display: inline;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    font-size: 4rem;
    padding: 20px 0.7em 10px 0.7em;
    letter-spacing: .8px;
}

.contact-section, .footer-section-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-section {
    width: 31%;
}
.footer-section-links {
    width: 50%;
}

.footer-column p {
    margin: 0 !important;
    line-height: 24px;
    font-family: "Open Sans";
}

.nav-pane:not(.hidden)+.float-container {
    bottom: 45px !important;
}
/* Responsiveness */
@media (max-width: 1080px) {
    .sponsor {
        gap: 2em
    }
    .product {
        display: none;
    }
}

@media (max-width: 900px) {
    .people {
        grid-row: unset;
        padding: 26px 10px 26px 10px;
        width: 100%;
    }
    .people-container {
        padding: 0px 10px 26px 10px;
        grid-template-columns: repeat(1, 1fr);
    }
    .people-container.rtl, .people-container.two-column {
        grid-template-columns: repeat(1, 1fr);
        padding: 0px 10px 26px 10px;
        direction: ltr;
    }
    .logo {
        position: relative;
        left: -3px;
    }
    .people.row-2 {
        grid-column: unset;
    }
    .people.span-2 {
        grid-column: unset;
        grid-row: unset;
        margin-top: 0;
    }
    .people .name {
        width: 100%;
    }
    .people .name h2 {
        font-size: 32px;
    }
    .people .nickname {
        font-size: 24px;
    }
    .people .people-img {
        height: 390px;
        width: 340px;
    }

    .people .people-img img {
        width: 340px;
        height: 390px;
        object-position: center 17%;
    }
    .people .people-bio p {
        padding: 0px 1.3em 40px 1.3em !important;
    }
    .side-panel .people-info {
        margin-top: 10px;
    }
    .people-info.alt .name {
        flex-direction: column;
        align-items: flex-start;
    }
    .side-panel .people-bio {
        margin: 0 0 0 0 !important;
    }
    .side-panel .name h2 {
        font-size: 28px;
    }
    .side-panel .nickname {
        font-size: 15px;
    }
    .people .people-btns {
        padding: 12px 16px 12px 16px;
        left: 0px; right: 0px;
    }
    footer {
        padding: 60px 10px 0px 10px;
    }
    
    .footer-bottom {
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        flex-wrap: wrap;
        text-align: left;
        gap: 1.2em;
        margin: 0;
    }

    .footer-top {
        margin: 0 0 20px 0;
    }
    
    .footer-top h1 {
        position: relative;
        left: -16px;
    }
    .footer-top .adaptive-logo {
        position: relative;
        left: -2em;
    }
    
    .footer-column h1 {
        font-size: 1.5rem;
    }

    .footer-top h1 {
        width: auto;
        font-size: 2.5rem;
        margin: 10px 0;
    }
    .footer-section {
        padding: 50px 10px;
        width: 100%;
        justify-content: flex-start;
    }
    .contact-section, .footer-section-links {
        gap: 2em;
    }
    .contact-section {
        width: 100%;
        order: 1;
    }
    .footer-section-links {
        width: 100%;
    }
    .input-text {
        justify-content: flex-start;
    }
    .navpane-footer-actions {
        gap: 16px;
    }
}

@media (max-width: 768px) {
    @keyframes fadeInUpSmooth {
    from {
        transform: translateY(20px);
        opacity: 0;
        border-radius: 0px;
    } to {
        transform: translateY(0px);
        opacity: 1;
        border-radius: 0px;
    }
    }
    @keyframes windows8Left {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0px);
        opacity: 1;
    }
}
    @keyframes windows8OutLeft {
    from {
        transform: translateY(0px);
        opacity: 1;
        border-radius: 0;
    }

    to {
        transform: translateY(20px);
        opacity: 0;
        border-radius: 0;
    }
}


@keyframes fadeOutUpSmooth {
    from {
        transform: translateY(0);
        opacity: 1;
        border-radius: 0px;
    } to {
        transform: translateY(20px);
        border-radius: 0px;
        opacity: 0;
    }
}
    ::-webkit-scrollbar {
        width: 5px;
    }
    dialog {
        min-width: 100%;
        width: 100%;
        border-radius: 0;
    }
    dialog .dialog-topbar {
        margin: 4% 4px 2em 4px !important;
    }
    .dialog-topbar h1 {
        font-size: 3rem !important;
    }
    dialog .dialog-divider {
        margin: 20px 6px 20px 6px;
    }

    html:has(dialog[open]) {
        overflow: hidden;
    }

    .dialog-header {
        padding: 10px 1.6em !important;
    }

    dialog .content {
        width: 100%;
        padding: 0px 1.6em 2em 1.6em !important;
        
    }

    .section-desc {
        margin: 5px 2.5em 30px 2.5em !important;
    }

    .inline-caption {
        justify-content: center;
        padding: 0px 10px 16px 0px !important;
        flex-direction: column;
        overflow: hidden;
    }

    .inline-caption-item {
        width: fit-content;
    }

    .inline-caption-container {
        margin: 0px 5px;
    }

    .inline-caption-left,
    .inline-caption-right {
        display: none;
    }

    .inline-caption-desc,
    .inline-caption-desc h1 {
        width: 100%;
    }

    .accordion-content {
        padding: 24px 0px;
    }

    .accordion-item {
        padding: 12px 5px 12px 5px;
        line-height: 22px !important;
    }

    .accordion-item-desc {
        font-size: 14px;
        position: relative;
        top: 5px;
        line-height: 17px !important;
    }

    .rating-card {
        padding: 20px 2em;
        width: 84%;
    }

    .carousel-caption {
        font-size: 16px !important;
        top: 60px;
        left: 28px;
        right: 25px;
    }

    .prev-btn,
    .next-btn {
        top: 92%;
        min-width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    .people:hover, .people:focus {
        border-color: transparent;
        background-color: transparent;
    }
    .article .content {
        padding: 1em 2em 3em 2em !important;
        justify-content: flex-start;
    }

    .article .content h1 {
        font-size: 2.5rem;
        text-align: left;
    }

    .article .content p {
        font-size: 16px;
        text-align: left;
    }

    
    .timeline {
        padding: 20px 0px;
    }
    
    .timeline-item-content, .timeline-item-header {
        width: 100%;
        max-width: 100%;
        padding: 20px 0.2em;
    }
    
    .timeline-item-content h1 {
        font-size: 16px;
        font-weight: 400;
    }
    
    .timeline-item {
        flex-wrap: wrap;
        gap: 1.5em;
        padding: 20px 0.2em;
    }
    
    .section-header.stylish {
        
        flex-direction: row;
        justify-content: flex-start;
        gap: 0;
        width: auto;
        margin: 0px 14px 0px 14px !important;
        
    }
    .section-header.stylish .section-title {
        width: auto;
        border-bottom: none;
        font-weight: 400;
        margin: 0 4px !important;
    }
    .section-header.stylish :first-child {
        padding-bottom: 0;
    }
    .section-header.stylish .section-title.right-align {
        text-align: left;
    }

    .section-header.large .section-title {
        font-size: 4.5rem;
        margin: 0px 16px 20px 16px;
    }
    .section-header.medium .section-title {
        font-size: 2rem;
        margin: 0px 10px 20px 10px;
    }
    .section-header.inline {
        flex-direction: column;
        justify-content: center;
    }
    .section-header.large {
        margin: 30dvh 10px 20px 10px;
    }

    .side-panel {
        inset: 0;
        width: 100%;
    }
    .side-panel .people-info {
        flex-direction: column;
    }
    .side-panel .people-img {
        width: 100%
    }
    .side-panel .people-img img {
        width: 100%;
        height: 470px;
        aspect-ratio: 3/4;
    }

    .statistics {
        margin: 4em 2em 1em 2em;
    }
}

@media (max-width: 570px) {
    .people {
        width: 100%;
    }
    
    .people .people-img {
        height: 470px;
        width: 100%;
    }
    
    .people .name h2 {
        min-width: none !important;
        width: 360px;
        font-size: 20px;
    }
    
    .people .nickname {
        width: 140px;
        text-align: right;
    }

    .people .people-img img {
        width: 100%;
        height: 470px;
        object-position: center 17%;
    }
}