/* Bexon home-03 Features2 / Choose section — extracted verbatim from template globals.css */

/* Scoped CSS variables so section matches Bexon regardless of host site theme */
#choose.tj-choose-section {
  --tj-fw-sbold: 600;
  --tj-fw-bold: 700;
  --tj-color-common-white: #ffffff;
  --tj-color-heading-primary: #0c1e21;
  --tj-color-text-body-2: #a9b8b8;
  --tj-color-theme-primary: #1e8a8a;
  --tj-color-theme-dark: #0c1e21;
  --tj-color-border-1: #c9d1d1;
  --tj-ff-body: inherit;
}

/* section-gap */
#choose.section-gap {
  padding-top: 120px;
  padding-bottom: 120px;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #choose.section-gap {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
  #choose.section-gap {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

/* sec-heading */
#choose .sec-heading {
  margin-inline-start: auto;
  margin-inline-end: auto;
  width: 100%;
  margin-bottom: 52px;
}
#choose .sec-heading .sec-title { margin-bottom: 0; }
#choose .sec-heading .sec-title span { color: var(--tj-color-theme-primary); }
#choose .sec-heading .sub-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tj-color-heading-primary);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: var(--tj-fw-bold);
  border: 1px dashed var(--tj-color-border-1);
  padding: 2px 10px;
  margin-bottom: 20px;
  border-radius: 4px;
}
#choose .sec-heading .sub-title i {
  color: var(--tj-color-theme-primary);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
}
#choose .sec-heading.style-3 .sub-title {
  color: var(--tj-color-theme-primary);
  padding: 0;
  border: 0;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
  #choose .sec-heading .sub-title { margin-bottom: 15px; font-size: 13px; }
  #choose .sec-heading { margin-bottom: 35px; }
}

/* tj-choose-section */
.tj-choose-section { overflow: hidden; }
.tj-choose-section .sec-heading { max-width: 550px; }

/* choose-box */
.choose-box {
  height: 100%;
  padding: 50px 28px 45px;
  background-color: var(--tj-color-common-white);
  transition: all 0.4s ease-in-out;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.choose-box .choose-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.choose-box .choose-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tj-color-theme-primary);
  font-size: 88px;
  line-height: 1;
  width: 88px;
  height: 88px;
  margin-bottom: 43px;
}
.choose-box .choose-icon i { line-height: 1; display: inline-flex; }
@media only screen and (min-width: 1200px) and (max-width: 1399px),
       only screen and (min-width: 992px) and (max-width: 1199px) {
  .choose-box .choose-icon { margin-bottom: 30px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
  .choose-box .choose-icon { font-size: 65px; width: 65px; height: 65px; margin-bottom: 20px; }
}
.choose-box .title {
  font-weight: var(--tj-fw-sbold);
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
  .choose-box .title { font-size: 18px; margin-bottom: 10px; }
}
.choose-box .desc { margin-bottom: 0; }
.choose-box .text-btn {
  margin-top: auto;
  padding-top: 27px;
  justify-content: flex-start;
}
.choose-box:hover { background-color: var(--tj-color-theme-primary); }
.choose-box:hover .choose-icon {
  color: var(--tj-color-common-white);
  animation: gelatine 0.6s;
}
.choose-box:hover .btn-icon { background-color: var(--tj-color-theme-dark); }
.choose-box:hover .btn-text,
.choose-box:hover .desc,
.choose-box:hover .title { color: var(--tj-color-common-white); }
@media only screen and (min-width: 1200px) and (max-width: 1399px),
       only screen and (min-width: 992px) and (max-width: 1199px),
       only screen and (min-width: 768px) and (max-width: 991px) {
  .choose-box { padding: 40px 20px; }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
  .choose-box { padding: 30px 15px; }
}
.choose-box.style-2 { padding: 40px 28px; }
.choose-box.style-2 .choose-icon { margin-bottom: 25px; }
@media only screen and (min-width: 768px) and (max-width: 991px),
       only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
  .choose-box.style-2 .choose-icon { margin-bottom: 20px; }
}
@media only screen and (min-width: 576px) and (max-width: 767px),
       (max-width: 575px) {
  .choose-box.style-2 { padding: 30px 15px; }
}

/* 3 choose cards side by side inside hero */
.hero-cards.tj-choose-section { padding-top: 24px; padding-bottom: 0; }
.hero-cards .row { --bs-gutter-x: 16px; }
.hero-cards .choose-box.style-2 {
  padding: 28px 18px;
  border-radius: 12px;
  text-align: center;
  height: 100%;
}
.hero-cards .choose-box .choose-content {
  align-items: center;
}
.hero-cards .choose-box .choose-icon {
  width: 72px;
  height: 72px;
  font-size: 34px;
  border-radius: 50%;
  background: rgba(30, 138, 138, 0.10);
  margin-bottom: 18px;
}
.hero-cards .choose-box .title {
  font-size: 16px;
  margin-bottom: 10px;
}
.hero-cards .choose-box .desc {
  font-size: 13px;
  line-height: 1.7;
  color: #5a6b6b;
  margin-bottom: 16px;
}
.hero-cards .choose-box .text-btn {
  margin-top: 0;
  padding-top: 0;
  justify-content: center;
}
.hero-cards .choose-box .text-btn .btn-text {
  font-size: 14px;
}
.hero-cards .choose-box .text-btn .btn-icon {
  width: 26px;
  height: 26px;
  font-size: 12px;
}
.hero-cards .choose-box:hover .choose-icon {
  background: rgba(255, 255, 255, 0.15);
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hero-cards .choose-box.style-2 { padding: 22px 14px; }
  .hero-cards .choose-box .choose-icon { width: 62px; height: 62px; font-size: 30px; }
  .hero-cards .choose-box .title { font-size: 15px; }
  .hero-cards .choose-box .desc { font-size: 12px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .hero-cards .choose-box.style-2 { padding: 20px 14px; }
  .hero-cards .choose-box .choose-icon { width: 58px; height: 58px; font-size: 28px; margin-bottom: 14px; }
  .hero-cards .choose-box .title { font-size: 15px; }
  .hero-cards .choose-box .desc { font-size: 12px; margin-bottom: 12px; }
}
@media (max-width: 767px) {
  .hero-cards .row { --bs-gutter-y: 16px; }
  .hero-cards .choose-box.style-2 { padding: 24px 18px; }
  .hero-cards .choose-box .choose-icon { width: 68px; height: 68px; font-size: 32px; margin-bottom: 16px; }
  .hero-cards .choose-box .title { font-size: 16px; }
  .hero-cards .choose-box .desc { font-size: 14px; }
}

/* text-btn */
#choose .text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  font-size: 16px;
  font-weight: var(--tj-fw-sbold);
  text-align: center;
  line-height: 1;
  z-index: 2;
  text-decoration: none;
}
#choose .text-btn .btn-text { color: var(--tj-color-heading-primary); overflow: hidden; }
#choose .text-btn .btn-text span {
  display: flex;
  line-height: 1;
  text-shadow: 0 30px 0;
  backface-visibility: hidden;
  transform: translateY(0);
  transition: 0.4s ease-in-out;
}
#choose .text-btn .btn-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  line-height: 1;
  width: 30px;
  height: 30px;
  overflow: hidden;
  background-color: var(--tj-color-theme-dark);
  border-radius: 50%;
}
#choose .text-btn .btn-icon i {
  color: var(--tj-color-common-white);
  transform: rotate(-45deg);
  transition: all 0.3s ease-in-out;
}
#choose .text-btn:hover .btn-text span { transform: translateY(-30px); }
#choose .text-btn:hover .btn-icon { background-color: var(--tj-color-theme-primary); }
#choose .text-btn:hover .btn-icon i { transform: rotate(0); }

/* gelatine keyframes */
@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.7, 1.1); }
  50% { transform: scale(1.1, 0.7); }
  75% { transform: scale(0.95, 1.05); }
}

/* ==== home-07 (h6-choose + h7-choose) — verbatim from bexon template ==== */
/* h6-choose */
#choose.h6-choose { overflow: hidden; }
#choose .h6-choose-box .choose-icon {
  border-radius: 100%;
  background-color: var(--tj-color-theme-primary);
  color: var(--tj-color-common-white);
  font-size: 65px;
  max-width: 90px;
  height: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#choose .h6-choose-box .choose-icon i { width: 42px; line-height: 1; }
#choose .h6-choose-box .choose-icon .tji-support { margin-inline-start: -8px; margin-top: -3px; }
@media (max-width: 991px) {
  #choose .h6-choose-box .choose-icon { max-width: 80px; height: 80px; font-size: 56px; }
  #choose .h6-choose-box .choose-icon i { width: 36px; }
}
#choose .h6-choose-box:hover { background-color: var(--tj-color-common-white); }
#choose .h6-choose-box:hover .title { color: var(--tj-color-heading-primary); }
#choose .h6-choose-box:hover .desc { color: var(--tj-color-text-body); }

/* h7-choose — overrides h6 icon to grey full-width banner */
#choose.h7-choose .h7-choose-item-wrapper {
  --bs-gutter-x: 0;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.6);
}
#choose.h7-choose .h7-choose-item:not(:last-child) {
  border-inline-end: 2px solid var(--tj-color-grey-1, #eef1f1);
}
@media (max-width: 991px) {
  #choose.h7-choose .h7-choose-item:not(:last-child) {
    border-inline-end: 0;
    border-bottom: 2px solid var(--tj-color-grey-1, #eef1f1);
  }
}
#choose .h7-choose-box {
  text-align: center;
  border-radius: 0;
  background-color: transparent;
}
#choose .h7-choose-box .choose-content { align-items: center; }
#choose .h7-choose-box .choose-icon {
  background-color: rgba(238, 241, 241, 0.6);
  transition: all 0.4s;
  width: 100%;
  margin-bottom: 30px;
}
#choose .h7-choose-box .choose-icon i {
  transition: all 0.4s;
  color: var(--tj-color-theme-primary);
}
#choose .h7-choose-box .choose-icon lord-icon {
  transition: all 0.4s;
}
#choose .h7-choose-box .choose-icon lord-icon {
  display: inline-flex;
  width: 60px;
  height: 60px;
}
#choose .h7-choose-box:hover .choose-icon lord-icon {
  filter: brightness(0) invert(1);
}
#choose .h7-choose-box .text-btn:hover .btn-icon {
  background-color: var(--tj-color-theme-primary);
}
#choose .h7-choose-box:hover .choose-icon {
  background-color: rgba(247, 171, 36, 0.85);
}
#choose .h7-choose-box:hover .choose-icon i {
  color: var(--tj-color-common-white);
}
#choose .h7-choose-box:hover .btn-text { color: var(--tj-color-heading-primary); }
