/**
 * QA pages fixes — careers / contact / about / products / services
 * Loaded last among design sheets so pack rules can be corrected without editing huge packs.
 */

/* Careers design tokens (referenced by inner-pages.css but never defined) */
.careers-page {
  --font-main: "Inter-Regular", "Inter", sans-serif;
  --primary-accent: #ff3366;
  --dark-navy: #0c1a63;
  --text-dark: #000000;
  --text-medium: #475569;
  --text-placeholder: rgba(0, 0, 0, 0.3);
  --card-bg: #ffffff;
  --card-border: #eef2f6;
  --card-shadow: 0 10px 28px rgba(12, 26, 99, 0.08);
  --input-bg: #f6f6f6;
  --input-border: #e8e8e8;
  --input-focus-border: #ff3366;
  --accent-dashed-border: #ff3366;
}

.careers-page .hero-title {
  font: 55px/65px "Inter-Bold", sans-serif;
  color: #000;
  letter-spacing: -0.5px;
}
.careers-page .hero-title span {
  color: #ff3366;
}

.careers-page .career-hero {
  min-height: 416px;
  display: flex;
  align-items: center;
}
.careers-page .career-hero-content {
  padding: 72px 0;
  position: relative;
  z-index: 2;
}
.careers-page .career-hero-image-wrapper::after {
  background: linear-gradient(to right, #ffffff 38%, rgba(255, 255, 255, 0) 68%);
}

.careers-page .brd_crumb,
.main-content-contact .brd_crumb,
.main-content-about .brd_crumb,
.main-content-services-main .brd_crumb,
.product-mn-cnt .brd_crumb {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 3;
  margin-bottom: 14px;
}

.careers-page .form-error-msg,
.application-form .form-error-msg,
.careers-page .form-status-error {
  display: block;
  font: 13px/18px "Inter-Medium", sans-serif;
  color: #c2185b;
  background: rgba(255, 51, 102, 0.08);
  border: 1px solid rgba(255, 51, 102, 0.22);
  border-radius: 10px;
  padding: 10px 12px;
  margin-top: 8px;
}
.careers-page .field-error,
.application-form .field-error {
  display: block;
  margin: 6px 0 0;
  padding: 0;
  border: none;
  background: none;
  border-radius: 0;
  color: #e11d48;
  font: 12px/16px "Inter-Medium", sans-serif;
}
.careers-page .resume-upload-box.is-invalid {
  border-color: #ef4444;
}
.careers-page .form-success-alert,
.careers-page .form-success-alert.visible {
  display: block;
  background-color: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 10px;
  padding: 12px 14px;
  font: 13px/20px "Inter-Medium", sans-serif;
  text-align: center;
  margin-top: 10px;
}

.req-ast {
  color: #ff3366;
  margin-left: 3px;
  font-weight: 700;
}

.resume-upload-box {
  position: relative;
}
.resume-clear-btn {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: #0c1a63;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 0;
}
.resume-clear-btn:hover {
  background: #ff3366;
}
.resume-clear-btn svg {
  width: 12px;
  height: 12px;
}

.careers-page .application-card {
  box-shadow: 0 12px 32px rgba(12, 26, 99, 0.1);
}
.careers-page .job-card {
  box-shadow: 0 4px 16px rgba(12, 26, 99, 0.06);
}
.careers-page .job-card.active {
  box-shadow: 0 8px 24px rgba(255, 51, 102, 0.12);
  border-color: rgba(255, 51, 102, 0.35);
}
.careers-page .status-dot {
  box-shadow: 0 0 0 7px rgba(0, 210, 106, 0.22);
}

/* Narrow form card (40% column or phone): stack notepad above title for clean 2-line wrap */
.careers-page .application-card {
  container-type: inline-size;
  container-name: careers-apply;
}

@container careers-apply (max-width: 520px) {
  .application-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }
  .application-card-header .hed-35,
  .application-form-title {
    width: 100%;
    max-width: 100%;
    flex: none;
    min-width: 0;
    white-space: normal;
  }
}

@media screen and (max-width: 991px) {
  .careers-page .hero-title {
    font-size: 36px;
    line-height: 44px;
  }
  .careers-page .career-hero {
    min-height: 320px;
  }
  .careers-page .career-hero-content {
    max-width: 100%;
    padding: 48px 0 40px;
  }
  .careers-page .application-card-header {
    align-items: flex-start;
  }
  .careers-page .hed-35,
  .careers-page .application-form-title {
    font-size: 26px;
    line-height: 32px;
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
  }
  .careers-page .job-icon-circle {
    width: 48px;
    height: 48px;
    min-width: 48px;
  }
  .careers-page .job-icon-circle img {
    width: 24px;
    height: 24px;
  }
  .careers-page .application-header-icon {
    width: 56px;
    min-width: 56px;
    height: 56px;
    flex-shrink: 0;
  }
  .careers-page .application-header-icon img {
    width: 28px;
    height: 32px;
  }
}

/* No container queries: stack on tablet/phone so the 40% column cannot squeeze the title */
@supports not (container-type: inline-size) {
  @media screen and (max-width: 991px) {
    .careers-page .application-card-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      text-align: left;
    }
    .careers-page .hed-35,
    .careers-page .application-form-title {
      width: 100%;
      flex: none;
    }
  }
}

@media screen and (max-width: 575px) {
  .careers-page .hero-title {
    font-size: 28px;
    line-height: 34px;
  }
  .careers-page .career-hero {
    min-height: 260px;
  }
  .careers-page .application-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
  }
  .careers-page .hed-35,
  .careers-page .application-form-title {
    width: 100%;
    flex: none;
    font-size: 22px;
    line-height: 28px;
  }
  .careers-page .application-header-icon {
    width: 52px;
    min-width: 52px;
    height: 52px;
  }
  .careers-page .application-header-icon img {
    width: 26px;
    height: 30px;
  }
  .careers-page .upload-icon-circle {
    width: 40px;
    height: 40px;
  }
  .careers-page .upload-icon-circle img {
    width: 18px;
    height: 18px;
  }
}

/* Contact hero: exact 416px band (QA). Scoped so about/services keep shared padding. */
.main-content-contact .hero.contact-bg {
  height: 416px;
  min-height: 416px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 56px;
  overflow: hidden;
}
.main-content-contact .hero.contact-bg .hero-content {
  padding-top: 0;
  padding-bottom: 0;
}

.main-content-about .hero,
.main-content-services-main .hero {
  min-height: 416px;
  display: flex;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 70px;
}
.main-content-contact .hero-title,
.main-content-about .hero-title,
.main-content-services-main .hero-title {
  font: 55px/63px "Inter-Bold", sans-serif;
  color: #000;
}
.main-content-contact .hero::before,
.main-content-about .hero::before,
.main-content-services-main .hero::before,
.product-mn-cnt .prod::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.72) 42%, rgba(255, 255, 255, 0.15) 70%, transparent 100%);
}
.main-content-contact .hero-content,
.main-content-about .hero-content,
.main-content-services-main .hero-content,
.product-mn-cnt .prod-content {
  position: relative;
  z-index: 2;
  text-align: left;
}
.main-content-contact .hero-title,
.main-content-about .hero-title,
.main-content-services-main .hero-title,
.product-mn-cnt .prod-title,
.careers-page .hero-title {
  display: block;
  text-align: left;
}

/* Hide desktop-only hero line breaks on small screens so titles reflow cleanly */
@media screen and (max-width: 767px) {
  br.ban-hide {
    display: none;
  }
}

.main-content-contact .card-desc p,
.main-content-contact .card-desc a {
  font: 16px/24px "Inter-Regular", sans-serif;
  color: #000;
}
.main-content-contact .card-heading {
  font: 23px/32px "Inter-SemiBold", sans-serif;
  color: #000;
}
.main-content-contact .flag-name {
  font: 15px/22px "Inter-Bold", sans-serif;
}
.main-content-contact .card-desc a:hover {
  color: #ff3366;
}

.main-content-contact .locations-empty {
  display: block;
  width: 100%;
  text-align: center;
  padding: 2rem 1rem;
  margin: 0 auto;
}

.contact .contact_in .lft .cont_img img {
  width: 100%;
  max-width: 833px;
  height: 555px;
  object-fit: cover;
}

.locations-section .uk-office-flex .map-card2,
.locations-section .map-card.map-wide {
  width: 80%;
}
.locations-section .uk-office-flex .info-card {
  width: calc(20% - 20px);
  min-width: 180px;
}

.contact .contact_in .ryt .frm .inp_row:not(:last-child) .inp label {
  font: 15px/22px "Inter-SemiBold", sans-serif;
  color: #000;
}
.contact .contact_in .ryt .frm .inp_row:not(:last-child) .inp input,
.contact .contact_in .ryt .frm .inp_row:not(:last-child) .inp select,
.contact .contact_in .ryt .frm .inp_row:not(:last-child) .inp textarea {
  font: 15px/22px "Inter-Regular", sans-serif;
  color: #000;
}

@media screen and (max-width: 1199px) {
  .locations-section .uk-office-flex .map-card2,
  .locations-section .map-card.map-wide {
    width: 100%;
  }
  .locations-section .uk-office-flex .info-card {
    width: calc(33.33% - 14px);
  }
}

@media screen and (max-width: 991px) {
  .main-content-contact .hero.contact-bg {
    height: auto;
    min-height: 300px;
    max-height: none;
    padding: 80px 0 48px;
  }
  .main-content-about .hero,
  .main-content-services-main .hero {
    min-height: 300px;
    padding: 80px 0 48px;
  }
  /* Expand past 60% hero column so titles don't cramped-wrap beside the bg art */
  .main-content-contact .hero-content,
  .main-content-about .hero-content,
  .main-content-services-main .hero-content,
  .product-mn-cnt .prod-content {
    max-width: 100%;
    padding-right: 12px;
    text-align: left;
  }
  .main-content-about .container-in,
  .main-content-contact .container-in,
  .main-content-services-main .ser-container,
  .product-mn-cnt .prod .container,
  .careers-page .container {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }
  .main-content-contact .hero-title,
  .main-content-about .hero-title,
  .main-content-services-main .hero-title {
    font-size: 36px;
    line-height: 44px;
    text-align: left;
  }
  .main-content-contact .contact .contact_in .ryt strong {
    display: block;
    text-align: left;
    font-size: 32px;
    line-height: 40px;
  }
  .contact .contact_in {
    flex-direction: column-reverse;
    gap: 28px;
  }
  .contact .contact_in .lft,
  .contact .contact_in .ryt {
    width: 100%;
    padding-right: 0;
  }
  .contact .contact_in .lft .cont_img {
    text-align: center;
  }
  .contact .contact_in .lft .cont_img img {
    max-width: 100%;
    height: 360px;
    margin: 0 auto;
  }
  .main-content-contact .locations-section .head-office-flex,
  .main-content-contact .locations-section .uk-office-flex {
    justify-content: center;
  }
  .main-content-contact .locations-section .flag-pill {
    margin-left: auto;
    margin-right: auto;
  }
  .main-content-contact .locations-empty {
    text-align: center;
  }
  .locations-section .info-card,
  .locations-section .info-card1,
  .locations-section .info-card2,
  .locations-section .info-card3 {
    text-align: left;
  }
}

@media screen and (max-width: 575px) {
  .main-content-contact .hero-title,
  .main-content-about .hero-title,
  .main-content-services-main .hero-title {
    font-size: 28px;
    line-height: 34px;
  }
  .contact .contact_in .lft .cont_img img {
    height: 220px;
  }
  .main-content-contact .hero.contact-bg {
    height: auto;
    min-height: 240px;
    max-height: none;
    padding: 64px 0 36px;
  }
  .main-content-about .hero,
  .main-content-services-main .hero {
    min-height: 240px;
    padding: 64px 0 36px;
  }
  .locations-section {
    padding: 40px 0;
  }
  .contact {
    padding: 48px 0 60px;
  }
  .main-content-contact .locations-section .info-card1,
  .main-content-contact .locations-section .info-card2,
  .main-content-contact .locations-section .info-card3,
  .main-content-contact .locations-section .info-card,
  .main-content-contact .locations-section .map-card {
    margin-left: auto;
    margin-right: auto;
  }
}

.main-content-about .ind .ind_prnt .rgt h1 {
  font: 40px/48px "Inter-Bold", sans-serif;
  color: #000;
  text-align: left;
}
.main-content-about .ind .ind_prnt .rgt h1 span {
  display: block;
  color: #ff3366;
}
.main-content-about .ind .ind_prnt .rgt p {
  text-align: left;
  font: 16px/26px "Inter-Regular", sans-serif;
  color: #000;
}
.main-content-about .ind .ind_prnt .lft img {
  width: 100%;
  max-width: 578px;
  height: 552px;
  object-fit: contain;
}
.main-content-about .hm_sli .hm_sli_in h2 {
  text-align: center;
}
.main-content-about .hm_sli .hm_sli_in .cus_sy .cus_slider .swiper-slide .cust_in {
  text-align: left;
}
.main-content-about .hm_sli .hm_sli_in .cus_sy .cus_slider .swiper-slide .cust_in .cust_tp {
  max-height: 130px;
  overflow-y: auto;
}
.main-content-about .hm_sli .hm_sli_in .cus_sy .cus_slider .swiper-slide .cust_in .cust_tp p {
  text-align: left;
}
.main-content-about .stat .stat_prnt .card_grp .crd1s {
  text-align: center;
}

@media screen and (max-width: 991px) {
  /* Stack intro earlier so centered copy isn't cramped beside the illustration */
  .main-content-about .ind .ind_prnt {
    flex-direction: column;
    align-items: center;
  }
  .main-content-about .ind .ind_prnt .lft,
  .main-content-about .ind .ind_prnt .rgt {
    width: 100%;
  }
  .main-content-about .ind .ind_prnt .lft {
    text-align: center;
  }
  .main-content-about .ind .ind_prnt .lft img {
    max-width: 420px;
    height: 400px;
    margin: 0 auto;
  }
  .main-content-about .ind .ind_prnt .rgt {
    padding: 24px 12px 0;
  }
  .main-content-about .ind .ind_prnt .rgt h1,
  .main-content-about .ind .ind_prnt .rgt p {
    text-align: center;
    padding-right: 0;
  }
}

@media screen and (max-width: 575px) {
  .main-content-about .ind .ind_prnt .lft img {
    max-width: 100%;
    height: 260px;
  }
  .main-content-about .ind .ind_prnt .rgt {
    padding: 16px 0 0;
  }
  .main-content-about .ind .ind_prnt .rgt h1 {
    font-size: 28px;
    line-height: 34px;
  }
  .main-content-about .stat {
    padding: 36px 0;
  }
  .main-content-about .ind {
    padding: 12px 0 40px;
  }
  .main-content-contact .contact .contact_in .ryt {
    padding: 18px 16px;
  }
  .main-content-contact .contact .contact_in .ryt strong {
    font-size: 26px;
    line-height: 32px;
  }
}

.product-mn-cnt .prod {
  min-height: 416px;
  display: flex;
  align-items: center;
  padding-top: 120px;
  padding-bottom: 70px;
}
.product-mn-cnt .prod-title {
  font: 55px/63px "Inter-Bold", sans-serif;
  color: #000;
}
.product-mn-cnt .prdts .prdts-dtl .p-lft > span {
  font: 15px/20px "Inter-Bold", sans-serif;
}
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-txt b {
  color: #ff3366;
}
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-txt,
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-wrk {
  max-width: 801px;
}
.product-mn-cnt .prdts .prdts-dtl .p-ryt ul li {
  padding-left: 34px;
  background-position: top 5px left 4px;
}
.product-mn-cnt .prdts .prdts-dtl .p-lft .p-wrk ul li img {
  display: block;
  opacity: 1;
}

@media screen and (max-width: 991px) {
  .product-mn-cnt .prod {
    min-height: 300px;
    padding: 90px 0 48px;
  }
  .product-mn-cnt .prod-title {
    font-size: 36px;
    line-height: 44px;
    text-align: left;
  }
  .product-mn-cnt .prdts .prdts-dtl .p-lft,
  .product-mn-cnt .prdts .prdts-dtl .p-ryt {
    text-align: left;
  }
  .product-mn-cnt .prdts .prdts-dtl .p-lft .p-wrk ul li img {
    width: 48px;
    height: 42px;
  }
}

@media screen and (max-width: 575px) {
  .product-mn-cnt .prod {
    min-height: 240px;
    padding: 70px 0 36px;
  }
  .product-mn-cnt .prod-title {
    font-size: 28px;
    line-height: 34px;
  }
  .product-mn-cnt .prdts .prdts-dtl {
    padding: 20px 16px;
  }
  .product-mn-cnt .prdts .prdts-dtl .p-lft .p-wrk ul li img {
    width: 40px;
    height: 36px;
  }
}

.services-list .service-card .card-title-col .card-title::before {
  bottom: -14px;
}
.services-list .service-card .card-title-col .title-underline {
  width: 47px;
  height: 4px;
  margin-top: 14px;
  background: var(--card-color, #ff2e59);
  border-radius: 2px;
}
.services-list .service-card .card-title-col:has(.title-underline) .card-title::before {
  content: none;
}
.services-list .service-card .card-features .feature-list li {
  align-items: flex-start;
  font: 17px/25px "Inter-Regular", sans-serif;
}
.services-list .service-card .card-features .feature-list li .check-icon {
  margin-top: 3px;
  flex-shrink: 0;
  stroke: #ff3366;
}
.services-list .service-card .card-title-col {
  width: 28%;
}
.services-list .service-card .card-features {
  width: 68%;
}
.services-list .service-card .card-icon-wrapper .card-icon svg {
  stroke: #fff;
  fill: none;
}

@media screen and (max-width: 1199px) {
  .services-list .service-card .card-title-col {
    width: 30%;
  }
  .services-list .service-card .card-features {
    width: 66%;
  }
}

@media screen and (max-width: 991px) {
  .services-list .service-card .card-icon-wrapper .card-icon {
    min-width: 88px;
    height: 88px;
  }
  .services-list .service-card .card-icon-wrapper .card-icon svg {
    width: 36px;
    height: 36px;
  }
}

@media screen and (max-width: 767px) {
  .services-list .service-card .card-title-col,
  .services-list .service-card .card-features {
    width: 100%;
  }
  .services-list .service-card .card-title-col {
    text-align: left;
  }
  .services-list .service-card .card-features .feature-list li {
    width: 100%;
    padding-right: 0;
    text-align: left;
  }
  .main-content-services-main .hero-title {
    text-align: left;
  }
}

.home-foot .foot-logo img {
  display: block;
  max-width: 180px;
  height: auto;
}
.home-foot .footer-links a:hover,
.home-foot .foot-link a:hover {
  color: #ff3366;
}


/* Asterisk class used by careers/contact forms */
.req,
.req-ast {
  color: #ff3366;
  margin-left: 3px;
  font-weight: 700;
}

.main-content-contact .location-link {
  color: inherit;
  text-decoration: none;
}
.main-content-contact .location-link:hover p {
  color: #ff3366;
}

.resume-upload-box .resume-file-input { z-index: 1; }
.resume-upload-box .resume-clear-btn { z-index: 5; pointer-events: auto; }

/* —— FAQ remaining (doc #42, #45, #46) —— */
.faqPage .hero-section .hero-container .hero-content .breadcrumb {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  position: relative;
  z-index: 2;
}
.faqPage .faq-section .section-header .category-tabs-wrapper {
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.faqPage .hero-section .hero-container .hero-graphic .graphic-wrapper .person-circle-frame .hero-person-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* —— Service detail remaining (doc #38–#40) —— */
.serv-det-mn-cnt .serv_det_banr .ser_in .ryt img,
.serv-det-mn-cnt .serv_det_tw .ser_in .lft img,
.serv-det-mn-cnt .serv_det_th .ser_in .ryt img,
.serv-det-mn-cnt .serv_det_fr .ser_in .lft img {
  width: 589px;
  max-width: 100%;
  height: 493px;
  object-fit: cover;
}
.serv-det-mn-cnt .ser_in {
  padding-left: 12px;
  padding-right: 12px;
}
@media screen and (max-width: 991px) {
  .serv-det-mn-cnt .serv_det_banr .ser_in .ryt img,
  .serv-det-mn-cnt .serv_det_tw .ser_in .lft img,
  .serv-det-mn-cnt .serv_det_th .ser_in .ryt img,
  .serv-det-mn-cnt .serv_det_fr .ser_in .lft img {
    width: 80%;
    max-width: 80%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* —— Top nav baseline (shared with nav-dropdown.css) —— */
header .head-flx .rgt-head .hd-rgt > li,
header .head-flx .hd-rgt > li {
  display: flex;
  align-items: center;
  line-height: 0;
}
header .head-flx .rgt-head .hd-rgt > li > a,
header .head-flx .hd-rgt > li > a {
  display: inline-flex !important;
  align-items: center;
  line-height: 24px !important;
  vertical-align: middle;
}

/* —— Home remaining (doc #24 link brand color in body copy) —— */
.home-cnt .contact .frm .frm_chk label p a,
.home-cnt .wte-dec p a,
.home-cnt .soft_prnt p a,
.home-cnt .ban-cont p a {
  color: #ff3366;
}
.home-cnt .contact .frm .frm_chk label p a:hover,
.home-cnt .wte-dec p a:hover,
.home-cnt .soft_prnt p a:hover,
.home-cnt .ban-cont p a:hover {
  color: #0c1a63;
}