@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {  
	--c1 : rgba(255,207,0,1);
	--c2 : #000000;
	--c3 : rgba(255,117,0,1);
	--c4 : #272e38;
	--c5 : rgba(255,255,255,.7);
	--c6 : #000000;
	--c7 : #ffffff;
	--btn-color : var(--c3)!important;
	--input-border-color : var(--c3)!important;
	--radius:1.25em!important;
	--maxwidth:1280px;
	--grad1 : linear-gradient(180deg, rgba(255,207,0,1) 0%, rgba(255,117,0,1) 100%);
	--grad00 : linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	--grad01 : linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	--grad02 : linear-gradient(180deg, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 100%);
}

.c1 { background:var(--c1)!important; }
.c2 { background:var(--c2)!important; }
.c3 { background:var(--c3)!important; }
.c4 { background:var(--c4)!important; }
.c5 { background:var(--c5)!important; }
.c6 { background:var(--c6)!important; }
.c7 { background:var(--c7)!important; }

.c1-text { color:var(--c1)!important; }
.c2-text { color:var(--c2)!important; }
.c3-text { color:var(--c3)!important; }
.c4-text { color:var(--c4)!important; }
.c5-text { color:var(--c5)!important; }
.c6-text { color:var(--c6)!important; }
.c7-text { color:var(--c7)!important; }


.grad1 { background-color: rgb(255,207,0); background-image: var(--grad1)!important; }
.grad2,.btn.special  { background-color: #0093E9; background-image:linear-gradient(12deg, #4D63A7 0%, #3EF4EF 100%) !important; }
.grad3 { background-color: #85FFBD; background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%)!important; }
.grad4 { background-color: #FBAB7E; background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)!important; }
.grad5 { background-color: #8BC6EC; background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%)!important; }


.grad-text {
  background: -webkit-linear-gradient(rgba(255,207,0,1), rgba(255,117,0,1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
 }

/* ====== Button Outline ====== */

.btn.outline {
  background: white!important;
  position: relative;
  z-index: 1;
  min-width: 120px;
}

.btn.outline > span {
  z-index: 1;
}

.btn.outline::before {
  position: absolute;
  content: "";
  top: -4px;
  bottom: -4px;
  left: -4px;
  right: -4px;
  background: var(--grad)!important;
  z-index: -1;
  border-radius: var(--radius);
  overflow: visible;
  transition: 0.5s all;
}

.btn.outline::after {
  position: absolute;
  content: "";
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  background: var(--c3);
  z-index: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.outline.btn:hover {
  box-shadow: 0 0 20px 2px var(--c1);
}
.btn:hover {
  box-shadow: 0 0 20px 2px var(--c1);
}
.outline.btn:hover::after {
  background: var(--c3) !important;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
}

.outline.btn:hover::before {
  transform: rotate(180deg);
}
/* ================ */
/* ================ */

.slider .slider-track > div { position:relative; }
.slider .content { position:absolute; width:90%; top:0; bottom:0; right:0; display:grid; align-items:center; color: var(--c7); }
.slider .content strong { color:var(--c3); }


/* ================ */

.card-container-spl .card { position:relative; }
.card-container-spl .card * { z-index:1; color:var(--c7); }
.card-container-spl .card small,.card-container-spl .card .card-subtitle { color:var(--c5)!important; }
.card-container-spl .card a { color:var(--c3)!important; }
.card-container-spl .card a:hover { color:var(--c1)!important; }
.card-container-spl .card::after { position:absolute; content:""; display: block; z-index:0; background:var(--c2); color:var(--c1); left:0; right:0; bottom:0; top:.1em; border-radius:var(--radius) var(--radius) 0px 0px;   width:calc(100% - .2em); height:calc(100% - .1em);  margin:0 auto; transition:.3s all ease-in-out; }
.card-container-spl .card::before { position:absolute; content:""; display: block; z-index:-1;  background-image:var(--grad1); width:100%; height:100%; }
.card-container-spl .card:hover::after { top:0; bottom:.2em; border-radius:0px 0px var(--radius) var(--radius); }
.card-container-spl .card img.card-img-top { width:calc(100% - .2em); margin:0 auto; margin-top:.1em; border-radius:var(--radius) var(--radius) 0px 0px; }
.card-container-spl .card .card-subtitle span,.card-container-spl .card .card-subtitle date { color:inherit; }

.hero-container video,.hero-container-video video { width:100%; height:100vh; object-fit: cover; position:absolute; top:0; left:0; right:0; bottom:0; }
.hero-container-video { height:100vh; overflow:hidden; }

/* // */
body { min-height:100vh!important; font-family: "Poppins", sans-serif!important; font-optical-sizing: auto; font-weight:600!important; }

/* // */
header .brand img { max-height:100px!important; }
.subnav { display:grid; grid-auto-flow:column; justify-items:center; align-items:center; gap:2em; }


/* Fixed header */
.fixedheader { position:sticky; top:0px; z-index:999; }
.fixedheader > header { border-radius:0px 0px var(--radius) var(--radius); max-width:var(--maxwidth); margin:0 auto; border:none; }
.header-container { background-image:var(--grad01)!important; background-size:cover; }
.header-container.active { background-image:var(--grad02)!important; }
header a { text-shadow:1px 0px 7px rgba(0,0,0,.8); }
header a:hover,header a:active {   color:var(--c1); }


/* HEro  */
.hero-container { min-height:420px; }
.hero { max-width:var(--maxwidth); margin:0 auto; padding:0px 1.5em; padding-bottom:2em; position:relative; }
.hero .cnt-txt { padding-top:2.5em; }
.hero .cnt-txt h3 { font-weight:500;  text-shadow:0px 1px 0px rgba(255,255,255,.7); }
.hero .cnt-txt small { font-size:1.2em; color:rgba(0, 0, 0, .5); text-shadow:0px 1px 0px rgba(0,0,0,.1); }

.hero .cnt-img { display:grid; justify-items:center; align-items:center; }
.hero .cnt-img > img { position: sticky; height:100%; width: 100%; top:70px; bottom:0px; right:1em; object-fit:contain; object-position:top; margin:0 auto; }

.hero .cnt-img img.circle { width:400px; height:400px; object-fit:cover; position: sticky; top:70px; margin-bottom:-70px; margin-top:70px; box-shadow:10px 10px 10px 0px rgba(0, 0, 0, .1); }

.hero .frm1 { position:absolute; margin-top: -63px; border-radius:var(--radius); }

.frm1 .tabs { justify-content:start; width: fit-content; border-radius:var(--radius) var(--radius) 0px 0px; overflow:hidden; }
.frm1 .tab-content { background:var(--c7); border-radius:0px var(--radius) var(--radius) var(--radius); padding:.5em 1em; box-shadow:0px 3px 10px 0px rgba(0,0,0,.1);  }

.frm1 .tabs a {  min-width:100px; display:grid; width:100%; height:100%; text-shadow:0px 1px 2px rgba(255,255,255,.7); font-weight:500; }
.frm1 .tabs a i { font-size:2.2em; }
.frm1 .tabs a > * { pointer-events:none; }
.frm1 .tabs li { border:1px solid rgba(255, 255, 255, .3); background:rgba(255,255,255,.7); opacity:0.75; transition:.3s all; box-shadow:0px -5px 10px 0px rgba(0,0,0,.1);  

  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(11.1px);
  -webkit-backdrop-filter: blur(11.1px);
  border: 1px solid rgba(255, 255, 255, 0.3);   
}
.frm1 .tabs li:hover { opacity:1;}
.frm1 .tabs li.active { background:var(--c7);  opacity:1;  color:var(--c3); }
.frm1 .tabs li.active i { animation:zoomIn .4s; }
.frm1 .tabs li.active a > span { animation:fadeInDown .1s; }
.frm1 .tabs li.active a { text-shadow:0px 1px 2px rgba(0,0,0,.05);  }

.frm1 form { display:grid; grid-auto-flow:column; }
.frm1 form .input-field { border:none; border-radius:0px!important; border-bottom:1px solid rgba(0,0,0,.04); }
.frm1 form .input-field label { font-weight:700; }

.frm1 form .input-field input:placeholder-shown { padding-top:1em!important; }
.frm1 form .input-field label:not(.active) + input:placeholder-shown { opacity:0; }

.glass {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(11.1px);
  -webkit-backdrop-filter: blur(11.1px);
  border: 1px solid rgba(255, 255, 255, 0.3); 
}


.heading { margin-top:150px; display:grid; justify-items:center; }
.heading small { text-transform:uppercase; color:rgba(0,0,0,.4); letter-spacing: 0.22em; }
.heading h3 { font-weight:500; }

.modal .heading2  { padding:.3em .3em;}


.stars::before { content: "\F04CE"; 
    display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons";
    font-size: 24px;
    line-height: 1;
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.stars.star5::before { content: "\F04CE \F04CE \F04CE \F04CE \F04CE"; }
.stars.star4::before { content: "\F04CE \F04CE \F04CE \F04CE"; }
.stars.star3::before { content: "\F04CE \F04CE \F04CE"; }
.stars.star2::before { content: "\F04CE \F04CE"; }
.stars.star1::before { content: "\F04CE"; }



.slider .slider-controls .slider-prev:hover {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255,255,255,0) 100%)!important;
}
.slider .slider-controls .slider-next:hover {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.18) 0%, rgba(255,255,255,0) 100%)!important;
}

.mdi.mdi-currency-rm::before,.mdi.mdi-currency-RM::before { content:"RM"; font-family:sans-serif; }

.sbox { gap:1em; }
.sbox img { width:100px; height:100px; object-fit:contain; }
.sbox > div { display:grid; gap:.1em; }
.sbox > div > small {  color:var(--c1); }
.sbox ul { list-style:none; display:inline-block; padding:0px; margin:.2em 0px; }
.sbox ul li { background:rgba(0,0,0,0.06); display:inline-block; padding:.2em .7em; font-size:small; border-radius:var(--radius); color:rgba(0,0,0,.5); margin:.2em; text-transform:capitalize; }
.sbox span { font-weight:500; color:var(--c1); }


.product-item  { min-width:300px; overflow:hidden; border-radius:var(--radius); }
.product-item .prod-img { background:rgba(0,0,0,.08); overflow:hidden; }
.product-item .prod-img img { width:100%; height:250px; object-fit:cover; transition:.4s all; }
.product-item .prod-img img:hover { object-fit:cover; animation:pimg 1s; }
.product-item > div:not(.prod-img) { padding:.7em 1em; }
.product-item  { background:var(--c7); box-shadow:0px 3px 5px 0px rgba(0,0,0,.1); outline:1px solid var(--c7); transition:.3s all ease-in-out; }
.product-item:hover  { box-shadow:0px 10px 14px 0px rgba(0,0,0,.1); outline:3px solid var(--c5); }
.product-item .special.btn { opacity:0; }
.product-item:hover .special.btn { opacity:1; animation:fadeInDown .2s; }
.product-item .stars { color:var(--c9); display:block; font-size:1.2em; }
.product-item small { color:var(--c1); }



@keyframes pimg {
  0% { transform:scale(1.2); }
  100% { transform:scale(1); }
}

.imgbox-parallax img { width:100%; height:100%; object-fit:cover; }
.about-text strong { color:var(--c1); display:inline-block!important; }
.about-text p { margin:var(--margin); }

footer { display:grid; margin-top:100px; color:var(--c7); text-shadow:0px 1px 2px rgba(0,0,0,.1); }
.subfooter { display: grid; grid-auto-flow: column; align-content: center; justify-content:center; gap:2em; padding:1.5em 2em; }
.cfooter { background: rgba(0,0,0,.1);  display: grid; grid-template-columns: 1fr auto; align-items: center; justify-content:center; gap:2em; padding:.5em 2em; }



/*  Blog  */
.hero-container2 { min-height:220px; display:grid; }
.hero2 { display: grid; align-content: center;  max-width:var(--maxwidth); margin:0 auto; padding:3em 1.5em; position:relative; }
.hero2 .heading { margin-top:unset; justify-items:center; }
.blog-content  { border-bottom:1px solid rgba(0,0,0,.1); padding-bottom:5em; }
.blog-content article img { max-width:100%; max-height:420px; object-fit:cover; object-position: center; background-attachment: fixed; float:inline-end; border-radius:var(--radius); margin:1em auto; padding:1em; box-shadow:0px 1px 0px 0px rgba(0, 0, 0, .0); transition:.5s all; }
.blog-content article img:hover {  box-shadow:0px 0px 3px 0px rgba(0, 0, 0, .0); }

.blog-content article h2 { font-size:2.2em; }
.blog-content article strong { display:inline; }
.blog-content .mdi::before { padding-right:.2em; }
/*.blog-content article img.blog-img { width:100%; }*/
.hero-container3 { min-height:50px; display:grid; }
.hero3 { display: grid; align-content: center;  max-width:var(--maxwidth); margin:0 auto; padding:2em 1.5em; position:relative; }
.hero3 .heading { margin-top:unset; justify-items:start; }



/* Translate */
.skiptranslate { display: none; }
body { top:0px!important; }
font { all:unset; }

/* Special Input Select */
.hero-heading { position: relative; text-align:center; background-color:var(--c5); background-image: url('../img/obg.jpg'); background-attachment: fixed; background-size: cover; min-height:300px; display: grid; place-content:center; }
.hero-heading::before { content:""; background:var(--c3); opacity: .7; width:100%; height:100%; position:absolute; z-index:0; }
.hero-heading > .heading { margin-top:0px; z-index:1; color:var(--c7); }

.loginmodal .modal-container { width:fit-content!important; }


.modal.bottom { top:100px; align-items: end!important; }
.modal.bottom .modal-container {  border-radius:var(--radius) var(--radius) 0px 0px!important; animation:fadeInUp .5s; }


.c_page .leftnav { min-width:250px; }
.c_page > div > ul { width:100%; }
.c_page .leftnav a { display:block; }

.edt td > .badge { background:var(--c1); color:var(--c7); display: block; width:25px; height:25px; text-align:center; border-radius:var(--radius); position:absolute; top:calc(50% - 25px/2); bottom:0px; right:.5em; }
.edt td small { font-size:.7em; color:rgba(0,0,0,.4); font-weight:600; }

small { color:inherit!important; }
.border { border:1px solid rgba(0,0,0,.05); margin:var(--margin);}


.shop .heading { display:grid; justify-items: center; }
.shop-searchinput { min-width:400px; width:100%; }

.sidecategory { min-width:250px!important;  position:relative; height:100%; }
.sidecategory a { display: block; width:100%; }
.sidecategory li.active,.sidecategory li:hover { background:var(--c2)!important; color:var(--c7); cursor: pointer; }

.sidecategory ul { position:sticky; top:100px; overflow:hidden; overflow-y:auto;  }

.modal.cart .modal-container { display: grid!important; grid-template-rows:auto 1fr auto;  width:fit-content; max-width: 100vw; max-height: calc(100vh - 100px); }
.modal.cart .modal-container .modal-body { overflow:hidden; overflow-y:auto; }


.modal.cart .modal-container .cartitems li .ciremove { position:absolute; right:.5em; font-size:2em; display:none; }
.modal.cart .modal-container .cartitems li:hover .ciremove { animation:fadeInRight .3s; display:block; }
.modal.cart .modal-container .cartitems li input[name=qty] { width:50px; height:30px; border: none; }
.modal.cart .modal-container .cartitems .cartinn { display:grid; grid-template-columns:50px 1fr minmax(100px, 200px); }
.product-item .btn.special.active { pointer-events: none; background: var(--c1) !important; opacity: 1; }

.cartbtn { position:relative; }
.cartbtn > span { position: absolute; top:0; right:-5px; color:var(--c7); border-radius:100%; background:var(--c1); display:grid; align-content: center; text-align: center; width:20px; height:20px; }

.serviceicon { position:absolute; width:100px; height:100px; left:7%; bottom:-30px; box-shadow:0px 10px 10px rgba(0,0,0,.1); border-radius:var(--radius); }
.serviceicon:hover { animation:sleek 1s ease-in-out; }

@keyframes sleek {
  0% { transform:rotate(0deg); }
  50% { transform:rotate(-22deg); }
  100% { transform:rotate(0deg); }
}


.abtn-container { position:absolute; bottom:-30px; right:7%; }

.tags-container { 
  background: rgba(0,0,0,.04);
  padding:2.5em 3em;
  border-radius: var(--radius);
}
.tags-container-blank { padding:1em .5em;
  border-radius: var(--radius); }


.tags-container ul { list-style:none; margin-top:2em; margin-bottom:2em; }
.tags-container ul strong { display:inline-block; font-weight:800; }
.tags-container li {  margin-top:1em; position:relative; padding:1em; padding-left:4em; transition:.3s all ease-in-out; }
.tags-container li::before { content:"\F05E0"; font:normal normal normal 24px/1 "Material Design Icons"; color:var(--c1); font-size:2em; margin-right:1em; position:absolute; top:22%; left:.1em; transition:.3s all; }
.tags-container li:hover { background:rgba(255,255,255,1); border-radius:var(--radius); box-shadow:0px 10px 10px 0px rgba(0, 0, 0, .1); }
.tags-container li:hover::before { content:"\F05E0"; animation:fadeIn .3s; left:.5em; animation:slideInLeft .5s all; }

.tags-container-blank ul { list-style:none; margin-top:2em; margin-bottom:2em; }
.tags-container-blank ul strong { display:inline-block; font-weight:800; }
.tags-container-blank li {  margin-top:.2em; position:relative; padding:1em; padding-left:3em; transition:.3s all ease-in-out; }
.tags-container-blank li::before { content:"\F012C"; font:normal normal normal 24px/1 "Material Design Icons"; color:var(--c1); font-size:2em; margin-right:1em; position:absolute; top:22%; left:0em; transition:.3s all ease-in-out;  }
.tags-container-blank li:hover { background:rgba(255,255,255,1); border-radius:var(--radius); box-shadow:0px 0px 10px 0px rgba(0, 0, 0, 0); }
.tags-container-blank li:hover::before { content:"\F012D"; animation:zoomIn .3s;  }


.floatingbtn { display:none; position:fixed; bottom:1em; right:1em; animation:zoomIn .5s ease-in-out; }
.floatingbtn a { display: block; color:white; background:var(--c1); font-size:2em; width:50px; height:50px; position:relative; }
.floatingbtn a::before { width:100%; height:100%; display:block; text-align:center; }

.floatingbtn a:hover span { position:absolute; bottom:0px; white-space:nowrap; background:var(--c1); left:-5.05em; bottom:.5em; padding:.2em .5em; border-radius:var(--radius); animation:fadeInLeft .3s all; }


/* sp-blog */
.sp-blog { position:relative; }
.sp-blog .sticky { position:sticky; }
.sp-blog img { width:100%; height:auto; object-fit:cover; border-radius:var(--radius); margin-top:1em; margin-bottom:1em; }


/*  Booking */
.booking .paybtn { display:none!important; }
.pendingbooking td { opacity:.7; background:rgba(0,0,0,.05) }
.pendingbooking .hidehide small { display:none; }
.pendingbooking .hidehide .btn { font-size: 1em !important; color: var(--c7) !important; justify-self:start; }

.payitem small { font-size:large; font-weight:700; }
.payitem a.btn { max-width:200px; font-weight:700; }


.badge-SUCCESS { background:var(--c4); color:var(--c1); text-align:center!important; font-weight:700; }
.badge-PENDING { background:var(--c7); color:var(--c9); text-align:center!important; font-weight:700; }

.badge-ORDERED { background:var(--c4); color:var(--c1); border:1px solid var(--c7); text-align:center!important; font-weight:700; }
.badge-PENDING { background:var(--c7); color:var(--c9); text-align:center!important; font-weight:700; }
.badge-PACKED { background:var(--c2); color:var(--c7); text-align:center!important; font-weight:700; }
.badge-SHIPPED { background:var(--c3); color:var(--c7); text-align:center!important; font-weight:700; }
.badge-DELIVERED { background:var(--c1); color:var(--c4); text-align:center!important; font-weight:700; }
.badge-RETURNED { background: #363333; color: #ed7d7d; text-align:center!important; font-weight:700; }
.badge-CANCELLED { background: #ff5050b8; color: #a12b2bb8; text-align:center!important; font-weight:700; }

.pagination a.active { display:block; color:var(--c1); font-weight:700; }


/* FAQ */
.collapse-header { padding: 0px 2em!important; }
.collapse-body { padding:2em!important; background:rgba(0,0,0,.01); border-left:3px solid var(--c1)!important; }

.collapse-header.active { background:var(--c1)!important; }
.collapse-header.active * { color:var(--c7)!important; font-weight:700!important; }


/* Event  */
.eventdetail-bg { position:relative; }
.eventdetail-bg::before { content:""; background:rgba(0,0,0,.7); position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; }
.eventdetail-bg > * { z-index:1; }



@media (max-width:820px){

nav.active:not(.social) { 
   background:inherit!important; color:inherit!important; 
   font-size:inherit!important; justify-content: stretch!important; padding:2em;
   align-content:start!important; 
   top:70px!important;
   grid-template-columns: 1fr;
   justify-items: stretch;
}

/*nav.active:not(.social) a { display:block;  }*/

.btn-dropdown > .dropdown.is-visible.megamenu { position:relative!important; grid-template-columns:1fr!important; top:1em; width:100%!important; }

nav.active:not(.social)::before { font-family: "Material Design Icons"; color: inherit!important; cursor: pointer; font-size: 2em!important; justify-self: end; top: 0.33em!important; right: .53em!important; background:inherit!important; }
nav.active:not(.social) > .subnav { grid-auto-flow:row; justify-items:stretch; }

.frm1 .tabs li {  
  opacity:1;
  background: rgba(255, 255, 255, 0.5);
}
.frm1 .tab-content { border-radius:0px 0px var(--radius) var(--radius); }
.hero .frm1 { margin-top:-87px; position:relative; }
.frm1 .tabs { width: 100%; overflow:hidden; overflow-x:auto; }
.frm1 .tab-content form { display:grid; grid-template-columns:1fr; grid-auto-flow:row; }

.subfooter { grid-auto-flow: row; justify-content:start; grid-template-columns:1fr 1fr;  }
.shop-searchinput { min-width:300px; width:100%!important; }

.heading { max-width:90%; margin:0 auto; }

.slider .content { background:rgba(0,0,0,.7);  }

}