/* ==================================================
   BTS SUPPORT PAGE
================================================== */

:root {
  --support-blue: #5572E5;
  --support-blue-dark: #365FC7;
  --support-ink: #282E39;
  --support-copy: #667085;
  --support-soft: #F1F4FA;
  --support-white: #FFFFFF;
}

.support-page,
.support-page * {
  box-sizing: border-box;
}

.support-page {
  margin: 0;
  overflow-x: hidden;
  color: var(--support-ink);
  background: #FFFFFF;
  font-family: "Poppins", sans-serif;
}

.support-shell {
  width: calc(100% - 160px);
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
}


/* ==================================================
   HERO — 600PX
================================================== */


.support-dashboard-grid {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.support-dashboard-item {
  min-width: 0;
  padding: 18px;
  border-radius: 17px;
  background: #F5F7FC;
}

.support-dashboard-item > i {
  margin-bottom: 18px;
  color: var(--support-blue);
  font-size: 17px;
}

.support-dashboard-item span,
.support-dashboard-item strong {
  display: block;
}

.support-dashboard-item span {
  margin-bottom: 4px;
  color: #8A93A3;
  font-size: 10px;
}

.support-dashboard-item strong {
  overflow-wrap: anywhere;
  color: #3A4352;
  font-size: 11px;
  line-height: 1.45;
}

.support-hours {
  margin-top: 12px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 15px;
  color: var(--support-blue);
  background: rgba(85,114,229,0.08);
}

.support-hours span,
.support-hours strong { display: block; }
.support-hours span { color: #818B9B; font-size: 10px; }
.support-hours strong { color: #434D60; font-size: 11px; }

.support-float-card {
  position: absolute;
  z-index: 3;
  min-width: 190px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 15px;
  color: #697487;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 18px 40px rgba(24,40,81,0.16);
  backdrop-filter: blur(12px);
  font-size: 10px;
}

.support-float-card > i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--support-blue);
  background: rgba(85,114,229,0.11);
}

.support-float-card strong,
.support-float-card span { display: block; }
.support-float-card strong { margin-bottom: 2px; color: #313A48; font-size: 11px; }
.support-float-one { top: 18px; right: -16px; }
.support-float-two { bottom: 2px; left: -20px; }


/* ==================================================
   SHARED COMPONENTS
================================================== */

.support-line {
  display: block;
  width: 54px;
  height: 4px;
  margin-bottom: 28px;
  border-radius: 20px;
  background: var(--support-blue);
}

.support-kicker {
  display: block;
  margin-bottom: 18px;
  color: var(--support-blue);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.support-section-heading h2,
.support-download-copy h2,
.support-contact-copy h2 {
  margin: 0;
  color: var(--support-ink);
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.04em;
}

.support-section-heading.centred {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.support-section-heading.centred .support-line {
  margin-right: auto;
  margin-left: auto;
}

.support-section-heading.centred p {
  max-width: 680px;
  margin: 23px auto 0;
  color: var(--support-copy);
  font-size: 16px;
  line-height: 1.75;
}


/* ==================================================
   QUICK OPTIONS
================================================== */

.support-options {
  position: relative;
  z-index: 5;
  padding: 0 0 90px;
  background: linear-gradient(180deg, #F3F6FC 0%, #FAFBFE 58%, #FFFFFF 100%);
}

.support-option-grid {
  transform: translateY(-38px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.support-option-card {
  position: relative;
  min-width: 0;
  min-height: 170px;
  padding: 32px 30px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 38px;
  gap: 20px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(85,114,229,0.14);
  border-radius: 28px;
  color: inherit;
  background: linear-gradient(145deg, #FFFFFF 0%, #F8FAFF 100%);
  box-shadow: 0 22px 55px rgba(35,49,83,0.11);
  text-decoration: none;
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.support-option-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  width: 68px;
  height: 4px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, #5572E5, #7F96EE);
}

.support-option-card > * {
  position: relative;
  z-index: 2;
}

a.support-option-card:hover {
  transform: translateY(-8px);
  border-color: rgba(85,114,229,0.34);
  box-shadow: 0 30px 65px rgba(35,49,83,0.17);
}

.support-option-card:not(a) {
  grid-template-columns: 62px minmax(0, 1fr);
}

.support-option-icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 19px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #5572E5 0%, #748CEF 100%);
  box-shadow: 0 14px 28px rgba(85,114,229,0.25);
  font-size: 19px;
}

.support-option-card div > span,
.support-option-card strong { display: block; }
.support-option-card div > span {
  margin-bottom: 8px;
  color: #343C4C;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.support-option-card strong {
  overflow-wrap: anywhere;
  color: #747E90;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}

.support-option-arrow {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  color: var(--support-blue);
  background: transparent;
  font-size: 15px;
  box-shadow: none;
  transition: transform 0.3s ease;
}

a.support-option-card:hover .support-option-arrow {
  transform: translateX(6px);
}

.support-option-card:nth-child(2) {
  transform: translateY(-10px);
  border-color: transparent;
  color: #FFFFFF;
  background: linear-gradient(135deg, #365FC7 0%, #5572E5 52%, #728BED 100%);
  box-shadow: 0 28px 65px rgba(54,95,199,0.28);
}

.support-option-card:nth-child(2)::before {
  background: rgba(255,255,255,0.72);
}

.support-option-card:nth-child(2) .support-option-icon {
  color: #5572E5;
  background: #FFFFFF;
  box-shadow: 0 14px 30px rgba(24,49,112,0.20);
}

.support-option-card:nth-child(2) div > span,
.support-option-card:nth-child(2) strong {
  color: #FFFFFF;
}

.support-option-card:nth-child(2) strong {
  color: rgba(255,255,255,0.84);
}

.support-option-card:nth-child(2) .support-option-arrow {
  color: #FFFFFF;
  background: transparent;
  box-shadow: none;
}

a.support-option-card:nth-child(2):hover {
  transform: translateY(-18px);
  border-color: transparent;
  box-shadow: 0 36px 75px rgba(54,95,199,0.34);
}

a.support-option-card:focus-visible {
  outline: 3px solid rgba(85,114,229,0.35);
  outline-offset: 4px;
}


/* ==================================================
   OVERVIEW
================================================== */

.support-overview {
  padding: 75px 0 120px;
  background: #FFFFFF;
}

.support-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 90px;
  align-items: start;
}

.support-overview-copy {
  max-width: 650px;
  padding-top: 34px;
}

.support-overview-copy p {
  margin: 0 0 22px;
  color: var(--support-copy);
  font-size: 16px;
  line-height: 1.82;
}

.support-overview-copy .support-lead {
  color: #3D4657;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.65;
}

.support-service-grid {
  margin-top: 70px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.support-service-card {
  position: relative;
  min-height: 315px;
  padding: 40px 34px;
  overflow: hidden;
  border: 1px solid rgba(74,116,232,0.10);
  border-radius: 26px;
  background: var(--support-soft);
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}

.support-service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: var(--support-blue);
  transition: width 0.4s ease;
}

.support-service-card:hover {
  transform: translateY(-9px);
  background: #FFFFFF;
  box-shadow: 0 25px 52px rgba(40,53,83,0.12);
}

.support-service-card:hover::before { width: 100%; }

.support-card-number {
  position: absolute;
  top: 28px;
  right: 28px;
  color: #B3BDCE;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.support-service-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  color: var(--support-blue);
  background: #FFFFFF;
  font-size: 20px;
}

.support-service-card h3 {
  margin: 0 0 15px;
  color: var(--support-ink);
  font-size: 21px;
  font-weight: 600;
}

.support-service-card p {
  margin: 0;
  color: var(--support-copy);
  font-size: 15px;
  line-height: 1.78;
}


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

.support-faq {
  padding: 120px 0;
  background: var(--support-soft);
}

.support-faq-tabs {
  width: fit-content;
  margin: 48px auto 30px;
  padding: 6px;
  display: flex;
  gap: 5px;
  border-radius: 14px;
  background: #E5EAF4;
}

.support-faq-tab {
  min-width: 145px;
  min-height: 45px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  color: #697486;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.support-faq-tab.is-active {
  color: #FFFFFF;
  background: var(--support-blue);
  box-shadow: 0 6px 18px rgba(35,49,83,0.08);
}

.support-faq-panel {
  max-width: 920px;
  margin: 0 auto;
}

.support-faq-item {
  margin-bottom: 13px;
  overflow: hidden;
  border: 1px solid rgba(74,116,232,0.10);
  border-radius: 18px;
  background: #FFFFFF;
  box-shadow: 0 8px 24px rgba(35,49,83,0.04);
}

.support-faq-question {
  width: 100%;
  min-height: 78px;
  padding: 20px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 0;
  color: #333B49;
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.support-faq-question i {
  width: 33px;
  height: 33px;
  display: inline-flex;
  flex: 0 0 33px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--support-blue);
  background: rgba(85,114,229,0.10);
  font-size: 12px;
  transition: transform 0.3s ease;
}

.support-faq-item.is-open .support-faq-question i { transform: rotate(45deg); }

.support-faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.support-faq-answer > div { overflow: hidden; }
.support-faq-item.is-open .support-faq-answer { grid-template-rows: 1fr; }

.support-faq-answer p {
  margin: 0;
  padding: 0 74px 25px 25px;
  color: var(--support-copy);
  font-size: 14px;
  line-height: 1.75;
}


/* ==================================================
   DOWNLOADS
================================================== */

.support-downloads {
  padding: 125px 0;
  background: #FFFFFF;
}

.support-download-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(500px, 1.18fr);
  gap: 90px;
  align-items: start;
}

.support-download-copy {
  position: sticky;
  top: 40px;
}

.support-download-copy p {
  max-width: 520px;
  margin: 25px 0 0;
  color: var(--support-copy);
  font-size: 16px;
  line-height: 1.8;
}

.support-download-note {
  max-width: 520px;
  margin-top: 30px;
  padding: 18px 20px;
  display: flex;
  gap: 13px;
  border-radius: 16px;
  color: #667186;
  background: var(--support-soft);
  font-size: 13px;
  line-height: 1.65;
}

.support-download-note i {
  padding-top: 3px;
  color: var(--support-blue);
}

.support-download-list {
  display: grid;
  gap: 14px;
}

.support-download-card {
  min-height: 108px;
  padding: 21px 23px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(74,116,232,0.11);
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 10px 28px rgba(35,49,83,0.05);
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.support-download-card:hover {
  transform: translateX(7px);
  border-color: rgba(85,114,229,0.35);
  box-shadow: 0 18px 38px rgba(35,49,83,0.10);
}

.support-download-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: var(--support-blue);
  background: rgba(85,114,229,0.10);
  font-size: 18px;
}

.support-download-card small,
.support-download-card strong { display: block; }
.support-download-card small { margin-bottom: 5px; color: #8A94A5; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.support-download-card strong { color: #37404E; font-size: 15px; font-weight: 600; }
.support-download-arrow { color: var(--support-blue); font-size: 13px; }


/* ==================================================
   SUPPORT CONTACT FORM
================================================== */

.support-contact {
  padding: 120px 0;
  background: linear-gradient(135deg, #365FC7 0%, #4A74E8 55%, #668BE9 100%);
}

.support-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(560px, 1.18fr);
  gap: 90px;
  align-items: center;
}

.support-contact-copy .support-kicker,
.support-contact-copy h2 { color: #FFFFFF; }

.support-contact-copy p {
  max-width: 520px;
  margin: 25px 0 28px;
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  line-height: 1.8;
}

.support-contact-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
  list-style: none;
}

.support-contact-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.88);
  font-size: 14px;
}

.support-contact-list i {
  width: 27px;
  height: 27px;
  display: inline-flex;
  flex: 0 0 27px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--support-blue-dark);
  background: #FFFFFF;
  font-size: 10px;
}

.support-form-card {
  padding: 40px;
  border: 1px solid rgba(255,255,255,0.38);
  border-radius: 28px;
  background: rgba(255,255,255,0.96);
  box-shadow: 0 30px 70px rgba(27,45,98,0.24);
}

.support-form {
  display: grid;
  gap: 16px;
}

.support-form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.support-form label > span {
  display: block;
  margin: 0 0 8px 3px;
  color: #515B6D;
  font-size: 12px;
  font-weight: 500;
}

.support-form input,
.support-form select,
.support-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(57,72,104,0.16);
  border-radius: 13px;
  outline: none;
  color: #343B49;
  background: #FFFFFF;
  font: inherit;
  font-size: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.support-form input,
.support-form select {
  height: 55px;
  padding: 0 18px;
}

.support-form textarea {
  min-height: 125px;
  padding: 16px 18px;
  resize: vertical;
}

.support-form input:focus,
.support-form select:focus,
.support-form textarea:focus {
  border-color: var(--support-blue);
  box-shadow: 0 0 0 4px rgba(85,114,229,0.11);
}

.support-form input::placeholder,
.support-form textarea::placeholder { color: #9AA2B0; }

.support-submit-row {
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.support-submit {
  min-width: 225px;
  min-height: 56px;
  padding: 0 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border: 0;
  border-radius: 14px;
  color: #FFFFFF;
  background: linear-gradient(135deg, #5572E5 0%, #6683ED 100%);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(74,105,215,0.22);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.support-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 19px 35px rgba(74,105,215,0.30);
}

.support-submit i { transition: transform 0.3s ease; }
.support-submit:hover i { transform: translateX(5px); }

.support-submit-row > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #7D8798;
  font-size: 11px;
}

.support-submit-row > span i { color: var(--support-blue); }


/* ==================================================
   FOOTER ALIGNMENT + REVEAL
================================================== */

.support-page .contact-strip,
.support-page .footer-shell {
  width: calc(100% - 160px);
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
}

.support-page .reveal-item {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
}

.support-page .reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 1100px) {
  .support-shell,
  .support-page .nav-shell,
  .support-page .contact-strip,
  .support-page .footer-shell {
    width: calc(100% - 80px);
    max-width: none;
  }

  .support-hero-shell {
    grid-template-columns: minmax(0, 0.95fr) minmax(390px, 1.05fr);
    gap: 40px;
  }

  .support-float-card { display: none; }
  .support-option-grid { grid-template-columns: 1fr 1fr; }
  .support-option-card:last-child { grid-column: 1 / -1; }
  .support-overview-grid,
  .support-download-layout,
  .support-contact-grid { gap: 55px; }

  .support-contact-grid {
    grid-template-columns: minmax(0, 0.75fr) minmax(500px, 1.25fr);
  }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 820px) {
  .support-shell,
  .support-page .nav-shell,
  .support-page .contact-strip,
  .support-page .footer-shell {
    width: calc(100% - 40px);
  }

  .support-hero {
    height: auto;
    min-height: 760px;
  }

  .support-hero-shell {
    height: auto;
    padding: 55px 0 90px;
    grid-template-columns: 1fr;
    gap: 55px;
  }

  .support-hero-copy { max-width: 680px; }
  .support-hero-visual { min-height: 330px; }
  .support-dashboard { width: min(520px, 100%); }
  .support-option-grid { transform: none; padding-top: 55px; grid-template-columns: 1fr; }
  .support-option-card:nth-child(2) { transform: none; }
  a.support-option-card:nth-child(2):hover { transform: translateY(-6px); }
  .support-option-card:last-child { grid-column: auto; }
  .support-options { padding-bottom: 70px; }
  .support-overview { padding: 85px 0; }
  .support-overview-grid,
  .support-download-layout,
  .support-contact-grid { grid-template-columns: 1fr; }
  .support-overview-copy { padding-top: 0; }
  .support-service-grid { grid-template-columns: 1fr; }
  .support-faq,
  .support-downloads,
  .support-contact { padding: 85px 0; }
  .support-download-copy { position: static; }
  .support-contact-grid { gap: 45px; }
}


/* ==================================================
   SMALL MOBILE
================================================== */

@media (max-width: 520px) {
  .support-shell,
  .support-page .nav-shell,
  .support-page .contact-strip,
  .support-page .footer-shell {
    width: calc(100% - 30px);
  }

  .support-hero { min-height: 800px; }
  .support-hero-copy h1 { font-size: 42px; }
  .support-hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .support-dashboard { padding: 21px; border-radius: 22px; }
  .support-dashboard-grid { grid-template-columns: 1fr; }
  .support-dashboard-item { padding: 15px; }
  .support-dashboard-item > i { margin-bottom: 10px; }
  .support-option-card { min-height: 140px; padding: 22px; grid-template-columns: 54px minmax(0,1fr); }
  .support-option-card:not(a) { grid-template-columns: 54px minmax(0,1fr); }
  .support-option-icon { width: 54px; height: 54px; border-radius: 16px; }
  .support-option-arrow { display: none; }
  .support-faq-tabs { width: 100%; }
  .support-faq-tab { min-width: 0; flex: 1; }
  .support-faq-question { min-height: 72px; padding: 18px; font-size: 14px; }
  .support-faq-answer p { padding: 0 55px 22px 18px; }
  .support-download-card { padding: 18px; gap: 13px; }
  .support-download-icon { width: 45px; height: 45px; }
  .support-form-card { padding: 27px 21px; border-radius: 22px; }
  .support-form-row { grid-template-columns: 1fr; }
  .support-submit-row { align-items: flex-start; flex-direction: column; }
  .support-submit { width: 100%; }
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {
  .support-page .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .support-option-card,
  .support-service-card,
  .support-download-card,
  .support-submit,
  .support-faq-answer { transition: none; }
}


/* ==================================================
   CONSISTENT TEXT COLOURS
================================================== */

.support-page h1,
.support-page h2,
.support-page h3,
.support-page h4 {
  color: #666666 !important;
}

.support-page p {
  color: #7A7A7A !important;
}

/* Keep the hero heading and copy white */
.support-page .support-hero-copy h1,
.support-page .service-hero-copy h1 {
  color: #FFFFFF !important;
}

.support-page .support-hero-copy p,
.support-page .service-hero-copy p {
  color: rgba(255,255,255,0.94) !important;
}

/* Keep the Contact Support section exactly as designed */
.support-page .support-contact-copy h1,
.support-page .support-contact-copy h2,
.support-page .support-contact-copy h3,
.support-page .support-contact-copy h4 {
  color: #FFFFFF !important;
}

.support-page .support-contact-copy p {
  color: rgba(255,255,255,0.85) !important;
}

/* Keep the footer contact strip white */
.support-page .contact-strip h1,
.support-page .contact-strip h2,
.support-page .contact-strip h3,
.support-page .contact-strip h4,
.support-page .contact-strip p,
.support-page .footer-contact-strip h1,
.support-page .footer-contact-strip h2,
.support-page .footer-contact-strip h3,
.support-page .footer-contact-strip h4,
.support-page .footer-contact-strip p {
  color: #FFFFFF !important;
}

/* Selected Software or Hardware tab */
.support-page .support-faq-tab.is-active,
.support-page .support-faq-tab[aria-selected="true"] {
  color: #FFFFFF;
  background: var(--support-blue);
}

/* ==================================================
   BTS WHATSAPP BUTTON
================================================== */


/* Floating WhatsApp Button */

.whatsapp-button {

    position:fixed;

    right:30px;

    bottom:30px;

    width:58px;

    height:58px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#25D366;

    border:none;

    border-radius:50%;

    color:#ffffff;

    font-size:30px;

    cursor:pointer;

    z-index:9999;

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);

    transition:
        transform .3s ease,
        background .3s ease;

}


.whatsapp-button:hover {

    background:#20bd5a;

    transform:translateY(-5px);

}



/* ==================================================
   WHATSAPP POPUP
================================================== */


.whatsapp-popup {

    position:fixed;

    right:30px;

    bottom:105px;

    width:320px;

    background:#ffffff;

    border-radius:24px;

    overflow:hidden;

    box-shadow:
        0 25px 70px rgba(0,0,0,.20);

    z-index:9998;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:

        opacity .35s ease,

        transform .35s ease,

        visibility .35s ease;

}



/* Popup active state */

.whatsapp-popup.active {

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



/* Small pointer */

.whatsapp-popup::after {

    content:"";

    position:absolute;

    right:48px;

    bottom:-10px;

    width:22px;

    height:22px;

    background:#ffffff;

    transform:rotate(45deg);

}



/* ==================================================
   POPUP HEADER
================================================== */


.whatsapp-popup-header {

    position:relative;

    padding:25px 28px;

    background:#6675D9;

    color:#ffffff;

}



.whatsapp-popup-header h3 {

    margin:0;

    font-size:22px;

    line-height:1.35;

    font-weight:500;

}



/* Close button */

.whatsapp-close {

    position:absolute;

    top:15px;

    right:18px;

    background:none;

    border:none;

    color:#ffffff;

    font-size:28px;

    cursor:pointer;

    line-height:1;

}



.whatsapp-close:hover {

    opacity:.7;

}



/* ==================================================
   POPUP BODY
================================================== */


.whatsapp-popup-body {

    padding:28px;

    color:#46505f;

    font-size:16px;

    line-height:1.65;

}



.whatsapp-popup-body h4 {

    margin:0 0 12px;

    font-size:20px;

    color:#111111;

    font-weight:700;

}



.whatsapp-popup-body p {

    margin:0 0 20px;

}



/* ==================================================
   WHATSAPP ACTION BUTTON
================================================== */


.whatsapp-popup-link {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    padding:14px 20px;

    border-radius:50px;

    background:#25D366;

    color:#ffffff;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    transition:.3s ease;

}



.whatsapp-popup-link:hover {

    background:#20bd5a;

    color:#ffffff;

    transform:translateY(-3px);

}



.whatsapp-popup-link i {

    font-size:25px;

}



/* ==================================================
   BACK TO TOP BUTTON
================================================== */


.back-to-top {

    position:fixed;

    left:30px;

    bottom:30px;

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#586FE5;

    color:#ffffff;

    border:none;

    border-radius:50%;

    font-size:18px;

    cursor:pointer;

    z-index:9999;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.3s ease;

    box-shadow:

        0 12px 30px rgba(0,0,0,.15);

}



.back-to-top:hover {

    background:#4359d2;

    transform:translateY(-5px);

}



/* Visible state */

.back-to-top.show {

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



/* ==================================================
   MOBILE RESPONSIVE
================================================== */


@media(max-width:600px){


    .whatsapp-button {

        width:55px;

        height:55px;

        right:20px;

        bottom:20px;

        font-size:28px;

    }



    .whatsapp-popup {

        width:calc(100% - 40px);

        right:20px;

        bottom:90px;

    }



    .whatsapp-popup-header {

        padding:22px;

    }



    .whatsapp-popup-header h3 {

        font-size:20px;

    }



    .whatsapp-popup-body {

        padding:24px;

    }



    .back-to-top {

        width:48px;

        height:48px;

        left:20px;

        bottom:20px;

    }


}

/* ==================================================
   WHATSAPP POPUP HEADER TITLE
================================================== */

.whatsapp-popup-header h3 {
    color: #ffffff !important;
}

/* ==================================================
   BACK TO TOP BUTTON
================================================== */


.back-to-top {

    position:fixed;

    left:30px;

    bottom:30px;


    width:52px;

    height:52px;


    display:flex;

    align-items:center;

    justify-content:center;


    background:#586FE5;


    color:#ffffff;


    border:none;


    border-radius:50%;


    font-size:18px;


    cursor:pointer;


    z-index:9999;


    opacity:0;

    visibility:hidden;


    transform:translateY(20px);


    transition:.3s ease;


    box-shadow:
        0 12px 30px rgba(0,0,0,.15);

}



.back-to-top:hover {


    background:#4359d2;


    transform:translateY(-5px);

}



/* Show button */

.back-to-top.show {


    opacity:1;


    visibility:visible;


    transform:translateY(0);

}




@media(max-width:600px){


    .back-to-top {


        width:48px;

        height:48px;


        left:20px;


        bottom:20px;

    }

}