/* ==========================================================================
   gpi.css — Global Pharma extracted inline styles
   --------------------------------------------------------------------------
   One shared stylesheet holding the CSS that used to live inline (in <style>
   blocks and static style="" attributes) across the public pages. Loaded on
   every page via partials/head.php, and organised into per-page sections
   below. Class names are page-unique, so the sections don't collide.

   NOTE: url() paths here are relative to THIS file (assets/css/), so image
   references use ../img/… instead of the assets/img/… used inside the pages.

   Dynamic inline styles (values produced by PHP/DB at runtime, e.g. hero
   slide backgrounds or map marker positions) intentionally stay inline in
   the pages and are NOT moved here.
   ========================================================================== */

/* ==========================================================================
   PAGE: index.php
   ========================================================================== */

/* --- What We Do: product cards (was inline <style> #1) ------------------- */
.we-do-card .card-content {
  display: block;
  text-decoration: none;
  color: inherit;
}
.we-do-card .card-thumb a {
  display: block;
  line-height: 0;
}
.we-do-card .card-thumb a img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.we-do-card {
  cursor: pointer;
}

/* --- About / Notable Recognition collage (was inline <style> #2) --------- */
.ntr-section .container {
  max-width: 1240px;
}
.ntr-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 58px;
  align-items: center;
}
/* left: image collage */
.ntr-collage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.ntr-cell {
  border-radius: 16px;
  overflow: hidden;
  background: #dfe7f1;
  aspect-ratio: 1/1;
}
.ntr-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ntr-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  background: #0e2a4f;
  color: #fff;
  border: 6px solid #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 18px 42px rgba(14, 42, 79, 0.32);
}
.ntr-badge .num {
  font-family: var(--outfit-font);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
}
.ntr-badge .lbl {
  font-size: 10px;
  letter-spacing: 1.2px;
  margin-top: 6px;
  text-transform: uppercase;
  opacity: 0.92;
  line-height: 1.4;
}
/* right: content */
.ntr-content .common-title h2 {
  font-size: 46px;
  line-height: 1.12;
}
.ntr-accent {
  color: #2d7cd9;
}
.ntr-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
@media (max-width: 991px) {
  .ntr-wrap {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ntr-content .common-title h2 {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  .ntr-collage {
    gap: 10px;
  }
  .ntr-badge {
    width: 100px;
    height: 100px;
  }
  .ntr-badge .num {
    font-size: 26px;
  }
}

/* --- Homepage: separate Events and Knowledge sections ------------------- */
.idx-events-section {
  position: relative;
  background: #eaf7fb url(../img/bg/latest-blog-bg.webp) center / cover
    no-repeat;
}
.idx-events-section::before {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(232, 248, 251, 0.2);
}
.idx-events-section .container {
  position: relative;
  z-index: 1;
}
.idx-knowledge-section {
  position: relative;
  background: #f2f5f9;
}

.idx-knowledge-section .container {
  position: relative;
  z-index: 1;
}
.idx-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 42px;
}
.idx-section-heading .common-title {
  margin-bottom: 0;
}
.idx-section-heading .common-title h2 {
  font-size: 48px;
  line-height: 1.15;
}
.idx-event-card,
.idx-knowledge-card {
  display: flex;
  height: 100%;
  flex-direction: column;
}
.idx-event-card {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 42px rgba(14, 42, 79, 0.1);
}
.idx-event-card .thumb,
.idx-knowledge-card .thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.idx-event-card .thumb img,
.idx-knowledge-card .thumb img {
  display: block;
  width: 100%;
  height: 250px;
  object-fit: cover;
}
.idx-event-card .card-content,
.idx-knowledge-card .content {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.idx-event-card .event-card-top .top-left {
  align-items: center;
  gap: 10px;
}
.idx-event-card .event-card-top .top-left > img {
  width: 18px;
  height: 18px;
}
.idx-event-card .event-date h3 {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.idx-event-card .event-date h3 span {
  font-size: 10px;
  line-height: inherit;
}
.idx-event-card .event-card-middle {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.idx-event-card .event-card-middle h2 {
  font-size: 23px;
  line-height: 1.3;
}
.idx-event-card .event-btn {
  margin-top: auto;
}
.idx-knowledge-card {
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 16px 42px rgba(14, 42, 79, 0.08);
}
.idx-knowledge-card .content {
  padding: 28px;
}
.idx-knowledge-card .content-bottom {
  margin-top: auto;
}
.idx-knowledge-card .title h3 {
  font-size: 24px;
  line-height: 1.3;
}
/* play button overlay on knowledge thumb */
.idx-know-thumb {
  position: relative;
}
.idx-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #2d7cd9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  box-shadow: 0 10px 30px rgba(10, 31, 61, 0.25);
  transition: 0.2s;
}
.idx-play:hover {
  background: #2d7cd9;
  color: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}
@media (max-width: 991px) {
  .idx-section-heading .common-title h2 {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .idx-section-heading {
    align-items: start;
    flex-direction: column;
    margin-bottom: 32px;
  }
  .idx-section-heading .common-title h2 {
    font-size: 34px;
  }
  .idx-event-card .thumb img,
  .idx-knowledge-card .thumb img {
    height: 220px;
  }
}

/* --- Static style="" attributes moved out of the markup ----------------- */
/* --- Homepage About: editorial copy + four-image community collage -------- */
.idx-about-section {
  overflow: hidden;
  padding-top: 72px !important;
  padding-bottom: 42px !important;
  background: #fff;
}

.idx-about-section .container {
  max-width: 1240px;
}

.idx-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(620px, 1.1fr);
  gap: clamp(50px, 5.5vw, 105px);
  align-items: center;
}

.idx-about-copy {
  position: relative;
  z-index: 2;
  padding-left: 10px;
}

.idx-about-eyebrow {
  margin-bottom: 30px;
}

.idx-about-eyebrow img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.idx-about-eyebrow span {
  color: #082c57;
  font-size: 20px;
  font-weight: 600;
}

.idx-about-title {
  max-width: 610px;
  margin-bottom: 25px;
}

.idx-about-title h2 {
  color: #052b57;
  font-size: 46px;
  font-weight: 600;
  line-height: 1.12;
}

.idx-about-intro {
  max-width: 610px;
}

.idx-about-intro h6,
.idx-about-intro p {
  color: #4b596a;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}

.idx-about-intro h6 {
  margin-bottom: 1px;
}

.idx-about-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  max-width: 650px;
  margin-top: 40px;
}

.idx-about-benefit {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.idx-about-benefit-icon,
.idx-about-statement-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: #1677ff;
  border: 1px solid #73ddf5;
  border-radius: 50%;
  background: #fff;
}

.idx-about-benefit-icon {
  width: 92px;
  height: 92px;
  font-size: 35px;
}

.idx-about-benefit-copy {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.idx-about-benefit-copy strong {
  color: #062b57;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.idx-about-benefit-copy small {
  color: #5b6877;
  font-size: 16px;
  line-height: 1.55;
}

.idx-about-btn {
  margin-top: 42px;
}

.idx-about-collage {
  position: relative;
  min-height: 655px;
}

.idx-about-photo {
  position: absolute;
  overflow: hidden;
  margin: 0;
  border-radius: 34px;
  background: #dceef5;
  box-shadow: 0 18px 45px rgba(4, 43, 87, 0.08);
  animation: idx-about-float 6s ease-in-out infinite;
  transition: box-shadow 0.35s ease;
}

.idx-about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s cubic-bezier(0.22, 0.76, 0.25, 1);
}

.idx-about-photo:hover {
  z-index: 8;
  box-shadow: 0 24px 52px rgba(4, 43, 87, 0.16);
  animation-play-state: paused;
}

.idx-about-photo:hover img {
  transform: scale(1.035);
}

.idx-about-photo-care {
  animation-delay: -1.4s;
  animation-duration: 6.6s;
}

.idx-about-photo-consultation {
  animation-delay: -3.1s;
  animation-duration: 7.2s;
}

.idx-about-photo-pharmacy {
  animation-delay: -4.6s;
  animation-duration: 6.8s;
}

@keyframes idx-about-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -7px, 0);
  }
}

.idx-about-photo-main {
  top: 0;
  left: 30%;
  z-index: 2;
  width: 59%;
  height: 442px;
}

.idx-about-photo-care {
  top: 292px;
  left: 0;
  z-index: 3;
  width: 28%;
  height: 235px;
  border-radius: 27px;
}

.idx-about-photo-consultation {
  right: 23%;
  bottom: 0;
  z-index: 4;
  width: 29%;
  height: 225px;
  border-radius: 27px;
}

.idx-about-photo-pharmacy {
  top: 278px;
  right: 0;
  z-index: 5;
  width: 34%;
  height: 275px;
  border-radius: 27px;
}

.idx-about-shape {
  position: absolute;
  border-radius: 22px;
  background: linear-gradient(145deg, #dff7ff, #b7ecfb);
}

.idx-about-shape-left {
  top: 135px;
  left: 8%;
  width: 120px;
  height: 125px;
}

.idx-about-shape-right {
  top: 0;
  right: 3%;
  width: 128px;
  height: 132px;
}

.idx-about-dots {
  position: absolute;
  width: 116px;
  height: 116px;
  opacity: 0.75;
  background-image: radial-gradient(#53dff7 2px, transparent 2px);
  background-size: 20px 20px;
}

.idx-about-dots-top {
  top: 0;
  left: 8%;
}

.idx-about-dots-bottom {
  right: 2%;
  bottom: 0;
}

.idx-about-statement {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4vw, 65px);
  margin-top: 55px;
  padding: 28px 50px;
  border-radius: 27px;
  background: linear-gradient(105deg, #f3faff 0%, #edf7ff 48%, #f7fbff 100%);
}

.idx-about-statement-icon {
  width: 126px;
  height: 126px;
  color: #0752b5;
  border-color: #bbdef8;
  font-size: 52px;
  box-shadow: 0 8px 25px rgba(9, 83, 177, 0.08);
}

.idx-about-statement h4 {
  max-width: 1230px;
  margin: 0;
  color: #082c57;
  font-size: clamp(22px, 1.65vw, 31px);
  font-weight: 400;
  line-height: 1.45;
}

@media (max-width: 1399px) {
  .idx-about-grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(540px, 1.08fr);
    gap: 50px;
  }

  .idx-about-title h2 {
    font-size: 46px;
  }

  .idx-about-intro h6,
  .idx-about-intro p {
    font-size: 16px;
  }

  .idx-about-collage {
    min-height: 590px;
  }

  .idx-about-photo-main {
    height: 395px;
  }

  .idx-about-photo-care {
    top: 265px;
    height: 210px;
  }

  .idx-about-photo-pharmacy {
    top: 250px;
    height: 250px;
  }

  .idx-about-photo-consultation {
    height: 205px;
  }
}

@media (max-width: 1199px) {
  .idx-about-grid {
    grid-template-columns: 1fr;
  }

  .idx-about-copy,
  .idx-about-title,
  .idx-about-intro,
  .idx-about-benefits {
    max-width: 800px;
  }

  .idx-about-collage {
    width: min(100%, 800px);
    margin: 0 auto;
  }
}

@media (max-width: 991px) {
  .idx-about-title h2 {
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .idx-about-section {
    padding-top: 60px !important;
    padding-bottom: 36px !important;
  }

  .idx-about-copy {
    padding-left: 0;
  }

  .idx-about-eyebrow {
    margin-bottom: 20px;
  }

  .idx-about-eyebrow span {
    font-size: 16px;
  }

  .idx-about-title h2 {
    font-size: 36px;
  }

  .idx-about-intro h6,
  .idx-about-intro p {
    font-size: 16px;
    line-height: 1.65;
  }

  .idx-about-benefits {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 32px;
  }

  .idx-about-benefit-icon {
    width: 72px;
    height: 72px;
    font-size: 28px;
  }

  .idx-about-btn {
    margin-top: 34px;
  }

  .idx-about-collage {
    min-height: 520px;
  }

  .idx-about-photo {
    border-radius: 22px;
  }

  .idx-about-photo-main {
    left: 17%;
    width: 70%;
    height: 310px;
  }

  .idx-about-photo-care {
    top: 235px;
    width: 32%;
    height: 180px;
  }

  .idx-about-photo-pharmacy {
    top: 220px;
    width: 35%;
    height: 190px;
  }

  .idx-about-photo-consultation {
    right: 26%;
    width: 34%;
    height: 170px;
  }

  .idx-about-shape-left,
  .idx-about-shape-right {
    width: 80px;
    height: 85px;
  }

  .idx-about-dots {
    width: 80px;
    height: 80px;
    background-size: 16px 16px;
  }

  .idx-about-statement {
    align-items: flex-start;
    gap: 20px;
    margin-top: 35px;
    padding: 25px;
  }

  .idx-about-statement-icon {
    width: 70px;
    height: 70px;
    font-size: 30px;
  }

  .idx-about-statement h4 {
    font-size: 18px;
  }
}

@media (max-width: 479px) {
  .idx-about-title h2 {
    font-size: 36px;
  }

  .idx-about-collage {
    min-height: 440px;
  }

  .idx-about-photo-main {
    height: 260px;
  }

  .idx-about-photo-care {
    top: 198px;
    height: 145px;
  }

  .idx-about-photo-pharmacy {
    top: 188px;
    height: 155px;
  }

  .idx-about-photo-consultation {
    height: 140px;
  }

  .idx-about-statement {
    flex-direction: column;
  }
}
/* section background images (static assets) */
.what-we-do-section-2 {
  background-image: url(../img/bg/what-we-do-bg-2.webp);
}
.ntr-section {
  background: #fff;
}
.completed-project-top {
  background-image: url(../img/bg/completed-project-bg.webp);
}
/* completed-project card thumb height */
.completed-project-slider-active .project-card .thumb {
  height: 400px;
}

/* ==========================================================================
   PAGE: about.php
   ========================================================================== */

/* --- why-us section background (was static style="" on the section) ------ */
.why-us-section-6 {
  background-image:
    url(../img/bg/why-us-bg.webp), url(../img/bg/who-we-are-bg.webp);
}

/* Keep admin-uploaded Who We Are photos inside the original design slots. */
.why-us-section-6 .who-we-are-media {
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 10px;
  background: #eef4f8;
}
.why-us-section-6 .thumb .thumb-1 .who-we-are-media img,
.why-us-section-6 .thumb .thumb-2 .who-we-are-media img,
.why-us-section-6 .thumb .thumb-3 .who-we-are-media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}
.why-us-section-6 .who-we-are-media-1 {
  width: min(399px, 100%);
  aspect-ratio: 399 / 458;
  margin-left: auto;
}
.why-us-section-6 .who-we-are-media-2 {
  width: 318px;
  aspect-ratio: 318 / 394;
  border: 5px solid var(--white-color);
}
.why-us-section-6 .who-we-are-media-3 {
  width: 328px;
  aspect-ratio: 328 / 205;
}
@media (min-width: 1200px) and (max-width: 1399px) {
  .why-us-section-6 .who-we-are-media-1 {
    width: 60%;
  }
  .why-us-section-6 .who-we-are-media-2 {
    width: 70%;
  }
  .why-us-section-6 .who-we-are-media-3 {
    width: 75%;
    margin-left: auto;
  }
}
@media (max-width: 767px) {
  .why-us-section-6 .who-we-are-media-1,
  .why-us-section-6 .who-we-are-media-2,
  .why-us-section-6 .who-we-are-media-3 {
    width: 100%;
  }
}

/* --- Journey timeline (was inline <style> #1) --------------------------- */
.ab-journey-section {
  background: #f3f7fc;
  font-family: var(--dm-sans-font);
}
.ab-journey-section button,
.ab-journey-section input {
  font-family: var(--dm-sans-font);
}
.ab-jr-wrap {
  display: flex;
  gap: 55px;
  align-items: center;
  flex-wrap: wrap;
}
.ab-jr-left {
  flex: 1 1 430px;
  min-width: 300px;
}
.ab-jr-right {
  flex: 1 1 430px;
  min-width: 300px;
}
/* ---- left visual ---- */
.ab-jr-visual {
  position: relative;
  padding-bottom: 46px;
  padding-right: 30px;
}
.ab-jr-bigcard {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, #9eb9d8, #7f9fc6);
  aspect-ratio: 16/11;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ab-jr-bigcard > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.ab-jr-bigcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(14, 42, 79, 0.32) 0%,
    rgba(14, 42, 79, 0) 28%
  );
  pointer-events: none;
}
.ab-jr-badge {
  position: absolute;
  top: 22px;
  left: 22px;
  background: #1b4ba3;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  padding: 8px 18px;
  border-radius: 12px;
  z-index: 2;
  box-shadow: 0 10px 22px rgba(27, 75, 163, 0.35);
}
.ab-jr-smallcard {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 44%;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #8aa6c8, #6c8bb3);
  aspect-ratio: 16/12;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 6px solid #f3f7fc;
  box-shadow: 0 18px 40px rgba(40, 70, 120, 0.22);
}
.ab-jr-smallcard > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
/* ---- right content ---- */
.ab-jr-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e6f0fb;
  color: #1b4ba3;
  font-weight: 600;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 30px;
  margin-bottom: 22px;
}
.ab-jr-pill i {
  font-size: 12px;
}
.ab-jr-title {
  font-family: var(--outfit-font);
  color: #0e2a4f;
  font-weight: 800;
  font-size: 42px;
  line-height: 1.14;
  margin-bottom: 34px;
}
/* ---- timeline ---- */
.ab-tl {
  position: relative;
  margin-bottom: 30px;
}
.ab-tl-track {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.ab-tl-track::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  height: 2px;
  background: #dde6f1;
}
.ab-tl-item {
  position: relative;
  text-align: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  flex: 1;
}
.ab-tl-dot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e3eaf4;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: 0.25s;
}
.ab-tl-dot::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  transition: 0.25s;
}
.ab-tl-item.active .ab-tl-dot {
  background: #0e2a4f;
  box-shadow: 0 0 0 5px rgba(14, 42, 79, 0.12);
}
.ab-tl-item.active .ab-tl-dot::after {
  opacity: 1;
}
.ab-tl-year {
  font-size: 13px;
  color: #8090a6;
  font-weight: 600;
}
.ab-tl-item.active .ab-tl-year {
  color: #0e2a4f;
}
/* ---- content card ---- */
.ab-jr-card {
  background: #fff;
  border-radius: 16px;
  padding: 26px 30px;
  margin-bottom: 30px;
  box-shadow: 0 20px 50px rgba(20, 50, 90, 0.07);
}
.ab-jr-cardhead {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.ab-jr-yearpill {
  background: #e6f0fb;
  color: #1b4ba3;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 8px;
}
.ab-jr-cardname {
  color: #0e2a4f;
  font-weight: 700;
  font-size: 17px;
}
.ab-jr-card p {
  color: #5c6b80;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}
/* ---- button ---- */
.ab-jr-btn {
  font-family: var(--albert-sans-font);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #0e2a4f;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 12px;
  text-decoration: none;
  transition: 0.25s;
}
.ab-jr-btn:hover {
  background: #1b4ba3;
  color: #fff;
}
.ab-jr-btn i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #1b6fe0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
@media (max-width: 991px) {
  .ab-jr-title {
    font-size: 34px;
  }
}
@media (max-width: 575px) {
  .ab-jr-title {
    font-size: 27px;
  }
  .ab-jr-wrap {
    gap: 34px;
  }
}

/* --- About: achievement coverflow --------------------------------------- */
.ab-ach-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 75% 48%,
      rgba(66, 142, 255, 0.08),
      transparent 35%
    ),
    #fff;
  font-family: var(--dm-sans-font);
}
.ab-ach-section::after {
  position: absolute;
  bottom: 7%;
  left: -4%;
  width: 34%;
  height: 110px;
  background-image: radial-gradient(
    circle,
    rgba(28, 110, 230, 0.32) 1px,
    transparent 1.5px
  );
  background-size: 10px 10px;
  content: "";
  opacity: 0.55;
  transform: rotate(-8deg);
  pointer-events: none;
  mask-image: linear-gradient(90deg, #000, transparent);
}
.ab-ach-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.7fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
.ab-ach-left {
  max-width: 410px;
}
.ab-ach-right {
  min-width: 300px;
}
.ab-ach-label {
  color: #1260cc;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.ab-ach-title {
  font-family: var(--outfit-font);
  color: #082554;
  font-weight: 700;
  font-size: clamp(36px, 4vw, 58px);
  line-height: 1.08;
  letter-spacing: -1.5px;
  margin-bottom: 28px;
}
.ab-ach-sub {
  color: #45546c;
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 34px;
}
.ab-ach-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  padding: 9px 12px 9px 24px;
  border-radius: 999px;
  background: #0d5bd7;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(13, 91, 215, 0.2);
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}
.ab-ach-btn i {
  display: grid;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  place-items: center;
}
.ab-ach-btn:hover {
  background: #0949ad;
  color: #fff;
  transform: translateY(-2px);
}
.ab-ach-slider {
  position: relative;
  min-height: 570px;
  user-select: none;
  touch-action: pan-y;
}
.ab-ach-stage {
  position: relative;
  height: 520px;
  perspective: 1400px;
  cursor: grab;
}
.ab-ach-stage:active {
  cursor: grabbing;
}
.ab-ach-card {
  --ach-x: 0%;
  --ach-z: 0px;
  --ach-rotation: 0deg;
  --ach-scale: 1;
  --ach-opacity: 1;
  --ach-drag: 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(215px, 31vw, 330px);
  height: clamp(390px, 46vw, 510px);
  padding: clamp(20px, 2vw, 30px);
  border: 1px solid #dce5f0;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 22px 45px rgba(19, 46, 82, 0.12);
  text-align: center;
  opacity: var(--ach-opacity);
  transform: translate(-50%, -50%)
    translateX(calc(var(--ach-x) + var(--ach-drag))) translateZ(var(--ach-z))
    rotateY(var(--ach-rotation)) scale(var(--ach-scale));
  transform-origin: center;
  transition:
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease,
    box-shadow 0.4s ease;
  will-change: transform;
}
.ab-ach-stage.is-dragging .ab-ach-card {
  transition: none;
}
.ab-ach-card.is-active {
  z-index: 10;
  border-color: #9cc6ff;
  box-shadow: 0 26px 60px rgba(20, 93, 190, 0.22);
}
.ab-ach-card-image {
  height: 72%;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 12px;
  background: #f4f7fb;
}
.ab-ach-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ab-ach-card h3 {
  max-width: 270px;
  margin: 0 auto;
  color: #082554;
  font-family: var(--outfit-font);
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 600;
  line-height: 1.25;
}
.ab-ach-card p {
  margin: 8px 0 0;
  color: #0d5bd7;
  font-weight: 700;
}
.ab-ach-arrow {
  position: absolute;
  top: 47%;
  z-index: 20;
  display: grid;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  color: #0d5bd7;
  font-size: 21px;
  place-items: center;
  box-shadow: 0 12px 28px rgba(20, 45, 80, 0.17);
  transform: translateY(-50%);
  transition:
    transform 0.2s ease,
    color 0.2s ease;
}
.ab-ach-arrow:hover {
  color: #082554;
  transform: translateY(-50%) scale(1.06);
}
.ab-ach-arrow-prev {
  left: 0;
}
.ab-ach-arrow-next {
  right: 0;
}
.ab-ach-dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.ab-ach-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c8d0dc;
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}
.ab-ach-dot.is-active {
  background: #0d5bd7;
  transform: scale(1.15);
}
@media (max-width: 1199px) {
  .ab-ach-wrap {
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.35fr);
    gap: 28px;
  }
}
@media (max-width: 991px) {
  .ab-ach-wrap {
    grid-template-columns: 1fr;
  }
  .ab-ach-left {
    max-width: 620px;
  }
}
@media (max-width: 575px) {
  .ab-ach-title {
    font-size: 34px;
  }
  .ab-ach-slider {
    min-height: 470px;
  }
  .ab-ach-stage {
    height: 420px;
  }
  .ab-ach-card {
    width: 72vw;
    height: 390px;
    padding: 18px;
  }
  .ab-ach-card-image {
    height: 70%;
  }
  .ab-ach-arrow {
    width: 44px;
    height: 44px;
    border-radius: 15px;
  }
  .ab-ach-arrow-prev {
    left: 0;
  }
  .ab-ach-arrow-next {
    right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-ach-card,
  .ab-ach-arrow,
  .ab-ach-dot {
    transition-duration: 0.01ms;
  }
}

/* --- Testimonial / hospitals stage (was inline <style> #3) -------------- */
.wtb-section {
  background: #fff;
  font-family: var(--dm-sans-font);
}
.wtb-wrap {
  display: flex;
  gap: 55px;
  align-items: center;
  flex-wrap: wrap;
}
.wtb-left {
  flex: 1 1 360px;
  max-width: 400px;
}
.wtb-right {
  flex: 1 1 560px;
  min-width: 300px;
}
/* ---- left ---- */
.wtb-label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #1b4ba3;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 20px;
}
.wtb-label img {
  width: 20px;
  height: 20px;
}
.wtb-title {
  font-family: var(--outfit-font);
  color: #0e2a4f;
  font-weight: 800;
  font-size: 40px;
  line-height: 1.12;
  margin-bottom: 18px;
}
.wtb-q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #1b6fe0;
  color: #fff;
  font-size: 18px;
  vertical-align: middle;
  margin-right: 6px;
}
.wtb-sub {
  color: #5c6b80;
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 30px;
}
.wtb-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid #e2e9f2;
  border-radius: 60px;
  padding: 9px 22px 9px 9px;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(20, 50, 90, 0.07);
  transition: 0.25s;
}
.wtb-btn:hover {
  box-shadow: 0 18px 36px rgba(20, 50, 90, 0.14);
  transform: translateY(-2px);
}
.wtb-btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eef4fc;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.wtb-btn-icon img {
  width: 24px;
  height: 24px;
}
.wtb-btn span {
  font-family: var(--albert-sans-font);
  color: #0e2a4f;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.wtb-btn span i {
  color: #1b6fe0;
  font-size: 13px;
}
/* ---- right card ---- */
.wtb-stage {
  display: flex;
  border-radius: 24px;
  overflow: hidden;
  min-height: 360px;
  box-shadow: 0 30px 60px rgba(14, 42, 79, 0.16);
}
.wtb-panel {
  flex: 0 0 52%;
  position: relative;
  background: linear-gradient(150deg, #1b4ba3, #0e2a4f);
  color: #fff;
  padding: 42px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wtb-panel-name {
  font-family: var(--outfit-font);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 16px;
}
.wtb-panel-text {
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
  line-height: 1.75;
  margin: 0 0 22px;
}
.wtb-panel-foot h6 {
  font-family: var(--outfit-font);
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin: 0 0 5px;
}
.wtb-panel-foot p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  margin: 0;
}
.wtb-panel::after {
  content: "";
  position: absolute;
  right: -13px;
  bottom: 46px;
  width: 26px;
  height: 26px;
  background: #0e2a4f;
  transform: rotate(45deg);
  border-radius: 4px;
}
.wtb-photo {
  flex: 1;
  overflow: hidden;
}
.wtb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.wtb-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 24px;
}
.wtb-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cfdbeb;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: 0.25s;
}
.wtb-dot.active {
  background: #1b6fe0;
  width: 26px;
  border-radius: 6px;
}
@media (max-width: 991px) {
  .wtb-title {
    font-size: 33px;
  }
  .wtb-left {
    max-width: 100%;
  }
}
@media (max-width: 767px) {
  .wtb-stage {
    flex-direction: column;
    min-height: 0;
  }
  .wtb-panel {
    flex: 0 0 auto;
  }
  .wtb-panel::after {
    display: none;
  }
  .wtb-photo {
    height: 240px;
  }
}
@media (max-width: 575px) {
  .wtb-title {
    font-size: 27px;
  }
}
/* ---- trusted strip ---- */
.wtb-trusted {
  background: #fff;
}
.wtb-trusted-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-bottom: 46px;
}
.wtb-trusted-head .ln {
  height: 1px;
  width: 90px;
  background: #dfe7f1;
}
.wtb-trusted-head h3 {
  font-family: var(--outfit-font);
  color: #0e2a4f;
  font-weight: 700;
  font-size: 24px;
  margin: 0;
  text-align: center;
}
.wtb-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.wtb-logos .lg {
  flex: 1 1 0;
  min-width: 120px;
  text-align: center;
}
.wtb-logos img {
  max-width: 160px;
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.85;
  transition: 0.25s;
  filter: saturate(0.95);
}
.wtb-logos .lg:hover img {
  opacity: 1;
}
@media (max-width: 767px) {
  .wtb-trusted-head h3 {
    font-size: 19px;
  }
  .wtb-trusted-head .ln {
    width: 40px;
  }
  .wtb-logos {
    gap: 24px;
  }
  .wtb-logos .lg {
    flex: 1 1 38%;
  }
}

/* --- Collaborating hospital carousels ----------------------------------- */
.abc-collab {
  background: #fff;
  font-family: var(--dm-sans-font);
}
.abc-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 50px;
}
.abc-head h3 {
  font-family: var(--outfit-font);
  color: #0e2a4f;
  font-weight: 800;
  font-size: 34px;
  margin: 0 0 14px;
}
.abc-head p {
  color: #5c6b80;
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}
.abc-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.abc-col {
  background: #f6f9fd;
  border: 1px solid #e6eef5;
  border-radius: 18px;
  padding: 28px 26px;
  outline: none;
}
.abc-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}
.abc-col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--outfit-font);
  color: #1b4ba3;
  font-weight: 700;
  font-size: 18px;
}
.abc-col-title i {
  font-size: 16px;
}
.abc-arrows {
  display: flex;
  gap: 8px;
}
.abc-arrow {
  display: inline-grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  color: #1b4ba3;
  border: 1px solid #d6e3f0;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}
.abc-arrow:hover:not(:disabled),
.abc-arrow:focus-visible {
  color: #fff;
  border-color: #1b4ba3;
  background: #1b4ba3;
  transform: translateY(-2px);
}
.abc-arrow:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}
.abc-slider-viewport {
  overflow: hidden;
  touch-action: pan-y;
}
.abc-logos {
  display: flex;
  gap: 18px;
  transition: transform 0.55s cubic-bezier(0.22, 0.76, 0.25, 1);
  will-change: transform;
}
.abc-logo-page {
  display: grid;
  flex: 0 0 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 12px;
}
.abc-logo {
  display: flex;
  width: 100%;
  min-height: 132px;
  align-items: center;
  justify-content: center;
  padding: 5px 7px;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 14px;
  cursor: zoom-in;
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.abc-logo:hover,
.abc-logo:focus-visible {
  border-color: #b9cbea;
  box-shadow: 0 10px 24px rgba(25, 70, 142, 0.12);
  outline: none;
  transform: translateY(-2px);
}
.abc-logo img {
  max-width: 98%;
  max-height: 112px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.abc-logo-lightbox[hidden] {
  display: none;
}
.abc-logo-lightbox {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 18, 38, 0.78);
  backdrop-filter: blur(5px);
}
.abc-logo-lightbox-panel {
  position: relative;
  display: grid;
  width: min(680px, 92vw);
  min-height: 360px;
  place-items: center;
  padding: 64px 52px 48px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.32);
}
.abc-logo-lightbox-panel img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 55vh;
  object-fit: contain;
}
.abc-logo-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  padding: 0;
  color: #153f83;
  background: #eff4fb;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
}
.abc-logo-lightbox-close:hover,
.abc-logo-lightbox-close:focus-visible {
  color: #fff;
  background: #1b4ba3;
  outline: none;
}
body.abc-lightbox-open {
  overflow: hidden;
}
.abc-dots {
  display: flex;
  min-height: 9px;
  justify-content: center;
  gap: 7px;
  margin-top: 18px;
}
.abc-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cbd9e8;
  cursor: pointer;
  transition:
    width 0.25s ease,
    background-color 0.25s ease;
}
.abc-dot.is-active {
  width: 24px;
  background: #1b6fe0;
}
.abc-dot:focus-visible,
.abc-col:focus-visible {
  outline: 3px solid rgba(27, 111, 224, 0.28);
  outline-offset: 4px;
}
@media (max-width: 991px) {
  .abc-cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
@media (max-width: 575px) {
  .abc-head h3 {
    font-size: 26px;
  }
  .abc-col {
    padding: 22px 18px;
  }
  .abc-logo {
    min-height: 92px;
    padding: 12px 18px;
  }
  .abc-logo-page {
    gap: 10px;
  }
  .abc-logo-lightbox {
    padding: 16px;
  }
  .abc-logo-lightbox-panel {
    min-height: 280px;
    padding: 58px 28px 36px;
  }
}

/* ==========================================================================
   PAGE: contact.php
   ========================================================================== */

.global-presence-section {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.gp-row {
  align-items: flex-start;
}
/* raise the map + location card below it (left column) */
.gp-left-col {
  padding-top: 0;
}
/* The map SVG is a square canvas with big transparent whitespace above & (mostly) below
   the islands. Negative %-margins (relative to column width) crop that whitespace so the
   map sits close to the banner and the location card sits right under the islands. */
.gp-left-col .gp-map-layer {
  margin-top: 0;
  margin-bottom: -36%; /* crop empty canvas below the islands so "Our Location" sits close */
}
.gp-stats-card {
  margin-top: 0;
}
.gp-captcha {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f7fafc;
  border: 1px solid #e2e9f0;
  border-radius: 10px;
  padding: 9px 14px;
}
.gp-captcha label {
  font-size: 13px;
  color: #5a6b7b;
  white-space: nowrap;
  font-weight: 600;
  margin: 0;
}
.gp-captcha input {
  width: 70px !important;
  text-align: center;
  padding: 8px 10px !important;
}
.gp-captcha.bad input {
  border-color: #e0526b !important;
  background: #fff5f6 !important;
}
.gp-form-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.gp-form-foot .gp-send {
  margin: 0;
}

/* ---- left: indonesia map + glowing points ---- */
.gp-map-layer {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.gp-map-img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.95;
}
.gp-points {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Zoom the map and its marker layer together to focus on active locations
   (Sumatra & Java through Kalimantan and Sulawesi). */
.gp-map-img,
.gp-points {
  transform: translate(-3%, -50%) scale(1.667);
  transform-origin: top left;
}
.gp-region {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #2d7cd9;
  font-weight: 700;
  font-size: 8px;
  letter-spacing: 0.5px;
  pointer-events: none;
}
.gp-point {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 4;
  cursor: pointer;
  pointer-events: auto;
}
.gp-dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #2d7cd9;
  box-shadow: 0 0 0 1px rgba(45, 124, 217, 0.16);
  position: relative;
}
.gp-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(45, 124, 217, 0.55);
  animation: gpPulse 2s infinite ease-out;
}
@keyframes gpPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}
.gp-label {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 6.5px;
  font-weight: 600;
  color: #1f3654;
  text-shadow:
    0 1px 2px #fff,
    0 0 2px #fff;
  pointer-events: none;
}
.gp-point.label-left .gp-label {
  left: auto;
  right: 7px;
}
.gp-point .gp-card {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 230px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(10, 31, 61, 0.18);
  padding: 15px 17px;
  opacity: 0;
  visibility: hidden;
  transition: 0.25s ease;
  z-index: 10;
}
.gp-point .gp-card::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #fff;
}
.gp-point:hover .gp-card,
.gp-point:focus-within .gp-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.gp-point:hover,
.gp-point:focus-within {
  z-index: 20;
}
.gp-point:hover .gp-dot {
  background: #ec1c24;
  box-shadow: 0 0 0 5px rgba(236, 28, 36, 0.2);
}
.gp-card-city {
  color: #2d7cd9;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.6px;
  margin-bottom: 7px;
}
.gp-point .gp-card h6 {
  font-size: 13px;
  color: #0a1f3d;
  margin: 0 0 7px;
  font-weight: 700;
}
.gp-point .gp-card p {
  font-size: 11px;
  color: #5a6b7b;
  line-height: 1.5;
  margin: 0 0 5px;
  display: flex;
  gap: 7px;
}
.gp-point .gp-card p:last-child {
  margin-bottom: 0;
}
.gp-point .gp-card p i {
  color: #2d7cd9;
  margin-top: 2px;
}
.gp-point.card-left .gp-card {
  left: auto;
  right: -6px;
  transform: translateX(0) translateY(8px);
}
.gp-point.card-left .gp-card::after {
  left: auto;
  right: 18px;
}
.gp-point.card-left:hover .gp-card,
.gp-point.card-left:focus-within .gp-card {
  transform: translateX(0) translateY(0);
}
.gp-point.card-right .gp-card {
  left: -6px;
  transform: translateX(0) translateY(8px);
}
.gp-point.card-right .gp-card::after {
  left: 18px;
}
.gp-point.card-right:hover .gp-card,
.gp-point.card-right:focus-within .gp-card {
  transform: translateX(0) translateY(0);
}

/* ---- right: content + form ---- */
.gp-content {
  padding-left: 20px;
}
.gp-content .common-subtitle {
  margin-bottom: 14px;
}
.gp-content .gp-title h2 {
  font-size: 40px;
  line-height: 1.15;
  color: #0a1f3d;
  margin-bottom: 16px;
}
.gp-content .gp-divider {
  width: 60px;
  height: 3px;
  background: #2d7cd9;
  margin-bottom: 16px;
}
.gp-content .gp-desc {
  color: #5a6b7b;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.gp-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 26px;
}
.gp-form .full {
  grid-column: 1 / -1;
}
.gp-form input,
.gp-form textarea {
  width: 100%;
  border: 1px solid #e2e9f0;
  border-radius: 10px;
  background: #f7fafc;
  padding: 13px 16px;
  font-size: 14px;
  color: #0a1f3d;
  outline: none;
  transition: 0.2s;
  font-family: inherit;
}
.gp-form input::placeholder,
.gp-form textarea::placeholder {
  color: #9aa8b8;
}
.gp-form input:focus,
.gp-form textarea:focus {
  border-color: #2d7cd9;
  background: #fff;
}
.gp-form textarea {
  resize: vertical;
  min-height: 110px;
}
.gp-send {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #0a1f3d;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  padding: 8px 8px 8px 28px;
  border-radius: 100px;
  transition: 0.25s;
}
.gp-send:hover {
  background: #15315a;
}
.gp-send-ic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2d7cd9;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.gp-loc {
  position: relative;
  z-index: 5;
  background: #fff;
  border: 1px solid #eef3f8;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(10, 31, 61, 0.06);
  padding: 24px 26px;
}
.gp-loc-head {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: #0a1f3d;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.gp-loc-body {
  display: flex;
  gap: 22px;
  align-items: stretch;
}
.gp-loc-cities {
  flex: 0 0 42%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 14px;
  align-content: start;
  border-right: 1px solid #e6eef6;
  padding-right: 18px;
}
.gp-loc-city {
  background: none;
  border: none;
  padding: 2px 0;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #2d7cd9;
  cursor: pointer;
  transition: color 0.15s;
  white-space: nowrap;
  line-height: 1.3;
}
.gp-loc-city:hover {
  color: #0a1f3d;
}
.gp-loc-city.active {
  color: #0a1f3d;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gp-loc-detail {
  flex: 1;
  display: flex;
  gap: 16px;
  min-width: 0;
}
.gp-loc-photo {
  flex: 0 0 118px;
  height: 118px;
  border-radius: 10px;
  overflow: hidden;
  background: #eef5fd;
}
.gp-loc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gp-loc-info {
  min-width: 0;
}
.gp-loc-city-name {
  color: #2d7cd9;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.gp-loc-company {
  color: #0a1f3d;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}
.gp-loc-info p {
  color: #5a6b7b;
  font-size: 13px;
  line-height: 1.55;
  margin: 0 0 4px;
}
.gp-loc-map {
  display: inline-block;
  margin-top: 6px;
  color: #0a1f3d;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gp-loc-map:hover {
  color: #2d7cd9;
}

@media (max-width: 1199px) {
  .gp-content {
    padding-left: 0;
    margin-top: 46px;
  }
  .gp-content .gp-title h2 {
    font-size: 32px;
  }
}
@media (max-width: 575px) {
  .gp-form {
    grid-template-columns: 1fr;
  }
  .gp-loc-body {
    flex-direction: column;
  }
  .gp-loc-cities {
    flex: auto;
    border-right: none;
    border-bottom: 1px solid #e6eef6;
    padding-right: 0;
    padding-bottom: 16px;
  }
  .gp-label {
    display: none;
  }
}

/* ==========================================================================
   PAGE: event-details.php
   ========================================================================== */

/* shared knowledge-details typography */
.details-content .kd-h3 {
  font-size: 22px;
  color: #0a1f3d;
  font-weight: 700;
  margin: 30px 0 12px;
}
.details-content .kd-h4 {
  font-size: 17px;
  color: #0a1f3d;
  font-weight: 700;
  margin: 22px 0 8px;
}
.details-content .kd-p {
  font-size: 15px;
  color: #5a6b7b;
  line-height: 1.8;
  margin: 0 0 16px;
}
.details-content .kd-lead {
  font-size: 16px;
  color: #5a6b7b;
  line-height: 1.8;
  margin: 0 0 26px;
}
.kd-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  margin-bottom: 18px;
}
.kd-intro-media {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.kd-intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kd-intro-body h3 {
  font-size: 22px;
  color: #0a1f3d;
  font-weight: 700;
  margin: 0 0 12px;
}
@media (max-width: 767px) {
  .kd-intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
/* accordions */
.kd-acc {
  border-top: 1px solid #e6eef5;
  margin-top: 30px;
}
.kd-acc-item {
  border-bottom: 1px solid #e6eef5;
}
.kd-acc-head {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-size: 18px;
  font-weight: 700;
  color: #0a1f3d;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.kd-acc-ic {
  font-size: 22px;
  line-height: 1;
  color: #2f7fd6;
  flex: none;
}
.kd-acc-ic::before {
  content: "+";
}
.kd-acc-item.open .kd-acc-ic::before {
  content: "\2212";
}
.kd-acc-panel {
  display: none;
  padding: 4px 4px 28px;
}
.kd-acc-item.open .kd-acc-panel {
  display: block;
}
.kd-acc-img {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 22px;
}
.kd-acc-img img {
  width: 100%;
  height: auto;
  display: block;
}
.kd-grid {
  display: grid;
  gap: 20px;
}
.kd-cols-1 {
  grid-template-columns: 1fr;
}
.kd-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.kd-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.kd-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.kd-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
.kd-card-img {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  aspect-ratio: 4/3;
}
.kd-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kd-card h4 {
  font-size: 16px;
  color: #2f7fd6;
  font-weight: 700;
  margin: 0 0 8px;
}
.kd-card p {
  font-size: 14px;
  color: #5a6b7b;
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 1199px) {
  .kd-cols-4,
  .kd-cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px) {
  .kd-cols-2,
  .kd-cols-3,
  .kd-cols-4,
  .kd-cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .kd-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   PAGE: knowledge-details.php
   ========================================================================== */

.kd-article .kd-lead {
  font-size: 16px;
  color: #5a6b7b;
  line-height: 1.8;
  margin: 0 0 26px;
}
.kd-article .kd-h3 {
  font-size: 22px;
  color: #0a1f3d;
  font-weight: 700;
  margin: 30px 0 12px;
}
.kd-article .kd-h4 {
  font-size: 17px;
  color: #0a1f3d;
  font-weight: 700;
  margin: 22px 0 8px;
}
.kd-article .kd-p {
  font-size: 15px;
  color: #5a6b7b;
  line-height: 1.8;
  margin: 0 0 16px;
}
.kd-product-cta {
  display: grid;
  grid-template-columns: minmax(190px, 280px) 1fr;
  gap: 30px;
  align-items: center;
  margin: 42px 0;
  padding: 28px;
  background: linear-gradient(135deg, #f2f7fd 0%, #fff 100%);
  border: 1px solid #dce8f5;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(17, 54, 102, 0.07);
}
.kd-product-cta-image {
  display: flex;
  min-height: 210px;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #fff;
  border: 1px solid #e5edf6;
  border-radius: 14px;
}
.kd-product-cta-image img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 210px;
  object-fit: contain;
}
.kd-product-cta-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #2f7fd6;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kd-product-cta h3 {
  margin: 0 0 12px;
  font-size: 25px;
}
.kd-product-cta h3 a {
  color: #0a1f3d;
}
.kd-product-cta p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 12px;
  color: #5a6b7b;
  font-size: 14px;
  line-height: 1.7;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.kd-product-cta-sizes {
  margin-bottom: 18px;
  color: #526579;
  font-size: 13px;
}
.kd-product-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  color: #fff;
  background: #0a1f3d;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
}
.kd-product-cta-link:hover {
  color: #fff;
  background: #2f7fd6;
}
@media (max-width: 767px) {
  .kd-product-cta {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 20px;
  }
  .kd-product-cta-image {
    min-height: 180px;
  }
}
.kd-hero {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 34px;
  position: relative;
}
.kd-hero img {
  width: 100%;
  height: auto;
  display: block;
}
.kd-hero .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(10, 35, 66, 0.8);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-indent: -9999px;
}
.kd-hero .play-btn::before {
  content: "\f04b";
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro";
  font-weight: 900;
  text-indent: 0;
}
/* intro (non-accordion) */
.kd-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 18px;
}
.kd-intro-media {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.kd-intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kd-intro-media .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(10, 35, 66, 0.82);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-indent: -9999px;
}
.kd-intro-media .play-btn::before {
  content: "\f04b";
  font-family: "Font Awesome 6 Pro", "Font Awesome 5 Pro";
  font-weight: 900;
  text-indent: 0;
}
.kd-intro-cap {
  text-align: center;
  font-size: 13px;
  color: #8a96a3;
  margin-top: 10px;
}
.kd-intro-body h3 {
  font-size: 24px;
  color: #0a1f3d;
  font-weight: 700;
  margin: 0 0 14px;
}
@media (max-width: 767px) {
  .kd-intro {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
/* accordions */
.kd-acc {
  border-top: 1px solid #e6eef5;
  margin-top: 30px;
}
.kd-acc-item {
  border-bottom: 1px solid #e6eef5;
}
.kd-acc-head {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-size: 18px;
  font-weight: 700;
  color: #0a1f3d;
  cursor: pointer;
  text-align: left;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.kd-acc-ic {
  font-size: 22px;
  line-height: 1;
  color: #2f7fd6;
  flex: none;
  transition: 0.2s;
}
.kd-acc-ic::before {
  content: "+";
}
.kd-acc-item.open .kd-acc-ic::before {
  content: "\2212";
}
.kd-acc-panel {
  display: none;
  padding: 4px 4px 28px;
}
.kd-acc-item.open .kd-acc-panel {
  display: block;
}
.kd-acc-img {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 22px;
}
.kd-acc-img img {
  width: 100%;
  height: auto;
  display: block;
}
/* column grid of cards */
.kd-grid {
  display: grid;
  gap: 24px;
}
.kd-cols-1 {
  grid-template-columns: 1fr;
}
.kd-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.kd-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.kd-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.kd-cols-5 {
  grid-template-columns: repeat(5, 1fr);
}
.kd-card-img {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  aspect-ratio: 4/3;
}
.kd-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kd-card h4 {
  font-size: 16px;
  color: #2f7fd6;
  font-weight: 700;
  margin: 0 0 8px;
}
.kd-card p {
  font-size: 14px;
  color: #5a6b7b;
  line-height: 1.65;
  margin: 0;
}
@media (max-width: 1199px) {
  .kd-cols-4,
  .kd-cols-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px) {
  .kd-cols-3,
  .kd-cols-4,
  .kd-cols-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .kd-grid {
    grid-template-columns: 1fr !important;
  }
}
/* full-width article (no sidebar) */
.details-layout-wrap.kd-fullwidth {
  display: block;
}
.details-content.kd-article {
  width: 100%;
  max-width: 100%;
}
/* prev / next knowledge nav cards (project-details style) */
.kd-navwrap {
  display: flex;
  gap: 24px;
  margin-top: 56px;
}
.kd-navwrap > span {
  flex: 1 1 0;
}
.kd-navcard {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 16px;
  padding: 14px 18px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(10, 31, 61, 0.05);
  transition: 0.25s;
}
.kd-navcard.kd-navcard-next {
  text-align: right;
  flex-direction: row-reverse;
}
.kd-navcard:hover {
  box-shadow: 0 14px 34px rgba(10, 31, 61, 0.1);
  transform: translateY(-2px);
}
.kd-navthumb {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}
.kd-navthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kd-navtext {
  flex: 1;
  min-width: 0;
}
.kd-navlabel {
  display: block;
  font-size: 12px;
  color: #8a98a8;
  margin-bottom: 3px;
}
.kd-navtitle {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #0a1f3d;
  line-height: 1.3;
  margin-bottom: 3px;
}
.kd-navdate {
  display: block;
  font-size: 12px;
  color: #8a98a8;
}
.kd-navarrow {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: #eef3f8;
  color: #0a1f3d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: 0.25s;
}
.kd-navcard:hover .kd-navarrow {
  background: #0a1f3d;
  color: #fff;
}
@media (max-width: 767px) {
  .kd-navwrap {
    flex-direction: column;
  }
}

/* ==========================================================================
   PAGE: knowledge.php
   ========================================================================== */

.k-insights .k-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #2f7fd6;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.k-insights .k-eyebrow i {
  font-size: 14px;
}
.k-insights .k-readmore {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 8px;
  color: #2f7fd6;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  text-decoration: none;
  transition: gap 0.2s linear;
}
.k-insights .k-readmore:hover {
  gap: 13px;
  color: #185fa5;
}
.k-insights .k-orange {
  display: block;
  width: 42px;
  height: 3px;
  background: #ee7e3c;
  border-radius: 2px;
}
/* ---- featured: contained rounded panel, light grey, spaced from banner ---- */
.k-feat-wrap {
  padding-top: 44px;
}
.k-featured {
  background: #f6f8fb;
  border-radius: 22px;
  padding: 44px 46px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.k-featured-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.k-featured-title {
  color: #0a2342;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 18px;
  max-width: 60%;
}
.k-featured-desc {
  color: #5a6b7b;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 24px;
  max-width: 78%;
}
.k-prompt {
  background: #fff;
  border-radius: 16px;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(10, 31, 61, 0.05);
}
.k-prompt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.k-prompt-icon {
  width: 46px;
  height: 46px;
  border-radius: 100%;
  background: #eef3f8;
  color: #2f7fd6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex: none;
}
.k-prompt-q {
  color: #0a2342;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 16px 0 0;
  max-width: 85%;
}
.k-prompt .k-readmore {
  margin-top: auto;
  padding-top: 22px;
}
/* ---- articles ---- */
.k-articles {
  padding: 50px 0 100px;
}
.k-sep {
  border: none;
  border-top: 1px solid #e3e8ee;
  margin: 46px 0;
}
/* two horizontal articles, divided by a thin vertical line */
.k-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.k-row2 .k-hcard {
  padding: 0 42px;
}
.k-row2 .k-hcard:first-child {
  padding-left: 0;
}
.k-row2 .k-hcard:last-child {
  padding-right: 0;
  border-left: 1px solid #e3e8ee;
}
.k-hcard {
  display: flex;
  gap: 24px;
  text-decoration: none;
}
.k-hcard-thumb {
  flex: 0 0 190px;
  height: 240px;
  border-radius: 12px;
  overflow: hidden;
}
.k-hcard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.k-hcard:hover .k-hcard-thumb img {
  transform: scale(1.06);
}
.k-hcard-body {
  display: flex;
  flex-direction: column;
}
.k-hcard-title {
  color: #0a2342;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.32;
  margin: 0 0 12px;
  max-width: 90%;
}
.k-hcard-desc {
  color: #5a6b7b;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 92%;
}
.k-hcard .k-orange {
  margin-bottom: 16px;
}
.k-hcard .k-readmore {
  margin-top: auto;
}
/* three article cards: spaced columns with vertical dividers */
.k-row3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 56px;
}
.k-row3 .k-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 32px;
}
.k-row3 .k-card:first-child {
  padding-left: 0;
}
.k-row3 .k-card:last-child {
  padding-right: 0;
}
.k-row3 .k-card + .k-card {
  border-left: 1px solid #e3e8ee;
}
.k-card-thumb {
  position: relative;
  display: block;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 18px;
}
.k-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s;
}
.k-card:hover .k-card-thumb img {
  transform: scale(1.06);
}
.k-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 100%;
  background: rgba(10, 35, 66, 0.78);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.k-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #8a96a3;
  font-size: 13px;
  margin-bottom: 10px;
}
.k-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.k-card-title {
  color: #0a2342;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.34;
  margin: 0 0 14px;
}
.k-card-title a {
  color: inherit;
  text-decoration: none;
}
.k-card .k-orange {
  margin-bottom: 18px;
}
.k-btn {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-self: flex-start;
  margin-top: auto;
  align-items: center;
  gap: 12px;
  color: #0a2342;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 8px 8px 20px;
  border: 1.5px solid #e3e8ee;
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.2s;
}
.k-btn:hover {
  border-color: #bfe9f7;
}
.k-btn .k-btn-ic {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: #0a2342;
  color: #bfe9f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
/* responsive */
@media (max-width: 991px) {
  .k-featured {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 36px;
  }
  .k-featured-title {
    font-size: 27px;
    max-width: 100%;
  }
  .k-featured-desc {
    max-width: 100%;
  }
  .k-prompt-q {
    max-width: 100%;
  }
  .k-row3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .k-row3 .k-card {
    padding: 0 26px;
  }
  .k-row3 .k-card:nth-child(3) {
    border-left: none;
    padding-left: 0;
    padding-top: 30px;
  }
}
@media (max-width: 767px) {
  .k-row2 {
    grid-template-columns: 1fr;
  }
  .k-row2 .k-hcard {
    padding: 0;
  }
  .k-row2 .k-hcard:last-child {
    border-left: none;
    border-top: 1px solid #e3e8ee;
    padding-top: 30px;
    margin-top: 30px;
  }
  .k-row3 {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .k-row3 .k-card {
    padding: 0;
  }
  .k-row3 .k-card + .k-card {
    border-left: none;
    border-top: 1px solid #e3e8ee;
    padding-top: 30px;
    margin-top: 30px;
  }
}
@media (max-width: 575px) {
  .k-hcard {
    flex-direction: column;
  }
  .k-hcard-thumb {
    flex: none;
    width: 100%;
    height: 200px;
  }
  .k-featured-title {
    font-size: 24px;
  }
}

/* ==========================================================================
   PAGE: project-details.php
   ========================================================================== */

.prj-section {
  background: #fff;
}
.prj-eyebrow {
  display: inline-block;
  color: #2d7cd9;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
/* meta row */
.prj-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 26px 10px;
  margin-bottom: 48px;
  border-top: 1px solid #e6eef5;
  border-bottom: 1px solid #e6eef5;
}
.prj-meta-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  position: relative;
}
.prj-meta-item + .prj-meta-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8%;
  height: 84%;
  width: 1px;
  background: #e6eef5;
}
.prj-meta-icon {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  background: #eef5fd;
  color: #2d7cd9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.prj-meta-item .k {
  font-size: 12px;
  color: #8a98a8;
  margin: 0 0 3px;
}
.prj-meta-item .v {
  font-size: 15px;
  font-weight: 700;
  color: #0a1f3d;
  margin: 0;
  line-height: 1.3;
}
/* 2-column main */
.prj-main {
  align-items: flex-start;
}
.prj-mapwrap {
  position: relative;
  background: #f5f8fc;
  border: 1px solid #eaf1f8;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 22px;
}
.prj-mapwrap img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center;
  display: block;
}
.prj-mapbadge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 10px 30px rgba(10, 31, 61, 0.1);
}
.prj-mapbadge h4 {
  font-size: 22px;
  color: #0a1f3d;
  margin: 0;
  font-weight: 800;
}
.prj-mapbadge span {
  font-size: 12px;
  color: #7c8aa0;
}
/* fixed-size stage: every visual renders in the SAME box (object-fit:cover),
   so the main image never resizes when switching between thumbnails. */
.prj-visual {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 14px;
  height: 300px;
}
.prj-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* thumbnails share the main visual's aspect ratio (set via JS), so each thumb is a
   true scaled-down copy of the big image's box instead of an unrelated crop shape. */
.prj-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.prj-thumb {
  aspect-ratio: 300/300;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: 0.2s;
  line-height: 0;
}
.prj-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prj-thumb:hover {
  border-color: #a9d3f2;
}
.prj-thumb.active {
  border-color: #2d7cd9;
}
/* right content */
.prj-content {
  padding-left: 24px;
}
.prj-content h2 {
  font-size: 30px;
  line-height: 1.22;
  color: #0a1f3d;
  font-weight: 700;
  margin-bottom: 16px;
}
.prj-content .prj-desc {
  color: #5a6b7b;
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 30px;
}
.prj-glance-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #2d7cd9;
  margin-bottom: 20px;
}
.prj-glance-item {
  display: flex;
  gap: 18px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid #eef3f8;
}
.prj-glance-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.prj-glance-icon {
  width: 50px;
  height: 50px;
  flex: none;
  border-radius: 12px;
  background: #eef5fd;
  color: #2d7cd9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}
.prj-glance-item h5 {
  font-size: 17px;
  font-weight: 700;
  color: #0a1f3d;
  margin: 0 0 7px;
}
.prj-glance-item p {
  font-size: 14px;
  color: #6a7889;
  line-height: 1.65;
  margin: 0;
}
/* operational journey */
.prj-journey {
  margin-top: 64px;
}
.prj-journey-head {
  text-align: center;
  margin-bottom: 40px;
}
.prj-journey-head h3 {
  font-size: 26px;
  color: #0a1f3d;
  font-weight: 700;
}
.prj-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.prj-step {
  text-align: center;
  padding: 30px 22px;
  background: #f7fafd;
  border: 1px solid #eaf1f8;
  border-radius: 16px;
  transition: 0.25s;
}
.prj-step:hover {
  box-shadow: 0 16px 38px rgba(10, 31, 61, 0.08);
  transform: translateY(-4px);
}
.prj-step-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #0a1f3d;
  color: #bfe9f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.prj-step h5 {
  font-size: 17px;
  font-weight: 700;
  color: #0a1f3d;
  margin: 0 0 8px;
}
.prj-step p {
  font-size: 13px;
  color: #7c8aa0;
  line-height: 1.6;
  margin: 0;
}
/* prev / next project nav cards */
.prj-navwrap {
  display: flex;
  gap: 24px;
  margin-top: 56px;
}
.prj-navcard {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border: 1px solid #eef2f6;
  border-radius: 16px;
  padding: 14px 18px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(10, 31, 61, 0.05);
  transition: 0.25s;
}
.prj-navcard:hover {
  box-shadow: 0 14px 34px rgba(10, 31, 61, 0.1);
  transform: translateY(-2px);
}
.prj-navthumb {
  width: 60px;
  height: 60px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
}
.prj-navthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prj-navtext {
  flex: 1;
  min-width: 0;
}
.prj-navlabel {
  display: block;
  font-size: 12px;
  color: #8a98a8;
  margin-bottom: 3px;
}
.prj-navtitle {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #0a1f3d;
  line-height: 1.3;
  margin-bottom: 3px;
}
.prj-navdate {
  display: block;
  font-size: 12px;
  color: #8a98a8;
}
.prj-navarrow {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: #eef3f8;
  color: #0a1f3d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: 0.25s;
}
.prj-navcard:hover .prj-navarrow {
  background: #0a1f3d;
  color: #fff;
}
@media (max-width: 991px) {
  .prj-content {
    padding-left: 0;
    margin-top: 44px;
  }
  .prj-meta {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 14px;
  }
  .prj-meta-item:nth-child(3)::before {
    display: none;
  }
  .prj-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .prj-navwrap {
    flex-direction: column;
  }
}
@media (max-width: 575px) {
  .prj-meta {
    grid-template-columns: 1fr;
  }
  .prj-meta-item::before {
    display: none;
  }
  .prj-steps {
    grid-template-columns: 1fr;
  }
  .prj-content h2 {
    font-size: 24px;
  }
}

/* ==========================================================================
   PAGE: product-details.php
   ========================================================================== */

.pdx-section {
  background: #fff;
  position: relative;
}
.pdx-section .pdx-block {
  margin-bottom: 56px;
}
.pdx-section .pdx-left > .pdx-block:last-child {
  margin-bottom: 0;
}

/* ---------- A. top: gallery ---------- */
.pdx-stage {
  position: relative;
  border: 1px solid #eef2f6;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 340px;
  padding: 24px;
  overflow: hidden;
  cursor: zoom-in;
}
.pdx-stage::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(45, 124, 217, 0.1) 0%,
    rgba(45, 124, 217, 0) 70%
  );
}
.pdx-stage img {
  position: relative;
  max-width: 82%;
  max-height: 300px;
  object-fit: contain;
}
/* zoom affordance */
.pdx-zoom-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #e3eaf2;
  background: rgba(255, 255, 255, 0.92);
  color: #2d7cd9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: zoom-in;
  box-shadow: 0 4px 12px rgba(10, 31, 61, 0.1);
  transition: 0.2s;
}
.pdx-zoom-btn:hover {
  background: #2d7cd9;
  color: #fff;
  transform: scale(1.06);
}
/* lightbox */
.pdx-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(6, 18, 38, 0.88);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
  cursor: zoom-out;
}
.pdx-lightbox.open {
  display: flex;
}
.pdx-lightbox img {
  max-width: 94vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.pdx-lightbox-close {
  position: absolute;
  top: 22px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  transition: 0.2s;
}
.pdx-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.28);
}
.pdx-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: nowrap;
}
.pdx-thumb {
  flex: 1 1 0;
  aspect-ratio: 1;
  border: 1px solid #e8edf2;
  border-radius: 10px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.25s;
  padding: 6px;
}
.pdx-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pdx-thumb.active,
.pdx-thumb:hover {
  border-color: #2d7cd9;
  box-shadow: 0 4px 12px rgba(45, 124, 217, 0.15);
}

/* ---------- A. top: info ---------- */
.pdx-info {
  padding-left: 8px;
}
.pdx-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.pdx-akd {
  color: #8a98a8;
  font-size: 13px;
  letter-spacing: 0.5px;
  margin: 0;
}
.pdx-brand img {
  max-height: 16px;
  width: auto;
}
.pdx-title {
  font-size: 48px;
  line-height: 1.15;
  font-weight: 700;
  color: #0a1f3d;
  margin-bottom: 22px;
}
@media (max-width: 991px) {
  .pdx-title {
    font-size: 36px;
  }
}
.pdx-acc {
  border-top: 1px solid #e6eef5;
  margin-bottom: 26px;
}
.pdx-acc-item {
  border-bottom: 1px solid #e6eef5;
}
.pdx-acc-btn {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 2px;
  font-size: 16px;
  font-weight: 600;
  color: #0a1f3d;
  cursor: pointer;
  text-align: left;
}
.pdx-acc-ic {
  font-size: 20px;
  line-height: 1;
  color: #0a1f3d;
  flex: none;
}
.pdx-acc-ic::before {
  content: "+";
}
.pdx-acc-item.open .pdx-acc-ic::before {
  content: "\2212";
}
.pdx-acc-body {
  display: none;
  padding: 0 2px 18px;
  color: #6a7889;
  font-size: 14px;
  line-height: 1.8;
}
.pdx-acc-item.open .pdx-acc-body {
  display: block;
}
.pdx-acc-body ul {
  margin: 6px 0 0;
  padding-left: 18px;
}
.pdx-acc-body ul li {
  margin-bottom: 4px;
}
.pdx-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #0a1f3d;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 15px 30px;
  border-radius: 10px;
  text-decoration: none;
  transition: 0.25s;
}
.pdx-download:hover {
  background: #15315a;
  color: #fff;
}

.pdx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

.pdx-knowledge-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border: 1px solid #0a1f3d;
  border-radius: 10px;
  background: #fff;
  color: #0a1f3d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.35px;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: 0.25s;
}

.pdx-knowledge-link:hover {
  background: #d9ecfb;
  color: #0a1f3d;
}

@media (max-width: 575px) {
  .pdx-actions {
    flex-direction: column;
  }

  .pdx-actions > a {
    width: 100%;
  }
}

/* ---------- right sidebar: category ---------- */
.pdx-category {
  background: #d9ecfb;
  border-radius: 16px;
  padding: 24px 20px;
  position: sticky;
  top: 20px;
}
.pdx-category h3 {
  font-size: 20px;
  color: #0a1f3d;
  margin-bottom: 18px;
}
.pdx-cat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 12px;
  transition: 0.25s;
  text-decoration: none;
}
.pdx-cat-item:last-child {
  margin-bottom: 0;
}
.pdx-cat-item:hover {
  box-shadow: 0 8px 20px rgba(10, 31, 61, 0.08);
  transform: translateY(-2px);
}
.pdx-cat-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: #eef6fd;
  color: #2d7cd9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.pdx-cat-item.active {
  background: #2d7cd9;
}
.pdx-cat-item.active .pdx-cat-icon {
  background: #fff;
}
.pdx-cat-item.active .pdx-cat-label {
  color: #fff;
}
.pdx-cat-label {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #34465a;
}
.pdx-cat-count {
  flex: 0 0 auto;
  min-width: 26px;
  height: 24px;
  padding: 0 8px;
  border-radius: 100px;
  background: #eef6fd;
  color: #2d7cd9;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pdx-cat-item.active .pdx-cat-count {
  background: #fff;
  color: #2d7cd9;
}

/* ---------- A2. features strip ---------- */
.pdx-features {
  background: #f4f6f8;
  border-radius: 16px;
  padding: 32px 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.pdx-feature {
  text-align: center;
  padding: 0 18px;
  position: relative;
}
.pdx-feature + .pdx-feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  height: 88%;
  width: 1px;
  background: #e2e7ec;
}
.pdx-f-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #fff;
  color: #2d7cd9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 8px 20px rgba(45, 124, 217, 0.14);
}
.pdx-feature h5 {
  font-size: 17px;
  font-weight: 700;
  color: #0a1f3d;
  margin-bottom: 10px;
}
.pdx-feature p {
  font-size: 13px;
  color: #7c8aa0;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 767px) {
  .pdx-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 10px;
  }
  .pdx-feature + .pdx-feature::before {
    display: none;
  }
}

/* ---------- B. how to use ---------- */
.pdx-howto-head h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #0a1f3d;
  margin-bottom: 8px;
}
.pdx-howto-head p {
  font-size: 14px;
  color: #8a98a8;
  margin-bottom: 24px;
}
.pdx-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.pdx-step-thumb {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #eef2f6;
}
.pdx-step-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pdx-step-num {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(10, 31, 61, 0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pdx-step p {
  font-size: 12px;
  color: #6a7889;
  line-height: 1.6;
  margin: 12px 0 0;
}

/* ---------- C. FAQ (clean rows) ---------- */
.pdx-faq h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #0a1f3d;
  margin-bottom: 22px;
}
.pdx-faq-list {
  border-top: 1px solid #e6eef5;
}
.pdx-faq-item {
  border-bottom: 1px solid #e6eef5;
}
.pdx-faq-q {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  font-size: 16px;
  font-weight: 600;
  color: #0a1f3d;
  cursor: pointer;
  text-align: left;
}
.pdx-faq-ic {
  font-size: 20px;
  line-height: 1;
  color: #0a1f3d;
  flex: none;
}
.pdx-faq-ic::before {
  content: "+";
}
.pdx-faq-item.open .pdx-faq-ic::before {
  content: "\2212";
}
.pdx-faq-a {
  display: none;
  padding: 0 4px 20px;
  color: #6a7889;
  font-size: 14px;
  line-height: 1.85;
}
.pdx-faq-item.open .pdx-faq-a {
  display: block;
}

/* ---------- D. other products ---------- */
.pdx-other {
  background: #f4f6f8;
  border-radius: 18px;
  padding: 34px;
}
.pdx-other h2 {
  font-size: 22px;
  font-weight: 800;
  color: #0a1f3d;
  letter-spacing: 0.5px;
  margin-bottom: 26px;
  text-transform: uppercase;
}
.pdx-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pdx-pcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  padding: 22px 22px 0;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(10, 31, 61, 0.06);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.pdx-pcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(10, 31, 61, 0.12);
}
.pdx-pcard h5 {
  font-size: 18px;
  font-weight: 700;
  color: #0a1f3d;
  margin: 0 0 10px;
}
.pdx-pbrand {
  width: 64px;
  height: auto;
  display: block;
}
.pdx-pthumb {
  margin-top: auto;
  padding: 14px 0 22px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 200px;
  overflow: hidden;
}
.pdx-pthumb img {
  max-width: 100%;
  max-height: 170px;
  object-fit: contain;
  transition: transform 0.3s;
}
.pdx-pcard:hover .pdx-pthumb img {
  transform: scale(1.06);
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .pdx-category {
    position: static;
    margin-top: 30px;
  }
}
@media (max-width: 767px) {
  .pdx-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .pdx-products {
    grid-template-columns: 1fr;
  }
  .pdx-other {
    padding: 24px;
  }
  .pdx-title {
    font-size: 24px;
  }
}
@media (max-width: 575px) {
  .pdx-steps {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PAGE: product.php
   ========================================================================== */

.gp-product-section {
  position: relative;
  padding-top: 40px;
  padding-bottom: 100px;
}
/* ---------- search / filter band ---------- */
.gp-band {
  background: linear-gradient(110deg, #0a2038 0%, #0f2f54 55%, #16456e 100%);
  border-radius: 22px;
  padding: 34px 38px;
  color: #fff;
  margin-bottom: 42px;
  box-shadow: 0 18px 50px rgba(10, 31, 61, 0.18);
}
.gp-band-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.gp-band-head {
  display: flex;
  align-items: center;
  gap: 18px;
}
.gp-band-icon {
  width: 72px;
  height: 72px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  -webkit-clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  color: #a9e4f5;
  font-size: 28px;
}
.gp-band-titles h3 {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
}
.gp-band-titles p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  margin: 0;
  max-width: 360px;
  line-height: 1.5;
}
.gp-search {
  position: relative;
  flex: 1 1 420px;
  max-width: 480px;
}
.gp-search input {
  width: 100%;
  height: 56px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  padding: 0 56px 0 26px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}
.gp-search input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.gp-search input:focus {
  border-color: #a9e4f5;
}
.gp-search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 100%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 17px;
  cursor: pointer;
}
.gp-band-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 26px 0 22px;
}
.gp-band-filters {
  display: flex;
}
.gp-filter-col {
  padding: 0 34px;
}
.gp-filter-col:first-child {
  padding-left: 0;
  flex: 0 0 34%;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.gp-filter-col:last-child {
  flex: 1;
  padding-right: 0;
}
.gp-filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
}
.gp-filter-label i {
  color: #a9e4f5;
}
.gp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gp-chip {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s linear;
  font-family: inherit;
}
.gp-chip:hover {
  border-color: #a9e4f5;
  color: #fff;
}
.gp-chip.active {
  background: #bfe9f7;
  border-color: #bfe9f7;
  color: #0a2342;
  font-weight: 600;
}
.gp-chip-count {
  opacity: 0.65;
  font-size: 0.92em;
  margin-left: 2px;
}
.gp-chip.active .gp-chip-count {
  opacity: 0.7;
}
/* ---------- product grid ---------- */
.gp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.gp-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(10, 31, 61, 0.07);
  text-decoration: none;
  transition:
    transform 0.25s,
    box-shadow 0.25s;
}
.gp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(10, 31, 61, 0.12);
}
.gp-card-body {
  padding: 26px 24px 0;
}
.gp-card-title {
  color: #0a2342;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 14px;
}
.gp-card-brand {
  width: 80px;
  height: auto;
  display: block;
}
.gp-card-thumb {
  margin-top: auto;
  padding: 16px 24px 26px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 288px;
  overflow: hidden;
}
.gp-card-thumb img {
  max-width: 100%;
  max-height: 252px;
  object-fit: contain;
  transition: transform 0.3s;
}
.gp-card:hover .gp-card-thumb img {
  transform: scale(1.06);
}
.gp-empty {
  text-align: center;
  color: #0a2342;
  font-size: 18px;
  padding: 50px 0;
}
.gp-quality {
  margin-top: 46px;
  background: linear-gradient(110deg, #0a2038 0%, #0f2f54 55%, #16456e 100%);
  border-radius: 20px;
  padding: 30px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 18px 50px rgba(10, 31, 61, 0.18);
}
.gp-quality-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.gp-quality-icon {
  width: 58px;
  height: 58px;
  font-size: 22px;
}
.gp-quality-text h3 {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
}
.gp-quality-text p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  max-width: 520px;
}
.gp-quality-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background: #bfe9f7;
  color: #0a2342;
  font-weight: 600;
  font-size: 15px;
  padding: 9px 9px 9px 28px;
  border-radius: 100px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.gp-quality-btn:hover {
  background: #a9e4f5;
  color: #0a2342;
}
.gp-quality-arrow {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 100%;
  background: #0a2342;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .gp-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px) {
  .gp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gp-band-filters {
    flex-direction: column;
    gap: 22px;
  }
  .gp-filter-col {
    padding: 0;
  }
  .gp-filter-col:first-child {
    flex: auto;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 22px;
  }
}
@media (max-width: 767px) {
  .gp-band {
    padding: 26px 22px;
  }
  .gp-band-top {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
  }
  .gp-search {
    max-width: none;
    flex: 0 0 auto;
  }
  .gp-quality {
    padding: 24px;
  }
  .gp-quality-btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 575px) {
  .gp-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .gp-card-body {
    padding: 18px 16px 0;
  }
  .gp-card-title {
    font-size: 16px;
  }
  .gp-card-brand {
    width: 66px;
  }
  .gp-card-thumb {
    height: 188px;
    padding: 10px 16px 18px;
  }
  .gp-card-thumb img {
    max-height: 160px;
  }
}

/* ==========================================================================
   Inline style="" attributes moved out (shared + per-page)
   NOTE: the invalid "margin-top:top 5px" from project.php services-section-3
   was dropped (it was ignored by the browser; behaviour is unchanged).
   ========================================================================== */

/* --- Shared across pages --- */
.breadcrumb-content {
  background-image: url(../img/bg/breadcrumb-bg.webp);
} /* breadcrumb partial + event/product/product-details */
.gp-brand-logo {
  width: 230px;
  max-width: 230px;
  height: auto;
} /* page-header brand logo */
.gp-right-pt50 {
  padding-top: 50px;
} /* event.php + project.php section-top .right */

/* --- event.php: keep card typography compact and balanced --- */
.event-listing-section .event-card {
  display: flex;
  height: 100%;
  overflow: hidden;
  flex-direction: column;
}
.event-listing-section .event-card .thumb img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}
.event-listing-section .event-card .card-content {
  display: flex;
  flex: 1;
  flex-direction: column;
}
.event-listing-section .event-card .event-card-top .top-left {
  align-items: center;
  gap: 10px;
}
.event-listing-section .event-card .event-card-top .top-left > img {
  width: 18px;
  height: 18px;
}
.event-listing-section .event-card .event-card-top .top-left .event-date h3 {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 19px;
  line-height: 1.2;
  white-space: nowrap;
}
.event-listing-section
  .event-card
  .event-card-top
  .top-left
  .event-date
  h3
  span {
  font-size: 14px;
  line-height: inherit;
}
.event-listing-section .event-card-middle h2 {
  font-size: 24px;
  line-height: 1.3;
}
@media (max-width: 1199px) {
  .event-listing-section .event-card .event-card-top .top-left .event-date h3 {
    font-size: 18px;
  }
  .event-listing-section .event-card-middle h2 {
    font-size: 22px;
  }
}
@media (max-width: 767px) {
  .event-listing-section .event-card .event-card-top .top-left .event-date h3 {
    font-size: 18px;
  }
  .event-listing-section
    .event-card
    .event-card-top
    .top-left
    .event-date
    h3
    span {
    font-size: 13px;
  }
  .event-listing-section .event-card-middle h2 {
    font-size: 19px;
    line-height: 1.35;
  }
  .event-listing-section .event-card .thumb img {
    height: 220px;
  }
}

/* --- contact.php --- */
.gp-region {
  left: 30%;
  top: 46%;
} /* INDONESIA map label (static position) */

/* --- product.php --- */
.pd-about1 {
  padding-bottom: 0;
} /* about-us-section-1: collapse bottom padding */

/* --- product-details.php --- */
.pdx-gutter-50 {
  --bs-gutter-x: 50px;
} /* detail row gutter */

/* --- project.php --- */
.prj-services-tight {
  padding-top: 10px;
  padding-bottom: 5px;
} /* services-section spacing tweak */
.prj-thumb-400 {
  height: 400px;
} /* project card thumb height */
.prj-services3 {
  margin-bottom: 80px;
} /* services-section-3 bottom margin */

/* ==========================================================================
   Site header — nudge logo / nav / actions in from the viewport edges
   (index + inner pages; the template used flush 15px container-fluid padding)
   ========================================================================== */
.header-bottom .container-fluid {
  padding-left: 50px;
  padding-right: 50px;
}
@media (max-width: 767px) {
  .header-bottom .container-fluid {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* Header navigation: larger responsive brand and right-aligned desktop links. */
.logo-wrap .gp-header-logo {
  display: block;
  width: 300px;
  max-width: none;
  height: auto;
}

.header-right {
  flex-wrap: nowrap;
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .logo-wrap .gp-header-logo {
    width: 270px;
  }
}

@media (max-width: 1199px) {
  .logo-wrap .gp-header-logo {
    width: 240px;
  }

  .header-section .main-menu {
    display: none !important;
  }

  .header-section .header-bar {
    position: relative;
    display: block !important;
  }
}

@media (max-width: 767px) {
  .logo-wrap .gp-header-logo {
    width: clamp(140px, 40vw, 180px);
  }

  .header-right {
    gap: 10px;
  }
}

/* ========================================================================== 
   Homepage — Trusted by Industry Leaders carousel
   ========================================================================== */
.til-section {
  overflow: hidden;
  padding: 92px 0 105px;
  background: #fff;
}

.til-section > .container,
.til-carousel {
  max-width: 1240px;
  margin-right: auto;
  margin-left: auto;
}

.til-header {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.til-header h2 {
  margin: 0 0 18px;
  color: #06154f;
  font-size: 46px;
  font-weight: 600;
  line-height: 1.12;
}

.til-header p {
  margin: 0;
  color: #3e4968;
  font-size: 16px;
  line-height: 1.7;
}

.til-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 50px;
}

.til-tab {
  padding: 14px 28px;
  border: 1.5px solid transparent;
  border-radius: 53px;
  background: #fff;
  color: var(--body-color);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.til-tab:hover:not(:disabled) {
  transform: translateY(-2px);
}

.til-tab.is-active,
.til-tab:hover:not(:disabled) {
  border-color: var(--theme-color-2);
  background: #dff5f9;
  box-shadow: 0 6px 15.9px -3px rgba(0, 69, 64, 0.11);
  color: var(--theme-color-3);
}

.til-tab:focus-visible,
.til-card:focus-visible,
.til-arrow:focus-visible,
.til-dot:focus-visible {
  outline: 3px solid rgba(18, 103, 239, 0.42);
  outline-offset: 4px;
}

.til-tab:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.til-carousel {
  position: relative;
  width: calc(100% - 30px);
  margin-top: 32px;
}

.til-panel[hidden] {
  display: none;
}

.til-stage {
  position: relative;
  width: 100%;
  height: clamp(300px, 24vw, 385px);
  perspective: 1200px;
  touch-action: pan-y;
}

.til-card {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: clamp(275px, 22vw, 420px);
  height: clamp(210px, 15.8vw, 300px);
  padding: clamp(28px, 3vw, 55px);
  overflow: hidden;
  place-items: center;
  border: 1px solid #dce6f7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(12, 38, 91, 0.14);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.65);
  transform-origin: center;
  transition:
    transform 0.55s cubic-bezier(0.22, 0.76, 0.25, 1),
    opacity 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
  will-change: transform, opacity;
}

.til-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.til-card[data-active="true"] {
  border: 3px solid #6da9ff;
  box-shadow:
    0 18px 38px rgba(10, 61, 151, 0.2),
    0 0 0 1px rgba(72, 148, 255, 0.16);
}

.til-card[data-active="true"]::after {
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 120px;
  height: 24px;
  border-radius: 24px 24px 0 0;
  background: #1d4084;
  content: "";
  transform: translateX(-50%);
}

.til-arrow {
  position: absolute;
  top: 50%;
  z-index: 30;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 28px rgba(12, 38, 91, 0.15);
  color: #1267ef;
  font-size: 28px;
  transform: translateY(-50%);
  transition:
    color 0.25s ease,
    background-color 0.25s ease,
    transform 0.25s ease;
}

.til-arrow:hover {
  background: #1d4084;
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}

.til-arrow-prev {
  left: clamp(18px, 2.4vw, 48px);
}

.til-arrow-next {
  right: clamp(18px, 2.4vw, 48px);
}

.til-dots {
  display: flex;
  min-height: 14px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}

.til-dot {
  width: 13px;
  height: 13px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c8cad1;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}

.til-dot.is-active {
  background: #174391;
  transform: scale(1.12);
}

@media (max-width: 991px) {
  .til-section {
    padding: 75px 0 85px;
  }

  .til-header h2 {
    font-size: 36px;
  }

  .til-tabs {
    margin-top: 50px;
  }

  .til-carousel {
    margin-top: 45px;
  }

  .til-stage {
    height: 330px;
  }
}

@media (max-width: 767px) {
  .til-section {
    padding: 62px 0 72px;
  }

  .til-header h2 {
    font-size: 36px;
  }

  .til-header p {
    font-size: 16px;
    line-height: 1.65;
  }

  .til-tabs {
    gap: 10px;
    margin-top: 36px;
  }

  .til-tab {
    padding: 4px 8px;
    font-size: 16px;
  }

  .til-carousel {
    margin-top: 30px;
  }

  .til-stage {
    height: 280px;
  }

  .til-card {
    width: min(76vw, 330px);
    height: 220px;
    padding: 34px;
  }

  .til-card[data-active="true"]::after {
    width: 85px;
    height: 18px;
  }

  .til-arrow {
    top: calc(50% + 142px);
    width: 44px;
    height: 44px;
    font-size: 19px;
  }

  .til-arrow-prev {
    left: 22px;
  }

  .til-arrow-next {
    right: 22px;
  }

  .til-dots {
    margin-top: 18px;
  }
}

/* --- Homepage finishing pass: hero, language, brand strip and knowledge -- */
.hero-slider-active-1 .hero-side {
  height: clamp(760px, 43vw, 840px);
  box-sizing: border-box;
  padding-top: 270px;
  padding-bottom: 165px;
  overflow: hidden;
  isolation: isolate;
}

.hero-slider-active-1 .hero-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  display: block;
  width: 100%;
  height: 100%;
}

.hero-slider-active-1 .hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-slider-active-1 .hero-content-1 {
  transform: translateY(-20px);
}

.gp-language-switcher {
  position: relative;
  display: inline-flex;
  width: 88px;
  height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px 0 12px;
  color: #092d58;
  border: 1px solid #d5e3ef;
  border-radius: 999px;
  background: #f4faff;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.gp-language-switcher:hover,
.gp-language-switcher:focus-within {
  border-color: #78b9e9;
  box-shadow: 0 7px 18px rgba(7, 58, 105, 0.1);
  transform: translateY(-1px);
}

.gp-language-switcher > i:first-child {
  color: #1474c7;
  font-size: 15px;
}

.gp-language-trigger {
  display: inline-flex;
  min-width: 38px;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0;
  color: inherit;
  border: 0;
  outline: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--dm-sans-font);
  font-size: 13px;
  font-weight: 700;
}

.gp-language-chevron {
  color: #65809a;
  font-size: 9px;
  pointer-events: none;
  transition: transform 0.25s ease;
}

.gp-language-switcher.is-open .gp-language-chevron {
  transform: rotate(180deg);
}

.gp-language-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 1002;
  display: grid;
  width: 205px;
  gap: 4px;
  padding: 8px;
  border: 1px solid #dbe8f2;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 44px rgba(7, 44, 82, 0.18);
  transform-origin: top right;
  animation: gp-language-menu-in 0.2s ease both;
}

.gp-language-menu[hidden] {
  display: none;
}

.gp-language-option {
  display: grid;
  grid-template-columns: 34px 1fr 16px;
  min-height: 48px;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  color: #1f3856;
  border: 0;
  border-radius: 11px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}

.gp-language-option:hover,
.gp-language-option:focus-visible {
  outline: 0;
  background: #edf7fb;
}

.gp-language-option.is-selected {
  color: #0a5798;
  background: #e8f5fb;
}

.gp-language-code {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.gp-language-name {
  font-size: 14px;
  font-weight: 600;
}

.gp-language-option > i {
  color: #1682cb;
  font-size: 12px;
  opacity: 0;
}

.gp-language-option.is-selected > i {
  opacity: 1;
}

@keyframes gp-language-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.gp-google-translate,
.goog-te-banner-frame.skiptranslate,
.VIpgJd-ZVi9od-ORHb-OEVmcd {
  display: none !important;
}

body {
  top: 0 !important;
}

.idx-about-brands {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 24px;
  margin-top: 26px;
}

.idx-about-brand {
  display: grid;
  min-width: 0;
  min-height: 104px;
  margin: 0;
  padding: 14px 10px;
  overflow: visible;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  animation: idx-brand-reveal 0.7s both;
  animation-delay: var(--brand-delay, 0ms);
  transition: transform 0.3s ease;
}

.idx-about-brand:hover {
  transform: translateY(-4px) scale(1.025);
}

.idx-about-brand img {
  display: block;
  width: 100%;
  max-width: 150px;
  height: 68px;
  object-fit: contain;
}

.idx-about-brand img[alt^="Hexa Care"],
.idx-about-brand img[alt^="GP Care"] {
  transform: scale(1.06);
}

@keyframes idx-brand-reveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.idx-knowledge-heading {
  max-width: 840px;
  margin-bottom: 44px;
}

.idx-knowledge-heading .common-subtitle {
  margin-bottom: 16px;
}

.idx-knowledge-heading .common-title {
  margin-bottom: 18px;
}

.idx-knowledge-heading .common-title h2 {
  color: #072d59;
  font-size: 48px;
  line-height: 1.15;
}

.idx-knowledge-heading > p {
  max-width: 720px;
  margin: 0;
  color: #526274;
  font-size: 18px;
  line-height: 1.7;
}

.idx-knowledge-banner {
  position: relative;
  display: flex;
  min-height: 520px;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border-radius: 30px;
  background: #061d3e;
  box-shadow: 0 24px 60px rgba(4, 32, 69, 0.18);
}

.idx-knowledge-banner-image,
.idx-knowledge-banner-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.idx-knowledge-banner-image {
  z-index: -2;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 0.76, 0.25, 1);
}

.idx-knowledge-banner-overlay {
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(3, 24, 54, 0.96) 0%,
      rgba(5, 32, 70, 0.88) 43%,
      rgba(5, 32, 70, 0.36) 77%,
      rgba(5, 32, 70, 0.16) 100%
    ),
    linear-gradient(0deg, rgba(2, 19, 43, 0.34), rgba(2, 19, 43, 0.08));
}

.idx-knowledge-banner:hover .idx-knowledge-banner-image {
  transform: scale(1.035);
}

.idx-knowledge-banner-content {
  width: min(720px, 68%);
  padding: clamp(45px, 6vw, 82px);
}

.idx-knowledge-featured-label {
  display: inline-flex;
  margin-bottom: 21px;
  padding: 8px 15px;
  color: #072d59;
  border-radius: 999px;
  background: #79e0ee;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  line-height: 1;
  text-transform: uppercase;
}

.idx-knowledge-banner-content h3 {
  margin-bottom: 18px;
  font-size: clamp(34px, 3.2vw, 51px);
  line-height: 1.12;
}

.idx-knowledge-banner-content h3 a {
  color: #fff;
}

.idx-knowledge-banner-content h3 a:hover {
  color: #79e0ee;
}

.idx-featured-product-knowledge-head { margin-top:38px; margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; }
.idx-featured-product-knowledge-head h3 { margin:0; font-size:28px; line-height:1.2; font-weight:800; color:#092f58; }
.idx-featured-articles-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-top:34px; }
.idx-featured-article-card { display:grid; grid-template-columns:156px minmax(0,1fr); gap:20px; align-items:start; min-height:214px; padding:0 34px 0 0; background:transparent; border:0; border-radius:0; box-shadow:none; }
.idx-featured-article-card + .idx-featured-article-card { border-left:1px solid #e3eaf1; padding-left:34px; padding-right:0; }
.idx-featured-article-card-image { display:block; width:156px; height:186px; overflow:hidden; border-radius:10px; }
.idx-featured-article-card-image img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.idx-featured-article-card:hover .idx-featured-article-card-image img { transform:scale(1.025); }
.idx-featured-article-card-content { padding:0; display:flex; flex-direction:column; min-width:0; }
.idx-featured-article-card-kicker { margin-bottom:10px; font-size:13px; line-height:1.2; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#287ad0; }
.idx-featured-article-card-content h3 { font-size:24px; line-height:1.28; margin:0 0 12px; font-weight:800; max-width:390px; }
.idx-featured-article-card-content h3 a { color:#092f58; text-decoration:none; }
.idx-featured-article-card-content p { margin:0; color:#65788d; font-size:16px; line-height:1.7; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; max-width:390px; }
.idx-featured-article-link { margin-top:16px; padding-top:14px; position:relative; display:inline-flex; align-items:center; gap:9px; width:max-content; font-size:14px; letter-spacing:.04em; font-weight:800; text-transform:uppercase; color:#287ad0; text-decoration:none; }
.idx-featured-article-link::before { content:""; position:absolute; left:0; top:0; width:34px; height:2px; background:#f28a38; }
.idx-featured-article-link:hover { color:#0b3158; }
.idx-knowledge-banner-content > p {
  max-width: 625px;
  margin-bottom: 31px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 18px;
  line-height: 1.65;
}

.idx-knowledge-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 25px;
}

.idx-knowledge-view-all {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.idx-knowledge-view-all:hover {
  color: #79e0ee;
}

.til-stage {
  perspective: 900px;
  transform-style: preserve-3d;
}

.til-card {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@media (min-width: 1400px) and (max-width: 1700px) {
  .hero-slider-active-1 .hero-side {
    height: 760px;
    padding-top: 215px;
    padding-bottom: 140px;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .hero-slider-active-1 .hero-side {
    height: 750px;
    padding-top: 210px;
    padding-bottom: 135px;
  }

  .gp-language-switcher {
    width: 78px;
    padding-inline: 9px;
    gap: 5px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  .hero-slider-active-1 .hero-side {
    height: 780px;
    padding-top: 220px;
    padding-bottom: 145px;
  }

  .idx-about-brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 26px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .hero-slider-active-1 .hero-side {
    height: 720px;
    padding-top: 210px;
    padding-bottom: 120px;
  }

  .hero-slider-active-1 .hero-content-1 {
    transform: translateY(-15px);
  }

  .idx-about-brands {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
  }
}

@media (max-width: 767px) {
  .hero-slider-active-1 .hero-side {
    height: 640px;
    padding-top: 124px;
    padding-bottom: 105px;
  }

  .hero-slider-active-1 .hero-content-1 {
    transform: translateY(-10px);
  }

  .gp-language-switcher {
    width: 74px;
    height: 40px;
    padding-inline: 8px;
    gap: 5px;
  }

  .idx-about-brands {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 16px;
  }

  .idx-about-brand {
    min-height: 92px;
    padding: 10px 8px;
    border-radius: 16px;
  }

  .idx-about-brand img {
    max-width: 132px;
    height: 60px;
  }

  .completed-project-top .col-md-5 {
    margin-top: 20px;
  }

  .idx-knowledge-heading {
    margin-bottom: 30px;
  }

  .idx-knowledge-heading .common-title h2 {
    font-size: 36px;
  }

  .idx-knowledge-heading > p {
    font-size: 16px;
  }

  .idx-knowledge-banner {
    min-height: 510px;
    align-items: flex-end;
    border-radius: 22px;
  }

  .idx-knowledge-banner-overlay {
    background: linear-gradient(
      0deg,
      rgba(3, 24, 54, 0.98) 0%,
      rgba(3, 24, 54, 0.84) 55%,
      rgba(3, 24, 54, 0.3) 100%
    );
  }

  .idx-knowledge-banner-content {
    width: 100%;
    padding: 34px 25px;
  }

  .idx-knowledge-banner-content h3 {
    font-size: 32px;
  }

  .idx-knowledge-banner-content > p {
    font-size: 16px;
  }

  .idx-knowledge-actions {
    align-items: flex-start;
    gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .idx-about-photo {
    animation: none;
  }

  .idx-about-photo img {
    transition: none;
  }

  .idx-about-brand {
    animation: none;
    transition: none;
  }

  .idx-knowledge-banner-image {
    transition: none;
  }

  .abc-logos {
    transition: none;
  }

  .gp-language-menu {
    animation: none;
  }

  .til-card,
  .til-tab,
  .til-arrow,
  .til-dot {
    transition: none;
  }
}
/* Minimal Animate.css-compatible rules used by the homepage hero. */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated {
  animation-duration: var(--animate-duration);
  animation-fill-mode: both;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  animation-name: fadeInUp;
}

/* Knowledge details: section cards configured as 2 or 3 columns use 16:9 media. */
.kd-grid.kd-cols-2 .kd-card-img,
.kd-grid.kd-cols-3 .kd-card-img {
  aspect-ratio: 16 / 9;
}

/* Knowledge article: open editorial reading layout. */
.kd-editorial {
  --kd-ink: #082340;
  --kd-muted: #66768a;
  --kd-line: #dce6ed;
  --kd-soft: #f4f9fb;
  color: #33465a;
  padding: 48px 0 100px;
}

.kd-editorial-header {
  padding: 12px 0 38px;
}

.kd-editorial-header .container {
  max-width: 980px;
}

.kd-breadcrumb {
  margin-bottom: 38px;
  overflow: hidden;
}

.kd-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--kd-muted);
  font-size: 14px;
}

.kd-breadcrumb li {
  display: inline-flex;
  min-width: 0;
  align-items: center;
}

.kd-breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 10px;
  color: #9aabba;
}

.kd-breadcrumb li:last-child {
  max-width: 420px;
}

.kd-breadcrumb li:last-child span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kd-breadcrumb a {
  color: var(--kd-ink);
}

.kd-breadcrumb a:hover {
  color: #087e94;
}

.kd-editorial-eyebrow,
.kd-continue-heading > span {
  display: block;
  margin-bottom: 12px;
  color: #087e94;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.kd-editorial-header h1 {
  max-width: 920px;
  margin: 0;
  color: var(--kd-ink);
  font-family: var(--outfit-font);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.kd-editorial-deck {
  max-width: 790px;
  margin: 24px 0 0;
  color: #53677c;
  font-size: 20px;
  line-height: 1.65;
}

.kd-editorial-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 25px;
  color: var(--kd-muted);
  font-size: 14px;
}

.kd-editorial-meta span + span {
  position: relative;
}

.kd-editorial-meta span + span::before {
  position: absolute;
  top: 50%;
  left: -15px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #91a3b4;
  content: "";
  transform: translateY(-50%);
}

.kd-editorial-cover {
  margin: 0 0 72px;
  overflow: hidden;
  border-radius: 24px;
  background: var(--kd-soft);
  box-shadow: 0 24px 65px rgba(8, 35, 64, 0.09);
}

.kd-editorial-cover img {
  display: block;
  width: 100%;
  max-height: 680px;
  object-fit: cover;
}

.kd-editorial-layout {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 850px);
  gap: clamp(50px, 7vw, 100px);
  justify-content: center;
  align-items: start;
}

.kd-editorial-layout.without-toc {
  grid-template-columns: minmax(0, 850px);
}

.kd-toc-desktop nav {
  position: sticky;
  top: 125px;
  padding-left: 18px;
  border-left: 2px solid var(--kd-line);
}

.kd-toc-desktop strong {
  display: block;
  margin-bottom: 13px;
  color: var(--kd-ink);
  font-size: 14px;
}

.kd-toc-desktop ol,
.kd-toc-mobile ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kd-toc-desktop li + li {
  margin-top: 9px;
}

.kd-toc-desktop a {
  display: block;
  color: #718195;
  font-size: 13px;
  line-height: 1.4;
}

.kd-toc-desktop a:hover,
.kd-toc-desktop a.is-active {
  color: #087e94;
}

.kd-toc-mobile {
  display: none;
}

.kd-editorial-main section[id] {
  scroll-margin-top: 130px;
}

.kd-editorial-main h2,
.kd-continue-heading h2 {
  margin: 0 0 24px;
  color: var(--kd-ink);
  font-family: var(--outfit-font);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.kd-editorial-main h3 {
  color: var(--kd-ink);
  font-size: 20px;
  line-height: 1.35;
}

.kd-editorial-main p {
  margin: 0;
  color: #53677c;
  font-size: 17px;
  line-height: 1.8;
}

.kd-editorial-main p + p {
  margin-top: 18px;
}

.kd-editorial-intro {
  padding-bottom: 62px;
  border-bottom: 1px solid var(--kd-line);
}

.kd-editorial-intro-media {
  margin: 34px 0 0;
}

.kd-editorial-intro-media > div {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--kd-soft);
}

.kd-editorial-intro-media .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-flex;
  width: 72px;
  height: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--kd-ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 30px rgba(8, 35, 64, 0.28);
}

.kd-editorial-intro-media .play-btn:hover {
  background: #087e94;
  color: #fff;
}

.kd-editorial-intro-media img,
.kd-section-image img {
  display: block;
  width: 100%;
}

.kd-editorial-intro-media figcaption {
  margin-top: 10px;
  color: var(--kd-muted);
  font-size: 13px;
}

.kd-editorial-section,
.kd-additional-body,
.kd-faq-section {
  padding: 62px 0 0;
}

.kd-section-image {
  margin: 0 0 28px;
  overflow: hidden;
  border-radius: 18px;
}

.kd-editorial-grid {
  display: grid;
  gap: 24px;
}

.kd-editorial-grid.kd-cols-1 {
  grid-template-columns: 1fr;
}

.kd-editorial-grid.kd-cols-2,
.kd-editorial-grid.kd-cols-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kd-editorial-grid.kd-cols-3,
.kd-editorial-grid.kd-cols-5 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kd-editorial-card {
  overflow: hidden;
  border: 1px solid var(--kd-line);
  border-radius: 16px;
  background: #fff;
}

.kd-editorial-card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--kd-soft);
}

.kd-editorial-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kd-editorial-card h3,
.kd-editorial-card > p {
  margin-right: 20px;
  margin-left: 20px;
}

.kd-editorial-card h3 {
  margin-top: 20px;
  margin-bottom: 9px;
}

.kd-editorial-card > p {
  margin-top: 0;
  margin-bottom: 22px;
  font-size: 15px;
  line-height: 1.65;
}

.kd-editorial-card.is-text-only {
  padding-top: 2px;
  background: var(--kd-soft);
}

.kd-editorial-grid.is-single .kd-editorial-card.is-text-only {
  padding: 24px 28px;
  border: 0;
  border-left: 4px solid #65c7d4;
  border-radius: 0 14px 14px 0;
}

.kd-editorial-grid.is-single .kd-editorial-card.is-text-only h3,
.kd-editorial-grid.is-single .kd-editorial-card.is-text-only > p {
  margin-left: 0;
  margin-right: 0;
}

.kd-editorial-grid.is-single .kd-editorial-card.is-text-only h3 {
  margin-top: 0;
}

.kd-editorial-grid.is-single .kd-editorial-card.is-text-only > p {
  margin-bottom: 0;
  font-size: 17px;
}

.kd-product-cta {
  margin-top: 64px;
}

.kd-additional-body .kd-h2 {
  margin-top: 48px;
}

.kd-additional-body .kd-h3 {
  margin: 32px 0 12px;
}

.kd-additional-body .kd-p + .kd-h2,
.kd-additional-body .kd-p + .kd-h3 {
  margin-top: 40px;
}

.kd-faq-list {
  border-top: 1px solid var(--kd-line);
}

.kd-faq-item {
  border-bottom: 1px solid var(--kd-line);
}

.kd-faq-item h3 {
  margin: 0;
}

.kd-faq-item button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  border: 0;
  background: transparent;
  color: var(--kd-ink);
  font: inherit;
  font-size: 18px;
  font-weight: 600;
  text-align: left;
}

.kd-faq-item button i {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.kd-faq-item button i::before,
.kd-faq-item button i::after {
  position: absolute;
  top: 8px;
  left: 2px;
  width: 14px;
  height: 2px;
  background: #087e94;
  content: "";
  transition: transform 0.2s ease;
}

.kd-faq-item button i::after {
  transform: rotate(90deg);
}

.kd-faq-item button[aria-expanded="true"] i::after {
  transform: rotate(0);
}

.kd-faq-answer {
  padding: 0 48px 23px 0;
}

.kd-faq-answer.is-static {
  padding-top: 20px;
}

.kd-article-footer {
  display: flex;
  gap: 9px;
  margin-top: 60px;
  padding-top: 22px;
  border-top: 1px solid var(--kd-line);
  color: var(--kd-muted);
  font-size: 14px;
}

.kd-article-footer a {
  color: #087e94;
  font-weight: 700;
}

.kd-continue {
  margin-top: 90px;
  padding: 80px 0;
  background: var(--kd-soft);
}

.kd-continue-heading {
  margin-bottom: 35px;
}

.kd-continue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.kd-continue-card {
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(8, 35, 64, 0.07);
}

.kd-continue-image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.kd-continue-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kd-continue-card > div {
  padding: 24px;
}

.kd-continue-card span {
  color: #087e94;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kd-continue-card h3 {
  margin: 8px 0 10px;
  font-size: 21px;
  line-height: 1.35;
}

.kd-continue-card h3 a {
  color: var(--kd-ink);
}

.kd-continue-card p {
  margin: 0;
  color: var(--kd-muted);
  font-size: 15px;
  line-height: 1.6;
}

.kd-editorial-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin-top: 58px;
}

.kd-editorial-pagination a {
  display: flex;
  flex-direction: column;
  padding: 22px 0;
  border-top: 1px solid var(--kd-line);
}

.kd-editorial-pagination a.is-next {
  align-items: flex-end;
  text-align: right;
}

.kd-editorial-pagination a span {
  margin-bottom: 6px;
  color: var(--kd-muted);
  font-size: 13px;
  text-transform: uppercase;
}

.kd-editorial-pagination a strong {
  color: var(--kd-ink);
  font-size: 17px;
}

@media (max-width: 991px) {
  .kd-editorial {
    padding-top: 30px;
  }

  .kd-editorial-cover {
    margin-bottom: 42px;
    border-radius: 18px;
  }

  .kd-editorial-layout {
    display: block;
  }

  .kd-toc-desktop {
    display: none;
  }

  .kd-toc-mobile {
    display: block;
    max-width: 850px;
    margin: 0 auto 40px;
    border: 1px solid var(--kd-line);
    border-radius: 13px;
    background: #fff;
  }

  .kd-toc-mobile summary {
    padding: 16px 18px;
    color: var(--kd-ink);
    font-weight: 700;
    cursor: pointer;
  }

  .kd-toc-mobile ol {
    padding: 0 18px 16px;
  }

  .kd-toc-mobile li + li {
    margin-top: 8px;
  }

  .kd-toc-mobile a {
    color: var(--kd-muted);
    font-size: 14px;
  }

  .kd-editorial-main {
    max-width: 850px;
    margin: 0 auto;
  }

  .kd-editorial-grid.kd-cols-3,
  .kd-editorial-grid.kd-cols-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kd-continue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .kd-editorial {
    padding: 20px 0 70px;
  }

  .kd-breadcrumb {
    margin-bottom: 26px;
  }

  .kd-breadcrumb li:last-child {
    max-width: 190px;
  }

  .kd-editorial-header {
    padding-bottom: 28px;
  }

  .kd-editorial-header h1 {
    font-size: clamp(36px, 11vw, 48px);
  }

  .kd-editorial-deck {
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.6;
  }

  .kd-editorial-meta {
    display: grid;
    gap: 5px;
    margin-top: 18px;
  }

  .kd-editorial-meta span + span::before {
    display: none;
  }

  .kd-editorial-cover {
    margin-bottom: 30px;
    border-radius: 14px;
  }

  .kd-toc-mobile {
    margin-bottom: 30px;
  }

  .kd-editorial-main h2,
  .kd-continue-heading h2 {
    font-size: 30px;
  }

  .kd-editorial-main p {
    font-size: 16px;
  }

  .kd-editorial-intro {
    padding-bottom: 46px;
  }

  .kd-editorial-section,
  .kd-additional-body,
  .kd-faq-section {
    padding-top: 46px;
  }

  .kd-editorial-grid,
  .kd-editorial-grid.kd-cols-2,
  .kd-editorial-grid.kd-cols-3,
  .kd-editorial-grid.kd-cols-4,
  .kd-editorial-grid.kd-cols-5 {
    grid-template-columns: 1fr;
  }

  .kd-editorial-grid.is-single .kd-editorial-card.is-text-only {
    padding: 20px;
  }

  .kd-faq-item button {
    padding: 19px 0;
    font-size: 17px;
  }

  .kd-faq-answer {
    padding-right: 18px;
  }

  .kd-continue {
    margin-top: 65px;
    padding: 58px 0;
  }

  .kd-continue-grid,
  .kd-editorial-pagination {
    grid-template-columns: 1fr;
  }

  .kd-editorial-pagination {
    gap: 10px;
  }
}


/* ===== Client revision: GPI website 2026-09-29 ===== */
/* Remove decorative GPI/section mark while preserving main navbar/footer brand. */
.common-subtitle > img { display:none !important; }
.common-subtitle { gap:0 !important; }

/* Homepage brand strip */
.idx-about-brands { align-items:center; }
.idx-about-brand { display:flex; align-items:center; justify-content:center; min-height:64px; }
.idx-about-brand img { max-height:46px; width:auto; object-fit:contain; }
.idx-about-brand:nth-child(1) img { max-height:58px; transform:scale(1.12); }
.idx-about-brand-wordmark { font-family:"Outfit",sans-serif; font-size:24px; font-weight:700; letter-spacing:-.04em; color:#123c73; white-space:nowrap; }

/* Our Product homepage: card style matched to approved reference */
.what-we-do-section-2 .section-top-3 .right .service-btn { margin-top:18px; padding:14px 22px; font-size:16px; font-weight:700; }
.we-do-card { min-height:382px; display:flex; flex-direction:column; overflow:hidden; background:#fff; border-radius:24px; border:1px solid rgba(230,238,246,.9); box-shadow:0 18px 46px rgba(7,26,52,.16); }
.we-do-card .card-thumb { display:block; padding:14px 14px 0; text-decoration:none; line-height:0; }
.we-do-card .card-thumb img { width:100%; height:256px; border-radius:18px; object-fit:cover; object-position:center; display:block; }
.we-do-card .card-content { display:flex; align-items:center; gap:11px; padding:13px 16px 15px !important; min-height:auto !important; text-decoration:none; color:#0b2c52; line-height:1; }
.we-do-card .card-content h5 { margin:0; flex:1; font-size:11.25px; line-height:1; font-weight:800; color:#0b2c52; white-space:nowrap; display:flex; align-items:center; align-self:center; }
.we-do-card-icon { width:32px; min-width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#ecf5fe; overflow:hidden; }
.we-do-card-icon img { width:100%; height:100%; object-fit:contain; display:block; }
.we-do-card-divider { width:1px; height:24px; background:#d6e0ea; flex:0 0 auto; }
.we-do-card-arrow { width:12px; min-width:12px; height:12px; display:inline-flex; align-items:center; justify-content:center; background:transparent; color:#0f3159; font-size:7px; transition:transform .22s ease, color .22s ease; }
.we-do-card:hover .we-do-card-arrow { transform:translateX(3px); color:#287ad0; }

/* Awards: force medal image to fill cell like other images */
.ntr-collage .ntr-cell-medal { background:transparent; }
.ntr-collage .ntr-cell-medal img { width:100%; height:100%; object-fit:cover; object-position:center; padding:0; transform:scale(1.12); background:transparent; }
.ntr-content .nav-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 8px; }
.ntr-content .nav-tabs .nav-item { width:100%; }
.ntr-content .nav-tabs .nav-link { width:100%; min-height:34px; padding:5px 10px; text-align:center; font-size:13px; line-height:1.08; white-space:normal; border-radius:999px; }
.ntr-btns { display:none !important; }

/* Partner carousel: centered logo, no blue accent/underline */
.til-card { display:flex; align-items:center; justify-content:center; background:#fff !important; }
.til-card img { margin:auto; object-position:center; filter:none !important; }
.til-card[data-active="true"] { border-color:#e6ebf1 !important; box-shadow:0 12px 35px rgba(13,35,65,.10) !important; }
.til-card[data-active="true"]::after { display:none !important; }

/* About image motion + factory/journey image brighter and less blue */
.who-we-are-media { overflow:hidden; }
.who-we-are-media img { transition:transform .55s ease, filter .55s ease; }
.who-we-are-media:hover img { transform:scale(1.055) translateY(-4px); filter:brightness(1.04); }
.ab-jr-bigcard img { filter:brightness(1.13) saturate(.78) contrast(.96); transition:transform .55s ease,filter .55s ease; }
.ab-jr-bigcard:hover img { transform:scale(1.035); filter:brightness(1.18) saturate(.82) contrast(.96); }
.ab-tl { overflow-x:auto; overflow-y:hidden; padding-bottom:10px; scrollbar-width:thin; }
.ab-tl-track { min-width:max-content; display:flex; }
.ab-tl-item { min-width:92px; flex:0 0 92px; }

/* Product listing: typographic brand, larger brighter product image */
.gp-card-body { padding-bottom:4px !important; }
.gp-card-brand-text { display:block; margin-top:12px; font-family:"Outfit",sans-serif; font-weight:700; font-size:17px; letter-spacing:-.02em; color:#18477d; text-transform:none; }
.gp-card-thumb { min-height:250px !important; padding:6px 12px 12px !important; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.gp-card-thumb img { width:100% !important; height:245px !important; object-fit:contain !important; transform:scale(1.13); filter:brightness(1.10) contrast(.98); }

/* Events: no third-party people photography. Typography-led graphic tile. */
.event-graphic { min-height:245px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; text-decoration:none; background:linear-gradient(145deg,#f4f8fc 0%,#e7f2fb 55%,#f8fbfd 100%); border-bottom:1px solid #dfeaf3; position:relative; overflow:hidden; }
.event-graphic-has-image { padding:0; min-height:245px; background:#eef5fb; }
.event-graphic-has-image img { width:100%; height:100%; min-height:245px; object-fit:cover; display:block; }
.event-graphic::after { content:""; width:170px; height:170px; border:28px solid rgba(30,99,160,.08); border-radius:50%; position:absolute; right:-60px; bottom:-70px; }
.event-graphic-brand { font-size:12px; letter-spacing:.16em; font-weight:800; color:#2974b8; }
.event-graphic strong { max-width:75%; font-size:30px; line-height:1; color:#0b3158; text-transform:uppercase; position:relative; z-index:1; }
.event-graphic small { color:#59748d; font-weight:700; position:relative; z-index:1; }
.idx-event-card .event-graphic { min-height:235px; }

/* Contact: no clipped address/phone on map; give location module more room */
.gp-point .gp-card p { display:none !important; }
.gp-loc { margin-top:28px; }
.gp-loc-body { grid-template-columns:minmax(190px,.85fr) minmax(0,1.45fr) !important; gap:24px !important; padding:26px !important; }
.gp-loc-cities { gap:8px 18px !important; }
.gp-loc-detail { min-width:0; gap:18px !important; }
.gp-loc-photo { width:150px !important; min-width:150px; height:118px !important; }
@media(max-width:991px){ .gp-loc-body{grid-template-columns:1fr !important}.gp-loc-photo{width:130px!important;min-width:130px}.event-graphic{min-height:210px}.event-graphic strong{font-size:25px}.ntr-content .nav-tabs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:575px){ .gp-loc-detail{flex-direction:column}.gp-loc-photo{width:100%!important;height:180px!important}.gp-card-thumb img{height:220px!important}.idx-about-brand-wordmark{font-size:20px}.ntr-content .nav-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.ntr-content .nav-tabs .nav-link{font-size:12px;padding:5px 7px;min-height:32px} }

/* ===== Client revision follow-up: 2026-09-30 ===== */
/* Brand wordmarks: equal visual footprint. First Care uses teal typography. */
.idx-about-brand {
  width: 150px;
  min-width: 150px;
  min-height: 64px;
}
.idx-about-brand img,
.idx-about-brand:nth-child(1) img {
  width: 122px !important;
  height: 34px !important;
  max-width: 122px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  transform: none !important;
}
.idx-about-brand-wordmark {
  width: 122px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px !important;
  line-height: 1;
  color: #0b8f91 !important;
}

/* Make catalogue action read as a clear CTA button. */
.what-we-do-section-2 .idx-catalog-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 50px;
  padding: 13px 22px !important;
  border-radius: 999px;
  background: #70dbe0;
  color: #0a1f3d !important;
  border: 1px solid #70dbe0;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  text-decoration: none;
}
.what-we-do-section-2 .idx-catalog-cta:hover {
  background: #ffffff;
  border-color: #ffffff;
}

/* Contact / Our Location: text-only detail, no location photography. */
.gp-loc-detail {
  display: block !important;
}
.gp-loc-photo {
  display: none !important;
}
.gp-loc-info {
  width: 100%;
}

/* Product listing: restore neutral white product presentation; no brightness filter. */
.gp-card,
.gp-card-thumb {
  background: #ffffff !important;
}
.gp-card-thumb img {
  filter: none !important;
  transform: translate(var(--product-image-offset-x, 0), var(--product-image-offset-y, 0)) scale(var(--product-image-zoom, 1)) !important;
  transform-origin: center center;
}
.gp-card:hover .gp-card-thumb img {
  transform: translate(var(--product-image-offset-x, 0), var(--product-image-offset-y, 0)) scale(calc(var(--product-image-zoom, 1) * 1.03)) !important;
}

/* Product details: pure white image stage; gallery image #2 is 10% closer. */
.pdx-stage {
  background: #ffffff !important;
}
.pdx-stage::before {
  display: none !important;
}
.pdx-stage img.pdx-image-two {
  transform: scale(1.10);
}

@media (max-width: 575px) {
  .idx-about-brand { width: 125px; min-width: 125px; }
  .idx-about-brand img,
  .idx-about-brand:nth-child(1) img,
  .idx-about-brand-wordmark { width: 106px !important; max-width: 106px !important; }
}


/* ===== GP21 client follow-up: 2026-09-30 ===== */
/* Index / Product CTA: white pill with navy copy; teal hover keeps strong contrast. */
.what-we-do-section-2 .idx-catalog-cta {
  background: #ffffff !important;
  color: #0a1f3d !important;
  border-color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.what-we-do-section-2 .idx-catalog-cta .icon-wrap,
.what-we-do-section-2 .idx-catalog-cta .icon,
.what-we-do-section-2 .idx-catalog-cta i {
  color: #0a1f3d !important;
}
.what-we-do-section-2 .idx-catalog-cta:hover {
  background: #70dbe0 !important;
  color: #0a1f3d !important;
  border-color: #70dbe0 !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .20);
}

/* Product detail category panel: typography + count only, no decorative category icons. */
.pdx-cat-item {
  gap: 10px;
}
.pdx-cat-icon {
  display: none !important;
}

/* Journey: modern milestone carousel, no visible native horizontal scrollbar. */
.ab-tl {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  padding: 10px;
  border: 1px solid rgba(14, 42, 79, .08);
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 14px 34px rgba(14,42,79,.06);
  backdrop-filter: blur(10px);
}
.ab-tl-viewport {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ab-tl-viewport::-webkit-scrollbar {
  display: none;
}
.ab-tl-track {
  width: max-content;
  min-width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  padding: 4px 6px;
}
.ab-tl-track::before {
  left: 44px;
  right: 44px;
  top: 22px;
  height: 2px;
  background: linear-gradient(90deg, #d9e5f2 0%, #bdd6ef 50%, #d9e5f2 100%);
}
.ab-tl-item {
  flex: 0 0 88px;
  min-width: 88px;
  scroll-snap-align: center;
  padding: 0 4px 4px;
}
.ab-tl-dot {
  width: 38px;
  height: 38px;
  margin-bottom: 8px;
  border: 5px solid rgba(255,255,255,.95);
  box-shadow: 0 0 0 1px rgba(14,42,79,.08);
}
.ab-tl-item:hover .ab-tl-dot {
  background: #cfe1f3;
  transform: scale(1.06);
}
.ab-tl-item.active .ab-tl-dot {
  background: #0e2a4f;
  box-shadow: 0 0 0 5px rgba(45,124,217,.12), 0 8px 18px rgba(14,42,79,.18);
}
.ab-tl-year {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .01em;
  transition: .2s ease;
}
.ab-tl-item.active .ab-tl-year {
  color: #0a1f3d;
  background: #e8f2fb;
}
.ab-tl-nav {
  width: 42px;
  height: 42px;
  border: 1px solid #dbe7f2;
  border-radius: 50%;
  background: #ffffff;
  color: #0a1f3d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 3;
  box-shadow: 0 8px 18px rgba(14,42,79,.08);
  transition: .2s ease;
}
.ab-tl-nav:hover:not(:disabled) {
  background: #0a1f3d;
  color: #ffffff;
  border-color: #0a1f3d;
  transform: translateY(-1px);
}
.ab-tl-nav:disabled {
  opacity: .32;
  cursor: default;
  box-shadow: none;
}
@media (max-width: 575px) {
  .ab-tl {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 6px;
    padding: 8px;
  }
  .ab-tl-nav {
    width: 36px;
    height: 36px;
  }
  .ab-tl-item {
    flex-basis: 78px;
    min-width: 78px;
  }
}


/* GP22 — Contact map points are static; no mouseover/focus effect */
.global-presence-section .gp-point {
  cursor: default !important;
  pointer-events: none !important;
}
.global-presence-section .gp-point .gp-card {
  display: none !important;
}
.global-presence-section .gp-point:hover,
.global-presence-section .gp-point:focus,
.global-presence-section .gp-point:focus-within {
  z-index: 4 !important;
}
.global-presence-section .gp-point:hover .gp-dot,
.global-presence-section .gp-point:focus .gp-dot,
.global-presence-section .gp-point:focus-within .gp-dot {
  background: #2d7cd9 !important;
  box-shadow: 0 0 0 1px rgba(45, 124, 217, 0.16) !important;
}


@media(max-width:991px){
  .idx-featured-articles-grid{grid-template-columns:1fr;gap:26px}
  .idx-featured-article-card{grid-template-columns:180px minmax(0,1fr);padding:0 0 26px;border-bottom:1px solid #e3eaf1}
  .idx-featured-article-card + .idx-featured-article-card{border-left:0;padding-left:0;padding-top:0;border-bottom:0}
  .idx-featured-article-card-image{width:180px;height:214px}
  .event-graphic-has-image img{min-height:220px}
}
@media(max-width:575px){
  .idx-featured-article-card{grid-template-columns:120px minmax(0,1fr);gap:14px;min-height:0}
  .idx-featured-article-card-image{width:120px;height:156px}
  .idx-featured-article-card-kicker{font-size:9px;margin-bottom:7px}
  .idx-featured-article-card-content h3{font-size:16px;margin-bottom:8px}
  .idx-featured-article-card-content p{font-size:12px;line-height:1.5;-webkit-line-clamp:4}
  .idx-featured-article-link{font-size:11px;margin-top:10px;padding-top:9px}
  .event-graphic-has-image,.event-graphic-has-image img{min-height:200px}
}


@media (max-width: 991px) {
  .we-do-card { min-height:360px; }
  .we-do-card .card-thumb img { height:225px; }
  .we-do-card .card-content h5 { font-size:11.25px; }
}
@media (max-width: 767px) {
  .we-do-card { min-height:318px; border-radius:20px; }
  .we-do-card .card-thumb { padding:12px 12px 0; }
  .we-do-card .card-thumb img { height:185px; border-radius:16px; }
  .we-do-card .card-content { gap:9px; padding:12px 13px 14px !important; }
  .we-do-card-icon { width:30px; min-width:30px; height:30px; }
  .we-do-card-divider { height:22px; }
  .we-do-card .card-content h5 { font-size:10.5px; white-space:nowrap; }
  .we-do-card-arrow { width:11px; min-width:11px; height:11px; font-size:6.5px; }
}

@media(max-width:575px){.idx-featured-product-knowledge-head{margin-top:28px;margin-bottom:16px}.idx-featured-product-knowledge-head h3{font-size:22px}}


/* Legal pages */
.legal-page{background:#f7faff;padding:70px 0 110px}
.legal-shell{max-width:1120px;margin:0 auto;padding:0 24px}
.legal-hero{margin-bottom:28px;padding:34px 38px;border-radius:22px;background:linear-gradient(135deg,#edf6ff,#dcecfb);border:1px solid #d9e7f4}
.legal-hero .eyebrow{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#287ad0;margin-bottom:10px}
.legal-hero h1{margin:0;color:#0b2f57;font-family:var(--outfit-font);font-size:46px;line-height:1.05}
.legal-hero p{margin:12px 0 0;color:#63778b;font-size:14px}
.legal-card{background:#fff;border:1px solid #e4edf5;border-radius:22px;padding:40px;box-shadow:0 14px 38px rgba(20,59,99,.07)}
.legal-content h2{font-family:var(--outfit-font);font-size:24px;color:#0b2f57;margin:32px 0 12px}
.legal-content h2:first-child{margin-top:0}
.legal-content p,.legal-content li{font-size:15px;line-height:1.8;color:#536a80}
.legal-content ul{padding-left:22px;margin:10px 0 18px}
.legal-content a{color:#287ad0}
@media(max-width:767px){.legal-page{padding:46px 0 70px}.legal-shell{padding:0 16px}.legal-hero{padding:26px 24px}.legal-hero h1{font-size:34px}.legal-card{padding:26px 22px}.legal-content h2{font-size:21px}}

/* GP30 — Homepage product card footer precision fix */
.what-we-do-section-2 .we-do-card .card-content {
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 14px 11px !important;
  min-height:52px !important;
  line-height:1 !important;
}
.what-we-do-section-2 .we-do-card .card-content h5 {
  margin:0 !important;
  padding:0 !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  font-size:8.5px !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:#0b2c52 !important;
  white-space:nowrap !important;
  display:flex !important;
  align-items:center !important;
  height:26px !important;
  transform:none !important;
}
.what-we-do-section-2 .we-do-card .we-do-card-icon {
  width:26px !important;
  min-width:26px !important;
  height:26px !important;
  align-self:center !important;
}
.what-we-do-section-2 .we-do-card .we-do-card-divider {
  height:20px !important;
  align-self:center !important;
}
.what-we-do-section-2 .we-do-card .we-do-card-arrow {
  width:7px !important;
  min-width:7px !important;
  height:7px !important;
  font-size:3.5px !important;
  line-height:1 !important;
  align-self:center !important;
  margin-left:auto !important;
  transform:none !important;
}
.what-we-do-section-2 .we-do-card:hover .we-do-card-arrow {
  transform:translateX(1px) !important;
}
@media (max-width:767px) {
  .what-we-do-section-2 .we-do-card .card-content { min-height:48px !important; padding:9px 12px 10px !important; gap:7px !important; }
  .what-we-do-section-2 .we-do-card .card-content h5 { font-size:8px !important; height:24px !important; }
  .what-we-do-section-2 .we-do-card .we-do-card-icon { width:24px !important; min-width:24px !important; height:24px !important; }
  .what-we-do-section-2 .we-do-card .we-do-card-divider { height:18px !important; }
  .what-we-do-section-2 .we-do-card .we-do-card-arrow { width:6px !important; min-width:6px !important; height:6px !important; font-size:3px !important; }
}

/* GP31 — Product card footer proportion correction */
.what-we-do-section-2 .we-do-card .card-content {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px 14px !important;
  min-height:58px !important;
}
.what-we-do-section-2 .we-do-card .card-content h5 {
  margin:0 !important;
  padding:0 !important;
  font-size:14px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
  height:auto !important;
  min-height:34px !important;
  display:flex !important;
  align-items:center !important;
  white-space:nowrap !important;
  transform:none !important;
}
.what-we-do-section-2 .we-do-card .we-do-card-icon {
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.what-we-do-section-2 .we-do-card .we-do-card-icon img {
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
.what-we-do-section-2 .we-do-card .we-do-card-divider {
  height:26px !important;
}
.what-we-do-section-2 .we-do-card .we-do-card-arrow {
  width:16px !important;
  min-width:16px !important;
  height:16px !important;
  margin-left:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  background:transparent !important;
}
.what-we-do-section-2 .we-do-card .we-do-card-arrow i,
.what-we-do-section-2 .we-do-card .we-do-card-arrow .fa-regular,
.what-we-do-section-2 .we-do-card .we-do-card-arrow .fa-arrow-right {
  font-size:14px !important;
  line-height:1 !important;
  width:auto !important;
  height:auto !important;
  transform:none !important;
}
.what-we-do-section-2 .we-do-card:hover .we-do-card-arrow {
  transform:translateX(2px) !important;
}
@media (max-width:767px) {
  .what-we-do-section-2 .we-do-card .card-content {
    min-height:54px !important;
    padding:10px 12px !important;
    gap:9px !important;
  }
  .what-we-do-section-2 .we-do-card .card-content h5 {
    font-size:13px !important;
    min-height:32px !important;
  }
  .what-we-do-section-2 .we-do-card .we-do-card-icon {
    width:32px !important;
    min-width:32px !important;
    height:32px !important;
  }
  .what-we-do-section-2 .we-do-card .we-do-card-divider {
    height:24px !important;
  }
  .what-we-do-section-2 .we-do-card .we-do-card-arrow {
    width:15px !important;
    min-width:15px !important;
    height:15px !important;
  }
  .what-we-do-section-2 .we-do-card .we-do-card-arrow i,
  .what-we-do-section-2 .we-do-card .we-do-card-arrow .fa-regular,
  .what-we-do-section-2 .we-do-card .we-do-card-arrow .fa-arrow-right {
    font-size:13px !important;
  }
}


/* GP32 — Homepage product card final proportion + contained hover */
.what-we-do-section-2 .we-do-card {
  min-height:0 !important;
  height:auto !important;
}
.what-we-do-section-2 .we-do-card .card-thumb {
  overflow:hidden !important;
  border-radius:18px !important;
  margin:14px 14px 0 !important;
  padding:0 !important;
  line-height:0 !important;
}
.what-we-do-section-2 .we-do-card .card-thumb img {
  width:100% !important;
  height:256px !important;
  border-radius:18px !important;
  object-fit:cover !important;
  display:block !important;
  transform:scale(1) !important;
  transition:transform .35s ease !important;
}
.what-we-do-section-2 .we-do-card:hover .card-thumb img {
  transform:scale(1.045) !important;
}
.what-we-do-section-2 .we-do-card .card-content {
  min-height:62px !important;
  padding:10px 14px 11px !important;
  gap:11px !important;
}
.what-we-do-section-2 .we-do-card .card-content h5 {
  font-size:17px !important;
  line-height:1 !important;
  min-height:41px !important;
}
.what-we-do-section-2 .we-do-card .we-do-card-icon {
  width:41px !important;
  min-width:41px !important;
  height:41px !important;
}
.what-we-do-section-2 .we-do-card .we-do-card-divider {
  height:30px !important;
}
.what-we-do-section-2 .we-do-card .we-do-card-arrow {
  width:20px !important;
  min-width:20px !important;
  height:20px !important;
}
.what-we-do-section-2 .we-do-card .we-do-card-arrow i,
.what-we-do-section-2 .we-do-card .we-do-card-arrow .fa-regular,
.what-we-do-section-2 .we-do-card .we-do-card-arrow .fa-arrow-right {
  font-size:17px !important;
}
@media (max-width:767px) {
  .what-we-do-section-2 .we-do-card .card-thumb {
    margin:12px 12px 0 !important;
    border-radius:16px !important;
  }
  .what-we-do-section-2 .we-do-card .card-thumb img {
    height:185px !important;
    border-radius:16px !important;
  }
  .what-we-do-section-2 .we-do-card .card-content {
    min-height:58px !important;
    padding:9px 12px 10px !important;
    gap:9px !important;
  }
  .what-we-do-section-2 .we-do-card .card-content h5 {
    font-size:15.6px !important;
    min-height:38px !important;
  }
  .what-we-do-section-2 .we-do-card .we-do-card-icon {
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
  }
  .what-we-do-section-2 .we-do-card .we-do-card-divider { height:28px !important; }
  .what-we-do-section-2 .we-do-card .we-do-card-arrow {
    width:18px !important;
    min-width:18px !important;
    height:18px !important;
  }
  .what-we-do-section-2 .we-do-card .we-do-card-arrow i,
  .what-we-do-section-2 .we-do-card .we-do-card-arrow .fa-regular,
  .what-we-do-section-2 .we-do-card .we-do-card-arrow .fa-arrow-right {
    font-size:15.6px !important;
  }
}


/* ===== GP18 continuation revision: 2026-10-02 ===== */
/* Product detail gallery: reuse admin product zoom setting without changing card/stage layout. */
.pdx-stage img#pdxMainImage {
  transform: scale(var(--product-detail-image-zoom, 1)) !important;
  transform-origin: center center;
}
.pdx-stage img#pdxMainImage.pdx-image-two {
  transform: scale(var(--product-detail-image-zoom, 1)) !important;
}

/* Other products: each related card uses its own saved product zoom; layout stays unchanged. */
.pdx-pthumb img {
  transform: scale(var(--product-related-image-zoom, 1)) !important;
  transform-origin: center center;
}
.pdx-pcard:hover .pdx-pthumb img {
  transform: scale(calc(var(--product-related-image-zoom, 1) * 1.06)) !important;
}

/* Product detail category panel: use same category icon images as homepage Our Product. */
.pdx-cat-item { gap: 12px; }
.pdx-cat-icon {
  display: flex !important;
  overflow: hidden;
  background: #eef6fd;
}
.pdx-cat-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: none !important;
}
.pdx-cat-item.active .pdx-cat-icon img { filter: none !important; }

/* Who We Are / journey: preserve original uploaded image color and remove visual shadow/overlay treatment. */
.ab-jr-bigcard img,
.ab-jr-bigcard:hover img,
.ab-jr-smallcard img {
  filter: none !important;
}
.ab-jr-bigcard::after { display: none !important; }
.ab-jr-smallcard { box-shadow: none !important; }


/* Product listing (mobile): two cards per row with the desktop proportions
   (322 x 386 scaled to ~166 x 199 on a 375px screen). Content scaled ~52%. */
@media (max-width: 575px) {
  .gp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; }
  .gp-card { aspect-ratio: 322 / 386; border-radius: 10px; }
  .gp-card-body { padding: 12px 12px 2px !important; }
  .gp-card-title { font-size: 14px !important; line-height: 1.25 !important; margin: 0 !important; }
  .gp-card-brand-text { font-size: 10px !important; margin-top: 4px !important; }
  .gp-card-thumb { flex: 1 1 auto; height: auto !important; min-height: 0 !important; padding: 4px 8px 8px !important; }
  .gp-card-thumb img {
    height: 100% !important; max-height: none !important;
    transform: translate(calc(var(--product-image-offset-x, 0px) * .52), calc(var(--product-image-offset-y, 0px) * .52)) scale(var(--product-image-zoom, 1)) !important;
  }
  .gp-card:hover .gp-card-thumb img {
    transform: translate(calc(var(--product-image-offset-x, 0px) * .52), calc(var(--product-image-offset-y, 0px) * .52)) scale(calc(var(--product-image-zoom, 1) * 1.03)) !important;
  }
}

/* Product listing (mobile): brand & category filters as dropdowns instead of chip lists. */
.gp-select-wrap { display: none; }
@media (max-width: 767px) {
  .gp-band-filters .gp-chips { display: none !important; }
  .gp-band-filters { gap: 16px !important; }
  .gp-filter-col:first-child { padding-bottom: 16px !important; }
  .gp-filter-label { margin-bottom: 10px; }
  .gp-select-wrap { display: block; position: relative; }
  .gp-select-wrap::after {
    content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px;
    border-right: 2px solid rgba(255, 255, 255, .85); border-bottom: 2px solid rgba(255, 255, 255, .85);
    transform: translateY(-70%) rotate(45deg); pointer-events: none;
  }
  .gp-filter-select {
    width: 100%; height: 48px; padding: 0 46px 0 20px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: rgba(255, 255, 255, .06); color: #fff;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 100px;
    font-family: "DM Sans", sans-serif; font-size: 15px; line-height: 1; cursor: pointer;
  }
  .gp-filter-select:focus { outline: none; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .1); }
  .gp-filter-select option { color: #0a2342; background: #fff; }
}


/* Trusted by Industry Leaders: arrows only (the dot pagination got too long with many logos). */
.til-dots { display: none !important; }


/* =====================================================================
   Logo frames (Admin → Partner logos / Home → Brands → Adjust)
   Every logo sits in a frame of the same shape, so the zoom and position
   saved in the admin look the same in every place:
     partner logos 16:10 · brand logos 61:17 (122 × 34)
   ===================================================================== */
.til-card img {
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
}

.abc-logo {
  overflow: hidden;
}

.abc-logo img {
  width: min(100%, 179px);
  height: auto;
  max-width: none;
  max-height: none;
  aspect-ratio: 16 / 10;
  object-fit: contain;
}

/* brand strip: the 122 × 34 frame from the 2026-09-30 revision (106 px wide on phones) */
.idx-about-brand img,
.idx-about-brand:nth-child(1) img {
  width: 122px !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: 61 / 17;
  object-fit: contain !important;
}

@media (max-width: 575px) {
  .idx-about-brand img,
  .idx-about-brand:nth-child(1) img {
    width: 106px !important;
  }
}

/* zoom + position saved per logo (inline --lf-z / --lf-x / --lf-y) */
.til-card img.lf,
.abc-logo img.lf,
.idx-about-brand img.lf,
.idx-about-brand:nth-child(1) img.lf {
  transform: translate(var(--lf-x, 0%), var(--lf-y, 0%)) scale(var(--lf-z, 1)) !important;
  transform-origin: center;
}


/* =====================================================================
   Loading screen (2026-10-28): bigger Global Pharma emblem
   The emblem file is tight (no empty space), so the width is the logo width.
   ===================================================================== */
.preloader {
  width: clamp(190px, 20vw, 260px);
}

.preloader img {
  display: block;
  width: 100%;
  height: auto;
}

/* =====================================================================
   Events page: category filter (All articles / Roadshow / Event)
   ===================================================================== */
.ev-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 28px;
  padding: 12px 14px 12px 20px;
  border: 1px solid #e3ebf5;
  border-radius: 16px;
  background: #f6f9fd;
}

.ev-filter-count {
  font-size: 15px;
  font-weight: 600;
  color: #5b6b7d;
}

.ev-filter-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0a2342;
}

.ev-filter-select select {
  min-width: 210px;
  padding: 11px 42px 11px 16px;
  border: 1px solid #cfdcec;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-weight: 600;
  color: #0a2342;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.ev-filter-select select:focus-visible {
  outline: 2px solid #1b6fe0;
  outline-offset: 2px;
}

.ev-filter-select i {
  position: absolute;
  right: 16px;
  font-size: 12px;
  color: #1b6fe0;
  pointer-events: none;
}

.ev-filter-empty {
  margin: 30px 0 0;
  padding: 30px;
  border-radius: 16px;
  background: #f6f9fd;
  text-align: center;
  color: #5b6b7d;
}

@media (max-width: 575px) {
  .ev-filter {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }

  .ev-filter-select select {
    flex: 1;
    min-width: 0;
  }
}

/* =====================================================================
   Footer: product catalogue card (right column)
   ===================================================================== */
.footer-catalog-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.footer-catalog-card:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(191, 233, 247, 0.5);
  transform: translateY(-3px);
  color: #fff;
}

.footer-catalog-cover {
  flex: 0 0 96px;
  width: 96px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.12);
  transform: rotate(-4deg);
  transition: transform 0.3s ease;
}

.footer-catalog-card:hover .footer-catalog-cover {
  transform: rotate(0deg) scale(1.04);
}

.footer-catalog-cover img {
  display: block;
  width: 100%;
  height: auto;
}

.footer-catalog-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.footer-catalog-text strong {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: #fff;
}

.footer-catalog-text small {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

.footer-catalog-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 4px;
  padding: 9px 16px;
  border-radius: 999px;
  background: #bfe9f7;
  color: #0a2342;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.footer-catalog-card:hover .footer-catalog-btn {
  background: #fff;
}

@media (max-width: 1399px) and (min-width: 1200px) {
  .footer-catalog-card {
    flex-direction: column;
    align-items: flex-start;
  }
}