/* ===== ICONS OVERRIDE — must be the very LAST stylesheet ===== */

/* 1) Kill any old bexon-icons content and family */
[class^="tji-"]::before,
[class*=" tji-"]::before,
.mainmenu ul > li.menu-item-has-children > a::after,
.mainmenu ul > li.has-dropdown > a::after {
  font-family: "Font Awesome 6 Free" !important; /* use FA Free (from CDN) */
  font-weight: 900 !important; /* solid */
  font-style: normal;
  display: inline-block;
  line-height: 1;
  color: currentColor !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "" !important; /* reset any old glyphs */
}

/* 2) Map the exact classes you’re using (add more as needed) */
.tji-arrow-left::before {
  content: "\f053" !important;
} /* chevron-left  */
.tji-arrow-right::before {
  content: "\f054" !important;
} /* chevron-right */
.tji-arrow-down-big::before {
  content: "\f103" !important;
} /* angles-down   */

/* 3) Also fix the dropdown chevrons injected via ::after */
.mainmenu ul > li.menu-item-has-children > a::after,
.mainmenu ul > li.has-dropdown > a::after {
  content: "\f107" !important; /* angle-down */
  font-size: 12px !important;
}

/* 4) Make sure size isn’t zeroed by theme */
.tji-arrow-left,
.tji-arrow-right,
.tji-arrow-down-big,
.tji-arrow-left::before,
.tji-arrow-right::before,
.tji-arrow-down-big::before {
  font-size: 1.1em !important; /* tweak as you like */
}

/* solid (default) */
.tji-CLASSNAME::before {
  font-family: "Font Awesome 6 Free" !important; /* or "Font Awesome 6 Sharp" */
  font-weight: 900 !important; /* solid */
  content: "\fxxx" !important; /* FA unicode */
}

.tji-CLASSNAME::before {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  content: "\fxxx" !important;
}

/* actions */
.tji-play::before {
  content: "\f04b" !important;
} /* play */
.tji-pause::before {
  content: "\f04c" !important;
} /* pause */
.tji-download::before {
  content: "\f019" !important;
}
.tji-upload::before {
  content: "\f093" !important;
}
.tji-search::before {
  content: "\f002" !important;
}
.tji-plus::before {
  content: "\f067" !important;
}
.tji-minus::before {
  content: "\f068" !important;
}
.tji-check::before {
  content: "\f00c" !important;
}
.tji-x::before,
.tji-close::before {
  content: "\f00d" !important;
}

/* ui */
.tji-angle-left::before {
  content: "\f104" !important;
}
.tji-angle-right::before {
  content: "\f105" !important;
}
.tji-angle-up::before {
  content: "\f106" !important;
}
.tji-angle-down::before {
  content: "\f107" !important;
}
.tji-star::before {
  content: "\f005" !important;
}
.tji-quote::before {
  content: "\f10d" !important;
}

/* objects */
.tji-phone::before {
  content: "\f095" !important;
}
.tji-mail::before,
.tji-email::before {
  content: "\f0e0" !important;
}
.tji-location::before,
.tji-map-pin::before {
  content: "\f3c5" !important;
}
.tji-user::before {
  content: "\f007" !important;
}
.tji-users::before {
  content: "\f0c0" !important;
}
.tji-calendar::before {
  content: "\f133" !important;
}
.tji-clock::before {
  content: "\f017" !important;
}

/* brands */
.tji-facebook::before {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  content: "\f39e" !important;
}
.tji-instagram::before {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  content: "\f16d" !important;
}
.tji-twitter::before {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  content: "\f099" !important;
}
.tji-linkedin::before {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  content: "\f0e1" !important;
}
.tji-youtube::before {
  font-family: "Font Awesome 6 Brands" !important;
  font-weight: 400 !important;
  content: "\f167" !important;
}

/* complete / done */
.tji-complete::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important; /* solid */
  content: "\f058" !important; /* fa-circle-check */
}

/* worldwide / global */
.tji-worldwide::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f0ac" !important; /* fa-globe */
  /* alternative: "\f57e" (fa-earth-asia) */
}

/* growth / analytics */
.tji-growth::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f201" !important; /* fa-chart-line */
}

/* long right arrow */
.tji-arrow-right-long::before {
  font-family: "Font Awesome 6 Free" !important; /* or "Font Awesome 6 Sharp" */
  font-weight: 700 !important; /* solid */
  content: "\f178" !important; /* fa-arrow-right-long */
}
/* Use FA for offcanvas icons */
.tji-menu::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f0c9" !important; /* fa-bars (hamburger) */
}

.tji-close::before,
.tji-x::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f00d" !important; /* fa-xmark */
}

/* Optional: fancier open icon alternatives
.tji-menu::before  { content:"\f550" !important; }  /* fa-bars-staggered */
/* Optional: style/size so they’re visible */
.offcanvas-open i,
.offcanvas-close i {
  font-size: 18px;
  line-height: 1;
}

.tji-arrow-right-big::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f178" !important; /* fa-arrow-right-long */
}

.hamburger_close_btn i {
  font-family: "Font Awesome 6 Free" !important; /* or "Font Awesome 6 Sharp" */
  font-weight: 900 !important; /* solid */
  font-size: 30px !important;
  line-height: 1;
  color: currentColor !important;
}

.service-item .service-icon i {
  font-family: "Font Awesome 6 Free" !important; /* or "Font Awesome 6 Sharp" */
  font-weight: 900 !important;
  font-size: 26px;
  line-height: 1;
  position: relative;
  z-index: 2; /* sit above decorative shapes */
}

.working-process-area .process-item {
  position: relative;
}

.working-process-area .process-item:not(:last-child)::after {
  content: "\f178";
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  position: absolute;
  inset-inline-end: -22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: currentColor;
}

@media (max-width: 767px) {
  .working-process-area .process-item:not(:last-child)::after {
    content: "\f107"; /* fa-angle-down */
    inset-inline-end: 50%;
    transform: translate(50%, 0);
    top: auto;
    bottom: -18px;
  }
}

.tji-location-3::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f3c5" !important;
}

.tji-envelop::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f0e0" !important;
}

/* Make sure FA classes use FA fonts, not the theme's icon font */
.fa,
.fa-solid,
.fa-regular {
  font-family: "Font Awesome 6 Free" !important;
  font-style: normal;
}
.fa-brands {
  font-family: "Font Awesome 6 Brands" !important;
  font-style: normal;
}
.fa-solid {
  font-weight: 900 !important;
}
.fa-regular {
  font-weight: 400 !important;
}

/* Back-to-top specific, to beat any local overrides */
#tj-back-to-top i {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-style: normal;
  font-size: 16px;
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* Remove default dropdown appearance */
.custom-select {
  -webkit-appearance: none; /* Remove default dropdown arrow in WebKit browsers */
  -moz-appearance: none; /* Remove default dropdown arrow in Firefox */
  appearance: none; /* Remove default dropdown arrow in all browsers */

  padding: 10px 40px 10px 10px; /* Add padding to create space for the arrow */
  font-size: 16px; /* Font size */
  background-color: #f5f5f5; /* Light background */
  border: 1px solid #ccc; /* Light border */
  border-radius: 4px; /* Rounded corners */
  width: 100%; /* Make it take full width */
  outline: none; /* Remove outline */
}

/* Remove default dropdown icon for IE */
.custom-select::-ms-expand {
  display: none;
}

/* Add custom dropdown arrow */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}

.custom-select::after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 20px;
  color: #333;
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* phone 2 */
/* .tji-phone-2::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f2a0" !important;
} */

/* envelope 2 */
/* .tji-envelop-2::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  content: "\f2b6" !important;
} */