.elementor-48299 .elementor-element.elementor-element-492eb8ca{padding:0px 0px 0px 0px;}.elementor-48299 .elementor-element.elementor-element-9ba6fb2 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-48299 .elementor-element.elementor-element-9ba6fb2 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-48299 .elementor-element.elementor-element-7a3b382 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-48299 .elementor-element.elementor-element-67c5bf09 > .elementor-widget-container{padding:0px 0px 0px 0px;}/* Start custom CSS for html, class: .elementor-element-7a3b382 *//* =============================
   EPIK PLANS SECTION STYLES
   Namespace: #epik-plans-section / .epik-plans__*
   ============================= */

#epik-plans-section {
  box-sizing: border-box;
  /* overflow:hidden clips the slider strip horizontally;
     vertical overflow is handled by wrapper padding below */
}

/* ---- Slider wrapper ---- */
.epik-plans__slider-wrapper {
  width: 100%;
  overflow: visible;
  /* vertical breathing room so scale(1.05) top/bottom aren't cut off */
  padding: 24px 0;
  margin: -24px 0;
  /* clip-path clips visually without triggering overflow:hidden layout rules */
  /* We rely on body/html to clip stray horizontal overflow instead */
}

/* Horizontal clip shim — sits above the wrapper, clips only X via body */
/* (browsers clip overflow:visible content at the html/body boundary) */

/* ---- Grid: horizontal strip of cards ---- */
.epik-plans__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  /* JS drives transform for sliding */
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Individual card ---- */
.epik-plans__card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  /* width + margin set by JS / desktop CSS */
  flex-shrink: 0;
}

/* Center card scale — desktop only, JS re-enables after resize check */
.epik-plans__card--featured {
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

/* ---- RECOMMENDED badge ---- */
.epik-plans__recommended-badge {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 2px solid #FF0000;
    color: #FF0000;
    font-size: 12px;
    font-weight: bolder;
    /* letter-spacing: 1.5px; */
    text-transform: uppercase;
    padding: 4px 18px;
    border-radius: 0 0 10px 10px;
    white-space: nowrap;
    z-index: 10;
}

/* ---- Card header (red) ---- */
.epik-plans__card-header {
    background: #FF0000;
    padding-top: 15px;
    display: flex;
    align-items: stretch;
    gap: 0;
    position: relative;
    min-height: 100px;
    flex-shrink: 0;
    
    overflow: hidden;
}

.epik-plans__card--featured .epik-plans__card-header {
  padding-top: 36px;
}

.epik-plans__logo {
    width: 160px;
    height: auto;
    flex-shrink: 0;
    transform: scale(1.18);
    transform-origin: left center;
}

/* ---- Black data/price box ---- */
.epik-plans__data-box {
    background-image: url('https://cdn.tunetalk.com/wp-content/uploads/2026/04/23162653/new-epik-bg.svg');
    background-size: cover;
    background-position: 0% 100%;
    background-repeat: no-repeat;

    padding: 10px 14px 0;
    
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;

    flex: 1;
    align-self: stretch;

    margin-bottom: -1px;
}

.epik-plans__data-amount {
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}

/*.epik-plans__card--featured .epik-plans__data-amount { font-size: 34px; }*/

.epik-plans__price-row {
  display: flex;
  align-items: baseline;
  gap: 1px;
  margin-top: 2px;
}

.epik-plans__price-rm   { color: #fff; font-size: 15px; }
.epik-plans__price-amount {
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.epik-plans__price-month { color: #fff; font-size: 12px; }

/* ---- Card body ---- */
.epik-plans__card-body {
  padding: 16px 0 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* ---- Yearly value banner ---- */
.epik-plans__yearly-value {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #ff0000;
    border-radius: 30px;
    padding: 7px 11px;

    margin: 0 18px 14px;
    
    width: fit-content;
}

.epik-plans__yearly-value-icon { width: 18px; height: 18px; flex-shrink: 0; }

.epik-plans__yearly-value-text {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

/* ---- Core features list ---- */
.epik-plans__features {
  list-style: none;
  margin: 0 18px 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.epik-plans__feature-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #231F20;
  line-height: 1.35;
}

.epik-plans__feature-item span {
    margin-top: 2px;
}

.epik-plans__feature-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }

.epik-plans__feature-highlight { color: #2A9B88; font-weight: 700; }

/* ---- Valueback — full bleed inside card body ---- */
.epik-plans__valueback {
  background: #F4F5FF;
  padding: 12px 18px;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.epik-plans__valueback-title {
  font-size: 13px;
  font-weight: 700 !important;
  color: #231F20;
  margin: 0 0 10px !important;
}

.epik-plans__valueback-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.epik-plans__valueback-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 13px;
  color: #231F20;
  line-height: 1.4;
}

.epik-plans__check-icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

.epik-plans__benefit-name        { font-weight: 700; }
.epik-plans__benefit-name--teal  { color: #2A9B88; }
.epik-plans__benefit-name--red   { color: #FF0000; }

.epik-plans__benefit-name--foodpanda {
  color: #ff2b85;
  font-weight: 700;
  text-decoration: none !important;
}
.epik-plans__benefit-name--foodpanda:hover,
.epik-plans__benefit-name--foodpanda:active,
.epik-plans__benefit-name--foodpanda:focus { color: #ff2b85; text-decoration: underline !important; }

.epik-plans__fine-print {
  font-size: 9.5px;
  font-style: italic;
  color: #58595B;
  margin: 20px 0 0;
  line-height: 1.4;
}

/* ---- Spacer ---- */
.epik-plans__spacer { flex: 1; }

/* ---- CTA button ---- */
.epik-plans__cta-wrap { padding: 12px 18px 0; }

.epik-plans__cta {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  background: #66C8CE;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: 50px;
  padding: 13px 0;
  transition: background 0.2s ease;
  letter-spacing: 0.3px;
}

.epik-plans__cta:hover,
.epik-plans__cta:active,
.epik-plans__cta:focus {
  background: #231F20;
  color: #fff;
  text-decoration: none;
  outline: none;
}

/* ---- Dots (always rendered, hidden on desktop via JS class) ---- */
.epik-plans__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 0 16px;
}

.epik-plans__dots--hidden { display: none; }

.epik-plans__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.epik-plans__dot--active {
  background: #FF0000;
  transform: scale(1.3);
}

#epik-plans-section.epik-plans--slider,
#epik-plans-section.epik-plans--slider * {
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 1024px) and (min-width: 990px) {
    .epik-plans__logo {
        width: 14vw !important;
    }
}

@media (max-width: 767px) {
    
.fup_newline {
    display: none !important;    
  }

  .epik-plans__card-header {
    min-height: 115px;
    padding-top: 12px;
  }

  .epik-plans__card--featured .epik-plans__card-header {
    padding-top: 28px;
  }

  /* smaller logo */
  .epik-plans__logo {
    width: 120px;
  }

  /* bigger data area */
  .epik-plans__data-box {
    padding: 10px 12px 6px;
    background-size: cover;
    background-position: 0vw 0%;
  }

  .epik-plans__data-amount {
    font-size: 26px;
    line-height: 0.95;
    text-align: right;
  }

  .epik-plans__price-amount {
    font-size: 24px;
  }

  .epik-plans__price-rm {
    font-size: 13px;
  }

  .epik-plans__price-month {
    font-size: 11px;
  }

  /* reduce feature text slightly */
  .epik-plans__feature-item {
    font-size: 12px;
  }

  .epik-plans__valueback-item {
    font-size: 12px;
  }
   
}/* End custom CSS */