/* JPM BREADCRUMB SECTION */

.jpm-breadcrumb-section {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   padding: 90px 0;
   background-color: #071827;
   background-image: url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?auto=format&fit=crop&w=1920&q=85");
   background-size: cover;
   background-position: center 45%;
}

.jpm-breadcrumb-overlay {
   position: absolute;
   inset: 0;
   z-index: -1;
   background: linear-gradient(90deg,
         rgba(7, 24, 39, 0.97) 0%,
         rgba(7, 24, 39, 0.88) 50%,
         rgba(7, 24, 39, 0.55) 100%);
}

.jpm-breadcrumb-container {
   width: min(1320px, 92%);
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
   position: relative;
}

.jpm-breadcrumb-content {
   position: relative;
   z-index: 2;
}

.jpm-breadcrumb-label {
   display: inline-block;
   color: #f5a623;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 3px;
   margin-bottom: 12px;
}

.jpm-breadcrumb-content h1 {
   font-size: clamp(26px, 3.1vw, 40px);
   line-height: .99;
   letter-spacing: -2.2px;
   color: #fff;
   font-weight: 800;
   margin: 0 0 24px;
}

.jpm-breadcrumb-content h1 span {
   color: #19b5c9;
   transition: color 0.3s ease;
}

.jpm-breadcrumb-content h1:hover span {
   color: #f5a623;
}

.jpm-breadcrumb-list {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 14px;
   list-style: none;
   margin: 0;
   padding: 0;
   color: #fff;
   font-size: 15px;
}

.jpm-breadcrumb-list li {
   margin: 0;
   padding: 0;
}

.jpm-breadcrumb-list a {
   color: #e0eaf2;
   text-decoration: none;
   transition: color 0.3s ease;
}

.jpm-breadcrumb-list a i {
   color: #f5a623;
   margin-right: 7px;
}

.jpm-breadcrumb-list a:hover {
   color: #19b5c9;
}

.jpm-breadcrumb-separator {
   color: #f5a623;
   font-size: 11px;
}

.jpm-breadcrumb-current {
   color: #19b5c9;
   font-weight: 600;
}

.jpm-breadcrumb-decoration {
   width: 140px;
   height: 140px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(25, 181, 201, 0.75);
   border: 2px solid rgba(245, 166, 35, 0.7);
   transform: rotate(45deg);
   transition: transform 0.5s ease, background 0.5s ease;
}

.jpm-breadcrumb-decoration i {
   font-size: 65px;
   transform: rotate(-45deg);
}

.jpm-breadcrumb-section:hover .jpm-breadcrumb-decoration {
   transform: rotate(135deg);
   background: rgba(11, 110, 168, 0.25);
}

/* RESPONSIVE */

@media (max-width: 767px) {
   .jpm-breadcrumb-section {
      padding: 65px 0;
      background-position: center;
   }

   .jpm-breadcrumb-decoration {
      display: none;
   }

   .jpm-breadcrumb-content h1 {
      font-size: 42px;
      margin-bottom: 20px;
   }

   .jpm-breadcrumb-list {
      gap: 10px;
      font-size: 14px;
   }

   .jpm-breadcrumb-label {
      font-size: 11px;
      letter-spacing: 2px;
   }
}

@media (prefers-reduced-motion: reduce) {

   .jpm-breadcrumb-section *,
   .jpm-breadcrumb-section *::before,
   .jpm-breadcrumb-section *::after {
      transition: none !important;
      animation: none !important;
   }
}

/* ==========================================
   JPM PROFILE ABOUT DESIGN
========================================== */

.jpm-profile {
   --jpm-p-navy: #071d34;
   --jpm-p-blue: #07549a;
   --jpm-p-blue2: #0874bd;
   --jpm-p-orange: #ffa20d;
   --jpm-p-light: #f1f7fc;
   --jpm-p-text: #182b42;

   font-family: "Poppins", sans-serif;
   color: var(--jpm-p-text);
   overflow: hidden;
   background: var(--jpm-p-light);
}

.jpm-profile *,
.jpm-profile *::before,
.jpm-profile *::after {
   box-sizing: border-box;
}

.jpm-profile-hero {
   display: grid;
   grid-template-columns: 46% 54%;
   min-height: 625px;
   background: #f3f8fc;
   position: relative;
}

/* LEFT CONTENT */

.jpm-profile-content {
   position: relative;
   z-index: 4;
   padding: 88px 35px 35px max(4vw, calc((100vw - 1450px) / 2));
   align-self: center;
   /* background:
        radial-gradient(circle at 95% 12%,
        rgba(8, 116, 189, 0.055), transparent 38%),
        #f3f8fc; */
}

.jpm-profile-content::after {
   content: "";
   position: absolute;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 5px;
   background: linear-gradient(90deg,
         var(--jpm-p-orange) 0 22%,
         transparent 22%);
}

/* BREADCRUMB */

.jpm-profile-breadcrumb {
   position: absolute;
   top: 0;
   left: 0;
   display: flex;
   align-items: center;
   gap: 17px;
   padding: 13px 35px 13px max(4vw, calc((100vw - 1450px) / 2));
   width: min(100%, 370px);
   min-height: 42px;
   background: var(--jpm-p-blue);
   color: #fff;
   clip-path: polygon(0 0, 92% 0, 100% 100%, 0 100%);
   font-size: 13px;
}

.jpm-profile-breadcrumb a {
   color: #cfe4f6;
   text-decoration: none;
   white-space: nowrap;
   transition: color 0.3s ease;
}

.jpm-profile-breadcrumb a:hover {
   color: var(--jpm-p-orange);
}

.jpm-profile-breadcrumb a i {
   margin-right: 6px;
}

.jpm-profile-breadcrumb>i {
   font-size: 10px;
   color: var(--jpm-p-orange);
}

.jpm-profile-breadcrumb span {
   color: #fff;
   white-space: nowrap;
}

/* HEADING */

.jpm-profile-eyebrow {
   display: flex;
   align-items: center;
   gap: 17px;
   margin-bottom: 12px;
   color: var(--jpm-p-blue);
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 3px;
}

.jpm-profile-eyebrow span {
   width: 70px;
   height: 2px;
   background: var(--jpm-p-orange);
}

.jpm-profile-content h1 {
   margin: 0 0 6px;
   color: var(--jpm-p-navy);
  font-size: clamp(26px, 3.0vw, 40px);
   font-weight: 800;
   letter-spacing: -2px;
   line-height: 1.14;
}

.jpm-profile-content h1 span {
   color: var(--jpm-p-blue);
   transition: color 0.35s ease;
}

.jpm-profile-content h1:hover span {
   color: var(--jpm-p-orange);
}

.jpm-profile-tagline {
   margin: 0 0 25px;
   color: var(--jpm-p-blue);
   font-size: 10px;
   font-weight: 600;
   line-height: 1.9;
   letter-spacing: 1.8px;
}

.jpm-profile-tagline b {
   margin: 0 5px;
   color: var(--jpm-p-orange);
}

/* BODY TEXT */

.jpm-profile-content>p {
   margin: 0 0 19px;
       font-size: 16px;
    line-height: 1.75;
    color: #334653;
    font-weight: 500;
}

.jpm-profile-content>p strong {
   color: var(--jpm-p-navy);
   font-weight: 700;
}

/* CTA */

.jpm-profile-cta {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 25px;
   margin-top: 29px;
}

.jpm-profile-button {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 15px;
   min-height: 50px;
   padding: 14px 25px;
   background: var(--jpm-p-orange);
   color: var(--jpm-p-navy);
   text-decoration: none;
   font-size: 14px;
   font-weight: 800;
   border-radius: 4px;
   transition:
      background 0.3s ease,
      color 0.3s ease,
      transform 0.3s ease;
}

.jpm-profile-button i {
   transition: transform 0.3s ease;
}

.jpm-profile-button:hover {
   background: var(--jpm-p-blue);
   color: #fff;
   transform: translateY(-3px);
}

.jpm-profile-button:hover i {
   transform: translateX(5px);
}

.jpm-profile-cta-text {
   padding-left: 20px;
   border-left: 2px solid var(--jpm-p-orange);
   color: var(--jpm-p-navy);
   font-size: 12px;
   font-weight: 500;
   line-height: 1.8;
   letter-spacing: 2px;
}

/* RIGHT VISUAL */

.jpm-profile-visual {
   position: relative;
   min-height: 625px;
   overflow: hidden;
   isolation: isolate;
   background: var(--jpm-p-navy);
   clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

.jpm-profile-factory {
   position: absolute;
   inset: 0;
   overflow: hidden;
   z-index: -2;
}

.jpm-profile-factory img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   display: block;
   transition: transform 1s ease;
}

.jpm-profile-visual:hover .jpm-profile-factory img {
   transform: scale(1.055);
}

.jpm-profile-factory::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg,
         rgba(7, 29, 52, 0.20),
         rgba(7, 29, 52, 0.04));
}

/* DIAGONAL BLUE SHAPES */

.jpm-profile-blue-shape {
   position: absolute;
   z-index: -1;
   top: -15%;
   left: 13%;
   width: 95px;
   height: 135%;
   background: rgba(5, 84, 154, 0.90);
   transform: skewX(-23deg);
   border-left: 10px solid rgba(255, 255, 255, 0.75);
   border-right: 10px solid rgba(255, 162, 13, 0.9);
}

.jpm-profile-orange-shape {
   position: absolute;
   z-index: 1;
   top: 0;
   left: 31%;
   width: 5px;
   height: 170px;
   background: var(--jpm-p-orange);
   transform: skewX(-23deg);
   opacity: 0.9;
}

.jpm-profile-dot-pattern {
   position: absolute;
   top: 20px;
   left: 10%;
   width: 170px;
   height: 100px;
   background-image: radial-gradient(rgba(255, 255, 255, 0.65) 2px,
         transparent 2.5px);
   background-size: 18px 18px;
   opacity: 0.5;
   pointer-events: none;
}

/* ANGLED PHOTO CARDS */

.jpm-profile-photo {
   position: absolute;
   z-index: 3;
   left: 10%;
   width: 46%;
   height: 36%;
   overflow: hidden;
   background: #fff;
   padding: 5px;
   clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
   filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2));
   transition: transform 0.45s ease;
}

.jpm-profile-photo img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   clip-path: polygon(22% 0, 100% 0, 78% 100%, 0 100%);
   transition: transform 0.6s ease;
}

.jpm-profile-photo-top {
   top: 21%;
}

.jpm-profile-photo-bottom {
   top: 59%;
   left: 0;
   width: 49%;
   height: 35%;
}

.jpm-profile-photo:hover {
   transform: translateY(-6px);
}

.jpm-profile-photo:hover img {
   transform: scale(1.1);
}

/* ==========================================
   FEATURES STRIP
========================================== */

.jpm-profile-features {
   position: relative;
   z-index: 5;
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   align-items: center;
   padding: 32px max(4vw, calc((100vw - 1450px) / 2));
   background: #f6f9fc;
   gap: 0;
}

.jpm-profile-feature {
   display: flex;
   align-items: center;
   gap: 13px;
   min-width: 0;
   min-height: 76px;
   padding: 0 18px;
   border-right: 1px solid rgba(7, 84, 154, 0.38);
   transition: transform 0.35s ease;
}

.jpm-profile-feature:first-child {
   padding-left: 0;
}

.jpm-profile-feature:last-child {
   border-right: 0;
   padding-right: 0;
}

.jpm-profile-feature:hover {
   transform: translateY(-5px);
}

.jpm-profile-feature-icon {
   width: 65px;
   height: 65px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   color: #fff;
   background: var(--jpm-p-blue);
   font-size: 27px;
   transition:
      background 0.35s ease,
      transform 0.35s ease;
}

.jpm-profile-feature:hover .jpm-profile-feature-icon {
   background: var(--jpm-p-orange);
   color: var(--jpm-p-navy);
   transform: rotateY(180deg);
}

.jpm-profile-feature-copy {
   min-width: 0;
}

.jpm-profile-feature-copy h3 {
   margin: 0 0 5px;
   color: var(--jpm-p-blue);
   font-size: 13px;
   font-weight: 800;
   line-height: 1.35;
}

.jpm-profile-feature-copy p {
   margin: 0;
   color: #405a75;
   font-size: 12px;
   line-height: 1.55;
}

/* ==========================================
   DARK STATISTICS STRIP
========================================== */

.jpm-profile-stats {
   position: relative;
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   align-items: center;
   padding: 36px max(4vw, calc((100vw - 1450px) / 2));
   gap: 0;
   isolation: isolate;
   background: var(--jpm-p-navy);
}

.jpm-profile-stats::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: -1;
   background:
      linear-gradient(90deg,
         rgba(4, 27, 48, 0.96),
         rgba(5, 57, 96, 0.90)),
      url("https://images.unsplash.com/photo-1513828583688-c52646db42da?auto=format&fit=crop&w=1600&q=80") center / cover;
}

.jpm-profile-stat {
   text-align: center;
   padding: 0 12px;
   border-right: 1px solid rgba(255, 255, 255, 0.85);
   transition: transform 0.35s ease;
}

.jpm-profile-stat:last-child {
   border-right: 0;
}

.jpm-profile-stat:hover {
   transform: translateY(-4px);
}

.jpm-profile-stat strong {
   display: block;
   margin-bottom: 5px;
   color: var(--jpm-p-orange);
   font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
   font-size: clamp(24px, 2.6vw, 38px);
   font-weight: 800;
   line-height: 1.2;
   white-space: nowrap;
   transition: color 0.3s ease;
}

.jpm-profile-stat:hover strong {
   color: #fff;
}

.jpm-profile-stat span {
   display: block;
   color: #fff;
   font-size: 11px;
   line-height: 1.6;
   letter-spacing: 0.7px;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (min-width: 1500px) {
   .jpm-profile-hero {
      min-height: 665px;
   }

   .jpm-profile-visual {
      min-height: 665px;
   }

   .jpm-profile-content>p {
      font-size: 16px;
   }

   .jpm-profile-feature-copy h3 {
      font-size: 15px;
   }

   .jpm-profile-feature-copy p {
      font-size: 13px;
   }
}

@media (max-width: 1199px) {
   .jpm-profile-hero {
      grid-template-columns: 50% 50%;
      min-height: 590px;
   }

   .jpm-profile-content {
      padding: 85px 25px 35px 4vw;
   }

   .jpm-profile-visual {
      min-height: 590px;
   }

   .jpm-profile-content h1 {
      font-size: 43px;
      letter-spacing: -1px;
   }

   .jpm-profile-tagline {
      font-size: 9px;
      letter-spacing: 1px;
   }

   .jpm-profile-content>p {
      font-size: 14px;
   }

   .jpm-profile-features {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      row-gap: 25px;
   }

   .jpm-profile-feature:nth-child(3) {
      border-right: 0;
   }

   .jpm-profile-feature:nth-child(4) {
      padding-left: 0;
   }

   .jpm-profile-stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      row-gap: 25px;
   }

   .jpm-profile-stat:nth-child(3) {
      border-right: 0;
   }

   .jpm-profile-stat:nth-child(4) {
      grid-column: 1 / 2;
   }
}

@media (max-width: 767px) {
   .jpm-profile-hero {
      grid-template-columns: 1fr;
   }

   .jpm-profile-content {
      padding: 78px 6% 35px;
   }

   .jpm-profile-breadcrumb {
      padding-left: 6%;
      width: 270px;
   }

   .jpm-profile-content h1 {
      font-size: clamp(34px, 8vw, 48px);
   }

   .jpm-profile-tagline {
      font-size: 10px;
      line-height: 2;
   }

   .jpm-profile-content>p {
      font-size: 15px;
      line-height: 1.75;
   }

   .jpm-profile-visual {
      min-height: 450px;
      clip-path: none;
   }

   .jpm-profile-photo {
      width: 43%;
      height: 36%;
      left: 7%;
   }

   .jpm-profile-photo-top {
      top: 15%;
   }

   .jpm-profile-photo-bottom {
      top: 55%;
      left: 2%;
      width: 46%;
   }

   .jpm-profile-features {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 30px 6%;
      row-gap: 22px;
   }

   .jpm-profile-feature {
      padding: 0 12px;
      border-right: 0;
   }

   .jpm-profile-feature:nth-child(odd) {
      padding-left: 0;
      border-right: 1px solid rgba(7, 84, 154, 0.25);
   }

   .jpm-profile-feature:nth-child(even) {
      padding-right: 0;
   }

   .jpm-profile-feature:last-child {
      grid-column: 1 / -1;
      border-right: 0;
   }

   .jpm-profile-stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      padding: 30px 5%;
      row-gap: 25px;
   }

   .jpm-profile-stat {
      border-right: 0;
   }

   .jpm-profile-stat:nth-child(odd) {
      border-right: 1px solid rgba(255, 255, 255, 0.5);
   }

   .jpm-profile-stat:last-child {
      grid-column: 1 / -1;
      border-right: 0;
   }

   .jpm-profile-stat strong {
      font-size: 29px;
   }
}

@media (max-width: 420px) {
   .jpm-profile-content h1 {
      font-size: 34px;
   }

   .jpm-profile-cta {
      gap: 16px;
   }

   .jpm-profile-cta-text {
      font-size: 10px;
      padding-left: 12px;
   }

   .jpm-profile-feature {
      gap: 9px;
      padding-right: 7px;
   }

   .jpm-profile-feature-icon {
      width: 46px;
      height: 46px;
      font-size: 20px;
   }

   .jpm-profile-feature-copy h3 {
      font-size: 11px;
   }

   .jpm-profile-feature-copy p {
      font-size: 11px;
   }

   .jpm-profile-visual {
      min-height: 350px;
   }

   .jpm-profile-stat strong {
      font-size: 23px;
   }

   .jpm-profile-stat span {
      font-size: 10px;
   }
}

@media (prefers-reduced-motion: reduce) {

   .jpm-profile *,
   .jpm-profile *::before,
   .jpm-profile *::after {
      animation: none !important;
      transition: none !important;
   }
}

/* ==========================================
   JPM COMPANY PROFILE
========================================== */

.jpm-company-profile {
   --jpm-cp-navy: #071d34;
   --jpm-cp-dark: #052b49;
   --jpm-cp-blue: #07549a;
   --jpm-cp-blue2: #0876bd;
   --jpm-cp-orange: #ffa20d;
   --jpm-cp-light: #f0f7fc;
   --jpm-cp-text: #172c45;

   overflow: hidden;
   background: var(--jpm-cp-light);
   font-family: "Poppins", sans-serif;
   color: var(--jpm-cp-text);
}

.jpm-company-profile *,
.jpm-company-profile *::before,
.jpm-company-profile *::after {
   box-sizing: border-box;
}

.jpm-company-profile img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.jpm-company-profile h1,
.jpm-company-profile h2,
.jpm-company-profile h3,
.jpm-company-profile p {
   margin-top: 0;
}

/* HERO */

.jpm-cp-hero {
   display: grid;
   grid-template-columns: 47% 53%;
   min-height: 370px;
   position: relative;
   background: #f2f8fd;
}

.jpm-cp-hero-content {
   position: relative;
   z-index: 3;
   padding: 82px 25px 22px max(3.7vw, calc((100vw - 1450px) / 2));
   align-self: center;
   background:
      radial-gradient(circle at 70% 20%,
         rgba(7, 84, 154, 0.07), transparent 38%),
      #f2f8fd;
}

/* BREADCRUMB */

.jpm-cp-breadcrumb {
   position: absolute;
   top: 15px;
   left: 0;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px;
   padding: 11px 35px 11px max(3.7vw, calc((100vw - 1450px) / 2));
   width: min(100%, 390px);
   background: var(--jpm-cp-dark);
   color: white;
   font-size: 12px;
   clip-path: polygon(0 0, 93% 0, 100% 100%, 0 100%);
}

.jpm-cp-breadcrumb a {
   color: #d7e8f5;
   text-decoration: none;
   white-space: nowrap;
   transition: color .3s ease;
}

.jpm-cp-breadcrumb a:hover {
   color: var(--jpm-cp-orange);
}

.jpm-cp-breadcrumb>i {
   color: var(--jpm-cp-orange);
   font-size: 9px;
}

.jpm-cp-breadcrumb span {
   white-space: nowrap;
}

/* EYEBROW AND TITLE */

.jpm-cp-eyebrow {
   display: flex;
   align-items: center;
   gap: 15px;
   margin-bottom: 13px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 3px;
   color: var(--jpm-cp-navy);
}

.jpm-cp-eyebrow span {
   width: 54px;
   height: 3px;
   background: var(--jpm-cp-orange);
}

.jpm-cp-hero-content h1 {
   margin-bottom: 8px;
   color: var(--jpm-cp-navy);
   font-size: clamp(32px, 3.3vw, 51px);
   line-height: 1.12;
   letter-spacing: -1.5px;
   font-weight: 800;
}

.jpm-cp-hero-content h1 span {
   color: var(--jpm-cp-blue);
   transition: color .3s ease;
}

.jpm-cp-hero-content h1:hover span {
   color: var(--jpm-cp-orange);
}

.jpm-cp-tagline {
   margin-bottom: 17px;
   font-size: 10px;
   letter-spacing: 1.5px;
   line-height: 1.8;
   font-weight: 600;
}

.jpm-cp-tagline b {
   margin: 0 3px;
   color: var(--jpm-cp-orange);
}

.jpm-cp-hero-content>p {
   max-width: 620px;
   margin-bottom: 0;
   font-size: 14px;
   line-height: 1.65;
}

/* HERO IMAGE */

.jpm-cp-hero-image {
   position: relative;
   min-height: 370px;
   overflow: hidden;
   isolation: isolate;
   clip-path: polygon(19% 0, 100% 0, 100% 100%, 0 100%);
}

.jpm-cp-hero-image>img {
   position: absolute;
   inset: 0;
   z-index: -2;
   transition: transform .9s ease;
}

.jpm-cp-hero-image:hover>img {
   transform: scale(1.06);
}

.jpm-cp-hero-blue {
   position: absolute;
   z-index: -1;
   top: -10%;
   left: 13%;
   height: 120%;
   width: 45px;
   background: rgba(7, 84, 154, .95);
   transform: skewX(-25deg);
   border-right: 5px solid #fff;
}

.jpm-cp-hero-orange {
   position: absolute;
   top: 0;
   left: 18%;
   width: 40px;
   height: 84px;
   background: var(--jpm-cp-orange);
   clip-path: polygon(55% 0, 100% 0, 35% 100%, 0 100%);
}

.jpm-cp-hero-label {
   position: absolute;
   top: 0;
   right: 0;
   padding: 25px 28px 25px 48px;
   background: var(--jpm-cp-navy);
   clip-path: polygon(23% 0, 100% 0, 100% 100%, 0 100%);
   color: white;
   font-size: 10px;
   letter-spacing: 2px;
   line-height: 2.1;
}

.jpm-cp-hero-label span {
   display: block;
   width: 48px;
   height: 4px;
   margin-top: 12px;
   background: var(--jpm-cp-orange);
}

/* ==========================================
   SNAPSHOT
========================================== */

.jpm-cp-snapshot {
   display: grid;
   grid-template-columns: 49% 51%;
   min-height: 310px;
   background: var(--jpm-cp-dark);
   color: white;
}

.jpm-cp-snapshot-content {
   position: relative;
   padding: 18px 22px 18px max(3.7vw, calc((100vw - 1450px) / 2));
   background:
      linear-gradient(rgba(4, 39, 66, .95), rgba(4, 39, 66, .96)),
      url("https://images.unsplash.com/photo-1513828583688-c52646db42da?auto=format&fit=crop&w=1200&q=80") center/cover;
   clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
   z-index: 2;
}

.jpm-cp-snapshot-content h2 {
   margin-bottom: 2px;
   color: #fff;
   font-size: 27px;
   font-weight: 800;
}

.jpm-cp-section-line {
   display: block;
   width: 55px;
   height: 4px;
   background: var(--jpm-cp-orange);
   margin-bottom: 10px;
}

.jpm-cp-snapshot-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0 18px;
}

.jpm-cp-snapshot-item {
   display: flex;
   align-items: center;
   gap: 12px;
   min-width: 0;
   padding: 9px 0;
   border-bottom: 1px dashed rgba(255, 255, 255, .22);
   transition: transform .3s ease;
}

.jpm-cp-snapshot-item:hover {
   transform: translateX(4px);
}

.jpm-cp-snapshot-item:nth-last-child(-n+2) {
   border-bottom: 0;
}

.jpm-cp-snapshot-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 53px;
   width: 53px;
   height: 53px;
   border-radius: 50%;
   background: var(--jpm-cp-blue);
   color: white;
   font-size: 24px;
   transition: background .3s ease, transform .3s ease;
}

.jpm-cp-snapshot-item:hover .jpm-cp-snapshot-icon {
   background: var(--jpm-cp-orange);
   color: var(--jpm-cp-navy);
   transform: rotateY(180deg);
}

.jpm-cp-snapshot-item>div:last-child {
   min-width: 0;
}

.jpm-cp-snapshot-item p {
   margin: 0;
   color: #f0f5fa;
   font-size: 12px;
   line-height: 1.5;
}

.jpm-cp-snapshot-item strong {
   display: inline-block;
   color: var(--jpm-cp-orange);
   font-size: 15px;
   line-height: 1.4;
   font-weight: 800;
}

/* GALLERY */

.jpm-cp-gallery {
   display: grid;
   grid-template-columns: 1.05fr 1fr;
   grid-template-rows: 1fr 1fr;
   min-width: 0;
   min-height: 310px;
   gap: 4px;
   margin-left: -7%;
   padding-left: 0;
   overflow: hidden;
   background: #fff;
}

.jpm-cp-gallery-main {
   grid-row: 1 / 3;
   position: relative;
   min-width: 0;
   overflow: hidden;
   clip-path: polygon(23% 0, 100% 0, 77% 100%, 0 100%);
}

.jpm-cp-gallery-small {
   position: relative;
   overflow: hidden;
   min-width: 0;
}

.jpm-cp-gallery-small img,
.jpm-cp-gallery-main img {
   transition: transform .7s ease, filter .4s ease;
}

.jpm-cp-gallery-main:hover img,
.jpm-cp-gallery-small:hover img {
   transform: scale(1.08);
   filter: saturate(1.15);
}

.jpm-cp-gallery-top {
   border-bottom: 3px solid white;
   clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
}

.jpm-cp-gallery-bottom {
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ==========================================
   FACILITY DETAILS
========================================== */

.jpm-cp-facility {
   position: relative;
   padding: 22px max(3.7vw, calc((100vw - 1450px) / 2)) 45px;
   background:
      radial-gradient(circle at 95% 10%, rgba(7, 84, 154, .05), transparent 30%),
      #f2f8fd;
}

.jpm-cp-facility-heading h2 {
   margin-bottom: 3px;
   font-size: 28px;
   line-height: 1.25;
   font-weight: 800;
   color: var(--jpm-cp-navy);
}

.jpm-cp-facility-heading h2 span {
   color: var(--jpm-cp-blue);
}

.jpm-cp-facility-grid {
   display: grid;
   grid-template-columns: 1.3fr .95fr .95fr 1.1fr .95fr 1.25fr 1.15fr;
   gap: 10px;
}

.jpm-cp-facility-card {
   min-width: 0;
   min-height: 175px;
   padding: 15px 14px;
   position: relative;
   border: 1px solid #dfebf5;
   border-radius: 15px;
   background: rgba(255, 255, 255, .85);
   box-shadow: 0 5px 18px rgba(7, 29, 52, .035);
   transition:
      transform .35s ease,
      box-shadow .35s ease,
      border-color .35s ease;
}

.jpm-cp-facility-card::after {
   content: "";
   position: absolute;
   left: 14px;
   right: 14px;
   bottom: 0;
   height: 3px;
   background: var(--jpm-cp-orange);
   transform: scaleX(0);
   transform-origin: left;
   transition: transform .35s ease;
}

.jpm-cp-facility-card:hover {
   transform: translateY(-6px);
   border-color: #b6d5ed;
   box-shadow: 0 12px 28px rgba(7, 84, 154, .12);
}

.jpm-cp-facility-card:hover::after {
   transform: scaleX(1);
}

.jpm-cp-facility-card>i {
   display: block;
   margin-bottom: 10px;
   color: var(--jpm-cp-blue);
   font-size: 35px;
   transition: transform .35s ease, color .35s ease;
}

.jpm-cp-facility-card:hover>i {
   color: var(--jpm-cp-orange);
   transform: translateY(-3px);
}

.jpm-cp-facility-card h3 {
   margin-bottom: 9px;
   color: var(--jpm-cp-navy);
   font-size: 12px;
   font-weight: 500;
   line-height: 1.5;
}

.jpm-cp-facility-card p {
   margin-bottom: 0;
   color: var(--jpm-cp-text);
   font-size: 12px;
   line-height: 1.6;
   overflow-wrap: anywhere;
}

.jpm-cp-facility-card>strong {
   display: block;
   margin-top: 6px;
   color: #f39200;
   font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
   font-size: 27px;
   font-weight: 800;
   line-height: 1.2;
   overflow-wrap: anywhere;
}

.jpm-cp-facility-card>b {
   display: block;
   color: var(--jpm-cp-navy);
   font-size: 13px;
}

.jpm-cp-facility-card>.jpm-cp-gstin {
   font-family: "Poppins", sans-serif;
   font-size: 14px;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (min-width: 1500px) {
   .jpm-cp-hero {
      min-height: 400px;
   }

   .jpm-cp-hero-image {
      min-height: 400px;
   }

   .jpm-cp-snapshot,
   .jpm-cp-snapshot-content,
   .jpm-cp-gallery {
      min-height: 320px;
   }

   .jpm-cp-facility-card {
      min-height: 180px;
   }
}

@media (max-width: 1200px) {
   .jpm-cp-hero-content {
      padding-right: 20px;
   }

   .jpm-cp-hero-content h1 {
      font-size: 37px;
   }

   .jpm-cp-snapshot {
      grid-template-columns: 55% 45%;
   }

   .jpm-cp-snapshot-content {
      padding-right: 25px;
   }

   .jpm-cp-snapshot-grid {
      gap: 0 12px;
   }

   .jpm-cp-snapshot-icon {
      flex-basis: 43px;
      width: 43px;
      height: 43px;
      font-size: 19px;
   }

   .jpm-cp-facility-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
   }
}

@media (max-width: 767px) {
   .jpm-cp-hero {
      grid-template-columns: 1fr;
   }

   .jpm-cp-hero-content {
      padding: 85px 6% 30px;
   }

   .jpm-cp-breadcrumb {
      padding-left: 6%;
      width: 330px;
      max-width: 100%;
   }

   .jpm-cp-hero-content h1 {
      font-size: clamp(31px, 7vw, 44px);
   }

   .jpm-cp-tagline {
      font-size: 10px;
      letter-spacing: 1px;
   }

   .jpm-cp-hero-content>p {
      font-size: 14px;
   }

   .jpm-cp-hero-image {
      min-height: 300px;
      clip-path: none;
   }

   .jpm-cp-hero-label {
      padding: 17px 20px 17px 36px;
      font-size: 9px;
   }

   .jpm-cp-snapshot {
      grid-template-columns: 1fr;
   }

   .jpm-cp-snapshot-content {
      padding: 25px 6%;
      clip-path: none;
   }

   .jpm-cp-snapshot-grid {
      gap: 0 16px;
   }

   .jpm-cp-snapshot-item p {
      font-size: 12px;
   }

   .jpm-cp-gallery {
      margin: 0;
      min-height: 310px;
   }

   .jpm-cp-facility {
      padding: 28px 5% 35px;
   }

   .jpm-cp-facility-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .jpm-cp-facility-card {
      min-height: 160px;
   }

   .jpm-cp-facility-card h3 {
      font-size: 13px;
   }

   .jpm-cp-facility-card p {
      font-size: 12px;
   }
}

@media (max-width: 420px) {
   .jpm-cp-hero-content h1 {
      font-size: 30px;
      letter-spacing: -.8px;
   }

   .jpm-cp-tagline {
      line-height: 2;
   }

   .jpm-cp-snapshot-grid {
      grid-template-columns: 1fr;
   }

   .jpm-cp-snapshot-item:nth-last-child(-n+2) {
      border-bottom: 1px dashed rgba(255, 255, 255, .22);
   }

   .jpm-cp-snapshot-item:last-child {
      border-bottom: 0;
   }

   .jpm-cp-gallery {
      min-height: 230px;
   }

   .jpm-cp-facility-grid {
      grid-template-columns: 1fr 1fr;
      gap: 8px;
   }

   .jpm-cp-facility-card {
      padding: 12px 10px;
   }

   .jpm-cp-facility-card>i {
      font-size: 28px;
   }

   .jpm-cp-facility-card>strong {
      font-size: 23px;
   }

   .jpm-cp-facility-card>.jpm-cp-gstin {
      font-size: 12px;
   }
}

@media (prefers-reduced-motion: reduce) {

   .jpm-company-profile *,
   .jpm-company-profile *::before,
   .jpm-company-profile *::after {
      animation: none !important;
      transition: none !important;
   }
}

:root {
   --jpm-navy: #071827;
   --jpm-navy-2: #0c263a;
   --jpm-blue: #0b6ea8;
   --jpm-cyan: #19b5c9;
   --jpm-orange: #f5a623;
   --jpm-white: #ffffff;
   --jpm-light: #f3f6f8;
   --jpm-text: #53616d;
   --jpm-border: #dfe6eb;
}

/* =====================================
   GLOBAL COMPANY PROFILE
===================================== */

.jpm-profile-page,
.jpm-profile-page * {
   box-sizing: border-box;
}

.jpm-profile-page {
   width: 100%;
   overflow: hidden;
   color: var(--jpm-navy);
   background: var(--jpm-white);
   font-family: "Poppins", sans-serif;
}

.jpm-profile-page h1,
.jpm-profile-page h2,
.jpm-profile-page h3,
.jpm-profile-page p {
   margin-top: 0;
}

.jpm-profile-page p {
   font-size: 15px;
   line-height: 1.45;
}

.jpm-profile-page img {
   max-width: 100%;
}

/* =====================================
   TOP PROFILE AREA
===================================== */

.jpm-profile-top {
   position: relative;
   min-height: 625px;
   padding: 25px 4% 18px;
   isolation: isolate;
   background:
      radial-gradient(ellipse at 35% 75%,
         rgba(11, 110, 168, 0.045),
         transparent 48%),
      #ffffff;
}

/* Company heading and description */

.jpm-profile-intro {
   position: relative;
   z-index: 4;
   width: 52%;
   max-width: 760px;
   padding: 0 10px 0 5px;
}

.jpm-profile-topline {
   display: block;
   width: 55px;
   height: 5px;
   margin-bottom: 10px;
   background: var(--jpm-orange);
}

.jpm-profile-intro h1 {
   margin-bottom: 8px;
   color: var(--jpm-navy);
   font-size: clamp(26px, 3.0vw, 40px);
   font-weight: 800;
   letter-spacing: -1.5px;
   line-height: 1.12;
}

.jpm-profile-intro h1 span {
   color: #0865c9;
}

.jpm-profile-intro p {
   max-width: 690px;
   margin-bottom: 0;
   color: #17243a;
   font-size: 15px;
   line-height: 1.5;
}

/* =====================================
   HERO INDUSTRIAL IMAGE
===================================== */

.jpm-profile-hero-image {
   position: absolute;
   z-index: 1;
   top: 0;
   right: 0;
   width: 51.5%;
   height: 625px;
   overflow: hidden;
   background: #dceaf6;
   clip-path: polygon(20% 0,
         100% 0,
         100% 100%,
         13% 100%,
         0 59%);
}

.jpm-profile-hero-image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform 0.9s ease;
}

.jpm-profile-hero-image:hover img {
   transform: scale(1.04);
}

.jpm-profile-image-blue {
   position: absolute;
   z-index: 2;
   inset: 0;
   pointer-events: none;
   background: rgba(5, 83, 165, 0.08);
   clip-path: polygon(20% 0,
         24% 0,
         5% 59%,
         18% 100%,
         14% 100%,
         0 59%);
}

.jpm-profile-image-orange {
   position: absolute;
   z-index: 3;
   top: 0;
   left: 19%;
   width: 5px;
   height: 100%;
   pointer-events: none;
   background: rgba(245, 166, 35, 0.9);
   transform: skew(-27deg);
   transform-origin: top;
   opacity: 0.8;
}

/* =====================================
   SNAPSHOT PANEL
===================================== */

.jpm-profile-snapshot {
   position: relative;
   z-index: 3;
   width: 53.5%;
   margin-top: 18px;
   padding-bottom: 8px;
}

/* Snapshot title bar */

.jpm-snapshot-title {
   position: relative;
   display: flex;
   align-items: center;
   width: fit-content;
   min-width: 280px;
   height: 46px;
   margin-bottom: 7px;
   padding: 0 25px;
   color: var(--jpm-white);
   background: linear-gradient(100deg,
         #082b48,
         #06477d);
   border-radius: 7px 0 0 7px;
}

.jpm-snapshot-title h2 {
   margin: 0;
   color: #ffffff;
   font-size: 24px;
   font-weight: 800;
   line-height: 1.1;
}

.jpm-snapshot-title span {
   position: absolute;
   top: 0;
   right: -19px;
   width: 22px;
   height: 46px;
   background: var(--jpm-orange);
   transform: skew(0deg);
   transform-origin: top;
}

/* Snapshot rows background */

.jpm-snapshot-list {
   padding: 0 22px 0 20px;
   background: rgba(232, 243, 253, 0.76);
   border-radius: 0 8px 8px 8px;
   margin-top: 25px;
}

/* Individual snapshot row */

.jpm-snapshot-item {
   display: grid;
   grid-template-columns: 46px minmax(0, 1fr);
   align-items: center;
   gap: 14px;
   padding: 15px 0;
   border-bottom: 1px solid rgba(11, 110, 168, 0.18);
}

.jpm-snapshot-item:last-child {
   border-bottom: none;
}

/* Snapshot icon */

.jpm-snapshot-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 44px;
   height: 44px;
   color: #ffffff;
   font-size: 19px;
   border-radius: 50%;
   background: linear-gradient(145deg,
         #086bd1,
         #063452);
   box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12);
   transition:
      transform 0.3s ease,
      box-shadow 0.3s ease;
}

.jpm-snapshot-item:hover .jpm-snapshot-icon {
   transform: scale(1.08) rotate(-5deg);
   box-shadow: 0 5px 13px rgba(11, 110, 168, 0.2);
}

/* Snapshot text */

.jpm-snapshot-item p {
   margin: 0;
   color: #13213b;
   font-size: 15px;
   line-height: 1.4;
}

.jpm-snapshot-item strong {
   color: #0865c9;
   font-size: 17px;
   font-weight: 800;
}

/* =====================================
   MOBILE RESPONSIVE
===================================== */

@media (max-width: 700px) {
   .jpm-profile-top {
      display: flex;
      flex-direction: column;
      gap: 18px;
      min-height: auto;
      padding: 22px 16px 20px;
   }

   .jpm-profile-intro {
      width: 100%;
      max-width: none;
      padding: 0;
   }

   .jpm-profile-topline {
      width: 48px;
      height: 5px;
      margin-bottom: 9px;
   }

   .jpm-profile-intro h1 {
      font-size: 32px;
      letter-spacing: -0.8px;
      line-height: 1.2;
   }

   .jpm-profile-intro p {
      font-size: 15px;
      line-height: 1.5;
   }

   .jpm-profile-hero-image {
      position: relative;
      top: auto;
      right: auto;
      width: 100%;
      height: 260px;
      clip-path: none;
      border-radius: 10px;
   }

   .jpm-profile-image-blue,
   .jpm-profile-image-orange {
      display: none;
   }

   .jpm-profile-snapshot {
      width: 100%;
      margin-top: 0;
   }

   .jpm-snapshot-title {
      width: 90%;
      min-width: 0;
      height: 43px;
      padding: 0 20px;
   }

   .jpm-snapshot-title h2 {
      font-size: 22px;
   }

   .jpm-snapshot-title span {
      right: -17px;
      height: 43px;
   }

   .jpm-snapshot-list {
      padding: 5px 12px;
   }

   .jpm-snapshot-item {
      grid-template-columns: 40px minmax(0, 1fr);
      gap: 10px;
      min-height: 55px;
      padding: 7px 0;
   }

   .jpm-snapshot-icon {
      width: 38px;
      height: 38px;
      font-size: 17px;
   }

   .jpm-snapshot-item p {
      font-size: 15px;
      line-height: 1.4;
   }

   .jpm-snapshot-item strong {
      font-size: 16px;
   }

   /* Facility section */

   .jpm-facility-section {
      padding: 20px 15px;
   }

   .jpm-facility-heading {
      gap: 9px;
      margin: 0 0 13px 0;
   }

   .jpm-facility-heading>span {
      flex-basis: 34px;
      height: 4px;
   }

   .jpm-facility-heading h2 {
      font-size: 26px;
      letter-spacing: -0.4px;
   }

   /* One card per row on mobile */

   .jpm-facility-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 10px;
   }

   .jpm-facility-card,
   .jpm-facility-office,
   .jpm-facility-card:nth-child(2),
   .jpm-facility-card:nth-child(3) {
      grid-column: auto;
      gap: 14px;
      min-height: 108px;
      padding: 12px;
      border-radius: 10px;
   }

   .jpm-facility-icon {
      flex: 0 0 62px;
      width: 62px;
      height: 62px;
      font-size: 25px;
   }

   .jpm-facility-content h3 {
      margin-bottom: 4px;
      font-size: 16px;
      line-height: 1.35;
   }

   .jpm-facility-content p {
      font-size: 15px;
      line-height: 1.4;
   }

   .jpm-facility-accent {
      width: 38px;
      height: 3px;
      margin: 6px 0;
   }

   .jpm-facility-value {
      font-size: 25px;
      line-height: 1.15;
      white-space: normal;
   }

   .jpm-facility-note {
      font-size: 15px !important;
      white-space: normal;
   }

   .jpm-facility-gstin-value {
      font-size: 18px;
      overflow-wrap: anywhere;
   }
}

/* =====================================
   SMALL MOBILE DEVICES
===================================== */

@media (max-width: 380px) {
   .jpm-profile-top {
      padding-right: 12px;
      padding-left: 12px;
   }

   .jpm-profile-intro h1 {
      font-size: 29px;
   }

   .jpm-profile-hero-image {
      height: 220px;
   }

   .jpm-snapshot-list {
      padding-right: 9px;
      padding-left: 9px;
   }

   .jpm-snapshot-item {
      grid-template-columns: 36px minmax(0, 1fr);
      gap: 8px;
   }

   .jpm-snapshot-icon {
      width: 35px;
      height: 35px;
      font-size: 16px;
   }

   .jpm-snapshot-item p {
      font-size: 15px;
   }

   .jpm-facility-section {
      padding-right: 10px;
      padding-left: 10px;
   }

   .jpm-facility-heading h2 {
      font-size: 24px;
   }

   .jpm-facility-card {
      gap: 10px;
      padding: 10px;
   }

   .jpm-facility-icon {
      flex-basis: 55px;
      width: 55px;
      height: 55px;
      font-size: 23px;
   }

   .jpm-facility-value {
      font-size: 23px;
   }

   .jpm-facility-gstin-value {
      font-size: 17px;
   }
}

/* =====================================
   ACCESSIBILITY
===================================== */

@media (prefers-reduced-motion: reduce) {

   .jpm-profile-page *,
   .jpm-profile-page *::before,
   .jpm-profile-page *::after {
      animation: none !important;
      transition: none !important;
   }
}

/* ==========================================
   FACILITY DETAILS MAIN SECTION
========================================== */

.jpm-facility-details,
.jpm-facility-details * {
   box-sizing: border-box;
}

.jpm-facility-details {
   position: relative;
   width: 100%;
   padding: 50px 0;
   overflow: hidden;
   isolation: isolate;
   color: var(--jpm-navy);
   font-family: "Poppins", sans-serif;
   background:
      radial-gradient(ellipse at 50% 10%,
         rgba(255, 255, 255, 0.98) 0%,
         rgba(246, 251, 255, 0.96) 52%,
         rgba(232, 244, 253, 0.94) 100%);
}

.jpm-facility-details h2,
.jpm-facility-details h3,
.jpm-facility-details p {
   margin-top: 0;
}

.jpm-facility-details p {
   font-size: 15px;
   line-height: 1.5;
}

/* ==========================================
   BACKGROUND DECORATIONS
========================================== */

.jpm-fd-gear {
   position: absolute;
   z-index: -1;
   color: rgba(11, 110, 168, 0.075);
   pointer-events: none;
}

.jpm-fd-gear-left {
   top: 30px;
   left: -65px;
   font-size: 180px;
   animation: jpmFdGearRotate 35s linear infinite;
}

.jpm-fd-plant-image {
   position: absolute;
   z-index: -2;
   top: 0;
   right: 0;
   width: 270px;
   height: 225px;
   background:
      linear-gradient(120deg,
         rgba(245, 166, 35, 0.98) 0 12%,
         transparent 12% 100%),
      linear-gradient(135deg,
         rgba(7, 24, 39, 0.05),
         rgba(7, 24, 39, 0.2)),
      url("https://images.unsplash.com/photo-1513828583688-c52646db42da?auto=format&fit=crop&w=700&q=80") center / cover no-repeat;
   clip-path: polygon(25% 0, 100% 0, 100% 100%, 65% 100%);
   opacity: 0.92;
}

@keyframes jpmFdGearRotate {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

/* ==========================================
   CENTERED HEADING
========================================== */

.jpm-fd-heading {
   position: relative;
   z-index: 1;
   margin: 0 auto 28px;
   text-align: center;
}

.jpm-fd-heading-line {
   display: block;
   width: 58px;
   height: 5px;
   margin: 0 auto 15px;
   background: var(--jpm-orange);
}

.jpm-fd-heading h2 {
   margin-bottom: 5px;
   color: var(--jpm-navy);
   font-size: clamp(32px, 3.5vw, 48px);
   font-weight: 800;
   line-height: 1.15;
   letter-spacing: -1.2px;
   text-transform: capitalize;
}

.jpm-fd-heading h2 span {
   color: #0865c9;
}

.jpm-fd-heading>p {
   margin-bottom: 12px;
   color: #42566e;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: 4px;
}

.jpm-fd-heading-decoration {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 155px;
   height: 5px;
   margin: 0 auto;
   background: linear-gradient(to right,
         transparent,
         rgba(11, 110, 168, 0.18),
         transparent);
}

.jpm-fd-heading-decoration span {
   display: block;
   width: 45px;
   height: 4px;
   background: var(--jpm-orange);
   transition: width 0.35s ease;
}

.jpm-fd-heading:hover .jpm-fd-heading-decoration span {
   width: 70px;
}

/* ==========================================
   FACILITY CARD GRID
========================================== */

.jpm-fd-grid {
   position: relative;
   z-index: 1;
   display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
   gap: 18px 14px;
   padding: 0 50px;
}

/* ==========================================
   FACILITY CARDS
========================================== */

.jpm-fd-card {
   position: relative;
   display: flex;
   align-items: flex-start;
   grid-column: span 3;
   gap: 17px;
   min-width: 0;
   min-height: 195px;
   padding: 18px 20px;
   overflow: hidden;
   isolation: isolate;
   background: rgba(255, 255, 255, 0.88);
   border: 1px solid rgba(11, 110, 168, 0.09);
   border-radius: 13px;
   box-shadow: 0 5px 20px rgba(11, 110, 168, 0.045);
   transition:
      transform 0.35s ease,
      box-shadow 0.35s ease,
      border-color 0.35s ease,
      background 0.35s ease;
}


.jpm-fd-card::before {
   position: absolute;
   z-index: -1;
   right: 0;
   bottom: 0;
   left: 0;
   height: 3px;
   content: "";
   background: linear-gradient(90deg,
         var(--jpm-blue),
         var(--jpm-cyan),
         var(--jpm-orange));
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.4s ease;
}

.jpm-fd-card:hover {
   transform: translateY(-5px);
   background: #fff;
   border-color: rgba(11, 110, 168, 0.22);
   box-shadow: 0 14px 32px rgba(7, 24, 39, 0.09);
}

.jpm-fd-card:hover::before {
   transform: scaleX(1);
}

/* First row: office card wider */

.jpm-fd-office-card {
   grid-column: span 6;
}

.jpm-fd-capacity-card {
   grid-column: span 3;
}

/* ==========================================
   ICON BLOCKS
========================================== */

.jpm-fd-icon {
   position: relative;
   z-index: 2;
   display: flex;
   flex: 0 0 50px;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   color: var(--jpm-white);
   font-size: 20px;
   border-radius: 12px;
   box-shadow: 0 5px 12px rgba(7, 24, 39, 0.06);
   transition:
      transform 0.35s ease,
      border-radius 0.35s ease,
      box-shadow 0.35s ease;
}

.jpm-fd-icon-blue {
   background: linear-gradient(145deg,
         #0877e8,
         #0757b8);
}

.jpm-fd-icon-orange {
   background: linear-gradient(145deg,
         #ffad12,
         #f39400);
}

.jpm-fd-card:hover .jpm-fd-icon {
   transform: translateY(-3px) scale(1.04);
   border-radius: 17px;
   box-shadow: 0 9px 20px rgba(7, 24, 39, 0.14);
}

/* ==========================================
   CARD CONTENT
========================================== */

.jpm-fd-content {
   position: relative;
   z-index: 2;
   flex: 1 1 auto;
   min-width: 0;
}

.jpm-fd-content h3 {
   margin-bottom: 8px;
   color: var(--jpm-navy);
   font-size: 17px;
   font-weight: 800;
   line-height: 1.4;
}

.jpm-fd-orange-line {
   display: block;
   width: 45px;
   height: 4px;
   margin-bottom: 12px;
   background: var(--jpm-orange);
   transition: width 0.35s ease;
}

.jpm-fd-card:hover .jpm-fd-orange-line {
   width: 65px;
}

.jpm-fd-value {
   display: block;
   color: #0865c9;
   font-family: "Barlow Condensed", sans-serif;
   font-size: clamp(17px, 1.4vw, 22px);
   font-weight: 800;
   line-height: 1.1;
   white-space: nowrap;
}

.jpm-fd-note {
   margin: 5px 0 0;
   color: var(--jpm-navy);
   font-size: 15px;
   line-height: 1.4;
}

/* ==========================================
   REGISTERED OFFICE CARD
========================================== */

.jpm-fd-office-card {
   min-height: 234px;
   align-items: flex-start;
}

/* .jpm-fd-office-card .jpm-fd-icon {
  flex-basis: 74px;
} */

.jpm-fd-office-card .jpm-fd-content {
   flex: 1 1 45%;
}

.jpm-fd-office-card .jpm-fd-content h3 {
   font-size: 17px;
}

.jpm-fd-office-card .jpm-fd-content p {
   margin-bottom: 0;
   color: #17243a;
   font-size: 15px;
   line-height: 1.75;
   font-weight: 600;
}

/* Office photo */

.jpm-fd-office-photo {
   position: absolute;
   z-index: 0;
   top: 0;
   right: 0;
   width: 44%;
   height: 100%;
   overflow: hidden;
   clip-path: polygon(31% 0, 100% 0, 100% 100%, 0 100%);
}

.jpm-fd-office-photo img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform 0.65s ease;
}

.jpm-fd-office-card:hover .jpm-fd-office-photo img {
   transform: scale(1.08);
}

.jpm-fd-office-shape {
   position: absolute;
   z-index: 1;
   top: 0;
   right: 30%;
   width: 5px;
   height: 100%;
   background: #42a9ff;
   transform: skew(-23deg);
   transform-origin: top;
   pointer-events: none;
}

/* ==========================================
   DECORATIVE WATERMARK ICONS
========================================== */

.jpm-fd-watermark {
   position: absolute;
   z-index: 0;
   right: 15px;
   bottom: 22px;
   color: rgba(11, 110, 168, 0.12);
   font-size: 82px;
   pointer-events: none;
   transition:
      transform 0.45s ease,
      color 0.35s ease;
}

.jpm-fd-card:hover .jpm-fd-watermark {
   color: rgba(11, 110, 168, 0.19);
   transform: scale(1.08) rotate(-5deg);
}

/* ==========================================
   SECOND ROW CARDS
========================================== */

.jpm-fd-grid>.jpm-fd-card:nth-child(n + 4) {
   min-height: 185px;
}

/* Four equal cards on the second row */
.jpm-fd-grid>.jpm-fd-card:nth-child(n + 4) {
   grid-column: span 3;
}



/* GSTIN number */

.jpm-fd-gstin-value {
   display: block;
   color: #0865c9;
   font-size: clamp(17px, 1.4vw, 22px);
   font-weight: 800;
   line-height: 1.3;
   overflow-wrap: anywhere;
}

/* ==========================================
   TABLET RESPONSIVE
========================================== */

@media (max-width: 1100px) {
   .jpm-facility-details {
      padding: 28px 3% 35px;
   }

   .jpm-fd-heading h2 {
      font-size: 38px;
   }

   .jpm-fd-grid {
      gap: 13px;
   }

   .jpm-fd-office-card {
      grid-column: span 12;
   }

   .jpm-fd-capacity-card {
      grid-column: span 6;
   }

   .jpm-fd-grid>.jpm-fd-card:nth-child(n + 4) {
      grid-column: span 6;
   }

   .jpm-fd-card {
      min-height: 160px;
      padding: 15px;
      gap: 13px;
   }

   .jpm-fd-office-card {
      min-height: 220px;
   }

   .jpm-fd-icon {
      flex-basis: 64px;
      width: 64px;
      height: 64px;
      font-size: 26px;
   }

   .jpm-fd-content {
      padding-top: 0px;
   }

   .jpm-fd-content h3 {
      font-size: 16px;
   }

   .jpm-fd-value {
      font-size: 30px;
   }

   .jpm-fd-watermark {
      font-size: 68px;
   }

   .jpm-fd-plant-image {
      width: 190px;
      height: 160px;
   }
}

/* ==========================================
   MOBILE RESPONSIVE
========================================== */

@media (max-width: 700px) {
   .jpm-facility-details {
      padding: 28px 15px;
   }

   .jpm-fd-plant-image {
      width: 125px;
      height: 110px;
      opacity: 0.45;
   }

   .jpm-fd-gear-left {
      top: 30px;
      left: -50px;
      font-size: 120px;
   }

   .jpm-fd-heading {
      margin-bottom: 22px;
   }

   .jpm-fd-heading-line {
      width: 48px;
      height: 4px;
      margin-bottom: 12px;
   }

   .jpm-fd-heading h2 {
      font-size: 31px;
      letter-spacing: -0.7px;
   }

   .jpm-fd-heading>p {
      font-size: 15px;
      letter-spacing: 2.5px;
   }

   .jpm-fd-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
   }

   .jpm-fd-card,
   .jpm-fd-office-card,
   .jpm-fd-capacity-card,
   .jpm-fd-grid>.jpm-fd-card:nth-child(n + 4) {
      grid-column: auto;
      min-height: 145px;
      gap: 13px;
      padding: 14px;
      border-radius: 11px;
   }

   .jpm-fd-icon {
      flex: 0 0 38px;
      width: 38px;
      height: 38px;
      font-size: 20px;
      border-radius: 10px;
   }



   .jpm-fd-content h3,
   .jpm-fd-office-card .jpm-fd-content h3 {
      margin-bottom: 6px;
      font-size: 16px;
      line-height: 1.4;
   }

   .jpm-fd-orange-line {
      width: 38px;
      height: 3px;
      margin-bottom: 8px;
   }

   .jpm-fd-value {
      font-size: 20px;
      white-space: normal;
   }

   .jpm-fd-note {
      font-size: 15px;
   }

   .jpm-fd-gstin-value {
      font-size: 18px;
   }

   .jpm-fd-watermark {
      right: 8px;
      bottom: 10px;
      font-size: 53px;
   }

   /* Office card on mobile */
   .jpm-fd-office-card {
      min-height: 245px;
      padding-bottom: 120px;
   }

   .jpm-fd-office-card .jpm-fd-content {
      flex: 1 1 auto;
      padding-top: 4px !important;
   }

   .jpm-fd-office-card .jpm-fd-content p {
      font-size: 15px;
      line-height: 1.5;
   }

   .jpm-fd-office-photo {
      top: auto;
      bottom: 0;
      width: 100%;
      height: 105px;
      clip-path: none;
   }

   .jpm-fd-office-photo img {
      object-position: center 55%;
   }

   .jpm-fd-office-shape {
      top: auto;
      right: 0;
      bottom: 100px;
      width: 100%;
      height: 4px;
      transform: none;
      background: var(--jpm-cyan);
   }
}

/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 380px) {
   .jpm-facility-details {
      padding-right: 10px;
      padding-left: 10px;
   }

   .jpm-fd-heading h2 {
      font-size: 28px;
   }

   .jpm-fd-heading>p {
      font-size: 15px;
      letter-spacing: 1.5px;
   }

   .jpm-fd-card {
      gap: 10px;
      padding: 11px;
   }

   .jpm-fd-icon {
      flex-basis: 52px;
      width: 52px;
      height: 52px;
      font-size: 22px;
   }

   .jpm-fd-content h3 {
      font-size: 15px;
   }

   .jpm-fd-value {
      font-size: 25px;
   }

   .jpm-fd-gstin-value {
      font-size: 18px;
   }
}

/* ==========================================
   ACCESSIBILITY
========================================== */

@media (prefers-reduced-motion: reduce) {

   .jpm-facility-details *,
   .jpm-facility-details *::before,
   .jpm-facility-details *::after {
      animation: none !important;
      transition: none !important;
   }
}

:root {
   --jpm-navy: #071827;
   --jpm-navy-2: #0c263a;
   --jpm-blue: #0b6ea8;
   --jpm-cyan: #19b5c9;
   --jpm-orange: #f5a623;
   --jpm-white: #fff;
   --jpm-light: #f3f6f8;
   --jpm-text: #53616d;
   --jpm-border: #dfe6eb;
}

/* =========================================
   MAIN SECTION
========================================= */

.jpm-ovm-section,
.jpm-ovm-section * {
   box-sizing: border-box;
}

.jpm-ovm-section {
   width: 100%;
   padding: 50px 0;
   overflow: hidden;
   background: #ffffff;
   color: var(--jpm-navy);
   font-family: "Poppins", sans-serif;
}

.jpm-ovm-section h2,
.jpm-ovm-section p {
   margin-top: 0;
}

/* =========================================
   ROW LAYOUT
========================================= */

.jpm-ovm-row {
   position: relative;
   display: grid;
   grid-template-columns: 32% 100px minmax(0, 1fr);
   align-items: center;
   min-height: 260px;
   margin-bottom: 14px;
   overflow: hidden;
   isolation: isolate;
   background:
      radial-gradient(circle at 75% 40%,
         rgba(11, 110, 168, 0.045),
         transparent 48%),
      #f5faff;
   border: 1px solid rgba(11, 110, 168, 0.045);
   border-radius: 9px;
   transition:
      box-shadow 0.35s ease,
      background 0.35s ease;
}

.jpm-ovm-row:last-child {
   margin-bottom: 0;
}

.jpm-ovm-row:hover {
   background-color: #ffffff;
   box-shadow: 0 12px 30px rgba(7, 24, 39, 0.08);
}

/* =========================================
   INDUSTRIAL IMAGE
========================================= */

.jpm-ovm-photo {
   position: relative;
   align-self: stretch;
   min-height: 260px;
   overflow: hidden;
   clip-path: polygon(0 0, 83% 0, 100% 100%, 0 100%);
}

.jpm-ovm-photo img {
   display: block;
   width: 100%;
   height: 100%;
   min-height: 260px;
   position: absolute;
   inset: 0;
   object-fit: cover;
   object-position: center;
   transition: transform 0.8s ease;
}

.jpm-ovm-row:hover .jpm-ovm-photo img {
   transform: scale(1.07);
}

.jpm-ovm-photo-blue {
   position: absolute;
   z-index: 1;
   top: 0;
   right: 0;
   width: 22%;
   height: 100%;
   background: #0757b8;
   clip-path: polygon(100% 0, 100% 0, 100% 100%, 0 0);
   pointer-events: none;
}

.jpm-ovm-photo-orange {
   position: absolute;
   z-index: 2;
   top: 60%;
   right: 0;
   width: 17%;
   height: 25%;
   background: var(--jpm-orange);
   clip-path: polygon(48% 0, 100% 0, 52% 100%, 0 100%);
   pointer-events: none;
   transition: height 0.35s ease;
   display: none;
}

.jpm-ovm-row:hover .jpm-ovm-photo-orange {
   height: 30%;
}

/* =========================================
   ALTERNATING IMAGE POSITIONS
========================================= */

/* Vision: image on the right */
.jpm-ovm-vision {
   grid-template-columns: 100px minmax(0, 1fr) 36%;
   margin: 50px 0;
}

.jpm-ovm-vision .jpm-ovm-photo {
   grid-column: 3;
   grid-row: 1;
   clip-path: polygon(17% 0, 100% 0, 100% 100%, 0 100%);
}

.jpm-ovm-vision .jpm-ovm-photo-blue {
   right: auto;
   left: 0;
   transform: scaleX(-1);
}

.jpm-ovm-vision .jpm-ovm-photo-orange {
   right: auto;
   left: 0;
   transform: scaleX(-1);
}

.jpm-ovm-vision .jpm-ovm-icon-wrap {
   grid-column: 1;
   grid-row: 1;
   padding-left: 20px;
}

.jpm-ovm-vision .jpm-ovm-content {
   grid-column: 2;
   grid-row: 1;
   padding: 22px 20px 22px 12px;
}

/* Objective and Mission: image on the left */
.jpm-ovm-objective .jpm-ovm-icon-wrap,
.jpm-ovm-mission .jpm-ovm-icon-wrap {
   grid-column: 2;
   grid-row: 1;
   padding-left: 8px;
}

.jpm-ovm-objective .jpm-ovm-content,
.jpm-ovm-mission .jpm-ovm-content {
   grid-column: 3;
   grid-row: 1;
   padding: 22px 35px 22px 8px;
}

/* =========================================
   CIRCULAR ICON
========================================= */

.jpm-ovm-icon-wrap {
   position: relative;
   z-index: 3;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding-top: 22px;
}

.jpm-ovm-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 66px;
   height: 66px;
   flex-shrink: 0;
   color: #0757b8;
   font-size: 27px;
   background: linear-gradient(145deg,
         #d9ecff,
         #f0f8ff);
   border: 1px solid rgba(11, 110, 168, 0.08);
   border-radius: 50%;
   box-shadow: 0 4px 14px rgba(11, 110, 168, 0.06);
   transition:
      transform 0.4s ease,
      background 0.4s ease,
      color 0.4s ease,
      box-shadow 0.4s ease;
}

.jpm-ovm-row:hover .jpm-ovm-icon {
   color: #ffffff;
   background: linear-gradient(145deg,
         #0b6ea8,
         #0757b8);
   transform: rotate(-7deg) scale(1.06);
   box-shadow: 0 8px 20px rgba(11, 110, 168, 0.2);
}

/* =========================================
   CONTENT
========================================= */

.jpm-ovm-content {
   position: relative;
   z-index: 2;
   min-width: 0;
}

.jpm-ovm-kicker {
   display: block;
   width: 55px;
   height: 5px;
   margin-bottom: 15px;
   background: var(--jpm-orange);
   transition: width 0.35s ease;
}

.jpm-ovm-row:hover .jpm-ovm-kicker {
   width: 75px;
}

.jpm-ovm-content h2 {
   margin-bottom: 12px;
   color: var(--jpm-navy);
   font-size: clamp(22px, 1.8vw, 36px);
   font-weight: 800;
   line-height: 1.12;
   letter-spacing: -0.8px;
   text-transform: uppercase;
   background: linear-gradient(90deg,
         var(--jpm-navy),
         #075fc0);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.jpm-ovm-content>p {
   max-width: 900px;
   margin-bottom: 0;
   color: #243951;
   font-size: 16px;
   line-height: 1.65;
}

/* =========================================
   MISSION LIST
========================================= */

.jpm-ovm-mission-list {
   display: flex;
   flex-direction: column;
   gap: 7px;
   margin: 0;
   padding: 0;
   list-style: none;
}

.jpm-ovm-mission-list li {
   position: relative;
   padding-left: 22px;
   color: #243951;
   font-size: 15px;
   line-height: 1.55;
   transition:
      color 0.3s ease,
      transform 0.3s ease;
}

.jpm-ovm-mission-list li::before {
   position: absolute;
   top: 5px;
   left: 0;
   width: 0;
   height: 0;
   content: "";
   border-top: 8px solid transparent;
   border-bottom: 8px solid transparent;
   border-left: 12px solid var(--jpm-orange);
   transition: transform 0.3s ease;
}

.jpm-ovm-mission-list li:hover {
   color: var(--jpm-blue);
   transform: translateX(3px);
}

.jpm-ovm-mission-list li:hover::before {
   transform: translateX(2px);
}

/* =========================================
   BACKGROUND WATERMARK ICONS
========================================= */

.jpm-ovm-watermark {
   position: absolute;
   z-index: 0;
   top: 28px;
   right: 25px;
   color: rgba(11, 110, 168, 0.09);
   font-size: 100px;
   pointer-events: none;
   transition:
      transform 0.5s ease,
      color 0.4s ease;
}

.jpm-ovm-row:hover .jpm-ovm-watermark {
   color: rgba(11, 110, 168, 0.15);
   transform: scale(1.1) rotate(-7deg);
}

/* Decorative dot pattern */

.jpm-ovm-dots {
   position: absolute;
   top: 10px;
   right: 14px;
   width: 75px;
   height: 55px;
   z-index: 0;
   pointer-events: none;
   background-image: radial-gradient(rgba(8, 101, 201, 0.19) 2px,
         transparent 2.5px);
   background-size: 13px 13px;
   transition: opacity 0.3s ease;
}

.jpm-ovm-row:hover .jpm-ovm-dots {
   opacity: 0.5;
}

/* =========================================
   TABLET RESPONSIVE
========================================= */

@media (max-width: 1100px) {
   .jpm-ovm-row {
      grid-template-columns: 27% 75px minmax(0, 1fr);
      min-height: 250px;
   }

   .jpm-ovm-photo,
   .jpm-ovm-photo img {
      min-height: 250px;
   }

   .jpm-ovm-vision {
      grid-template-columns: 75px minmax(0, 1fr) 30%;
   }

   .jpm-ovm-icon {
      width: 65px;
      height: 65px;
      font-size: 28px;
   }

   .jpm-ovm-content h2 {
      font-size: 30px;
   }

   .jpm-ovm-content>p {
      font-size: 15px;
      line-height: 1.55;
   }

   .jpm-ovm-mission-list li {
      font-size: 15px;
   }

   .jpm-ovm-objective .jpm-ovm-content,
   .jpm-ovm-mission .jpm-ovm-content {
      padding-right: 22px;
   }

   .jpm-ovm-watermark {
      font-size: 75px;
   }
}

/* =========================================
   MOBILE RESPONSIVE
========================================= */

@media (max-width: 700px) {
   .jpm-ovm-section {
      padding: 10px;
   }

   .jpm-ovm-row,
   .jpm-ovm-vision {
      display: grid;
      grid-template-columns: 65px minmax(0, 1fr);
      min-height: auto;
      margin-bottom: 14px;
      border-radius: 10px;
   }

   .jpm-ovm-photo {
      grid-column: 1 / -1 !important;
      grid-row: 1 !important;
      width: 100%;
      height: 190px;
      min-height: 190px;
      clip-path: none;
      border-radius: 9px 9px 0 0;
   }

   .jpm-ovm-photo img {
      min-height: 190px;
      object-position: center;
   }

   .jpm-ovm-photo-blue {
      right: 0;
      width: 15%;
   }

   .jpm-ovm-photo-orange {
      top: 55%;
      right: 0;
      width: 12%;
      height: 25%;
   }

   .jpm-ovm-icon-wrap,
   .jpm-ovm-objective .jpm-ovm-icon-wrap,
   .jpm-ovm-vision .jpm-ovm-icon-wrap,
   .jpm-ovm-mission .jpm-ovm-icon-wrap {
      grid-column: 1;
      grid-row: 2;
      justify-content: flex-start;
      padding: 19px 0 0 10px;
   }

   .jpm-ovm-content,
   .jpm-ovm-objective .jpm-ovm-content,
   .jpm-ovm-vision .jpm-ovm-content,
   .jpm-ovm-mission .jpm-ovm-content {
      grid-column: 2;
      grid-row: 2;
      padding: 19px 14px 23px 5px;
   }

   .jpm-ovm-icon {
      width: 48px;
      height: 48px;
      font-size: 23px;
   }

   .jpm-ovm-kicker {
      width: 42px;
      height: 4px;
      margin-bottom: 10px;
   }

   .jpm-ovm-content h2 {
      margin-bottom: 9px;
      font-size: 25px;
      letter-spacing: -0.4px;
   }

   .jpm-ovm-content>p {
      font-size: 15px;
      line-height: 1.6;
   }

   .jpm-ovm-mission-list {
      gap: 9px;
   }

   .jpm-ovm-mission-list li {
      padding-left: 19px;
      font-size: 15px;
      line-height: 1.5;
   }

   .jpm-ovm-watermark {
      top: auto;
      right: 12px;
      bottom: 12px;
      font-size: 47px;
   }

   .jpm-ovm-dots {
      top: 8px;
      right: 8px;
      width: 50px;
      height: 40px;
      background-size: 11px 11px;
   }
}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 380px) {
   .jpm-ovm-section {
      padding: 7px;
   }

   .jpm-ovm-photo,
   .jpm-ovm-photo img {
      height: 160px;
      min-height: 160px;
   }

   .jpm-ovm-row,
   .jpm-ovm-vision {
      grid-template-columns: 53px minmax(0, 1fr);
   }

   .jpm-ovm-icon-wrap,
   .jpm-ovm-objective .jpm-ovm-icon-wrap,
   .jpm-ovm-vision .jpm-ovm-icon-wrap,
   .jpm-ovm-mission .jpm-ovm-icon-wrap {
      padding-left: 6px;
   }

   .jpm-ovm-content,
   .jpm-ovm-objective .jpm-ovm-content,
   .jpm-ovm-vision .jpm-ovm-content,
   .jpm-ovm-mission .jpm-ovm-content {
      padding-right: 10px;
      padding-left: 3px;
   }

   .jpm-ovm-icon {
      width: 42px;
      height: 42px;
      font-size: 20px;
   }

   .jpm-ovm-content h2 {
      font-size: 22px;
   }

   .jpm-ovm-content>p,
   .jpm-ovm-mission-list li {
      font-size: 15px;
   }
}

/* =========================================
   REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

   .jpm-ovm-section *,
   .jpm-ovm-section *::before,
   .jpm-ovm-section *::after {
      animation: none !important;
      transition: none !important;
   }
}

/* ==========================================
   JPM FABRICATIONS - PROJECTS SHOWCASE
   White Background | Navy Cards | Cyan Hover
========================================== */

.jpm-work-showcase {
   position: relative;
   overflow: hidden;
   padding: 50px 0;
   background: #ffffff;
   color: #071827;
}

.jpm-work-showcase *,
.jpm-work-showcase *::before,
.jpm-work-showcase *::after {
   box-sizing: border-box;
}

/* ==========================================
   SECTION HEADING
========================================== */

.jpm-work-heading {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 35px;
   margin-bottom: 25px;
}

.jpm-work-heading-content {
   flex: 1 1 55%;
}

.jpm-work-eyebrow {
   display: inline-block;
   margin-bottom: 14px;
   color: #0b6ea8;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: 3px;
   text-transform: uppercase;
}

.jpm-work-title {
   margin: 0;
   color: #071827;
   font-size: clamp(34px, 4vw, 54px);
   font-weight: 800;
   line-height: 1.15;
   letter-spacing: -1.5px;
}

.jpm-work-title span {
   color: #0b6ea8;
}

.jpm-work-description {
   max-width: 420px;
   margin: 0 0 5px;
   color: #586775;
   font-size: 16px;
   line-height: 1.9;
}

/* ==========================================
   PROJECT GRID
========================================== */

.jpm-work-grid {
   --bs-gutter-x: 28px;
   --bs-gutter-y: 28px;
}

/* ==========================================
   PROJECT CARD
========================================== */

.jpm-work-card {
   position: relative;
   height: 100%;
   overflow: hidden;
   background: #071827;
   border: 1px solid #e4ebf0;
   border-radius: 12px;
   box-shadow: 0 8px 28px rgba(7, 24, 39, 0.06);

   transition:
      transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 0.45s ease,
      border-color 0.45s ease;
}

/* Card Hover */
.jpm-work-card:hover {
   transform: translateY(-10px);
   border-color: #19b5c9;

   box-shadow:
      0 20px 45px rgba(7, 24, 39, 0.16),
      0 0 18px rgba(25, 181, 201, 0.12);
}

/* Animated Top Border */

.jpm-work-card::before {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 5;
   width: 100%;
   height: 3px;
   content: "";
   background: #19b5c9;
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.45s ease;
}

.jpm-work-card:hover::before {
   transform: scaleX(1);
}

/* ==========================================
   PROJECT IMAGE
========================================== */

.jpm-work-image {
   position: relative;
   height: 260px;
   overflow: hidden;
   background: #0c263a;
}

.jpm-work-image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;

   transition:
      transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
      filter 0.5s ease;
}

/* Image Zoom Animation */

.jpm-work-card:hover .jpm-work-image img {
   transform: scale(1.09);
   filter: brightness(1.08);
}

/* Image Overlay */

.jpm-work-image::after {
   position: absolute;
   inset: 0;
   content: "";
   background: linear-gradient(180deg,
         rgba(7, 24, 39, 0.02) 35%,
         rgba(7, 24, 39, 0.55) 100%);
   pointer-events: none;
   transition: background 0.4s ease;
}

.jpm-work-card:hover .jpm-work-image::after {
   background: linear-gradient(180deg,
         rgba(7, 24, 39, 0.02) 20%,
         rgba(7, 24, 39, 0.35) 100%);
}

/* ==========================================
   PROJECT NUMBER
========================================== */

.jpm-work-number {
   position: absolute;
   top: 16px;
   right: 16px;
   z-index: 6;

   display: flex;
   align-items: center;
   justify-content: center;

   width: 43px;
   height: 43px;

   color: #ffffff;
   background: #0b6ea8;
   border: 1px solid rgba(255, 255, 255, 0.35);
   border-radius: 50%;

   font-size: 15px;
   font-weight: 700;

   box-shadow: 0 5px 15px rgba(7, 24, 39, 0.2);

   transition:
      background 0.4s ease,
      transform 0.5s ease,
      box-shadow 0.4s ease;
}

.jpm-work-card:hover .jpm-work-number {
   background: #19b5c9;
   transform: rotate(360deg);
   box-shadow: 0 0 20px rgba(25, 181, 201, 0.4);
}

/* ==========================================
   PROJECT CAPTION
========================================== */

.jpm-work-caption {
   position: relative;
   z-index: 2;
   padding: 25px 24px 28px;
   background: #071827;

   transition: background 0.4s ease;
}

.jpm-work-category {
   display: inline-block;
   margin-bottom: 10px;
   color: #19b5c9;
   font-size: 15px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;

   transition:
      color 0.35s ease,
      letter-spacing 0.35s ease;
}

.jpm-work-card:hover .jpm-work-category {
   color: #ffffff;
   letter-spacing: 2px;
}

/* Project Title */

.jpm-work-caption h3 {
   position: relative;
   margin: 0 0 12px;
   color: #ffffff;
   font-size: 21px;
   font-weight: 700;
   line-height: 1.4;

   transition:
      color 0.35s ease,
      transform 0.35s ease;
}

.jpm-work-card:hover .jpm-work-caption h3 {
   color: #19b5c9;
   transform: translateX(4px);
}

/* Project Description */

.jpm-work-caption p {
   margin: 0;
   color: #c1ced7;
   font-size: 16px;
   line-height: 1.8;

   transition: color 0.35s ease;
}

.jpm-work-card:hover .jpm-work-caption p {
   color: #ffffff;
}

/* ==========================================
   ANIMATED CAPTION ACCENT
========================================== */

.jpm-work-caption h3::after {
   display: block;
   width: 0;
   height: 2px;
   margin-top: 9px;
   content: "";
   background: #19b5c9;

   transition: width 0.4s ease;
}

.jpm-work-card:hover .jpm-work-caption h3::after {
   width: 55px;
}

/* ==========================================
   TABLET RESPONSIVE
========================================== */

@media (max-width: 991.98px) {

   .jpm-work-showcase {
      padding: 70px 0;
   }

   .jpm-work-heading {
      align-items: flex-start;
      flex-direction: column;
      gap: 20px;
   }

   .jpm-work-description {
      max-width: 650px;
   }

   .jpm-work-image {
      height: 230px;
   }

   .jpm-work-caption {
      padding: 22px 20px 24px;
   }

   .jpm-work-caption h3 {
      font-size: 19px;
   }

   .jpm-work-card:hover {
      transform: translateY(-6px);
   }
}

/* ==========================================
   MOBILE RESPONSIVE
========================================== */

@media (max-width: 575.98px) {

   .jpm-work-showcase {
      padding: 55px 0;
   }

   .jpm-work-heading {
      margin-bottom: 15px;
   }

   .jpm-work-eyebrow {
      font-size: 15px;
      letter-spacing: 2px;
   }

   .jpm-work-title {
      font-size: 34px;
      letter-spacing: -0.8px;
   }

   .jpm-work-description {
      font-size: 16px;
      line-height: 1.8;
   }

   .jpm-work-grid {
      --bs-gutter-x: 18px;
      --bs-gutter-y: 22px;
   }

   .jpm-work-image {
      height: 240px;
   }

   .jpm-work-caption {
      padding: 22px 18px 24px;
   }

   .jpm-work-caption h3 {
      font-size: 19px;
   }

   .jpm-work-caption p {
      font-size: 16px;
   }

   .jpm-work-card:hover {
      transform: translateY(-4px);
   }
}

/* ==========================================
   ACCESSIBILITY
========================================== */

@media (prefers-reduced-motion: reduce) {

   .jpm-work-card,
   .jpm-work-card::before,
   .jpm-work-card img,
   .jpm-work-card::after,
   .jpm-work-number,
   .jpm-work-caption,
   .jpm-work-caption h3,
   .jpm-work-caption h3::after,
   .jpm-work-caption p,
   .jpm-work-category {
      transition: none !important;
      animation: none !important;
   }

   .jpm-work-card:hover,
   .jpm-work-card:hover img,
   .jpm-work-card:hover .jpm-work-number {
      transform: none;
   }
}

/* =========================================
   JPM CONTACT SECTION
========================================= */

:root {
   --jpm-navy: #071827;
   --jpm-navy-2: #0c263a;
   --jpm-blue: #0b6ea8;
   --jpm-cyan: #19b5c9;
   --jpm-orange: #f5a623;
   --jpm-white: #fff;
   --jpm-light: #f3f6f8;
   --jpm-text: #53616d;
   --jpm-border: #dfe6eb;
}

.jpm-contact-section {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   padding: 50px 0;
   background: var(--jpm-light);
   font-family: "Poppins", sans-serif;
}

.jpm-contact-pattern {
   position: absolute;
   z-index: -1;
   top: 0;
   right: 0;
   width: 430px;
   height: 430px;
   border: 1px solid rgba(11, 110, 168, 0.08);
   border-radius: 50%;
   box-shadow:
      0 0 0 45px rgba(11, 110, 168, 0.025),
      0 0 0 90px rgba(11, 110, 168, 0.02);
   pointer-events: none;
   animation: jpm-contact-pattern-rotate 35s linear infinite;
}

.jpm-contact-container {
   position: relative;
   z-index: 1;
}

/* Section Heading */

.jpm-contact-heading {
   max-width: 760px;
   margin: 0 auto 55px;
   text-align: center;
}

.jpm-contact-subtitle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   margin-bottom: 15px;
   color: var(--jpm-blue);
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 3px;
}

.jpm-contact-line {
   display: inline-block;
   width: 30px;
   height: 2px;
   background: var(--jpm-orange);
}

.jpm-contact-heading h2 {
   margin: 0 0 18px;
   color: var(--jpm-navy);
   font-size: clamp(34px, 4vw, 48px);
   font-weight: 800;
   line-height: 1.2;
}

.jpm-contact-heading h2 span {
   position: relative;
   color: var(--jpm-blue);
}

.jpm-contact-heading h2 span::after {
   position: absolute;
   right: 0;
   bottom: -5px;
   left: 0;
   height: 3px;
   background: var(--jpm-orange);
   content: "";
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.5s ease;
}

.jpm-contact-heading:hover h2 span::after {
   transform: scaleX(1);
}

.jpm-contact-heading p {
   max-width: 700px;
   margin: 0 auto;
   color: var(--jpm-text);
   font-size: 16px;
   line-height: 1.9;
}

/* Location Cards */

.jpm-contact-location-card {
   position: relative;
   height: 100%;
   padding: 35px;
   overflow: hidden;
   background: var(--jpm-white);
   border: 1px solid var(--jpm-border);
   border-radius: 12px;
   box-shadow: 0 10px 35px rgba(7, 24, 39, 0.045);
   transition:
      transform 0.4s ease,
      border-color 0.4s ease,
      box-shadow 0.4s ease;
}

.jpm-contact-location-card::before {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: var(--jpm-cyan);
   content: "";
   transform: scaleX(0);
   transform-origin: left;
   transition: transform 0.45s ease;
}

.jpm-contact-location-card::after {
   position: absolute;
   right: -55px;
   bottom: -65px;
   width: 160px;
   height: 160px;
   border: 1px solid rgba(25, 181, 201, 0.12);
   border-radius: 50%;
   content: "";
   transition: transform 0.5s ease;
   pointer-events: none;
}

.jpm-contact-location-card:hover {
   transform: translateY(-8px);
   border-color: rgba(25, 181, 201, 0.6);
   box-shadow: 0 22px 48px rgba(7, 24, 39, 0.11);
}

.jpm-contact-location-card:hover::before {
   transform: scaleX(1);
}

.jpm-contact-location-card:hover::after {
   transform: scale(1.4);
}

.jpm-contact-card-top {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 18px;
}

.jpm-contact-icon {
   display: flex;
   flex: 0 0 62px;
   align-items: center;
   justify-content: center;
   width: 62px;
   height: 62px;
   color: var(--jpm-white);
   background: var(--jpm-navy);
   border-radius: 10px;
   font-size: 24px;
   transition:
      background 0.35s ease,
      color 0.35s ease,
      transform 0.4s ease;
}

.jpm-contact-location-card:hover .jpm-contact-icon {
   color: var(--jpm-navy);
   background: var(--jpm-cyan);
   transform: rotate(-6deg) scale(1.06);
}

.jpm-contact-unit-label {
   display: block;
   margin-bottom: 5px;
   color: var(--jpm-text);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 2px;
}

.jpm-contact-card-top h3 {
   margin: 0;
   color: var(--jpm-navy);
   font-size: 25px;
   font-weight: 800;
}

.jpm-contact-card-top h3 span {
   color: var(--jpm-blue);
}

.jpm-contact-card-number {
   margin-left: auto;
   color: rgba(7, 24, 39, 0.07);
   font-size: 54px;
   font-weight: 800;
   line-height: 1;
   transition: color 0.3s ease;
}

.jpm-contact-location-card:hover .jpm-contact-card-number {
   color: rgba(25, 181, 201, 0.2);
}

.jpm-contact-card-divider {
   width: 100%;
   height: 1px;
   margin: 27px 0;
   background: var(--jpm-border);
}

.jpm-contact-location-card h4 {
   position: relative;
   z-index: 1;
   margin: 0 0 15px;
   color: var(--jpm-navy);
   font-size: 21px;
   font-weight: 700;
}

.jpm-contact-address {
   position: relative;
   z-index: 1;
   min-height: 87px;
   margin: 0 0 25px;
   color: var(--jpm-text);
   font-size: 15px;
   line-height: 1.9;
}

.jpm-contact-map-link {
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: var(--jpm-blue);
   font-size: 14px;
   font-weight: 700;
   text-decoration: none;
   transition: color 0.3s ease, gap 0.3s ease;
}

.jpm-contact-map-link i {
   color: var(--jpm-orange);
   transition: transform 0.3s ease;
}

.jpm-contact-map-link:hover {
   gap: 16px;
   color: var(--jpm-cyan);
}

.jpm-contact-map-link:hover i {
   transform: translateX(4px);
}

/* Contact Information Strip */

.jpm-contact-info-wrapper {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   margin-top: 35px;
   background: var(--jpm-navy);
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 15px 40px rgba(7, 24, 39, 0.12);
}

.jpm-contact-info-item {
   position: relative;
   display: flex;
   align-items: center;
   gap: 17px;
   min-width: 0;
   padding: 30px 25px;
   border-right: 1px solid rgba(255, 255, 255, 0.12);
   transition: background 0.35s ease;
}

.jpm-contact-info-item:last-child {
   border-right: 0;
}

.jpm-contact-info-item:hover {
   background: var(--jpm-navy-2);
}

.jpm-contact-info-icon {
   display: flex;
   flex: 0 0 50px;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   color: var(--jpm-navy);
   background: var(--jpm-cyan);
   border-radius: 9px;
   font-size: 20px;
   transition:
      background 0.3s ease,
      transform 0.35s ease;
}

.jpm-contact-info-item:hover .jpm-contact-info-icon {
   background: var(--jpm-orange);
   transform: translateY(-4px);
}

.jpm-contact-info-content {
   min-width: 0;
}

.jpm-contact-info-content span {
   display: block;
   margin-bottom: 8px;
   color: rgba(255, 255, 255, 0.62);
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 1.7px;
}

.jpm-contact-info-content a {
   display: inline-block;
   max-width: 100%;
   color: var(--jpm-white);
   font-size: 14px;
   font-weight: 600;
   overflow-wrap: anywhere;
   text-decoration: none;
   transition: color 0.3s ease;
}

.jpm-contact-info-content a:hover {
   color: var(--jpm-cyan);
}

.jpm-contact-info-arrow {
   margin-left: auto;
   color: var(--jpm-orange);
   font-size: 13px;
   opacity: 0;
   transform: translate(-5px, 5px);
   transition:
      opacity 0.3s ease,
      transform 0.3s ease;
}

.jpm-contact-info-item:hover .jpm-contact-info-arrow {
   opacity: 1;
   transform: translate(0, 0);
}

/* Bottom CTA */

.jpm-contact-cta {
   position: relative;
   display: flex;
   align-items: center;
   gap: 24px;
   margin-top: 35px;
   padding: 32px 35px;
   overflow: hidden;
   background: var(--jpm-white);
   border: 1px solid var(--jpm-border);
   border-left: 5px solid var(--jpm-orange);
   border-radius: 10px;
   box-shadow: 0 8px 25px rgba(7, 24, 39, 0.04);
}

.jpm-contact-cta-icon {
   display: flex;
   flex: 0 0 65px;
   align-items: center;
   justify-content: center;
   width: 65px;
   height: 65px;
   color: var(--jpm-white);
   background: var(--jpm-blue);
   border-radius: 10px;
   font-size: 27px;
   transition: transform 0.4s ease;
}

.jpm-contact-cta:hover .jpm-contact-cta-icon {
   transform: rotate(12deg);
}

.jpm-contact-cta-text {
   flex: 1;
}

.jpm-contact-cta-text h3 {
   margin: 0 0 8px;
   color: var(--jpm-navy);
   font-size: 21px;
   font-weight: 800;
}

.jpm-contact-cta-text p {
   margin: 0;
   color: var(--jpm-text);
   font-size: 15px;
   line-height: 1.7;
}

.jpm-contact-cta-button {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
   gap: 12px;
   min-height: 50px;
   padding: 14px 22px;
   color: var(--jpm-white);
   background: var(--jpm-navy);
   border: 1px solid var(--jpm-navy);
   border-radius: 5px;
   font-size: 14px;
   font-weight: 700;
   text-decoration: none;
   transition:
      background 0.3s ease,
      border-color 0.3s ease,
      transform 0.3s ease;
}

.jpm-contact-cta-button i {
   color: var(--jpm-orange);
   transition: transform 0.3s ease;
}

.jpm-contact-cta-button:hover {
   color: var(--jpm-navy);
   background: var(--jpm-cyan);
   border-color: var(--jpm-cyan);
   transform: translateY(-3px);
}

.jpm-contact-cta-button:hover i {
   color: var(--jpm-navy);
   transform: translateX(4px);
}

/* Background Animation */

@keyframes jpm-contact-pattern-rotate {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */

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

   .jpm-contact-info-wrapper {
      grid-template-columns: 1fr;
   }

   .jpm-contact-info-item {
      border-right: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
   }

   .jpm-contact-info-item:last-child {
      border-bottom: 0;
   }

   .jpm-contact-cta {
      flex-wrap: wrap;
   }

   .jpm-contact-cta-button {
      margin-left: 89px;
   }
}

@media (max-width: 575px) {
   .jpm-contact-section {
      padding: 60px 0;
   }

   .jpm-contact-heading {
      margin-bottom: 35px;
   }

   .jpm-contact-heading h2 {
      font-size: 34px;
   }

   .jpm-contact-heading p {
      font-size: 15px;
   }

   .jpm-contact-location-card {
      padding: 25px 22px;
   }

   .jpm-contact-card-top {
      gap: 12px;
   }

   .jpm-contact-icon {
      flex-basis: 52px;
      width: 52px;
      height: 52px;
      font-size: 21px;
   }

   .jpm-contact-card-top h3 {
      font-size: 22px;
   }

   .jpm-contact-card-number {
      font-size: 38px;
   }

   .jpm-contact-location-card h4 {
      font-size: 19px;
   }

   .jpm-contact-address {
      min-height: 0;
      font-size: 14px;
   }

   .jpm-contact-info-item {
      padding: 24px 18px;
      gap: 13px;
   }

   .jpm-contact-info-icon {
      flex-basis: 44px;
      width: 44px;
      height: 44px;
      font-size: 18px;
   }

   .jpm-contact-info-content a {
      font-size: 13px;
   }

   .jpm-contact-cta {
      align-items: flex-start;
      gap: 18px;
      padding: 25px 20px;
   }

   .jpm-contact-cta-icon {
      flex-basis: 52px;
      width: 52px;
      height: 52px;
      font-size: 22px;
   }

   .jpm-contact-cta-text {
      flex-basis: calc(100% - 75px);
   }

   .jpm-contact-cta-text h3 {
      font-size: 19px;
      line-height: 1.5;
   }

   .jpm-contact-cta-text p {
      font-size: 14px;
   }

   .jpm-contact-cta-button {
      width: 100%;
      margin-left: 0;
   }
}

/* Reduced Motion Accessibility */

@media (prefers-reduced-motion: reduce) {
   .jpm-contact-pattern {
      animation: none;
   }

   .jpm-contact-section *,
   .jpm-contact-section *::before,
   .jpm-contact-section *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
   }
}