@font-face {
    font-family: "VAGRounded-thin";
    src: url("../assets/fonts/VAGRoundedStd-Thin.ttf")
        format("truetype");
    /* font-weight: 300;*/
    font-style: normal;
}
@font-face {
    font-family: "VAGRounded-bold";
    src: url("../assets/fonts/VAGRoundedStd-Bold.ttf")
        format("truetype");
    /* font-weight: 700;*/
    font-style: normal;
}
@font-face {
    font-family: "VAGRounded-black";
    src: url("../assets/fonts/VAGRoundedStd-Black.ttf")
        format("truetype");
    /* font-weight: 700;*/
    font-style: normal;
}
@font-face {
    font-family: "VAGRounded-light";
    src: url("../assets/fonts/VAGRoundedStd-Light.ttf")
        format("truetype");
    /* font-weight: 700;*/
    font-style: normal;
}

:root {
    --app-width: 440px;
    --app-bg: #91e7ff;
    --page-bg: #f1f2f6;
    --title-color: #2b7ec2;
}

* {
    font-family: "VAGRounded-light", sans-serif;
}

html,
body {
    margin: 0;
    scroll-behavior: smooth;
    padding: 0;
    font-family: "VAGRounded-light", sans-serif;
    background: var(--page-bg);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
video,
canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

.viewport {
    height: 100dvh;
    background: var(--page-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(env(safe-area-inset-top, 0px), 0px)
        max(env(safe-area-inset-right, 0px), 0px)
        max(env(safe-area-inset-bottom, 0px), 0px)
        max(env(safe-area-inset-left, 0px), 0px);
}

.app {
    width: min(var(--app-width), 100vw);
    height: 100%;
    background: var(--app-bg);
    display: flex;
    flex-direction: column;
}

.app-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.app-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.zindex-20 {
    z-index: 20;
}

h2 {
    margin: 0;
    font-size: 24px;
    text-align: center;
    font-family: "VAGRounded-bold", sans-serif;
    color: var(--title-color);
}
.font-10 {
    font-size: 10px;
}
.font-12 {
    font-size: 12px;
}
.font-13 {
    font-size: 13px;
}
.font-16 {
    font-size: 16px;
}
.font-20 {
    font-size: 20px;
}
.font-24 {
    font-size: 24px;
}
.font-weight-600 {
    font-weight: 600;
}
.p-0 {
    padding: 0 !important;
}
.m-0 {
    margin: 0 !important;
}
.mt-2 {
    margin-top: 2rem !important;
}
.mt-3 {
    margin-top: 3rem !important;
}
.mt-4 {
    margin-top: 4rem;
}
.mb-3 {
    margin-bottom: 3rem !important;
}
.mb-4 {
    margin-bottom: 4rem;
}
.my-2 {
    margin: 2rem 0;
}
.widht-100 {
    width: 100px;
}
.max-widht-200 {
    width: 200px !important;
}

.title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
}
.title .tangga-nada {
    position: absolute;
    height: 100px;
}
.title .not-nada {
    width: 40px !important;
    z-index: 10;
}
.title h2 {
    z-index: 10;
    font-size: 20px;
    margin: 0;
    color: var(--title-color);
    font-style: normal;
    font-weight: 1000;
    font-family: "VAGRounded-bold";
    text-shadow: rgb(255, 255, 255) 3px 0px 0px,
        rgb(255, 255, 255) 2.83487px 0.981584px 0px,
        rgb(255, 255, 255) 2.35766px 1.85511px 0px,
        rgb(255, 255, 255) 1.62091px 2.52441px 0px,
        rgb(255, 255, 255) 0.705713px 2.91581px 0px,
        rgb(255, 255, 255) -0.287171px 2.98622px 0px,
        rgb(255, 255, 255) -1.24844px 2.72789px 0px,
        rgb(255, 255, 255) -2.07227px 2.16926px 0px,
        rgb(255, 255, 255) -2.66798px 1.37182px 0px,
        rgb(255, 255, 255) -2.96998px 0.42336px 0px,
        rgb(255, 255, 255) -2.94502px -0.571704px 0px,
        rgb(255, 255, 255) -2.59586px -1.50383px 0px,
        rgb(255, 255, 255) -1.96093px -2.27041px 0px,
        rgb(255, 255, 255) -1.11013px -2.78704px 0px,
        rgb(255, 255, 255) -0.137119px -2.99686px 0px,
        rgb(255, 255, 255) 0.850987px -2.87677px 0px,
        rgb(255, 255, 255) 1.74541px -2.43999px 0px,
        rgb(255, 255, 255) 2.44769px -1.73459px 0px,
        rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}
.outer-shadow {
    margin: 0;
    color: var(--title-color);
    font-style: normal;
    font-weight: 1000;
    font-family: "VAGRounded-bold";
    text-shadow: rgb(255, 255, 255) 3px 0px 0px,
        rgb(255, 255, 255) 2.83487px 0.981584px 0px,
        rgb(255, 255, 255) 2.35766px 1.85511px 0px,
        rgb(255, 255, 255) 1.62091px 2.52441px 0px,
        rgb(255, 255, 255) 0.705713px 2.91581px 0px,
        rgb(255, 255, 255) -0.287171px 2.98622px 0px,
        rgb(255, 255, 255) -1.24844px 2.72789px 0px,
        rgb(255, 255, 255) -2.07227px 2.16926px 0px,
        rgb(255, 255, 255) -2.66798px 1.37182px 0px,
        rgb(255, 255, 255) -2.96998px 0.42336px 0px,
        rgb(255, 255, 255) -2.94502px -0.571704px 0px,
        rgb(255, 255, 255) -2.59586px -1.50383px 0px,
        rgb(255, 255, 255) -1.96093px -2.27041px 0px,
        rgb(255, 255, 255) -1.11013px -2.78704px 0px,
        rgb(255, 255, 255) -0.137119px -2.99686px 0px,
        rgb(255, 255, 255) 0.850987px -2.87677px 0px,
        rgb(255, 255, 255) 1.74541px -2.43999px 0px,
        rgb(255, 255, 255) 2.44769px -1.73459px 0px,
        rgb(255, 255, 255) 2.88051px -0.838247px 0px;
}

.btn-white {
    background-color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 5px 10px;
    color: var(--title-color);
    font-size: 16px;
    font-weight: 600;
    font-family: "VAGRounded-bold";
    cursor: pointer;
}
.btn-white-small {
    background-color: #ffffff;
    border: none;
    border-radius: 20px;
    padding: 2px 5px;
    color: var(--title-color);
    font-size: 12px;
    font-weight: 600;
    font-family: "VAGRounded-bold";
    cursor: pointer;
}

/* navbar */
.navbar {
    height: 72px;
    padding: 0 15px !important;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-family: "Avenir", sans-serif;
    font-weight: 700;
    font-size: 21px;
    font-style: normal;
    color: rgba(0, 0, 0, 0.3);
}
.navbar.navbar-active {
    justify-content: flex-end;
    transition: justify-content 0.4s ease;
}
.navbar > .logo {
    width: 120px;
}
.logo.centered {
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    z-index: 2001;
    transition: all 0.5s ease;
}
.nav-items {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    top: 0;
    left: 0;
    background-color: #49bdd4;
    padding: 100px 20px 20px;
    width: 100%;
    height: 100dvh;
    margin: 0;
    z-index: 2000;
    transform: translateX(-130%);
    transition: all 1s;
    opacity: 0;
}
.navbar > .nav-items > ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
    margin: 0;
    padding: 0;
    height: 100%;
    gap: 32px;
}
.navbar > .nav-items > ul > li {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    cursor: pointer;
}
.navbar > .nav-items > ul > li > a {
    color: #ffffff !important;
    text-decoration: none;
    font-family: "Avenir", sans-serif;
    font-size: 20px;
    font-style: normal;
    color: rgba(0, 0, 0, 0.3);
}
.navbar > .nav-items > ul > li > a:hover {
    color: #2b7ec2;
    font-weight: 700;
}
.navbar-actived > a > span {
    color: #ffffff !important;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
}
.toggle {
    cursor: pointer;
    background-color: #2b7ec2;
    border-radius: 10px;
    z-index: 2002;
}
.toggle.active {
    background-color: transparent !important;
    /* transition: all 0.3s ease; */
}
.menu-toggle {
    display: flex;
    flex-direction: column;
    height: 20px;
    justify-content: space-between;
    margin: 10px;
    position: relative;
}
.menu-toggle input {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -5px;
    left: -1px;
    opacity: 0;
    cursor: pointer;
}
.menu-toggle > span {
    display: block;
    width: 28px;
    height: 3px;
    color: #ffffff;
    border-radius: 3px;
    background-color: #ffffff;
    transition: all 0.3s;
}
.menu-toggle > span:nth-child(4) {
    width: 18px;
    align-self: flex-end;
    transition: all 0.3s ease;
}
.menu-toggle > input:checked ~ span:nth-child(3) {
    transform: scale(0);
    opacity: 0;
}
.menu-toggle input:checked ~ span:nth-child(2) {
    transform: translateY(8px) translateX(1px) rotateZ(45deg);
}
.menu-toggle input:checked ~ span:nth-child(4) {
    width: 28px;
    transform: translateY(-9px) rotateZ(-45deg);
}
.social-media {
    display: flex;
    align-items: start;
    gap: 12px;
}
.social-media img {
    align-items: start;
    width: 30px;
}
.nav-items.slide {
    transform: translateX(0);
    opacity: 1;
}
.navbar > .nav-items > ul {
    flex-direction: column;
    gap: 20px;
}
.navbar > .nav-items > ul > li {
    justify-content: start;
    height: 30px;
    width: fit-content;
}
.navbar-bg-blue {
    background-color: #49bdd4 !important;
}

.content {
    position: relative;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.content .kid-img {
    position: absolute;
    width: 190px;
    right: -15px;
    bottom: -5px;
}
.content .kid-img2 {
    position: absolute;
    width: 140px;
    right: -15px;
    bottom: 30px;
}
.content .star {
    position: absolute;
    width: 160px;
    right: 0;
    top: 200px;
}
.content .star1-2 {
    position: absolute;
    width: 160px;
    bottom: -10px;
    left: -5px;
}
.content .star-1 {
    position: absolute;
    width: 160px;
    bottom: 200px;
    right: -2px;
}
.content .star-2 {
    position: absolute;
    width: 160px;
    bottom: 70px;
    left: -2px;
}
.content .star-3 {
    position: absolute;
    width: 160px;
    top: 250px;
    right: -2px;
}
.content .tangga-nada {
    position: absolute;
    top: 20px;
}
.content .achievment-not {
    position: absolute;
    width: 60px;
    left: -40px;
    top: 5px;
}
.content .cloud-articles {
    position: absolute;
    width: 190px;
    right: -15px;
    top: -25px;
}
.content .star-articles {
    position: absolute;
    width: 120px;
    right: -10px;
    top: 230px;
}
.whats-on-items {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.whats-on-items img {
    max-width: 265px;
    border-radius: 30px;
    object-fit: fill;
}
.whats-on-items button {
    min-width: 265px;
    padding: 5px 5px;
    display: flex;
    justify-content: center;
    gap: 10px;
    border-radius: 20px;
    border: none;
    color: var(--title-color);
    font-family: "VAGRounded-bold";
    font-size: 1rem;
    cursor: pointer;
}

.content .card {
    overflow: hidden;
    position: relative;
    background-color: #ffffff;
    border-radius: 25px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 255px;
}

.content .card .card-content {
    width: 100%;
    /* border-radius: 30px; */
}

.content .card .card-content img {
    width: 100%;
    object-fit: fill;
    /* border-radius: 30px; */
}
.content .card .card-footer {
    position: absolute;
    border: 0;
    bottom: 0;
    padding: 0;
    overflow: hidden;
}
.content .card .card-footer img {
    width: 80%;
    object-fit: contain;
}
.content .card .card-footer .card-footer-content {
    position: relative;
    width: 100%;
}
.content .card .card-footer .card-footer-content .footer-content {
    position: absolute;
    width: 100%;
    min-height: 100px;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    align-items: center;
    color: #ffffff;
    font-size: 12px;
}
.card-footer-content .footer-content a {
    font-family: "VAGRounded-light", sans-serif;
    font-weight: 600 !important;
    text-decoration: none;
}
.footer-content.justify-end {
    justify-content: end;
}
.footer-content.justify-center {
    justify-content: center;
}
.footer-content.justify-start {
    justify-content: start;
}

/* --- grid content --- */
.grid-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}
.grid-item {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 1.2rem;
    z-index: 10;
}
.grid-item-coach {
    width: 100%;
    border-radius: 16px;
    border: none;
    display: flex;
    align-items: stretch;
    justify-content: center;
    z-index: 10;
}
.grid-item-coach .program-content-card {
    width: 100%;
    height: auto;
    border-radius: 20px;
}
.grid-item-coach .card-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 90px;
}

/* --- grid content 2-3 --- */
.grid-2-1 {
    --gap: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
}
.grid-2-1 > .item {
    aspect-ratio: 1 / 1;
    max-width: 300px;
    width: 100%;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}
.grid-2-1 > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - (var(--gap) / 2));
}

/* --- youtube content --- */
.youtube-content {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 10px 0;
}
.youtube-content .youtube-frame {
    position: absolute;
    width: 200px;
    height: 124px;
    border-radius: 20px;
    top: 50%;
    left: 53%;
    transform: translate(-50%, -50%);
    border: 4px solid #ffffff;
    border-radius: 20px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
}
.youtube-content .youtube-frame iframe {
    border-radius: 15px;
    width: 200px;
    height: 124px;
}
/* --- footer homepage --- */
.footer-homepage {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.footer-homepage .footer-homepage-content {
    /* position: absolute; */
    background-color: #60cb4c;
    bottom: 0;
    padding: 0px 20px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
}
.footer-homepage .footer-homepage-content p {
    margin: 0;
    padding: 0;
    font-size: 9px;
    color: #ffffff;
}
.footer-homepage .footer-homepage-content .social-media {
    display: flex;
    align-items: start;
    gap: 5px;
}
.footer-homepage .footer-homepage-content .social-media img {
    align-items: start;
    width: 20px;
}

/* --- footer article --- */
.footer-article {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}
.footer-article .footer-article-content {
    /* position: absolute; */
    background-color: #01d745;
    bottom: 0;
    padding: 0px 20px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
}
.footer-article .footer-article-content p {
    margin: 0;
    padding: 0;
    font-size: 9px;
    color: #ffffff;
}
.footer-article .footer-article-content .social-media {
    display: flex;
    align-items: start;
    gap: 5px;
}
.footer-article .footer-article-content .social-media img {
    align-items: start;
    width: 20px;
}
/* Register Footer */
.footer-register {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
}

.footer-register .footer-register-content {
    /* position: absolute; */
    background-color: #61cb66;
    bottom: 0;
    padding: 0px 20px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: start;
    gap: 16px;
}
.footer-register .footer-register-content p {
    margin: 0;
    padding: 0;
    font-size: 9px;
    color: #ffffff;
}
.footer-register .footer-register-content .social-media {
    display: flex;
    align-items: start;
    gap: 5px;
}
.footer-register .footer-register-content .social-media img {
    align-items: start;
    width: 20px;
}
.footer-register .tree-img {
    position: absolute;
    top: -75px;
    right: 0;
    width: 100px;
}
/* --- edducation banner --- */
.education-banner {
    position: relative;
    overflow: hidden;
}
.education-banner img {
    width: 100%;
    object-fit: contain;
}
.education-banner .education-title {
    position: absolute;
    bottom: -3px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.education-banner .education-banner-content {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    padding: 10px 40px 38px;
    display: flex;
    justify-content: center;
    align-items: end;
    gap: 10px;
}
.education-card {
    max-width: 100px;
    background-color: #ffffff;
    border-radius: 5px;
    overflow: hidden;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.education-card .education-card-image {
    position: relative;
}
.education-card .education-card-image span {
    position: absolute;
    background-color: #fff;
    font-weight: 500;
    padding: 2px;
    font-size: 8px;
    top: 4px;
    left: 4px;
    border-radius: 5px;
}
.education-card .education-card-content {
    margin: 5px;
}
.education-card .education-card-content p {
    font-size: 7px;
    margin: 0;
}
.education-card .education-card-footer {
    margin: 0px 5px;
}
.education-card .education-card-footer a {
    display: flex;
    padding: 5px;
    font-size: 8px;
    justify-content: end;
    gap: 3px;
    text-decoration: none;
}
.education-card .education-card-footer img {
    width: 15px;
}

/* divider */
.divider {
    width: 100%;
    height: 2px;
    border-top: #949494 solid 0.8px;
}

/* hear song card */
.hear-song-content {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}
.hear-song-content .tangga-nada {
    position: absolute;
    top: 25%;
}
.hear-song-card {
    z-index: 1;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 15px;
    border-radius: 25px;
    background-color: #ffffff;
    color: var(--title-color);
}
.hear-song-card h2 {
    margin: 0 0 10px;
    font-size: 24px;
    text-align: center;
    font-family: "VAGRounded-bold", sans-serif;
}
.hear-song-card p {
    margin: 0;
    font-size: 15px;
    text-align: center;
    font-family: "VAGRounded-thin", sans-serif;
    color: var(--title-color);
}
.hear-song-card img {
    width: 190px;
    margin-bottom: 30px;
}

/* program */
.program-banner {
    width: 100%;
    position: relative;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    font-size: 13px;
}
.program-banner .banner-img {
    max-width: 330px;
    border: #ffffff 5px solid;
    border-radius: 29px;
    z-index: 20;
}
.program-banner .cloud {
    width: 124px;
    position: absolute;
    left: 0px;
    top: 180px;
    z-index: 1;
}
.banner-content {
    z-index: 20;
}

.studio-class-card {
    position: relative;
    max-width: 255px;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 30px;
    margin-bottom: 15px;
    box-shadow: 3px 5px 27px -8px rgba(0, 0, 0, 0.43);
    -webkit-box-shadow: 3px 5px 27px -8px rgba(0, 0, 0, 0.43);
    -moz-box-shadow: 3px 5px 27px -8px rgba(0, 0, 0, 0.43);
}
.studio-class-card img {
    border-radius: 20px;
}
.studio-class-card .studio-class-btn {
    position: absolute;
    width: calc(100% - 20px);
    display: flex;
    justify-content: center;
    bottom: -15px;
}
.studio-class-card .studio-class-btn a {
    background-color: #ffffff;
    min-width: 100px;
    border: none;
    border-radius: 20px;
    padding: 5px 10px;
    color: var(--title-color);
    font-size: 16px;
    font-weight: 600;
    font-family: "VAGRounded-bold";
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

/* program content */
.program-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.program-content-card {
    background-color: #ffffff;
    max-width: 160px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
.program-content-card p {
    font-size: 8px;
    font-weight: 600;
}
.program-content-card .card-content {
    padding: 10px;
    margin-bottom: 90px;
    color: var(--title-color);
    text-align: center;
    font-family: "VAGRounded-light", sans-serif;
}

.program-content-card .footer-text {
    color: #ffffff;
}
.coach-card {
    width: calc(100% - 20px);
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 40px;
}
.coach-card img {
    width: 70px;
    border-radius: 50%;
    z-index: 20;
}
.program-card-footer img {
    position: absolute;
    bottom: 0;
}
.program-card-footer .footer-content {
    position: absolute;
    z-index: 30;
    font-size: 12px;
    bottom: 0;
    text-align: center;
    width: 100%;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 5px;
}

/* Articles */

.list-article {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 10px;
    gap: 20px;
    grid-auto-rows: minmax(100px, auto);
}
.list-article > .article-card {
    background-color: rgba(255, 255, 255, 0.8);
    background-color: #fff;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 4px 4px 40px -27px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 4px 4px 40px -27px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 4px 4px 40px -27px rgba(0, 0, 0, 0.75);
    z-index: 10;
}
.list-article > .article-card > img {
    width: 100%;
}
.list-article > .article-card > .article-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0px 20px 10px;
    font-size: 12px !important;
}
.list-article > .article-card > .article-content > .description {
    color: #005d92;
    font-family: "VAGRounded-light", sans-serif;
    font-weight: 600;
    margin: 10px 0px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em;
    min-height: calc(1.5em * 3);
}
.list-article > .article-card > .article-content > a {
    color: #005d92;
    font-family: "VAGRounded-light", sans-serif;
    font-weight: 600;
    font-size: 12px !important;
    text-decoration: none;
    font-size: 0.9rem;
    margin: 0;
    min-height: none;
}
.article-divider {
    border: 1px dashed #d7922b;
    margin: 5px 0;
}

/* ---------- pagination ---------- */
.pagination {
    display: flex;
    justify-content: end;
    margin: 10px 0;
    gap: 5px;
}

.pagination > button {
    min-width: 30px;
    padding: 5px;
    font-size: 14px;
    background-color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.pagination > button:hover {
    background-color: #ff9500;
    color: #fff;
}

.pagination > .actived-btn {
    background-color: #ff9500;
    color: #fff;
}

/* --- container register --- */
.container-register {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: url(".../tampilanbaru/assets/illustration/bg-registration.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #ffffff;
}
.container-register > .illustration {
    /* position: absolute; */
    object-fit: contain;
    width: 100%;
}
.container-register > .illustration > img {
    width: 100%;
}
.container-register > .form {
    padding: 20px 20px;
    width: 100%;
    max-width: 750px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.container-register > .form > p {
    font-weight: 500;
}
.container-register > .form label {
    font-weight: 600;
    font-family: "VAGRounded-light", sans-serif;
    color: #2b7ec2;
    font-size: 14px;
}
.custom-btn {
    /* width: 100%; */
    padding: 8px 20px;
    border-radius: 50px;
    border: 0;
    background-color: #f06924;
    color: #fff;
    font-family: "VAGRounded-light", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    z-index: 2;
}
.custom-btn:hover {
    background-color: #af4e1d;
}
.custom-btn:disabled {
    background-color: #ebae8f;
}

/* --- Custom Field Rounded for register form --- */
.custom-field {
    border-radius: 50px !important; /* override default bootstrap radius */
    padding: 10px 20px;
    font-size: 14px;
    font-family: "VAGRounded-light", sans-serif;
    border: 1px solid #ccc;
    outline: none;
    transition: all 0.2s ease-in-out;
}
.custom-field:focus {
    border-color: #2b7ec2;
    box-shadow: 0 0 0 3px rgba(43, 126, 194, 0.25);
}
select.custom-field {
    appearance: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg fill='%232b7ec2' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    cursor: pointer;
}
.custom-field:focus {
    background-color: #f9fcff;
}

.register-title {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 30px 0;
}
.register-cloud {
    position: absolute;
    width: 100%;
    bottom: 0;
}

/* Button Pesan */
.btn-pesan-container {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    bottom: 0;
}
.btn-pesan {
    box-shadow: inset 0px -21px 6px -18px #fbafe3;
    background: linear-gradient(to bottom, #ff5bb0 5%, #ef027d 100%);
    background-color: #ff5bb0;
    border-radius: 31px;
    border: 2px solid #ee1eb5;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 4px 20px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #c70067;
}
.btn-pesan:hover {
    background: linear-gradient(to bottom, #ef027d 5%, #ff5bb0 100%);
    background-color: #ef027d;
}
.btn-pesan:active {
    position: relative;
    top: 1px;
}

/* Merchandise */
.merchandise-container {
    position: relative;
}
.merchandise-container .merchandise-list {
    position: absolute;
    top: 110px;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 10px;
}
.merchandise-list .merchandise-item {
    background-color: #ffffff;
    max-width: 80px;
    cursor: pointer;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.merchandise-list .merchandise-item:hover {
    background-color: rgb(190, 190, 190);
}
.merchandise-list .merchandise-item img {
    width: 90px;
}
.merchandise-list .merchandise-item .divider {
    width: 90%;
    height: 2px;
    border-top: #d8d8d8 solid 0.8px;
}
.merchandise-list .merchandise-item p {
    color: var(--title-color);
    font-size: 10px;
    text-align: center;
    font-weight: 700;
    margin: 5px 0;
}

/* Games */
.games-container {
    position: relative;
}
.games-container .game-content {
    width: 100%;
    position: absolute;
    top: 20px;
}
.game-list {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    z-index: 10;
}

.game-list a {
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 10;
}

.game-list a img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 12px;
    z-index: 10;
}

.game-list a:hover {
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* footer-merchandise */
.footer-marchandise {
    position: relative;
}
.footer-marchandise .footer-logo {
    position: absolute;
    bottom: 50px;
    left: 20px;
    width: 65px;
}
.footer-marchandise-content {
    position: absolute;
    bottom: 0;
    padding: 0px 20px 20px;
    box-sizing: border-box;
    display: flex;
    align-items: start;
    gap: 16px;
}
.footer-marchandise .footer-marchandise-content p {
    margin: 0;
    padding: 0;
    font-size: 9px;
    color: #ffffff;
}
.footer-marchandise .footer-marchandise-content .social-media {
    display: flex;
    align-items: start;
    gap: 5px;
}
.footer-marchandise .footer-marchandise-content .social-media img {
    align-items: start;
    width: 20px;
}
.footer-marchandise .tree-img {
    position: absolute;
    top: -75px;
    right: 0;
    width: 100px;
}

/* Parent testimoni */
.testimoni {
    height: 380px;
}
.testimoni-tangga-nada {
    position: absolute;
    top: 150px;
    width: 100%;
}
.parent-testimoni-container {
    position: absolute;
}
.parents-testimoni-card {
    padding: 10px;
    max-width: 246px;
    background-color: #ffffff;
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 80px;
    z-index: 200;
}
.parents-testimoni-card p {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
    color: var(--title-color);
    z-index: 200;
}
.parents-testimoni-card .card-content {
    padding: 10px;
    margin-bottom: 90px;
    z-index: 200;
}
.parents-testimoni-footer {
    position: relative;
    height: 105px;
    z-index: 200;
}
.parents-testimoni-footer .testimoni-img {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    bottom: -90px;
}
.parents-testimoni-footer img {
    border-radius: 100%;
    width: 150px;
}

/* swiper-container {
    width: 100%;
    height: 100%;
}
 
swiper-slide {
    text-align: center;
    font-size: 18px;
}
 
swiper-slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
} */

swiper-container {
    width: 100%;
}

swiper-slide {
    font-size: 18px;
    color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 60px 0;
    display: flex;
    justify-content: center;
}

/* Sembunyikan icon default */
.mySwiper {
    --swiper-navigation-size: 0;
}

/* Atur area klik & posisi tombol bawaan (part names: button-prev/next) */
.mySwiper::part(button-prev),
.mySwiper::part(button-next) {
    width: 44px;
    height: 44px;
    background: transparent;
    top: 50%;
    transform: translateY(-50%);
}

/* Karena ::part gak bisa punya ::before/::after, pakai mask untuk bikin segitiga */
.mySwiper::part(button-next) {
    background: #fff;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="8,4 8,20 18,12"/></svg>')
        center / 70% 70% no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="8,4 8,20 18,12"/></svg>')
        center / 70% 70% no-repeat;
    right: 16px;
}
.mySwiper::part(button-prev) {
    background: #fff;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="16,4 16,20 6,12"/></svg>')
        center / 70% 70% no-repeat;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><polygon points="16,4 16,20 6,12"/></svg>')
        center / 70% 70% no-repeat;
    left: 16px;
}