:root {
    --shadow: 0px 4px 80px -4px rgba(0, 0, 0, 0.04),
        0px 18px 24px -10px rgba(0, 0, 0, 0.06),
        0px 8px 8px -4px rgba(0, 0, 0, 0.04);

    --soft-shadow: 0px 4px 80px -4px rgba(0, 0, 0, 0.04),
        0px 10px 16px -6px rgba(0, 0, 0, 0.04);

    --hard-shadow: 0px 6px 32px 0px rgba(0, 0, 0, 0.04),
        0px 10px 16px 0px rgba(0, 0, 0, 0.04),
        0px 6px 64px -4px rgba(0, 0, 0, 0.04);

    --card-shadow: 0px 16px 32px -2px rgba(0, 0, 0, 0.06),
        0px 2px 12px -4px rgba(0, 0, 0, 0.02);

    --red-button-shadow: 0px 0px 0px 0px rgba(229, 52, 52, 0.15),
        0px 4px 8px 0px rgba(229, 52, 52, 0.15),
        0px 14px 14px 0px rgba(229, 52, 52, 0.13),
        0px 32px 19px 0px rgba(229, 52, 52, 0.08),
        0px 57px 23px 0px rgba(229, 52, 52, 0.02),
        0px 89px 25px 0px rgba(229, 52, 52, 0);

    --drop-shadow: 0px 4px 80px -4px rgba(0, 0, 0, 0.04),
        0px 10px 16px -6px rgba(0, 0, 0, 0.04);

    --footer-red-shadow: 0px 0px 0px 0px rgba(239, 52, 48, 0.1),
        0px 25px 56px 0px rgba(239, 52, 48, 0.1),
        0px 102px 102px 0px rgba(239, 52, 48, 0.09),
        0px 229px 137px 0px rgba(239, 52, 48, 0.05),
        0px 407px 163px 0px rgba(239, 52, 48, 0.01),
        0px 635px 178px 0px rgba(239, 52, 48, 0);

    --green-gradient-badge: linear-gradient(
        204deg,
        #01f91a -18.49%,
        #359b05 84.72%
    );

    --gray-gradient-bg: linear-gradient(219deg, #fff 20.37%, #f1f1f1 72.72%);

    --red-gradient-button: linear-gradient(
        71.03deg,
        #e82320 23.31%,
        #fa504d 135.49%
    );

    --stroke-red: #e82320;
    --stroke-green: #01f91a;
    --stroke-gray: rgba(64, 72, 82, 0.1);

    --text-red: linear-gradient(214deg, #ff3733 15.18%, #9a1212 120.58%);
    /*
  font General Sans
   */
    --general-sans-400: "GeneralSans-Regular", sans-serif;
    --general-sans-500: "GeneralSans-Medium", sans-serif;
    --general-sans-600: "GeneralSans-Semibold", sans-serif;
    --general-sans-700: "GeneralSans-Bold", sans-serif;

    /* font weights available are 200 - 700 */
}
html {
    scroll-behavior: smooth;
}
html,
body {
    font-family: var(--general-sans-400);
    font-weight: normal;
}
/* set font color for every text */
body {
    color: #151515;
}

.section-center {
    padding-inline: 24px;
    max-width: 1344px;
    margin-inline: auto;
}

.truncate-1-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.truncate-2-lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.truncate-3-lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.truncate-4-lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.truncate-5-lines {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
/*
navigation
*/
.nav-center {
    background-color: white;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 990;
    margin-bottom: 24px;
    border: 1px solid var(--stroke-gray);
}
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
}
.navigation a img {
    height: 52px;
    object-fit: scale-down;
    object-position: left;
}

.navigation_buttons {
    display: flex;
    align-items: center;
    gap: 24px;
}
#navigation-desktop_menus ul {
    /*display: flex;*/
    gap: 24px;
    justify-content: start;
    align-items: center;
    display: none;
}
#navigation_search-btn,
#navigation-desktop_menus {
    display: none;
}

/*
  mobile search
*/
#mobile_side-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    padding: 24px;
    border-radius: 24px 0 0 24px;
    background-color: white;
    z-index: 999;
    transition: all 0.2s ease-in-out;
}
#mobile_side-nav button {
    display: block;
    width: fit-content;
    margin-bottom: 24px;
}
#mobile_side-nav li a {
    padding: 24px;
    text-align: center;
    display: block;
}
#backdrop {
    position: fixed;
    transition: all 0.2s ease-in-out;
    top: 0;
    right: 0;
    width: 0;
    height: 100vh;
    backdrop-filter: blur(5px);
    z-index: 998;
    background-color: rgba(0, 0, 0, 0.3);
}
#backdrop.open {
    width: 100%;
}
#mobile_side-nav.open {
    right: 0;
}
#mobile-search {
    position: fixed;
    top: 0;
    right: -100%;
    /*right: 0;*/
    width: 100%;
    height: 100vh;
    padding: 24px;
    background-color: white;
    z-index: 999;
    transition: all 0.2s ease-in-out;
}
#mobile-search .x-btn {
    margin-bottom: 12px;
    display: block;
    width: fit-content;
    margin-left: auto;
}
#mobile-search.open {
    right: 0;
}
#mobile-search label {
    display: block;
    position: relative;
    background-color: #e7e7e7;
    padding: 12px 16px 12px 46px;
    border-radius: 999px;
}
#mobile-search label img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 12px;
}
#mobile-search input {
    display: block;
    background-color: transparent;
    width: 100%;
}
#mobile-search input:focus {
    outline: none;
}

/*
  footer
*/
footer {
    background: linear-gradient(71deg, #e82320 23.31%, #fa504d 135.49%);
}
footer {
    color: white;
    padding: 24px 0;
    position: relative;
    overflow: hidden;
}
footer section {
    position: relative;
    z-index: 3;
}
footer:before {
    content: "";
    position: absolute;
    background-image: url("../assets/svg/vectordownload1.svg");
    background-position: bottom center;
    height: 100%;
    width: 130%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    z-index: 2;
}
footer:after {
    content: "";
    position: absolute;
    background-image: url("../assets/svg/vectordownload2.svg");
    background-position: bottom center;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    background-repeat: no-repeat;
    z-index: 1;
}
#footer-devider {
    border-bottom: 1px solid white;
    margin-bottom: 24px;
}
footer h4 {
    font-family: var(--general-sans-600);
    font-size: 20px;
    line-height: 28px;
}
.footer-flex {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
footer .section-center > div:has(> img) {
    margin-bottom: 24px;
}
.footer-below > div:first-child {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}
.footer-below > div:first-child div {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
}
.footer-below > div:last-child {
    text-align: center;
}
.footer-flex > div p {
    display: flex;
    gap: 8px;
    align-items: center;
}
.footer-main > div:nth-child(2) > div {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/*
  scroll bar
*/
.visible-scroll-on-desktop::-webkit-scrollbar {
    display: none;
}
/*
  title + button to scroll horizontally
*/
.title-w-btn-to-scroll {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--general-sans-600);
}
.title-w-btn-to-scroll h2 {
    font-size: 20px;
    line-height: 28px;
    font-family: var(--general-sans-600);
}
.title-w-btn-to-scroll .btn-to-scroll-horizontall {
    display: flex;
    align-items: center;
    gap: 8px;
}
.title-w-btn-to-scroll .btn-to-scroll-horizontall button {
    display: grid;
    box-shadow: var(--hard-shadow);
    place-items: center;
    height: 32px;
    width: 32px;
    padding: 8px;
    border-radius: 8px;
}
/*
  scroll content style
*/
.scroll-content {
    display: flex;
    gap: 24px;
    overflow-x: scroll;
    padding-right: 3rem;
}
.scroll-content > div {
    padding: 20px;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    margin-bottom: 24px;
    flex-shrink: 0;
}
.scroll-content > div > img {
    width: 280px;
    height: 120px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    margin-bottom: 16px;
}
.scroll-content > div h5 {
    font-size: 20px;
    line-height: 32px;
    font-family: var(--general-sans-600);
    margin-bottom: 4px;
}

.scroll-content > div h5 + p {
    color: #151515;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 8px;
}
/*
    articles content
*/
details {
    margin: 24px 0;
}
summary {
    cursor: pointer;
    font-family: var(--general-sans-500);
    font-size: 18px;
}
summary + p {
    margin-left: 1rem;
}
img.satu-banding-satu {
    aspect-ratio: 1/1;
    max-height: 400px;
    object-fit: cover;
    margin: 1rem auto;
    border-radius: 16px;
}
img.ukuran-video {
    max-height: 567px;
    object-fit: cover;
    margin: 1rem auto;
    aspect-ratio: 16/9;
    border-radius: 16px;
}
ul.dotted-list li {
    list-style-type: disc;
    margin-left: 1rem;
    margin-bottom: 8px;
}

/*
    no package found
*/
.no-package-found {
    font-size: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--stroke-red);
    width: fit-content;
    font-family: var(--general-sans-600);
    margin-top: 130px;
    margin-bottom: 130px;
    margin-inline: auto;
}

@media screen and (min-width: 768px) {
    details {
        max-width: 80%;
    }
    .footer-main {
        display: grid;
        align-items: center;
        justify-content: space-between;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
    }
    .footer-below {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
    }
    .footer-below > div:first-child {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 16px;
        margin-bottom: 16px;
    }
    .footer-flex > p {
        max-width: 500px;
    }
    .footer-main > div:nth-child(2) > div {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
    .footer-flex p {
        margin-bottom: unset;
        line-height: unset;
    }
    footer:after {
        right: -20rem;
    }
    footer:before {
        left: -9rem;
        width: 110%;
    }
}

@media screen and (min-width: 1024px) {
    .navigation {
        height: unset;
        justify-content: unset;
        display: grid;
        grid-template-columns: 170px minmax(415px, 550px) minmax(430px, 1fr);
        padding: 24px;
    }
    .navigation a img {
        /* height: unset; */
        width: 170px;
        height: 52px;
        object-fit: scale-down;
        object-position: left;
    }
    #navigation-desktop_menus {
        display: block;
        margin-left: 70px;
    }
    #navigation-desktop_menus ul {
        display: flex;
        font-family: var(--general-sans-500);
    }
    .navigation_buttons {
        display: none;
    }
    #navigation_search-btn {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 16px;
    }
    #navigation_search-btn form {
        position: relative;
    }
    #navigation_search-btn form * {
        display: block;
    }
    #navigation_search-btn form label {
        display: flex;
        width: 180px;
        background-color: #f3f3f4;
        border-radius: 999px;
        margin-left: auto;
        transition: 0.2s all ease-in-out;
    }
    #navigation_search-btn form img {
        padding-inline: 8px;
    }
    #navigation_search-btn form input {
        background-color: transparent;
        font-size: 14px;
        padding: 10px 0;
    }
    #navigation_search-btn form {
        width: 100%;
    }
    #navigation_search-btn form input:focus {
        outline: none;
    }
    #navigation_search-btn form label:has(input:focus) {
        width: 100%;
    }
    #navigation_search-btn button {
        display: flex;
        padding: 10px 24px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        background: var(--red-gradient-button);
        color: white;
        font-family: var(--general-sans-600);
        box-shadow: var(--red-button-shadow);
    }
    /*
    scrollbar
  */
    .visible-scroll-on-desktop::-webkit-scrollbar {
        height: 8px;
        width: 11px;
        display: block;
    }
    .visible-scroll-on-desktop::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 999px;
        height: 1px;
        margin-inline: 2rem;
    }
    .visible-scroll-on-desktop::-webkit-scrollbar-thumb {
        background: var(--stroke-red);
        height: 3px;
        width: 200px;
        border-radius: 999px;
    }
}

@media screen and (min-width: 1440px) {
    .section-center {
        padding-inline: 0;
    }
    .navigation {
        padding-top: 20px;
        padding-bottom: 20px;
    }
}


.ql-align-center {
    text-align: center !important;
}

.ql-align-left {
    text-align: left !important;
}

.ql-align-right {
    text-align: right !important;
}

.ql-align-justify {
    text-align: justify !important;
}