@import url("font.css");

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  font-family:
    "UMobileDisplay",
    system-ui,
    -apple-system,
    "Segoe UI",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei UI",
    "Noto Sans SC",
    sans-serif;
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.font-umobile {
  font-family:
    "UMobileDisplay",
    system-ui,
    -apple-system,
    "Segoe UI",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei UI",
    "Noto Sans SC",
    sans-serif;
}

body::-webkit-scrollbar {
  display: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Faq section  */
.faq-section {
  color: #fff;
}

.faq-tabs-wrap {
  width: 100%;
}

/* Full-width baseline; active tab draws a thicker orange segment on top via .faq-tab */
.faq-tabs {
  border-bottom: 1px solid #e2e4e8;
  padding-bottom: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.faq-tabs::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Tab button */
.faq-tab {
  position: relative;
  margin-bottom: -1px;
  font-size: 1rem;
  font-weight: 400;
  color: #ffffff;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition:
    color 0.2s ease,
    font-weight 0.2s ease,
    border-color 0.2s ease;
}

.faq-visibility::-webkit-scrollbar {
  display: none;
}

@media (max-width: 639px) {
  .faq-tabs {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .faq-tabs .faq-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* Hover */
.faq-tab:hover {
  color: #ff8c21;
}

/* Active tab: orange text + thick orange underline over the gray baseline */
.faq-tab[aria-selected="true"] {
  color: #ff8c21;
  font-weight: 700;
  border-bottom-color: #ff8c21;
}

.faq-tab:focus-visible {
  outline: 2px solid #ff8c21;
  outline-offset: 2px;
}

/* ================= FAQ ITEMS ================= */

.faq-item {
  padding: 0.9rem 0;
  cursor: pointer;
}

/* Question */

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;

  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
}

@media (min-width: 640px) {
  .faq-question {
    color: #ffffff;
  }
}

/* Arrow */
.arrow {
  transition: transform 0.3s ease;
}

.faq-item.active .arrow {
  transform: rotate(180deg);
}

/* ================= ANSWER ================= */

.faq-answer {
  max-height: 0;
  height: 0;

  overflow: hidden;
  transition: max-height 0.4s ease;
}

/* Inner content animation */
.faq-answer-inner {
  padding-top: 10px;
  color: #ffffff;

  opacity: 0;
  transform: translateY(-5px);

  transition: all 0.3s ease;
}

/* Active state */
.faq-item.active .faq-answer {
  max-height: 300px;
  /* adjust if needed */
}

.faq-item.active .faq-answer-inner {
  opacity: 1;
  transform: translateY(0);
}

/* cards background */
.cards_container {
  background: url("../../images/business_postpaid/business_postpaid_gradient.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: bottom;

  /* Mask */
  /* -webkit-mask-image: url('../../images/business_postpaid/usp_sunlight.svg');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;

    mask-image: url('../../images/business_postpaid/usp_sunlight.svg');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center; */
}

/* Base arrow button */
.carousel-nav-arrow {
  height: 44px;
  width: 44px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

/* Filled (active / clickable) */
.carousel-nav-arrow--filled {
  background: #ff7b02;
  border: 2px solid #ff7b02;
}

.carousel-nav-arrow--filled:hover {
  background: #ff8c21;
  border-color: #ff8c21;
  transform: scale(1.05);
}

/* Outline (inactive / edge state) */
.carousel-nav-arrow--outline {
  background: transparent;
  border: 2px solid #ff7b02;
}

.carousel-nav-arrow--outline:hover {
  background: rgba(255, 123, 2, 0.1);
  transform: scale(1.05);
}

/* Disabled state */
.carousel-nav-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Icon images */
.carousel-nav-arrow img {
  width: 18px;
  height: 18px;
  pointer-events: none;
  transition: transform 0.2s ease;
}

/* Optional: slight arrow movement on hover */
.carousel-nav-arrow--filled:hover img {
  transform: translateX(2px);
}

.carousel-nav-arrow--outline:hover img {
  transform: translateX(-2px);
}

/* USP carousel */

/* === CONTAINER === */
.usp-carousel--coverflow {
  --usp-slot-spacing: 350px;
  /* Inactive side anchors; JS uses these via var() on each item */
  --usp-inactive-left-pct: 45%;
  --usp-inactive-right-pct: 55%;
  position: relative;
}

@media (max-width: 424px) {
  .usp-carousel--coverflow {
    --usp-inactive-left-pct: 30%;
    --usp-inactive-right-pct: 70%;
  }
}

.usp-carousel--coverflow .usp-carousel-nav {
  gap: min(var(--usp-slot-spacing, 168px), 42vw);
}

/* === VIEWPORT === */
.usp-viewport--coverflow {
  overflow: hidden;
  position: relative;
}

.usp-viewport--coverflow:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
  border-radius: 10px;
}

/* === TRACK === */
/* .usp-track--coverflow {
    position: relative;
    width: 100%;
    min-height: 600px;
} */

/* === ITEMS === */
.usp-carousel--coverflow .usp-item {
  position: absolute;
  left: var(--usp-anchor-left, 50%);
  top: var(--usp-anchor-top, 50%);
  width: min(280px, 46vw);
  transform: translate(-50%, -50%) translateX(var(--usp-x, 0px));
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    left 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}

/* === ICON === */
.usp-carousel--coverflow .usp-icon-circle {
  width: 120px;
  height: 120px;
  transform: scale(var(--usp-icon-scale, 1));
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* === ACTIVE ITEM === */
.usp-carousel--coverflow .usp-item--active .usp-icon-circle {
  background: linear-gradient(230.65deg, #ee8916 6.71%, #ff6600c0 83.63%);
  border: 1px solid #f37321;
  outline: 1px solid #f37321;
  outline-offset: 16px;
  box-shadow: 0 0 50px rgb(253, 130, 14);
}

/* === TEXT === */
.usp-carousel--coverflow .usp-item-copy {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.usp-carousel--coverflow .usp-item:not(.usp-item--active) .usp-item-copy {
  opacity: 0.48;
}

.usp-carousel--coverflow .usp-item--active .usp-item-copy {
  opacity: 1;
  transform: translateY(0);
}

/* === TEXT SIZE === */
.usp-carousel--coverflow .usp-item-copy h1 {
  font-size: 14px;
}

@media (min-width: 768px) {
  .usp-carousel--coverflow .usp-item--active .usp-item-copy h1 {
    font-size: 22px;
  }
}

/* === IMAGE COLOR SWITCH === */
.usp-carousel--coverflow .usp-item:not(.usp-item--active) .usp-icon-img {
  filter: brightness(10);
}

.usp-carousel--coverflow .usp-item:not(.usp-item--active) .usp-icon-img {
  filter: none;
}

@media (max-width: 639px) {
  .usp-carousel--coverflow .usp-icon-circle {
    width: 90px;
    height: 90px;
  }

  /* Reduce active scale */
  .usp-carousel--coverflow .usp-item--active .usp-icon-circle {
    transform: scale(1.4);
    outline-offset: 10px;
    box-shadow: 0 0 14px rgba(253, 130, 14, 0.5);
  }

  .usp-carousel--coverflow .usp-item:not(.usp-item--active) .usp-icon-circle {
    transform: scale(1);
  }
}

/* Service card */

.service_card_image_container {
  min-height: 410px;
  @media (min-width: 425px) {
    min-height: 450px;
  }
  @media (min-width: 540px) {
    min-height: 470px;
  }
  @media (min-width: 1024px) {
    min-height: 490px;
  }
  @media (min-width: 1280px) {
    min-height: 455px;
  }
  @media (min-width: 1445px) {
    min-height: 465px;
  }
  @media (min-width: 1545px) {
    min-height: 520px;
  }
}

.service_card_image {
  height: 57%;
  @media (min-width: 425px) {
    height: 60%;
  }
  @media (min-width: 540px) {
    height: 65%;
  }
  @media (min-width: 768px) {
    height: 55%;
  }
  @media (min-width: 1024px) {
    height: 50%;
  }
  @media (min-width: 1280px) {
    height: 55%;
  }
  @media (min-width: 1445px) {
    height: 55%;
  }
  @media (min-width: 1545px) {
    height: 64%;
  }
}

.usp-arrow-container {
  padding-inline: 15%;
  @media (min-width: 465px) {
    padding-inline: 22%;
  }
}