/* FONTFACE */
@font-face {
    font-family: "urbanist-regular";
    src: url("../font/Urbanist-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "urbanist-medium";
    src: url("../font/Urbanist-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "urbanist-semibold";
    src: url("../font/Urbanist-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "urbanist-bold";
    src: url("../font/Urbanist-Bold.ttf") format("truetype");
}
/* END FONTFACE */

/* ROOT VARIABLE */
:root {
    --primary-color: 55, 128, 212;
    --secondary-color: 87, 196, 217;
    --dark-color: 21, 22, 24;
    --dark-secondary-color: 28, 29, 31;
    --dark-third-color: 35, 36, 38;
    --light-color: 255, 255, 255;
    --info-color: 25, 178, 185;
    --warning-color: 246, 196, 106;
    --danger-color: 213, 80, 81;
    --urbanist-regular: "urbanist-regular", Arial, Helvetica, sans-serif;
    --urbanist-medium: "urbanist-medium", Arial, Helvetica, sans-serif;
    --urbanist-semibold: "urbanist-semibold", Arial, Helvetica, sans-serif;
    --urbanist-bold: "urbanist-bold", Arial, Helvetica, sans-serif;
    --border-style: 1px solid rgba(255, 255, 255, 0.12);
    --transition-duration: 250ms;
}
/* END ROOT VARIABLE */

/* BASE */
* {
    font-family: var(--urbanist-medium);
    color: rgba(var(--light-color), 1);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
    line-height: 150%;
}

a {
    color: rgba(var(--light-color), 1);
    text-decoration: none;
    display: inline-block;
    width: fit-content;
    line-height: 150%;
}

html {
    scroll-behavior: smooth;
}

html,
body {
    overflow-x: hidden !important;
}

html::-webkit-scrollbar {
    width: 4px;
}

html::-webkit-scrollbar-track {
    border-radius: 9999px;
}

html::-webkit-scrollbar-thumb {
    background: rgba(var(--light-color), 0.12);
    border-radius: 9999px;
}

body {
    background-color: rgba(var(--dark-color));
    overflow-x: hidden;
}
/* END BASE */

/* BASE TEMPLATE */
.form .input-group {
    width: 100%;
}

.form .input-group img,
.image-portfolio,
.image-gallery {
    border-radius: 6px !important;
    border: var(--border-style);
}

.form .input-group img.search-icon {
    border-radius: 0 !important;
    border: none;
    opacity: 0.32;
    position: absolute;
    top: 50%;
    left: 17px;
    transform: translateY(-50%);
}

.wrapper-image img.active {
    padding: 6px;
}

.form .input-group .input-hide {
    position: absolute;
    top: -500%;
    left: -500%;
}

.form .input-group label {
    font-size: 0.875rem;
    color: rgba(var(--light-color), 1);
    margin-bottom: 8px;
}

.form .input-group #content-editor,
.form .input-group #description-editor {
    border-radius: 4px !important;
    background-color: rgba(var(--dark-color), 1);
    color: rgba(var(--light-color), 0.52) !important;
    border-color: rgba(var(--light-color), 0.12) !important;
    overflow: hidden;
}

.form .input-group #content-editor > *,
.form .input-group #description-editor > * {
    color: rgba(var(--light-color), 0.52) !important;
    border-color: rgba(var(--light-color), 0.12) !important;
    background-color: rgba(var(--dark-color), 1);
}

.ql-toolbar.ql-snow {
    width: 100% !important;
    border-color: rgba(var(--light-color), 0.12) !important;
}

.ql-container.ql-snow {
    width: 100% !important;
}

.ql-snow .ql-picker-options {
    background-color: rgba(var(--dark-color), 1) !important;
    border-color: rgba(var(--light-color), 0.12) !important;
}

.ql-editor.ql-blank > * {
    color: rgba(var(--light-color), 0.52) !important;
}

.form .input-group #content-editor body > *,
.form .input-group #description-editor body > * {
    color: rgba(var(--light-color), 0.52) !important;
}

.form .input {
    color: rgba(var(--light-color), 0.52);
    padding: 16px;
    background-color: rgba(var(--dark-color), 1);
    border-radius: 4px !important;
    outline: none;
    border: 1px solid transparent;
    font-size: 0.875rem;
    transition: var(--transition-duration);
}

.form .input.input-search {
    padding-left: 40px;
}

.form .input.input-invalid,
.form .input.input-invalid:focus,
.form .input.input-invalid:not(:placeholder-shown) {
    border: var(--border-style);
    border-color: rgba(var(--danger-color), 1);
}

.form .text-invalid {
    color: rgba(var(--danger-color), 1);
    font-size: 0.875rem;
    margin-top: 4px;
}

.form .input.input-shake {
    animation: shake 820ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    transform: translate3d(0, 0, 0);
}

@keyframes shake {
    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.form .input:focus,
.form .input:not(:placeholder-shown) {
    border: 1px solid rgba(var(--light-color), 0.12);
}

.form .input::placeholder {
    color: rgba(var(--light-color), 0.32);
    font-size: 0.875rem;
}

.button-primary,
.button-primary-small,
.button-small,
.button-reverse {
    padding: 16px 18px;
    background-color: rgba(var(--primary-color));
    border-radius: 4px;
    color: rgba(var(--light-color), 1);
    font-size: 0.875rem;
    outline: none;
    border: none;
    transition: var(--transition-duration);
    text-wrap: nowrap;
    color: rgba(var(--light-color), 1) !important;
    cursor: pointer;
}

.button-primary-small {
    padding: 12px 16px;
}

.homepage .button-reverse {
    background-color: rgba(var(--dark-color), 1);
    border: var(--border-style);
}

.button-primary-small:hover,
.button-primary:hover {
    opacity: 0.8 !important;
    transition: var(--transition-duration);
}

.button-reverse {
    background-color: rgba(var(--dark-third-color));
    border: var(--border-style);
    border-color: transparent;
}

.button-reverse:hover {
    border: var(--border-style);
    transition: var(--transition-duration);
}

.homepage .button-reverse:hover {
    background-color: rgba(var(--light-color), 0.02);
}

.scroll-button {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 6px;
}

.scroll-button::-webkit-scrollbar {
    height: 4px;
}

.scroll-button::-webkit-scrollbar-track {
    border-radius: 9999px;
}

.scroll-button::-webkit-scrollbar-thumb {
    background: rgba(var(--light-color), 0.12);
    border-radius: 9999px;
}

.scroll-button .category-group {
    width: fit-content;
}

.button-small {
    padding: 12px 16px;
    background-color: rgba(var(--dark-color), 1);
    border: var(--border-style);
    border-radius: 4px;
    font-size: 0.875rem;
    color: rgba(var(--light-color), 1);
    transition: var(--transition-duration);
}

.button-small.active,
.button-small:hover {
    background-color: rgba(var(--light-color), 0.02);
    transition: var(--transition-duration);
}

.button-file {
    padding: 12px;
    border-radius: 3px;
    background-color: rgba(var(--dark-third-color), 1);
    outline: none;
    stroke: none;
    font-size: 0.813rem;
    width: fit-content;
    border: var(--border-style);
    border-color: transparent;
    transition: var(--transition-duration);
    cursor: pointer;
}

.button-file:hover {
    transition: var(--transition-duration);
    border: var(--border-style);
}

.button-plus,
.button-minus {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background-color: rgba(var(--dark-third-color), 1);
    border: var(--border-style);
    border-color: transparent;
    position: relative;
    transition: var(--transition-duration);
}

.button-plus:hover,
.button-minus:hover {
    transition: var(--transition-duration);
    border: var(--border-style);
}

.line {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: rgba(var(--light-color), 0.12);
}

.not-found {
    color: rgba(var(--light-color), 0.52);
    font-size: 0.875rem;
    margin: auto;
    padding: 42px 0;
}

.child-button {
    top: 60px;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(var(--dark-third-color));
    border-radius: 4px;
    border: var(--border-style);
    padding: 8px;
    gap: 6px;
    opacity: 0;
    z-index: -9999;
}

.button-reverse.active .child-button {
    opacity: 1;
    z-index: 10 !important;
}

.child-button button {
    background-color: transparent;
    border: none;
    font-size: 0.875rem;
    color: rgba(var(--light-color), 0.52);
    width: 100%;
    text-align: start !important;
    transition: var(--transition-duration);
    overflow: hidden;
}

.child-button button.active,
.child-button button:hover {
    color: rgba(var(--light-color), 1);
    transition: var(--transition-duration);
}

.button-card {
    padding: 10px 16px !important;
    background-color: rgba(var(--dark-color), 1);
    border-radius: 4px;
    border: var(--border-style);
    border-color: transparent;
    transition: var(--transition-duration);
    font-size: 0.813rem;
}

.button-card:hover {
    transition: var(--transition-duration);
    border: var(--border-style);
}

.wrapper-table {
    overflow-x: auto;
}

.wrapper-table::-webkit-scrollbar {
    height: 4px;
}

.wrapper-table::-webkit-scrollbar-track {
    border-radius: 9999px;
}

.wrapper-table::-webkit-scrollbar-thumb {
    background: rgba(var(--light-color), 0.12);
    border-radius: 9999px;
}

.wrapper-action {
    padding: 6px;
    background-color: rgba(var(--dark-color), 1);
    border-radius: 4px;
    border: var(--border-style);
}

table {
    overflow: hidden;
    border-radius: 6px;
}

table.table-paginate {
    margin-bottom: 16px;
}

.page-item .page-link {
    border: var(--border-style) !important;
    color: rgba(var(--light-color), 0.52) !important;
    background-color: rgba(var(--dark-secondary-color), 1) !important;
    transition: var(--transition-duration);
}

.page-item .page-link:hover {
    transition: var(--transition-duration);
    background-color: rgba(var(--dark-third-color), 1) !important;
}

.page-item.active .page-link:hover,
.page-item.active .page-link {
    color: rgba(var(--light-color), 1) !important;
    background-color: rgba(var(--dark-third-color), 1) !important;
}

table th {
    background-color: rgba(var(--dark-third-color)) !important;
    border-bottom: none;
    padding: 16px !important;
    font-size: 0.913rem !important;
    font-weight: normal;
    font-family: var(--urbanist-medium);
    text-wrap: nowrap;
}

table td {
    background-color: rgba(var(--dark-color)) !important;
    border-bottom: none;
    padding: 16px !important;
    font-weight: normal;
    font-family: var(--urbanist-medium);
    font-size: 0.913rem !important;
    color: rgba(var(--light-color), 0.52) !important;
    text-wrap: nowrap;
}

table td > * {
    font-size: 0.913rem !important;
    color: rgba(var(--light-color), 0.52) !important;
}

table td .wrapper-icon,
.wrapper-action .wrapper-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    border: 1px solid transparent;
}

.wrapper-action .wrapper-icon {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: 1px solid transparent;
}

table td .wrapper-icon.icon-check,
.wrapper-action .wrapper-icon.icon-check {
    background-color: rgba(var(--secondary-color), 0.08);
    transition: var(--transition-duration);
}

table td .wrapper-icon.icon-check:hover,
.wrapper-action .wrapper-icon.icon-check:hover {
    transition: var(--transition-duration);
    border: 1px solid rgba(var(--secondary-color), 0.12);
}

table td .wrapper-icon.icon-reverse {
    background-color: rgba(var(--light-color), 0.04);
    transition: var(--transition-duration);
}

table td .wrapper-icon.icon-reverse:hover {
    transition: var(--transition-duration);
    border: 1px solid rgba(var(--light-color), 0.08);
}

table td .wrapper-icon.icon-info {
    background-color: rgba(var(--info-color), 0.08);
    transition: var(--transition-duration);
}

table td .wrapper-icon.icon-info:hover {
    transition: var(--transition-duration);
    border: 1px solid rgba(var(--info-color), 0.12);
}

table td .wrapper-icon.icon-detail {
    background-color: rgba(var(--primary-color), 0.08);
    transition: var(--transition-duration);
}

table td .wrapper-icon.icon-detail:hover {
    transition: var(--transition-duration);
    border: 1px solid rgba(var(--primary-color), 0.12);
}

table td .wrapper-icon.icon-edit {
    background-color: rgba(var(--warning-color), 0.08);
    transition: var(--transition-duration);
}

table td .wrapper-icon.icon-edit:hover {
    transition: var(--transition-duration);
    border: 1px solid rgba(var(--warning-color), 0.12);
}

table td .wrapper-icon.icon-delete,
.wrapper-action .icon-delete {
    background-color: rgba(var(--danger-color), 0.08);
    transition: var(--transition-duration);
}

table td .wrapper-icon.icon-delete:hover,
.wrapper-action .icon-delete:hover {
    transition: var(--transition-duration);
    border: 1px solid rgba(var(--danger-color), 0.12);
}

.no-clamp {
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    display: block !important;
    -webkit-box-orient: unset !important;
}
/* END BASE TEMPLATE */

/* LOGIN */
body.login {
    height: 100vh !important;
    overflow: hidden !important;
}

.login .card-login {
    padding: 42px;
    background-color: rgba(var(--dark-secondary-color));
    border-radius: 10px;
    border: var(--border-style);
}

.login .card-login .title {
    font-size: 2rem;
    font-family: var(--urbanist-semibold);
    margin-bottom: 24px;
    color: rgba(var(--light-color), 1);
}

.login .card-login .button-primary {
    width: 100%;
    margin-top: 6px;
}

.login .wave-dark {
    position: absolute;
    bottom: -20px;
    animation: waveDarkMove 30s infinite alternate-reverse linear;
}

.login .wave-light {
    position: absolute;
    animation: waveLightMove 30s infinite alternate-reverse linear;
}

@keyframes waveDarkMove {
    0% {
        bottom: -60px;
        right: 0;
    }
    25% {
        bottom: -60px;
        right: -15%;
    }
    50% {
        bottom: -60px;
        right: -30%;
    }
    75% {
        bottom: -60px;
        right: -45%;
    }
    100% {
        bottom: -60px;
        right: -60%;
    }
}

@keyframes waveLightMove {
    0% {
        bottom: -60px;
        left: 0;
    }
    25% {
        bottom: -60px;
        left: -15%;
    }
    50% {
        bottom: -60px;
        left: -30%;
    }
    75% {
        bottom: -60px;
        left: -45%;
    }
    100% {
        bottom: -60px;
        left: -60%;
    }
}
/* END LOGIN */

/* HAMBURGER */
.hamburger {
    width: 56px;
    height: 56px;
    background-color: rgba(var(--dark-secondary-color));
    border-radius: 9999px;
    border: var(--border-style);
    border-color: transparent;
    transition: var(--transition-duration);
}

.hamburger:hover {
    transition: var(--transition-duration);
    border: var(--border-style);
}
/* END HAMBURGER */

/* SIDEBAR */
.sidebar {
    width: 260px;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: rgba(var(--dark-secondary-color));
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    border: var(--border-style);
    padding: 42px 28px;
}

.sidebar .sidebar-menu {
    margin-top: 32px;
    padding-top: 32px;
    border-top: var(--border-style);
    width: 100%;
    gap: 6px;
    overflow-y: auto;
}

.sidebar .sidebar-menu::-webkit-scrollbar {
    width: 4px;
}

.sidebar .sidebar-menu::-webkit-scrollbar-track {
    border-radius: 9999px;
}

.sidebar .sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(var(--light-color), 0.12);
    border-radius: 9999px;
}

.sidebar .sidebar-menu .menu-link {
    width: 100%;
    background-color: rgba(var(--dark-color));
    padding: 15px;
    border-radius: 4px;
    gap: 10px;
    font-size: 0.913rem;
    color: rgba(var(--light-color), 0.52);
    transition: var(--transition-duration);
    border: none;
}

.sidebar .sidebar-menu .menu-link .wrapper {
    gap: 10px;
    font-size: 0.913rem;
    color: rgba(var(--light-color), 0.52);
    transition: var(--transition-duration);
}

.sidebar .sidebar-menu .menu-link.active,
.sidebar .sidebar-menu .menu-link.active .wrapper,
.sidebar .sidebar-menu .menu-link:hover,
.sidebar .sidebar-menu .menu-link:hover .wrapper {
    color: rgba(var(--light-color), 1);
    transition: var(--transition-duration);
    background-color: rgba(var(--dark-third-color));
}

.sidebar .sidebar-menu .menu-link.active img,
.sidebar .sidebar-menu .menu-link:hover img {
    opacity: 1;
    transition: var(--transition-duration);
}

.sidebar .sidebar-menu .menu-link img {
    opacity: 0.52;
    transition: var(--transition-duration);
}

.sidebar .sidebar-menu .menu-link .child-menu {
    margin-left: 8px;
    padding-left: 18px;
    border-left: var(--border-style);
    gap: 8px;
    height: min-content;
    max-height: 140px;
    overflow-y: auto;
    width: 100%;
    display: none !important;
}

.sidebar .sidebar-menu .menu-link.active .child-menu {
    display: flex !important;
}

.sidebar .sidebar-menu .menu-link .child-menu::-webkit-scrollbar {
    width: 4px;
}

.sidebar .sidebar-menu .menu-link .child-menu::-webkit-scrollbar-track {
    border-radius: 9999px;
}

.sidebar .sidebar-menu .menu-link .child-menu::-webkit-scrollbar-thumb {
    background: rgba(var(--light-color), 0.12);
    border-radius: 9999px;
}

.sidebar .sidebar-menu .menu-link .child-menu a {
    font-size: 0.813rem;
    color: rgba(var(--light-color), 0.52);
    transition: var(--transition-duration);
    width: 100%;
    text-align: start;
}

.sidebar .sidebar-menu .menu-link .child-menu a.active,
.sidebar .sidebar-menu .menu-link .child-menu a:hover {
    color: rgba(var(--light-color), 1);
    transition: var(--transition-duration);
}
/* END SIDEBAR */

/* DASHBOARD */
main.dashboard {
    margin-left: 260px;
    padding: 24px 42px 42px 42px;
}

main.dashboard .header-profile {
    position: relative;
    border-left: var(--border-style);
    padding-left: 24px;
}

main.dashboard .profile-content {
    cursor: pointer;
    position: relative;
}

main.dashboard .title {
    font-size: 2rem;
    font-family: var(--urbanist-semibold);
}

main.dashboard .subtitle {
    font-size: 1.375rem;
    font-family: var(--urbanist-medium);
}

main.dashboard .profile-role {
    font-size: 0.813rem;
    color: rgba(var(--light-color), 0.52);
}

main.dashboard .button-profile {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background-color: rgba(var(--dark-secondary-color), 1);
    border: var(--border-style);
    border-color: transparent;
    transition: var(--transition-duration);
    margin-left: 12px;
}

main.dashboard .header-profile:hover .button-profile {
    transition: var(--transition-duration);
    border: var(--border-style);
}

main.dashboard .wrapper-profile-menu {
    position: absolute;
    right: 0;
    top: 60px;
    width: 100%;
    padding-left: 24px;
    overflow: hidden;
    z-index: -9999 !important;
}

main.dashboard .wrapper-profile-menu.active {
    z-index: 10 !important;
}

main.dashboard .profile-menu {
    background-color: rgba(var(--dark-secondary-color), 1);
    border-radius: 6px;
    border: var(--border-style);
    padding: 16px;
    width: 100%;
    transform: translateY(-100px);
    transition: 600ms !important;
    opacity: 0;
}

main.dashboard .wrapper-profile-menu.active .profile-menu {
    transform: translateY(0);
    transition: 600ms !important;
    opacity: 1;
}

main.dashboard .profile-menu button.menu-link {
    all: unset;
    gap: 8px !important;
    width: 100% !important;
    border-bottom: none !important;
    padding: 0 !important;
    cursor: pointer !important;
}

main.dashboard .profile-menu .menu-link {
    gap: 8px;
    width: 100%;
}

main.dashboard .profile-menu .menu-link:first-child {
    padding-bottom: 10px;
}

main.dashboard .profile-menu .menu-link:nth-child(2) {
    padding-bottom: 10px;
    border-bottom: var(--border-style);
}

main.dashboard .profile-menu .menu-link:last-child {
    margin-top: 8px;
}

main.dashboard .profile-menu .menu-link span {
    font-size: 0.875rem;
    color: rgba(var(--light-color), 0.52);
    transition: var(--transition-duration);
    width: 100% !important;
}

main.dashboard .profile-menu .menu-link:hover span {
    color: rgba(var(--light-color), 1);
    transition: var(--transition-duration);
}

main.dashboard .profile-menu .menu-link img {
    transition: var(--transition-duration);
    opacity: 0.52;
}

main.dashboard .profile-menu .menu-link:hover img {
    opacity: 1;
    transition: var(--transition-duration);
}

main.dashboard .profile-menu .menu-link:hover img:last-child {
    transform: translateX(4px);
    transition: var(--transition-duration);
}

main.dashboard .dashboard-content {
    margin-top: 42px;
}

main.dashboard .card-dashboard-menu {
    padding: 20px;
    background-color: rgba(var(--dark-secondary-color), 1);
    border-radius: 6px;
    border: var(--border-style);
}

main.dashboard .card-dashboard-menu .wrapper-icon {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background-color: rgba(var(--primary-color));
}

main.dashboard .card-dashboard-menu .wrapper-icon.reverse {
    background-color: rgba(var(--secondary-color)) !important;
}

main.dashboard .card-dashboard-menu .menu-title {
    font-size: 0.875rem;
    color: rgba(var(--light-color), 0.52);
    margin-bottom: 2px;
}

main.dashboard .card-dashboard-menu .menu-value {
    font-size: 1.5rem;
    font-family: var(--urbanist-semibold);
}

canvas {
    position: relative;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    transition: 0 !important;
    opacity: 1;
    z-index: 5 !important;
}

canvas.canvas-bar {
    height: 260px;
}

canvas.hide {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -9999;
    opacity: 0;
}

main.dashboard .card-default {
    background-color: rgba(var(--dark-secondary-color), 1);
    border: var(--border-style);
    border-radius: 6px;
    padding: 18px 28px !important;
}

main.dashboard .card-default .chart-title {
    font-size: 1.25rem;
    font-family: var(--urbanist-medium);
}

main.dashboard .checkbox-cart ~ label.active {
    background-color: rgba(var(--dark-color), 0.03);
}

main.dashboard .wrapper-action {
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: -9999 !important;
    opacity: 0;
}

main.dashboard .image-gallery ~ .wrapper-action {
    top: -5px;
    right: -5px;
}

main.dashboard .image-portfolio:hover ~ .wrapper-action,
main.gallery .image-portfolio:hover ~ .wrapper-action,
main.dashboard .image-gallery:hover ~ .wrapper-action,
main.gallery .image-gallery:hover ~ .wrapper-action,
main.dashboard .wrapper-action:hover {
    opacity: 1;
    z-index: 10 !important;
}
/* END DASHBOARD */

/* MODAL */
.modal .modal-content {
    padding: 42px;
    border-radius: 10px;
    border: var(--border-style);
    background-color: rgba(var(--dark-secondary-color), 1);
}

.modal .modal-content .modal-header {
    border: none;
    padding: 0;
}

.modal .modal-content .modal-header .title {
    font-size: 1.75rem;
    font-family: var(--urbanist-semibold);
    margin-bottom: 0 !important;
}

.modal .modal-content .modal-header button {
    background-color: transparent;
    border: none;
    opacity: 0.52;
    transition: var(--transition-duration);
}

.modal .modal-content .modal-header button:hover {
    opacity: 1;
    transition: var(--transition-duration);
}

.modal .modal-content .modal-body {
    padding: 0;
    margin-bottom: 28px;
    margin-top: 16px;
}

.modal .modal-content .modal-body .caption {
    font-size: 0.913rem;
    color: rgba(var(--light-color), 0.52);
    line-height: 150%;
}

.modal .modal-content .modal-portfolio {
    padding-top: 26px;
}
/* END MODAL */

/* ALERT */
.alert-success {
    background-color: rgba(var(--secondary-color), 0.12);
    border: 1px solid rgba(var(--secondary-color), 0.24);
    border-radius: 4px;
    color: rgba(var(--secondary-color), 1);
    font-size: 0.913rem;
}

.alert-danger {
    background-color: rgba(var(--danger-color), 0.12);
    border: 1px solid rgba(var(--danger-color), 0.24);
    border-radius: 4px;
    color: rgba(var(--danger-color), 1);
    font-size: 0.913rem;
}
/* END ALERT */

/* NAVBAR */
.navbar {
    background-color: rgba(var(--dark-color), 1);
    border-bottom: var(--border-style);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 86px;
    z-index: 11;
}

.navbar .navbar-wrapper {
    gap: 28px;
}

.navbar .navbar-wrapper .navbar-menu {
    gap: 26px;
}

.navbar .navbar-wrapper .navbar-menu a {
    font-size: 0.913rem;
    color: rgba(var(--light-color), 0.52);
    transition: var(--transition-duration);
}

.navbar .navbar-wrapper .navbar-menu a.active,
.navbar .navbar-wrapper .navbar-menu a:hover {
    color: rgba(var(--light-color), 1);
    transition: var(--transition-duration);
}

.navbar .navbar-button .button-navbar,
.navbar .navbar-button .button-navbar-reverse {
    padding: 12px 16px;
    border-radius: 4px;
    background-color: rgba(var(--light-color), 1);
    color: rgba(var(--dark-color), 1);
    font-size: 0.875rem;
    gap: 10px;
    font-family: var(--urbanist-medium) !important;
    border: var(--border-style);
    border-color: transparent;
    transition: var(--transition-duration);
}

.navbar .navbar-button .button-navbar-reverse {
    background-color: rgba(var(--dark-color), 1);
    border: var(--border-style);
    color: rgba(var(--light-color), 1);
}

.navbar .navbar-button .button-navbar-reverse:hover {
    background-color: rgba(var(--light-color), 0.02);
    transition: var(--transition-duration);
}

.navbar .navbar-button .button-navbar:hover {
    background-color: rgba(var(--dark-color), 1);
    border: var(--border-style);
    color: rgba(var(--light-color), 1);
    transition: var(--transition-duration);
}

.navbar .navbar-button .button-navbar:hover svg path {
    fill: rgba(var(--light-color));
    transition: var(--transition-duration);
}

.wrapper-hamburger {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    height: 86px;
}

.wrapper-hamburger .hamburger {
    border: var(--border-style);
}

.background-sidebar {
    width: 1000px;
    height: 1000px;
    background-color: rgba(var(--dark-color), 1);
    border-radius: 9999px;
    border: var(--border-style) !important;
    position: fixed;
    top: -1000px;
    right: -1000px;
    transform: translateX(0);
    transition: 1000ms !important;
    z-index: 25;
}

.background-sidebar.show {
    top: 0;
    right: 50%;
    transform: translateX(50%);
    transition: 800ms;
    border-radius: 0;
}

.background-sidebar.show .wrapper {
    animation: opacityText var(--transition-duration) 600ms forwards;
}

.background-sidebar .wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    height: 100vh;
    gap: 20px;
    opacity: 0;
}

.background-sidebar .wrapper.hide {
    animation: opacityTextReverse var(--transition-duration) forwards;
}

@keyframes opacityText {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes opacityTextReverse {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.background-sidebar .wrapper a {
    font-size: 2rem;
    font-family: var(--urbanist-medium);
    color: rgba(var(--light-color), 0.52);
    position: relative;
    transition: var(--transition-duration);
}

.background-sidebar .wrapper a::before {
    transition: var(--transition-duration);
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1.6px;
    background-color: rgba(var(--light-color), 1);
}

.background-sidebar .wrapper a.active::before,
.background-sidebar .wrapper a:hover::before {
    width: 100%;
    transition: var(--transition-duration);
}

.background-sidebar .wrapper a:hover,
.background-sidebar .wrapper a.active {
    color: rgba(var(--light-color), 1);
    transition: var(--transition-duration);
}
/* END NAVBAR */

/* HOMEPAGE */
.circle-light {
    position: absolute;
    top: -320px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 200px;
    height: 200px;
    border-radius: 9999px;
    filter: blur(200px);
    background-color: rgba(var(--light-color), 1);
    z-index: 15;
}

.card-not-found {
    padding: 82px 0;
}

.caption-search,
.result-search {
    font-size: 0.875rem;
    color: rgba(var(--light-color), 0.52);
}

.homepage {
    padding-top: 86px;
}

.homepage .section-gap {
    margin-top: 122px;
}

.homepage .section-additional-gap {
    padding-bottom: 42px;
}

.homepage .section-half-gap {
    margin-top: 82px;
}

.homepage .content-gap {
    margin-top: 56px;
}

.homepage .detail-portfolio .content-gap,
.homepage .page-blog .content-gap,
.homepage .page-tutorial .content-gap {
    margin-top: 42px;
}

.homepage .gap-default {
    gap: 16px !important;
}

.homepage .background-reverse {
    background-color: rgba(var(--light-color), 0.02);
    padding: 82px 0;
}

.homepage .headline {
    font-size: 4rem;
    font-family: var(--urbanist-bold);
    line-height: 100%;
    margin-bottom: 24px;
}

.homepage .title {
    font-size: 2.913rem;
    font-family: var(--urbanist-semibold);
    line-height: 110%;
    margin-bottom: 20px;
}

.homepage .page-portfolio .title,
.homepage .page-blog .title,
.homepage .page-tutorial .title {
    font-size: 2.25rem;
    font-family: var(--urbanist-semibold);
    line-height: 110%;
    margin-bottom: 20px;
    color: rgba(var(--light-color), 1);
}

.homepage .description {
    font-size: 0.913rem;
    color: rgba(var(--light-color), 0.52);
    line-height: 150%;
}

.homepage .card-content-2,
.homepage .card-content-3 {
    padding: 24px;
    border-radius: 6px;
    border: var(--border-style);
}

.homepage .card-content-2 {
    padding: 16px;
}

.homepage .card-content-2 .title,
.homepage .card-content-3 .title {
    font-size: 1.125rem;
    margin-bottom: 6px;
    font-family: var(--urbanist-medium);
}

.homepage .card-content-2 .title {
    font-size: 1rem;
    margin-bottom: 0;
}

.homepage .card-content-2 .wrapper {
    gap: 12px;
}

.homepage .card-content-2 .wrapper img {
    border-radius: 4px;
}

.homepage .card-content-2 .description,
.homepage .card-content-3 .description {
    font-size: 0.875rem;
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.homepage .card-content-2 .description {
    -webkit-line-clamp: 2;
}
/* END HOMEPAGE */

/* HOMEPAGE SECTION HERO */
.homepage .hero {
    padding: 82px 0;
}

.homepage .hero .description {
    margin-bottom: 36px;
    width: 80%;
}

.homepage .hero .line-horizontal,
.homepage .about .line-horizontal {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(21, 22, 24, 1) 0%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(21, 22, 24, 1) 100%
    );
}

.modal .line-horizontal {
    position: absolute;
    top: 0 !important;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(21, 22, 24, 1) 0%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(21, 22, 24, 1) 100%
    );
}

.homepage .hero .line-light {
    position: absolute;
    bottom: -5px;
}

.homepage .hero .line-light:first-child {
    left: 0;
}

.homepage .hero .line-light:last-child {
    right: 0;
}

.homepage .hero .input {
    border: var(--border-style);
}

.homepage .hero .category-group,
.homepage .hero .row-value {
    margin-top: 24px;
}

.homepage .hero .value {
    margin: 0 0 6px 0;
    font-family: var(--urbanist-bold);
}

.homepage .hero .wrapper .description {
    margin: 0;
    width: 100%;
}
/* END HOMEPAGE SECTION HERO */

/* HOMEPAGE SECTION SERVICE */
.homepage .service-half,
.homepage .value {
    margin-top: 62px;
}

.homepage .service .card-content-3 {
    gap: 20px;
}

.homepage .service .card-content-3 .number {
    font-family: var(--urbanist-bold);
}

.homepage .service .card-content-3 .result {
    font-size: 0.875rem;
    color: rgba(var(--light-color), 0.52);
}

.homepage .service .card-content-3 .title {
    -webkit-line-clamp: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.homepage .service .card-content-3 .link {
    font-size: 0.875rem;
    color: rgba(var(--primary-color));
    gap: 8px;
    background-color: transparent;
    border: none;
}

.homepage .service .card-content-3 .link img {
    transition: var(--transition-duration);
}

.homepage .service .card-content-3 .link:hover img {
    transform: translateX(4px);
    transition: var(--transition-duration);
}
/* END HOMEPAGE SECTION SERVICE */

/* HOMEPAGE SECTION ABOUT */
.homepage .about h3.title {
    margin: 0;
    margin-bottom: 2px;
}

.homepage .about .wrapper .description {
    margin: 0;
}

.homepage .about .description {
    margin-bottom: 26px;
}

.homepage .about .button-group {
    padding-bottom: 42px;
    margin-bottom: 32px;
}

.homepage .about .value {
    color: rgba(var(--primary-color));
    margin-bottom: 6px;
    font-family: var(--urbanist-bold);
}

.homepage .adventage .wrapper-image,
.homepage .about .wrapper-image {
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #313234;
    clip-path: polygon(
        14% 0,
        80% 0%,
        100% 0,
        100% 86%,
        86% 100%,
        20% 100%,
        0 100%,
        0 14%
    );
}

.homepage .adventage .wrapper-image > img,
.homepage .about .wrapper-image > img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.homepage .gallery .wrapper-image .background-dark,
.homepage .adventage .wrapper-image .background-dark,
.homepage .about .wrapper-image .background-dark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--dark-color), 0.52);
    transition: var(--transition-duration);
}

.homepage .gallery .wrapper-image:hover .background-dark,
.homepage .adventage .wrapper-image:hover .background-dark,
.homepage .about .wrapper-image:hover .background-dark {
    background-color: rgba(var(--dark-color), 0.42);
    transition: var(--transition-duration);
}

.homepage .adventage .wrapper-image .button-banner,
.homepage .about .wrapper-image .button-banner {
    position: absolute;
    bottom: 20px;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 4px;
    background-color: rgba(var(--light-color), 0.06);
    border: var(--border-style);
    border-color: rgba(var(--light-color), 0.12);
    font-size: 0.875rem;
    color: rgba(var(--light-color));
    backdrop-filter: blur(4px);
}

.homepage .about .wrapper-image .button-banner {
    left: 20px;
}

.homepage .adventage .wrapper-image .button-banner img,
.homepage .about .wrapper-image .button-banner img {
    transition: var(--transition-duration);
}

.homepage .adventage .wrapper-image .button-banner:hover img,
.homepage .about .wrapper-image .button-banner:hover img {
    transform: translateX(4px);
    transition: var(--transition-duration);
}
/* END HOMEPAGE SECTION ABOUT */

/* HOMEPAGE SECTION ADVENTAGE */
.homepage .adventage .col-lg-6 > .description {
    margin-bottom: 32px;
}

.homepage .adventage .wrapper-image {
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #313234;
    clip-path: polygon(
        0 0,
        86% 0,
        100% 14%,
        100% 100%,
        80% 100%,
        14% 99%,
        0 86%,
        0% 20%
    );
}

.homepage .adventage .wrapper-image .button-banner {
    bottom: 20px;
    right: 20px;
}

.homepage .adventage .wrapper-icon {
    width: 22px;
    height: 22px;
    background-color: rgba(var(--primary-color), 1);
    border-radius: 3px;
}
/* END HOMEPAGE SECTION ADVENTAGE */

/* HOMEPAGE SECTION GALLERY */
.homepage .gallery .title,
.homepage .testimonial h2.title,
.homepage .section-tutorial h2.title,
.homepage .section-blog h2.title,
.homepage .service h2.title,
.homepage .portfolio h2.title,
.homepage .contact h2.title,
.homepage .page-blog h2.title {
    margin-bottom: 0;
}

.homepage .gallery .wrapper-image {
    overflow: hidden;
    border-radius: 6px;
}

.homepage .gallery .wrapper-image img.gallery-square,
.homepage .gallery .wrapper-image img.gallery-portait,
.homepage .gallery .wrapper-image img.gallery-landscape {
    object-fit: cover;
}

.homepage .gallery .wrapper-image img.gallery-square {
    aspect-ratio: 1 / 1;
}

.homepage .gallery .wrapper-image img.gallery-portait {
    aspect-ratio: 2 / 2.83;
}

.homepage .gallery .wrapper-image img.gallery-landscape {
    aspect-ratio: 3 / 2;
}

.homepage .gallery .wrapper-image img {
    transition: var(--transition-duration);
}

.homepage .gallery .wrapper-image:hover img {
    transition: var(--transition-duration);
    transform: scale(1.02);
}
/* END HOMEPAGE SECTION GALLERY */

/* HOMEPAGE SECTION TESTIMONIAL */
.homepage .testimonial .card-testimonial {
    border-radius: 6px;
    overflow: hidden;
    background-color: rgba(var(--dark-color), 1);
    border: var(--border-style);
    padding: 20px;
    height: 100%;
}

.homepage .testimonial .card-testimonial .quote-icon {
    opacity: 0.06;
    width: 52px;
}

.homepage .testimonial .card-testimonial .testimonial-content {
    margin-top: 8px;
}

.homepage .testimonial .card-testimonial .testimonial-content .message {
    font-size: 0.875rem;
    color: rgba(var(--light-color), 0.52);
    margin-bottom: 12px;
}

.homepage .testimonial .card-testimonial .testimonial-content .username {
    font-size: 0.913rem;
    margin-bottom: 2px;
}

.homepage .testimonial .card-testimonial .testimonial-content .job {
    font-size: 0.813rem;
    color: rgba(var(--light-color), 0.32);
}
/* END HOMEPAGE SECTION TESTIMONIAL */

/* HOMEPAGE SECTION TUTORIAL */
.homepage .blog .card-blog,
.homepage .blog .card-blog-small,
.homepage .tutorial .card-tutorial {
    border-radius: 6px;
    overflow: hidden;
    background-color: rgba(var(--dark-color));
    border: var(--border-style);
}

.homepage .tutorial .card-tutorial .tutorial-thumbnail {
    width: 230px;
    height: 230px;
    object-fit: cover;
    opacity: 0.52;
    filter: saturate(0);
}

.homepage .blog .card-blog-small .blog-content,
.homepage .tutorial .card-tutorial .tutorial-content {
    padding: 20px;
    height: 100%;
}

.homepage .tutorial .card-tutorial .tutorial-content {
    border-left: 2px solid rgba(var(--light-color), 0.12);
}

.homepage .blog .card-blog .blog-content .header-item img,
.homepage .blog .card-blog-small .blog-content .header-item img,
.homepage .tutorial .card-tutorial .tutorial-content .header-item img {
    opacity: 0.52;
}

.homepage .blog .card-blog .blog-content .content-header p,
.homepage .blog .card-blog-small .blog-content .content-header p,
.homepage .tutorial .card-tutorial .tutorial-content .header-item p {
    font-size: 0.875rem;
    color: rgba(var(--light-color), 0.52);
}

.homepage .blog .card-blog .blog-content .content-body,
.homepage .tutorial .card-tutorial .tutorial-content .content-body {
    margin: 12px 0 32px 0;
}

.homepage .page-blog .card-blog .blog-content .title,
.modal .card-portfolio .portfolio-content .title,
.homepage .portfolio .card-portfolio .portfolio-content .title,
.homepage .blog .card-blog .blog-content .title,
.homepage .blog .card-blog-small .blog-content .title,
.homepage .tutorial .card-tutorial .tutorial-content .title {
    font-size: 1.125rem;
    margin-bottom: 6px;
    -webkit-line-clamp: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    transition: var(--transition-duration);
}

.homepage .page-blog .card-blog .blog-content .description,
.modal .card-portfolio .portfolio-content .description,
.homepage .portfolio .card-portfolio .portfolio-content .description,
.homepage .blog .card-blog .blog-content .description,
.homepage .blog .card-blog-small .blog-content .description,
.homepage .tutorial .card-tutorial .tutorial-content .description {
    font-size: 0.875rem;
    color: rgba(var(--light-color), 0.52);
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.homepage .body-description p {
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 0.875rem;
    color: rgba(var(--light-color), 0.52);
    width: 100%;
}

.homepage .body-description p img {
    width: 100%;
}
/* END HOMEPAGE SECTION TUTORIAL */

/* HOMEPAGE SECTION BLOG */
.homepage .blog .card-blog-small .blog-content {
    border-right: 2px solid rgba(var(--light-color), 0.12);
}

.homepage .blog .card-blog {
    height: 100%;
}

.homepage .blog .card-blog .blog-content {
    padding: 20px;
    border-top: 2px solid rgba(var(--light-color), 0.12);
}

.homepage .page-blog .card-blog .blog-thumbnail,
.homepage .blog .card-blog .blog-thumbnail {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    transition: var(--transition-duration);
}

.homepage .blog .card-blog-small .blog-thumbnail {
    width: 180px;
    height: 180px;
    object-fit: cover;
    transition: var(--transition-duration);
}

.homepage .page-blog .card-blog:hover .blog-thumbnail,
.homepage .blog .card-blog:hover .blog-thumbnail,
.homepage .blog .card-blog-small:hover .blog-thumbnail {
    scale: 1.01;
    transition: var(--transition-duration);
}

.homepage .blog .card-blog-small .content-body {
    margin-bottom: 16px;
}

.homepage .blog .card-blog-small .blog-content .content-body .title {
    transition: var(--transition-duration);
    color: rgba(var(--light-color), 1);
}

.homepage .blog .card-blog:hover .title,
.homepage .blog .card-blog-small:hover .title {
    color: rgba(var(--primary-color)) !important;
    transition: var(--transition-duration);
}
/* END HOMEPAGE SECTION BLOG */

/* HOMEPAGE SECTION CTA */
.homepage .cta {
    padding: 240px 72px 72px 72px;
    border: var(--border-style);
    border-radius: 8px;
    overflow: hidden;
    background-color: rgba(var(--dark-color), 1);
}

.homepage .cta .circle {
    position: absolute;
    background-color: rgba(var(--light-color), 0.02);
}

.homepage .cta .circle.circle-top-left {
    border-bottom-right-radius: 9999px;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
}

.homepage .cta .circle.circle-top-right {
    border-bottom-left-radius: 9999px;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
}

.homepage .cta .circle.circle-bottom-left {
    border-top-right-radius: 9999px;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 80px;
}

.homepage .cta .circle.circle-bottom-right {
    border-top-left-radius: 9999px;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
}

.homepage .cta .cta-content {
    gap: 82px;
}
/* END HOMEPAGE SECTION CTA */

/* HOMEPAGE VALUE */
.homepage .value .card-value {
    padding: 32px;
    width: 100%;
    background-color: rgba(var(--dark-color), 1);
    border: var(--border-style);
    border-radius: 6px;
}

.homepage .value .card-value .title {
    margin: 0 0 6px 0;
    color: rgba(var(--primary-color));
    font-family: var(--urbanist-bold);
}
/* END HOMEPAGE VALUE */

/* HOMEPAGE PORTFOLIO */
.modal .card-portfolio,
.homepage .portfolio .card-portfolio,
.homepage .page-blog .card-blog {
    border-radius: 6px;
    overflow: hidden;
    background-color: rgba(var(--dark-color));
    border: var(--border-style);
}

.modal .card-portfolio .portfolio-thumbnail,
.homepage .portfolio .card-portfolio .portfolio-thumbnail {
    width: 100%;
    aspect-ratio: 1.3 / 1;
    object-fit: cover;
}

.homepage .page-blog .card-blog .blog-content,
.modal .card-portfolio .portfolio-content,
.homepage .portfolio .card-portfolio .portfolio-content {
    padding: 20px;
}

.homepage .page-blog .card-blog .blog-content a.title:hover,
.modal .card-portfolio:hover .title,
.homepage .portfolio .card-portfolio:hover .title {
    color: rgba(var(--primary-color));
    transition: var(--transition-duration);
}

.modal .card-portfolio .portfolio-content > .wrapper,
.homepage .portfolio .card-portfolio .portfolio-content > .wrapper {
    margin-top: 16px;
}

.homepage .page-blog .card-blog .blog-content > .wrapper {
    margin-bottom: 16px;
}

.homepage .page-blog .card-blog .blog-content .wrapper-user,
.modal .card-portfolio .portfolio-content .wrapper-date,
.homepage .portfolio .card-portfolio .portfolio-content .wrapper-date,
.modal .card-portfolio .portfolio-content .wrapper-tech,
.homepage .portfolio .card-portfolio .portfolio-content .wrapper-tech .tech-scroll {
    gap: 8px;
}

.homepage .portfolio .card-portfolio .portfolio-content .wrapper-tech {
    overflow-x: auto;
    width: fit-content;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.homepage .portfolio .card-portfolio .portfolio-content .wrapper-tech::-webkit-scrollbar {
    display: none;
}

.homepage .portfolio .card-portfolio .portfolio-content .wrapper-tech .tech-scroll {
    max-width: 104px;
    width: fit-content;
}

.homepage .page-blog .card-blog .blog-content .wrapper-user img,
.modal .card-portfolio .portfolio-content .wrapper-date img,
.homepage .portfolio .card-portfolio .portfolio-content .wrapper-date img {
    opacity: 0.52;
}

.homepage .page-blog .card-blog .blog-content > .wrapper p,
.homepage .page-blog .card-blog .blog-content .wrapper-user p,
.modal .card-portfolio .portfolio-content .wrapper-date p,
.homepage .portfolio .card-portfolio .portfolio-content .wrapper-date p {
    font-size: 0.875rem;
    color: rgba(var(--light-color), 0.52);
}
/* END HOMEPAGE PORTFOLIO */

/* HOMEPAGE CONTACT */
.homepage .contact .sosmed-group {
    gap: 6px;
}

.homepage .contact .sosmed-group a {
    width: 46px;
    height: 46px;
    background-color: rgba(var(--dark-color), 1);
    border-radius: 4px;
    border: var(--border-style);
}
/* END HOMEPAGE CONTACT */

/* HOMEPAGE CATEGORY */
.homepage section.category {
    padding: 46px 0;
}

.homepage section.category .line-horizontal {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(21, 22, 24, 1) 0%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(21, 22, 24, 1) 100%
    );
}

.homepage section.category .line-horizontal:first-child {
    top: 0;
}

.homepage section.category .line-horizontal:last-child {
    bottom: 0;
}
/* END HOMEPAGE CATEGORY */

/* HOMEPAGE DETAIL */
.homepage .detail {
    margin-top: 62px;
}

.homepage .content-portfolio .button-link,
.homepage .detail .button-link {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    background-color: rgba(var(--dark-color), 1);
    border: var(--border-style);
    transition: var(--transition-duration);
}

.homepage .content-portfolio .button-link:hover,
.homepage .detail .button-link:hover {
    transition: var(--transition-duration);
    background-color: rgba(var(--light-color), 0.02);
}
/* END HOMEPAGE DETAIL */

/* HOMEPAGE DETAIL BLOG */
.homepage .detail.detail-blog .title-detail {
    font-size: 3rem;
    font-family: var(--urbanist-bold);
    line-height: 100%;
}

.homepage .detail.detail-blog .header-profile {
    gap: 12px;
}

.homepage .detail.detail-blog .header-profile img {
    border-radius: 6px;
}

.homepage .detail.detail-blog .header-profile p:first-child {
    font-family: var(--urbanist-semibold);
}

.homepage .detail.detail-blog .header-profile p:last-child {
    color: rgba(var(--light-color), 0.52);
    font-size: 0.875rem;
}

.homepage .detail.detail-blog .button-small:first-child {
    margin-bottom: 24px;
    cursor: auto;
}

.homepage .detail.detail-blog .title-detail,
.homepage .detail.detail-blog .detail-header,
.homepage .detail.detail-blog .blog-content img {
    margin-bottom: 52px;
}

.homepage .detail.detail-blog .detail-header {
    padding: 24px 0;
}

.homepage .detail.detail-blog .detail-header .line-horizontal {
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(21, 22, 24, 1) 0%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(21, 22, 24, 1) 100%
    );
}

.homepage .detail.detail-blog .detail-header .line-horizontal:first-child {
    top: 0;
}

.homepage .detail.detail-blog .detail-header .line-horizontal:last-child {
    bottom: 0;
}

.homepage .detail.detail-blog .blog-content img {
    border-radius: 8px;
    width: 100%;
    aspect-ratio: 3 / 2;
    height: 440px;
    object-fit: cover;
}

.homepage .line-horizontal.content-gap,
.homepage .line-horizontal.section-half-gap {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(21, 22, 24, 1) 0%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(21, 22, 24, 1) 100%
    );
}

.homepage .detail.detail-blog .blog-content .content p,
.homepage .detail.detail-blog .blog-content .content span {
    color: rgba(var(--light-color), 0.52);
    font-size: 0.913rem;
}
/* END HOMEPAGE DETAIL BLOG */

/* HOMEPAGE DETAIL TUTORIAL */
.homepage .detail.detail-tutorial .subtitle {
    font-size: 2.5rem;
    font-family: var(--urbanist-semibold);
    line-height: 100%;
    margin: 12px 0 20px 0;
}

.homepage .detail.detail-tutorial .detail-content .button-group {
    margin-top: 32px;
}

.homepage .detail.detail-tutorial .tutorial-thumbnail {
    border-radius: 8px;
    width: 100%;
    aspect-ratio: 3 / 2;
    opacity: 0.52;
    filter: saturate(50%);
    object-fit: cover;
}

.homepage .detail.detail-tutorial .header-rating,
.homepage .detail.detail-tutorial .header-member {
    gap: 8px;
}

.homepage .detail.detail-tutorial .header-member {
    opacity: 0.52;
}

.homepage .detail.detail-tutorial .header-rating p,
.homepage .detail.detail-tutorial .header-member p,
.homepage .detail.detail-tutorial .header-rating p span,
.homepage .detail.detail-tutorial .header-member p span {
    font-size: 0.875rem;
}

.homepage .detail.detail-tutorial .header-rating p span,
.homepage .detail.detail-tutorial .header-member p span {
    color: rgba(var(--light-color), 0.52);
}

.homepage .content-portfolio .card-content.content-tech,
.homepage .content-tutorial .card-content {
    padding: 26px;
    border: var(--border-style);
    border-radius: 6px;
}

.homepage .content-tutorial .card-content.content-silabus,
.homepage .content-tutorial .card-content.content-tech,
.homepage .content-portfolio .card-content.content-tech {
    padding: 20px;
}

.homepage .content-portfolio .card-content .content-title,
.homepage .content-tutorial .card-content .content-title {
    font-size: 1.125rem;
    margin-bottom: 6px;
}

.homepage .content-tutorial .card-content.content-silabus,
.homepage .content-tutorial .card-content.content-tech {
    min-height: fit-content;
    max-height: 320px;
    overflow-y: auto;
}

.homepage .content-portfolio .card-content.content-tech {
    height: fit-content;
}

.homepage .content-portfolio .card-content.content-tech::-webkit-scrollbar,
.homepage .content-tutorial .card-content.content-tech::-webkit-scrollbar,
.homepage .content-tutorial .card-content.content-silabus::-webkit-scrollbar {
    width: 4px;
}

.homepage
    .content-portfolio
    .card-content.content-tech::-webkit-scrollbar-track,
.homepage .content-tutorial .card-content.content-tech::-webkit-scrollbar-track,
.homepage
    .content-tutorial
    .card-content.content-silabus::-webkit-scrollbar-track {
    border-radius: 9999px;
}

.homepage
    .content-portfolio
    .card-content.content-tech::-webkit-scrollbar-thumb,
.homepage .content-tutorial .card-content.content-tech::-webkit-scrollbar-thumb,
.homepage
    .content-tutorial
    .card-content.content-silabus::-webkit-scrollbar-thumb {
    background: rgba(var(--light-color), 0.12);
    border-radius: 9999px;
}

.homepage .content-tutorial .card-content.content-silabus .content-title,
.homepage .content-portfolio .card-content.content-tech .content-title,
.homepage .content-tutorial .card-content.content-tech .content-title {
    margin-bottom: 12px;
}

.homepage .content-tutorial .card-content.content-silabus .modul-menu {
    border-left: var(--border-style);
    gap: 8px;
    width: 100%;
    padding-left: 12px;
}

.homepage .content-tutorial .card-content.content-silabus .modul-menu a .line {
    width: 12px;
    width: 12px;
    height: 1px;
    background-color: rgba(var(--light-color), 0.12);
    margin-left: -12px;
}

.homepage .content-tutorial .card-content.content-silabus .modul-menu a {
    padding: 10px 14px;
    width: 100%;
    font-size: 0.875rem;
    background-color: rgba(var(--dark-color), 1);
    border-radius: 4px;
    transition: var(--transition-duration);
    padding-left: 12px;
    color: rgba(var(--light-color), 0.52);
    border: var(--border-style);
    position: relative;
}

.homepage .content-tutorial .card-content.content-silabus .modul-menu a.active,
.homepage .content-tutorial .card-content.content-silabus .modul-menu a:hover {
    transition: var(--transition-duration);
    background-color: rgba(var(--light-color), 0.02);
    color: rgba(var(--light-color), 1);
}

.homepage
    .content-tutorial
    .card-content.content-silabus
    .modul-menu
    a.active:hover {
    background-color: rgba(var(--light-color), 0.04);
    transition: var(--transition-duration);
}

.homepage .content-portfolio .card-content.content-tech .list-card,
.homepage .content-tutorial .card-content.content-tech .list-card {
    padding: 16px;
    border: var(--border-style);
    border-radius: 6px;
}

.homepage .content-portfolio .card-content.content-tech .list-card .card-tech,
.homepage .content-tutorial .card-content.content-tech .list-card .card-tech {
    width: 62px;
    height: 62px;
    background-color: rgba(var(--light-color), 0.02);
    border-radius: 4px;
    border: var(--border-style);
}

.homepage .content-portfolio .card-content.content-tech .tech-title,
.homepage .content-tutorial .card-content.content-tech .tech-title {
    font-size: 1rem;
    margin-top: 12px;
    margin-bottom: 4px;
}

.homepage .content-portfolio .card-content.content-tech .tech-description,
.homepage .content-tutorial .card-content.content-tech .tech-description {
    font-size: 0.875rem;
    color: rgba(var(--light-color), 0.52);
}
/* END HOMEPAGE DETAIL TUTORIAL */

/* HOMEPAGE DETAIL PORTFOLIO */
.homepage section.detail-portfolio {
    overflow-x: auto;
    width: 100%;
    padding-bottom: 6px;
}

.homepage section.detail-portfolio::-webkit-scrollbar {
    height: 4px;
}

.homepage section.detail-portfolio::-webkit-scrollbar-track {
    border-radius: 9999px;
}

.homepage section.detail-portfolio::-webkit-scrollbar-thumb {
    background: rgba(var(--light-color), 0.12);
    border-radius: 9999px;
}

.homepage section.detail-portfolio .portfolio-thumbnails {
    width: fit-content;
}

.homepage section.detail-portfolio .portfolio-thumbnails img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    height: 260px;
    border-radius: 6px;
    border: var(--border-style);
    transition: var(--transition-duration);
}

.homepage section.content-portfolio .content-portfolio-header {
    margin-bottom: 32px;
}

.homepage section.content-portfolio .subtitle {
    font-size: 2.5rem;
    font-family: var(--urbanist-semibold);
    line-height: 100%;
}

.homepage section.content-portfolio .header-button {
    gap: 6px;
}

.homepage .popup-copy {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(var(--dark-secondary-color), 1);
    border: var(--border-style);
    border-radius: 6px;
    font-size: 0.813rem;
    color: rgba(var(--light-color), 0.52);
    text-wrap: nowrap;
    padding: 8px 10px;
    top: -26px;
    opacity: 0;
    transition: var(--transition-duration);
}

.homepage .popup-copy.show {
    top: -46px;
    opacity: 1;
    transition: var(--transition-duration);
}
/* END HOMEPAGE DETAIL PORTFOLIO */

/* SWIPER */
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: -42px !important;
    display: flex;
}

.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets
    .swiper-pagination-bullet {
    width: 100% !important;
    height: 6px !important;
    margin: 0 !important;
    border-radius: 1px !important;
    background-color: rgba(var(--light-color), 0.08);
}

.swiper-pagination-bullet-active {
    background-color: rgba(var(--primary-color), 1) !important;
}
/* END SWIPER */

/* HOMEPAGE FOOTER */
footer.footer {
    background-color: rgba(var(--light-color), 0.02);
    border-top: var(--border-style);
    padding-bottom: 82px;
}

footer.footer .description {
    margin: 20px 0 26px;
}

footer.footer .button-group {
    gap: 5px !important;
}

footer.footer .link-sosmed {
    width: 42px;
    height: 42px;
    background-color: rgba(var(--dark-color), 1);
    border: var(--border-style);
    border-radius: 4px;
    transition: var(--transition-duration);
}

footer.footer .link-sosmed:hover {
    background-color: rgba(var(--primary-color));
    transition: var(--transition-duration);
}

footer.footer .footer-title {
    font-size: 1.125rem;
    font-family: var(--urbanist-semibold);
    margin-bottom: 16px;
}

footer.footer .footer-menu {
    gap: 12px;
}

footer.footer .footer-menu a {
    font-size: 0.913rem;
    color: rgba(var(--light-color), 0.52);
    transition: var(--transition-duration);
}

footer.footer .footer-menu a:hover {
    transition: var(--transition-duration);
    color: rgba(var(--light-color), 1);
}
/* END HOMEPAGE FOOTER */

/* HOMEPAGE COPYRIGHT */
footer.copyright {
    padding: 22px 0;
    border-top: var(--border-style);
    background-color: rgba(var(--light-color), 0.02);
}

footer.copyright p {
    font-size: 0.875rem;
    color: rgba(var(--light-color), 0.52);
}
/* END HOMEPAGE COPYRIGHT */