/* 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: MaisonExtend;
    src: url("../font/MaisonNeue/MaisonNeueExtended-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:'MaisonExtend';
}

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

/* BODY */
body{
    font-family: "Maison", sans-serif !important;
    /* font-family: "Outfit", sans-serif;
    --secondaryFont: "IBM Plex Sans", sans-serif; */
}

.mb-4 {
    margin-bottom: 0.3rem !important;
}

.outfit-global {
    font-family: "Outfit", sans-serif;
}

.outfit-100 {
    font-family: "Outfit", sans-serif;
    font-weight: 100;
}

.outfit-300 {
    font-family: "Outfit", sans-serif;
    font-weight: 300;
}

/* 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-x1{
    padding-left: 0px !important;
    padding-right: 0px !important;
}

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


/* COLOR */
:root{
    --green-300: #208D33;
    --green-200: #33C060;
    --green-100: #5CE086;
    --green-05: #F5FCF7;
    --green-04: #AFD6B5;
    --green-03: #d4edd8;
    --orange: #FFAB2C;
    --yellow-soft: #ffc1075c;
    --blue: #2CB9FF;
    --blue-soft: #2cb9ff30;
    --white: #FFF;
    --black-200: #000;
    --black-100: #1D231F;
    --grey-200: #696B6B;
    --grey-100: #B1B1BC;
    --grey-50: #d9d9d9;
    --grey-05: #f1f1f1;
    --grey-04: #F9F9FF;
  
    --red-100: #ff2323;
    --red-soft: #ff232329;
    --white-01: rgba(255,255,255,0.5);
}

/* BACKGROUND COLOR */
.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-06{background-color: var(--green-06) !important;}
.bg-green-05{background-color: var(--green-05) !important;}
.bg-green-04{background-color: var(--green-04) !important;}
.bg-green-03{background-color: var(--green-03) !important;}

.bg-orange{background-color: var(--orange) !important;}
.bg-blue{background-color: var(--blue) !important;}
.bg-blue-soft{background-color: var(--blue-soft) !important;}
.bg-blue-soft{background-color: var(--blue-soft) !important;}
.bg-yellow-soft{background-color: var(--yellow-soft) !important;}
.bg-red-soft{background-color: var(--red-soft) !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-grey-05{background-color: var(--grey-05) !important;}
.bg-grey-04{background-color: var(--grey-04) !important;}
.bg-white-01{background-color: var(--white-01) !important;}


.bg-gradient-white-green-05{background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(245,252,247,1) 100%);}

/* FONT COLOR */
.font-green-300{color: var(--green-300) !important;}
.font-green-200{color: var(--green-200) !important;}
.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)!important ;}
.font-black-100{color: var(--black-100) !important;}
.font-grey-200{color: var(--grey-200) !important ;}
.font-grey-100{color: var(--grey-100) !important;}
.font-red-100{color: var(--red-100) !important;}

/* FONT SIZE AWAL */
/* .text-header{font-size: 20px !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 SIZE BARU  */
.text-header{font-size: 20px !important;}
.text-xl{font-size: 20px !important;}
.text-md{font-size: 18px !important;}
.text-sm{font-size: 16px !important;}
.text-xs {font-size: 12px !important}
.text-xs-1x {font-size: 14px !important}
.text-xs-2x {font-size: 16px !important}
.text-xs-3x {font-size: 18px !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;
}

h3{
    font-size: 18px !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;
}

/* DIMENSION */
.height-10{height: 10px !important;}
.height-20{height: 20px !important;}
.height-30{height: 30px !important;}
.height-35{height: 35px !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-160{height: 160px !important;}
.height-250{height: 250px !important;}
.height-300{height: 300px !important;}
.height-400{height: 400px !important;}

.height-content{height: fit-content !important;}

.width-10{width: 10px !important;}
.width-18p {width: 18% !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-150{width: 150px !important;}
.width-200{width: 200px !important;}

/* DIMENSION PERSEN  */
.width-10p{width: 10% !important;}
.width-15p{width: 15% !important;}
.width-20p{width: 20% !important;}
.width-23p{width: 23% !important;}
.width-30p{width: 30% !important;}
.width-35p{width: 35% !important;}
.width-40p{width: 40% !important;}
.width-50p{width: 50% !important;}
.width-60p{width: 60% !important;}
.width-70p{width: 70% !important;}
.width-80p{width: 80% !important;}
.width-90p{width: 90% !important;}
.width-100p{width: 100% !important;}
.width-100pa{width: 100% !important;}

.width-content{width: fit-content !important;}

.d-10{width: 10px !important; height: 10px !important;}
.d-15{width: 15px !important; height: 15px !important;}
.d-20{width: 20px !important; height: 20px !important;}
.d-23{width: 23px !important; height: 23px !important;}
.d-25{width: 25px !important; height: 25px !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: 100px !important; height: 100px !important;}

/* SPACING */
.padding-0{padding: 0px !important;}
.padding-0a{padding: 0px !important;}
.padding-7{padding: 7px !important;}
.padding-10{padding: 10px !important;}
.padding-15{padding: 15px !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-3{padding-top: 3px !important;}
.padding-t-5{padding-top: 5px !important;}
.padding-t-10{padding-top: 10px !important;}
.padding-t-15 {padding-top: 15px !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-65{padding-top: 65px !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-t-150 {padding-top: 150px !important;}

.padding-b-0{padding-bottom: 0px !important;}
.padding-b-5{padding-bottom: 5px !important;}
.padding-b-7{padding-bottom: 7px !important;}
.padding-b-10{padding-bottom: 10px !important;}
.padding-b-15{padding-bottom: 15px;}
.padding-b-18{padding-bottom: 18px;}
.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-5{padding-top: 5px !important; padding-bottom: 5px  !important;}
.padding-y-10{padding-top: 10px !important; padding-bottom: 10px  !important;}
.padding-y-15{padding-top: 15px !important; padding-bottom: 15px  !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-1 {margin: 1px !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-0{margin-top: 0px !important;}
.margin-t-5{margin-top: 5px !important;}
.margin-t-10{margin-top: 10px !important;}
.margin-t-15{margin-top: 15px !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-t-150{margin-top: 150px !important;}

.margin-b-5{margin-bottom: 5px !important;}
.margin-b-10{margin-bottom: 10px !important;}
.margin-b-15{margin-bottom: 15px !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-25{margin-left: 25px !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-5{margin-right: 5px !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-50{border-radius: 50px !important;}
.radius-40{border-radius: 40px !important;}
.radius-30{border-radius: 30px !important;}
.radius-20{border-radius: 20px !important;}
.radius-18{border-radius: 18px !important;}
.radius-16{border-radius: 16px !important;}
.radius-14{border-radius: 14px !important;}
.radius-12{border-radius: 12px !important;}
.radius-10{border-radius: 10px !important;}
.radius-8{border-radius: 8px !important;}
.radius-6{border-radius: 6px !important;}
.radius-4{border-radius: 4px !important;}

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

.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-rb-10{border-radius: 0 10px 10px 0 ;}

.radius-left-10{border-radius: 10px 0 0 10px;}
.radius-left-30{border-radius: 30px 0 0 30px;}

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

/* BOX SHADOW */
.shadow-normal{box-shadow: 0px 4px 18px rgba(177, 177, 188, 0.25);}
.shadow-normal-1{box-shadow: 10px 20px 30px rgba(177, 177, 188, 0.25);}
.shadow-green {box-shadow: 0 4px 20px 0 rgba(34,183,83,0.7) !important;}
.shadow-green-100 {box-shadow: 0 4px 20px 0 rgba(34,183,83,0.2) !important;}
.shadow-none {
    box-shadow: none !important;
}

.shadow-mobile{box-shadow: 0px 4px 18px rgba(177, 177, 188, 0.25);}


/* 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;
}



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

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

/* BUTTON */
.button{
    display: block;
    text-decoration: none;
}

a {
    text-decoration: none !important;
}

/* 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 */

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

.boxbtnchat .btnchat{
    /* display: flex; */
    display: none;
    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 */


.nama-travel-detail {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    line-height: normal;
    margin-left: 5rem;
}

.travel-teks {
    font-size: 12px;
    margin-left: 5rem;
}

.travel-teks2 {
    font-size: 12px;
    margin-left: 1rem !important;
}

/* 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;
    right: 0;
    font-size: 28px;
    color: var(--white);
    z-index: 1002;
    /* position: absolute;
    top: 0;
    bottom: 0;
    right: 1%;
    margin-left: 50px; */
}

.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: #33c060;
    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('../images/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; */
    padding: 0px;
}
/* SIDENAV  */

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

.nav-block{
    top: 0;
}

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

/* HEADER */
.header-content{
    padding-top: 60px;
}

/* NAV TABS */
.nav-tabs{border: none !important;}
.nav-tabs .nav-link{
    color: var(--green-200);
    background-color: none !important;
    width: fit-content;
    display: flex;
    align-items: center;
    border: none !important;
    border-radius: none !important;
    padding: 0 !important;
}

.nav-tabs .nav-link .nav-tag{
    /* border: 1px var(--grey-200) solid; */
    background-color: var(--green-200);
    margin-right: 10px;
    transition: .3s;
}

.nav-tabs .nav-link .nav-tag p{
    transition: .3s;
}

.nav-tabs .nav-link .nav-tag p{
    color: var(--white);
}

.nav-tabs .nav-link div p{
    transition: .3s;
}

.nav-tabs .nav-link:hover div p{
    color: var(--green-200);
}

.nav-tabs .nav-link:hover .nav-tag{
    background-color: var(--green-200);
    border: 1px var(--green-200) solid;
}

.nav-tabs .nav-link:hover .nav-tag p{
    color: var(--white);
}

.tab-card{
    border-radius: 10px;
}

.tab-card-heading{
    border-radius: 10px 10px 0 0;
}

.tab-card-body{
    border-radius: 0 0 10px 10px;
}

.tab-card form .form-control, .form-select{
    border: none !important;
    padding: 20px 10px !important;
    font-size: 14px !important;
    box-shadow: 0px 4px 18px rgba(177, 177, 188, 0.25) !important;
    border-radius: 8px !important;
    color: var(--grey-200) !important;
}

.tab-card form .btn{
    padding: 10px !important;
}

.form-card-02{
    border-radius: 10px !important;
    background-color: transparent;
}

/* SECTION BAGAIMANA CARA KERJANYA */
.cara-kerja-content-xl{display: none !important;}
.cara-kerja-content-sm-md{display: block !important;}
.cara-kerja-line{display: none;}

/* FORM */
.form-card-01{
    width: 100% !important;
    height: fit-content;
    background-color: var(--white);
    padding: 40px !important;
    border-radius: 20px;
    box-shadow: 0px 4px 18px rgba(177, 177, 188, 0.25);
}

.form-card-02{
    width: 100% !important;
    border-radius: 20px !important;
}

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

.rekan-usaha-card{
    padding-right: calc(var(--bs-gutter-x)* 0.20) !important;
    padding-left: calc(var(--bs-gutter-x)* 0.20) !important;
}


/* TAMBAHAN BARU  */

.header {
    height: 80vh !important;
}

.absolute-cerita-populer-1 {
    padding: 20px;
    position: relative;
    width: 100%;
    margin-top: -35%;
}

.img-cover {
    object-fit: cover !important;
}

.img-berita-utama {
    height: 350px;
    width: 100%;
    object-fit: cover;
}

.img-kisah {
    height: 585px !important;
    width: 100%;
    object-fit: cover;
}

.img-tips {
    height: 325px !important;
    object-fit: cover;
}

.img-sub-populer {
    height: 180px !important;
    object-fit: cover;
}

.img-cerita-lain {
    height: 105px !important;
    object-fit: cover;
}

.line-tittle {
    padding-left: 10px;
    /* border-radius: 10px; */
    border-left: 10px solid #33C060;
}

.line-tittle-01 {
    border: 5px solid #33C060;
    border-radius: 10px;
}

.tag-cerita {
    font-size: 12px;
    position: absolute;
    background: #FFAF25;
    padding: 5px 15px;
    font-weight: 600;
    color: #fff;
    border-radius: 8px 0px 8px 0px;
}

.tag-fb {
    background: #2A67C6;
    width: 100%;
    padding: 5px 10px;
    border-radius: 5px;
    height: 50px;
}

.tag-ig {
    background: #F872A4;
    width: 100%;
    padding: 5px 10px;
    border-radius: 5px;
    height: 50px;
}

.tag-yt {
    background: #F1383E;
    width: 100%;
    padding: 5px 10px;
    border-radius: 5px;
    height: 50px;
}

.tag-tiktok {
    background: #000;
    width: 100%;
    padding: 5px 10px;
    border-radius: 5px;
    height: 50px;
}

.tag-green-01 {
    border: 1px solid #33c060 !important;
    background: #33c060 !important;
    color: #fff !important;
}

.tag-lainnya {
    border: 1px solid #B1B1BC !important;
    color: #696B6B !important;
    /* border-radius: 0px !important; */
}

.bg-tips {background-image: url(../images/ilustration/img-kategori-tips-1.png);}
.bg-kisah {background-image: url(../images/ilustration/img-kategori-kisah-01.png);}
.bg-kabar-haji {background-image: url(../images/ilustration/img-kategori-kabar-umrah-haji.png);}
.bg-khazanah {background-image: url(../images/ilustration/img-kategori-khazanah-01.png);}
.bg-doa {background-image: url(../images/ilustration/img-kategori-doa-01.png);}

.tag-kategori {
    padding: 5px 10px;
    border-radius: 5px;
    background-repeat: no-repeat;
    width: 100% !important;
    height: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;
}



.position-play-01 {
    position: absolute;
    margin-top: -8%;
    margin-left: 1%;
}

.position-play-02 {
    position: absolute;
    margin-top: -1.4%;
}

.klik-play-01 {border-radius: 50px; padding: 7px; background: rgba(255, 255, 255, 0.5); box-shadow: 0 4px 30px 0 rgb(216 221 218 / 70%) !important;}
.klik-play-02 {border-radius: 50px;padding: 10px;background: rgba(255, 255, 255, 0.5);box-shadow: 0 4px 20px 0 rgb(216 221 218 / 70%) !important;}
.klik-play-03 {border-radius: 50px;padding: 5px;background: rgba(255, 255, 255, 0.5);box-shadow: 0 4px 20px 0 rgb(216 221 218 / 70%) !important;}

.border-grey {
    border: 1px solid #d9d9d9;
}

.border-green-1 {
    border: 1px solid #33C060;
}

.bg-circle-medsos {
    padding: 1px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
}

.card-caption-video {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/ilustration/img-video-01.png");
    height: 70% !important;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    width: 100%;
}

.text-video {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}

.absolute-header-1 {
    position: absolute;
    width: 85%;
    bottom: 35%;
}


frame > .ytp-title-link {
    display: none !important;
}

.cursor {
    cursor: pointer;
}


.img-detail-artikel {
    width: 100%;
    height: 15% !important;
    object-fit: cover;
}

.height-video {
    height: 30vh !important;
}

.lh-20 {
    line-height: 20px;
    margin-top: 2px;
}


/* FONT GOOGLE   */


/* ADLAM DISPLAY  */
.adlam-display-regular {
  font-family: "ADLaM Display", serif;
  font-weight: 400;
  font-style: normal;
}


/* OUTFIT  */
.outfit {
  font-family: "Outfit", serif;
  font-optical-sizing: auto;
  font-weight:500;
  font-style: normal;
}

/* LEAGUE-SPARTAN  */

.league-spartan {
  font-family: "League Spartan", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


/* IBM FLEX  */

.ibm-plex-sans-thin {
  font-family: "IBM Plex Sans", serif;
  font-weight: 100;
  font-style: normal;
}

.ibm-plex-sans-extralight {
  font-family: "IBM Plex Sans", serif;
  font-weight: 200;
  font-style: normal;
}

.ibm-plex-sans-light {
  font-family: "IBM Plex Sans", serif;
  font-weight: 300;
  font-style: normal;
}

.ibm-plex-sans-regular {
  font-family: "IBM Plex Sans", serif;
  font-weight: 400;
  font-style: normal;
}

.ibm-plex-sans-medium {
  font-family: "IBM Plex Sans", serif;
  font-weight: 500;
  font-style: normal;
}

.ibm-plex-sans-semibold {
  font-family: "IBM Plex Sans", serif;
  font-weight: 600;
  font-style: normal;
}

.ibm-plex-sans-bold {
  font-family: "IBM Plex Sans", serif;
  font-weight: 700;
  font-style: normal;
}

.ibm-plex-sans-thin-italic {
  font-family: "IBM Plex Sans", serif;
  font-weight: 100;
  font-style: italic;
}

.ibm-plex-sans-extralight-italic {
  font-family: "IBM Plex Sans", serif;
  font-weight: 200;
  font-style: italic;
}

.ibm-plex-sans-light-italic {
  font-family: "IBM Plex Sans", serif;
  font-weight: 300;
  font-style: italic;
}

.ibm-plex-sans-regular-italic {
  font-family: "IBM Plex Sans", serif;
  font-weight: 400;
  font-style: italic;
}

.ibm-plex-sans-medium-italic {
  font-family: "IBM Plex Sans", serif;
  font-weight: 500;
  font-style: italic;
}

.ibm-plex-sans-semibold-italic {
  font-family: "IBM Plex Sans", serif;
  font-weight: 600;
  font-style: italic;
}

.ibm-plex-sans-bold-italic {
  font-family: "IBM Plex Sans", serif;
  font-weight: 700;
  font-style: italic;
}



/* ROBOTO   */

.roboto-thin {
  font-family: "Roboto", serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", serif;
  font-weight: 900;
  font-style: italic;
}


.font-outfit-content {
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 15px;
    letter-spacing: -0.01em;
    font-family: "Outfit", sans-serif;
}

.border-1 {
    border: 1px solid #33c060;
    border-radius: 7px;
}

.border-2 {
    border: 1px solid #ebebeb !important;
    border-radius: 7px;
}


.bold {
    font-weight: bold !important;
}

.img-berita-utama {
    height: 325px !important;
    width: 100%;
    object-fit: cover;
}

.text-header-banner {
    position: absolute;
    margin-top: -38%;
    width: 93%;
    padding: 15px;
}

.setting-under-constraction {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/ilustration/img-12.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
}

.ditengah {
    position: absolute;
    top: 50%;
    left: 50%;
    width:90%;
    transform: translate(-50%, -50%);
}

.ditengah-content {
    position: absolute;
    top: 60%;
    left: 50%;
    width:90%;
    transform: translate(-50%, -50%);
}

.set-sub-nav-search {
    margin-top: 90px;
    /* padding-bottom: 10px; */
}

.border-0 {
    border:0px
}

.set-caption-baitullah {
    margin-top: -55%;
    width: 85%;
    padding: 20px;
}

.package-line {
    height: 1px;
    width: 100%;
    background-color: #F0F0F0 !important;
    margin: 10px 0;
    opacity: 1;
}

.package-icon {
    width: 20px !important;
    height: 20px !important;
    margin-right: 5px;
}

hr {
    border-top: 0.5px solid #F0F0F0 !important;
}

.page-link.active, .active > .page-link {
    background-color: #33c060 !important;
    border-color: #33c060 !important;
}

.form-check-input {
    border-color: #33c060 !important;
}

.form-check-input:checked {
    background-color: #33c060 !important;
    border-color: #33c060 !important;
}

.position-btn-cari {
    margin-left: -25%;
    margin-top: -1%;
}

.card-travel-detail {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 30px;
    background: linear-gradient(to right, #33BFA4, #33C060);
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.12);
    border-radius: 44px;
    margin-top: 0.5rem;
    /* margin-bottom: 2rem; */
}

.img-travel-detail {
    position: absolute;
    top: -15%;
    left: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: contain;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1) !important;
    padding: 5px;
    border: 4px solid #33BFA4;
    background-color: #fff;
}

.border-left-02 {
    border-left: 0.2px solid #fff;
}

.margin-l-6rem {
    margin-left: 6rem;
}

.set-border-maskapai1 {
  border-top: 1px dotted #000;
  width: 100%;
  margin: 5%;
  margin-top: 10px;
}

.card-perjalanan {
    background: #DEF4E5;
    padding: 20px;
    border-radius: 10px;
    border-left: 10px solid #208D33;
}

.set-circle-01 {
    position: absolute;
    right: 4%;
    margin-top: -14%;
}

.set-circle-02 {
    position: absolute;
    right: 4%;
    margin-top: -9.5%;
}

.set-circle-03 {
    position: absolute;
    right: 4%;
    margin-top: -7.5%;
}

.set-circle-04 {
    position: absolute;
    right: 4%;
    margin-top: -7.5%;
}

.set-circle-05 {
    position: absolute;
    right: 4%;
    margin-top: -5.3%;
}

.set-circle-06 {
    position: absolute;
    right: 4%;
    margin-top: -7.5%;
}

.middle-center {
    margin-top: -5.7% !important;
}

.set-bg-login {
    position: absolute;
    bottom: 0%;
}

.z-100 {
    z-index: 100;
}

.banner-set {
    height: 160px !important;
    object-fit: cover !important;
    visibility: visible;
    animation-duration: 1s;
    animation-name: fadeInUp;
}

.margin-l-min7p {
    margin-left: -7%;
}

.margin-t-min1p {
    margin-top: -1% !important;
}
.margin-t-min5p {
    margin-top: -5% !important;
}

.margin-t-min10 {
    margin-top: 10px !important;
}

.testimonial-group > .row {
  overflow-x: auto;
  white-space: nowrap;
}
.testimonial-group > .row > #btn-jenis-paket   {
  display: inline-block;
  float: none;
}

.package-long-day-top {
    padding: 6px 4px;
    background-color: #FAF5EE;
    width: 100%;
    height: auto;
    border-radius: 8px 8px 0 0;
}

.package-long-day-bottom {
    padding: 4px 4px;
    background-color: #33C060;
    width: 100%;
    height: auto;
    border-radius: 0 0 8px 8px;
}

.set-card-detail {
    margin-top: -21%;
    position: relative;
    padding: 15px;
    /* z-index: 100 !important; */
}


.carousel-control-prev, .carousel-control-next {
    opacity: 1 !important;
}

.set-left {
    background: #fff;
    border-radius: 50%;
    padding: 3px;
    border: 2px solid #33c060;
}

.set-right {
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    border: 2px solid #33c060;
}

.img-travel-detail {
    top: -9%;
    width: 90px;
    height: 90px;
}

.pesanan-content .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: scroll;
    overflow-y: hidden;
    scrollbar-width: thin;
    border: none;
}

.bg-menu-profile {
    background: transparent;
    transition: 0.6s;
}

.bg-menu-profile:hover {
    background: #f1f1f1;
}

.set-margin {
    margin-right: 0px !important;
    margin-left: 0px !important;
}

.set-margin7 {
    margin-right: -7px !important;
    margin-left: -7px !important;
}

.set-padding {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.set-padding7 {
    padding-left: 7px !important;
    padding-right: 7px !important;
}

.menu-lanjut-active {
    border-bottom: 5px solid #33c060;
    padding-bottom: 10px;
    transition: 0.6s;
}

.menu-lanjut {
    border-bottom: 5px solid transparent;
    padding-bottom: 10px;
}

.menu-lanjut:hover {
    border-bottom: 5px solid #33c060;
    padding-bottom: 10px;
}

.set-pin {
    background: #33c0602e !important;
    border: 2px solid #33c060 !important;
}

.pagination-lg {
    --bs-pagination-padding-x: 0.75rem !important;
    --bs-pagination-padding-y: 0.2rem !important;
}

/* .show {
    display: none;
} */

h2 {
    font-size: 1.2rem !important;
}

h5 {
    font-size: 1rem !important; 
}