/* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* @import url("https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap");*/

:root {
  --base: #2d2d2d;
  --primary: #0047ff;
  --secondary-blue: #0038cc;
  --tertiary-blue: #0704e1;
  --white: #fff;
  --gray: #888;
  --light-gray: #aaa;
  --lighter-gray: #ddd;
  --lightest-gray: #eee;
  --dark-gray: #595959;
  --darker-gray: #3d3d3d;
  --darkest-gray: #333;
  --red: #f00;
  --dark-red: #b20000;
  --darker-red: #660000;
  --yellow: #eab308;
  --green: #22c55e;
  --dark-green: #147638;
  --highlight-blue: #ecf2ff;

  --bg-gray: #f2f4f6;

  --size-xxs: 10px;
  --size-xs: 12px;
  --size-sm: 13px;
  --size-base: 15px;
  --size-lg: 18px;
  --size-xl: 20px;
  --size-2xl: 24px;
  --size-3xl: 28px;
  --size-4xl: 32px;
  --size-5xl: 42px;
  --size-6xl: 60px;

  --gap-min: 10px;
  --gap-base: 20px;
  --gap-mid: 30px;
  --gap-max: 40px;
  --super-gap-max: 100px;

  --rounded-min: 5px;
  --rounded-base: 10px;
  --rounded-lg: 15px;
  --rounded-xl: 50px;
  --rounded-full: 50%;
}

body {
  position: relative;
  font-family: "Poppins", sans-serif !important;
  font-size: var(--size-base);
  color: var(--base);
  margin: 0 !important;
  padding: 0 !important;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.ti-bold {
  -webkit-text-stroke: 0.025rem currentColor;
  /* or use text-shadow to simulate thicker lines */
}

.w-req {
  width: 1100px;
  max-width: 100%;
}

.w-wrapper {
  max-width: 100%;
}

.header-block {
  height: 400px; /*confirmed 22/06/2026 */
}

.content-max {
  width: 70%;
}
.content-min {
  width: 30%;
}

.content-menu-block {
  margin-top: -165px;
}

a {
  color: var(--primary);
  text-decoration: none;
  outline: none;
}

a:hover {
  color: var(--base);
}

a > span {
  color: var(--base);
  text-decoration: none;
}

a > span:hover {
  color: var(--primary);
}

::-webkit-input-placeholder {
  font-size: var(--size-base);
  font-weight: 400;
  color: var(--light-gray);
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.5px;
}
:-moz-placeholder {
  /* Firefox 18- */
  font-size: var(--size-base);
  font-weight: 400;
  color: var(--light-gray);
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.5px;
}
::-moz-placeholder {
  /* Firefox 19+ */
  font-size: var(--size-base);
  font-weight: 400;
  color: var(--light-gray);
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.5px;
}

:-ms-input-placeholder {
  /* IE 10+, older Edge*/
  font-size: var(--size-base);
  font-weight: 400;
  color: var(--light-gray);
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.5px;
}

input {
  font-family: "Poppins", sans-serif;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input:focus {
  outline-offset: 0 !important;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--white) inset;
  -webkit-text-fill-color: var(--primary) !important;
}

select::-webkit-input-placeholder {
  color: var(--dark-gray);
  font-size: var(--size-base);
  background-color: transparent;
}

select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--white) inset;
}

input[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
  accent-color: var(--primary);
  width: var(--size-lg);
  height: var(--size-lg);
}

input[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
  accent-color: var(--primary);
  width: var(--size-base);
  height: var(--size-base);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="number"] {
  font-family: "Poppins", sans-serif;
  font-size: var(--size-base);
  color: var(--base);
  min-height: 40px;
}

input::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0 !important;
}

select {
  font-family: "Poppins", sans-serif;
  font-size: var(--size-base);
  color: var(--base);
  min-height: 40px;
  background: url("https://assets.jobstore.com/images/icon/icon_arrow_down_grey.png")
    no-repeat center right 15px/11px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  outline: none;
  cursor: pointer;
  padding: 0 var(--gap-max) 0 var(--gap-min);
  border: 1px solid var(--lightest-gray);
  border-radius: var(--rounded-base);
}

textarea {
  min-height: 85px;
  max-height: 200px;
  font-family: "Poppins", sans-serif;
  font-size: var(--size-base);
  color: var(--base);
  resize: vertical;
  overflow: auto;
  padding: var(--gap-min);
}
textarea:focus {
  outline: none;
}

select:focus {
  outline: none;
}

form {
  margin: 0 !important;
}

input[type="text"],
input[type="password"],
input[type="url"],
input[type="email"],
input[type="number"] {
  outline: none;
}

button,
input[type="button"],
input[type="submit"] {
  font-family: "Poppins", sans-serif;
  outline: none;
}

button.btn,
.btn {
  font-family: "Poppins", sans-serif !important;
  border-radius: var(--rounded-base);
  /* padding: 8px 15px; */
  cursor: pointer;
  height: 45px;
  font-weight: 600;
  font-size: var(--size-base);
}

.filter {
  font-family: "Poppins", sans-serif !important;
  border-radius: var(--rounded-base);
  padding: 10px 15px;
  cursor: pointer;
  font-size: var(--size-base);
}

.btn.btn-primary,
.filter.btn-primary {
  font-size: var(--size-base);
  background: var(--primary);
  color: var(--white);
  border: 1px solid var(--primary);
}
.btn.btn-primary:hover,
.filter.btn-primary:hover {
  background: var(--secondary-blue);
  cursor: pointer;
}

.btn.btn-secondary,
.filter.btn-secondary {
  background: var(--darker-gray);
  color: #f3f4f6;
  border: 1px solid var(--darker-gray);
}
.btn.btn-secondary:hover,
.filter.btn-secondary:hover {
  background: var(--white);
  color: var(--base);
}

.btn.btn-outline,
.filter.btn-outline {
  background: var(--white);
  color: var(--primary);
  border: 1px solid var(--primary);
}
.btn.btn-outline:hover,
.filter.btn-outline:hover {
  color: var(--darker-gray);
  border: 1px solid var(--darker-gray);
}

.btn.btn-dark,
.filter.btn-dark {
  background: var(--base);
  color: var(--white);
  border: 1px solid var(--base);
}
.btn.btn-dark:hover,
.filter.btn-dark:hover {
  background: var(--darker-gray);
  border: 1px solid var(--darker-gray);
}

.btn.btn-clear,
.filter.btn-clear {
  background: var(--white);
  color: var(--darker-gray);
  border: 1px solid var(--lighter-gray);
}
.btn.btn-clear:hover,
.filter.btn-clear:hover {
  background: var(--white);
  border: 1px solid var(--light-gray);
}

.btn.btn-error,
.filter.btn-error {
  background: var(--red);
  color: var(--white);
  border: 1px solid var(--red);
}
.btn.btn-error:hover,
.filter.btn-error:hover {
  background: var(--dark-red);
  border: 1px solid var(--dark-red);
}

.hover\:color-base:hover,
.color-base {
  color: var(--base);
}
.hover\:color-primary:hover,
.color-primary {
  color: var(--primary);
}
.hover\:color-white:hover,
.color-white {
  color: var(--white);
}
.hover\:color-gray:hover,
.color-gray {
  color: var(--gray);
}
.hover\:color-light-gray:hover,
.color-light-gray {
  color: var(--light-gray);
}
.hover\:color-lighter-gray:hover,
.color-lighter-gray {
  color: var(--lighter-gray);
}
.hover\:color-dark-gray:hover,
.color-dark-gray {
  color: var(--dark-gray);
}
.hover\:color-darker-gray:hover,
.color-darker-gray {
  color: var(--darker-gray);
}
.hover\:color-darkest-gray:hover,
.color-darkest-gray {
  color: var(--darkest-gray);
}
.hover\:color-red:hover,
.color-red {
  color: var(--red);
}
.hover\:color-dark-red:hover,
.color-dark-red {
  color: var(--dark-red);
}
.hover\:color-yellow:hover,
.color-yellow {
  color: var(--yellow);
}
.hover\:color-green:hover,
.color-green {
  color: var(--green);
}
.hover\:color-dark-green:hover,
.color-dark-green {
  color: var(--dark-green);
}

.bg-header {
  background: var(--bg-gray);
}
.hover\:bg-highlight:hover,
.bg-highlight {
  background: var(--highlight-blue);
}
.hover\:bg-base:hover,
.bg-base {
  background: var(--white);
}
.hover\:bg-primary:hover,
.bg-primary {
  background: var(--primary);
}
.hover\:bg-black:hover,
.bg-black {
  background: var(--base);
}
.hover\:bg-gray:hover,
.bg-gray {
  background: var(--gray);
}
.hover\:bg-light-gray:hover,
.bg-light-gray {
  background: var(--light-gray);
}
.hover\:bg-lighter-gray:hover,
.bg-lighter-gray {
  background: var(--lighter-gray);
}
.hover\:bg-lightest-gray:hover,
.bg-lightest-gray {
  background: var(--lightest-gray);
}
.hover\:bg-dark-gray:hover,
.bg-dark-gray {
  background: var(--dark-gray);
}
.hover\:bg-darker-gray:hover,
.bg-darker-gray {
  background: var(--darker-gray);
}
.hover\:bg-red:hover,
.bg-red {
  background: var(--red);
}
.hover\:bg-dark-red:hover,
.bg-dark-red {
  background: var(--dark-red);
}
.hover\:bg-darker-red:hover,
.bg-darker-red {
  background: var(--darker-red);
}

.border-none {
  border: none;
}
.hover\:border-color-light:hover,
.border-color-light {
  border-color: var(--lightest-gray);
}
.hover\:border-color-base:hover,
.border-color-base {
  border-color: var(--lighter-gray);
}
.hover\:border-color-gray:hover,
.border-color-gray {
  border-color: var(--light-gray);
}
.hover\:border-color-white:hover,
.border-color-white {
  border-color: var(--white);
}
.hover\:border-color-dark:hover,
.border-color-dark {
  border-color: var(--dark-gray);
}
.hover\:border-color-primary:hover,
.border-color-primary {
  border-color: var(--primary);
}
.hover\:border-color-red:hover,
.border-color-red {
  border-color: var(--red);
}

.shadow-base {
  box-shadow: 0 0 10px var(--lighter-gray);
}

.text-xxs {
  font-size: var(--size-xxs);
}
.text-xs {
  font-size: var(--size-xs);
}
.text-sm {
  font-size: var(--size-sm);
}
.text-base {
  font-size: var(--size-base);
}
.text-lg {
  font-size: var(--size-lg);
}
.text-xl {
  font-size: var(--size-xl);
}
.text-2xl {
  font-size: var(--size-2xl);
}
.text-3xl {
  font-size: var(--size-3xl);
}
.text-4xl {
  font-size: var(--size-4xl);
}
.text-5xl {
  font-size: var(--size-5xl);
}
.text-6xl {
  font-size: var(--size-6xl);
}

.gap-base {
  gap: var(--gap-base);
}
.gap-min {
  gap: var(--gap-min);
}
.gap-mid {
  gap: var(--gap-mid);
}
.gap-max {
  gap: var(--gap-max);
}
.super-gap-max {
  gap: var(--super-gap-max);
}

h1 {
  font-size: var(--size-2xl);
}

h1.company-name {
  font-size: var(--size-lg);
}

h2 {
  font-size: var(--size-xl);
}

h2.title {
  font-size: var(--size-lg);
}

h3 {
  font-size: var(--size-lg);
}

.rounded-none {
  border-radius: 0 !important;
}
.rounded-min {
  border-radius: var(--rounded-min) !important;
}
.rounded-base {
  border-radius: var(--rounded-base) !important;
}
.rounded-lg {
  border-radius: var(--rounded-lg) !important;
}
.rounded-xl {
  border-radius: var(--rounded-xl) !important;
}
.rounded-full {
  border-radius: var(--rounded-full) !important;
}

.rounded-t-min {
  border-top-left-radius: var(--rounded-min) !important;
  border-top-right-radius: var(--rounded-min) !important;
}
.rounded-t-base {
  border-top-left-radius: var(--rounded-base) !important;
  border-top-right-radius: var(--rounded-base) !important;
}
.rounded-t-lg {
  border-top-left-radius: var(--rounded-lg) !important;
  border-top-right-radius: var(--rounded-lg) !important;
}
.rounded-t-xl {
  border-top-left-radius: var(--rounded-xl) !important;
  border-top-right-radius: var(--rounded-xl) !important;
}
.rounded-t-full {
  border-top-left-radius: var(--rounded-full) !important;
  border-top-right-radius: var(--rounded-full) !important;
}

.rounded-b-min {
  border-bottom-left-radius: var(--rounded-min) !important;
  border-bottom-right-radius: var(--rounded-min) !important;
}
.rounded-b-base {
  border-bottom-left-radius: var(--rounded-base) !important;
  border-bottom-right-radius: var(--rounded-base) !important;
}
.rounded-b-lg {
  border-bottom-left-radius: var(--rounded-lg) !important;
  border-bottom-right-radius: var(--rounded-lg) !important;
}
.rounded-b-xl {
  border-bottom-left-radius: var(--rounded-xl) !important;
  border-bottom-right-radius: var(--rounded-xl) !important;
}
.rounded-b-full {
  border-bottom-left-radius: var(--rounded-full) !important;
  border-bottom-right-radius: var(--rounded-full) !important;
}

.img-cover {
  object-fit: cover;
}
.img-contain {
  object-fit: contain;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size-6xl);
  height: var(--size-6xl);
  font-size: var(--size-2xl);
  font-weight: 600;
  color: var(--white);
  border-radius: 50%;
}

/* ---------- vibrant colours ---------- */
.avatar-a {
  background-color: #3b82f6; /* Blue */
}
.avatar-b {
  background-color: #14b8a6; /* Teal */
}
.avatar-c {
  background-color: #8b5cf6; /* Violet */
}
.avatar-d {
  background-color: #f97316; /* Orange */
}
.avatar-e {
  background-color: #ef4444; /* Red */
}
.avatar-f {
  background-color: #06b6d4; /* Cyan */
}
.avatar-g {
  background-color: #22c55e; /* Green */
}
.avatar-h {
  background-color: #ec4899; /* Pink */
}
.avatar-i {
  background-color: #f59e0b; /* Amber */
}
.avatar-j {
  background-color: #6366f1; /* Indigo */
}
.avatar-k {
  background-color: #10b981; /* Emerald */
}
.avatar-l {
  background-color: #e11d48; /* Rose */
}
.avatar-m {
  background-color: #0ea5e9; /* Sky Blue */
}
.avatar-n {
  background-color: #84cc16; /* Lime */
}
.avatar-o {
  background-color: #a855f7; /* Purple */
}
.avatar-p {
  background-color: #f43f5e; /* Hot Rose */
}
.avatar-q {
  background-color: #0891b2; /* Deep Cyan */
}
.avatar-r {
  background-color: #65a30d; /* Olive Green */
}
.avatar-s {
  background-color: #d946ef; /* Fuchsia */
}
.avatar-t {
  background-color: #2563eb; /* Strong Blue */
}
.avatar-u {
  background-color: #dc2626; /* Crimson */
}
.avatar-v {
  background-color: #059669; /* Deep Emerald */
}
.avatar-w {
  background-color: #7c3aed; /* Deep Violet */
}
.avatar-x {
  background-color: #ea580c; /* Burnt Orange */
}
.avatar-y {
  background-color: #0284c7; /* Ocean Blue */
}
.avatar-z {
  background-color: #be185d; /* Magenta */
}

.avatar-0 {
  background-color: #475569; /* Slate */
}
.avatar-1 {
  background-color: #7c2d12; /* Deep Copper */
}
.avatar-2 {
  background-color: #166534; /* Forest Green */
}
.avatar-3 {
  background-color: #1e40af; /* Royal Blue */
}
.avatar-4 {
  background-color: #9f1239; /* Burgundy */
}
.avatar-5 {
  background-color: #0f766e; /* Dark Teal */
}
.avatar-6 {
  background-color: #7e22ce; /* Rich Purple */
}
.avatar-7 {
  background-color: #b45309; /* Burnished Gold */
}
.avatar-8 {
  background-color: #be123c; /* Raspberry */
}
.avatar-9 {
  background-color: #155e75; /* Deep Ocean */
}

/* ---------- vibrant colours ---------- */

/* --------- input text - req on 16/06/2026 --------- */
.form-input {
  border-width: 1px;
  border-style: solid;
  border-color: var(--dark-gray);
  border-radius: var(--rounded-min);
  transition: border-color 0.15s ease-in-out;
  padding: 0 var(--gap-min);
  max-width: 100%;
}
.form-textarea {
  border-width: 1px;
  border-style: solid;
  border-color: var(--dark-gray);
  border-radius: var(--rounded-min);
  resize: none;
  transition: border-color 0.15s ease-in-out;
  padding: var(--gap-min);
}
.form-input:hover,
.form-textarea:hover {
  border: 1px solid var(--primary);
}

.form-input.border-color-red,
.form-textarea.border-color-red {
  border-color: var(--red);
}

/* --------- input text - req on 16/06/2026 --------- */

/* ---------------------------------------------------------------------------------------------- */
/* -------------------------- media css - added 10/06/2026 - 10:06am -------------------------- */
/* ---------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 350px) and (max-width: 1023px) {
  .w-req, .w-wrapper {
    max-width: 90%;
    margin: 0 auto;
  }
  .header-block {
    height: auto;
  }
  .content-max {
    width: 100%;
  }
  .content-min {
    display: none;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1439px) {
  .w-req, .w-wrapper {
    max-width: 95%;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 1440px) {
}

/* -------------------------------------------------------------------------------------------------- */
/* -------------------------- END media css - added 10/06/2026 - 10:06am -------------------------- */
/* -------------------------------------------------------------------------------------------------- */