/* Local font (Renoric) */
@font-face {
    font-family: 'Renoric';
    src: url('../storage/assets/font/Renoric.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.kisah-slider-wrapper {
    position: relative;
    width: 100%;
    max-width: 80vw;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-inline: auto;
    --kisah-slide-gap: 1.3rem; /* base gap variable */
}
.kisah-slider-viewport {
    overflow: hidden;
    /* slight size bump so slides don't feel cramped */
    min-height: calc(100% + 4px);
}
.kisah-slider-track {
    display: flex;
    gap: var(--kisah-slide-gap);
    transition: transform .55s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    padding: .2rem .2rem .2rem .4rem;
}
.kisah-slide {
    flex: 0 0 auto;
    width: clamp(180px, 58vw, 320px); /* mobile/tablet default fluid */
    display: flex;
    justify-content: center;
}
/* Desktop / iPad and up: force exactly 3 visible by constraining viewport width */
@media (min-width: 992px){
    .kisah-slider-wrapper { 
        --kisah-slide-w: 300px;
        /* ensure wrapper can fit viewport + arrows; override global 80vw which made viewport too small */
        max-width: calc(var(--kisah-slide-w) * 3 + var(--kisah-slide-gap) * 2 + 120px);
        width: auto;
    }
    .kisah-slide { width: var(--kisah-slide-w); }
    .kisah-slider-viewport { 
        max-width: calc(var(--kisah-slide-w) * 3 + var(--kisah-slide-gap) * 2 + 4px); /* 3 cards + 2 gaps + 4px buffer */
        margin-inline: 0; /* ensure centered viewport uses full calculated width */
    }
    /* remove small track padding on desktop to avoid subtle clipping */
    .kisah-slider-track { padding: 0; }
}
/* Tweak for mid-large screens where available width is limited (992 - 1331px) */
@media (min-width: 992px) and (max-width: 1331px) {
    .kisah-slider-wrapper { --kisah-slide-w: 260px; --kisah-slide-gap: 1rem; }
    .kisah-slide { width: var(--kisah-slide-w); }
    .kisah-slider-track { gap: var(--kisah-slide-gap); }
    .kisah-slider-viewport { max-width: calc(var(--kisah-slide-w) * 3 + var(--kisah-slide-gap) * 2 + 4px); }
}
@media (min-width: 1400px){
    .kisah-slider-wrapper { --kisah-slide-w: 320px; }
    .kisah-slide { width: var(--kisah-slide-w); }
    .kisah-slider-viewport { 
        max-width: calc(var(--kisah-slide-w) * 3 + var(--kisah-slide-gap) * 2 + 4px);
    }
}
.kisah-arrow {
    background: rgba(255,255,255,0.08);
    color: white;
    border: 1px solid rgba(255,255,255,0.25);
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .25s, transform .25s, opacity .25s;
    position: absolute;
    top: calc(50% - 23px);
    z-index: 2;
}
.kisah-arrow-left {
    left: -66px;
}
.kisah-arrow-right {
    right: -66px;
}
.kisah-arrow:hover:not(:disabled){
    background: rgba(255,255,255,0.18);
    transform: scale(1.05);
}
.kisah-arrow:active:not(:disabled){
    transform: scale(.95);
}
.kisah-arrow:disabled{
    opacity: .35;
    cursor: default;
}
@media (max-width: 991.98px){
    .kisah-arrow { display: none !important; }
    .kisah-slider-viewport { overflow-x: auto; scroll-snap-type: x mandatory; }
    .kisah-slide { scroll-snap-align: start; }
    .kisah-slider-track { gap: 1rem; }
}
/* Fade edges (optional) */
.kisah-slider-wrapper::before,
.kisah-slider-wrapper::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 60px;
    pointer-events: none;
    z-index: 1;
}
.kisah-slider-wrapper::before { left: 0; }
.kisah-slider-wrapper::after { right: 0; }
/* Remove fade when at edges */
.kisah-slider-wrapper.at-start::before { opacity: 0; }
.kisah-slider-wrapper.at-end::after { opacity: 0; }

/* --- membership.html: Spinning linear gradient for .contents --- */
.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+ */
  user-select: none;         /* Standard syntax */
}
body {
    font-family: 'DM Sans', Arial, sans-serif;
    font-optical-sizing: auto;
    color:var(--lightcolor);
}
label.input-group-text{
    background:var(--primarylightcolor);
    color:white;
    border:solid 1px var(--primarylightcolor);
}
.custom-select {
    flex-grow:1;
    position: relative;
    display: inline-block;
}

.select-button {
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.675em 1em;
    border: 1px solid #caced1;
    border-radius: 0.25rem;
    background-color: white;
    color:white;
    
    cursor: pointer;
    background:transparent;
    border:solid 1px var(--primarylightcolor);
}

.arrow {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #000;
  transition: transform ease-in-out 0.3s;
}

.select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 1px solid #caced1;
  border-radius: 0.25rem;
  background-color: white;
  list-style: none;
  padding: 10px;
  margin: 10px 0 0;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-height: 200px;
  overflow-y: auto;
}

.select-dropdown::-webkit-scrollbar {
  width: 7px;
}
.select-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 25px;
}

.select-dropdown::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 25px;
}

.select-dropdown li {
  padding: 10px;
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Highlight the selected option */
.select-dropdown li.selected {
  background-color: #f2f2f2;
  border-radius: 4px;
  font-weight: bold;
}

.select-dropdown li:hover,
.select-dropdown li:focus {
  background-color: #f2f2f2;
  border-radius: 4px;
}

.select-dropdown.hidden {
  display: none;
}

.select-button[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

.background-overlay{
    background:linear-gradient(to top, var(--backgradient1) 0%, var(--darkcolor) 80%) !important;
    position: fixed;
    inset:-20px;
    z-index: -1;
    overflow:hidden;
    pointer-events: none;
}
@keyframes looplogosl {
    to {
        stroke-dashoffset: 1640;
    }
}
@keyframes looplogosR {
    from{
        stroke-dashoffset: -602;
    }
    to {
        stroke-dashoffset: 1002;
    }
}
@keyframes looplogokaki {
    from{
        stroke-dashoffset: 200;
    }
    to {
        stroke-dashoffset: 1992;
    }
}
@keyframes looplogoskepala {
    from{
        stroke-dashoffset: -400;
    }
    to {
        stroke-dashoffset: 605;
    }
}
@keyframes colorswing {
    from{
        stroke:var(--primarylightcolor);
        filter: drop-shadow(0 0 30px var(--primarylightcolor));
    }
    to {
        stroke:var(--pink-accent);
        filter: drop-shadow(0 0 30px var(--pink-accent));
    }
}
@keyframes whiteblink {
    from{
        stroke:white;
        filter: drop-shadow(0 0 30px white);
    }
    to {
        stroke:rgba(255, 255, 255, 0.7);
        filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.7));
    }
}
.animated_logo svg g path.sayapL{
    stroke:var(--primarylightcolor);
    filter: drop-shadow(0 0 30px var(--primarylightcolor));
    stroke-dasharray:1340 300;
    animation:looplogosl 5s linear infinite, colorswing 2s ease-in-out infinite alternate;
}
.animated_logo svg g path.sayapR{
    stroke:var(--primarylightcolor);
    filter: drop-shadow(0 0 30px var(--primarylightcolor));
    stroke-dasharray:1302 300;
    animation:looplogosR 5s linear infinite, colorswing 2s ease-in-out infinite alternate .5s;
}
.animated_logo svg g path.kaki{
    stroke-dasharray:1492 300;
    animation:looplogokaki 5s linear infinite, whiteblink 1s ease-in-out infinite alternate;
}
.animated_logo svg g path.kepala{
    stroke-dasharray:705 300;
    animation:looplogoskepala 5s linear infinite, whiteblink 1s ease-in-out infinite alternate;
}
.animated_logo svg g>path{
    stroke:white;
    stroke-width: 12px;
    fill:none;
    filter: drop-shadow(0 0 30px white);
}

.animated_logo{
    position:absolute;
    right:10%;
    top:10px;
    bottom:10px;
    aspect-ratio: 1/1;
}
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    mix-blend-mode: screen;
    opacity: .2;
    animation: move 25s infinite alternate ease-in-out;
}
.blob:nth-child(1) {
    width: 400px; height: 400px;
    background: var(--pink-accent);
    top: -200px; left: 100px;
    width:50vw;
    animation-duration: 30s;
}
.blob:nth-child(2) {
    width: 500px; height: 500px;
    background: #606eec;
    top: 50%; left: -200px;
    animation-duration: 35s;
}
.blob:nth-child(3) {
    width: 350px; height: 350px;
    background: #185f9e;
    bottom: -150px; right: -100px;
    animation-duration: 28s;
}
@keyframes move {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(150px, -200px) scale(1.2); }
    100% { transform: translate(-150px, 200px) scale(0.9); }
}

.gothic-font-accent {
  font-family: "Renoric", sans-serif;
  font-style: normal;
}
.t-spacing-1{
    letter-spacing: 0.07rem;
}
.t-spacing-2{
    letter-spacing: 0.17rem;
}

div.glass{
    background-color:rgba(46, 136, 220, 0.281);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
div.glass::before{
    position:absolute;
    inset:-1px;
    border-radius: inherit;
    content:'';
    padding: 2px; 
    opacity:50%;
    background:linear-gradient( 125deg, var(--primarycolor) 0%, rgba(183, 0, 255, 0) 30%) 1%;
    mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
    mask-composite: exclude; 
}

/* Section Reveal Animation */
.section-animate {
  opacity: 0;
  transform: translateY(60px) scale(0.98);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
}
.section-animate.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.span-pink{
    color:var(--pink-accent);
    /* filter:drop-shadow(0 0 3px var(--whitecolor)); */
}

.line-glow{
    position:relative;
    overflow:visible;
    width:50%;
    border-width: 3px;
    opacity:1;
    border-color:var(--primarylightcolor);
}
.line-glow::before{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    border:inherit;
    filter:blur(2px);
    z-index:1;
    content:'';
    mix-blend-mode: screen;
}

span.highlighted{
    position:relative;
    text-wrap: nowrap;
    padding:5px 0;
}
span.highlighted.rot-1::before{
    transform: rotate(-1deg) skewX(-12deg);
}
span.highlighted.animate.rot-1::before{
    transform: rotate(-1deg) scaleX(0) skewX(-12deg);
}
.visible span.highlighted.animate.rot-1::before{
    transform: rotate(-1deg) scaleX(1) skewX(-12deg);
    transform-origin: bottom left;
}

span.highlighted.rot-2::before{
    transform: rotate(-2deg) skewX(-12deg);
}
span.highlighted.animate.rot-2::before{
    transform: rotate(-2deg) scaleX(0) skewX(-12deg);
}
.visible span.highlighted.animate.rot-2::before{
    transform: rotate(-2deg) scaleX(1) skewX(-12deg);
    transform-origin: bottom left;
}

span.highlighted.rot-3::before{
    transform: rotate(-3deg) skewX(-12deg);
}
span.highlighted.animate.rot-3::before{
    transform: rotate(-3deg) scaleX(0) skewX(-12deg);
}
.visible span.highlighted.animate.rot-3::before{
    transform: rotate(-3deg) scaleX(1) skewX(-12deg);
    transform-origin: bottom left;
}

span.highlighted.animate::before{
    transform: scaleX(0) skewX(-12deg);
}
.visible span.highlighted.animate::before{
    transform: scaleX(1) skewX(-12deg);
    transform-origin: bottom left;
}

span.highlighted::before{
    position:absolute;
    content:'';
    inset:0;
    z-index: -1;
    top:3px;
    /* transform: rotate(-3deg); */
    transform: skewX(-12deg);
    background-color:var(--pink-accent);
    transition: transform 0.25s ease-out .6s;
}
span.underlined{
    position:relative;
}
span.underlined.s-2::after{
    height:4px;
}
span.underlined.s-3::after{
    height:6px;
}
span.underlined::after{
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0px;
    border-radius:2px;
    left: 0;
    background-color: var(--pink-accent);
    transition: transform 0.25s ease-out .6s;
}
.section-animate.visible span.underlined::after {
  transform: scaleX(1);
}
span.underlined.left::after {
  transform-origin: bottom left;
}

:root {
  /* Layout */
  --headerH: 60px;
  --addonslight: 5px;
  --radius: 12px;
  --radius-lg: 18px;
  
  /* Colors */
  --pink-accent: #ff3fa4;
  --darkcolor: #0e0e0e;
  --lightcolor: #ffffff;
  --primarycolor: #175ea0;
  --backgradient1: #04101b;
  --primarylightcolor: #2e87dc;
  --secondarycolor: #342C2A;
  --whitecolor: #ffffff;
  --lightgray: #666666;
  --bgcolor: #f3f3f3;
  
  /* Effects */
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.15);
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-smooth: 0.4s cubic-bezier(.77,0,.18,1);
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--headerH);
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Footer Redesign */
.footer-main {
    background: #fff;
    color: #222;
    font-size: 1rem;
    border-top: 1px solid #eee;
}
.footer-main .fw-bold {
    font-size: 1.5rem;
}
.footer-link {
    color: #222;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 0.25rem;
    transition: color 0.18s;
}
.footer-link:hover {
    color: var(--primarycolor, #1747b0);
    text-decoration: underline;
}
.footer-main hr {
    border: none;
    border-top: 1px solid #e5e5e5;
    margin: 1.2rem 0 1.1rem 0;
}
.footer-main .footer-apps img {
    height: 38px;
}
.footer-main .footer-social a, .footer-main .footer-link[aria-label] {
    color:var(--lightcolor);
    opacity: 1;
    transition: opacity 0.18s, color 0.18s;
}
.footer-main .footer-social a:hover, .footer-main .footer-link[aria-label]:hover {
    opacity: 1;
    color: var(--primarycolor, #1747b0);
}
/* Header Menu Styles */
.header-nav .header-link {
  color: var(--lightcolor);
  font-weight: 550;
  font-size: 0.95rem;
  text-wrap: nowrap;
  text-decoration: none;
  padding: 0.2rem 0.7rem;
  border-radius: 7px;
  display:flex;
  height:100%;
  align-items: center;
  transition: background 0.18s, color 0.18s;
}
.header-nav .header-link:hover,
.header-nav .header-link.active {
  color: var(--primarylightcolor);
}
.header-menu-btn {
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--primarylightcolor);
  cursor: pointer;
  font-size:1.7rem;
}
.header-mobile-nav .buttonP{
    margin:0 !important;
}
.header-mobile-nav::before{
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        box-shadow:0 0px 25px var(--primarylightcolor);
        opacity: 0.9;
        z-index: -1;
        border-radius: 12px;
        mix-blend-mode: screen;
}
.header-mobile-nav {
    display: none; /* toggled via JS */
    position: fixed;
    top: var(--headerH);
    left: 0;
    width: 100vw;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    background: var(--darkcolor);
    z-index: 1100; /* ensure it's above header/content */
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    animation: fadeDownMenu 0.25s cubic-bezier(.77,0,.18,1);
    /* center contents */
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
.header-mobile-nav.show,
.header-mobile-nav.open {
    display: flex !important;
}
.header-mobile-nav .header-link {
    color: var(--lightcolor);
    font-weight: 500;
    font-size: 1.05rem;
    text-decoration: none;
    border-radius: 8px;
    width: auto;
    max-width: 420px;
    padding: 0.2rem 0.2rem;
    display: block;
    text-align: center;
    transition: background 0.18s, color 0.18s;
    margin: 0 auto;
}
.header-mobile-nav .header-link:hover,
.header-mobile-nav .header-link.active {
  color: #1747b0;
}
@keyframes fadeDownMenu {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Header Styles */
.main-header {
  box-shadow: 0 2px 16px rgba(30,95,255,0.07);
}
.main-header .header-nav{
    margin: 0 20px 0 20px;
    height:calc(100% + 20px);
}
.main-header .header-top {
  background: var(--darkcolor);
  border-radius: 0 0 10px 10px;
  height: calc(var(--headerH) - var(--addonslight));
  padding: 10px 50px 10px 50px;
}
.main-header .header-logo img {
  height: 100%;
  width: auto;
  display: block;
  user-select: none;
  
}
.buttonP{
    background: var(--primarycolor);
    color: #fff;
    border-radius: 7px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.18s, color 0.18s, transform 0.18s;
}
.main-header .buttonP {
  margin:5px 0 5px 0;
  padding: 5px 20px;
  font-weight:550;
  font-size: 0.95rem;
  text-wrap: nowrap;
}
.buttonP:hover {
  background: var(--primarylightcolor);
  transform: scale(1.02);
  color:var(--lightcolor)
}
.main-header .header-logo{
    height:100%;
    width:auto;
}
.main-header .header-blue-glow {
  height: calc(20px + var(--addonslight));
  background: linear-gradient(90deg,var(--primarycolor) 0%,var(--primarycolor) 100%);
  position: relative;
  overflow: hidden;
  z-index: -1;
  top: -20px;
  border-radius: 0 0 10px 10px;
  /* border-radius: 0 0 20px 20px; */
}
.main-header .header-glow-effect {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  transition: background 0.18s cubic-bezier(.77,0,.18,1);
}
/* Footer Styles */
.footer-main {
  background: var(--backgradient1) !important;
  color: #fff;
  border-top: 1px solid var(--primarylightcolor);
}
.footer-main .footer-brand {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 0.2rem;
}
.footer-main .footer-social a {
  color: #fff;
  opacity: 0.85;
  transition: color 0.2s, opacity 0.2s, transform 0.2s;
}
.footer-main div.row div.col div:nth-child(1){
    color: var(--primarylightcolor);
}
.footer-main .footer-social a:hover {
  color: #ffc107;
  opacity: 1;
  transform: translateY(-2px) scale(1.12) !important;
}
.footer-main .footer-apps img {
  height: 38px;
  filter: grayscale(0.2) brightness(0.98);
  transition: filter 0.2s, transform 0.2s;
  border-radius: 7px;
}
.footer-main .footer-apps img:hover {
  filter: none;
  transform: scale(1.04) !important;
}
.footer-main a {
  text-decoration: none;
  color: #fff;
  opacity: 0.85;
  transition: color 0.2s, opacity 0.2s;
}
.footer-main a:hover {
  color: var(--primarylightcolor);
  opacity: 1;
}
.footer-main .footer-apps a {
  display: inline-block;
}
/* App feature card image gradient fade */
.app-feature-card {
    position: relative;
    /* Let the card size itself to the image + text. Allow tall portrait images. */
    padding: clamp(12px, 2.2vw, 24px);
    border-radius: clamp(10px, 2vw, 20px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(12px, 1.5vw, 20px);
}

.app-feature-card img {
    display: block;
    width: 100%;
    /* Force a portrait (tall) aspect and clamp the rendered height so it's responsive */
    aspect-ratio: 3 / 4; /* portrait */
    /* height: clamp(320px, 48vh, 380px); */
    object-fit: cover;
    object-position: center top;
    z-index: 1;
    user-select: none;
    pointer-events: none;
    -webkit-user-drag: none;
    border-radius: inherit;
}
.app-feature-card .app-feature-img-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  z-index: 2;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(to top, #04101b 10%, #0e0e0e00 80%);
}
/* App Features Section */
.apps-section {
  background: #fff;
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.app-feature-text-content{
    color:var(--lightcolor);
    margin-bottom:0.8rem;
    padding: 0.6rem 0 0.4rem 0;
    font-size: clamp(0.95rem, 1.7vw, 1.15rem);
    line-height: 1.45;
}
.app-feature-card h3, .app-feature-card h4, .app-feature-card h5 {
    font-size: clamp(1.05rem, 2.4vw, 1.6rem);
    margin: 0 0 0.4rem 0;
}
.app-feature-card p {
    font-size: clamp(0.9rem, 1.6vw, 1.05rem);
    margin: 0 0 0.6rem 0;
}
.app-feature-card {
  border-radius: 18px;
  /* overflow:hidden; */
  /* border:solid 3px var(--primarylightcolor); */
  /* box-shadow: 0 4px 24px rgba(0,0,0,0.07); */
  background:transparent;
  transition: transform 0.3s cubic-bezier(.77,0,.18,1), opacity 0.3s;
  box-sizing: border-box;
  opacity: 0;
  background-clip: padding-box;
  transform: translateY(40px);
  will-change: transform, opacity;
}
.app-feature-card::before {
    content: '';
    position: absolute;
    inset:0;
    z-index: -2;
    border-radius: 18px;
    background-image:linear-gradient(180deg,var(--primarycolor) 0%,var(--pink-accent) 100%);
    filter:blur(5px);
    mix-blend-mode: screen;
    /* box-shadow: 0px 0 10px var(--primarycolor);  */
}
.app-feature-card::after {
    content: '';
    position: absolute;
    inset:0;
    z-index: -1;
    border-radius: 18px;
    background:linear-gradient(to top, var(--backgradient1) 0%, var(--darkcolor) 80%);
    /* box-shadow: 0px 0 10px var(--primarycolor);  */
}
.app-feature-card.revealed {
  opacity: 1;
  transform: translateY(0);
}
.apps-hidden .app-feature-card {
  opacity: 0;
  transform: translateY(40px);
}
.apps-section .app-feature-card img {
    user-select: none;
    pointer-events: none;
    border-radius: 1.5rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    width: 100%;
    min-width: auto;
    max-height: none;
}
/* App store badges */
.apps-section .d-flex img {
  transition: filter 0.2s;
  filter: grayscale(0.2) brightness(0.98);
}
.apps-section .d-flex img:hover {
  filter: none;
}

/* Channel Section */
.channel-section {
  background: #1a1a1a;
  padding-top: 3rem;
  padding-bottom: 3rem;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}
.channel-hidden {
  opacity: 0;
  transform: translateY(60px);
  pointer-events: none;
}
.channel-card {
  opacity: 0;
  transform: translateY(40px);
  transition: transform 0.3s cubic-bezier(.77,0,.18,1), opacity 0.3s, box-shadow 0.3s;
  will-change: transform, opacity;
}
.channel-card.revealed {
  opacity: 1;
  transform: translateY(0);
}
.channel-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 40px rgba(71, 136, 235, 0.2) !important;
}
.channel-card:hover .channel-image img {
  transform: scale(1.05);
}
.channel-card:hover .channel-read-more {
  color: #fff;
}

/* Kisah Sukses Card */
.kisah-card {
    opacity:1;
    transform:translateY(0px); 
    max-height:70vh;
    border-radius: 18px !important;
    overflow: hidden;
    background: #222;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    position: relative;
    transition: box-shadow 0.2s, transform 0.2s ease-in-out,opacity 0.2s ease-in-out;
}
.kisah-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.13) !important;
    transform: translateY(-4px) scale(1.02) !important;
}
.kisah-play-overlay {
    background: rgba(0,0,0,0.32);
    transition: background 0.2s ease-in-out;
    border-radius: 18px 18px 0 0;
}
.kisah-card:hover .kisah-play-overlay {
    background: rgba(0,0,0,0.45) !important;
}
.kisah-card .kisah-play-overlay i {
    opacity:0;
    transition: opacity 0.2s ease-in-out;
}
.kisah-card:hover .kisah-play-overlay i {
    opacity:1;

}
.kisah-play-overlay i {
    font-size: 3rem;
    color: #fff;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.18));
}
.kisah-card .card-body p{
    margin:0 !important;
}
.kisah-card .card-body {
    border-radius: 0 0 18px 18px;
    padding: 20px 20px 16px 20px;
    background: linear-gradient(0deg,rgba(0,0,0,0.82) 70%,rgba(0,0,0,0.0) 100%);
    min-height: 90px;
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.kisah-card h5 {
    font-size: 1.18rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.18);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kisah-card .card-body div {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.95;
    text-shadow: 0 2px 8px rgba(0,0,0,0.13);
    white-space: normal;
}
.kelas-card {
    display:flex;
    flex-direction: column;
    justify-content: flex-end; /* push text to bottom */
    padding: 16px; /* space for text */
    box-sizing: border-box;
}

.kelas-card-info {
    position: relative; /* not absolute */
    color: #fff;
    font-size: 0.98rem;
    font-weight: 400;
    opacity: 0.95;
    margin: 0 0 8px 0;
    display:flex;
    align-items: center;
    gap: 8px;
}

.kelas-card-title {
    position: relative;
    color: #fff;
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.18);
    margin: 0;
}

/* ensure gradient overlay doesn't cover text (place behind via z-index) */
.kelas-card .kelas-card-gradient {
    left: 0; right: 0; bottom: 0; top: 0;
    z-index: 0;
    border-radius: 18px;
    pointer-events: none;
}
.kelas-card > * { z-index: 1; }
.custom-slider {
    width: 100%;
    height: 12px;
    background-color: transparent;
    border-radius: 8px;
    outline: none;
    transition: background 0.2s;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
}
.custom-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 12px;
    border-radius: 8px;
    background: var(--primarylightcolor);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.2s;
    transform: translateY(-4px); /* geser ke atas */
}
.custom-slider::-moz-range-thumb {
    width: 50px;
    height: 12px;
    border-radius: 8px;
    background: var(--primarylightcolor);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}
.custom-slider::-ms-thumb {
    width: 48px;
    height: 12px;
    border-radius: 8px;
    background: var(--primarylightcolor);
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    cursor: pointer;
    border: none;
    transition: background 0.2s;
}
.custom-slider:focus {
    outline: none;
}
.custom-slider::-ms-fill-lower {
    background-color: transparent;
    border-radius: 8px;
}
.custom-slider::-ms-fill-upper {
    background-color: transparent;
    border-radius: 8px;
}
.custom-slider:focus::-ms-fill-lower {
    background-color: transparent;
}
.custom-slider:focus::-ms-fill-upper {
    background-color: transparent;
}
.custom-slider::-webkit-slider-runnable-track {
    height: 50%;
    border-radius: 8px;
    background-color: transparent;
    border: solid 1px var(--lightcolor);
}
.custom-slider::-moz-range-track {
    height: 50%;
    border-radius: 8px;
    background-color: transparent;
    border: solid 1px var(--lightcolor);
}
.custom-slider::-ms-tooltip {
    display: none;
}
.kelas-carousel {
    cursor: grab;
    user-select: none;
    transition: all .3s ease-in-out;
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
    overflow-x: auto;
    width: 100%;
    height:300px;
}
.kelas-carousel:active {
    cursor: grabbing;
}
/* KELAS SECTION */
.kelas-section {
    background: #fff;
}
.kelas-carousel-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
}
.kelas-cards {
    display: flex;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(.77,0,.18,1);
    will-change: transform;
    align-items: center;
    height:100%;
}

/* dirubah */
.kelas-cards.is-centered {
    justify-content: center;
}
/* dirubah */
.kelas-carousel.no-scroll {
    cursor: default !important;
}
.kelas-card {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    min-width: 260px;
    /* overflow:hidden; */
    max-width: 260px;
    min-height: 260px;
    max-height: 260px;
    flex: 0 0 260px;
    position: relative;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(.77,0,.18,1);
    /* dirubah */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.kelas-card::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 18px;
    height: 100%;
    filter:blur(0px);
    box-shadow: 0px 0px 0px var(--primarycolor); /* Your desired shadow */
    mix-blend-mode: screen; /* Apply the screen blend mode to the shadow */
    z-index: -1;
    opacity:0;
    transition: box-shadow 0.25s cubic-bezier(.77,0,.18,1), opacity 0.25s cubic-bezier(.77,0,.18,1),filter .25s cubic-bezier(.77,0,.18,1);
}
.kelas-card:hover::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border-radius: 18px;
    height: 100%;
    box-shadow: -1px 1px 8px var(--primarycolor),1px -1px 8px var(--pink-accent);
    filter:blur(2px);
    /* background-image:linear-gradient(45deg,var(--primarycolor) 0%,var(--pink-accent) 100%); */
    mix-blend-mode: screen; /* Apply the screen blend mode to the shadow */
    z-index: -1;
    opacity:1;
}
.kelas-card:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 32px rgba(0,0,0,0.13);
}
.kelas-card-img {
    min-width: 260px;
    max-width: 260px;
    min-height: 260px;
    max-height: 260px;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
    border-radius: 18px;
    -webkit-user-drag: none;
}
.kelas-card-gradient {
    position: absolute;
    border-radius:18px;
    left: 0; right: 0; bottom: 0; top: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.10) 100%);
    z-index: 1;
    pointer-events: none;
}

/* dirubah */
/* Homepage carousel kelas card duration positioning */
.kelas-carousel .kelas-card-duration {
    z-index: 2;
    top:50%;
    padding: 4px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 5px;
    align-self: center;
}



.kisah-sukses-section {
    opacity: 1;
    transform: translateY(0px);
    transition: all .5s cubic-bezier(.77,0,.18,1);
}
.kisah-hidden .kisah-card{
    transform: translateY(100px);
    opacity: 0;
}
.kisah-card.revealed {
  opacity: 1;
  transform: translateY(0);
}
.kisah-card {
        opacity:1;
        transform:translateY(0px); 
        /* 9:16 portrait ratio */
        aspect-ratio: 9 / 16;
        width: 100%;
        max-width: 360px; /* base max width */
        min-height: 320px; /* fallback height if aspect-ratio unsupported */
        max-height: 90vh;
        border-radius: 18px !important;
        overflow: hidden;
        background: #222;
        box-shadow: 0 4px 24px rgba(0,0,0,0.10);
        position: relative;
        transition: box-shadow 0.2s, transform 0.2s ease-in-out,opacity 0.2s ease-in-out;
}
@media (min-width: 576px) {
    .kisah-card { max-width: 300px; }
}
@media (min-width: 768px) {
    .kisah-card { max-width: 320px; }
}
@media (min-width: 992px) {
    .kisah-card { max-width: 270px; }
}
@media (min-width: 1200px) {
    .kisah-card { max-width: 460px; }
}


#jumbotronCarousel {
    max-width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    padding-top:calc(var(--headerH) - 20px);
    padding-bottom:50px;
}
.carousel-inner {
    position: absolute;
    top:calc(var(--headerH) - 20px);
    z-index: 0;
    height: 100%;
    display: flex;
    transition: transform 0.5s cubic-bezier(.77,0,.18,1);
    will-change: transform;
    overflow:visible;
}
.carousel-item {
    min-width: 100vw;
    height: 100%;
    position: relative;
    display:flex;
    margin:0;
    user-select: none;
}
.carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.carousel-caption {
    right: auto;
    top: 50%;
    left:100px;
    transform: translateY(-50%);
    min-width: 100vw;
    position:relative;
    text-align: left;
    bottom: auto;
    user-select: none;
    z-index: 2;
    align-content: center;
}
.carousel-gradient {
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: multiply;
    background: linear-gradient(to right, rgba(5, 5, 5, 0.9) 0%, rgba(5, 5, 5, 0.7) 25%, rgba(0, 0, 0, 0.13) 100%);
}
.carousel-caption h1 {
    font-weight: 700;
    font-size: 2.5rem;
    width:80%;
}
.carousel-caption p {
    font-weight: 400;
    font-size: 1.1rem;
    width:65%;
}
.carousel-caption .btn {
    font-weight: 700;
    margin-top: 15px;
}
.carousel-indicators {
    display: flex;
    gap: 12px;
    align-items: center;
    margin:0;
    min-height:50px;
}
.carousel-indicators button {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    border: none;
    padding-inline:0px;
    opacity: 0.5;
    transition: all 0.3s;
}
.carousel-indicators .active {
    width: 14px;
    height: 14px;
    opacity: 1;
}
.carousel-caption-container {
    top:20px !important;
    z-index: 2;
    user-select: none;
}
.carousel-caption-content {
    height: 100%;
    display: flex;
    transition: transform 0.5s cubic-bezier(.77,0,.18,1);
    will-change: transform;
}
.mempt-section .container_mem{
    position:sticky;
    overflow:hidden;
    top:calc(var(--headerH) + 20px);
}
.mempt-section {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(.77,0,.18,1), transform 0.8s cubic-bezier(.77,0,.18,1);
    will-change: opacity, transform;
    position: relative;
    top:0px;
    z-index: 2;
}
.personaltrainer-section {
    visibility: hidden;
    transform: translateY(0);
    /* transition: opacity 0.8s cubic-bezier(.77,0,.18,1), transform 0.8s cubic-bezier(.77,0,.18,1); */
    will-change: opacity, transform;
    position: relative;
}
.mempt-section.trainershow .content-container .title-container:nth-child(1) {
    transition: all .3s ease-in-out;
    opacity: 0;
    transform: translateY(-50px);
    height:0px !important;
}
.mempt-section.trainershow .content-container .title-container:nth-child(2) {
    display:block;
    opacity: 1;
    /* transform: translateY(50px); */
    transition: all .3s ease-in-out;
}
.mempt-section:not(.trainershow) .content-container .title-container:nth-child(1) {
    opacity: 1;
    transform: translateY(0px);
    transition: all .3s ease-in-out;
}
.mempt-section:not(.trainershow) .content-container .title-container:nth-child(2) {
    opacity: 0;
    transform: translateY(50px);
    transition: all .3s ease-in-out;
}
.mempt-hidden {
    opacity: 0;
    transform: translateY(60px);
    pointer-events: none;
}
.membership-box {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    overflow: hidden;
    background: transparent;
    transition: transform 0.3s cubic-bezier(.77,0,.18,1),height .3s ease-in-out, opacity .3s ease-in-out;
    cursor: pointer;
}
.membership-box.a {
    height:calc((100vh - var(--headerH) - 60px)*1/3);
}
.membership-box.b {
    height:calc((100vh - var(--headerH) - 60px)*2/3);
}
.mempt-section.trainershow .membership-box.a {
    height:calc((100vh - var(--headerH) - 60px)*2/3);
}
.mempt-section.trainershow .membership-box.b {
    height:calc((100vh - var(--headerH) - 60px)*1/3);
}
.personaltrainer-section.trainershow .membership-box.a {
    height:calc((100vh - var(--headerH) - 60px)*2/3);
}
.personaltrainer-section.trainershow .membership-box.b {
    height:calc((100vh - var(--headerH) - 60px)*1/3);
}

.membership-img {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    user-select: none;
    transition:height 0.3s ease-in-out,opacity 0.3s ease-in-out;
    overflow: hidden;
}
.membership-img::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    mix-blend-mode: multiply;;
    background: linear-gradient(to top, rgba(20, 20, 20,0.85) 70%, rgba(20, 20, 20,0.55) 100%);
    z-index: 1;
    border-radius: 18px;
    opacity:0.5;
    transition: opacity 0.3s ease-in-out;
}
.membership-img.personaltrainer {
    opacity:0;
    top:-100%;
}

.mempt-section.trainershow .membership-img.personaltrainer {
    opacity:1;
}
.mempt-section.trainershow .membership-img:not(.personaltrainer) {
    opacity:0;
}

.membership-img:hover::before{
    opacity: 0.8;
}
.membership-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    transition: filter 0.3s;
}
.membership-title {
    position: absolute;
    left: 0px;
    bottom: 16px;
    width:100%;
    z-index: 2;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
    pointer-events: none;
    user-select: none;
    text-align: center;
}
.membership-box:hover {
    transform: scale(1.06);
}
.membership-box:hover .membership-gradient {
    background: linear-gradient(to top, rgba(20, 20, 20,0.85) 70%, rgba(20, 20, 20,0.55) 100%);
}
section {
    background-color:transparent !important;
}
/* mobile mempt */
.mempt-section.mobile .membership-item{
    position:relative;
    width:100%;
    height:150px;
    background-color:#04101bbe;
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    border-radius: var(--radius);
    overflow:hidden;
    animation:backanim-mempt-mobile-1 5s infinite;
}
.mempt-section.mobile .membership-item img{
    width:100%;
    object-fit:cover;
    height:100%;
}
.mempt-section.mobile .membership-item .membership-title{
    position:absolute;
    inset:0;
    display:flex;
    justify-content: center;
    align-items: center;
}
@keyframes backanim-mempt-mobile-1 {
    0%{
        box-shadow:0 0 8px var(--darkcolor);
    }
    30%{
        box-shadow:0 0 8px #2e88dc9a;
    }
    70%{
        box-shadow:0 0 8px #ff3fa49a;
    }
    100%{
        box-shadow:0 0 8px var(--darkcolor);
    }
}
.mempt-section.mobile .pt-item-cont{
    width:100%;
    overflow:auto hidden;
    position:relative;
    padding-left:4.0rem;
    display:flex;
    flex-direction:row;
    height:350px;
    gap:20px;
    scrollbar-width: none;
}
.mempt-section.mobile .pt-item-cont .pt-item{
    aspect-ratio:3/4;
    height:100%;
    border-radius:var(--radius);
    padding:10px;
    font-size:1.3rem;
    background-blend-mode: multiply;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center;
    box-shadow:1px 1px 8px #0e0e0ed0;
    position:relative;
}

/* Membership Webpage CSS */

.membership-hero-section {
    margin-top:calc(var(--headerH) - 10px);
    background-image:url('../storage/assets/image/membership_hero.jpg');;
    /* background: linear-gradient(180deg, #0e9bc0 0%, #0e9bc0 60%, #fff 100%); */
    background-size:cover;
    background-position: center 70%;
    /* background: linear-gradient(135deg, var(--primarycolor) 0%, var(--primarylightcolor) 100%); */
}
.membership-hero-section::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background: linear-gradient(to top, rgb(14, 14, 14) 0%, rgba(14, 14, 14,0.2) 100%);
    z-index: 1;
    mix-blend-mode: multiply;
}
.membership-hero-section .contents{
    position:relative;
     background:linear-gradient(90deg, var(--backgradient1) 40%,rgb(4, 16, 27,0.6) 100%),url('../storage/assets/image/c.jpg');
     background-blend-mode:multiply, normal;
     background-size: cover;
     background-position: center;
     border:solid 5px transparent;
     box-sizing: border-box;
     background-clip: padding-box; 
     &:before{
        content:'';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background:var(--primarycolor);
        margin:-5px;
        border-radius:inherit;
        z-index:-1;
    }
     &:after{
        content:'';
        position: absolute;
        left:0; 
        top: 1px;
        bottom: 1px;
        right:0;
        background:linear-gradient(var(--spin-angle),rgba(46, 135, 220,0.0) 0%,var(--primarylightcolor) 100%);
        margin:-5px;
        border-radius:inherit;
        z-index:-1;
        mix-blend-mode: screen;
        filter:blur(3px);
        transition:background 0.3s ease-in-out;
    }
}
.plan-oldprice {
    height:.875em;
    line-height: .875em;
    position:relative;
    width:max-content;
}
.plan-card {
    align-items: center;
    /* background-color:var(--primarycolor); */
    border: solid 2px;
    /* box-shadow: 0 0px 0px 2px rgb(255, 255, 255); */
}

.plan-desc{
    min-height:35px;
    display:flex;
    align-items: center;
    padding-bottom:0.25em;
    margin-top: 10px;
}
.plan-data{
    min-height:100px;
    display:flex;
    flex-direction:column;
    justify-content: center;
}
.faq-item{
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    cursor:pointer;
    -webkit-user-select: none; 
    -moz-user-select: none;
    -ms-user-select: none;     
    user-select: none; 
    position:relative;
    color:var(--lightcolor);
    margin-bottom:10px;
    padding:5px 20px 5px 20px;
    max-width:min-content;
    border-radius: 24px;
    gap:10px;
    transition:transform .3s ease-in-out;
}
.faq-item::after{
    content:'';
    position:absolute;
    inset:0;
    box-shadow:0 0 8px var(--primarylightcolor);
    mix-blend-mode: screen;
    transition:transform .3s ease-in-out,background-color .3s ease-in-out;
    z-index:-1;
    border-radius: inherit;
}
.accordion-button{
    text-wrap:nowrap;
}
.faq-item.show .faqhead .toggle-indicator{
    transform: rotate(45deg);
}
.faq-item .faqhead .toggle-indicator{
    transform: rotate(0deg);
    transition: transform .3s ease-in-out;
    padding-bottom:3px;
    height:min-content;
}
.faq-item.show .faq-answer{
    margin:5px 0px 10px 0px;
}
.faq-item .faq-answer{
    display:none;
    margin:0px;
    transition:max-height .3s ease-in-out, margin .3s ease-in-out;
    overflow:hidden;
    max-height:0px;
}
.faqhead{
    display:flex;
    gap:20px;
}

/* Personal Trainer Webpage CSS */

.pt-hero {
    margin-top:calc(var(--headerH) - 10px);
    position: relative;
    min-height: 400px;
    background: url('../storage/assets/image/pt.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pt-hero::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background: linear-gradient(to top, rgb(14, 14, 14) 0%, rgba(14, 14, 14, 0.2) 100%);
    z-index: 1;
    mix-blend-mode: multiply;
}
.pt-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.pt-hero-content h1 {
    color: #fff;
    font-size: 4.2rem;
    font-weight: 1000;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}
.pt-section-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}
.pt-intro-section h2{
     font-size:2.8rem;
     font-weight:800 !important;
     text-align:left;
}
.pt-intro-section .row div:nth-child(1){
    transform: translateX(-60px);
}
.pt-intro-section .row div:nth-child(2){
    transform: translateX(60px);
}
.pt-intro-section{
    transform:none;
}
.visible.pt-intro-section .row div{
    transform: none;
    transition:transform .5s ease-in-out;
}
.pt-intro-section p{
     font-size:1.25rem;
     text-align:justify;
}
.pt-card-slide{
    padding:10px;
    /* margin:0 -50px ; */
    overflow:hidden;
    position:relative;
    z-index:0;
    display:flex;
    gap:20px;
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    -ms-overflow-style: none; /* Hide scrollbar in IE and Edge */
    -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
    overflow-x: auto;
    height:max-content;
}
.pt-card-slide:active {
  cursor: grabbing;
}
.pt-card-cont {
    position:relative;
    z-index:0;
    display: flex;
    width:max-content;
    gap:15px;
}
.testimoni-card-grid {
    position:relative;
    z-index:0;
    display:flex;
    flex-wrap: wrap;
    gap:20px;
    justify-content: center;
}
.testimoni-card-horizontal::after{
    content:'';
    position: absolute;
    inset:0;
    border-radius: inherit;
    background:linear-gradient(
    50deg,
    #0e9bc025 12%,
    #0e9bc000 77%
  );
    mix-blend-mode: normal;
}
.section-animate.visible .testimoni-card-horizontal,
.section-animate.visible .pt-card-horizontal{
    opacity:1;
    transform: translateY(0);
}
.section-animate .testimoni-card-horizontal {
    color:var(--lightcolor);
    display: grid;
    background: #175ea030 !important;
    box-shadow: 0 0 8px var(--darkcolor);
    border-radius: 18px;
    padding: 20px;
    gap: 1.2rem;
    min-width:calc(50% - 10px );
    max-width:calc(50% - 10px );
    position:relative;
    opacity:0;
    transform: translateY(10px);
    transition: transform .3s ease-in-out 0.25s, opacity .3s ease-in-out;
    transition-delay: calc(0.1s * var(--t-delay));
    grid-template-areas: "one two two" "one two two" "one three three";
}
.section-animate .pt-card-horizontal {
    padding:10px;
    border-radius: 25px;
    overflow: hidden;
    box-shadow: 0 0 8px var(--darkcolor);
    background: #175ea030 !important;
    position:relative;
    opacity:0;
    transform: translateY(10px);
    transition: transform .3s ease-in-out 0.25s, opacity .3s ease-in-out;
    transition-delay: calc(0.1s * var(--t-delay));
    width:calc(400px *3 / 5);
    cursor: grab;
}
.section-animate .pt-card-horizontal:hover {
    cursor: grab;
}
.section-animate .pt-card-horizontal:active {
    cursor: grabbing;
}
.pt-card-horizontal .pt-photo {
    max-height:400px;
    min-height: 400px;
    width:100%;
    border-radius: 15px;
    object-fit: cover;
}
.pt-card-horizontal .pt-content {
    position:absolute;
    left:10px;right:10px;
    padding:20px 0;
    height:max-content;
    min-height: 120px;
    bottom:10px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    background: #175ea030 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius:0 0 15px 15px;
}
.pt-card-horizontal .pt-lokasi {
    text-align: center;
    font-weight: 600;
}
.pt-card-horizontal .pt-name {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    padding:0 10px;
    text-align: center;
    line-height: 1.2rem;
}
.testimoni-card-horizontal .pt-photo {
    aspect-ratio: 1/1;
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    background: #e6f7fa;
    flex-shrink: 0;
    grid-area: one;
    align-self:center;
}

.testimoni-card-horizontal .pt-content {
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: space-around;
}
.testimoni-card-horizontal .pt-info {
    flex: 1;
    min-width: 0;
    height:100%;
    align-content: center;
    grid-area: three;
}
.testimoni-card-horizontal .pt-name {
    font-weight: 1000;
    line-height: 1.3rem;
}
.testimoni-card-horizontal .pt-desc {
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
    overflow:hidden auto;
    grid-area: two;
    z-index:1;
}
 .testimoni-card-horizontal .pt-ig {
    font-size: 0.85rem;
    color: #0e9bc0;
    font-weight: 600;
}
.section-animate.visible .pt-sesi-card{
    opacity:1;
    transform: scale(1);
}
.section-animate .pt-sesi-card{
    background: #0b2c47;
    border-radius: 18px;
    box-shadow: 0 2px 16px rgba(4, 16, 26, 0.438);
    padding: 1.5rem 1.2rem;
    text-align: center;
    display:flex;
    flex-direction:column;
    transform : scale(1.1);
    opacity:0;
    transition: transform .3s ease-in-out 0.25s, opacity .3s ease-in-out;
    transition-delay: calc(0.1s * var(--t-delay));
    height:250px;
    max-height:250px;
}
.section-animate.visible .pt-sesi-card:hover .pt-sesi-harga:not(.per-sesi){
    transform:translateY(-10px);
    height:0px;
    opacity:0;
}
.section-animate.visible .pt-sesi-card:hover .pt-sesi-old{
    transform:translateY(-15px);
    height:0px;
    opacity:0;
}
.section-animate.visible .pt-sesi-card:hover .pt-sesi-harga.per-sesi {
    height:80px;
    opacity:1;
}
.section-animate .pt-sesi-card span.badge{
	background-color: var(--pink-accent);
	width: max-content;
	align-self: center;
	font-size: 0.8rem;
}
.section-animate .pt-sesi-card .pt-sesi-jumlah p{
    margin: 0;
    line-height: 0.8;
    height: max-content;
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: last baseline;
}
.section-animate .pt-sesi-card .pt-sesi-jumlah {
    color: white;
    font-size: 5.5rem;
    font-weight: 700;
    background-image:linear-gradient(45deg,var(--primarylightcolor) calc(max(var(--spin-angle) - 20%,0%)),var(--pink-accent) var(--spin-angle),var(--primarylightcolor) calc(var(--spin-angle) + 20%));
    background-clip:text;
    -webkit-background-clip: text;
    -webkit-text-stroke:8px transparent;
    opacity:0;
    transition: opacity .3s ease-in-out 0.5s;
    display:flex;
    height:150px;
    align-items:center;
    justify-content: center;
}
.section-animate.visible .pt-sesi-jumlah{
    opacity:1;
}

.section-animate.visible .pt-sesi-card .pt-sesi-jumlah span {
    margin-left:0;
}
.section-animate .pt-sesi-card .pt-sesi-jumlah span {
    font-size: 1.5rem;
    transition:margin-left .3s ease-in-out 0.5s;
    margin-left:20px;
    vertical-align: sub;
}
.pt-sesi-card .pt-sesi-harga.per-sesi {
    display:flex;
    justify-content: center;
    flex-direction: column;
    opacity:0;
    color:var(--lightcolor);
    height:0px;
    transition: transform .15s ease-in-out, height .15s ease-in-out,opacity .15s ease-in-out;
}

.section-animate .pt-sesi-card .pt-sesi-harga:not(.per-sesi) {
    font-size: 1.75rem;
    font-weight: 700;
    color:var(--lightcolor);
    height:0px;
    overflow:hidden;
    transition: height .15s ease-in-out;
    transition-delay:.65s;
}
.section-animate.visible .pt-sesi-card .pt-sesi-harga:not(.per-sesi) {
    height:50px;
    transition: transform .15s ease-in-out, height .15s ease-in-out,opacity .15s ease-in-out;
}
.text_st::after{
    content: '';
    position: absolute;
    width: 110%;
    transform: scaleX(0);
    height: 2px;
    bottom: 40%;
    border-radius:2px;
    left: -5%;
    background-color: var(--pink-accent);
    transition: transform 0.25s ease-out .6s;
}
.section-animate.visible .text_st::after{
    transform: scaleX(1);
    transform-origin: left;
}
.section-animate.visible .pt-sesi-card .pt-sesi-old {
    opacity:1;
}
.section-animate .pt-sesi-card .pt-sesi-old {
    color:var(--lightcolor);
    position:relative;
    width:max-content;
    font-size: 1rem;
    line-height:1rem;
    height:1rem;
    opacity:0;
    align-self:center;
    transition: opacity .3s ease-in-out, transform .15s ease-in-out, height .15s ease-in-out, opacity .15s ease-in-out;

}

/* Kelas Webpage CSS */

.kelas-hero {
    margin-top:calc(var(--headerH) - 10px);
    position: relative;
    min-height: 400px;
    background: url('../storage/assets/image/kelas.JPG') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kelas-hero::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background: linear-gradient(to top, rgb(14, 14, 14) 0%, rgba(14, 14, 14, 0.2) 100%);
    z-index: 1;
    mix-blend-mode: multiply;
}
.kelas-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.kelas-hero-content h1 {
    color: #fff;
    font-size: 4.2rem;
    font-weight: 1000;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}
.kelas-page-main h1{
    font-weight: 1000;
    font-size:2.8rem;
}
.kelas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    padding: 2rem;
    max-height:600px;
    overflow:hidden;
    position:relative;
    transition:max-height .5s ease-in-out,mask-size .5s ease-in-out;
    mask-image: linear-gradient(to bottom, white 50%, transparent 90%);
    mask-size: 100% 100%;
}
.kelas-grid.expanded {
    mask-size: 100% 190%;
}
.kelas-grid.kelas-page .kelas-card{
    max-width:100%;
    position: relative;
    background: var(--backgradient1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    display:flex;
    align-items: end;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
    padding:0;
}
.kelas-grid.kelas-page .kelas-card-content {
    padding: 1rem;
    width:100%;
}
.kelas-grid.kelas-page .kelas-card-title {
    font-size: 1.8rem;
    line-height:1.5rem;
    text-wrap:wrap;
    width:100%;
    font-weight: 700;
    top:0;
    left:0;
    margin-bottom: 0.5rem;
    position:relative;
}
.kelas-grid.kelas-page .kelas-card-info {
    font-size: 1.2rem;
    display:flex;
    top:0;
    left:0;
    color: var(--lightcolor);
    position:relative;
    justify-content: space-between;
    align-items: center;
}
.kelas-grid.kelas-page .kelas-card-duration{
    display:flex;
    align-items: center;
    padding:0 10px;
    height:max-content;
    line-height: 2rem;
}
.kelas-grid.kelas-page .kelas-card-gradient-page {
    top:0;bottom:0;left:0;right:0;
    position:absolute;
    background-color:var(--backgradient1);
    mix-blend-mode: multiply;
    border-radius: inherit;
    opacity:0.5;
}
.input-group{
    flex-wrap:nowrap;
}
#kelasBookingList{
    z-index:-1;
    height:70vh;
    overflow:auto;
    /* overflow-y:auto; */
    scrollbar-width: thin;
    margin:0 calc((90vw - 100%) / -2);
    width:90vw;
}
#kelasBookingList{
    scrollbar-width: thin;
    scrollbar-color:var(--primarylightcolor) transparent;
}

.schedule-table thead tr{
    box-shadow: 0 0 16px #2e88dc9c;
}
.schedule-table th:nth-child(1){
    width:10%;
}
.schedule-table th:nth-child(n+2){
    width:calc(90% / 7);
    padding:0 10px;
}
@keyframes time-cell-move {
    0% {border-color:var(--primarylightcolor);box-shadow: 0 0 8px var(--primarylightcolor);}
    100% {border-color:var(--pink-accent);box-shadow: 0 0 8px var(--pink-accent);}
}
.schedule-table .time-cell{
    height:100px;
    justify-content: center;
    text-align: center;
    background-color:#0e0e0ea6;
}
.schedule-table thead{
    /* background-color: var(--primarycolor); */
    color: var(--lightcolor);
    font-weight: 700;
    height:70px;
    border-top:none;
    top:0;
    position:sticky;
    background-color: #2e88dc9c;
	backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index:2;
    text-align: center;
}
.schedule-table .date-number {
    font-size: 0.9rem;
    font-weight: 500;
}
.schedule-table .date-day {
    font-size: 1.5rem;
    font-weight: 700;
}
.schedule-table .class-indicator {
    margin:10px 0;
    padding:10px 15px;
    height:max-content;
    background-color: transparent;
    /* border:1px solid var(--primarylightcolor); */
    /* box-shadow: 0 0 3px var(--primarylightcolor); */
    border-radius: var(--radius);
}
.schedule-table .class-trainer {
    font-weight:300;
    font-size:0.8rem;
}
.schedule-table .class-title {
    font-weight:700;
    font-size:1.0rem;
}
.schedule-table{
    border-collapse: separate;
    border-spacing: 0;
}
.schedule-table td {
    padding: 5px;
    position:relative;
    vertical-align: top;
    border: 1px solid transparent; 
    border-image: linear-gradient(90deg,
    var(--primarylightcolor) calc((var(--row-index) * -100%) + (var(--animatione) * 2) - 100%),
    var(--pink-accent) calc(((3.5 - var(--row-index)) * 100%) +  (var(--animatione) * 2) - 100%),
    var(--primarylightcolor) calc(((7 - var(--row-index)) * 100%) +  (var(--animatione) * 2) - 100%));
    border-image-slice: 1;
    z-index: inherit;
}
.schedule-table tbody tr:first-child td{
    border-top: none;
}
.schedule-table tbody tr:last-child td {
    border-bottom: none;
}
.schedule-table tbody tr td:first-child {
    /* border: 1px solid var(--primarylightcolor);  */
    border-left: none;
    position:sticky;
    /* background-color: #2e88dc42; */
	backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index:1;
}
.schedule-table tbody tr td:last-child {
    border-right: none;
}

.qr-cont{
    border-radius:25px;
    --kelas-padding:15px;
    position:relative;
    width:80vw;
    height:90vh;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow:1px 1px 8px #000;
    background-color:#04101bbb !important;
}
.qr-cont div.row{
    scrollbar-width: thin;
    scrollbar-color:var(--primarylightcolor) transparent;
}
.qr-cont .class-detail-container{
    padding:calc(var(--kelas-padding));
    min-width:100%;
    color:var(--lightcolor);
}
.qr-cont .qr-detail-container{
    padding:var(--kelas-padding);
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    color:var(--lightcolor);
}
.qr-cont .card-qr-books{
    padding:10px;
    background-color:white;
    margin:10px;
}
.qr-cont .card-body{
    padding:0;
    margin:var(--kelas-padding) 0;
    width:100%;
    display:grid;
    grid-template-areas: "one one one one" "two two three three" "four four five five";
}
.qr-cont .card-img-detail{
    width:100%;
    border-radius:calc(25px - var(--kelas-padding));
    height:auto;
    max-height: 200px;
    object-fit: cover;
}

/* Tentang Webpage CSS */

.tentang-hero {
    margin-top:calc(var(--headerH) - 10px);
    position: relative;
    min-height: 400px;
    background: url('../storage/assets/image/kelas.JPG') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tentang-hero::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background: linear-gradient(to top, rgb(14, 14, 14) 0%, rgba(14, 14, 14, 0.2) 100%);
    z-index: 1;
    mix-blend-mode: multiply;
}
.tentang-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}
.tentang-hero-content h1 {
    color: #fff;
    font-size: 4.2rem;
    font-weight: 1000;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
}
.about-intro-section h1{
    font-size:2.8rem;
}
.content-wrapper{
    position:relative;
    padding:10px;
}
.tentang-intro-img {
    max-width: 100%;
    border-radius: 25px;
    box-shadow: 0 2px 16px rgba(14,155,192,0.08);
}
.tentang-play-overlay{
    display:flex;
    position:absolute;
    top:0;left:0;right:0;bottom:1.5%;
    background: rgba(0,0,0,0.22);
    transition: opacity 0.2s ease-in-out;
    border-radius: 25px;
    margin:10px;
}
.kisah-card .kisah-play-overlay i {
    opacity:0;
    transition: opacity 0.2s ease-in-out;
}
.about-intro-section .content-wrapper .canvas{
    filter:blur(40.0px);
    padding:10px;
    width:100%;
    height:98%;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    opacity:0.6;
}
.tentang-stats-section {
    background: #f5f7fa;
    padding: 0 0 2.5rem 0;
    /* min-height:calc(100vh - var(--headerH)); */
}
.tentang-stats.hidden{
    padding-top:0.75rem;
}
.tentang-stats{
    transition: padding-top .3s ease-in-out;
    padding-top:0rem;
}
.tentang-stats.hidden .row{
    gap:0rem;
    margin-bottom:0rem;
}
.tentang-stats .row{
    margin:0;
}
.tentang-stats .row{
    gap: 1.5rem;
    margin-bottom:1.5rem;
    transition: gap .3s ease-in-out .9s,margin-bottom .3s ease-in-out .5s;
}
.tentang-stats.hidden .tentang-stat-card{
    border-radius:0px;
    box-shadow: 0 0 0 #ff3fa500;
}
.tentang-stats.hidden .row:nth-child(1) div.col:nth-child(1).tentang-stat-card{
    border-radius: 18px 0 0 0;
}
.tentang-stats.hidden .row:nth-child(1) div.col:nth-last-child(1).tentang-stat-card{
    border-radius: 0 18px 0 0;
}
.tentang-stats.hidden .row:nth-last-child(1) div.col:nth-child(1).tentang-stat-card{
    border-radius: 0 0 0 18px;
}
.tentang-stats.hidden .row:nth-last-child(1) div.col:nth-last-child(1).tentang-stat-card{
    border-radius: 0 0 18px 0;
    
}
.tentang-stats.hidden .tentang-stat-card .stat-value{
    transform:translateX(10px);
    opacity:0;
}
.tentang-stats.hidden .tentang-stat-card .stat-label{
    transform:translateY(10px);
    opacity:0;
}
.tentang-stats.hidden .tentang-stat-card .stat-desc{
    transform:translateY(10px);
    opacity:0;
}
.tentang-stats .row:nth-child(1) div.col:nth-child(1).tentang-stat-card{
    transition:border-bottom-left-radius .3s ease-in-out .5s,border-bottom-right-radius .3s ease-in-out .9s,border-top-right-radius .3s ease-in-out .9s,border-bottom-top-left-radius .3s ease-in-out .9s,max-height .5s ease-in-out,min-height .5s ease-in-out,padding .5s ease-in-out,box-shadow .5s ease-in-out .9s;
}
.tentang-stats .row:nth-child(1) div.col:nth-last-child(1).tentang-stat-card{
    transition:border-bottom-right-radius .3s ease-in-out .5s,border-top-right-radius .3s ease-in-out .9s,border-top-left-radius .3s ease-in-out .9s,border-bottom-left-radius .3s ease-in-out .9s,max-height .5s ease-in-out,min-height .5s ease-in-out,padding .5s ease-in-out,box-shadow .5s ease-in-out .9s;
}
.tentang-stats .row:nth-last-child(1) div.col:nth-child(1).tentang-stat-card{
    transition:border-top-left-radius .3s ease-in-out .5s,border-bottom-right-radius .3s ease-in-out .9s,border-top-right-radius .3s ease-in-out .9s,border-bottom-left-radius .3s ease-in-out .9s,max-height .5s ease-in-out,min-height .5s ease-in-out,padding .5s ease-in-out,box-shadow .5s ease-in-out .9s;
}
.tentang-stats .row:nth-last-child(1) div.col:nth-last-child(1).tentang-stat-card{
    transition:border-top-right-radius .3s ease-in-out .5s,border-bottom-right-radius .3s ease-in-out .9s,border-top-left-radius .3s ease-in-out .9s,border-bottom-left-radius .3s ease-in-out .9s,max-height .5s ease-in-out,min-height .5s ease-in-out,padding .5s ease-in-out,box-shadow .5s ease-in-out .9s;
}
.tentang-stats-section h2.typewrite span.text_type{
    animation:blinkTextCursor 700ms steps(44) infinite normal;
    -webkit-animation:blinkTextCursor 700ms steps(44) infinite normal;
}
@keyframes blinkTextCursor{
  from{opacity:1}
  to{opacity:0}
}
.tentang-stats.hidden .tentang-stat-card {
    min-height:0px;
    padding:0px;
    max-height:0px;
    box-shadow: 0 0 0px var(--darkcolor);
}
.tentang-stats.hidden .tentang-stat-card.glass::before{
    opacity:0;
}
.tentang-stat-card.glass::before{
    opacity:1;
    transition:opacity .5s ease-in-out .9s;
}
.tentang-stat-card {
    background: #2e88dc36 !important;
    border-radius: 18px;
    box-shadow: 0 0 8px var(--darkcolor);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 170px;
    max-height:270px;
    transition:border-radius .3s ease-in-out .9s,max-height .5s ease-in-out,min-height .5s ease-in-out,padding .5s ease-in-out,box-shadow .5s ease-in-out .9s;
}
.tentang-stat-card .stat-value {
    /* filter:drop-shadow(0 0 3px var(--pink-accent)); */
    font-size: 4.1rem;
    font-weight: 700;
    color: var(--pink-accent);
    transform:translateX(0px);
    opacity:1;
    transition:transform .3s ease-in-out 1.0s,opacity .3s ease-in-out 1.0s;
    display:flex;
    align-items: center;
}
.tentang-stat-card .stat-label {
    font-size: 1.15rem;
    font-weight: 600;
    transform:translateY(0px);
    opacity:1;
    transition:transform .3s ease-in-out 1.0s,opacity .3s ease-in-out 1.0s;
    color: var(--lightcolor);
}
.tentang-stat-card .stat-desc {
    font-size: 0.78rem;
    transform:translateY(0px);
    opacity:1;
    transition:transform .3s ease-in-out 1.0s,opacity .3s ease-in-out 1.0s;
    color: var(--lightcolor);
}

.tentang-mitra-section.hidden h1{
    transform:translateY(-20px);
    opacity:0;
    font-size:4.2rem;
}
.tentang-mitra-section {
    background: #f8f9fa;
    padding: 2.5rem 0 2rem 0;
    margin-top: 2rem;
}
@keyframes show_mitra{
    0%{
        transform:translateY(-20px);
        opacity:0;
    }
    70%{
        opacity:1;
    }
    100%{
        transform:translateY(0);
    }
}
.tentang-mitra-section h1{
    font-size:4.2rem;
    opacity:1;
    transform:translateY(0);
    transition:transform .3s ease-in-out,opacity .2s ease-in-out;
}

.tentang-mitra-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
.tentang-mitra-card {
    opacity:0;
    transform:translateY(0);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(14,155,192,0.08);
    background: #fff;
    display: flex;
    align-items: center;
    min-height: 220px;
    position: relative;
    transition: transform 0.3s cubic-bezier(.4,2,.3,1);
}
.tentang-mitra-card::before{
    position:absolute;
    top:0;left:-100%;width:100%;height:100%;
    content:'';
    background: linear-gradient(45deg, rgba(46, 135, 220,0.0) 30%, rgba(46, 135, 220,0.35) 50%, rgba(46, 135, 220,0.0) 70%);
    opacity: 0.8;
    mix-blend-mode: screen;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 3;
}
.tentang-mitra-card::after{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    content:'';
    background: linear-gradient(90deg, rgb(0, 0, 0,0.9) 0%,rgba(0, 0, 0, 0.6) 100%);
    opacity: 1;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}
.tentang-mitra-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 180px;
}
.tentang-mitra-card .mitra-text {
    padding: 1.2rem 1.5rem;
    font-size: 2.55rem;
    font-weight: 500;
    color: var(--lightcolor);
    line-height: 1;
    z-index:2;
}
.tentang-mitra-card .mitra-text p {
    margin-bottom:0;
    font-weight:1000;
}
.tentang-mitra-card:hover {
    transform: scale(1.06);
}
.tentang-mitra-card:hover::before {
    opacity: 1;
    animation: shine-diagonal 0.5s linear;
}
.about-intro-section {
    opacity: 1;
    overflow-x:hidden;
    position:sticky;
    top:20px;
    transform: none;
    transition: opacity 0.7s ease-in-out;
}
.about-intro-section div.row div:nth-child(1) {
	height: unset;
	scrollbar-width: none;  
	overflow-y: hidden;
}
.tentang-hero-hidden {
    opacity: 0;
}
.about-intro-section div.row div {
    transform:none;
    transition:transform .7s ease-in-out;
}
.tentang-hero-hidden div.row div:nth-child(1) {
    transform: translateX(-100px) ;
}
.tentang-hero-hidden div.row div:nth-child(2).content-wrapper {
    transform: translateX(100px) ;
}
@keyframes shine-diagonal {
    0% {
        left: -100%;
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: 1;
    }
    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Lokasi + Detail Lokasi Webpage CSS */

.lokasi-hero {
    margin-top:calc(var(--headerH) - 10px);
    position: relative;
    min-height: 400px;
    background: url('../storage/assets/image/lokasi.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lokasi-hero::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background: linear-gradient(to right, #04101bec 40%,#04101b7c 100%);
    z-index: 1;
    mix-blend-mode: multiply;
}

.lokasi-hero .lokasi-hero-content {
    position: relative;
    z-index: 2;
    width:100%;
    padding:0 100px;
}

.lokasi-card {
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(13,110,253,0.08);
    overflow: hidden;
    transition: transform 0.2s,box-shadow .3s ease-in-out,background-size .3s ease-in-out;
    background: #fff;
    position:relative;
    padding-top:210px;
    background-size: cover;
    height:100%;
}
.lokasi-card:hover {
    background-size:calc(100% + 50px) !important;
    transform: scale(1.03);
    box-shadow: 0 0 20px var(--primarycolor);
    cursor:pointer;
}
.lokasi-card-body {
    padding: 1.0rem;
    padding-left:1.5rem;
    position:relative; 
    z-index:0;
    height:100%;
}
.lokasi-card:hover .lokasi-card-body .see-details{
    fill:#2dcce1;

}
.lokasi-card-body .see-details{
    width:120px;
    display: flex;
    fill:var(--lightcolor);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: transform .3s ease-in-out,opacity .3s ease-in-out,fill .3s ease-in-out;
}
.lokasi-card-body::after {
    content:'';
    position:absolute;
    inset:0;
    border-top-right-radius: 18px;
    background-color:var(--primarycolor);
    z-index:-1;
    transition:right .3s ease-in-out,border-radius .3s ease-in-out;
}
.lokasi-card-body::before {
	content: "";
	position: absolute;
	top: -5px;
    left:0;
	right: 0;
	bottom: 0;
	border-top-right-radius: 18px;
	background-color: var(--backgradient1);
	z-index: -1;
	box-shadow:0 0 8px var(--backgradient1);
    transition:background-color .3s ease-in-out;    
}
.lokasi-card:hover .lokasi-card-body::before {
	content: "";
	position: absolute;
	top: -5px;
    left:0;
	right: 0;
	bottom: 0;
	border-top-right-radius: 18px;
	background-color: #2dcce1;
	z-index: -1;
	box-shadow:0 0 8px var(--backgradient1);
}
.lokasi-card-title {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--lightcolor);
}
.lokasi-card-address {
    font-size: 1.25rem;
    color: var(--lightcolor);
    margin-bottom: 0.5rem;
}
.box-blur h1{
    font-size:3.0rem;
}
/* Card horizontal scroll */
.gym-scroll {
    margin:auto;
}
.gym-scroll:active {
  cursor: grabbing;
}

/* Card hover effect */
.facility-card, .tool-card {
  color:var(--lightcolor);
  transition: transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out;
  border: none;
  background:transparent;
  min-height:50px;
  z-index:3;
}
.facility-card .category-name,.tool-card .category-name{
    font-size:2.0rem;
}
.facility-card .card-desc,.tool-card .card-desc{
    margin-left:10px;
    height:100%;
    width:100%;
}
.facility-card:hover, .tool-card:hover {
  transform: scale(1.03);
}
.facility-card:hover i, .tool-card:hover i {
  filter:drop-shadow(0 0 8px var(--pink-accent));
}
.facility-card i, .tool-card i{
    color:var(--pink-accent);
    transition:filter .18s ease-in-out;
}

/* Hide scrollbar for horizontal scroll */
.gym-scroll::-webkit-scrollbar {
  height: 0px;
}
.gym-scroll {
  scrollbar-width: none;
}
.gym-tools .container .glass,.gym-facilities .container .glass{
    padding:20px;
    border-radius:18px;
    background-color: #175ea02f;
    box-shadow: 0 0 8px var(--backgradient1);
}
.gym-tools .container,.gym-facilities .container {
	position: relative;
    padding:0;
	z-index: 0;
}
/* Detail scroll area */
.facility-detail, .tool-detail {
  width: 100%;
  font-size: 1rem;
  max-height:100px;

}
.facility-detail, .tool-detail{
  scrollbar-width: thin;
  scrollbar-color:var(--primarylightcolor) transparent;
}
.facility-detail::-webkit-scrollbar-thumb, .tool-detail::-webkit-scrollbar-thumb{
  -webkit-appearance: none;
    appearance: none;
    background: var(--primarylightcolor);
}   
.facility-detail::-webkit-scrollbar-track, .tool-detail::-webkit-scrollbar-track{
  -webkit-appearance: none;
    appearance: none;
    background: var(--primarylightcolor);
}

.gym-information .gym-hours div{
    border:1px solid var(--lightcolor);
    padding:0 10px;
}
.gym-information .gym-hours div:nth-child(n+2){
    border-top:0;
}
.gym-information .gym-hours div:nth-child(1){
    border-radius:10px 10px 0 0 ;
}
.gym-information .gym-hours div:nth-last-child(1){
    border-radius:0 0 10px 10px;
}

.gallery-main{
    display:grid;
    grid-template-areas:"one one two three""one one four five";
    gap:10px;
}
.smgaler:nth-child(n+2){
    max-height:150px;
    overflow:hidden;
}
.gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.gallery-overlay.d-none {
  display: none !important;
}
.gallery-overlay-content {
  position: relative;
  width: 100vw;
  max-width: 1000px;
  height:100vh;
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}
.gallery-overlay-close {
  top: 18px;
  left: 18px;
  z-index: 10;
}

.lokasi-hero-content h1{
    opacity: 0;
    transform: translateX(60px) scale(0.98);
    transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
    will-change: opacity, transform;
}
.lokasi-hero-content.visible h1{
  opacity: 1;
  transform: translateX(0) scale(1);
}

.gym-information.visible div.col {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.gym-information div.col {
    opacity: 0;
    transform: translateY(60px) scale(0.98);
    will-change: opacity, transform;
}
.gym-information div.col:nth-child(1) {
    transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
}
.gym-information div.col:nth-child(2) {
    transition: opacity 0.7s cubic-bezier(.4,0,.2,1) .2s, transform 0.7s cubic-bezier(.4,0,.2,1) .2s;
}

.mobile {
    display:none !important;
}

.channel-hero {
    margin-top:calc(var(--headerH) - 10px);
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size:cover;
    background-position:center;
}
.channel-hero::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    background: linear-gradient(to right, #04101bec 40%,#04101b7c 100%);
    z-index: 1;
    mix-blend-mode: multiply;
}
.channel-hero .channel-hero-content {
    position: relative;
    z-index: 2;
    width:100%;
    padding:50px 100px;
}
.channel-hero-content h1{
    opacity: 0;
    transform: translateX(60px) scale(0.98);
    transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
    will-change: opacity, transform;
}
.channel-hero.visible h1{
  opacity: 1;
  transform: translateX(0) scale(1);
}

@media (max-width: 768px) {
  .gallery-overlay-content {
    max-width: 98vw;
    min-height: 340px;
  }
}
/* Responsive for mobile */
@media (max-width: 576px) {
  .facility-card, .tool-card {
    width: 90vw;
    min-width: 220px;
  }
}

/* Media query untuk desktop besar */
@media (min-width: 1025px) {
  .kisah-sukses-section .row {
    max-width: 75vw !important;
  }
  .kisah-card {
    height: 600px !important;
    max-height: 600px !important;
  }
  .kisah-card h5 {
    font-size: 1.15rem !important;
  }
  .kisah-card .card-body p {
    font-size: 1rem !important;
  }
  .kisah-hidden .kisah-card {
    transform: translateY(0px) !important;
    opacity: 1 !important;
  }
}

/* Media Queries */
@media (max-width: 1200px){
    .channel-hero-content.detail h1{
        font-size:3.0rem !important;
    }
    .tentang-stats-section .tentang-stat-card .stat-value{
        font-size:2.6rem !important;
    }
    .about-intro-section h1 span.highlighted {
        font-size: 3.5rem !important;
    }
    .about-intro-section div p{
        font-size: 1.0rem !important;
    }
    .about-intro-section h1{
        font-size: 3.0rem !important;
    }
    #kelasBookingList table{
        width:1080px !important;
    }
    .header-nav{
        gap:0.5rem !important;
    }
    .lokasi-card-address{
        font-size:0.85rem !important;
    }
    .lokasi-card{
        padding-top:200px;
    }
    .lokasi-hero-content.detail h1{
        font-size:4.0rem !important;
    }
    .testimoni-card-horizontal .pt-photo {
        aspect-ratio: 0.8/1;
        height:100%;
    }
    .pt-info {
        display: flex;
        flex-direction: column;
        z-index: 1;
        justify-content: center;
    }
    .pt-name,
    .pt-ig {
        flex: 0 0 auto;     /* ukurannya tetap */
    }
}

@media (max-width: 1024px){
.channel-hero-content.detail h1{
    font-size:2.8rem !important;
    line-height:40px !important;
}
.testimoni-card-horizontal .pt-desc{
    max-height:140px;
}
.testimoni-card-horizontal .pt-photo{
    aspect-ratio: 1/1;
    border-radius: 100%;
    height:auto !important;
}
.section-animate .testimoni-card-horizontal {
    min-height:max-content !important;
    max-height: max-content !important;
    grid-template-areas:"two two" "one three";
    grid-template-columns: auto calc(100% *3/4);
    gap:10px;
}
.testimoni-section .pt-section-title{
    font-size:2.6rem !important;
}
.harga-section .pt-section-title{
    font-size:2.6rem !important;
}
.pt-profile-section .pt-section-title{
    font-size:2.6rem !important;
}
.pt-intro-section h2{
    font-size:2.2rem !important;
}
.pt-hero-content h1{
    padding-left:20px;
    padding-right:20px;
}
.carousel-caption h1 {
    font-size: 2.0rem;
    width:80%;
}
.carousel-caption p {
    font-size: 0.9rem;
    width:65%;
}
.carousel-caption .btn{
    font-size: 0.9rem;
}
.trial-section .container-kiri h2{
    font-size:3.0rem !important;
}
.qr-cont .qr-detail-container h5{
    font-size:1.5rem !important;
}
.qr-cont .class-detail-container .card-body{
    font-size:0.8rem !important;
}
.qr-cont .class-detail-container h3{
    font-size:1.9rem !important;
}
.qr-cont .class-detail-container h5{
    font-size:1.3rem !important;
}
.kelas-page-main .title-section h1{
    font-size:2.8rem;
}
.pt-profile-section .pt-section-desc,.pt-intro-section p,.desc-section h1, .lokasi-card-address,.kelas-page-main .title-section p{
    font-size:1.0rem!important;
}
.booking-section p{
    font-size:1.0rem !important;
}
.gym-tools .tool-detail,.gym-facilities .facility-detail{
    font-size:0.8rem !important;
}
.gym-information .map-detail-expand a{
    font-size:0.85rem !important;
}
.gym-information .map-detail-expand svg{
    width:10px;
    height:10px;
}
.lokasi-hero-content.detail h1{
    font-size:3.8rem !important;
    line-height:60px !important;
}
.lokasi-card-title{
    font-size:1.5rem !important;
    font-weight: 300 !important;
}
.see-details svg{
    width:23px;
    height:23px;
}
.lokasi-card-address{
    font-size:0.75rem !important;
}
.lokasi-card{
    padding-top:160px;
}
.main-header .header-logo img {
    height:70%;
}
.header-nav .header-link{
    font-size: 0.8rem;
}
.header-nav{
    gap:0.4rem !important;
}
.main-header .buttonP {
    font-size: 0.8rem;
    padding: 3px 14px;
}
.membership-box{
    max-width:210px;
}
.title-container h2{
    font-size: 1.8rem !important;
}
.membership-title {
    font-size:1.0rem;
}
.mempt-section .content-container p{
    font-size:0.9rem;
}
.kelas-section .container h2{
    font-size:2.0rem !important;
}
.kelas-section .container p{
    font-size:1.0rem !important;
}
.kelas-card{
    min-width: 220px;
    max-width: 220px;
    min-height: 220px;
    max-height: 220px;
}
.kelas-card .kelas-card-img{
    min-width: 220px;
    max-width: 220px;
    min-height: 220px;
    max-height: 220px;
}
.kelas-card:hover::before{
    box-shadow: 0px 0px 10px var(--primarycolor); 
}
.kelas-carousel{
    height:250px;
}
.container{
    margin-left:50px;
    margin-right:50px;
    width:calc(100vw - 100px);
    max-width:calc(100vw - 100px);
}
.kisah-sukses-section div.row{
    max-width:90% !important;
    width:100%;
}
.kisah-sukses-section div.row div:not(.kisah-card){
    padding-left:10px !important;
    padding-right:10px !important;
}
.kisah-sukses-section  .container h2{
    font-size:2.0rem !important;
}
.kisah-sukses-section  .container p{
    font-size:1.0rem !important;
}
.kisah-card h5 {
    font-size: 0.95rem;
}
.kisah-card .card-body p {
    font-size: 0.85rem !important;
    margin:0 !important;
}
.kisah-card {
    height: 250px !important;
    max-height: 250px !important;
}
.apps-section  .container h2{
    font-size:2.0rem !important;
}
.apps-section  .container p{
    font-size:1.0rem !important;
}
.apps-section div.row{
    max-width:90% !important;
    width:100%;
}
.apps-section div.row div:not(.kisah-card){
    padding-left:10px !important;
    padding-right:10px !important;
}
.apps-section .app-feature-text-content h5{
    font-size: 1.5rem;
}
.apps-section .app-feature-text-content p{
    font-size: 0.85rem !important;
}
.lokasi-hero .lokasi-hero-content{
    padding:0 70px;
}
.channel-hero .channel-hero-content{
    padding:50px 70px;
}
}

@media (max-width: 900px){
.section-animate .pt-sesi-card .pt-sesi-harga:not(.per-sesi){
    font-size:1.55rem !important;
}
.pt-intro-section .text-left img{
    aspect-ratio: 9/12;
}
.trial-section .container {
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
}
.about-intro-section h1{
    text-align: center;
}
.membership-faq-section .faq-item .faqhead{
    line-height:1.3rem;
}
.membership-faq-section .faq-item .accordion-button,.membership-faq-section .faq-item .accordion-body{
    font-size:0.8rem !important;
}
.tentang-stats-section h2 {
    font-size: 2.0rem !important;
}
.qr-detail-container h5{
    padding:10px !important;
}
.pt-hero-content h1,.tentang-hero-content h1,.kelas-hero-content h1{
    font-size:3.8rem;
}
.gym-information .gym-data li{
    font-size:0.8rem;
}
.gym-information .map-detail-expand a{
    font-size:0.75rem !important;
}
.gym-information .map-detail-expand svg{
    width:10px;
    height:10px;
}
.lokasi-hero-content h1{
    line-height:45px !important;
}
.lokasi-hero-content.detail h1{
    font-size: 3.6rem !important;
}
.channel-hero-content h1{
    line-height:40px !important;
}
.channel-hero-content.detail h1{
    font-size: 2.5rem !important;
}
.header-nav .header-link{
    font-size: 0.7rem;
}
.header-nav{
    gap:0.1rem !important;
}
.main-header .buttonP {
    font-size: 0.7rem;
    padding: 3px 14px;
}
.membership-box{
    max-width:180px;
}
.title-container h2{
    font-size: 1.6rem !important;
}
.membership-title {
    font-size:0.8rem;
}
.mempt-section .content-container p{
    font-size:0.7rem;
}
.membership-box{
    max-width:180px;
}
.membership-title {
    font-size:0.8rem;
}
.personaltrainer-section .content-container p{
    font-size:0.7rem;
}
.lokasi-hero .lokasi-hero-content:not(.detail) h1{
    font-size: 3.8rem !important;
    line-height:60px !important;
}
.lokasi-hero .lokasi-hero-content{
    padding:0 50px;
}
.channel-hero .channel-hero-content{
    padding:50px 50px;
}
}

@media (max-width:820px) {
    .channel-hero-content.detail h1{
        font-size: 2.25rem !important;
        line-height:30px !important;
    }
    .pt-hero{
        min-height:300px;
    }
    .section-animate .pt-sesi-card .pt-sesi-harga:not(.per-sesi){
        font-size:1.35rem !important;
    }
    .section-animate .pt-sesi-card .pt-sesi-jumlah{
        font-size:4.5rem !important;
    }
    .testimoni-section .pt-section-title{
        font-size:2.2rem !important;
    }
    .harga-section .pt-section-title{
        font-size:2.2rem !important;
    }
    .pt-profile-section .pt-section-title{
        font-size:2.2rem !important;
    }
    .tentang-hero {
        min-height: 300px;
    }
    .pt-hero-content h1, .membership-hero-section h1{
        font-size:2.45rem !important;
    }
    .tentang-hero-content h1{
        font-size:2.45rem;
        padding:0 50px;
    }
    span.underlined.s-3::after{
        height:4px;
    }
    .qr-detail-container h5{
        padding:0px !important;
    }
    .qr-detail-container span.badge{
        white-space:pre-wrap;
    }
    .lokasi-card-title, .gym-facilities h1, .gym-tools h1, .gym-gallery h1, .facility-card .category-name, .tool-card .category-name, .gym-information h1, .gym-information h1, .container-kanan h2, .testimoni-section .pt-section-title, .harga-section .pt-section-title, .pt-profile-section .pt-section-title, .pt-intro-section h2, .tentang-stats-section h2, .membership-faq-section h2, .kelas-page-main .title-section h1, .booking-section h1, .about-intro-section h1, .kelas-page-main .title-section h1{
        font-size:2.0rem !important;
    }
    .kelas-page-main .title-section p{
        padding-left:50px;
        padding-right:50px;
    }
    .kelas-hero{
        min-height: 300px;
    }
    .kelas-hero-content h1{
        font-size:2.45rem;
        padding:0 50px;
    }
    .gym-information .map-detail-expand a{
        font-size:0.7rem !important;
        margin-top:10px;
    }
    .gym-information .map-detail-expand svg{
        width:8px;
        height:8px;
    }
    .lokasi-hero-content h1{
        line-height:40px !important;
    }
    .lokasi-hero-content.detail h1{
        font-size: 2.45rem !important;
        line-height: 40px !important;
    }
    .header-nav .language-toggle .lang-btn{
        font-size: 0.75rem;
    }
    .header-nav .header-link{
        font-size: 0.65rem;
        padding:0.2rem 0.5rem !important;
    }
    .header-nav{
        margin:0 10px 0 10px !important;
        gap:0rem !important;
    }   
    .see-details svg{
        width:23px;
        height:23px;
    }
    .desc-section h1{
        margin:1.0rem 0 !important;
        font-size:1.15rem !important;
    }
    .lokasi-hero .lokasi-hero-content:not(.detail) h1{
        font-size: 2.45rem !important;
        line-height: 40px !important;
    }
    .lokasi-hero{
        min-height: 300px;
    }
    .channel-hero{
        min-height: 300px;
    }
    .gallery-main{
        grid-template-areas: "one one one two two two" "three three four four five five";
    }
    .smgaler{
        max-height:none !important;
        height:100% !important;
    }
    .gallery-main div.smgaler:nth-child(1){
        border-radius: 18px 0 0 0 !important;
    }
    .gallery-main div.smgaler:nth-child(1) button{
        height:200px !important;
    }
    .gallery-main div.smgaler:nth-child(2) button{
        height:200px !important;
    }
    .gallery-main div.smgaler:nth-child(2){
        border-radius: 0 18px 0 0 !important;
    }
    .gallery-main div.smgaler:nth-child(3){
        border-radius: 0 0 0 18px !important;
    }

    .testimoni-card-horizontal .pt-photo {
        aspect-ratio: 1/1;
    }
}
    /* .desc-section h1,.pt-intro-section .text-right div,.kelas-page-main .title-section p,.booking-section p,.about-intro-section div p,.pt-intro-section .text-right div,.pt-profile-section .pt-section-desc,.testimoni-card-horizontal .pt-desc,.membership-hero-section .contents ul,.pt-intro-section p,.gym-tools .tool-detail, .gym-facilities .facility-detail,.apps-section .app-feature-text-content p,.stat-desc,.pt-intro-section p,.kelas-page-main .title-section p,.lokasi-card-address,.gym-information .gym-data li,.gym-tools .tool-detail, .gym-facilities .facility-detail{
        font-size:1.0rem !important;
    } */
/* media queries khusus trial dan bootstrap md*/
@media (max-width:767px){
    .gallery-overlay .gallery-overlay-content .galleryitem-top button{
        min-width: unset !important;
    }
    .gallery-overlay .gallery-media-nav-flex #galleryMedia #galleryCaptionMobile,.gallery-overlay .gallery-media-nav-flex #galleryMedia #galleryCounterMobile{
        display:flex !important;
    }
    .gallery-overlay .galleryitem-top #galleryCaption,.gallery-overlay .galleryitem-top #galleryCounter{
        display:none;
    }
    #galleryPrev, #galleryNext {
        background:rgba(0, 0, 0, 0.568) !important;
        backdrop-filter: blur(5px);
        border:solid 0.1px var(--primarylightcolor) !important;
        color:var(--primarylightcolor) !important;
    }
    #galleryNext{
        position:absolute;
        right:5px;
    }
    #galleryPrev{
        position:absolute;
        left:5px;
    }
    #galleryMedia{
        top:-1.25rem;
    }
    .section-animate .pt-sesi-card .pt-sesi-harga:not(.per-sesi){
        font-size:1.75rem !important;
    }
    .trial-section .container-kiri h2{
        font-size: 3.5rem !important;
        text-align: center;
    }
    .trial-section .container-kiri img{
        border-radius:var(--radius) !important;
    }
    .trial-section .container-kiri{
        position:unset !important;
        height:80vh !important;
        margin-top:50px !important;
        margin-bottom:-10vh !important;
        align-items: center !important;
        z-index:2;
    }
    .trial-section .container-kanan .form-cont{
        padding-top:calc(2.5rem + 10vh) !important;
        background:linear-gradient(to bottom,#175ea056 0%,#175ea000 100%);
        border-radius:var(--radius);
        border:solid 1px var(--primarylightcolor);
    }
}
/* media queries 768px standard */
@media (max-width: 768px) {
    .pt-intro-section .text-left img{
        max-width:100% !important;
        width:100% !important;
        height:200px !important;
        object-fit: cover;
    }
    .animated_logo{
        right:20px !important;
    }
    @media (max-aspect-ratio:1){
        .mobile {
            display:block !important;
        }
        .mempt-section:not(.mobile){
            display:none;
        }
    }
    @media(min-aspect-ratio:7/5) {
        .mobile {
            display:block !important;
        }
        .mempt-section:not(.mobile){
            display:none;
        }
    }
    .carousel-caption{
        left:50px;
    }
    .carousel-caption h1 {
        font-size: 1.8rem;
    }
    .carousel-caption p {
        font-size: 0.8rem;
    }
    .carousel-caption .btn{
        font-size: 0.8rem;
    }
    .tentang-stat-card{
        padding: 1.0rem 1.5rem;
        min-height:135px;
    }
    .kelas-page-main button p{
        font-size:1.3rem !important;
    }
    .kelas-page-main .title-section p{
        margin-bottom:2.0rem !important;
    }
    .gym-information,.gym-gallery,.gym-tools,.gym-facilities{
        padding-top:2.0rem !important;
    }
    .gym-information .gym-data li{
        font-size:1.0rem;
    }
    .gym-tools .tool-detail{
        font-size:1.0rem !important;
    }
    .gym-information .map-detail-expand a{
        font-size:1.0rem !important;
        margin-top:0;
    }
    .gym-information .map-detail-expand svg{
        width:15px;
        height:15px;
    }
    .lokasi-hero-content.detail{
        text-align: center;
    }
    .lokasi-hero-content.detail h1{
        font-size:2.45rem !important;
        width:100% !important;
        line-height: 45px !important;
        text-align: center;
    }
    .lokasi-card .lokasi-card-body::before {
        content: "";
        position: absolute;
        top: -5px;
        left:0;
        right: 0;
        bottom: 0;
        border-top-right-radius: 18px;
        background-color: #2dcce1;
        z-index: -1;
        box-shadow:0 0 8px var(--backgradient1);
    }
    .footer-main .footer-brand {
    font-size: 1.1rem;
    }
    .footer-main .footer-apps img {
        height: 32px;
    }
    .main-header .buttonP {
    font-size: 0.9rem;
    padding: 3px 14px;
    }
    .main-header .header-top{
        padding: 10px 20px;
    }
    .footer-main .row-cols-md-5 > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
    .footer-main .d-flex.flex-md-row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.2rem !important;
    }
    .footer-main .footer-apps {
        margin-bottom: 0.7rem;
    }
    .container{
        margin-left:10px;
        margin-right:10px;
        width:calc(100vw - 20px);
        max-width:calc(100vw - 20px);
    }
    .kelas-tab{
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    .kisah-sukses-section div.row{
        flex-wrap: nowrap;
        overflow-x:auto;
        padding:0px 50px 20px 50px;
        justify-content:flex-start !important;
        max-width:100vw !important;
        width:100vw !important;
        scrollbar-width:none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .kisah-card .kisah-play-overlay {
        background: rgba(0,0,0,0.45) !important;
    }
    .kisah-card .kisah-play-overlay i{
        opacity:1;
    }
    .apps-section div.row{
        flex-wrap: nowrap;
        overflow-x:auto;
        padding:0px 50px 20px 50px;
        justify-content:flex-start !important;
        max-width:100vw !important;
        width:100vw !important;
        scrollbar-width:none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    @media screen and (orientation: landscape){
        .kisah-sukses-section div.row{
             > *{
                max-width:50%;
            }
        }
        .kisah-sukses-section .kisah-card {
            max-height:100vh;
        }
        .apps-section div.row{
             > *{
                max-width:50%;
            }
        }
    }
    
}
/* khusus mempt */
@media (max-width:678px){
    .mobile {
        display:block !important;
    }
    .mempt-section:not(.mobile){
        display:none;
    }
    .mempt-section.mobile .membership-item{
        height:100px;
    }
}

@media (max-width:554px) {
    .facility-card .category-name, .tool-card .category-name,.mempt-section .membership-item .membership-title,.mempt-section .pt-item .pt-title{
        font-size:1.3rem !important;
    }
    .lokasi-card-title {
        font-size: 1.6rem !important;
        font-weight: 100 !important;
    }
    .gym-facilities h1, .gym-tools h1, .gym-gallery h1, .facility-card .category-name, .tool-card .category-name,.gym-information h1,.gym-information h1,.apps-section .app-feature-text-content h5,.container-kanan h2,.title-container h2,.testimoni-section .pt-section-title,.harga-section .pt-section-title,.pt-profile-section .pt-section-title,.pt-intro-section h2,.tentang-stats-section h2,.membership-faq-section h2,.kelas-page-main .title-section h1,.booking-section h1,.about-intro-section h1{
        font-size:1.6rem !important;
    }
    .pt-hero{
        min-height:250px;
    }
    .pt-hero-content h1,.membership-hero-section h1{
        font-size:2.15rem !important;
    }
    .animated_logo{
        position:unset !important;
        height:150px;
        justify-self: center;
        margin-bottom:1rem;
    }
    .apps-section .container h2 hr{
        margin-top:10px;
        margin-bottom:10px;
    }
    .kelas-section .container h2,.kisah-sukses-section .container h2,.apps-section .container h2{
        font-size:1.6rem !important;
    }
    .kisah-sukses-section .container h2 span i{
        font-size:2.8rem !important;
    }
    .carousel-caption h1 {
        font-size: 1.5rem;
    }
    .carousel-caption p {
        font-size: 1.0rem;
    }
    .carousel-caption .btn{
        font-size: 0.7rem;
    }
    .carousel-caption{
        left:50px;
    }
    .trial-section .container-kiri h2{
        font-size: 3.0rem !important;
    }
    .trial-section .container-kiri{
        margin-bottom:50px !important;
    }
    .trial-section .container-kanan .form-cont{
        padding-top:2.5rem !important;
        padding-bottom:2.5rem !important;
    }
    .tentang-hero {
        min-height: 250px;
    }
    .about-intro-section h1 span.highlighted{
        font-size: 1.9rem !important;
    }
    .membership-faq-section .faq-item {
        max-width:unset;
        width:100%;
        border-radius:10px ;
    }
    #faqlist{
        gap:0.5rem !important;
    }
    .faq-item::after{
        box-shadow:unset;
    }
    .membership-faq-section .faq-item .faqhead{
        line-height:2.3rem;
    }
    .pt-intro-section p,.gym-tools .tool-detail, .gym-facilities .facility-detail,.apps-section .app-feature-text-content p,.membership-faq-section .faq-item .accordion-button,.stat-desc,.membership-faq-section .faq-item .accordion-body{
        font-size:1.0rem !important;
        text-wrap:wrap;
    }
    .kelas-hero{
        min-height: 250px;
    }
    .gym-facilities .facility-detail{
        font-size:1.0rem !important;
    }
    .gym-information .gym-data li{
        font-size:1.0rem;
    }
    .gym-information .map-detail-expand a{
        font-size:0.8rem !important;
        margin-top:-5px;
    }
    .gym-information .map-detail-expand svg{
        width:12px;
        height:12px;
    }
    .lokasi-hero-content.detail span{
        font-size:1.5rem !important;
    }
    .lokasi-hero-content.detail h1{
        font-size:3.0rem !important;
    }
    .channel-hero-content.detail span{
        font-size:1.5rem !important;
    }
    .channel-hero-content.detail h1{
        font-size:1.7rem !important;
    }
    .lokasi-hero .lokasi-hero-content:not(.detail) h1{
        font-size: 2.15rem !important;
        line-height: 50px !important;
    }    
    .kelas-hero-content h1,.tentang-hero-content h1{
        font-size:2.15rem !important;
    }
    .lokasi-hero .lokasi-hero-content{
        padding:0 40px;
    }
    .lokasi-hero{
        min-height: 250px;
    }
    .channel-hero .channel-hero-content{
        padding:50px 40px;
    }
    .channel-hero{
        min-height: 250px;
    }
    .desc-section h1,.lokasi-card-address{
        margin:0 !important;
        font-size:1.0rem !important;
    }
    .kelas-page-main .title-section p{
        padding: 0 20px !important;
    }
    .pt-intro-section .text-right div,.kelas-page-main .title-section p,.booking-section p,.about-intro-section div p,.pt-intro-section .text-right div,.pt-profile-section .pt-section-desc,.testimoni-card-horizontal .pt-desc,.membership-hero-section .contents ul{
        font-size:1.0rem !important;
    }
    .section-animate .testimoni-card-horizontal {
        min-width:100%;
        max-width:100%;
    }
    .harga-section #togglePtSesiBtn p{
        font-size:1.3rem !important;
    }   
    .testimoni-section #toggleTestimoniBtn p{
        font-size:1.3rem !important;
    }   
    .membership-plans-section #toggleMembershipBtn p{
        font-size:1.3rem !important;
    }
    .channel-hero-content.detail .post-meta,.channel-hero-content.detail .post-meta span{
        font-size:0.9rem !important;
    }
}
@media (max-width:450px) {
    .kisah-sukses-section .container h2 span i{
        font-size:2.4rem !important;
    }
    .apps-section .app-feature-text-content h5,.title-container h2,.kelas-section .container h2, .kisah-sukses-section .container h2, .apps-section .container h2{
        font-size:1.3rem !important;
    }
    .facility-card .category-name, .tool-card .category-name,.mempt-section .membership-item .membership-title,.mempt-section .pt-item .pt-title{
        font-size:1.0rem !important;
    }
    .kelas-section .container p,.mempt-section .title-container p,.apps-section .container p,.kisah-sukses-section .container p{
        font-size:0.8rem !important;
    }
    .harga-section #togglePtSesiBtn p{
        font-size:1.2rem !important;
    }   
    .testimoni-section #toggleTestimoniBtn p{
        font-size:1.2rem !important;
    }   
    .pt-hero{
        min-height:150px;
    }
    .section-animate .pt-sesi-card .pt-sesi-harga:not(.per-sesi){
        font-size:1.55rem !important;
    }
    .pt-card-horizontal .pt-lokasi{
        font-size:0.8rem;
        font-weight: unset;
    }
    .pt-card-horizontal .pt-content{
        padding:10px 0;
        min-height:100px;
    }
    .pt-card-horizontal{
        width:calc(400px * 1/2) !important;
    }
    .pt-card-horizontal img{
        max-height: 300px !important;
        min-height: 300px !important;
    }
    .pt-card-horizontal .pt-name{
        font-weight: unset;
        line-height: 1.0rem;
        font-size:1.0rem !important;
        margin:auto !important;
    }
    .pt-profile-section .pt-section-desc{
        font-size:0.8rem !important;
    }
    .gym-facilities h1,.gym-tools h1,.gym-gallery h1{
        font-size:1.3rem !important;
    }
    .gym-information h1{
        font-size:1.3rem !important;
    }
    .pt-intro-section p{
        font-size:0.8rem !important;
    }
    .testimoni-section .pt-section-title{
        font-size:1.3rem !important;
    }
    .harga-section .pt-section-title{
        font-size:1.3rem !important;
    }
    .pt-profile-section .pt-section-title{
        font-size:1.3rem !important;
    }
    .pt-intro-section h2{
        font-size:1.3rem !important;
    }
    .pt-hero-content h1{
        font-size:1.6rem !important;
    }
    .membership-hero-section .contents ul{
        font-size:0.8rem !important;
    }
    .membership-plans-section .plan-price{
        font-size:1.23rem !important;
    }
    .membership-plans-section .plan-data .plan-specs{
        margin-top:0.5rem;
    }
    .membership-plans-section .plan-duration{
        font-size:1.0rem !important;
    }
    .membership-plans-section #toggleMembershipBtn p{
        font-size:1.2rem !important;
    }
    .membership-hero-section h1{
        font-size:1.8rem !important;
    }
    .animated_logo{
        height:100px !important;
    }
    .apps-section div.row{
        padding:0px 20px 20px 20px
    }
    .mempt-section.mobile .title-container{
        margin-left:5vw !important;
    }
    .pt-item-cont{
        padding-left:5.5vw !important;
    }
    .carousel-caption h1 {
        font-size: 1.3rem;
    }
    .carousel-caption p {
        font-size: 0.8rem;
    }
    .carousel-caption{
        left:20px;
    }
    .carousel-caption .btn{
        font-size: 0.6rem;
    }
    .trial-section .container-kiri h2{
        font-size: 1.8rem !important;
    }
    .tentang-hero {
        min-height: 150px;
    }
    .about-intro-section h1{
        font-size: 1.3rem !important;
    }
    .about-intro-section h1 span.highlighted{
        font-size: 1.6rem !important;
    }
    .tentang-stats-section h2{
        font-size:1.3rem !important;
    }
    .membership-faq-section h2{
        font-size:1.3rem !important;
    }
    .container-kanan h2{
        font-size:1.3rem !important;
    }
    .pt-intro-section .text-right div{
        font-size:0.8rem !important;
    }
    .membership-faq-section .faq-item .accordion-button, .membership-faq-section .faq-item .accordion-body{
        font-size:0.8rem !important;
        line-height:1.5rem !important;
    }
    .about-intro-section div p {
        font-size: 0.8rem !important;
    }
    .tentang-hero-content h1{
        font-size:1.8rem;
        padding:0 50px;
    }
    span.underlined.s-3::after{
        height:2px;
    }
    .hb-datepicker td .day{
        width:18px;
        height:18px;
    }
    .hb-datepicker thead th,.hb-datepicker td .day {
        font-size:0.7rem !important;
    }
    .hb-datepicker th, .hb-datepicker td{
        padding:1px !important;
    }
    .hb-datepicker{
        width:230px !important;
        left: calc(((100% + 46px) / 2) - 46px - (230px / 2)) !important;
    }
    .kelas-grid.kelas-page .kelas-card .kelas-card-info .kelas-card-duration{
        line-height: 1.4rem !important;
    }
    .kelas-grid.kelas-page .kelas-card .kelas-card-info{
        font-size:0.8rem !important;
    }
    .kelas-grid.kelas-page .kelas-card .kelas-card-content h3{
        font-size:1.2rem !important;
        margin-bottom: 0 !important;
    }
    .kelas-grid.kelas-page .kelas-card{
        width:100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        aspect-ratio: 5/4 !important;
        max-height:unset;

    }
    .kelas-grid.kelas-page{
        padding:0.5rem !important;
        /* grid-template-columns: repeat(auto-fill, minmax(calc(100% - 1rem), 1fr)); */
        grid-auto-rows: max-content;
    }
    .qr-cont .class-detail-container .card-body .meta-row{
        flex-wrap:wrap;
        gap:2px !important;
    }
    .qr-cont .class-detail-container .card-body{
        margin:0 !important;
        gap:2px !important;
    }   
    .qr-cont .class-detail-container h5{
        font-size:0.9rem !important;
        letter-spacing: 0.05rem;
    }
    .qr-cont .class-detail-container h3{
        font-size:1.3rem !important;
    }
    .qr-cont .qr-detail-container h5{
        font-size:1.2rem !important;
    }
    .qr-cont .card-qr-books{
        width:90%;
    }
    .qr-detail-container span.badge{
        font-size:0.6rem !important;
        line-height:0.8rem;
    }
    .select-button{
        font-size:12px !important;
    }
    .kelas-page-main .title-section p{
        font-size:0.8rem !important;
        margin-bottom:0.9rem !important;
        padding: 0 15px !important  ;
    }
    .booking-section p{
        font-size:0.8rem !important;
    }
    .kelas-page-main .title-section h1{
        font-size:1.3rem;
    }
    .booking-section h1{
        font-size:1.3rem;
    }
    .kelas-hero-content h1{
        font-size:2.0rem;
        padding:0 50px;
    }
    .kelas-hero{
        min-height: 150px;
    }
    .gallery-main{
        grid-template-areas: "one one one" "two three six";
    }
    .smgaler{
        max-height:none !important;
        height:100% !important;
    }
    .gallery-main div.smgaler:nth-child(1){
        border-radius: 18px 18px 0 0 !important;
    }
    .gallery-main div.smgaler:nth-child(1) button{
        height:200px !important;
    }
    .gallery-main div.smgaler:nth-child(n+2) button{
        height:100px !important;
    }
    .gallery-main div.smgaler:nth-child(2){
        border-radius: 0 0 0 18px !important;
    }
    .gallery-main div.smgaler:nth-child(n+3){
        border-radius: 0 !important;
    }
    .gallery-main div.smgaler:nth-child(n+4){
        display:none;
    }
    .gallery-main button{
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin:0 !important;
        position:relative !important;
        border-radius: 0 0 18px 0 !important;
        font-size:0.8rem;
        padding:0.3rem;
    }
    .gym-information .gym-data li{
        font-size:0.8rem;
    }
    .gym-information .map-detail-expand a{
        font-size:0.6rem !important;
        margin-top:-5px;
    }
    .gym-information .map-detail-expand{
        bottom:7px !important;
    }
    .gym-information .map-detail-expand svg{
        width:8px;
        height:8px;
    }
    .lokasi-hero:has(.lokasi-hero-content.detail){
        min-height: 150px;
    }
    .lokasi-hero-content.detail span{
        font-size:1.0rem !important;
    }
    .lokasi-hero-content.detail h1{
        font-size:1.8rem !important;
        line-height: 25px !important;
    }
    .channel-hero{
        min-height: 150px;
    }
    .channel-hero-content.detail span{
        font-size:1.0rem !important;
    }
    .channel-hero-content.detail h1{
        font-size:1.5rem !important;
        line-height: 20px !important;
    }
    .lokasi-card-title{
        font-size:1.3rem !important;
        font-weight: 100 !important;
    }
    .lokasi-card-address{
        font-size:0.8rem !important;
    }
    .see-details{
        width:50px !important;
    }
    .see-details svg{
        width:15px;
        height:15px;
    }
    .lokasi-card{
        padding-top:120px;
    }   
    .lokasi-hero .lokasi-hero-content:not(.detail) h1{
        font-size: 1.8rem !important;
        line-height: 30px !important;
    }    
    .channel-hero .channel-hero-content{
        padding:50px 30px;
    }
    .channel-hero{
        min-height: 200px;
    }
    .lokasi-hero .lokasi-hero-content{
        padding:0 30px;
    }
    .lokasi-hero{
        min-height: 200px;
    }
    .desc-section h1{
        margin:0 !important;
        font-size:0.8rem !important;
    }
}



/* Custom bootstrap css */
@media (min-width:768px) {  
    .tentang-stats .col-md-6{
        width:calc(((100% - (1.5rem * 11)) / 12 * 6) + ((1.5rem * 5)));
    }
    .tentang-stats .col-md-4{
        width:calc(((100% - (1.5rem * 11)) / 12 * 4) + ((1.5rem * 3)));
    }
    .tentang-stats .col-md-8{
        width:calc(((100% - (1.5rem * 11)) / 12 * 8) + ((1.5rem * 7)));
    }
    .loc-dropdown {
        flex: 0 0 auto;
        width: 48%;
    }
    .booking-section .filter-cont{
        margin: 0 !important;
        gap:1.5rem!important;
        margin-bottom:1.5rem!important;
    }
    .button-select.button-select--auto{
        flex:0 0 auto !important;
    }
    .date-picker {
        width: max-content;
    }
    .qr-cont{
        height:unset !important;
    }
    .qr-cont .class-detail-container{
        min-width:50%;
    }
    .qr-cont .class-detail-container{
        padding:calc(var(--kelas-padding) + 10px ) calc(var(--kelas-padding)) calc(var(--kelas-padding) + 10px ) calc(var(--kelas-padding) + 10px );
    }
}

@media (min-width:992px){
    .about-intro-section div.row div:nth-child(1){
        height:calc(100vh - 20px - var(--headerH));
    }
    .tentang-stats-section{
        padding-top:3rem;
        padding-bottom:7.5rem;
    }
    .scrolling-tentang{
        height:calc(100vh + 400px);
    }
    .tentang-stats .col-lg-4{
        width:calc(((100% - (1.5rem * 11)) / 12 * 4) + ((1.5rem * 3)));
    }
    .tentang-stats .col-lg-3{
        width:calc(((100% - (1.5rem * 11)) / 12 * 3) + ((1.5rem * 2)));
    }
}

@media (max-aspect-ratio:9/10){
    #jumbotronCarousel{
        /* height:calc(100% + var(--headerH)); */
        height:max-content;
    }
    .carousel-caption{
        transform: none !important;
        top:0 !important;
        height:max-content;
    }
    .carousel-caption-container{
        height:max-content !important;
    }
    .carousel-caption-content{
        height:max-content;
        align-items: center;
    }

}
/* channel di home */
 /* Channel Card Hover Effects */
  .channel-card {
    transition: all 0.3s ease !important;
  }
  
  a:has(.channel-card):hover .channel-card {
    transform: translateY(-8px);
    border-color: var(--primarylightcolor) !important;
    box-shadow: 0 20px 40px rgba(71, 136, 235, 0.2);
  }
  
  a:has(.channel-card):hover .channel-image img {
    transform: scale(1.05);
  }
  
  a:has(.channel-card):hover .channel-read-more {
    color: #fff !important;
  }

  /* Channel Slider for Mobile */
  .channel-slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .channel-slider-viewport {
    overflow: hidden;
    width: 100%;
  }

  .channel-slider-track {
    display: flex;
    transition: transform 0.3s ease-out;
  }

  .channel-slide {
    flex: 0 0 auto;
    min-width: 0;
  }

  /* Desktop: Show all 3 cards in grid */
  @media (min-width: 768px) {
    .channel-slider-wrapper {
      overflow: visible;
    }

    .channel-slider-viewport {
      overflow: visible;
    }

    .channel-slider-track {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      transform: none !important;
    }

    .channel-slide {
      flex: none;
      width: auto;
    }
  }

  /* Mobile: Swipeable cards */
  @media (max-width: 767.98px) {
    .channel-slider-wrapper {
      overflow: hidden;
    }

    .channel-slider-viewport {
      overflow: hidden;
      padding: 0 1rem;
    }

    .channel-slider-track {
      cursor: grab;
      gap: 1rem;
    }

    .channel-slider-track:active {
      cursor: grabbing;
    }
    
    .channel-slide {
      width: calc(100vw - 2rem);
      flex-shrink: 0;
      padding-right: 40px;
    }
  }

  /* Pagination dots for mobile */
  .channel-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0;
  }

  .channel-pagination-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .channel-pagination-dot.active {
    background: var(--primarylightcolor);
    width: 24px;
    border-radius: 4px;
  }

  @media (min-width: 768px) {
    .channel-pagination {
      display: none;
    }
  }