@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ============= Define CSS Variables ============== */
:root {
    --color-input-1: hsl(241, 61%, 29%);
    --color-input-2: hsl(187, 61%, 92%);
    --color-input-3: hsl(202, 71%, 50%);
    --color-dark: hsl(240, 13%, 8%);
    --text-dark: hsl(240, 8%, 18%);
    --text-light: hsl(210, 17%, 98%);
    --text-hover: var(--color-input-3);
    --black: hsl(0, 0%, 0%);
    --white: hsl(0, 0%, 100%);
    --card-custom-background: hsl(328, 100%, 84%);

    /* === Soft Color === */
    --red-soft: hsl(328, 100%, 84%);
    --yellow-soft: hsl(29, 100%, 84%);
    --green-soft: hsl(120, 100%, 84%);
    --blue-soft: hsl(240, 100%, 84%);

    /* === Warm Color === */
    --warm1: rgba(254, 216, 7, 0.5);
    --warm2: rgba(255, 168, 8, 0.5);
    --warm3: rgba(254, 75, 8, 0.5);
    --warm4: rgba(254, 9, 8, 0.5);
    --warm5: rgba(221, 26, 66, 0.5);

    /* === Cool Color === */
    --cool1: rgba(50, 159, 91, 0.6);
    --cool2: rgba(43, 132, 76, 0.7);
    --cool3: rgba(35, 107, 60, 0.8);
    --cool4: rgba(26, 80, 46, 0.9);
    --cool5: rgba(21, 53, 32, 1);
    --cool6: rgba(100, 170, 255, 0.6);
    --cool7: rgba(100, 100, 255, 0.7);
    --cool8: rgba(73, 73, 197, 0.8);
    --cool9: rgba(48, 48, 97, 0.9);
    --cool10: rgba(21, 22, 53, 1);

    --border-color: #fff5;
    --w-image: 500px;
    --calculate: calc(3 / 2);

    /* === Card White === */
    --card-white:
        linear-gradient(rgb(255, 255, 255) 0%,
            rgb(234, 234, 234) 100%);

    --outline-shadow:
        rgba(0, 0, 0, 0.05) 0px 4px 2px 0px,
        rgba(0, 0, 0, 0.09) 0px 2px 2px 0px,
        rgba(0, 0, 0, 0.1) 0px 1px 1px 0px;

    --card-shadow: 3px 3px 15px rgba(0, 0, 0, 0.5);

    --inset-shadow: inset 5px 5px 20px rgba(0, 0, 0, 0.5);


    /* === Card Black === */
    --card-black:
        linear-gradient(rgb(65, 65, 65) 0%,
            rgb(30, 30, 30) 100%);

    --outline-white:
        rgba(255, 255, 255, .8) 0px 4px 2px 0px,
        rgba(219, 219, 219, .8) 0px 2px 2px 0px,
        rgba(218, 218, 218, .8) 0px 1px 1px 0px;



    /* ============= Typography ============== */

    --ff-poppins: 'Poppins', sans-serif;

    --fs-1: 30px;
    --fs-2: 28px;
    --fs-3: 24px;
    --fs-4: 20px;
    --fs-5: 18px;
    --fs-6: 16px;
    --fs-7: 14px;

    --fw-500: 500;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;

    /* ============= Transisi ============== */
    --transition: 0.4s ease;

    /* ============= Section Padding ============== */
    --section-padding: clamp(2rem, 5vw, 5rem) 1rem;

}


/* ============= Reset ============== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

a,
span,
button,
i {
    display: block;
}

img {
    display: block;
    width: 100%;
}

button {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--color-input-2);
    min-height: 100dvh;
    font-family: var(--ff-poppins);
    font-size: 16px;
}

h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: 1.3;
}

h3 {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    line-height: 1.4;
}

p {
    font-size: clamp(1rem, 3vw, 1.25rem);
    line-height: 1.6;
}

.section-title {
    text-align: center;
    margin-bottom: 1rem;
}

.section-subtitle {
    text-align: center;
    margin-bottom: 1rem;
}

.text-content {
    text-align: center;
    margin-bottom: 1rem;
}

.card-title {
    text-align: center;
    margin-bottom: 1rem;
    font-weight: var(--fw-700);
    text-transform: capitalize;
    font-family: var(--ff-poppins);
    font-size: var(--fs-4);
}

.card-description {
    text-align: center;
    margin-bottom: 1rem;
    font-family: var(--ff-poppins);
    font-size: var(--fs-5);
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    position: relative;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 2px;
    background: #000;
}

.divider-icon {
    margin: 0 10px;
}

.divider-icon svg {
    width: 40px;
    height: 40px;
    fill: #000;
}

/* ============= Css Tambahan ============== */
ul.mini-card-items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin-block: 2rem;
    list-style-type: none;
}

ul.mini-card-items li {
    position: relative;
    width: 90px;
}

ul.mini-card-items li.card-merged {
    position: relative;
    width: 190px;
}

h3.mini-cards {
    cursor: help;
    background-color: #fff;
    border: 1px solid rgbA(0, 0, 0, 0.25);
    padding-block: 1rem;
    text-align: center;
    border-radius: .75rem;
    font-weight: 400;
    font-size: 24px;
    font-family: "Microsoft Yahei", sans-serif;
    ;
}

h3.mini-cards:hover {
    box-shadow: 0 3px 5px rgba(0, 0, 0, .23), 0 3px 12px rgba(0, 0, 0, .16);
}

.align-left {
    left: 0;
    right: auto;
    transform: translateX(0);
}

.align-center {
    right: 50%;
    transform: translateX(50%);
}

.align-right {
    right: 0;
    transform: translateX(0);
}

.--active .mini-dialog {
    display: block;
}

.mini-dialog {
    --dialogBg: #f2f2f2;
    position: absolute;
    z-index: 10;
    padding: 1rem;
    width: 100%;
    min-width: 200px;
    background-color: var(--dialogBg);
    border-radius: .75rem;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    display: none;
    top: calc(100% + 10px);
}

.mini-dialog.align-left::before {
    content: "";
    position: absolute;
    top: -8px;
    /* posisi di atas box tooltip */
    left: 8px;
    /* bisa sesuaikan agar pas di tengah */
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--dialogBg);
    width: 0;
    height: 0;
}

.mini-dialog.align-center::before {
    content: "";
    position: absolute;
    top: -8px;
    /* posisi di atas box tooltip */
    left: 92px;
    /* bisa sesuaikan agar pas di tengah */
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--dialogBg);
    width: 0;
    height: 0;
}

.mini-dialog.align-right::before {
    content: "";
    position: absolute;
    top: -8px;
    /* posisi di atas box tooltip */
    right: 8px;
    /* bisa sesuaikan agar pas di tengah */
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--dialogBg);
    width: 0;
    height: 0;
}

.--active>h3.mini-cards {
    background-color: #000;
    color: #fff;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============= Custom Card ============== */
.text-white-card {
    width: 100%;
    background: var(--card-white);
    box-shadow: var(--card-shadow), var(--outline-shadow);
    border-radius: 2rem;
    padding: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text-white-card:hover {
    box-shadow: var(--inset-shadow);
}

.text-white-card i {
    font-size: var(--fs-1);
    margin-block: 1rem;
}

.text-black-card {
    width: 100%;
    color: aliceblue;
    background: var(--card-black);
    box-shadow: var(--outline-white);
    border-radius: 2rem;
    padding: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text-black-card i {
    font-size: var(--fs-1);
    margin-block: 1rem;
}

.text-custom-card {
    width: 100%;
    background: var(--card-custom-background);
    box-shadow: var(--card-shadow), var(--outline-shadow);
    border-radius: 2rem;
    padding: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.text-custom-card:hover {
    box-shadow: var(--inset-shadow);
}

.text-custom-card i {
    font-size: var(--fs-1);
    margin-block: 1rem;
}

.testimoni-white-card {
    width: 100%;
    background: var(--card-white);
    box-shadow: var(--card-shadow), var(--outline-shadow);
    border-radius: 1rem;
    padding: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.testimoni-black-card {
    width: 100%;
    background: var(--card-black);
    box-shadow: var(--outline-white);
    color: aliceblue;
    border-radius: 1rem;
    padding: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.testimoni-custom-card {
    width: 100%;
    background: var(--card-custom-background);
    box-shadow: var(--card-shadow), var(--outline-shadow);
    border-radius: 1rem;
    padding: .8rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.testimoni-white-card:hover,
.testimoni-black-card:hover,
.testimoni-custom-card:hover {
    box-shadow: var(--inset-shadow);
}

.card-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color: inherit;
}

.card-top {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    color: inherit;
}

.card-top img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: var(--outline-shadow);
}

.card-profile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    color: inherit;
}

.card-profile h3 {
    font-family: var(--ff-poppins);
    font-size: var(--fs-6);
    color: inherit;
}

.stars {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    color: var(--warm4);
}

.testimoni-black-card .stars {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    color: inherit;
}

.card-bottom {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.card-bottom p {
    font-family: var(--ff-poppins);
    font-size: var(--fs-6);
    color: inherit;
    margin-bottom: 1rem;
}

/* ============= First Button ============== */
.button-1 {
    font-family: var(--ff-poppins);
    font-size: var(--fs-5);
    background: var(--color-input-1);
    color: white;
    padding: 0.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border: none;
    border-radius: 25px;
    box-shadow: var(--inset-shadow);
    transition: all 0.3s;
    cursor: pointer;
    gap: 1rem;
}

.button-1 i {
    font-size: var(--fs-4);
}

.button-1:hover {
    transform: translateY(-3px);
    box-shadow: var(--outline-shadow), var(--outline-shadow);
}

.button-1:hover i {
    color: var(--color-input-2);
}

/* ============= Second Button ============== */
.button-2 {
    width: 140px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right, #77530a, #ffd277, #77530a, #77530a, #ffd277, #77530a);
    background-size: 250%;
    background-position: left;
    color: #ffd277;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-duration: 1s;
    overflow: hidden;
}

.button-2::before {
    position: absolute;
    content: "ORDER NOW";
    color: #ffd277;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 97%;
    height: 90%;
    border-radius: 8px;
    transition-duration: 1s;
    background-color: rgba(0, 0, 0, 0.842);
    background-size: 200%;
}

.button-2:hover {
    background-position: right;
    transition-duration: 1s;
}

.button-2:hover::before {
    background-position: right;
    transition-duration: 1s;
}

.button-2:active {
    transform: scale(0.95);
}


/* ================ Header/Navbar ================ */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    z-index: 20;
    align-items: center;
    padding: 25px 5%;
    transition: box-shadow var(--transition);
}

.header.scrolled {
    box-shadow: var(--outline-shadow);
}

.header::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--color-input-2);
    z-index: -1;
}

.header .logo {
    width: 150px;
}

.logo img {
    width: 100%;
}

.navbar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar a {
    color: var(--text-dark);
    margin-left: 25px;
    font-weight: var(--fw-500);
    font-size: var(--fs-4);
    align-items: center;
}

.nav-icon {
    color: var(--color-input-1);
    font-size: 2rem;
    cursor: pointer;
    display: none;
    position: absolute;
    right: 5%;
}

.navbar a:hover,
.nav-icon:hover {
    color: var(--text-hover);
}

input#menu-toggle {
    display: none;
}


/* ========== Breakpoints Header ======== */
@media (min-width: 769px) and (max-width: 950px) {
    .header {
        padding: 18px 5%;
    }

    .header .logo {
        width: 115px;
    }

    .navbar a {
        margin-left: 10px;
        font-weight: var(--fw-500);
        font-size: var(--fs-5);
    }
}

/* ========== Breakpoints Navbar ======== */
@media (max-width: 768px) {
    .nav-icon {
        display: inline-flex;
        position: absolute;
        right: 5%;
    }

    .navbar {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(207, 252, 255, 0.9);
        backdrop-filter: blur(8px);
        height: 0;
        overflow: hidden;
        transition: height 0.3s ease;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-bottom-left-radius: 2.5rem;
        border-bottom-right-radius: 2.5rem;
        box-shadow: var(--inset-shadow);
        gap: 1.5rem;
        font-size: var(--fs-4);
        opacity: 0;
        transform: translateY(-10px);
    }

    .navbar a {
        opacity: 0;
        transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s;
        transform: translateY(0px);
    }

    .navbar button {
        width: auto;
        text-align: center;
        margin-inline: auto;
    }

    #menu-toggle:checked~.navbar {
        height: 25rem;
        padding: 2rem 0;
        opacity: 1;
        transform: translateY(0);
    }

    #menu-toggle:checked~.navbar a {
        opacity: 1;
        transform: translateY(0);
    }

    #menu-toggle:not(:checked)~.navbar {
        transition: height 0.5s ease, opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s;
        opacity: 0;
        transform: translateY(0px);
    }

    #menu-toggle:not(:checked)~.navbar a {
        opacity: 0;
        transform: translateY(0px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
}

/* ========== Section 1 ======== */
.section-1 {
    margin-top: 100px;
}

figure {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: #f5f2fd;
}

.slider-wrapper {
    position: relative;
    --curr: 1;
}

.slider {
    display: flex;
    flex-wrap: nowrap;
    scroll-snap-type: x mandatory;
    overflow: clip;
}

.item {
    position: relative;
    flex: 1 0 100%;
    left: calc((var(--curr) - 1) * (-100%));
    scroll-snap-align: center;
    transition: left 0.5s ease-in;
}

.item figcaption {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 60px 30px;
    color: #fff;
}

.item figcaption h1 {
    margin: 0 0 0.15em;
    padding: 0;
    font-size: clamp(1rem, 3vw, 2rem);
    text-transform: uppercase;
}

.item figcaption h2 {
    margin: 0 0 0.15em;
    padding: 0;
    font-size: clamp(1rem, 3vw, 2rem);
    text-transform: uppercase;
}

.item img {
    width: 100%;
    height: clamp(200px, 50vh, 500px);
    object-fit: cover;
}

.btn-prev,
.btn-next {
    position: absolute;
    line-height: 0;
    top: 50%;
    font-size: 1.2rem;
    color: white;
    background: none;
    border: none;
    appearance: none;
}

.btn-prev {
    left: 30px;
}

.btn-next {
    right: 30px;
}

.range {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto 20px;
    width: 200px;
    height: 8px;
}

/** Generated using range input css */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
}

/* Removes default focus */
input[type="range"]:focus {
    outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
input[type="range"]::-webkit-slider-runnable-track {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0.5rem;
    height: 0.35rem;
}

/* slider thumb */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    /* Override default look */
    appearance: none;
    margin-top: 0px;
    /* Centers thumb on the track */
    background-color: #ffffff;
    border-radius: 0.5rem;
    height: 0.35rem;
    width: 20%;
}

input[type="range"]:focus::-webkit-slider-thumb {
    outline: 0px solid #ffffff;
    outline-offset: 0rem;
}

/* ========== Section A ======== */
.section-a {
    padding: var(--section-padding);
    background-color: var(--color-input-2);
}

.hsk__container {
    display: grid;
    gap: 2rem;
    overflow: hidden;
}

.hsk__image img {
    max-width: 500px;
    margin-inline: auto;
}

.hsk__content .section__description {
    margin-block: 1rem;
    line-height: 1.75rem;
    text-align: justify;
}

@media (min-width: 768px) {
    .hsk__container {
        grid-template-columns: repeat(2, 1fr);
        justify-content: center;
        align-items: center;
        place-items: center;
        margin-right: clamp(1rem, 5vw, 5.5rem);
    }
}

/* ========== Section B ======== */
.section-b {
    padding: var(--section-padding);
    background-color: var(--color-input-3);
}

.feature__grid {
    display: grid;
    gap: 1rem;
}

.feature__card {
    padding: 1rem;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-radius: 1rem;
    border: 2px solid var(--color-input-1);
    background-color: #ffcc89;
}

.feature__card span {
    display: inline-block;
    padding: 5px 11px;
    font-size: 1.5rem;
    color: var(--text-light);
    border-radius: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.feature__card:nth-child(1) span {
    background-color: #fef2f2;
}

.feature__card:nth-child(2) span {
    background-color: #f0fdf4;
}

.feature__card:nth-child(3) span {
    background-color: #eff6ff;
}

.feature__card:nth-child(4) span {
    background-color: #fefce8;
}

.feature__card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark);
}

@media (min-width: 540px) {
    .feature__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .feature__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ========== Section 2 ======== */
.section-2 {
    padding: var(--section-padding);
    background-color: var(--color-input-2);
}

/* Hide radio buttons */
input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.cards {
    --img-w: 200px;
    --duration: 300ms;
    --img-easing: cubic-bezier(0.34, 1.56, 0.64, 1);
    width: min(100% - 4rem, 800px);
    margin-inline: auto;
    display: grid;

    counter-reset: my-counter;
}

.card3d {
    --cards-grid-cols: auto;
    --cards-grid-rows: var(--img-w) auto;
    --cards-grid-gap: 2rem;
    --cards-footer-justify: center;

    grid-area: 1/1;
    display: grid;
    place-items: center;
    grid-template-columns: var(--cards-grid-cols);
    grid-template-rows: var(--cards-grid-rows);
    gap: var(--cards-grid-gap);

}

@media (600px < width) {
    .card3d {
        --cards-grid-cols: var(--img-w) auto;
        --cards-grid-rows: auto;
        --cards-grid-gap: 4rem;
        --cards-footer-justify: start;
    }
}

.card-img {
    width: 200px;
    height: 200px;
    aspect-ratio: 1 / 1;
    rotate: var(--angle, 0deg);
    border-radius: 10px;
    border: 3px solid #FFF;
    overflow: hidden;
    transform-origin: center;
    object-fit: cover;
    box-shadow: 0 0 5px 3px rgba(0 0 0 / .05);
}

input:nth-of-type(1):checked+.card3d~.card3d>.card-img {
    animation: straighten-img-1 calc(var(--duration) * 2) forwards;
    animation-timing-function: var(--img-easing);
}

.card3d:has(~input:nth-of-type(2):checked)>.card-img,
input:nth-of-type(2):checked+.card3d~.card3d>.card-img {
    animation: straighten-img-2 calc(var(--duration) * 2) forwards;
    animation-timing-function: var(--img-easing);
}

.card3d:has(~input:nth-of-type(3):checked)>.card-img,
input:nth-of-type(3):checked+.card3d~.card3d>.card-img {
    animation: straighten-img-3 calc(var(--duration) * 2) forwards;
    animation-timing-function: var(--img-easing);
}

.card3d:has(~input:nth-of-type(4):checked)>.card-img,
input:nth-of-type(4):checked+.card3d~.card3d>.card-img {
    animation: straighten-img-4 calc(var(--duration) * 2) forwards;
    animation-timing-function: var(--img-easing);
}

.card3d:has(~input:nth-of-type(5):checked)>.card-img,
input:nth-of-type(5):checked+.card3d~.card3d>.card-img {
    animation: straighten-img-5 calc(var(--duration) * 2) forwards;
    animation-timing-function: var(--img-easing);
}

.card3d:has(~input:nth-of-type(6):checked)>.card-img,
input:nth-of-type(6):checked+.card3d~.card3d>.card-img {
    animation: straighten-img-6 calc(var(--duration) * 2) forwards;
    animation-timing-function: var(--img-easing);
}

.card3d:has(~input:nth-of-type(7):checked)>.card-img,
input:nth-of-type(7):checked+.card3d~.card3d>.card-img {
    animation: straighten-img-7 calc(var(--duration) * 2) forwards;
    animation-timing-function: var(--img-easing);
}

/* as CSS can't remove animations, we change the animation according to which checkbox is checked  - all animations are the same (would be simpler with SCSS) */
@keyframes straighten-img-1 {
    50% {
        --angle: 0deg;
    }
}

@keyframes straighten-img-2 {
    50% {
        --angle: 0deg;
    }
}

@keyframes straighten-img-3 {
    50% {
        --angle: 0deg;
    }
}

@keyframes straighten-img-4 {
    50% {
        --angle: 0deg;
    }
}

@keyframes straighten-img-5 {
    50% {
        --angle: 0deg;
    }
}

@keyframes straighten-img-6 {
    50% {
        --angle: 0deg;
    }
}

@keyframes straighten-img-7 {
    50% {
        --angle: 0deg;
    }
}


/* stacking order - these are updated according to which card is selected */
.card3d {
    z-index: -1;
}

input:checked+.card3d {
    z-index: 10 !important;
}

/* next card checked - place behind */
.card3d:has(+input:checked) {
    z-index: 9;
}

/* next card +1 checked - place behind */
.card3d:has(+input + .card3d + input:checked) {
    z-index: 8;
}

/* next card +2 checked - place behind */
.card3d:has(+input + .card3d +input + .card3d + input:checked) {
    z-index: 7;
}

/* next card +3 checked - place behind */
.card3d:has(+input + .card3d +input + .card3d +input + .card3d + input:checked) {
    z-index: 6;
}

/* next card +4 checked - place behind */
.card3d:has(+input + .card3d +input + .card3d +input + .card3d +input + .card3d + input:checked) {
    z-index: 5;
}

/* next card +5 checked - place behind */
.card3d:has(+input + .card3d +input + .card3d +input +input + .card3d +input + .card3d +input + .card3d + input:checked) {
    z-index: 4;
}

/* next card +6 checked - place behind */
.card3d:has(+input + .card3d +input + .card3d +input + .card3d +input +input + .card3d +input + .card3d +input + .card3d + input:checked) {
    z-index: 3;
}

.card-data {
    display: grid;
    gap: 1rem;
}

.card-data>.card-num {
    opacity: var(--data-opacity, 0);
    font-size: .8rem;
    color: #666;
}

.card-data>p {
    font-size: 0.9rem;

}

.card-data>h2,
.card-data>p {
    transition: var(--duration) ease-in-out;
    transition-delay: var(--data-delay, 0ms);
    opacity: var(--data-opacity, 0);
    translate: 0 var(--data-y, 20px);
}

.card-data>footer {
    display: flex;
    justify-content: var(--cards-footer-justify);
    gap: 2rem;
}

.card-data>footer label {
    margin-block-start: auto;
    cursor: pointer;
    pointer-events: var(--card-events, none);
    opacity: var(--data-opacity, 0);
    transition: color var(--duration) ease-in-out;
    color: var(--label-clr-txt, #000);
    background-color: var(--label-clr-bg, var(--color-input-3));
    border-radius: 50%;
    width: 32px;
    height: 32px;
    aspect-ratio: 1/1;
    display: grid;
    place-content: center;
    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}


input:checked:focus-visible+.card3d>.card-data>footer label,
.card-data>footer label:hover {
    --label-clr-txt: #FFF;
    --label-clr-bg: steelblue;
}

input:checked+.card3d {
    --data-opacity: 1;
    --data-y: 0;
    --data-delay: var(--duration);
    --card-events: auto;
    transition: z-index;
    transition-delay: 300ms;
    /*z-index: 1;*/
}

input:checked+.card3d>.card-img {
    animation: reveal-img calc(var(--duration) * 2) forwards;
}

@keyframes reveal-img {
    50% {
        translate: -150% 0;
        --angle: 0deg;
    }
}

/* ========== Section 3 ======== */
.section-3 {
    padding: var(--section-padding);
    background-color: #fff;
}

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 2rem;
}

.container .card:nth-child(1) .box .icon .iconBox {
    background: #282828;
}

.container .card:nth-child(2) .box .icon .iconBox {
    background: #282828;
}

.container .card:nth-child(3) .box .icon .iconBox {
    background: #282828;
}

.container .card ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.container .card ul li {
    text-transform: uppercase;
    background: var(--clr-tag);
    color: #282828;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.188rem;
}

.container .card .content {
    padding: 0.938rem 0.625rem;
}

.container .card .content h3 {
    text-transform: capitalize;
    font-size: clamp(1.5rem, 1.3909rem + 0.4364vw, 1.8rem);
}

.container .card .content p {
    margin: 0.625rem 0 1.25rem;
    color: #565656;
}

.container .card-inner {
    position: relative;
    width: inherit;
    height: 18.75rem;
    background: var(--clr);
    border-radius: 1.25rem;
    border-bottom-right-radius: 0;
    overflow: hidden;
}

.container .card-inner .box {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
}

.hanzi-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1rem;
    gap: 1.5rem;
    align-items: center;
}

.hanzi-wrapper-2 {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    padding-top: 3rem;
    justify-content: center;
    align-items: center;
}

.hanzi-button-wrapper {
    width: 100%;
    z-index: 2;
    cursor: pointer;
}

.char-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 2;
    width: 100%;
}

.hanzi {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 4rem;
}

.animate-button {
    margin-top: 3.5rem;
    padding-block: 0.4rem;
    padding-inline: clamp(2rem, 5vw, 3rem);
    font-size: 1rem;
    cursor: pointer;
    border-radius: .5rem;
    background: transparent;
    color: #fff;
    transition: .5 ease;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
}

.btn-2 {
    background: #282828;
    background: linear-gradient(0deg, #282828 0%, #282828 100%);
    border: none;
}

.btn-2:before {
    height: 0%;
    width: 2px;
}

.btn-2:hover {
    box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, .3),
        -4px -4px 6px 0 rgba(116, 125, 136, .3),
        inset -4px -4px 8px 0 rgba(255, 255, 255, .2),
        inset 4px 4px 8px 0 rgba(0, 0, 0, .2);
}

.iconBox {
    z-index: 2;
}

.imgBox::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(/assets/imgs/overlay.png);
    background-size: cover;
    background-position: center;
    mix-blend-mode: multiply;
    opacity: .8;

    box-shadow: inset 0 8px 8px rgba(0, 0, 0, .23),
        /* atas */
        inset 8px 0 8px rgba(0, 0, 0, .23),
        /* kanan */
        inset -8px 0 8px rgba(0, 0, 0, .23),
        /* kiri */
        inset 0 -8px 8px rgba(0, 0, 0, .23),
        /* bawah */
        0 8px 12px rgba(0, 0, 0, .16);
    /* shadow luar */
}

.container .card-inner .box .imgBox {
    position: absolute;
    inset: 0;
}

.container .card-inner .box .imgBox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container .card-inner .box .icon {
    position: absolute;
    bottom: -0.375rem;
    right: -0.375rem;
    width: 6rem;
    height: 6rem;
    background: var(--clr);
    border-top-left-radius: 50%;
}

.container .card-inner .box .icon:hover .iconBox {
    transform: scale(1.1);
}

.container .card-inner .box .icon::before {
    position: absolute;
    content: "";
    bottom: 0.375rem;
    left: -1.25rem;
    background: transparent;
    width: 1.25rem;
    height: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    box-shadow: 0.313rem 0.313rem 0 0.313rem #ffffff;
}

.container .card-inner .box .icon::after {
    position: absolute;
    content: "";
    top: -1.25rem;
    right: 0.375rem;
    background: transparent;
    width: 1.25rem;
    height: 1.25rem;
    border-bottom-right-radius: 1.25rem;
    box-shadow: 0.313rem 0.313rem 0 0.313rem var(--clr);
}

.container .card-inner .box .icon .iconBox {
    position: absolute;
    inset: 0.625rem;
    background: #282828;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

.container .card-inner .box .icon .iconBox span {
    color: #fff;
    font-size: 1.5rem;
}

.iconBox ion-icon {
    font-size: 24px;
    color: #fff;
}

/* ========== Section 4 ======== */
.section-4 {
    padding: var(--section-padding);
    background-color: #fff;
}

.latihan-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-block: 2rem;
}

.hanzi-wrapper-latihan {
    border: 1px solid rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.reset-btn {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.5rem;
    font-size: 1rem;
    text-align: center;
    background-color: #337ab7;
    border: 1px solid #2e6da4;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    cursor: pointer;
    color: #fff;
}

.reset-btn:hover {
    background-color: #215888;
}

@media (max-width: 768px) {
    .latihan-section {
        grid-template-columns: 1fr;
    }
}

/* ========== Section 5 ======== */
.section-5 {
    padding: var(--section-padding);
    background-color: var(--color-input-2);
}

.story-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}

.story-audio {
    position: absolute;
    background-color: #282828;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 12px;
    right: 12px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

.story-audio:hover {
    background-color: #282828;
    transform: scale(1.1);
}

.story-audio ion-icon {
    display: block;
    margin: auto;
    font-size: 1.4rem;
}

.story-audio ion-icon:hover {
    color: #fc940c;
}

.story-board {
    position: relative;
}

.story-board img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;
}

ruby {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(20px, 3vw, 40px);
}

.story-text {
    position: absolute;
    width: 100%;
    bottom: clamp(10px, 3vw, 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .2rem;
}

span.hanzi-white {
    cursor: pointer;
    font-size: clamp(10px, 3vw, 40px);
    background-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #000000;
    padding: .5rem;
    border-radius: .75rem;
}

@media screen and (min-width: 1200px) {
    .story-board img {
        max-width: 800px;
        margin: 0 auto;
        display: block;
    }

    .story-audio {
        top: 12px;
        right: 310px;
    }
}

/* ========== Section 6 ======== */
.section-6 {
    padding-top: 2rem;
    background-image: url(/assets/imgs/price-bgr.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.price-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.price-card {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 2rem;
    width: clamp(300px, 30vw, 700px);
    flex-direction: column;
    border-radius: 1rem;
    background-color: #020617;
    padding: 1.5rem;
}

.price-title {
    font-size: 1.2rem;
    line-height: 2rem;
    font-weight: 700;
    color: #f8fafc90;
}

.price-headers {
    font-size: 2.75rem;
    line-height: 1;
    font-weight: 700;
    color: #f8fafc;
}

.price-desc {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.625;
    text-wrap: pretty;
    color: #f8fafc90;
}

.lists-2 {
    margin-bottom: 1.5rem;
    flex: 1 1 0%;
    color: #f8fafc90;
}

.lists-2 .list-2 {
    margin-bottom: 0.5rem;
    display: flex;
    margin-left: 0.5rem;
}

.lists-2 .list-2 svg {
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
    color: #0ea5e9;
}

.action {
    border: none;
    outline: none;
    display: inline-block;
    border-radius: 0.5rem;
    background-color: #0ea5e9;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #f8fafc;
    cursor: pointer;
    transition: all 0.3s ease-in-out;

    &:hover {
        background-color: #0284c7;
    }
}




/* ========== CTA ======== */
.cta {
    padding: var(--section-padding);
    background-color: var(--color-dark);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    color: aliceblue;
    gap: 1rem;
}

.cta h3 {
    margin-bottom: 1rem;
}

.cta-button {
    --primary: var(--color-input-1);
    --neutral-1: #f7f8f7;
    --neutral-2: #e7e7e7;
    --radius: 14px;

    cursor: pointer;
    border-radius: var(--radius);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    border: none;
    box-shadow: 0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2),
        0 10px 20px rgba(0, 0, 0, 0.2), 0 4px 5px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all 0.3s ease;
    min-width: 200px;
    padding: 20px;
    height: 60px;
    font-family: "Galano Grotesque", Poppins, Montserrat, sans-serif;
    font-style: normal;
    font-size: 18px;
    font-weight: 600;
}

.cta-button:hover {
    transform: scale(1.02);
    box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
        0 15px 30px rgba(0, 0, 0, 0.3), 0 10px 3px -3px rgba(0, 0, 0, 0.04);
}

.cta-button:active {
    transform: scale(1);
    box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
        0 10px 3px -3px rgba(0, 0, 0, 0.2);
}

.cta-button:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    border: 2.5px solid transparent;
    background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,
        linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45)) border-box;
    z-index: 0;
    transition: all 0.4s ease;
}

.cta-button:hover::after {
    transform: scale(1.05, 1.1);
    box-shadow: inset 0 -1px 3px 0 rgba(255, 255, 255, 1);
}

.cta-button::before {
    content: "";
    inset: 7px 6px 6px 6px;
    position: absolute;
    background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));
    border-radius: 30px;
    filter: blur(0.5px);
    z-index: 2;
}

.state p {
    display: flex;
    align-items: center;
    justify-content: center;
}

.state .icon {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: scale(1.25);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.state .icon svg {
    overflow: visible;
}

/* Outline */
.outline {
    position: absolute;
    border-radius: inherit;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.4s ease;
    inset: -2px -3.5px;
}

.outline::before {
    content: "";
    position: absolute;
    inset: -100%;
    background: conic-gradient(from 180deg,
            transparent 60%,
            white 80%,
            transparent 100%);
    animation: spin 2s linear infinite;
    animation-play-state: paused;
}

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

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

.cta-button:hover .outline {
    opacity: 1;
}

.cta-button:hover .outline::before {
    animation-play-state: running;
}

/* Letters */
.state p span {
    display: block;
    opacity: 0;
    animation: slideDown 0.8s ease forwards calc(var(--i) * 0.03s);
}

.cta-button:hover p span {
    opacity: 1;
    animation: wave 0.5s ease forwards calc(var(--i) * 0.02s);
}

.cta-button:focus p span {
    opacity: 1;
    animation: disapear 0.6s ease forwards calc(var(--i) * 0.03s);
}

@keyframes wave {
    30% {
        opacity: 1;
        transform: translateY(4px) translateX(0) rotate(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-3px) translateX(0) rotate(0);
        color: var(--primary);
    }

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

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-20px) translateX(5px) rotate(-90deg);
        color: var(--primary);
        filter: blur(5px);
    }

    30% {
        opacity: 1;
        transform: translateY(4px) translateX(0) rotate(0);
        filter: blur(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-3px) translateX(0) rotate(0);
    }

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

@keyframes disapear {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateX(5px) translateY(20px);
        color: var(--primary);
        filter: blur(5px);
    }
}

/* Plane */
.state--default .icon svg {
    animation: land 0.6s ease forwards;
}

.cta-button:hover .state--default .icon {
    transform: rotate(45deg) scale(1.25);
}

.cta-button:focus .state--default svg {
    animation: takeOff 0.8s linear forwards;
}

.cta-button:focus .state--default .icon {
    transform: rotate(0) scale(1.25);
}

@keyframes takeOff {
    0% {
        opacity: 1;
    }

    60% {
        opacity: 1;
        transform: translateX(70px) rotate(45deg) scale(2);
    }

    100% {
        opacity: 0;
        transform: translateX(160px) rotate(45deg) scale(0);
    }
}

@keyframes land {
    0% {
        transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
        opacity: 0;
        filter: blur(3px);
    }

    100% {
        transform: translateX(0) translateY(0) rotate(0);
        opacity: 1;
        filter: blur(0);
    }
}

/* Contrail */
.state--default .icon:before {
    content: "";
    position: absolute;
    top: 50%;
    height: 2px;
    width: 0;
    left: -5px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
}

.cta-button:focus .state--default .icon:before {
    animation: contrail 0.8s linear forwards;
}

@keyframes contrail {
    0% {
        width: 0;
        opacity: 1;
    }

    8% {
        width: 15px;
    }

    60% {
        opacity: 0.7;
        width: 80px;
    }

    100% {
        opacity: 0;
        width: 160px;
    }
}

/* States */
.state {
    padding-left: 29px;
    z-index: 2;
    display: flex;
    position: relative;
}

.state--default span:nth-child(4) {
    margin-right: 5px;
}

.state--sent {
    display: none;
}

.state--sent svg {
    transform: scale(1.25);
    margin-right: 8px;
}

.cta-button:focus .state--default {
    position: absolute;
}

.cta-button:focus .state--sent {
    display: flex;
}

.cta-button:focus .state--sent span {
    opacity: 0;
    animation: slideDown 0.8s ease forwards calc(var(--i) * 0.2s);
}

.cta-button:focus .state--sent .icon svg {
    opacity: 0;
    animation: appear 1.2s ease forwards 0.8s;
}

@keyframes appear {
    0% {
        opacity: 0;
        transform: scale(4) rotate(-40deg);
        color: var(--primary);
        filter: blur(4px);
    }

    30% {
        opacity: 1;
        transform: scale(0.6);
        filter: blur(1px);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}




/* ========== Footer ======== */
footer {
    padding-inline: clamp(2rem, 5vw, 5rem);
    padding-top: 2rem;
}

.footer-top {
    display: block;
    margin-bottom: 1rem;
}

.footer-top img {
    width: 100%;
    max-width: 200px;
    margin-bottom: 1rem;
}

.footer-text {
    margin-bottom: 1rem;
    font-family: var(--ff-poppins);
}

@media (min-width: 768px) {
    .footer-text {
        max-width: 50%;
        text-align: left;
        margin-bottom: 1rem;
    }

    .footer-link-box,
    .footer-list {
        text-align: left;
    }
}

.footer-social {
    display: flex;
    gap: 1rem;
    font-size: var(--fs-3);
    justify-content: flex-start;
}

.footer-social .social-link {
    background: var(--text-dark);
    color: var(--text-light);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-size: 18px;
    border-radius: 50%;
    transition: var(--transition);
    margin-bottom: 1rem;
}

.footer-social .social-link:hover {
    background: var(--color-input-1);
    color: var(--text-light);
}

.footer-link-box {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    place-items: start;
    margin: 0 auto;
}

.footer-list {
    max-width: 300px;
}

.footer-list li:first-child {
    margin-bottom: 10px;
}

.footer-link-title {
    color: var(--color-dark);
    font-family: var(--ff-poppins);
    font-size: var(--fs-4);
    font-weight: var(--fw-500);
}

.footer-link {
    color: var(--text-dark);
    font-family: var(--ff-poppins);
    padding-block: 10px;
    transition: var(--transition);
}

.footer-link:hover {
    color: var(--text-hover);
    transform: translateX(3px);
}

.footer-list .contact-item {
    padding-block: 10px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.footer-list .contact-item span {
    display: inline-block;
    color: var(--text-dark);
    font-family: var(--ff-poppins);
    font-weight: var(--fw-500);
}

.footer-list .contact-link {
    display: inline-block;
    color: var(--text-dark);
    font-family: var(--ff-poppins);
    font-weight: var(--fw-500);
}

.footer-list .contact-link address {
    font-style: normal;
}

.footer-bottom {
    padding-block: 20px;
    border-top: 1px solid var(--text-dark);
}

.copyright {
    color: var(--text-dark);
    font-family: var(--ff-poppins);
    line-height: 1.7;
    text-align: center;
}

.copyright a {
    display: inline-block;
    color: inherit;
    transition: var(--transition);
}

.copyright a:hover {
    color: var(--text-hover);
}

/* ============= Scroll up ============== */

.scrollup {
    position: fixed;
    right: .8rem;
    bottom: -50%;
    background-color: var(--color-input-1);
    color: var(--white);
    display: inline-flex;
    padding: 6px;
    font-size: 1.25rem;
    border-radius: .5rem;
    z-index: 20;
    transition: bottom .4s, transform .4s;
}

.scrollup:hover {
    transform: translateY(-.5rem);
    background-color: var(--text-hover);
}

/* Show Scroll Up */
.show-scroll {
    bottom: 4rem;
}