/* FONT */
@font-face {
    font-family: Maison;
    src: url("../font/MaisonNeue/MaisonNeue-Book.ttf") format('truetype');
}

@font-face {
    font-family: MaisonDemi;
    src: url("../font/MaisonNeue/MaisonNeue-Demi.ttf") format('truetype');
}

@font-face {
    font-family: MaisonBold;
    src: url("../font/MaisonNeue/MaisonNeue-Bold.ttf") format('truetype');
}

@font-face {
    font-family: MaisonExtendExtraBold;
    src: url("../font/MaisonNeue/MaisonNeueExtended-ExtraBold.ttf") format('truetype');
}

.Maison {
    font-family:'Maison';
}

.MaisonDemi {
    font-family:'MaisonDemi';
}

.MaisonExtend {
    font-family:'MaisonBold';
}

.MaisonExtendExtraBold {
    font-family:'MaisonExtendExtraBold';
}

/* BODY */
body{
    font-family: "Maison", sans-serif !important;
}

/* VIEW */
.view-xl{
    display: none;
}

.view-md{
    display: none;
}

.view-sm{
    display: block;
}

/* CONTENT */
.container-x{
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.container-y{
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}


/* COLOR */
:root{
    --green-400: #299A4D;
    --green-300: #208D33;
    --green-200: #33C060;
    --green-100: #5CE086;
    --green-50: #D6F2DF;
    --green-05: #F5FCF7;
    --orange: #FFAB2C;
    --yellow: #FFC733;
    --blue: #2CB9FF;
    --white: #FFF;
    --black-200: #000;
    --black-100: #1D231F;
    --grey-200: #696B6B;
    --grey-100: #B1B1BC;
    --grey-50: #E7E6E7;
    --red-500: red;
}

/* BACKGROUND COLOR */
.bg-green-400{background-color: var(--green-400) !important;}
.bg-green-300{background-color: var(--green-300) !important;}
.bg-green-200{background-color: var(--green-200) !important;}
.bg-green-100{background-color: var(--green-100) !important;}
.bg-green-50{background-color: var(--green-50) !important;}
.bg-green-05{background-color: var(--green-05) !important;}
.bg-orange{background-color: var(--orange) !important;}
.bg-yellow{background-color: var(--yellow) !important;}
.bg-blue{background-color: var(--blue) !important;}
.bg-white{background-color: var(--white) !important;}
.bg-black-200{background-color: var(--black-200) !important;}
.bg-black-100{background-color: var(--black-100) !important;}
.bg-grey-200{background-color: var(--grey-200) !important;}
.bg-grey-100{background-color: var(--grey-100) !important;}
.bg-grey-50{background-color: var(--grey-50) !important;}
.bg-red-500{background-color: var(--red-500) !important;}

.bg-gradient-white-green-05{background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(245,252,247,1) 100%);}
.bg-gradient-green400-yellow{background: linear-gradient(180deg, rgba(41, 154, 77, 1) 0%, rgba(255, 199, 51, 1) 100%);}

/* BORDER COLOR */
.border-green-400{border: 1px var(--green-400) solid;}
.border-green-300{border: 1px var(--green-300) solid;}
.border-green-200{border: 1px var(--green-200) solid;}
.border-green-100{border: 1px var(--green-100) solid;}
.border-orange{border: 1px var(--orange) solid;}
.border-yellow{border: 1px var(--yellow) solid;}
.border-blue{border: 1px var(--blue) solid;}
.border-white{border: 1px var(--white) solid;}
.border-black-200{border: 1px var(--black-200) solid;}
.border-black-100{border: 1px var(--black-100) solid;}
.border-grey-200{border: 1px var(--grey-200) solid;}
.border-grey-100{border: 1px var(--grey-100) solid;}
.border-grey-50{border: 1px var(--grey-50) solid;}
.border-none{border: none !important;}

/* FONT COLOR */
.font-green-400{color: var(--green-400);}
.font-green-300{color: var(--green-300);}
.font-green-200{color: var(--green-200);}
.font-green-100{color: var(--green-100);}
.font-orange{color: var(--orange);}
.font-blue{color: var(--blue);}
.font-white{color: var(--white);}
.font-black-200{color: var(--black-200);}
.font-black-100{color: var(--black-100);}
.font-grey-200{color: var(--grey-200);}
.font-grey-100{color: var(--grey-100);}

/* FONT SIZE */
.text-header{font-size: 24px !important;}

.text-xl{font-size: 20px !important;}

.text-md{font-size: 18px !important;}

.text-sm{font-size: 16px !important;}

.text-xs{font-size: 14px !important;}

.text-xs-1x{font-size: 12px !important;}

.text-xs-2x{font-size: 10px !important;}

.text-xs-3x{font-size: 8px !important;}

/* FONT WEIGHT */
.font-weight-extra-bold{
    font-family: 'MaisonExtendExtraBold' !important;
}

.font-weight-bold{
    font-family: 'MaisonExtend' !important;
}

.font-weight-demi{
    font-family: 'MaisonDemi' !important;
}

.font-weight-normal{
    font-family: 'Maison' !important;
}

/* LINE HEIGHT */
h1, h2, h3, h4, h5, h6, p{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* TEXT ALIGN */
.t-left{
    text-align: left !important;
}

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

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

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

/* WORD BREAK */
.word-break{
    word-break: break-all;
    white-space: normal;
}

/* ELLIPSIS TEXT */
.ellips-text-1{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.ellips-text-2{
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Batasi hanya 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.ellips-text-3{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.ellips-text-4{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.ellips-text-5{
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

/* DIMENSION */
.height-10{height: 10px !important;}
.height-20{height: 20px !important;}
.height-30{height: 30px !important;}
.height-40{height: 40px !important;}
.height-50{height: 50px !important;}
.height-60{height: 60px !important;}
.height-70{height: 70px !important;}
.height-80{height: 80px !important;}
.height-90{height: 90px !important;}
.height-100{height: 100px !important;}

.height-content{height: fit-content !important;}
.height-full{height: 100% !important;}

.width-10{width: 10px !important;}
.width-20{width: 20px !important;}
.width-30{width: 30px !important;}
.width-40{width: 40px !important;}
.width-50{width: 50px !important;}
.width-60{width: 60px !important;}
.width-70{width: 70px !important;}
.width-80{width: 80px !important;}
.width-90{width: 90px !important;}
.width-100{width: 100px !important;}

.width-content{width: fit-content !important;}
.width-full{width: 100% !important;}

.d-10{width: 10px !important; height: 10px !important;}
.d-20{width: 20px !important; height: 20px !important;}
.d-30{width: 30px !important; height: 30px !important;}
.d-40{width: 40px !important; height: 40px !important;}
.d-50{width: 50px !important; height: 50px !important;}
.d-60{width: 60px !important; height: 60px !important;}
.d-70{width: 70px !important; height: 70px !important;}
.d-80{width: 80px !important; height: 80px !important;}
.d-90{width: 90px !important; height: 90px !important;}
.d-100{width: 100p !important; height: 100px !important;}

/* SPACING */
.padding-10{padding: 10px !important;}
.padding-20{padding: 20px !important;}
.padding-30{padding: 30px !important;}
.padding-40{padding: 40px !important;}
.padding-50{padding: 50px !important;}
.padding-60{padding: 60px !important;}
.padding-70{padding: 70px !important;}
.padding-80{padding: 80px !important;}
.padding-90{padding: 90px !important;}
.padding-100{padding: 100px !important;}

.padding-t-10{padding-top: 10px !important;}
.padding-t-20{padding-top: 20px !important;}
.padding-t-30{padding-top: 30px !important;}
.padding-t-40{padding-top: 40px !important;}
.padding-t-50{padding-top: 50px !important;}
.padding-t-60{padding-top: 60px !important;}
.padding-t-70{padding-top: 70px !important;}
.padding-t-80{padding-top: 80px !important;}
.padding-t-90{padding-top: 90px !important;}
.padding-t-100{padding-top: 100px !important;}

.padding-b-10{padding-bottom: 10px !important;}
.padding-b-20{padding-bottom: 20px !important;}
.padding-b-30{padding-bottom: 30px !important;}
.padding-b-40{padding-bottom: 40px !important;}
.padding-b-50{padding-bottom: 50px !important;}
.padding-b-60{padding-bottom: 60px !important;}
.padding-b-70{padding-bottom: 70px !important;}
.padding-b-80{padding-bottom: 80px !important;}
.padding-b-90{padding-bottom: 90px !important;}
.padding-b-100{padding-bottom: 100px !important;}

.padding-l-10{padding-left: 10px !important;}
.padding-l-20{padding-left: 20px !important;}
.padding-l-30{padding-left: 30px !important;}
.padding-l-40{padding-left: 40px !important;}
.padding-l-50{padding-left: 50px !important;}
.padding-l-60{padding-left: 60px !important;}
.padding-l-70{padding-left: 70px !important;}
.padding-l-80{padding-left: 80px !important;}
.padding-l-90{padding-left: 90px !important;}
.padding-l-100{padding-left: 100px !important;}

.padding-r-10{padding-right: 10px !important;}
.padding-r-20{padding-right: 20px !important;}
.padding-r-30{padding-right: 30px !important;}
.padding-r-40{padding-right: 40px !important;}
.padding-r-50{padding-right: 50px !important;}
.padding-r-60{padding-right: 60px !important;}
.padding-r-70{padding-right: 70px !important;}
.padding-r-80{padding-right: 80px !important;}
.padding-r-90{padding-right: 90px !important;}
.padding-r-100{padding-right: 100px !important;}

.padding-y-10{padding-top: 10px !important; padding-bottom: 10px  !important;}
.padding-y-20{padding-top: 20px !important; padding-bottom: 20px !important;}
.padding-y-30{padding-top: 30px !important; padding-bottom: 30px !important;}
.padding-y-40{padding-top: 40px !important; padding-bottom: 40px !important;}
.padding-y-50{padding-top: 50px !important; padding-bottom: 50px !important;}
.padding-y-60{padding-top: 60px !important; padding-bottom: 60px !important;}
.padding-y-70{padding-top: 70px !important; padding-bottom: 70px !important;}
.padding-y-80{padding-top: 80px !important; padding-bottom: 80px !important;}
.padding-y-90{padding-top: 90px !important; padding-bottom: 90px !important;}
.padding-y-100{padding-top: 100px!important ; padding-bottom: 100px !important;}

.padding-x-10{padding-left: 10px !important; padding-right: 10px  !important;}
.padding-x-20{padding-left: 20px !important; padding-right: 20px !important;}
.padding-x-30{padding-left: 30px !important; padding-right: 30px !important;}
.padding-x-40{padding-left: 40px !important; padding-right: 40px !important;}
.padding-x-50{padding-left: 50px !important; padding-right: 50px !important;}
.padding-x-60{padding-left: 60px !important; padding-right: 60px !important;}
.padding-x-70{padding-left: 70px !important; padding-right: 70px !important;}
.padding-x-80{padding-left: 80px !important; padding-right: 80px !important;}
.padding-x-90{padding-left: 90px !important; padding-right: 90px !important;}
.padding-x-100{padding-left: 100px!important  ;padding-right: 100px !important;}

.margin-10{margin: 10px !important;}
.margin-20{margin: 20px !important;}
.margin-30{margin: 30px !important;}
.margin-40{margin: 40px !important;}
.margin-50{margin: 50px !important;}
.margin-60{margin: 60px !important;}
.margin-70{margin: 70px !important;}
.margin-80{margin: 80px !important;}
.margin-90{margin: 90px !important;}
.margin-100{margin: 100px !important;}

.margin-t-10{margin-top: 10px !important;}
.margin-t-20{margin-top: 20px !important;}
.margin-t-30{margin-top: 30px !important;}
.margin-t-40{margin-top: 40px !important;}
.margin-t-50{margin-top: 50px !important;}
.margin-t-60{margin-top: 60px !important;}
.margin-t-70{margin-top: 70px !important;}
.margin-t-80{margin-top: 80px !important;}
.margin-t-90{margin-top: 90px !important;}
.margin-t-100{margin-top: 100px !important;}

.margin-b-10{margin-bottom: 10px !important;}
.margin-b-20{margin-bottom: 20px !important;}
.margin-b-30{margin-bottom: 30px !important;}
.margin-b-40{margin-bottom: 40px !important;}
.margin-b-50{margin-bottom: 50px !important;}
.margin-b-60{margin-bottom: 60px !important;}
.margin-b-70{margin-bottom: 70px !important;}
.margin-b-80{margin-bottom: 80px !important;}
.margin-b-90{margin-bottom: 90px !important;}
.margin-b-100{margin-bottom: 100px !important;}

.margin-l-10{margin-left: 10px !important;}
.margin-l-20{margin-left: 20px !important;}
.margin-l-30{margin-left: 30px !important;}
.margin-l-40{margin-left: 40px !important;}
.margin-l-50{margin-left: 50px !important;}
.margin-l-60{margin-left: 60px !important;}
.margin-l-70{margin-left: 70px !important;}
.margin-l-80{margin-left: 80px !important;}
.margin-l-90{margin-left: 90px !important;}
.margin-l-100{margin-left: 100px !important;}

.margin-r-10{margin-right: 10px !important;}
.margin-r-20{margin-right: 20px !important;}
.margin-r-30{margin-right: 30px !important;}
.margin-r-40{margin-right: 40px !important;}
.margin-r-50{margin-right: 50px !important;}
.margin-r-60{margin-right: 60px !important;}
.margin-r-70{margin-right: 70px !important;}
.margin-r-80{margin-right: 80px !important;}
.margin-r-90{margin-right: 90px !important;}
.margin-r-100{margin-right: 100px !important;}

.margin-y-10{margin-top: 10px !important; margin-bottom: 10px  !important;}
.margin-y-20{margin-top: 20px !important; margin-bottom: 20px !important;}
.margin-y-30{margin-top: 30px !important; margin-bottom: 30px !important;}
.margin-y-40{margin-top: 40px !important; margin-bottom: 40px !important;}
.margin-y-50{margin-top: 50px !important; margin-bottom: 50px !important;}
.margin-y-60{margin-top: 60px !important; margin-bottom: 60px !important;}
.margin-y-70{margin-top: 70px !important; margin-bottom: 70px !important;}
.margin-y-80{margin-top: 80px !important; margin-bottom: 80px !important;}
.margin-y-90{margin-top: 90px !important; margin-bottom: 90px !important;}
.margin-y-100{margin-top: 100px!important  ;margin-bottom: 100px !important;}

.margin-x-10{margin-left: 10px !important; margin-right: 10px  !important;}
.margin-x-20{margin-left: 20px !important; margin-right: 20px !important;}
.margin-x-30{margin-left: 30px !important; margin-right: 30px !important;}
.margin-x-40{margin-left: 40px !important; margin-right: 40px !important;}
.margin-x-50{margin-left: 50px !important; margin-right: 50px !important;}
.margin-x-60{margin-left: 60px !important; margin-right: 60px !important;}
.margin-x-70{margin-left: 70px !important; margin-right: 70px !important;}
.margin-x-80{margin-left: 80px !important; margin-right: 80px !important;}
.margin-x-90{margin-left: 90px !important; margin-right: 90px !important;}
.margin-x-100{margin-left: 100px!important  ;margin-right: 100px !important;}

/* BORDER RADIUS */
.radius-40{border-radius: 40px;}
.radius-30{border-radius: 30px;}
.radius-20{border-radius: 20px;}
.radius-18{border-radius: 18px;}
.radius-16{border-radius: 16px;}
.radius-14{border-radius: 14px;}
.radius-12{border-radius: 12px;}
.radius-10{border-radius: 10px;}
.radius-8{border-radius: 8px;}
.radius-6{border-radius: 6px;}
.radius-4{border-radius: 4px;}

.radius-lr-40{border-radius: 40px 0 40px 0;}
.radius-lr-30{border-radius: 30px 0 30px 0;}
.radius-lr-20{border-radius: 20px 0 20px 0;}
.radius-lr-18{border-radius: 18px 0 18px 0;}
.radius-lr-16{border-radius: 16px 0 16px 0;}
.radius-lr-14{border-radius: 14px 0 14px 0;}
.radius-lr-12{border-radius: 12px 0 12px 0;}
.radius-lr-10{border-radius: 10px 0 10px 0;}

.radius-rl-40{border-radius: 0 40px 0 40px;}
.radius-rl-30{border-radius: 0 30px 0 30px;}
.radius-rl-20{border-radius: 0 20px 0 20px;}
.radius-rl-18{border-radius: 0 18px 0 18px;}
.radius-rl-16{border-radius: 0 16px 0 16px;}
.radius-rl-14{border-radius: 0 14px 0 14px;}
.radius-rl-12{border-radius: 0 12px 0 12px;}
.radius-rl-10{border-radius: 0 10px 0 10px;}

.radius-circle{
    border-radius: 50%;
}

/* BOX SHADOW */
.shadow-normal{box-shadow: 0px 4px 18px rgba(177, 177, 188, 0.25);}

/* LIST */
/* ol, ul{padding: 0 !important; margin: 0 !important;} */
.list{
    /* list-style: none; */
    padding-bottom: 10px;
}

.list a{
    display: block;
    text-decoration: none;
}

/* BUTTON */
a{
    display: block;
    text-decoration: none !important;
}

.button{
    display: block;
    text-decoration: none;
    transition: .2s;
}

.button:active {
    transform: scale(0.95);
    box-shadow: 0px 4px 18px rgba(32, 141, 51, 0.2);
}

/* IMAGE ASPEC RATIO */
.img-full{
    min-width: 100%;
    height: auto;
}

.img-fit{
    object-position: center;
    object-fit: cover;
}

/* PHOTO 1:1 */
.rectangle{
    aspect-ratio: 1/1;
    height: auto;
    background-size: cover;
    object-fit: cover;
    object-position: center;
}

.landscape{
    aspect-ratio: 16/9;
    height: auto;
    background-size: cover;
    object-fit: cover;
    object-position: center;
}

.banner{
    aspect-ratio: 4/1;
    height: auto;
    background-size: cover;
    object-fit: cover;
    object-position: center;
}

/* OPACITY */
.opacity-10{opacity: 0.1;}
.opacity-20{opacity: 0.2;}
.opacity-30{opacity: 0.3;}
.opacity-40{opacity: 0.4;}
.opacity-50{opacity: 0.5;}
.opacity-60{opacity: 0.6;}
.opacity-70{opacity: 0.7;}
.opacity-80{opacity: 0.8;}
.opacity-90{opacity: 0.9;}
.opacity-100{opacity: 1;}

/* Button to Top */
.boxbtntop{
    display: none;
    position: fixed;
    top: 90%;
    left: 30px;
    margin: 0 auto;
    z-index: 4;
}

.boxbtntop .btntop{
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: rgba(32, 141, 51, .5);
    border: 4px var(--secondary-color) solid;
    cursor: pointer;
    font-size: 20px;
    transition: 0.2s;
}
/* Button to Top */

/* Button Float Whatsapp */
.boxbtnwhatsapp{
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    margin-right: 10px;
    background-color: var(--black-100);
    border: 4px var(--secondary-color) solid;
    cursor: pointer;
    font-size: 20px;
    transition: 0.2s;
}
/* Button Float Whatsapp */


.btn-whatsapp-mobile{
    display: flex;
    align-items: center;
    position: fixed;
    top: 70%;
    right: 1.1rem;
    margin: 0 auto;
    z-index: 4;
}


/* Button Chat */
.boxbtnchat{
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 90.5%;
    right: 30px;
    margin: 0 auto;
    z-index: 4;
}

.boxbtnchat .btnchat{
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    height: 50px;
    width: auto;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 50px;
    background-color: var(--blue);
    border: 4px var(--secondary-color) solid;
    cursor: pointer;
    font-size: 20px;
    transition: 0.2s;
}

.boxbtnchat .btnchat .boxbtnchattext{
    font-size: 16px;
    padding-right: 10px;
    color: var(--white);
}

.boxbtnchat .btnchat .boxbtnchatimg{
    width: 30px;
    height: 30px;
}
/* Button Chat */

/* SIDENAV  */
.sidenav {
    box-shadow: 0 10px 20px 0 rgb(53 64 90 / 20%);
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.4);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 0px;
    font-size: 14px;
}

.sidenav .sidenav-container{
    border-bottom: 1px var(--grey) solid;
    border-top: none;
    border-right: none;
    border-left: none;
}

.sidenav .border-menu-sidenav{
    padding: 0 20px;
    width: 100%;
    height: 1.8px;
    background-color: #000;
}
  
.sidenav a {
    padding: 6px 20px 6px 20px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    color: var(--blue2);
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .sidenav-title{
    font-size: 16px;
    padding: 10px;
    color: var(--black2);
}

.sidenav .btn-sidenav {
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500;
    color: var(--grey);
    display: block;
    border: none;
    background-color: transparent;
    outline: none;
    transition: .3s;
}

.sidenav .btn-sidenav:hover {
    color: var(--green-200);
    /* border-bottom: 1.7px var(--orange) solid; */
}

.sidenav .btn-cari{
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 600;
    color: var(--blue2);
    display: block;
    border: none;
    background-color: transparent;
    outline: none;
    border-bottom: 1.7px #D9D9D9 solid;
    border-top: none;
    border-right: none;
    border-left: none;
    width: 100%;
}

.sidenav .closebtn {
    position: absolute;
    top:0%;
    right: 0;
    font-size: 28px;
    color: var(--white);
    z-index: 1002;
}

.menu-in {
    background: #fff;
    width: 100%;
    min-height: 100%;
    max-height: fit-content;
}

.menu-in-radio {
    background: #fff;
    width: 250px;
    min-height: 100%;
    max-height: fit-content;
}

.set-menu {
    position: relative;
    display: flex;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0 6px 18px rgba(177, 177, 188, 0.2);
    font-weight: bold;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    margin-bottom: 1rem;
    height: 120px;
    padding-top: 10px;
    background-image: url('../image/ilustration/ilustration-pattern-01.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /* background-size: cover; */
    /* padding: 36px 6px 36px 25px !important; */
    /* box-shadow: 0 10px 20px 0 rgb(53 64 90 / 20%); */
}

.accordion{
    padding: 0 20px;
}
/* SIDENAV  */

/* NAVBAR */
.navbar{
    position: fixed !important;
    transition: .3s !important;
    width: 100%;
    display: block;
    z-index: 101;
}

.nav-block{
    top: 0;
}

.navbar .nav-link.active{
    font-family: 'MaisonDemi' !important;
}

.dropdown {
    position: unset !important;
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--white);
    min-width: 160px;
    z-index: 2;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* HERO */
.hero-section{
    padding-bottom: 0 !important;
}

/* CHECKOUT */
.checkout-container{
    position: fixed !important;
    transition: .3s !important;
    width: 100%;
    display: block;
    z-index: 100;
    bottom: 0;
    left: 0;
    box-shadow: 0px 4px 18px rgba(177, 177, 188, 0.25);
}

.checkout-price{
    padding-left: 0;
}

.btn-checkout-mobile{
    display: block;
}

.btn-checkout-medium{
    display: block;
}

/* CAROUSEL */
.carousel-container{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 80px;
}

.carousel-item{
    display: flex;
    justify-content: center;
    align-items: center;
}

.thumb {
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
    display: inline-block;
    width: 60px;
    height: 60px;
}
.thumb.active, .thumb:hover {
    opacity: 1;
    border: 3px solid var(--green-400);
}
.thumb-wrapper {
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    max-width: 100%;
}
.thumb-wrapper img {
    margin-right: 8px;
}

/* Fade-in / fade-out navigation */
#mainCarousel .carousel-control-prev,
#mainCarousel .carousel-control-next {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

#mainCarousel:hover .carousel-control-prev,
#mainCarousel:hover .carousel-control-next {
    opacity: 1;
    transform: translateY(0);
}

/* COLLAPSE */
.btn-collapse{
    border-bottom: 1px #B1B1BC solid !important;
    border-radius: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    transition: align-items 0.2s ease;
    align-items: center;
}

/* COLLAPSE TEXT */
.collapse-content{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    max-height: 4.5em; /* Assuming line-height is 1.5em */
    transition: max-height 0.3s ease-in-out;
}
.expanded{
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    max-height: none;
}
.collapse-button-container{
    display: none;
    margin-top: 8px;
}

.rotate-collapse {
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
}

.img-success{
    width: 70%;
}

/* ALERT */
.alert{
    margin-top: 20px;
    padding: 10px;
    border-radius: 5px;
    display: none;
}
.success{
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}
.error{
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* DELETE FORM TIKET */
.hapusTiket{
    background-color: red;
}

/* QRCODE */
.slider-container-qrcode {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slider-qrcode {
    display: flex;
    transition: transform 0.3s ease;
}

.slide-qrcode {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.pagination-qrcode {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.dot-qrcode {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    border-radius: 50%;
    background: var(--green-50);
    transition: background 0.3s ease;
}

.dot-qrcode.active {
    background: var(--green-400);
}

.nav-buttons-qrcode {
    display: flex;
    justify-content: space-between;
}

.button-qrcode {
    background: var(--green-400);
    color: #fff;
    cursor: pointer;
}

.button-qrcode:disabled {
    background: var(--grey-100);
    cursor: not-allowed;
}

.qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    margin: 20px auto;
}

.qrcode canvas {
    width: 100% !important;
    height: auto !important;
}

.qrcode canvas, .qrcode img {
    width: 100% !important;
    height: auto !important;
}

/* PROFILE */
.img-ticket{
    width: 80px;
    max-width: 100%;
}

/*image banner*/
#img-banner {
    display: block;
}

#img-banner-mobile {
    display: none;
}

/* Jika ukuran layar <= 768px (mobile), ganti tampilan */
@media (max-width: 768px) {
    #img-banner {
        display: none !important;
    }

    #img-banner-mobile {
        display: block !important;
    }
}

/*qrcode*/
.slide-qrcode {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}

.qr-wrapper {
  margin-bottom: 12px;
}

.ticket-info {
  text-align: center;
}

.ticket-name,
.ticket-category {
  font-size: 14px;
  margin: 2px 0;
}

.image-banner {
    padding-top: 70px !important;
}

.form-check-input:checked {
    background-color: #28a745;
    border-color: #28a745;
}


/* FOOTER */
.footer-sm{display: block;}
.footer-md{display: none;}
.footer-xl{display: none;}

.table-dark {
    --bs-table-bg: #065c13 !important;
}

.opacity-08 {
    opacity: 0.8;
}