/**
* Template Name: Logis
* Template URL: https://bootstrapmade.com/logis-bootstrap-logistics-website-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Poppins",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Poppins",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #000000; /* Black text for regular body content */
  --heading-color: #0b2d75; /* Bright blue color for headings and titles */
  --accent-color: #ff7a24; /* Orange accent used for buttons, links, and highlights */
  --surface-color: #ffffff; /* Surface color used for cards and boxed elements */
  --contrast-color: #ffffff; /* Contrast color for text on accent or dark backgrounds */
  --body-text-color: #000000; /* Shared color for normal paragraph/list text */
  --body-text-size: 16px; /* Shared size for normal paragraph/list text */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-background-color: #ffffff; /* Navbar background color */
  --nav-color: #0b2d75;  /* The default color of the main navmenu links */
  --nav-hover-color: #ff7a24; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #0b2d75; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #ff7a24; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f7f9fc;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #0e1d34;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #19335c;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: clamp(14px, 0.95vw, 16px);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--body-text-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  font-size: var(--body-text-size);
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Site-wide typography tune:
   - Uses Poppins consistently across text, navigation, buttons, and forms.
   - Keeps body copy readable with balanced line-height.
   - Standardizes heading weight and spacing without changing section layouts.
*/
p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--body-text-color);
  font-size: var(--body-text-size);
  line-height: 1.75;
  font-weight: 400;
  text-align: justify;
}

button,
input,
textarea,
select {
  font: inherit;
  letter-spacing: 0;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0;
  margin-top: 0;
}

h1 {
  font-size: clamp(2.4rem, 4vw, 4.2rem);
}

h2 {
  font-size: clamp(2.1rem, 3.2vw, 3.4rem);
}

h3 {
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
}

h4 {
  font-size: clamp(1.6rem, 2.2vw, 2.2rem);
}

h5 {
  font-size: clamp(1.4rem, 1.9vw, 1.8rem);
}

h6 {
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
}

strong,
b {
  font-weight: 700;
}

small {
  font-size: 14px;
}

@media (max-width: 767px) {
  body,
  p {
    font-size: var(--body-text-size);
    line-height: 1.72;
  }

  h1 {
    font-size: 34px;
  }

  h2 {
    font-size: 28px;
  }

  h3 {
    font-size: 23px;
  }
}

/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
  width: 94px;
  height: 94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius: 50%;
  display: block;
  position: relative;
  overflow: hidden;
}

.pulsating-play-btn:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  animation-delay: 0s;
  animation: pulsate-play-btn 2s;
  animation-direction: forwards;
  animation-iteration-count: infinite;
  animation-timing-function: steps;
  opacity: 1;
  border-radius: 50%;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top: -15%;
  left: -15%;
  background: rgba(198, 16, 0, 0);
}

.pulsating-play-btn:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 100;
  transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.pulsating-play-btn:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-40%) translateY(-50%);
  width: 0;
  height: 0;
  border: none;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #fff;
  z-index: 200;
  animation: none;
  border-radius: 0;
}

.pulsating-play-btn:hover:after {
  border-left: 15px solid var(--accent-color);
  transform: scale(20);
}

@keyframes pulsate-play-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }

  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

/* Site Form Messages
------------------------------*/
.site-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.site-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.site-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.site-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: site-form-loading 1s linear infinite;
}

@keyframes site-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: var(--nav-background-color);
  --heading-color: #0b2d75;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 16px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  /* Logo is a header brand element, so increase size for better visibility and fit */
  max-height: 52px;
  width: auto;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  padding: 10px 0;
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: var(--nav-background-color);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    /* NOTE: Navigation set to bold — 2026-05-30 */
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 12px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 0;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 12px;
    z-index: 99;
    box-shadow: 0 18px 30px rgba(15, 23, 42, 0.08);
    min-width: 280px;
  }

  .navmenu .dropdown ul li {
    min-width: 240px;
  }

  .navmenu .dropdown ul a {
    padding: 14px 24px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
    display: block;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.16);
    transition: 0.25s;
  }

  .navmenu .dropdown ul li:last-child a {
    border-bottom: none;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
    background: rgba(255, 122, 36, 0.05);
  }

  .navmenu .nav-plus-item > a {
    gap: 8px;
  }

/* ============================================================
   # STATISTICS SECTION (Awards Page)
   Displays animated statistics with icons using frosted glass effect.
   Matches home page stats design for brand consistency.
   ============================================================ */

.awards-section {
  position: relative;
  padding: 78px 0;
  background: linear-gradient(rgba(240, 174, 99, 0.68), rgba(240, 241, 244, 0.68)),
              url("../img/world-dotted-map.png") center / cover fixed;
}

/* Frosted Glass Stats Panel */
.awards-section .stats-panel {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-image: url("../img/cta-bg.jpg");
  box-shadow: 0 24px 45px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(6px);
}

/* Individual stat item styling */
.awards-section .stats-item {
  display: flex;
  min-height: 170px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
}

/* Remove border on last stat item */
.awards-section .col-lg-3:last-child .stats-item {
  border-right: 0;
}

/* Stats icon styling with rotation hover effect */
.awards-section .stats-icon {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.94);
  border-radius: 10px;
  font-size: 30px;
  line-height: 1;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}

/* 360° rotation on hover */
.awards-section .stats-item:hover .stats-icon {
  transform: rotateY(360deg);
}

/* Animated counter numbers */
.awards-section .stats-counter {
  display: block;
  color: #ffffff;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
  font-family: var(--heading-font);
}

/* Stats label text in orange accent color */
.awards-section .stats-item p {
  color: var(--accent-color);
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
}

/* Responsive borders for tablets */
@media (max-width: 991px) {
  .awards-section .stats-item {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .awards-section .col-md-6:nth-child(odd) .stats-item {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .awards-section .col-md-6:nth-last-child(-n + 2) .stats-item {
    border-bottom: 0;
  }
}

/* Responsive adjustments for mobile */
@media (max-width: 767px) {
  .awards-section {
    padding: 55px 0;
    background-attachment: scroll;
  }

  .awards-section .stats-item {
    min-height: 140px;
    padding: 20px 16px;
  }

  .awards-section .stats-counter {
    font-size: 32px;
  }

  .awards-section .stats-item p {
    font-size: 14px;
  }
}

/* ============================================================
   # CERTIFICATIONS CAROUSEL SECTION
   Premium carousel showcasing company certifications with
   auto-rotation, touch support, and animated pagination.
   ============================================================ */

.certifications-carousel-section,
.awards-section {
  padding: 60px 0;
}

/* Certification section title/subtitle */
.certifications-carousel-section .certification-title,
.awards-section .certification-title {
  display: inline-block;
  color: var(--accent-color);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--accent-color);
}

/* Main certification heading */
.certifications-carousel-section .certification-heading,
.awards-section .certification-heading {
  font-size: 40px;
  font-weight: 800;
  margin: 0 0 40px 0;
  color: #ffffff;
  line-height: 1.3;
}

/* Certificate carousel container */
.certifications-carousel-section .certificateSwiper,
.awards-section .certificateSwiper {
  padding: 30px 0;
}

/* Individual certificate slide wrapper */
.certifications-carousel-section .certificate-slide,
.awards-section .certificate-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  padding: 20px;
}

.awards-section .certificate-card {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 360px;
  padding: 42px;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(9, 12, 19, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 45px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
}

.awards-section .certificate-card i {
  display: inline-flex;
  width: 64px;
  height: 64px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #ffffff;
  background: var(--accent-color);
  font-size: 28px;
}

.awards-section .certificate-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: 30px;
  font-weight: 800;
}

.awards-section .certificate-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 17px;
  line-height: 1.8;
}

/* Certificate image styling */
.certifications-carousel-section .swiper-slide img {
  width: 100%;
  max-height: 460px;
  height: auto;
  object-fit: contain;
  background: #ffffff;
  padding: 20px;
  border: 10px solid #ffffff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover effect on certificates */
.certifications-carousel-section .swiper-slide img:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

/* Carousel pagination styling */
.certifications-carousel-section .swiper-pagination,
.awards-section .swiper-pagination {
  bottom: 0;
  padding-bottom: 20px;
}

.certifications-carousel-section .swiper-pagination-bullet,
.awards-section .swiper-pagination-bullet {
  background: rgba(255, 122, 36, 0.3);
  width: 12px;
  height: 12px;
  opacity: 1;
  margin: 0 6px;
  transition: all 0.3s ease;
}

.certifications-carousel-section .swiper-pagination-bullet.swiper-pagination-bullet-active,
.awards-section .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--accent-color);
  width: 32px;
  border-radius: 6px;
}

/* Responsive adjustments for tablets */
@media (max-width: 991px) {
  .certifications-carousel-section .certification-heading,
  .awards-section .certification-heading {
    font-size: 32px;
    margin-bottom: 30px;
  }

  .certifications-carousel-section .certificate-slide,
  .awards-section .certificate-slide {
    min-height: 350px;
  }
}

/* Responsive adjustments for mobile */
@media (max-width: 767px) {
  .certifications-carousel-section,
  .awards-section {
    padding: 40px 0;
  }

  .certifications-carousel-section .certification-heading,
  .awards-section .certification-heading {
    font-size: 24px;
    margin-bottom: 25px;
  }

  .certifications-carousel-section .certificate-slide,
  .awards-section .certificate-slide {
    min-height: 300px;
    padding: 15px;
  }

  .awards-section .certificate-card {
    padding: 28px 24px;
  }

  .certifications-carousel-section .swiper-slide img {
    max-height: 350px;
    border: 8px solid #ffffff;
    padding: 15px;
  }
}

/* ============================================================
   # ABOUT PAGE AWARDS SECTION - SCREENSHOT MATCH
   Changes made:
   - Rebuilt the section as a light dotted-world-map layout.
   - Converted stat boxes into large white circular counters.
   - Positioned two certificate panels side by side in the carousel.
   - Matched heading colors, pagination dots, and certificate paper styling.
   ============================================================ */
.awards-section {
  position: relative;
  padding: 84px 0 72px;
  background: #ffffff;
  overflow: hidden;
}

/* Soft dotted map behind counters and certificates, like the reference image. */
.awards-section::before {
  content: "";
  position: absolute;
  inset: 28px 0 0;
  background: url("../img/world-dotted-map.png") center top / contain no-repeat;
  opacity: 0.16;
  pointer-events: none;
}

.awards-section .container {
  position: relative;
  z-index: 1;
}

/* Left stats area: no panel frame, only circular number badges. */
.awards-section .stats-panel {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.awards-section .stats-panel .row {
  row-gap: 58px;
}

.awards-section .stats-item {
  min-height: 230px;
  padding: 0 12px;
  border: 0;
  background: transparent;
}

/* The screenshot uses number circles only, so the previous icons are hidden. */
.awards-section .stats-icon {
  display: none;
}

.awards-section .stats-counter {
  display: inline-flex;
  width: 164px;
  height: 164px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 18px 34px rgba(29, 45, 92, 0.16);
  color: #2e3140;
  font-family: var(--heading-font);
  font-size: 50px;
  font-weight: 800;
  line-height: 1;
}

.awards-section .stats-counter::first-letter {
  color: var(--accent-color);
}

.awards-section .stats-item p {
  color: #000000;
  font-family: var(--heading-font);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

/* Right heading: small line + label and large navy title. */
.awards-section .certification-title {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  color: #000000;
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.awards-section .certification-title::before {
  content: "";
  width: 62px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color) 0 55%, #24285f 55% 100%);
}

.awards-section .certification-heading {
  margin: 0 0 26px;
  color: #252b62;
  font-family: var(--heading-font);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.12;
}

.awards-section .certificateSwiper {
  padding: 4px 46px 58px;
}

.awards-section .certificate-slide {
  display: flex;
  min-height: 390px;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

.awards-section .certificate-sheet {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 390px;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  border: 1px solid rgba(37, 43, 98, 0.12);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(29, 45, 92, 0.16);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.awards-section .certificate-sheet:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(29, 45, 92, 0.22);
}

.awards-section .certificate-sheet img {
  display: block;
  width: 100%;
  height: 310px;
  border-radius: 10px;
  object-fit: contain;
  background: #f7f8fb;
}

.awards-section .certificate-caption {
  display: flex;
  flex-direction: column;
  padding: 17px 8px 2px;
  text-align: center;
}

.awards-section .certificate-caption strong {
  margin: 0;
  color: #252b62;
  font-family: var(--heading-font);
  font-size: 19px;
  letter-spacing: 0;
}

.awards-section .certificate-caption small {
  margin-top: 5px;
  color: #687083;
  font-size: 14px;
}

.awards-section .swiper-button-prev,
.awards-section .swiper-button-next {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #252b62;
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(37, 43, 98, 0.2);
}

.awards-section .swiper-button-prev::after,
.awards-section .swiper-button-next::after {
  font-size: 15px;
  font-weight: 800;
}

.awards-section .certificate-document-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

.awards-section .certificate-document-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid rgba(37, 43, 98, 0.16);
  border-radius: 999px;
  background: #ffffff;
  color: #252b62;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.awards-section .certificate-document-links a:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

.awards-section .swiper-pagination {
  bottom: 8px;
  padding: 0;
}

.awards-section .swiper-pagination-bullet {
  width: 13px;
  height: 13px;
  margin: 0 7px;
  background: #e07f1f;
  opacity: 1;
}

.awards-section .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 13px;
  border-radius: 50%;
  background: #252b62;
}

@media (max-width: 1199px) {
  .awards-section .stats-counter {
    width: 142px;
    height: 142px;
    font-size: 44px;
  }

  .awards-section .stats-item p {
    font-size: 21px;
  }
}

@media (max-width: 991px) {
  .awards-section {
    padding: 64px 0;
  }

  .awards-section .stats-panel {
    margin-bottom: 34px;
  }

  .awards-section .stats-item {
    min-height: 206px;
  }

  .awards-section .certificate-slide,
  .awards-section .certificate-sheet {
    min-height: 360px;
  }
}

@media (max-width: 575px) {
  .awards-section .stats-panel .row {
    row-gap: 28px;
  }

  .awards-section .stats-counter {
    width: 118px;
    height: 118px;
    margin-bottom: 18px;
    font-size: 36px;
  }

  .awards-section .stats-item {
    min-height: 176px;
  }

  .awards-section .stats-item p {
    font-size: 17px;
  }

  .awards-section .certification-title {
    gap: 16px;
    font-size: 16px;
  }

  .awards-section .certification-title::before {
    width: 44px;
  }

  .awards-section .certificate-sheet {
    min-height: 310px;
    padding: 10px;
  }

  .awards-section .certificateSwiper {
    padding-right: 0;
    padding-left: 0;
  }

  .awards-section .certificate-sheet img {
    height: 220px;
  }

  .awards-section .swiper-button-prev,
  .awards-section .swiper-button-next {
    display: none;
  }
}

  .navmenu .nav-plus-item > a .nav-plus {
    font-size: 20px;
    color: var(--nav-color);
    line-height: 0;
    font-weight: 700;
    transition: color 0.25s ease;
  }

  .navmenu .nav-plus-item:hover > a .nav-plus,
  .navmenu .nav-plus-item > a:hover .nav-plus {
    color: var(--nav-hover-color);
  }


/* ============================================================
   # ABOUT PAGE SERVICES & INDUSTRY VERTICALS SECTION
   Changes made:
   - Added a reference-matching section below Certification and Awards.
   - Uses the dotted world map as a soft centered background.
   - Left side shows "Our Services" with outlined circular bullets.
   - Right side shows "Industry Verticals" in two columns with navy check icons.
   - Includes a thin orange center divider on desktop only.
   ============================================================ */
.about-services-industries-section {
  position: relative;
  padding: 86px 0 96px;
  background: #ffffff;
  overflow: hidden;
}

/* Dotted world map background, kept subtle so list text stays readable. */
.about-services-industries-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/world-dotted-map.png") center 10px / 78% auto no-repeat;
  opacity: 0.16;
  pointer-events: none;
}

.about-services-industries-section .container {
  position: relative;
  z-index: 1;
}

.about-services-industries-wrap {
  max-width: 1280px;
  margin: 0 auto;
}

/* Shared list panel typography for both columns. */
.about-list-panel h2 {
  margin: 0 0 48px;
  color: #000000;
  font-family: var(--heading-font);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.2;
}

.about-list-panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-list-panel li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 25px;
  color: #000000;
  font-family: var(--default-font);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.55;
}

/* Left services bullets: outlined circle with a small filled dot inside. */
.about-services-list .service-bullet {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  margin-top: 5px;
  border: 3px solid #252b62;
  border-radius: 50%;
  background: #ffffff;
}

.about-services-list .service-bullet::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #252b62;
}

/* Center divider: desktop-only orange vertical line from the reference. */
.services-industries-divider {
  width: 1px;
  min-height: 368px;
  margin-top: 4px;
  background: #f08b21;
}

/* Right industry icons: navy check circles. */
.about-industries-list i {
  flex: 0 0 28px;
  margin-top: 4px;
  color: #252b62;
  font-size: 28px;
  line-height: 1;
}

.about-industries-list li {
  margin-bottom: 22px;
}

@media (max-width: 1199px) {
  .about-list-panel h2 {
    font-size: 31px;
  }

  .about-list-panel li {
    font-size: 19px;
  }
}

@media (max-width: 991px) {
  .about-services-industries-section {
    padding: 64px 0 72px;
  }

  .about-services-industries-section::before {
    background-size: 110% auto;
  }

  .about-list-panel h2 {
    margin-bottom: 30px;
  }

  .about-services-list {
    margin-bottom: 18px;
  }
}

@media (max-width: 575px) {
  .about-services-industries-section {
    padding: 52px 0 58px;
  }

  .about-list-panel h2 {
    font-size: 26px;
  }

  .about-list-panel li {
    gap: 12px;
    margin-bottom: 18px;
    font-size: 16px;
  }

  .about-services-list .service-bullet {
    flex-basis: 20px;
    width: 20px;
    height: 20px;
    margin-top: 3px;
  }

  .about-services-list .service-bullet::after {
    inset: 4px;
  }

  .about-industries-list i {
    flex-basis: 24px;
    font-size: 24px;
  }
}

/* ============================================================
   # ABOUT PAGE TESTIMONIALS SECTION
   Changes made:
   - Builds the exact white testimonial area from the reference screenshot.
   - Keeps the same layout while reducing font sizes to suit the site.
   - Adds side arrows, centered testimonial copy, pagination dots, and CTA strip.
   - Scoped to .about-testimonials-intro so other page testimonial sections stay unchanged.
   ============================================================ */
.about-testimonials-intro {
  padding: 72px 0 0;
  background: #ffffff;
}

/* Header row: small orange/navy line followed by the "Testimonials" label. */
.about-testimonials-intro .about-section-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 16px;
}

.about-testimonials-intro .about-section-kicker span {
  display: inline-block;
  width: 62px;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color) 0 55%, #252b62 55% 100%);
}

.about-testimonials-intro .about-section-kicker h3,
.about-testimonials-intro .about-section-kicker h4 {
  margin: 0;
  color: #000000;
  font-family: var(--heading-font);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.2;
}

.about-testimonials-intro h2 {
  margin: 0;
  color: #252b62;
  font-family: var(--heading-font);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 900;
  line-height: 1.15;
}

/* Requested custom carousel layout: same visual design, no Swiper dependency. */
.about-testimonial-carousel {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 34px;
  max-width: 1240px;
  margin: 74px auto 0;
}

.about-testimonials-intro .testimonial-content {
  max-width: 1040px;
  margin: 0 auto;
  opacity: 1;
  text-align: left;
  transition: opacity 0.2s ease;
}

.about-testimonials-intro .testimonial-content p {
  margin: 0 0 22px;
  color: #223445;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
}

.about-testimonials-intro .testimonial-content h3 {
  max-width: 900px;
  margin: 0 auto;
  color: #223445;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.about-testimonials-intro .arrow {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border: 2px solid #223445;
  border-radius: 50%;
  background: #ffffff;
  color: #223445;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.about-testimonials-intro .arrow:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.about-testimonials-intro .dots {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 62px;
}

.about-testimonials-intro .dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #252b62;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.about-testimonials-intro .dots span.active {
  transform: scale(2.2);
}

/* ============================================================
   # ABOUT PAGE FONT NORMALIZATION
   Purpose:
   - Keep about.html typography consistent with index.html.
   - Force all About-page custom sections to use the global Poppins font.
   - Reduce heavy/oversized custom section text so it matches the site scale.
   - Scoped to body.about-page only, so index.html and other pages are unchanged.
   ============================================================ */
body.about-page {
  font-family: var(--default-font);
}

body.about-page p,
body.about-page li,
body.about-page a,
body.about-page button,
body.about-page span,
body.about-page input,
body.about-page textarea,
body.about-page select {
  font-family: var(--default-font);
  letter-spacing: 0;
}

body.about-page h1,
body.about-page h2,
body.about-page h3,
body.about-page h4,
body.about-page h5,
body.about-page h6 {
  font-family: var(--heading-font);
  letter-spacing: 0;
}

/* About awards/certification text: keep same layout, align font scale with index page. */
body.about-page .awards-section .stats-counter {
  font-size: 46px;
}

body.about-page .awards-section .stats-item p {
  font-size: 21px;
}

body.about-page .awards-section .certification-title {
  font-size: 17px;
}

body.about-page .awards-section .certification-heading {
  font-family: var(--heading-font);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 800;
}

/* Certificate mockup text now uses the same site font instead of a different serif font. */
body.about-page .awards-section .certificate-sheet,
body.about-page .awards-section .certificate-sheet strong,
body.about-page .awards-section .certificate-sheet p,
body.about-page .awards-section .certificate-signature {
  font-family: var(--default-font);
}

body.about-page .awards-section .certificate-sheet strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 2px;
}

body.about-page .awards-section .certificate-sheet p,
body.about-page .awards-section .certificate-signature {
  font-size: 12px;
  line-height: 1.6;
}

body.about-page .awards-section .certificate-caption strong {
  margin: 0;
  font-family: var(--heading-font);
  font-size: 19px;
  letter-spacing: 0;
}

body.about-page .awards-section .certificate-caption small {
  font-size: 14px;
}

/* Services and industry list typography: same design, smaller index-style text scale. */
body.about-page .about-list-panel h2 {
  font-size: 30px;
  font-weight: 800;
}

body.about-page .about-list-panel li {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.65;
}

/* Testimonials typography: keep screenshot layout, match index-style font weight/size. */
body.about-page .about-testimonials-intro .about-section-kicker h3,
body.about-page .about-testimonials-intro .about-section-kicker h4 {
  font-size: 23px;
  font-weight: 800;
}

body.about-page .about-testimonials-intro h2 {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
}

body.about-page .about-testimonials-intro .testimonial-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
}

body.about-page .about-testimonials-intro .testimonial-content h3 {
  font-size: 22px;
  font-weight: 800;
}

body.about-page .about-brochure-content p {
  font-size: 17px;
}

body.about-page .about-brochure-content p strong {
  font-size: 22px;
  font-weight: 800;
}

body.about-page .about-brochure-btn {
  font-size: 15px;
  font-weight: 700;
}

/* Vision/Mission/Quality cards: avoid heavier custom text than the index page. */
body.about-page .testimonials .tab-btn {
  font-size: 13px;
  font-weight: 700;
}

body.about-page .testimonials .tab-content,
body.about-page .testimonials .tab-content p,
body.about-page .testimonials .info-card .info-card-body p {
  font-size: 15px;
  line-height: 1.75;
}

body.about-page .testimonials .info-card .info-card-body h2 {
  font-size: 22px;
  font-weight: 800;
}

@media (max-width: 767px) {
  body.about-page .awards-section .stats-counter {
    font-size: 34px;
  }

  body.about-page .awards-section .stats-item p,
  body.about-page .about-list-panel li {
    font-size: 16px;
  }

  body.about-page .about-list-panel h2,
  body.about-page .about-testimonials-intro h2 {
    font-size: 26px;
  }

  body.about-page .about-testimonials-intro .testimonial-content h3 {
    font-size: 19px;
  }
}

/* Slider layout: arrows sit outside the copy, matching the screenshot spacing. */
.about-testimonial-slider-wrap {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 28px;
  max-width: 1240px;
  margin: 76px auto 0;
}

.about-testimonials-slider {
  width: 100%;
  padding-bottom: 68px;
}

.about-testimonial-item {
  max-width: 1000px;
  margin: 0 auto;
  text-align: left;
}

.about-testimonial-item p {
  margin: 0 auto 22px;
  color: #223445;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
}

.about-testimonial-item h4 {
  margin: 0;
  color: #223445;
  font-size: 23px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

/* Circular previous/next buttons with navy outline and compact arrow icon. */
.about-testimonial-arrow {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border: 2px solid #223445;
  border-radius: 50%;
  background: #ffffff;
  color: #223445;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.about-testimonial-arrow:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

/* Pagination dots: active dot is larger and navy, inactive dots stay small. */
.about-testimonials-slider .about-testimonials-pagination {
  bottom: 0;
}

.about-testimonials-slider .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  margin: 0 9px;
  background: #252b62;
  opacity: 1;
}

.about-testimonials-slider .swiper-pagination-bullet-active {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* Orange brochure CTA strip below the testimonial slider. */
.about-brochure-cta {
  margin-top: 66px;
  padding: 28px 0;
  background: #f08b21;
  border-radius: 8px 8px 0 0;
}

.about-brochure-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.about-brochure-content p {
  margin: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1.35;
}

.about-brochure-content p strong {
  font-size: 23px;
  font-weight: 900;
}

.about-brochure-content p span {
  font-weight: 300;
}

.about-brochure-btn {
  display: inline-flex;
  min-width: 270px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 26px;
  border-radius: 6px;
  background: #252b62;
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
}

.about-brochure-btn:hover {
  color: #ffffff;
  background: #182052;
}

@media (max-width: 575px) {
  .about-testimonials-intro {
    padding-top: 52px;
  }

  .about-testimonials-intro .about-section-kicker {
    gap: 18px;
  }

  .about-testimonials-intro .about-section-kicker span {
    width: 44px;
  }

  .about-testimonials-intro .about-section-kicker h3,
  .about-testimonials-intro .about-section-kicker h4 {
    font-size: 24px;
  }

  .about-testimonial-carousel {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 42px;
  }

  .about-testimonials-intro .arrow {
    display: none;
  }

  .about-testimonials-intro .testimonial-content {
    text-align: center;
  }

  .about-testimonials-intro .testimonial-content p {
    font-size: 16px;
    line-height: 1.7;
  }

  .about-testimonials-intro .testimonial-content h3 {
    font-size: 20px;
  }

  .about-testimonials-intro .dots {
    gap: 14px;
    margin-top: 40px;
  }

  .about-testimonial-slider-wrap {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 42px;
  }

  .about-testimonial-arrow {
    display: none;
  }

  .about-testimonial-item {
    text-align: center;
  }

  .about-testimonial-item p {
    font-size: 16px;
    line-height: 1.7;
  }

  .about-testimonial-item h4 {
    font-size: 20px;
  }

  .about-brochure-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .about-brochure-content p,
  .about-brochure-content p strong {
    font-size: 19px;
  }

  .about-brochure-btn {
    width: 100%;
    min-width: 0;
    padding: 17px 20px;
    font-size: 16px;
  }
}

  .floating-socials {
    position: fixed;
    top: 96px;
    right: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 24px;
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
    z-index: 9999;
  }

  .floating-socials a {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(15, 23, 42, 0.12);
    color: var(--nav-color);
    transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }

  .floating-socials a:hover {
    background: rgba(255, 122, 36, 0.12);
    color: var(--nav-hover-color);
    transform: translateY(-2px);
  }

  .floating-socials a.whatsapp {
    background: rgba(37, 211, 102, 0.12);
    border-color: rgba(37, 211, 102, 0.35);
    color: #25d366;
  }

  .floating-socials a.whatsapp:hover {
    background: rgba(37, 211, 102, 0.22);
    color: #1f9d58;
  }

  /* Official profile colors make each social destination easy to recognize. */
  .floating-socials a.linkedin {
    color: #0a66c2;
  }

  .floating-socials a.facebook {
    color: #1877f2;
  }

  .floating-socials a.youtube {
    color: #ff0000;
  }

  .floating-socials a.twitter {
    color: #000000;
  }

  .floating-socials a i {
    margin: 0;
    font-size: 18px;
  }

  @media (max-width: 1199px) {
    .floating-socials {
      display: none;
    }
  }

  .navmenu .social-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--nav-color);
    transition: background 0.25s ease, color 0.25s ease;
  }

  .navmenu .social-btn:hover {
    background: rgba(255, 122, 36, 0.12);
    color: var(--nav-hover-color);
  }

  .navmenu .social-btn.whatsapp {
    background: rgba(37, 211, 102, 0.12);
    color: #25d366;
  }

  .navmenu .social-btn.whatsapp:hover {
    background: rgba(37, 211, 102, 0.25);
    color: #1f9d58;
  }

  .navmenu .social-btn.linkedin:hover {
    color: #0a66c2;
  }


  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Responsive Navigation Fix
Change notes:
- Uses the same mobile/tablet menu behavior on every page.
- Makes the open menu fit the viewport instead of appearing as a narrow broken panel.
- Supports the existing "+" dropdown markup used in the site headers.
--------------------------------------------------------------*/
@media (max-width: 1199px) {
  body.mobile-nav-active #header {
    position: fixed;
    inset: 0;
    width: 100% !important;
    height: 100vh;
    padding: 0;
    align-items: flex-start !important;
    background: rgba(15, 23, 42, 0.72);
    transform: none !important;
    z-index: 9998;
  }

  body.mobile-nav-active #header > .container-fluid,
  body.mobile-nav-active #header > .container-xl {
    max-width: 100%;
    height: 100%;
    align-items: flex-start !important;
    padding: 0;
  }

  .header {
    min-height: 82px;
  }

  .header .container-fluid,
  .header .container-xl {
    gap: 14px;
  }

  .header .logo img {
    max-height: 48px;
  }

  .mobile-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0 0 0 10px;
    color: var(--nav-color);
    border-radius: 50%;
    background: rgba(11, 45, 117, 0.06);
    z-index: 10000;
  }

  .mobile-nav-active .mobile-nav-toggle {
    position: fixed;
    top: 22px;
    right: 22px;
    color: #ffffff;
    background: #252a67;
  }

  body.mobile-nav-active #navmenu,
  .mobile-nav-active .navmenu {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(2px);
    z-index: 9997;
  }

  #navmenu > ul {
    position: fixed;
    inset: 92px 18px 18px;
    width: auto;
    max-width: none;
    padding: 18px;
    border-radius: 10px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.mobile-nav-active #navmenu > ul,
  .mobile-nav-active .navmenu > ul {
    display: block !important;
    background: #ffffff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
  }

  .navmenu a,
  .navmenu a:focus {
    min-height: 48px;
    padding: 12px 14px;
    font-size: 18px;
    line-height: 1.35;
    white-space: normal;
    gap: 12px;
  }

  .navmenu .nav-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin-left: auto;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 6px;
    font-size: 20px;
    line-height: 1;
    transition: transform 0.25s ease, color 0.25s ease;
  }

  .navmenu .dropdown > a.active .nav-plus {
    color: var(--nav-hover-color);
    transform: rotate(45deg);
  }

  #navmenu .dropdown ul {
    position: static;
    display: none;
    max-height: none;
    padding: 8px 0 8px 14px;
    margin: 4px 0 12px;
    border: 0;
    border-left: 2px solid rgba(255, 122, 36, 0.32);
    border-radius: 0;
    background: rgba(11, 45, 117, 0.04);
    box-shadow: none;
  }

  #navmenu .dropdown > .dropdown-active {
    display: block !important;
  }

  .navmenu .dropdown ul a {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 500;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.14);
  }
}

@media (max-width: 575px) {
  .header {
    min-height: 72px;
    padding: 10px 0;
  }

  .header .logo img {
    max-height: 42px;
  }

  .mobile-nav-toggle {
    width: 40px;
    height: 40px;
    font-size: 26px;
  }

  #navmenu > ul {
    inset: 82px 10px 10px;
    padding: 14px;
  }

  .navmenu a,
  .navmenu a:focus {
    min-height: 44px;
    padding: 10px 10px;
    font-size: 16px;
  }

  .navmenu .dropdown ul a {
    font-size: 15px;
  }
}

@media (min-width: 1200px) and (max-width: 1399px) {
  .header .logo img {
    max-height: 46px;
  }

  .navmenu a,
  .navmenu a:focus {
    padding: 16px 10px;
    font-size: 15px;
  }

  .navmenu .nav-plus-item > a {
    gap: 6px;
  }

  .navmenu .dropdown ul {
    min-width: 260px;
  }

  .navmenu .dropdown ul a {
    padding: 12px 18px;
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  position: relative;
  color: #111111;
  background: #e7e8ec;
  font-family: var(--default-font);
}

/* Footer top section with brand, links, services, contact */
.footer .footer-top {
  padding: 60px 0 45px;
}

/* Footer brand / logo area */
.footer .footer-logo {
  margin: 0 0 24px;
}

.footer .footer-logo img {
  width: 220px;
  max-width: 100%;
  height: auto;
}

/* Footer column headings */
.footer h4 {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 20px;
  color: #0b2d75;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.footer h4::after {
  content: "";
  display: inline-block;
  width: 46px;
  height: 4px;
  background: #1d2d5c;
}

/* Social icon buttons below the logo */
.footer .social-links {
  gap: 14px;
}

.footer .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #ffffff;
  font-size: 18px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.footer .social-links .linkedin {
  background: #0077b5;
}

.footer .social-links .facebook {
  background: #4267b2;
}

.footer .social-links .youtube {
  background: #df1f1f;
}

.footer .social-links .twitter {
  background: #000000;
}

.footer .social-links .whatsapp {
  background: #25d366;
}

.footer .social-links a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(29, 45, 92, 0.18);
}

.footer .footer-links {
  margin-bottom: 0;
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.footer li i {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #1d2d5c;
  font-size: 16px;
}

.footer .footer-links a,
.footer .footer-contact a,
.footer .footer-contact span {
  color: #101010;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer .footer-links a:hover,
.footer .footer-contact a:hover {
  color: #ff7a24;
}

.footer .footer-services li,
.footer .footer-contact li {
  margin-bottom: 18px;
}

.footer .footer-contact li i {
  margin-top: 4px;
  font-size: 18px;
}

/* Footer bottom copyright bar */
.footer .footer-bottom {
  padding: 20px 0;
  background: #252b62;
}

.footer .footer-bottom p {
  margin: 0;
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.footer .designer-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 5px 12px;
  border: 2px solid #ffffff;
  background: #ffffff;
  color: #111111;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

@media (max-width: 1199px) {
  .footer .footer-links a,
  .footer .footer-contact a,
  .footer .footer-contact span {
    font-size: 17px;
  }
}

@media (max-width: 991px) {
  .footer .footer-top {
    padding: 64px 0 48px;
  }

  .footer .footer-logo {
    margin-top: 0;
    margin-bottom: 38px;
  }
}

@media (max-width: 575px) {
  .footer h4 {
    font-size: 23px;
  }

  .footer .footer-links a,
  .footer .footer-contact a,
  .footer .footer-contact span {
    font-size: 16px;
  }

  .footer .footer-bottom p {
    font-size: 14px;
    line-height: 1.7;
  }
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background-color: var(--background-color);
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--accent-color);
  border-radius: 50%;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  animation-delay: -0.5s;
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol a {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.page-title .breadcrumbs ol a:hover {
  color: var(--contrast-color);
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 40px 0;
  scroll-margin-top: 100px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
# Reduced title block spacing to tighten homepage layout
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding: 16px 0;
  margin-bottom: 20px;
  position: relative;
}

.section-title h2 {
  font-size: 30px;
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 18px;
  padding-bottom: 0;
  position: relative;
  z-index: 2;
}

.section-title span {
  position: absolute;
  top: 4px;
  color: color-mix(in srgb, var(--heading-color), transparent 95%);
  left: 0;
  right: 0;
  z-index: 1;
  font-weight: 700;
  font-size: 52px;
  text-transform: uppercase;
  line-height: 1;
}

.section-title p {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

@media (max-width: 575px) {
  .section-title h2 {
    font-size: 28px;
    margin-bottom: 15px;
  }

  .section-title span {
    font-size: 38px;
  }
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  min-height: 50vh;
  position: relative;
  padding: 80px 0 40px 0;
  /* Reduced hero spacing for a tighter homepage appearance */
}

.hero .hero-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero h5 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 18px;
  color: var(--accent-color);
}

.hero h2 {
  margin-bottom: 20px;
  padding: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  max-width: 760px;
}

@media (max-width: 575px) {
  .hero h2 {
    font-size: 30px;
  }
}

.hero p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
  max-width: 680px;
  margin-bottom: 40px;
  /* NOTE: Keep hero text readable with proper line spacing */
}

.hero form {
  background: color-mix(in srgb, var(--default-color) 5%, white 90%);
  padding: 10px;
  border-radius: 10px;
}

.hero form .form-control {
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 20px;
  padding-right: 20px;
  border: none;
  margin-right: 10px;
  border: none !important;
  background: none !important;
}

.hero form .form-control:hover,
.hero form .form-control:focus {
  outline: none;
  box-shadow: none;
}

.hero form .btn-primary {
  /* NOTE: Hero CTA styles added — 2026-05-30 */
  color: var(--contrast-color);
  background-color: var(--accent-color);
  flex-shrink: 0;
  padding: 0 25px;
}

.hero form .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

/* Hero CTA button styling: compact, responsive, and only as wide as the text */
.hero .btn-primary {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  border: none;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: auto;
  margin-top: 18px;
  margin-bottom: 0;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color), transparent 75%);
  text-decoration: none;
}

.hero .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 8%);
  transform: translateY(-2px);
  text-decoration: none;
}
/* end hero CTA note */

.hero .stats-item {
  padding: 30px;
  width: 100%;
}

.hero .stats-item span {
  font-size: 32px;
  display: block;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 15px;
  position: relative;
}

.hero .stats-item span:after {
  content: "";
  position: absolute;
  display: block;
  width: 20px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.hero .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 600;
}

/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services .service-item {
  position: relative;
  height: 100%;
  margin-bottom: 30px;
}

.featured-services .service-item .icon {
  margin-right: 20px;
}

.featured-services .service-item .icon i {
  color: var(--accent-color);
  font-size: 40px;
  transition: 0.3s;
}

.featured-services .service-item:hover .icon i {
  color: var(--accent-color);
}

.featured-services .service-item .title {
  color: var(--heading-color);
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 20px;
  transition: 0.3s;
}

.featured-services .service-item .description {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 10px;
}

.featured-services .service-item .readmore {
  display: flex;
  align-items: center;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  font-weight: 700;
  font-size: 14px;
}

.featured-services .service-item .readmore i {
  margin-left: 8px;
}

.featured-services .service-item:hover .title,
.featured-services .service-item:hover .readmore,
.featured-services .service-item:hover .icon i {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content h5 {
  /* About section label in orange - smaller size for subtitle appearance */
  color: var(--accent-color);
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 12px;
}

.about .content h3 {
  /* Main About heading in blue - reduced from 2rem to 1.6rem to fit properly in col-6 layout */
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 20px;
}

.about .content h4 {
  /* Secondary headings: Overview / Who we are / What we do - set to 0.95rem for balanced col-6 layout */
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

.about .content h4:first-of-type {
  /* Overview heading color set to blue */
  color: var(--heading-color);
}

.about .content h4:nth-of-type(2) {
  /* Who we are ? heading color set to orange */
  color: var(--accent-color);
}

.about .content h4:nth-of-type(3) {
  /* What we do ? heading color set to orange */
  color: var(--accent-color);
}

.about .content p {
  /* About paragraph text in blue - reduced to 0.95rem to prevent overflow in col-6 with image */
  color: var(--heading-color);
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 18px;
}

.about .content ul {
  /* About feature list styles */
  list-style: none;
  padding: 0;
  margin: 0;
}

.about .content ul li {
  /* Feature item layout */
  display: flex;
  align-items: flex-start;
  margin-top: 30px;
}

.about .content ul i {
  /* Feature icon style - orange accent color */
  flex-shrink: 0;
  font-size: 28px;
  color: var(--accent-color);
  margin-right: 18px;
  line-height: 1;
}

.about .content ul h5 {
  /* Feature title style */
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 6px;
}

.about .content ul p {
  /* Feature description style - dark blue text for readability */
  font-size: 15px;
  color: rgba(15, 33, 83, 0.9);
}

.about .content p:last-child {
  /* Remove extra margin from the last paragraph */
  margin-bottom: 0;
}

.about img {
  max-height: 430px;
  width: 100%;
  object-fit: contain;
}

/* Shared check-circle bullet style for About lists */
.about .what-you-get h4 {
  color: var(--accent-color);
  font-weight: 700;
  margin-bottom: 24px;
  font-size: 1.1rem;
  margin-top: 20px;
}

.about .what-you-get ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--heading-color);
}

.about .what-you-get li {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  color: black;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 26px;
  margin-top: 0;
}


.about .what-you-get li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--heading-color);
  font-size: 1.7rem;
  margin-right: 0;
  line-height: 1;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
/*Read More Button CSS*/
.about .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 8%);
  transform: translateY(-2px);
  text-decoration: none;
}

.about .what-you-get li:hover i {
  background: var(--accent-color);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent-color), transparent 65%);
  transform: scale(1.08);
}

 .about .btn-primary {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  border: none;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: auto;
  margin-top: 18px;
  margin-bottom: 0;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color), transparent 75%);
  text-decoration: none;
}

/* Homepage hero carousel: slower fade/slide timing so each engineering banner is readable. */
.index-page #carouselExampleSlidesOnly .carousel-item {
  transition: transform 1.4s ease-in-out, opacity 1.4s ease-in-out;
}

/* Service-page banner carousels:
   Each slide remains visible for 4.5 seconds in HTML. A restrained cross-fade
   prevents abrupt image changes while preserving Bootstrap touch and pause
   behavior across CAD, CAE, Manufacturing, Prototyping, Reverse Engineering,
   and Staff Augmentation pages. */
.service-page .service-carousel {
  overflow: hidden;
  background: #ffffff;
}

.service-page .service-carousel.carousel-fade .carousel-item {
  transition: opacity 1.2s ease-in-out;
}

.service-page .service-carousel .carousel-item img {
  display: block;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .service-page .service-carousel.carousel-fade .carousel-item {
    transition-duration: 0.01ms;
  }
}

/* Homepage About visual:
   - Keeps the image on the left and content on the right.
   - Adds a subtle framed hover effect while AOS handles the entrance timing.
*/
.index-page .home-about-visual img {
  width: 100%;
  border: 5px solid #252a67;
  border-radius: 8px;
  transition: transform 0.35s ease;
}

.index-page .home-about-visual:hover img {
  transform: translateY(-6px);
}

/* Services "Read More" button: match site style */
.services .readmore,
.services .card .readmore,
.services a.readmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 10px;
  background: var(--accent-color);
  color: var(--contrast-color);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color), transparent 75%);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.services .readmore:hover,
.services a.readmore:hover,
.services .card .readmore:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--accent-color), black 6%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-color), transparent 50%);
}
/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .card {
  background-color: var(--surface-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  position: relative;
  border-radius: 12px;
  height: 100%;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.services .card .card-img {
  overflow: hidden;
  margin-bottom: 12px;
  border-radius: 8px;
}

.services .card .card-img img {
  transition: 0.3s ease-in-out;
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.services .card h3 {
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 6px;
  padding: 8px 20px;
  text-transform: uppercase;
}

.services .card a {
  color: var(--heading-color);
  transition: color 0.2s ease;
}

.services .card a:hover {
  color: var(--accent-color);
}

.services .card p {
  padding: 0 20px;
  margin-bottom: 18px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  line-height: 1.7;
}

.services .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(29,45,92,0.08);
}

.services .card:hover .card-img img {
  transform: scale(1.05);
}

/* Homepage services heading: center the eyebrow and main title as one block. */
.index-page .services > .home-services-title {
  display: flex;
  width: 100%;
  max-width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.index-page .services > .home-services-title h1,
.index-page .services > .home-services-title h2 {
  display: block;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.index-page .services > .home-services-title h1 {
  max-width: 100%;
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding: 80px 0;
  position: relative;
  clip-path: inset(0);
}

.call-to-action img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.call-to-action:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 20%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.call-to-action .container {
  position: relative;
  z-index: 3;
}

.call-to-action h3 {
  font-size: 28px;
  font-weight: 700;
  color: var(--default-color);
}

.call-to-action p {
  color: var(--default-color);
}

.call-to-action .cta-btn {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--contrast-color);
  color: var(--contrast-color);
}

.call-to-action .cta-btn:hover {
  background: var(--accent-color);
  border: 2px solid var(--accent-color);
}

/*--------------------------------------------------------------
# Client Logo Marquee
# Slow continuous customer logo strip generated by JS.
--------------------------------------------------------------*/
.client-carousel-section {
  padding: 64px 0;
  background: #ffffff;
}

.client-carousel-header {
  margin-bottom: 28px;
}

.client-carousel-header span {
  color: var(--accent-color);
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

.client-carousel-header h2 {
  margin: 8px 0 0;
  color: var(--heading-color);
  font-size: 32px;
  font-weight: 800;
}

.logo-carousel-wrapper {
  position: relative;
  overflow: hidden;
  padding: 28px 0;
  border: 2px solid var(--accent-color);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(11, 45, 117, 0.08);
}

.logo-carousel-wrapper::before,
.logo-carousel-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  width: 80px;
  height: 100%;
  pointer-events: none;
}

.logo-carousel-wrapper::before {
  left: 0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.logo-carousel-wrapper::after {
  right: 0;
  background: linear-gradient(to left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}

.client-logo-marquee {
  display: flex;
  width: max-content;
  gap: 20px;
  padding: 18px 20px;
  animation: client-logo-marquee 65s linear infinite;
}

.logo-carousel-wrapper:hover .client-logo-marquee {
  animation-play-state: paused;
}

.client-logo-card {
  display: flex;
  flex: 0 0 190px;
  min-height: 94px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--heading-color);
  border-radius: 0 28px 0 28px;
  background: #ffffff;
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

.client-logo-card img {
  max-width: 82%;
  max-height: 68px;
  object-fit: contain;
}

.client-logo-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-color);
  color: var(--accent-color);
  box-shadow: 0 10px 22px rgba(11, 45, 117, 0.14);
}

@keyframes client-logo-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
  .client-carousel-section {
    padding: 48px 0;
  }

  .logo-carousel-wrapper {
    padding: 20px 0;
  }

  .client-carousel-header h2 {
    font-size: 26px;
  }

  .client-logo-card {
    flex-basis: 150px;
    min-height: 82px;
    font-size: 17px;
  }

  .client-logo-marquee {
    animation-duration: 52s;
  }
}
/*--------------------------------------------------------------
# Insights Cards Section
# Three equal-height cards for Testimonials, News/Events, and Hiring.
--------------------------------------------------------------*/
.insights-cards-section {
  padding: 60px 0;
  background:
    linear-gradient(rgba(10, 18, 31, 0.78), rgba(10, 18, 31, 0.78)),
    url("../img/cta-bg.jpg") center / cover fixed;
}

/* Insights cards section: match the screenshot layout exactly */
.insights-cards-section .row {
  justify-content: center;
  gap: 30px;
}

.insights-cards-section .info-card {
  display: flex;
  flex: 0 0 calc(33.333% - 24px);
  max-width: calc(33.333% - 24px);
  min-height: 520px;
  flex-direction: column;
  padding: 28px;
  border-radius: 24px;
  background: rgba(244, 244, 244, 0.92);
  backdrop-filter: blur(4px);
  box-shadow: 0 14px 40px rgba(29, 45, 92, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.insights-cards-section .info-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 26px 48px rgba(29, 45, 92, 0.16);
  background: #ffffff;
}

.insights-cards-section .card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 22px;
}

.insights-cards-section .card-title h2 {
  flex-shrink: 0;
  color: #f7931e;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
}

.insights-cards-section .card-title span {
  display: block;
  width: 24px;
  min-width: 24px;
  flex: 0 0 24px;
  height: 3px;
  background: #f7931e;
}

/* News heading is wider than the other card titles.
   A small font adjustment keeps its fixed dash on the same line. */
.insights-cards-section [data-insight-card="news"] .card-title h2 {
  font-size: 26px;
}

.insights-cards-section .card-slider {
  position: relative;
  flex: 1;
  min-height: 300px;
}

.insights-cards-section .slide {
  display: none;
  height: 100%;
  color: #1d2d5c;
  animation: insightFade 0.45s ease;
}

.insights-cards-section .slide.active {
  display: block;
}

.insights-cards-section .testimonial-slider::before {
  content: none;
  position: absolute;
  top: -24px;
  left: 0;
  z-index: 0;
  color: rgba(29, 45, 92, 0.06);
  font-family: Georgia, serif;
  font-size: 150px;
  line-height: 1;
}

.insights-cards-section .testimonial-slider .slide {
  position: relative;
  z-index: 1;
}

.insights-cards-section .testimonial-slider p {
  padding: 30px 28px;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(29, 45, 92, 0.05);
}

.insights-cards-section .slide img {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 24px;
  box-shadow: 0 10px 18px rgba(29, 45, 92, 0.12);
}

/* Home Insights News card:
   Uses the real News & Events page images and centers them like the reference card.
*/
.insights-cards-section .news-slider .slide {
  text-align: center;
}

.insights-cards-section .news-slider .slide img {
  width: 190px;
  height: 190px;
  padding: 28px;
  object-fit: contain;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 16px 34px rgba(29, 45, 92, 0.12);
}

.insights-cards-section .news-slider .slide p {
  max-width: 420px;
  margin: 0 auto;
  color: #111111;
  text-align: center;
}

.insights-cards-section .news-slider .slide h4 {
  color: #1d2d5c;
  text-align: center;
}

.insights-cards-section .slide p {
  color: #1d2d5c;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

.insights-cards-section .slide h4 {
  color: #1d2d5c;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  margin: 24px 0 0;
}

.insights-cards-section .dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 24px 0 22px;
}

.insights-cards-section .dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #1d2d5c;
  opacity: 0.32;
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
}

.insights-cards-section .dot.active {
  background: #f7931e;
  opacity: 1;
  transform: scale(1.2);
}

.insights-cards-section .read-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  margin-top: auto;
  padding: 14px 30px;
  border: 0;
  border-radius: 10px;
  background: #f7931e;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.insights-cards-section .read-btn:hover {
  background: #df7f0b;
  box-shadow: 0 10px 24px rgba(247, 147, 30, 0.28);
  transform: translateY(-2px);
}

.insights-cards-section .certificate-insight-card {
  min-width: 0;
}

.insights-cards-section .insight-certificate-swiper {
  width: 100%;
  flex: 1;
  padding-bottom: 34px;
}

.insights-cards-section .insight-certificate {
  display: flex;
  height: 100%;
  flex-direction: column;
  color: #1d2d5c;
  text-align: center;
  text-decoration: none;
}

.insights-cards-section .insight-certificate img {
  width: 100%;
  height: 220px;
  margin: 0 0 18px;
  padding: 10px;
  border: 1px solid rgba(29, 45, 92, 0.1);
  border-radius: 12px;
  background: #ffffff;
  object-fit: contain;
  box-shadow: 0 12px 28px rgba(29, 45, 92, 0.12);
}

.insights-cards-section .insight-certificate strong {
  font-size: 17px;
  line-height: 1.35;
}

.insights-cards-section .insight-certificate small {
  margin-top: 6px;
  color: #697287;
}

.insights-cards-section .insight-certificate-swiper .swiper-pagination {
  bottom: 6px;
}

.insights-cards-section .insight-certificate-swiper .swiper-pagination-bullet {
  background: #1d2d5c;
  opacity: 0.3;
}

.insights-cards-section .insight-certificate-swiper .swiper-pagination-bullet-active {
  background: #f7931e;
  opacity: 1;
}

/*--------------------------------------------------------------
# Certificates Page
# Scoped to body.certificates-page so certificate layouts do not affect
# the About page carousel or the Home page certificate insight card.
--------------------------------------------------------------*/

/* Page hero: clears the fixed header and provides a branded introduction. */
.certificates-page .certificate-page-hero {
  position: relative;
  margin-top: var(--fixed-header-offset);
  padding: 78px 0 72px !important;
  background:
    linear-gradient(115deg, rgba(22, 31, 74, 0.96), rgba(22, 31, 74, 0.82)),
    url("../img/world-dotted-map.png") center / cover no-repeat;
  color: #ffffff;
  text-align: center;
  overflow: hidden;
}

/* Decorative ring stays behind the hero copy. */
.certificates-page .certificate-page-hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -160px;
  width: 360px;
  height: 360px;
  border: 60px solid rgba(247, 147, 30, 0.14);
  border-radius: 50%;
}

.certificates-page .certificate-page-hero .container {
  position: relative;
  z-index: 1;
}

.certificates-page .certificate-page-hero span {
  color: #f7931e;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.certificates-page .certificate-page-hero h1 {
  margin: 12px 0 16px;
  color: #ffffff;
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 800;
}

.certificates-page .certificate-page-hero p {
  max-width: 720px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 17px !important;
  line-height: 1.7;
  text-align: center !important;
}

/* Gallery section: light background separates credentials from the hero. */
.certificates-page .certificate-gallery-section {
  padding: 64px 0 !important;
  background: #f5f7fb;
}

.certificates-page .certificate-gallery-section .section-title {
  margin-bottom: 42px;
}

.certificates-page .certificate-gallery-section .section-title p {
  max-width: 720px;
  margin: 12px auto 0;
  text-align: center !important;
}

/* Certificate card: equal height, clear focus state, and restrained shadow. */
.certificates-page .certificate-gallery-card {
  display: flex;
  height: 100%;
  flex-direction: column;
  border: 1px solid rgba(37, 43, 98, 0.12);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(29, 45, 92, 0.09);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.certificates-page .certificate-gallery-card:hover {
  transform: translateY(-6px);
  border-color: rgba(247, 147, 30, 0.38);
  box-shadow: 0 22px 44px rgba(29, 45, 92, 0.15);
}

/* Image link fills the card width and receives keyboard focus visibly. */
.certificates-page .certificate-view-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.certificates-page .certificate-view-link:focus-visible,
.certificates-page .certificate-gallery-card:focus-within {
  outline: 3px solid rgba(247, 147, 30, 0.5);
  outline-offset: 3px;
}

/* Certificate image frame: preserves portrait artwork without cropping. */
.certificates-page .certificate-image-frame {
  position: relative;
  display: flex;
  height: 410px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(145deg, #eef1f7, #ffffff);
  overflow: hidden;
}

.certificates-page .certificate-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.certificates-page .certificate-gallery-card:hover .certificate-image-frame img {
  transform: scale(1.025);
}

.certificates-page .certificate-image-frame-portrait img {
  max-width: 330px;
}

/* Zoom badge communicates the image interaction. */
.certificates-page .certificate-zoom {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 999px;
  background: rgba(37, 43, 98, 0.92);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

/* Card copy: flexible height keeps all actions aligned at the bottom. */
.certificates-page .certificate-card-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 26px 28px;
}

.certificates-page .certificate-card-copy small {
  margin-bottom: 7px;
  color: #f7931e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.certificates-page .certificate-card-copy strong {
  color: #252b62;
  font-family: var(--heading-font);
  font-size: 22px;
  line-height: 1.35;
}

.certificates-page .certificate-card-copy > span {
  margin-top: 6px;
  color: #6c7487;
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .certificates-page .certificate-page-hero {
    padding: 58px 18px 52px !important;
  }

  .certificates-page .certificate-page-hero h1 {
    font-size: 36px;
  }

  .certificates-page .certificate-page-hero p {
    font-size: 15px !important;
  }

  .certificates-page .certificate-gallery-section {
    padding: 44px 0 !important;
  }

  .certificates-page .certificate-gallery-section .section-title {
    margin-bottom: 30px;
  }

  .certificates-page .certificate-image-frame {
    height: 320px;
    padding: 16px;
  }

  .certificates-page .certificate-card-copy {
    padding: 21px 20px 24px;
  }

  .certificates-page .certificate-card-copy strong {
    font-size: 19px;
  }

  .certificates-page .certificate-zoom {
    right: 14px;
    bottom: 14px;
    padding: 8px 12px;
    font-size: 12px;
  }
}

@media (min-width: 1200px) {
  .insights-cards-section .info-card {
    flex-basis: calc(25% - 23px);
    max-width: calc(25% - 23px);
  }
}

@keyframes insightFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

@media (max-width: 991px) {
  .insights-cards-section .info-card {
    flex-basis: calc(50% - 24px);
    max-width: calc(50% - 24px);
  }
}

@media (max-width: 767px) {
  .insights-cards-section {
    padding: 56px 0;
    background-attachment: scroll;
  }

  .insights-cards-section .info-card {
    flex-basis: 100%;
    max-width: 100%;
    min-height: 520px;
    padding: 24px;
  }

  .insights-cards-section .card-title h2 {
    font-size: 26px;
  }

  .insights-cards-section .slide img {
    width: 145px;
    height: 145px;
  }

  .insights-cards-section .news-slider .slide img {
    width: 165px;
    height: 165px;
    padding: 24px;
  }
}
/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  padding: 80px 0;
  position: relative;
}

.testimonials:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.testimonials .testimonials-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.testimonials .container,
.testimonials .container-fluid {
  position: relative;
  z-index: 3;
}

.testimonials .left-image {
  height: 100%;
  min-height: 520px;
}

.testimonials .left-image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 520px;
  object-fit: cover;
}

.testimonials .right-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  padding: 60px clamp(24px, 5vw, 72px);
}

@media (max-width: 991px) {
  .testimonials .left-image,
  .testimonials .left-image img {
    min-height: 360px;
  }
}

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  text-align: center;
}

.testimonials .testimonial-item .testimonial-img {
  width: 100px;
  border-radius: 50%;
  border: 6px solid color-mix(in srgb, var(--default-color), transparent 85%);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  margin: 0 0 15px 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 26px;
  line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
  transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 50%);
  opacity: 0.5;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--default-color);
  opacity: 1;
}

@media (min-width: 992px) {
  .testimonials .testimonial-item p {
    width: 80%;
  }
}

/*--------------------------------------------------------------
# About Page Vision / Mission / Objectives tab styles
--------------------------------------------------------------*/
.testimonials .tab-box {
  background: rgba(223, 220, 220, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.testimonials .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px;
  justify-content: center;
  background: #ffffff;
}

.testimonials .tab-btn {
  border: none;
  border-radius: 999px;
  background: #e0e8f3;
  color: rgba(15, 23, 42, 0.9);
  padding: 12px 24px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.25s ease;
}

.testimonials .tab-btn:hover,
.testimonials .tab-btn.active {
  background: #ff7a24;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(9, 15, 42, 0.12);
}

.testimonials .tab-content {
  padding: 28px 24px 24px;
  color: rgba(15, 23, 42, 0.9);
  font-size: 16px;
  line-height: 1.9;
  min-height: 140px;
  background-color: #e0e8f3;
}

.testimonials .tab-content .content {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.testimonials .tab-content .content.active-content {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/*--------------------------------------------------------------
# About Page Quality cards
  Change notes:
  - Keeps the existing Quality Policy and Quality Objectives layout.
  - Adds a bottom-to-top orange hover fill using a pseudo-element.
  - Keeps card text and icons above the hover layer with z-index.
--------------------------------------------------------------*/
.testimonials .info-card {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 26px;
  border-radius: 22px;
  border: 1px solid rgba(54, 40, 32, 0.12);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Orange hover layer: starts hidden at the bottom and moves upward on hover. */
.testimonials .info-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: 0;
  height: 100%;
  background: #f08b21;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.42s ease;
}

/* Policy is already orange, so this deeper orange makes its upward hover motion visible. */
.testimonials .policy-card::before {
  background: #df7f0b;
}

/* Objectives starts dark and reveals the same brand orange from bottom to top. */
.testimonials .objective-card::before {
  background: #f08b21;
}

.testimonials .info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.18);
}

.testimonials .info-card:hover::before {
  transform: scaleY(1);
}

/* Card content stays readable above the animated orange hover layer. */
.testimonials .info-card .icon-box,
.testimonials .info-card .info-card-body {
  position: relative;
  z-index: 1;
}

.testimonials .info-card .icon-box {
  width: 72px;
  height: 72px;
  min-width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #151414;
  font-size: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.testimonials .info-card .info-card-body h2 {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: 700;
  color: #1a1919;
}

.testimonials .info-card .info-card-body p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.8;
}

.testimonials .policy-card {
  background: rgba(250, 250, 250, 0.9);
  color: black;
}

.testimonials .objective-card {
  background: rgba(250, 250, 250, 0.9);
    color: black;

}

@media (max-width: 767px) {
  .testimonials .tabs {
    justify-content: center;
  }

  .testimonials .info-card {
    flex-direction: column;
    align-items: stretch;
  }

  .testimonials .info-card .icon-box {
    margin-bottom: 14px;
  }
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container {
  margin-top: 15px;
}

.faq .faq-container .faq-item {
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  overflow: hidden;
  transition: 0.3s;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 32px;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item h3 span {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 20px;
  line-height: 0;
  transition: 0.3s;
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active {
  background-color: var(--heading-color);
  transition: 0.3s;
}

.faq .faq-container .faq-active h3,
.faq .faq-container .faq-active h3:hover,
.faq .faq-container .faq-active .faq-toggle,
.faq .faq-container .faq-active .faq-icon,
.faq .faq-container .faq-active .faq-content {
  color: var(--contrast-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
}

/*--------------------------------------------------------------
# Home Page - Statistics Section
# Scoped with `home-stats-*` classes so these styles do not affect
# statistics or award components used on other pages.
--------------------------------------------------------------*/
.index-page .home-stats-section {
  position: relative;
  padding: 46px 0;
  background: #ffffff;
}

.index-page .home-stats-section > .container {
  max-width: 1460px;
}

/* The image belongs to the compact statistics panel, not the whole section. */
.index-page .home-stats-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background-color: #11141b;
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.26);
}

/* Background image layer: kept separate so the image cannot be hidden by
   another background shorthand declaration elsewhere in the stylesheet. */
.index-page .home-stats-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/cta-bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.72;
}

/* Dark overlay keeps the white numbers readable without hiding the image. */
.index-page .home-stats-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.48);
  pointer-events: none;
}

.index-page .home-stats-panel > .row {
  position: relative;
  z-index: 2;
}

/* Icon sits beside the number and label, matching the reference layout. */
.index-page .home-stat-item {
  display: grid;
  grid-template-columns: 68px auto;
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 8px;
  min-height: 170px;
  align-items: center;
  align-content: center;
  justify-content: center;
  padding: 28px 22px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}

.index-page .col-lg-3:last-child .home-stat-item {
  border-right: 0;
}

/* Statistic icon with a simple rotation on hover. */
.index-page .home-stat-icon {
  grid-row: 1 / 3;
  display: inline-flex;
  width: 68px;
  height: 68px;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border: 0;
  border-radius: 0;
  font-size: 56px;
  line-height: 1;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}

.index-page .home-stat-item:hover .home-stat-icon {
  transform: rotateY(360deg);
}

/* Animated achievement number. */
.index-page .home-stats-number {
  align-self: end;
  display: block;
  color: #ffffff;
  font-size: 44px;
  font-weight: 800;
  line-height: 1;
  margin: 0;
  font-family: var(--heading-font);
  text-align: left;
}

/* White label below each achievement number for clear dark-panel contrast. */
.index-page .home-stat-label {
  align-self: start;
  color: #ffffff !important;
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left !important;
}

@media (max-width: 991px) {
  .index-page .home-stat-item {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .index-page .home-stats-panel .col-md-6:nth-child(odd) .home-stat-item {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
  }

  .index-page .home-stats-panel .col-md-6:nth-last-child(-n + 2) .home-stat-item {
    border-bottom: 0;
  }
}

@media (max-width: 767px) {
  .index-page .home-stats-section {
    padding: 32px 0;
  }

  .index-page .home-stats-panel .col-md-6:nth-child(odd) .home-stat-item {
    border-right: 0;
  }

  .index-page .home-stats-panel .col-md-6:nth-last-child(-n + 2) .home-stat-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .index-page .home-stats-panel .col-md-6:last-child .home-stat-item {
    border-bottom: 0;
  }

  .index-page .home-stats-number {
    font-size: 38px;
  }

  .index-page .home-stat-item {
    grid-template-columns: 58px auto;
    min-height: 145px;
    padding: 24px 18px;
  }

  .index-page .home-stat-icon {
    width: 58px;
    height: 58px;
    font-size: 46px;
  }

  .index-page .home-stat-label {
    font-size: 16px;
  }
}

/*--------------------------------------------------------------
# Global Presence Section
# Uses the completed map image and removes old placeholder/pin CSS.
--------------------------------------------------------------*/
.global-presence {
  padding: 80px 0 72px;
  background: #ffffff;
  overflow: hidden;
}

.global-presence .container {
  max-width: 1480px;
}

.global-presence-title {
  margin-bottom: 30px;
}

.global-presence-title span {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--accent-color);
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
}

.global-presence-title span::after {
  content: "";
  display: inline-block;
  width: 128px;
  height: 3px;
  background: var(--accent-color);
}

.global-presence-title h2 {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 46px;
  font-weight: 800;
  margin: 28px 0 20px;
}

.global-map-wrap {
  position: relative;
  width: min(100%, 1320px);
  margin: 0 auto;
}

.global-map-img {
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(0.96);
  user-select: none;
  pointer-events: none;
}

/* Global Presence legend:
   Orange marks customers and blue marks the offshore delivery center in India.
*/
.global-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  color: #111111;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
}

.global-map-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.global-map-legend i {
  font-size: 34px;
  line-height: 1;
}

.global-map-legend .legend-customer {
  color: var(--accent-color);
}

.global-map-legend .legend-office {
  color: #252a67;
}

@media (max-width: 1199px) {
  .global-presence-title h2 {
    font-size: 40px;
  }
}

@media (max-width: 991px) {
  .global-presence {
    padding: 64px 0;
  }

  .global-presence-title span {
    font-size: 26px;
  }

  .global-presence-title h2 {
    font-size: 34px;
  }

}

@media (max-width: 767px) {
  .global-presence {
    padding: 54px 0;
  }

  .global-presence-title span {
    font-size: 23px;
  }

  .global-presence-title span::after {
    width: 74px;
  }

  .global-presence-title h2 {
    font-size: 28px;
  }

  .global-map-wrap {
    width: 100%;
  }

  .global-map-legend {
    gap: 14px;
    font-size: 14px;
  }

  .global-map-legend i {
    font-size: 26px;
  }
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .member {
  background-color: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  text-align: center;
  margin-bottom: 20px;
}

.team .member img {
  margin: -1px -1px 30px -1px;
}

.team .member .member-content {
  padding: 0 20px 30px 20px;
}

.team .member h4 {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}

.team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.team .member p {
  padding-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.team .member .social {
  margin-top: 15px;
}

.team .member .social a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  transition: 0.3s;
}

.team .member .social a:hover {
  color: var(--accent-color);
}

.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  background-color: var(--surface-color);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Alt Pricing Section
--------------------------------------------------------------*/
.alt-pricing .pricing-item {
  background-color: var(--surface-color);
  box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
  padding-bottom: 30px;
  position: relative;
}

.alt-pricing .pricing-item h3 {
  font-weight: 700;
  margin-bottom: 0;
  font-size: 24px;
}

.alt-pricing .pricing-item h4 {
  font-size: 48px;
  color: var(--accent-color);
  font-weight: 400;
  font-family: var(--heading-font);
  margin-bottom: 25px;
  text-align: center;
}

.alt-pricing .pricing-item h4 sup {
  font-size: 28px;
}

.alt-pricing .pricing-item h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 18px;
}

.alt-pricing .pricing-item ul {
  padding: 20px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  text-align: left;
  line-height: 20px;
}

.alt-pricing .pricing-item ul li {
  padding-top: 15px;
  display: flex;
  align-items: center;
}

.alt-pricing .pricing-item ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.alt-pricing .pricing-item ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.alt-pricing .pricing-item ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.alt-pricing .pricing-item ul .na span {
  text-decoration: line-through;
}

.alt-pricing .buy-btn {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  border: 2px solid var(--accent-color);
  display: inline-block;
  padding: 12px 40px;
  border-radius: 4px;
  transition: none;
  font-size: 16px;
  font-weight: 500;
  transition: 0.3s;
  font-family: var(--heading-font);
}

.alt-pricing .buy-btn:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.alt-pricing .featured {
  background: var(--accent-color);
}

.alt-pricing .featured h3,
.alt-pricing .featured h4,
.alt-pricing .featured h4 span,
.alt-pricing .featured ul,
.alt-pricing .featured ul .na,
.alt-pricing .featured ul i,
.alt-pricing .featured ul .na i {
  color: var(--contrast-color);
}

.alt-pricing .featured .buy-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--contrast-color);
}

.alt-pricing .featured .buy-btn:hover {
  background: color-mix(in srgb, var(--accent-color) 90%, black 15%);
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
/* ============================================================
   # CAREER PAGE
   Changes made:
   - Adds a clean responsive career banner below the fixed header.
   - Keeps typography moderate so it matches the rest of the site.
   - Builds the two-column current-openings layout from the reference.
   - Uses navy cards, orange active/hover state, and compact spacing.
   ============================================================ */
.career-page .career-banner {
  width: 100%;
  margin-top: 108px;
  background: #ffffff;
  overflow: hidden;
}

.career-page .career-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.career-page .career-openings-section {
  padding: 54px 0 76px;
  background: #ffffff;
}

.career-page .career-openings-section .container {
  max-width: 1400px;
}

.career-page .career-intro {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.career-page .career-intro h1 {
  margin: 0 0 16px;
  color: #000000;
  font-family: var(--heading-font);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1.22;
}

.career-page .career-intro p {
  margin: 0;
  color: #000000;
  font-size: 16px;
  line-height: 1.8;
}

.career-page .career-openings-title {
  margin: 52px 0 34px;
  color: #000000;
  text-align: center;
  font-family: var(--heading-font);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1.2;
}

/* Career jobs accordion:
   JS splits the buttons into two independent columns, matching the reference.
   The selected job detail opens inside its own column so the opposite column
   keeps flowing normally without blank side space.
*/
.career-page .career-jobs-container {
  display: block;
}

.career-page .career-jobs-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}

.career-page .career-jobs-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.career-page .career-job-details {
  display: none;
  width: 100%;
  margin: -18px 0 0;
}

.career-page .career-job-details.is-visible {
  display: block;
  animation: careerDetailFade 0.25s ease;
}

@keyframes careerDetailFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

.career-page .job-detail-card {
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    url("../img/Banners/Career Page.png") center / cover no-repeat;
  border: 1px solid #e8e8e8;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transition: box-shadow 0.3s ease;
}

.career-page .job-detail-header {
  display: none;
}

.career-page .job-detail-header::before {
  content: "";
  width: 22px;
  height: 5px;
  border-radius: 10px;
  background: #ffffff;
  flex: 0 0 auto;
}

.career-page .job-detail-title {
  margin: 0;
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.career-page .job-detail-body {
  padding: 26px;
}

.career-page .job-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 26px;
  margin-bottom: 24px;
  padding: 18px 20px;
  background: rgba(219, 219, 219, 0.9);
  border-bottom: 1px solid #c5c5c5;
}

.career-page .job-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #3f4657;
}

.career-page .job-meta-item i {
  color: #252b62;
  font-size: 16px;
}

.career-page .job-skills {
  margin-bottom: 20px;
}

.career-page .job-skills strong {
  display: block;
  margin-bottom: 8px;
  color: #282d63;
  font-size: 14px;
}

.career-page .job-skills p {
  margin: 0;
  color: #777777;
  font-size: 14px;
  line-height: 1.6;
}

.career-page .job-description {
  margin-bottom: 24px;
}

.career-page .job-description p {
  margin: 0;
  color: #111111;
  font-size: 16px;
  line-height: 1.85;
  text-align: justify;
}

.career-page .btn-apply {
  background: #f18416;
  color: #ffffff;
  border: 0;
  padding: 12px 32px;
  border-radius: 4px;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease;
}

.career-page .btn-apply:hover {
  background: #e07a0d;
}

/* Career application modal */
.career-application-modal .modal-content {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(22, 28, 72, 0.25);
}

.career-application-modal .modal-header {
  align-items: flex-start;
  padding: 24px 28px;
  color: #ffffff;
  background: #282d63;
  border-bottom: 4px solid #f18416;
}

.career-application-modal .modal-title {
  color: #ffffff;
  font-size: 24px;
  font-weight: 700;
}

.career-application-modal .career-form-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #f5a34f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.career-application-modal .btn-close {
  margin-top: 2px;
  filter: invert(1);
}

.career-application-modal .modal-body {
  padding: 28px;
}

.career-application-form .form-label {
  margin-bottom: 7px;
  color: #282d63;
  font-weight: 700;
}

.career-application-form .form-control {
  min-height: 48px;
  border: 1px solid #d9dce8;
  border-radius: 6px;
}

.career-application-form textarea.form-control {
  min-height: 120px;
}

.career-application-form .form-control:focus {
  border-color: #f18416;
  box-shadow: 0 0 0 0.2rem rgba(241, 132, 22, 0.15);
}

.career-application-form input[readonly] {
  color: #282d63;
  background: #f2f3f8;
  font-weight: 600;
}

.career-application-form .form-text {
  color: #6c7284;
}

.career-application-form .loading,
.career-application-form .error-message,
.career-application-form .sent-message {
  display: none;
  padding: 12px 14px;
  border-radius: 6px;
  text-align: center;
}

.career-application-form .loading {
  color: #282d63;
  background: #f2f3f8;
}

.career-application-form .error-message {
  color: #842029;
  background: #f8d7da;
}

.career-application-form .sent-message {
  color: #0f5132;
  background: #d1e7dd;
}

.career-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.career-form-actions button {
  min-width: 150px;
  padding: 12px 20px;
  border-radius: 5px;
  font-weight: 700;
}

.career-form-actions .btn-cancel {
  color: #282d63;
  background: #ffffff;
  border: 1px solid #282d63;
}

.career-form-actions .btn-submit-application {
  color: #ffffff;
  background: #f18416;
  border: 1px solid #f18416;
}

.career-form-actions .btn-submit-application:hover {
  background: #e07a0d;
}


.career-page .career-job-card {
  display: flex;
  min-height: 74px;
  align-items: center;
  gap: 16px;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: #282d63;
  color: #ffffff;
  padding: 18px 26px;
  text-align: left;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.38;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(37, 43, 98, 0.08);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.career-page .career-job-card.active {
  margin-bottom: 0;
}

.career-page .career-job-card i {
  flex: 0 0 auto;
  color: #f18416;
  font-size: 22px;
  line-height: 1;
  transition: color 0.25s ease;
}

.career-page .career-job-card:hover,
.career-page .career-job-card.active {
  background: #f18416;
  box-shadow: 0 12px 24px rgba(241, 132, 22, 0.18);
}

.career-page .career-job-card:hover {
  transform: translateY(-2px);
}

.career-page .career-job-card:hover i,
.career-page .career-job-card.active i {
  color: #ffffff;
}

@media (max-width: 1199px) {
  .career-page .career-banner {
    margin-top: 88px;
  }

  .career-page .career-openings-section .container {
    max-width: 960px;
  }
}

@media (max-width: 991px) {
  .career-page .career-openings-section {
    padding: 44px 0 64px;
  }

  .career-page .career-intro p {
    font-size: 15px;
  }

  .career-page .career-jobs-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .career-page .career-jobs-column {
    gap: 14px;
  }

  .career-page .job-meta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .career-page .career-banner {
    margin-top: 78px;
  }

  .career-page .career-openings-section {
    padding: 36px 0 48px;
  }

  .career-page .career-intro h1,
  .career-page .career-openings-title {
    font-size: 26px;
  }

  .career-page .career-openings-title {
    margin: 38px 0 26px;
  }

  .career-page .career-job-card {
    min-height: 62px;
    gap: 12px;
    padding: 15px 16px;
    font-size: 14px;
  }

  .career-page .job-detail-body {
    padding: 18px;
  }

  .career-page .job-detail-title {
    font-size: 16px;
  }

  .career-page .btn-apply {
    width: 100%;
    padding: 14px 16px;
  }

  .career-application-modal .modal-header,
  .career-application-modal .modal-body {
    padding: 20px;
  }

  .career-form-actions {
    flex-direction: column-reverse;
  }

  .career-form-actions button {
    width: 100%;
  }
}

/* Compact career icon size on the smallest screens */
@media (max-width: 575px) {
  .career-page .career-job-card i {
    font-size: 20px;
  }
}

/* ============================================================
   # CONTACT PAGE BANNER
   Purpose:
   - Displays assets/img/Banners/Contact Us.png as the contact hero banner.
   - Removes the old page-title overlay so the designed image stays clean.
   - Keeps the full designed artwork visible instead of cropping text/icons.
   - Matches the site first-screen flow by sitting directly under the fixed header.
   ============================================================ */
.contact-page .contact-banner {
  width: 100%;
  margin-top: 108px;
  background: #ffffff;
  overflow: hidden;
  position: relative;
  min-height: 52vh;
}

.contact-page .contact-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 108px);
  object-fit: cover;
}

/* News & Events banner uses its own class so the page label is clear in HTML. */
.contact-page .news-events-banner {
  width: 100%;
  margin-top: 108px;
  background: #ffffff;
  overflow: hidden;
  position: relative;
  min-height: 52vh;
}

.contact-page .news-events-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 108px);
  object-fit: cover;
}

@media (max-width: 1199px) {
  .contact-page .contact-banner {
    margin-top: 88px;
    min-height: 48vh;
  }

  .contact-page .contact-banner img {
    max-height: calc(100vh - 88px);
  }

  .contact-page .news-events-banner {
    margin-top: 88px;
    min-height: 48vh;
  }

  .contact-page .news-events-banner img {
    max-height: calc(100vh - 88px);
  }
}

@media (max-width: 767px) {
  .contact-page .contact-banner {
    margin-top: 78px;
    min-height: 40vh;
  }

  .contact-page .contact-banner img {
    max-height: calc(100vh - 78px);
  }

  .contact-page .news-events-banner {
    margin-top: 78px;
    min-height: 40vh;
  }

  .contact-page .news-events-banner img {
    max-height: calc(100vh - 78px);
  }
}

.contact .info-item+.info-item {
  margin-top: 40px;
}

/* ============================================================
   # CONTACT DETAILS SECTION
   Changes made:
   - Matches the reference view with form on the left and offices on the right.
   - Keeps inputs clean, square-edged, and full-width without oversized text.
   - Styles location icons as navy square badges with soft shadow.
   - Adds a clean file upload row and full-width submit button.
   ============================================================ */
.contact-page .contact {
  padding: 34px 0 52px;
  background: #ffffff;
}

.contact-page .contact .container {
  max-width: 1460px;
}

.contact-page .contact-section-title {
  margin: 0 0 42px;
  color: #000000;
  font-family: var(--heading-font);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 800;
  line-height: 1.16;
}

.contact-page .contact .row {
  --bs-gutter-x: 60px;
}

.contact-page .contact .info-item {
  align-items: flex-start;
  gap: 22px;
}

.contact-page .contact .info-item+.info-item {
  margin-top: 54px;
}

.contact-page .contact .info-item i {
  width: 66px;
  height: 66px;
  min-width: 66px;
  border-radius: 10px;
  background: #292d66;
  color: #ffffff;
  font-size: 38px;
  box-shadow: 0 12px 22px rgba(31, 35, 83, 0.16);
}

.contact-page .contact .info-item h3 {
  margin: 0 0 12px;
  color: #000000;
  font-family: var(--heading-font);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}

.contact-page .contact .info-item p {
  margin: 0 0 8px;
  padding: 0;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}

.contact-page .contact .info-item b {
  font-weight: 800;
}

.contact-page .contact-main-form {
  max-width: 714px;
}

.contact-page .contact .site-email-form input[type=text],
.contact-page .contact .site-email-form input[type=email],
.contact-page .contact .site-email-form textarea {
  width: 100%;
  border: 1px solid #c9c9c9;
  border-radius: 0;
  background: #fbfbfb;
  color: #000000;
  box-shadow: none;
  font-size: 15px;
  line-height: 1.4;
  padding: 15px 24px;
}

.contact-page .contact .site-email-form input[type=text],
.contact-page .contact .site-email-form input[type=email] {
  min-height: 54px;
}

.contact-page .contact .site-email-form textarea {
  min-height: 158px;
  resize: vertical;
}

.contact-page .contact .site-email-form input::placeholder,
.contact-page .contact .site-email-form textarea::placeholder {
  color: #8e8e8e;
  opacity: 1;
}

.contact-page .contact .site-email-form input:focus,
.contact-page .contact .site-email-form textarea:focus {
  border-color: #292d66;
  background: #ffffff;
}

.contact-page .contact-upload-label {
  display: block;
  margin: 0 0 8px;
  color: #000000;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
}

.contact-page .contact-file-input {
  width: 100%;
  color: #000000;
  font-size: 15px;
}

.contact-page .contact-file-input::file-selector-button {
  margin-right: 14px;
  border: 0;
  background: #f18416;
  color: #ffffff;
  padding: 13px 26px;
  font-family: var(--heading-font);
  font-weight: 700;
  cursor: pointer;
}

.contact-page .contact .site-email-form button[type=submit] {
  display: block;
  width: 100%;
  margin-top: 24px;
  border: 0;
  border-radius: 0;
  background: #292d66;
  color: #ffffff;
  padding: 16px 28px;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 800;
  transition: background 0.25s ease;
}

.contact-page .contact .site-email-form button[type=submit]:hover {
  background: #1f2354;
}

@media (max-width: 1199px) {
  .contact-page .contact .row {
    --bs-gutter-x: 40px;
  }

  .contact-page .contact .info-item p {
    font-size: 15px;
  }
}

@media (max-width: 991px) {
  .contact-page .contact-section-title {
    margin-bottom: 34px;
  }

  .contact-page .contact-main-form {
    max-width: 100%;
  }

  .contact-page .contact .info-item+.info-item {
    margin-top: 42px;
  }
}

@media (max-width: 575px) {
  .contact-page .contact .info-item {
    gap: 18px;
  }

  .contact-page .contact .info-item i {
    width: 58px;
    height: 58px;
    min-width: 58px;
    font-size: 32px;
  }

  .contact-page .contact .info-item h3 {
    font-size: 20px;
  }

  .contact-page .contact .info-item p {
    font-size: 15px;
  }

  .contact-page .contact .site-email-form input[type=text],
  .contact-page .contact .site-email-form input[type=email],
  .contact-page .contact .site-email-form textarea {
    font-size: 15px;
    padding: 14px 16px;
  }
}

/* ============================================================
   # CONTACT MAP SECTION
   Changes made:
   - Makes the Google map full-width like the reference page.
   - Removes extra spacing around the iframe.
   - Keeps a stable responsive height before the footer.
   ============================================================ */
.contact-page .contact-map-section {
  width: 100%;
  margin: 0;
  padding: 0;
  background: #ffffff;
  overflow: hidden;
}

.contact-page .contact-map-section iframe {
  display: block;
  width: 100%;
  height: 375px;
  border: 0;
}

@media (max-width: 991px) {
  .contact-page .contact-map-section iframe {
    height: 340px;
  }
}

@media (max-width: 575px) {
  .contact-page .contact-map-section iframe {
    height: 300px;
  }
}

.contact .info-item i {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
  margin-right: 15px;
}
.contact h3 {
    font-size: clamp(1.8rem, 2.6vw, 2.6rem);
    margin-bottom: revert;
}
.contact .info-item h3 {
  font-size: 20px;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

.contact .site-email-form {
  height: 100%;
}

.contact .site-email-form input[type=text],
.contact .site-email-form input[type=email],
.contact .site-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .site-email-form input[type=text]:focus,
.contact .site-email-form input[type=email]:focus,
.contact .site-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .site-email-form input[type=text]::placeholder,
.contact .site-email-form input[type=email]::placeholder,
.contact .site-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .site-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .site-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
/*--------------------------------------------------------------
Gallery Section Css
---------------------------------------------------------------*/
.gallery-section {
    background: #fff;
}

/* Gallery lightbox cards:
   These styles support both hand-written anchors and image cards converted
   by assets/js/main.js, so Gallery and Case Study pages share one big-image
   click effect without duplicating modal markup on every page.
*/
.gallery-card {
    display: block;
    border: 2px solid #f7941d;
    overflow: hidden;
    cursor: pointer;
    transition: 0.4s;
}

.gallery-card img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    transition: 0.5s;
}

.gallery-card:hover img {
    transform: scale(1.08);
}

.gallery-card:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* GLightbox preview polish:
   Keeps the clicked image large, centered, and easy to inspect, matching the
   dark overlay/counter/navigation style shown in the reference screenshot.
*/
.glightbox-container .gslide-image img {
    max-height: 82vh;
    object-fit: contain;
}

/*-------------------------------------------------------------
Testimonials
---------------------------------------------------------------*/

/* Testimonial outer spacing */
.testimonial-wrapper {
  max-width: 1480px;
  margin-top: 55px;
  margin-bottom: 45px;
}

/*--------------------------------------------------------------
# Professional Testimonial Card Effect
# Gives each testimonial a clean light card, animated orange top line,
# raised hover state, readable body text, and highlighted star rating.
# The testimonial HTML uses h3 for headings and .stars for the rating.
--------------------------------------------------------------*/
.testimonial-card {
  background: #f7f7f7;
  padding: 45px;
  min-height: 320px;
  border: 1px solid transparent;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease,
    transform 0.4s ease;
}

/* Animated orange line starts hidden at the top-left of the card. */
.testimonial-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 5px;
  background: #ff7a18;
  transition: width 0.4s ease;
}

/* Lift the card and add a professional shadow on hover. */
.testimonial-card:hover {
  background: #ffffff;
  transform: translateY(-10px);
  box-shadow: 0 18px 40px rgba(0, 32, 96, 0.18);
  border-color: rgba(255, 122, 24, 0.4);
}

/* Extend the orange line across the full card width on hover. */
.testimonial-card:hover::before {
  width: 100%;
}

/* Quote icons are hidden because testimonial headings now display cleanly without decorative marks. */
.quote-icon {
  display: none;
}

/* Quote becomes active when mouse is over card */
.testimonial-card:hover .quote-icon {
  color: #ff8a16;
  transform: scale(1.1);
}

/* Testimonial heading uses the site's deep blue brand color. */
.testimonial-card h3 {
  color: #061a78;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 800;
  margin-bottom: 25px;
  transition: color 0.3s ease;
}

/* Dark testimonial copy remains easy to read on the light card. */
.testimonial-card p {
  color: #111111;
  line-height: 1.8;
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0;
}

/* Gold star rating with comfortable spacing below the testimonial. */
.stars {
  color: #ffb000;
  font-size: 20px;
  margin-top: 25px;
  letter-spacing: 4px;
  transition: transform 0.3s ease;
}

/* Change the heading to orange when its card is active. */
.testimonial-card:hover h3 {
  color: #ff7a18;
}

/* Slightly enlarge the stars without moving them away from the left edge. */
.testimonial-card:hover .stars {
  transform: scale(1.08);
  transform-origin: left center;
}

/* Bottom orange line */
.bottom-line {
  width: 78%;
  height: 4px;
  background-color: #f28a18;
  margin: 0 auto 45px;
}

/* Back to top button */
.back-to-top {
  position: fixed;
  right: 45px;
  bottom: 60px;
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background-color: #202866;
  color: #ffffff;
  font-size: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
  z-index: 1000;
}

.back-to-top:hover {
  background-color: #f28a18;
}

/* Tablet responsive */
@media (max-width: 1199px) {
  .main-header {
    width: 90%;
  }

  .nav-link {
    font-size: 15px;
  }

  .testimonial-card {
    padding: 44px 35px 40px;
  }
}

/* Mobile and tablet menu */
@media (max-width: 991px) {
  .main-header {
    width: 92%;
  }

  .navbar {
    min-height: auto;
    padding: 20px 0;
  }

  .navbar-collapse {
    margin-top: 20px;
  }

  .navbar-nav {
    text-align: center;
  }

  .testimonial-wrapper {
    margin-top: 45px;
  }

  .testimonial-card {
    min-height: auto;
  }
}

/* Small mobile */
@media (max-width: 576px) {
  .top-blue {
    height: 35px;
  }

  .main-header {
    width: 94%;
    margin-top: -18px;
  }

  .logo {
    width: 190px;
  }

  .testimonial-card {
    padding: 38px 24px 35px;
  }

  .testimonial-card h3 {
    font-size: 18px;
    margin-bottom: 28px;
  }

  .testimonial-card p {
    font-size: 15px;
    line-height: 1.65;
  }

  .back-to-top {
    right: 20px;
    bottom: 30px;
    width: 48px;
    height: 48px;
  }
}
/*--------------------------------------------------------------
News and Events
Purpose:
- Recreates the reference page layout with orange separators, centered icons,
  large navy headings, grey body text, and alternating image/text rows.
- HTML keeps the original event/news content; these rules only control display.
--------------------------------------------------------------*/

/* Main list wrapper below the page banner */
.news-events-section {
  padding: 36px 0 72px;
  background: #ffffff;
}

/* Match the reference content width and long orange divider lines */
.news-events-section .container {
  max-width: 1500px;
}

/* One complete event/news item */
.event-box {
  padding: 72px 0 64px;
  border-bottom: 4px solid #ef7d1a;
}

/* Orange divider above the first item */
.event-box:first-child {
  border-top: 4px solid #ef7d1a;
}

/* Center all row content vertically and keep wide spacing between columns */
.event-box .row {
  --bs-gutter-x: 72px;
  align-items: center;
}

/* Event/news title */
.event-box h2 {
  margin: 0 0 22px;
  color: #17245c;
  font-family: var(--heading-font);
  font-size: clamp(34px, 2.55vw, 46px);
  font-weight: 800;
  line-height: 1.25;
}

/* Event/news description */
.event-box p {
  max-width: 1040px;
  margin: 0 auto;
  color: #666f78;
  font-size: clamp(20px, 1.35vw, 24px);
  font-weight: 400;
  line-height: 1.75;
}

/* Shared event image styling */
.event-img,
.event-logo {
  display: inline-block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Certificate/poster images from the event archive */
.event-img {
  max-width: 365px;
}

/* Wider event logos such as Bauma */
.event-logo {
  max-width: 520px;
}

/* Individual logo sizing for screenshot proportions */
.jimex-logo {
  max-width: 500px;
}

.maszbud-logo {
  max-width: 540px;
}

/* Subtle hover state without changing the data or layout */
.event-box {
  transition: background-color 0.25s ease;
}

.event-box:hover {
  background-color: #e9e6f4;
}

/* Tablet layout */
@media (max-width: 991px) {
  .news-events-section {
    padding: 28px 0 56px;
  }

  .event-box {
    padding: 52px 14px;
  }

  .event-box .row {
    --bs-gutter-x: 32px;
  }

  .event-box h2 {
    font-size: 30px;
  }

  .event-box p {
    font-size: 18px;
    line-height: 1.65;
  }

  .event-img,
  .event-logo,
  .jimex-logo,
  .maszbud-logo {
    max-width: 360px;
  }
}

/* Mobile layout */
@media (max-width: 576px) {
  .news-events-section {
    padding: 22px 0 44px;
  }

  .event-box {
    padding: 42px 10px;
  }

  .event-box h2 {
    font-size: 24px;
    line-height: 1.3;
  }

  .event-box p {
    font-size: 16px;
    line-height: 1.62;
  }

  .event-img,
  .event-logo,
  .jimex-logo,
  .maszbud-logo {
    max-width: 275px;
  }
}
/*--------------------------------------------------------------
# Get A Quote Section
--------------------------------------------------------------*/
.get-a-quote .quote-bg {
  min-height: 500px;
  background-size: cover;
  background-position: center;
}

.get-a-quote .site-email-form {
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  padding: 30px;
  height: 100%;
}

@media (max-width: 575px) {
  .get-a-quote .site-email-form {
    padding: 20px;
  }
}

.get-a-quote .site-email-form h3 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.get-a-quote .site-email-form h4 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 20px 0 0 0;
}

.get-a-quote .site-email-form p {
  font-size: 14px;
  margin-bottom: 20px;
}

.get-a-quote .site-email-form input[type=text],
.get-a-quote .site-email-form input[type=email],
.get-a-quote .site-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 20%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.get-a-quote .site-email-form input[type=text]:focus,
.get-a-quote .site-email-form input[type=email]:focus,
.get-a-quote .site-email-form textarea:focus {
  border-color: var(--accent-color);
}

.get-a-quote .site-email-form input[type=text]::placeholder,
.get-a-quote .site-email-form input[type=email]::placeholder,
.get-a-quote .site-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.get-a-quote .site-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.get-a-quote .site-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
/*--------------------------------------------------------------
CAD Design section
--------------------------------------------------------------*/
/* CAD content uses the shared clean service background. */
.cad-product-design-content {
  background: #ffffff;
}

/* PAGE TITLE */
.cad-title {
  font-size: 42px;
  font-weight: 800;
  color: #000;
  line-height: 1.25;
}

/* SMALL TITLE LINE */
.title-line {
  width: 55px;
  height: 2px;
  background: #1f2b63;
  margin: 18px 0 45px;
}

/* DESCRIPTION */
.cad-desc {
  font-size: 18px;
  line-height: 1.9;
  color: #111;
  margin-bottom: 25px;
}

/* SECTION SPACING */
.service-info-section {
  margin-top: 70px;
}

/* SERVICE HEADING */
.section-title {
  font-size: 36px;
  font-weight: 800;
  color: #000;
  margin-bottom: 35px;
}

/* SERVICE LIST */
.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* SERVICE LIST ITEM */
.service-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 18px;
  color: #000;
  margin-bottom: 22px;
  line-height: 1.7;
}

/* CHECK ICON */
.service-list li i {
  color: #24346f;
  font-size: 22px;
  margin-top: 5px;
  flex-shrink: 0;
}

/* SIDEBAR MENU */
.service-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 118px;
  padding: 28px 35px;
  margin-bottom: 14px;
  background: #f2f2f2;
  color: #000;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  transition: all 0.4s ease;
}

/* SIDEBAR ACTIVE AND HOVER */
.service-link.active,
.service-link:hover {
  background: #e77d19;
  color: #fff;
}

/* SIDEBAR ARROW */
.service-link .arrow {
  font-style: normal;
  font-size: 36px;
  transition: all 0.3s ease;
}

.service-link:hover .arrow {
  transform: translateX(6px);
}

/* INDUSTRY TITLE */
.industry-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 25px;
}

/* INDUSTRY LIST */
.industry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* INDUSTRY LINKS */
.industry-list a {
  display: block;
  background: #f5f5f5;
  color: #000;
  padding: 18px 25px;
  margin-bottom: 10px;
  font-size: 20px;
  text-decoration: none;
  transition: all 0.4s ease;
}

/* INDUSTRY HOVER AND ACTIVE */
.industry-list a:hover,
.industry-list a.active-industry {
  background: #252a67;
  color: #fff;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .cad-title {
    font-size: 34px;
  }

  .section-title {
    font-size: 30px;
  }

  .service-link {
    min-height: auto;
    padding: 22px;
    font-size: 18px;
  }
}

@media (max-width: 575px) {
  .cad-title {
    font-size: 28px;
  }

  .section-title {
    font-size: 26px;
  }

  .cad-desc,
  .service-list li,
  .industry-list a {
    font-size: 16px;
  }
}
/*--------------------------------------------------------------
CAE-FEA-CFE Analysis Section
--------------------------------------------------------------*/
/* CAE content uses the shared clean service background. */
.cae-page-section {
  background: #ffffff;
}

/* ================= MAIN PAGE TITLE ================= */
.cae-main-title {
  font-size: 42px;
  font-weight: 800;
  color: #000;
  line-height: 1.25;
  margin-bottom: 12px;
}

/* ================= TITLE SMALL LINE ================= */
.title-line {
  width: 55px;
  height: 2px;
  background: linear-gradient(to right, #e77d19 50%, #1f2b63 50%);
  margin-bottom: 45px;
}

/* ================= DESCRIPTION TEXT ================= */
.cae-desc {
  font-size: 18px;
  line-height: 1.9;
  color: #111;
  margin-bottom: 28px;
}

/* ================= SECTION TITLE ================= */
.section-title {
  font-size: 36px;
  font-weight: 800;
  color: #000;
  margin: 45px 0 30px;
}

/* ================= LIST STYLE ================= */
.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ================= LIST ITEM ================= */
.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 18px;
  color: #000;
  line-height: 1.8;
  margin-bottom: 18px;
}

/* ================= CHECK ICON ================= */
.icon-list li i {
  color: #24346f;
  font-size: 22px;
  margin-top: 5px;
  flex-shrink: 0;
}

/* ================= EXPERTISE SECTION SPACING ================= */
.expertise-section {
  margin-top: 35px;
}

/* ================= DELIVERY TITLE ================= */
.delivery-title {
  margin-top: 55px;
}

/* ================= DIVIDER LINE ================= */
.section-divider {
  margin: 35px 0 20px;
  border-color: #222;
}

/* ================= SMALL TITLE ================= */
.small-title {
  font-size: 40px;
}

/* ================= RIGHT SERVICE SIDEBAR ================= */
.service-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 118px;
  padding: 28px 35px;
  margin-bottom: 14px;
  background: #f2f2f2;
  color: #000;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  transition: all 0.4s ease;
  border: 1px solid #ddd;
}

/* ================= ACTIVE AND HOVER SIDEBAR ================= */
.service-link.active,
.service-link:hover {
  background: #e77d19;
  color: #fff;
}

/* ================= SIDEBAR ARROW ================= */
.service-link .arrow {
  font-style: normal;
  font-size: 36px;
  transition: all 0.3s ease;
}

/* ================= ARROW HOVER MOVE ================= */
.service-link:hover .arrow {
  transform: translateX(6px);
}

/* ================= INDUSTRY TITLE ================= */
.industry-title {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 25px;
}

/* ================= INDUSTRY LIST ================= */
.industry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ================= INDUSTRY LIST LINK ================= */
.industry-list a {
  display: block;
  background: #f5f5f5;
  color: #000;
  padding: 18px 25px;
  margin-bottom: 10px;
  font-size: 20px;
  text-decoration: none;
  transition: all 0.4s ease;
}

/* ================= INDUSTRY HOVER ================= */
.industry-list a:hover {
  background: #252a67;
  color: #fff;
}

/* ================= GALLERY ROW ================= */
.gallery-row {
  margin-top: 30px;
}

/* ================= GALLERY IMAGE BOX ================= */
.gallery-box {
  position: relative;
  width: 100%;
  height: 270px;
  border: 1px solid #e77d19;
  overflow: hidden;
  background: #fff;
}

/* CAE validation gallery: make the complete image card open in GLightbox. */
.cae-service-page .cae-gallery-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
}

/* ================= IMAGE ZOOM OUT EFFECT ================= */
.gallery-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.08);
  transition: all 0.5s ease;
}

/* ================= IMAGE ZOOM OUT ON HOVER ================= */
.gallery-box:hover img {
  transform: scale(1);
}

/* ================= BLACK OVERLAY ================= */
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  opacity: 0;
  transition: all 0.4s ease;
}

/* ================= SHOW OVERLAY ON HOVER ================= */
.gallery-box:hover .gallery-overlay {
  opacity: 1;
}

/* ================= IMAGE TITLE ================= */
.gallery-row h4 {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #111;
  margin: 18px 0 25px;
}

/* ================= RESPONSIVE TABLET ================= */
@media (max-width: 991px) {
  .cae-main-title {
    font-size: 34px;
  }

  .section-title {
    font-size: 30px;
  }

  .service-link {
    min-height: auto;
    padding: 22px;
    font-size: 18px;
  }
}

/* ================= RESPONSIVE MOBILE ================= */
@media (max-width: 575px) {
  .cae-main-title {
    font-size: 28px;
  }

  .small-title {
    font-size: 28px;
  }

  .section-title {
    font-size: 26px;
  }

  .cae-desc,
  .icon-list li,
  .industry-list a {
    font-size: 16px;
  }

  .gallery-box {
    height: 220px;
  }
}

/*--------------------------------------------------------------
Manufacturing enggineering section
--------------------------------------------------------------*/
/* Manufacturing content uses the shared clean service background. */
.manufacturing-page-section {
  background: #ffffff;
  min-height: 100vh;
}

/* MAIN TITLE */
.main-title {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.25;
  color: #000;
  margin-bottom: 12px;
}

/* SMALL TITLE LINE */
.title-line {
  width: 55px;
  height: 2px;
  background: linear-gradient(to right, #e77d19 50%, #1f2b63 50%);
  margin-bottom: 48px;
}

/* PARAGRAPH TEXT */
.page-desc {
  font-size: 18px;
  line-height: 1.9;
  color: #111;
  margin-bottom: 32px;
}

/* SECTION TITLE */
.section-title {
  font-size: 30px;
  font-weight: 800;
  color: #000;
  margin-top: 55px;
  margin-bottom: 28px;
}

/* CHECK LIST */
.check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* CHECK LIST ITEM */
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 18px;
  line-height: 1.7;
  color: #000;
  margin-bottom: 20px;
}

/* CHECK ICON */
.check-list li i {
  color: #24346f;
  font-size: 22px;
  margin-top: 4px;
  flex-shrink: 0;
}

/* SERVICE SIDEBAR LINK */
.service-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 122px;
  padding: 28px 35px;
  margin-bottom: 14px;
  background: #f2f2f2;
  color: #000;
  border: 1px solid #ddd;
  text-decoration: none;
  font-size: 20px;
  font-weight: 700;
  transition: all 0.4s ease;
}

/* ACTIVE AND HOVER SIDEBAR */
.service-link.active,
.service-link:hover {
  background: #e77d19;
  color: #fff;
}

/* SIDEBAR ARROW */
.service-link .arrow {
  font-style: normal;
  font-size: 38px;
  transition: all 0.3s ease;
}

/* ARROW MOVE ON HOVER */
.service-link:hover .arrow {
  transform: translateX(6px);
}

/* INDUSTRY TITLE */
.industry-title {
  font-size: 32px;
  font-weight: 800;
  color: #000;
  margin-bottom: 25px;
}

/* INDUSTRY LIST */
.industry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* INDUSTRY LINK */
.industry-list a {
  display: block;
  background: #f5f5f5;
  color: #000;
  padding: 18px 25px;
  margin-bottom: 10px;
  font-size: 20px;
  text-decoration: none;
  transition: all 0.4s ease;
}

/* INDUSTRY HOVER */
.industry-list a:hover {
  background: #252a67;
  color: #fff;
}

/* TABLET RESPONSIVE */
@media (max-width: 991px) {
  .main-title {
    font-size: 34px;
  }

  .section-title {
    font-size: 28px;
  }

  .service-link {
    min-height: auto;
    padding: 22px;
    font-size: 18px;
  }
}

/* MOBILE RESPONSIVE */
@media (max-width: 575px) {
  .main-title {
    font-size: 28px;
  }

  .page-desc,
  .check-list li,
  .industry-list a {
    font-size: 16px;
  }

  .section-title {
    font-size: 24px;
  }
}
/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Regular Body Text Standard
Purpose:
- Keeps normal page copy black across the site.
- Keeps normal copy at one shared 16px size.
- Justifies paragraph text site-wide.
- Does not target headings, titles, navigation, buttons, badges, or dark-card text.
--------------------------------------------------------------*/
main p {
  color: var(--body-text-color) !important;
  font-size: var(--body-text-size) !important;
  text-align: justify !important;
}

main :where(
  p,
  .tab-content,
  .job-meta-item,
  .team .member span,
  .footer-contact span
) {
  color: var(--body-text-color);
  font-size: var(--body-text-size);
  text-align: justify;
}

main :where(
  .services .card p,
  .about .content p,
  .about .content ul p,
  .call-to-action p,
  .insights-cards-section .slide p,
  .testimonials .tab-content,
  .testimonials .info-card .info-card-body p,
  .faq .faq-container .faq-item .faq-content p,
  .team .member p,
  .service-details p,
  .career-page .career-intro p,
  .career-page .job-skills p,
  .career-page .job-description p,
  .contact-page .contact .info-item p,
  .event-box p,
  .get-a-quote .site-email-form p
) {
  color: var(--body-text-color);
  font-size: var(--body-text-size);
  text-align: justify;
}

/* Preserve intentional white text on dark/colored design blocks. */
main :where(
  .dark-background p,
  .about-brochure-content p,
  .footer-bottom p
) {
  color: #ffffff !important;
}

/* Homepage hero sentence stays white on its dark image panel. */
body.index-page .hero p {
  color: #ffffff !important;
}

/*--------------------------------------------------------------
# Service Detail Pages - shared Bootstrap layout polish
Change notes:
- Keeps all pages inside /Services using the same spacing and sidebar behavior.
- Adds enough top spacing below the fixed header for pages without a template banner.
- Uses Bootstrap-friendly selectors only, so the existing HTML content remains intact.
--------------------------------------------------------------*/
.service-detail-page {
  position: relative;
  padding: 72px 0;
  background-color: #ffffff;
}

/* Services content background:
   Keep all six service detail sections clean and white. Page-specific legacy
   rules previously added image or gradient backgrounds behind readable text;
   this scoped override removes them without changing the banner carousel. */
.service-page .service-detail-page {
  background: #ffffff !important;
}

/* Prevent legacy page-level artwork and overlays from showing through the
   service content area. The banner carousel above remains unchanged. */
.service-page main.main,
.service-page main.main > .service-detail-page {
  background: #ffffff !important;
}

.service-page main.main::before,
.service-page main.main::after,
.service-page .service-detail-page::before,
.service-page .service-detail-page::after {
  background-image: none !important;
}

main > .service-detail-page:first-child {
  padding-top: 128px;
}

.cad-product-design-banner {
  margin-top: 82px;
  background: #f7f9fc;
}

.cad-product-design-banner img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}

.service-detail-page .container {
  max-width: 1180px;
}

.service-detail-page .main-title,
.service-detail-page .cad-title,
.service-detail-page .cae-main-title,
.service-detail-page .section-title {
  color: var(--heading-color);
  letter-spacing: 0;
}

.service-detail-page .page-desc,
.service-detail-page .cad-desc,
.service-detail-page .cae-desc,
.service-detail-page .staff-content p {
  color: #111111;
  font-size: var(--body-text-size);
  line-height: 1.8;
}

.service-detail-page .service-list li,
.service-detail-page .icon-list li,
.service-detail-page .check-list li,
.service-detail-page .staff-content p {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.service-detail-page .service-list i,
.service-detail-page .icon-list i,
.service-detail-page .check-list i,
.service-detail-page .staff-content i {
  color: var(--accent-color);
  flex: 0 0 auto;
  margin-top: 4px;
}

/* Service detail sidebar: normal page flow, not sticky while scrolling. */
.service-detail-page .service-sidebar {
  position: static;
}

.service-detail-page .service-link {
  min-height: auto;
  padding: 20px 24px;
  border-radius: 8px;
  border: 1px solid rgba(11, 45, 117, 0.12);
  background: #f5f7fb;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

.service-detail-page .service-link + .service-link {
  margin-top: 12px;
}

.service-detail-page .service-link.active,
.service-detail-page .service-link:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

.service-detail-page .industry-section {
  padding: 24px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(11, 45, 117, 0.1);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.service-detail-page .industry-list a {
  border-radius: 6px;
}

@media (max-width: 991px) {
  main > .service-detail-page:first-child {
    padding-top: 110px;
  }

  .cad-product-design-banner {
    margin-top: 72px;
  }

  .service-detail-page .service-sidebar {
    position: static;
  }
}

@media (max-width: 575px) {
  .service-detail-page {
    padding: 44px 0;
  }

  main > .service-detail-page:first-child {
    padding-top: 96px;
  }

  .service-detail-page .service-link {
    padding: 16px 18px;
    font-size: 15px;
  }
}

/*--------------------------------------------------------------
# Industry Detail Pages - shared Bootstrap layout polish
Change notes:
- Gives Industry Verticals pages the same spacing, typography, and right-column style as service pages.
- Keeps the industry sidebar in normal page flow, so it does not stick while scrolling.
- Uses existing uploaded industry/banner images and Bootstrap grid classes for responsiveness.
- Centers Industry detail pages in one responsive page frame to match the reference layout.
--------------------------------------------------------------*/
.industry-detail-page {
  position: relative;
  padding: 82px 0 92px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    url("../img/cta-bg.jpg") center center / cover no-repeat;
}

.industry-hero {
  margin-top: 82px;
  background: #e6e6e6;
}

.industry-hero img {
  width: 100%;
  height: 432px;
  object-fit: cover;
}

.industry-detail-page .container {
  max-width: 1460px;
}

/* Industry page frame: keeps the fixed header, banner, and body content aligned. */
.industry-frame-page {
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88));
}

.industry-frame-page .header {
  width: min(100% - 32px, 1460px);
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.industry-frame-page .header .container-xl {
  max-width: 100%;
}

.industry-frame-page .industry-hero {
  width: min(100% - 32px, 1460px);
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
}

.industry-frame-page .industry-detail-page {
  padding: 0 16px 72px;
  background: transparent;
}

.industry-frame-page .industry-detail-page > .container {
  width: 100%;
  padding: 54px 64px 68px;
  background: rgba(255, 255, 255, 0.86);
}

.industry-main-image {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  border-radius: 0;
  margin-bottom: 44px;
  box-shadow: none;
}

/* Industry image/text split: used when a page needs the visual on the left and content on the right. */
.industry-media-text {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: 34px;
  align-items: center;
}

.industry-media-panel {
  position: relative;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(11, 45, 117, 0.1);
  border-radius: 8px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.1);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.industry-media-panel::before {
  content: "";
  position: absolute;
  inset: 18px -12px -12px 18px;
  z-index: -1;
  border: 3px solid var(--accent-color);
  border-radius: 8px;
}

.industry-media-panel:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.14);
}

.industry-media-panel .industry-main-image {
  max-height: 520px;
  margin-bottom: 0;
  object-fit: contain;
}

.industry-copy-panel {
  min-width: 0;
}

.industry-page-title {
  display: inline-block;
  padding: 6px 12px 8px;
  margin-bottom: 6px;
  color: #0b2d75;
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
}

.industry-detail-page .title-line {
  width: 62px;
  height: 2px;
  margin: 0 0 48px;
  background: linear-gradient(to right, var(--accent-color) 50%, #252a67 50%);
}

.industry-content-text p {
  color: #111111;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 18px;
  text-align: justify;
}

.industry-sidebar {
  padding: 0;
  margin-top: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.industry-sidebar .industry-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.industry-sidebar .industry-list a {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 16px 26px;
  margin: 0;
  color: #111111;
  background: rgba(245, 245, 245, 0.92);
  border-radius: 0;
  border: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
}

.industry-sidebar .industry-list a.active,
.industry-sidebar .industry-list a:hover {
  background: #252a67;
  color: #ffffff;
}

/* Rich Industry content: supports service cards used by Industrial Machineries page. */
.industry-detail-page .service-main-title,
.industry-detail-page .analysis-title {
  margin: 46px 0 22px;
  color: var(--heading-color);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0;
}

.industry-detail-page .service-heading,
.industry-detail-page .sub-heading {
  margin: 28px 0 18px;
  color: #252a67;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
}

.industry-detail-page .service-block {
  margin-top: 28px;
  padding: 24px;
  background: rgba(245, 247, 251, 0.86);
  border: 1px solid rgba(11, 45, 117, 0.1);
  border-radius: 8px;
}

.industry-detail-page .service-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-height: 48px;
  margin-bottom: 12px;
  padding: 12px 14px;
  color: #111111;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
}

/* Orange check bullets used in industry/service offering cards. */
.industry-detail-page .service-card i,
.industry-detail-page .service-card i.bi-check-circle-fill {
  flex: 0 0 auto;
  margin-top: 4px;
  color: var(--accent-color);
}

.industry-detail-page .service-card span,
.industry-detail-page .nested-list {
  font-size: 17px;
  line-height: 1.55;
}

.industry-detail-page .nested-list {
  margin: 10px 0 0;
  padding-left: 20px;
}

/* Industrial Machineries final override: keeps the page as open rows after shared card styles load. */
.industrial-machineries-page .service-block {
  padding: 0;
  margin-top: 34px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.industrial-machineries-page .service-block .row,
.industrial-machineries-page .analysis-title + .row {
  --bs-gutter-x: 34px;
  --bs-gutter-y: 8px;
}

.industrial-machineries-page .service-card {
  min-height: auto;
  padding: 0;
  margin-bottom: 20px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.industrial-machineries-page .service-card i,
.industrial-machineries-page .service-card i.bi-check-circle-fill {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  color: #ffffff;
  background: #252a67;
  border-radius: 50%;
  font-size: 15px;
}

.industrial-machineries-page .service-card span,
.industrial-machineries-page .nested-list {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.65;
}

@media (max-width: 991px) {
  .industry-hero {
    margin-top: 72px;
  }

  .industry-detail-page {
    padding: 56px 0;
  }

  .industry-hero img {
    height: 300px;
  }

  .industry-frame-page .industry-detail-page {
    padding-bottom: 56px;
  }

  .industry-frame-page .industry-detail-page > .container {
    padding: 48px 28px 56px;
  }

  .industry-media-text {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .industry-media-panel {
    max-width: 620px;
  }

  .industry-page-title {
    font-size: 38px;
  }

  .industry-content-text p,
  .industry-sidebar .industry-list a {
    font-size: 18px;
  }

  .industry-detail-page .service-main-title,
  .industry-detail-page .analysis-title {
    font-size: 26px;
  }

  .industry-detail-page .service-heading,
  .industry-detail-page .sub-heading {
    font-size: 22px;
  }

  .industrial-machineries-page .service-card span,
  .industrial-machineries-page .nested-list {
    font-size: 17px;
  }

  .industry-sidebar .industry-list {
    gap: 16px;
  }
}

@media (max-width: 575px) {
  .industry-detail-page {
    padding: 42px 0;
  }

  .industry-frame-page .industry-hero {
    width: 100%;
  }

  .industry-frame-page .header {
    width: 100%;
  }

  .industry-frame-page .industry-detail-page {
    padding: 0 0 42px;
  }

  .industry-frame-page .industry-detail-page > .container {
    padding: 34px 18px 42px;
  }

  .industry-hero img,
  .industry-main-image {
    max-height: 260px;
  }

  .industry-media-panel {
    padding: 10px;
  }

  .industry-media-panel::before {
    inset: 12px -7px -7px 12px;
    border-width: 2px;
  }

  .industry-hero img {
    height: 220px;
  }

  .industry-page-title {
    font-size: 34px;
  }

  .industry-detail-page .service-block {
    padding: 18px;
  }

  .industrial-machineries-page .service-block {
    padding: 0;
  }

  .industry-detail-page .service-card span,
  .industry-detail-page .nested-list {
    font-size: 15px;
  }

  .industrial-machineries-page .service-card {
    margin-bottom: 14px;
  }

  .industry-sidebar .industry-list a {
    min-height: auto;
    padding: 16px 18px;
  }
}
/*--------------------------------------------------------------
# Case Study Pages
Purpose:
- Styles only pages inside /Case Studies through the body class.
- Keeps Case Studies navigation separate from Industry Verticals navigation.
- Gives project lists, galleries, and contact callouts a consistent responsive layout.
- Does not hide, shorten, replace, or remove project wording or gallery data.
--------------------------------------------------------------*/

/* Page shell: lets the wide reference-style gallery use the available screen
   width while normal text content remains inside the centered content panel. */
.case-study-page {
  background: #ffffff;
}

.case-study-page .main {
  overflow: visible;
}

/* Main content panel: provides consistent spacing for every case-study page. */
.case-study-page .main > section:not(.industry-hero) {
  width: min(100% - 32px, 1460px);
  margin: 0 auto;
  padding: 54px 64px 70px;
  background: rgba(255, 255, 255, 0.92);
}

/* Primary page and gallery headings. */
.case-study-page h2,
.case-study-page .main-title,
.case-study-page .gallery-title {
  color: var(--heading-color);
  font-size: clamp(30px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
}

/* Section headings use the brand orange for quick visual scanning. */
.case-study-page .section-title {
  color: var(--accent-color);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 22px;
}

/* Supporting headings remain dark so they do not compete with section titles. */
.case-study-page .sub-title {
  color: #111111;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.35;
  margin: 30px 0 18px;
}

/* Shared list colors. This applies to both newer .case-list markup and the
   original Automotive .project-list markup without changing list wording. */
.case-study-page .case-list,
.case-study-page .project-list,
.case-study-page .list-item {
  color: #111111;
}

.case-study-page .case-list,
.case-study-page .project-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.case-study-page .case-list li,
.case-study-page .project-list li,
.case-study-page .list-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.7;
}

/* Automotive plain list items receive the same check icon treatment as lists
   that already include a Font Awesome icon in their HTML. */
.case-study-page .project-list li:not(.list-item)::before {
  content: "\f058";
  flex: 0 0 auto;
  margin-top: 5px;
  color: var(--accent-color);
  font-family: "Font Awesome 6 Free";
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.case-study-page .case-list i,
.case-study-page .project-list i,
.case-study-page .list-item i {
  flex: 0 0 auto;
  margin-top: 5px;
  color: var(--accent-color);
  font-size: 18px;
}

/* Short orange/blue line used beneath case-study headings. */
.case-study-page .heading-line,
.case-study-page .title-line {
  width: 62px;
  height: 3px;
  margin: 0 0 34px;
  background: linear-gradient(to right, var(--accent-color) 0 62%, #252a67 62% 100%);
}

/* Gallery card: square border box matching the supplied reference screenshot.
   object-fit: contain keeps every original engineering image fully visible. */
.case-study-page .gallery-card {
  display: flex;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  padding: 10px;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--accent-color);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

/* Restrained interaction feedback; no image content is changed or replaced. */
.case-study-page .gallery-card:hover,
.case-study-page .gallery-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent-color);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.case-study-page .gallery-card:focus-visible {
  outline: 3px solid rgba(255, 122, 36, 0.28);
  outline-offset: 3px;
}

.case-study-page .gallery-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.28s ease;
}

.case-study-page .gallery-card:hover img,
.case-study-page .gallery-card:focus-visible img {
  transform: scale(1.04);
}

/* Reference-style case-study gallery:
   six square cards on desktop, three on tablet, and two on mobile.
   The JavaScript catalog supplies every filename already listed for the page. */
.case-study-page .case-study-gallery {
  width: min(calc(100vw - 76px), 1800px);
  max-width: none;
  margin-top: 8px;
  margin-right: 0;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Lightbox caption appears only after an original gallery image is opened. */
.glightbox-container .gslide-description {
  background: rgba(16, 18, 27, 0.94);
  text-align: center;
}

.glightbox-container .gslide-title {
  margin: 0;
  padding: 7px 14px 8px;
  color: #ffffff;
  font-family: var(--heading-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

/*--------------------------------------------------------------
# Page-Specific CSS Scope Registry
# Service, Industry, and Case Study templates use descriptive body classes.
# These shared tokens keep page families consistent and provide a clean place
# for future page-specific rules without leaking into unrelated templates.
--------------------------------------------------------------*/
.service-page,
.case-study-page,
.industry-page {
  --page-card-radius: 10px;
  --page-card-border: rgba(11, 45, 117, 0.12);
  --page-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}

.cad-service-page .main,
.cae-service-page .main,
.manufacturing-service-page .main,
.prototyping-page .main,
.reverse-engineering-page .main,
.staff-augmentation-page .main {
  background-color: #ffffff;
}

.case-study-page .contact-banner {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  margin-top: 48px;
  padding: 24px 28px;
  color: #ffffff;
  background: #252a67;
  border-radius: 8px;
}

.case-study-page .contact-banner h3 {
  margin: 0;
  color: #ffffff;
  font-size: 22px;
}

.case-study-page .contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  color: #ffffff;
  background: var(--accent-color);
  border-radius: 6px;
  font-weight: 700;
  white-space: nowrap;
}

.case-study-page .contact-btn:hover {
  color: #ffffff;
  background: #e86413;
}

@media (max-width: 991px) {
  /* Tablet content spacing and a three-column Bootstrap gallery. */
  .case-study-page .main > section:not(.industry-hero) {
    padding: 44px 28px 56px;
  }

  .case-study-page .case-study-gallery {
    width: calc(100vw - 40px);
  }

}

@media (max-width: 575px) {
  /* Mobile spacing and two-column square gallery cards. */
  .case-study-page .main > section:not(.industry-hero) {
    width: 100%;
    padding: 34px 18px 44px;
  }

  .case-study-page .case-list li,
  .case-study-page .project-list li,
  .case-study-page .list-item {
    font-size: 15px;
  }

  .case-study-page .gallery-card {
    padding: 7px;
  }

  .case-study-page .case-study-gallery {
    width: calc(100vw - 24px);
  }

  .case-study-page .contact-banner {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }

  .case-study-page .contact-btn {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Professional Site Shell
# Final site-wide polish: centers every page in one clean container,
# normalizes typography, and keeps spacing consistent across templates.
--------------------------------------------------------------*/
:root {
  --site-shell-width: 1560px;
  --site-gutter: clamp(16px, 3vw, 48px);
  --site-section-space: clamp(46px, 5vw, 82px);
  --body-text-size: 16px;
}

html {
  font-size: 16px;
}

body {
  color: #111111;
  background:
    linear-gradient(90deg, #eef2f7 0, #ffffff 11%, #ffffff 89%, #eef2f7 100%);
  font-family: var(--default-font);
  font-size: var(--body-text-size);
  line-height: 1.72;
}

body,
p,
li,
a,
button,
input,
textarea,
select {
  letter-spacing: 0;
}

p {
  max-width: 76ch;
  color: #111111;
  font-size: var(--body-text-size);
  line-height: 1.76;
  text-align: left;
}

li {
  font-size: var(--body-text-size);
  line-height: 1.68;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-weight: 800;
  line-height: 1.2;
}

h1,
.page-title h1,
.industry-page-title,
.main-title {
  font-size: clamp(32px, 3vw, 46px);
}

h2,
.section-title h2 {
  font-size: clamp(28px, 2.4vw, 38px);
}

h3 {
  font-size: clamp(23px, 2vw, 30px);
}

h4 {
  font-size: clamp(19px, 1.55vw, 24px);
}

/* One-site container:
   Header, main content, and footer share the same max-width so every page
   feels aligned and professional without wrapping every HTML file manually.
*/
.header,
.main,
.footer {
  width: min(100%, var(--site-shell-width));
  margin-right: auto;
  margin-left: auto;
}

.header {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.header > .container,
.header > .container-fluid,
.header > .container-xl {
  max-width: var(--site-shell-width);
  padding-right: var(--site-gutter);
  padding-left: var(--site-gutter);
}

.main {
  background: #ffffff;
  box-shadow: 0 18px 55px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.footer {
  background: #ffffff;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.06);
}

.main > section,
.main > .section,
.main > .page-title {
  width: 100%;
}

section,
.section {
  padding-top: var(--site-section-space);
  padding-bottom: var(--site-section-space);
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  padding-right: var(--site-gutter);
  padding-left: var(--site-gutter);
}

@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1240px;
  }

  .navmenu a,
  .navmenu a:focus {
    font-size: 15px;
    padding-right: 13px;
    padding-left: 13px;
  }
}

@media (min-width: 1600px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1320px;
  }
}

@media (max-width: 1199px) {
  body {
    background: #ffffff;
  }

  .header,
  .main,
  .footer {
    width: 100%;
  }

  .header {
    left: 0;
    transform: none;
  }
}

@media (max-width: 767px) {
  :root {
    --site-gutter: 18px;
    --site-section-space: 44px;
    --body-text-size: 15px;
  }

  body {
    line-height: 1.66;
  }

  p,
  li {
    line-height: 1.68;
  }

  h1,
  .page-title h1,
  .industry-page-title,
  .main-title {
    font-size: 30px;
  }

  h2,
  .section-title h2 {
    font-size: 26px;
  }
}

/*--------------------------------------------------------------
# Site-Wide Spacing Cleanup
Purpose:
- The global `section` rule above is useful for normal text/card sections, but
  it also added padding to full-width hero and banner image sections.
- These first-screen media sections should touch the fixed header cleanly and
  should not create blank white/gray bands above or below images.
- This removes the visible service-page gap above/below the CAD carousel banner
  and applies the same cleanup to About, Gallery, Career, Contact, and Industry.
- Normal content sections keep a smaller, consistent vertical rhythm.
--------------------------------------------------------------*/
:root {
  --fixed-header-offset: 100px;
  --site-section-space: clamp(34px, 4vw, 58px);
}

.hero,
.career-page .career-banner,
.about-page .career-banner,
.gallery-banner,
.contact-page .contact-banner,
.contact-page .news-events-banner,
.cad-product-design-banner,
.industry-hero {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.hero,
.career-page .career-banner,
.about-page .career-banner,
.gallery-banner,
.contact-page .contact-banner,
.contact-page .news-events-banner,
.cad-product-design-banner,
.industry-hero {
  margin-top: var(--fixed-header-offset) !important;
}

.hero {
  min-height: calc(100vh - var(--fixed-header-offset));
  display: flex;
  align-items: center;
}

/*
 * Homepage mobile CTA safety:
 * The desktop hero uses one viewport height, but stacked mobile artwork and
 * copy need natural height. Extra bottom space keeps "Read More" fully visible.
 */
@media (max-width: 991px) {
  .index-page .hero {
    min-height: auto;
    padding-bottom: 36px !important;
    overflow: visible;
    align-items: stretch;
  }

  .index-page .hero p {
    margin-bottom: 0;
  }

  .index-page .hero .btn-primary {
    margin-top: 22px;
    align-self: flex-start;
  }
}

.cad-product-design-banner,
.industry-hero {
  background: #ffffff;
}

.career-page .career-banner img,
.about-page .career-banner img,
.gallery-banner img,
.contact-page .contact-banner img,
.contact-page .news-events-banner img,
.cad-product-design-banner img,
.industry-hero img {
  display: block;
  width: 100%;
}

.cad-product-design-content.service-detail-page {
  padding-top: 42px;
}

.service-info-section {
  margin-top: 42px;
}

@media (max-width: 1199px) {
  :root {
    --fixed-header-offset: 82px;
  }
}

@media (max-width: 575px) {
  :root {
    --fixed-header-offset: 72px;
    --site-section-space: 36px;
  }

  .cad-product-design-content.service-detail-page {
    padding-top: 34px;
  }
}

/*--------------------------------------------------------------
# Industry And Case Study Banners
The nine shared banner files use a 1898:675 aspect ratio. Preserve that ratio
instead of forcing a fixed mobile height, which cropped headings and artwork.
This final rule intentionally overrides earlier template-specific hero sizes.
--------------------------------------------------------------*/
.industry-page .industry-hero,
.case-study-page .industry-hero {
  aspect-ratio: 1898 / 675;
  min-height: 0;
  background: #ffffff;
}

.industry-page .industry-hero img,
.case-study-page .industry-hero img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 575px) {
  .industry-page .industry-hero,
  .case-study-page .industry-hero {
    /*
     * Use the full screen width on phones so the complete wide banner remains
     * legible without horizontal overflow or artificial side cropping.
     */
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }
}

/*--------------------------------------------------------------
# Industry And Case Study Mobile Safety
Desktop case-study galleries intentionally break out toward the viewport edge.
On phones, keep every row, heading, and gallery inside the screen and show
content immediately if the optional scroll-animation script loads slowly.
--------------------------------------------------------------*/
@media (max-width: 767px) {
  /*
   * Fixed headers and Bootstrap footer rows previously extended one gutter
   * beyond the viewport. Keep both shells inside the device width so mobile
   * browsers never show a horizontal scrollbar.
   */
  .header {
    right: 0;
    left: 0;
    width: auto !important;
    max-width: 100%;
  }

  .header > .container,
  .header > .container-fluid,
  .header > .container-xl,
  .footer .row {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  .industry-page,
  .case-study-page {
    overflow-x: hidden;
  }

  .case-study-page .main {
    overflow: hidden;
  }

  .case-study-page .main > section:not(.industry-hero) {
    max-width: 100%;
    box-sizing: border-box;
  }

  .case-study-page .main-title,
  .case-study-page .section-title,
  .case-study-page .sub-title,
  .case-study-page .gallery-title {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .case-study-page .main > section:not(.industry-hero) > .row,
  .case-study-page .case-study-gallery {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    transform: none;
  }

  .industry-page [data-aos],
  .case-study-page [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/*--------------------------------------------------------------
# Compact Site Spacing And Home Insight Cards
# Reduces empty vertical space on every page so the site needs less scrolling.
# Full-width hero/banner images remain flush with the fixed header.
# The News and Events card uses a horizontal image instead of a circle.
--------------------------------------------------------------*/
:root {
  --site-section-space: clamp(24px, 2.5vw, 38px);
}

section,
.section {
  padding-top: var(--site-section-space) !important;
  padding-bottom: var(--site-section-space) !important;
}

.hero,
.career-page .career-banner,
.about-page .career-banner,
.gallery-banner,
.contact-page .contact-banner,
.contact-page .news-events-banner,
.cad-product-design-banner,
.industry-hero {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.insights-cards-section .info-card {
  min-height: 460px;
  padding: 24px;
}

.insights-cards-section .card-title {
  margin-bottom: 16px;
}

.insights-cards-section .card-slider {
  min-height: 250px;
}

.insights-cards-section .testimonial-slider p {
  padding: 22px;
}

.insights-cards-section .news-slider .slide img {
  width: 100%;
  max-width: 320px;
  height: 135px;
  padding: 0;
  border-radius: 12px;
  object-fit: contain;
  margin-bottom: 16px;
}

.insights-cards-section .slide h4 {
  margin-top: 16px;
}

.insights-cards-section .dots {
  margin: 16px 0;
}

@media (max-width: 767px) {
  :root {
    --site-section-space: 22px;
  }

  .insights-cards-section .info-card {
    min-height: 430px;
    padding: 20px;
  }

  .insights-cards-section .news-slider .slide img {
    width: 100%;
    max-width: 320px;
    height: 125px;
    padding: 0;
    border-radius: 10px;
  }
}

/*==============================================================
# Professional News And Events Cards
# Used by Gallery/newsevent.html.
# Creates equal-height cards, consistent image frames, responsive spacing,
# and branded text-only cards for news entries without an image.
==============================================================*/

/* Main section: provides a clean background and compact page spacing. */
.news-events-section {
  padding: 70px 0 !important;
  background: #ffffff;
}

/* Section heading: separates the page banner from the card collection. */
.news-title {
  margin-bottom: 50px;
}

.news-title span {
  display: inline-block;
  color: #ff7a24;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.news-title h2 {
  color: #101b5f;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 900;
  margin: 0;
}

/*==============================================================
# Clean Professional News Card Effect
# The card lifts gently, gains a premium shadow, and reveals one orange
# left accent line on hover. No looping or repeated animation is used.
==============================================================*/

/* Main card: neutral default state with equal height inside Bootstrap rows. */
.news-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(11, 45, 117, 0.1);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
  transition:
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

/* Orange accent line: hidden vertically until the card is hovered. */
.news-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 5px;
  height: 0;
  background: #ff7a24;
  transition: height 0.35s ease;
}

/* Hover state: small lift, warmer border, and stronger shadow. */
.news-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 122, 36, 0.25);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
}

/* Reveal the full orange accent line once per hover interaction. */
.news-card:hover::before {
  height: 100%;
}

/* Image frame: keeps every event logo or image at one consistent height. */
.news-img-box {
  display: flex;
  height: 220px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f8f9fc;
}

/* Image fit: preserves proportions and gives logos comfortable breathing room. */
.news-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
}

/* Content area: applies the same internal spacing to every card. */
.news-content {
  padding: 25px;
}

/* Card heading: deep blue by default with a smooth hover color change. */
.news-content h3 {
  color: #0b2d75;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 14px;
  transition: color 0.3s ease;
}

/* Heading hover: changes only the active card title to brand orange. */
.news-card:hover .news-content h3 {
  color: #ff7a24;
}

/* Card paragraph: compact professional body copy with left alignment. */
.news-content p {
  color: #444444;
  font-size: 15.5px;
  line-height: 1.75;
  margin-bottom: 0;
  text-align: left;
}

/* Text-only card: centers its content on a branded blue gradient. */
.news-card.no-image {
  display: flex;
  min-height: 260px;
  align-items: center;
  background: linear-gradient(135deg, #a5b5d8, #622a2500);
}

/* Text-only card typography stays white on the dark gradient. */
.news-card.no-image .news-content h3,
.news-card.no-image .news-content p {
  color: #ffffff;
}

/* Tablet: reduce section spacing while keeping the two-column card design. */
@media (max-width: 991px) {
  .news-events-section {
    padding: 55px 0 !important;
  }
}

/* Mobile: reduce image, text, and section spacing for smaller screens. */
@media (max-width: 767px) {
  .news-events-section {
    padding: 40px 0 !important;
  }

  .news-title {
    margin-bottom: 32px;
  }

  .news-img-box {
    height: 180px;
  }

  .news-content {
    padding: 20px;
  }

  .news-content h3 {
    font-size: 18px;
  }

  .news-content p {
    font-size: 14px;
  }
}

/*==============================================================
# Prototyping Service Page
# Scoped to body.prototyping-page so the gallery design does not change
# other Services, Industry, Gallery, or Case Study pages.
# Every gallery link opens the original image through the existing GLightbox.
==============================================================*/

/* Service content uses the same clean background as other detail pages. */
.prototyping-page .prototyping-service-section {
  background: #ffffff;
}

.prototyping-page .prototyping-intro {
  margin-bottom: 28px;
}

/* Small orange label introduces the service without competing with the title. */
.prototyping-page .service-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

.prototyping-page .prototyping-intro .page-desc {
  max-width: 68ch;
  margin: 18px 0 0;
}

/* Featured image: a wide professional preview with a visible click instruction. */
.prototyping-page .prototyping-feature-image {
  position: relative;
  display: block;
  height: 390px;
  margin-bottom: 34px;
  overflow: hidden;
  border: 1px solid rgba(11, 45, 117, 0.12);
  border-radius: 14px;
  background: #eef2f8;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
}

.prototyping-page .prototyping-feature-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.prototyping-page .prototyping-feature-image span {
  position: absolute;
  right: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 7px;
  color: #ffffff;
  background: rgba(11, 45, 117, 0.92);
  font-size: 14px;
  font-weight: 700;
}

.prototyping-page .prototyping-feature-image:hover img {
  transform: scale(1.025);
}

/* Each industry group is a separate content card for easy scanning. */
.prototyping-page .prototype-category {
  padding: 24px !important;
  margin-bottom: 24px;
  border: 1px solid rgba(11, 45, 117, 0.1);
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.prototyping-page .prototype-category-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.prototyping-page .prototype-category-heading > .row {
  width: 100%;
}

.prototyping-page .prototype-category .row > div {
  flex: 0 0 33.333333%;
  width: 33.333333%;
}

.prototyping-page .prototype-category-heading span {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #ffffff;
  background: var(--accent-color);
  font-size: 13px;
  font-weight: 800;
}

.prototyping-page .prototype-category-heading h2 {
  margin: 0;
  color: var(--heading-color);
  font-size: 22px;
}

/* Thumbnail card: uniform size, clear zoom affordance, and no image cropping. */
.prototyping-page .prototype-image-card {
  position: relative;
  display: block;
  height: 190px;
  overflow: hidden;
  border: 1px solid rgba(11, 45, 117, 0.1);
  border-radius: 10px;
  background: #f4f6fa;
  cursor: zoom-in;
}

.prototyping-page .prototype-image-card::after {
  content: "\F14D";
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(11, 45, 117, 0.88);
  font-family: "bootstrap-icons";
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.prototyping-page .prototype-image-card img {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  object-fit: contain;
  transition: transform 0.35s ease;
}

.prototyping-page .prototype-image-card:hover {
  border-color: rgba(247, 147, 30, 0.55);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
}

.prototyping-page .prototype-image-card:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.prototyping-page .prototype-image-card:hover img {
  transform: scale(1.04);
}

/* Sidebar remains in normal page flow and uses the shared service-link design. */
.prototyping-page .service-sidebar,
.prototyping-page .industry-section {
  position: static;
}

@media (max-width: 991px) {
  .prototyping-page .prototyping-feature-image {
    height: 330px;
  }
}

@media (max-width: 575px) {
  .prototyping-page .prototype-category .row > div {
    flex-basis: 100%;
    width: 100%;
  }

  .prototyping-page .prototyping-feature-image {
    height: 240px;
    margin-bottom: 24px;
  }

  .prototyping-page .prototyping-feature-image span {
    right: 12px;
    bottom: 12px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .prototyping-page .prototype-category {
    padding: 18px !important;
  }

  .prototyping-page .prototype-image-card {
    height: 180px;
  }
}

/*--------------------------------------------------------------
# Final Social Panel Responsive Guard
The floating profile panel belongs on wide screens. On tablets and phones the
same five official links remain available in the footer, leaving header space
for the company logo and menu button.
--------------------------------------------------------------*/
@media (min-width: 1200px) {
  .header .floating-socials {
    position: fixed;
    top: 96px;
    right: 18px;
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 1199px) {
  .header .floating-socials {
    display: none !important;
  }

  /* Reserve the right side of the compact header for the mobile menu control. */
  .header .navmenu {
    display: flex !important;
    order: 3;
    margin-left: auto;
  }

  .header .mobile-nav-toggle {
    display: inline-flex !important;
    visibility: visible;
    opacity: 1;
    position: fixed;
    top: 19px;
    right: 18px;
    margin: 0;
    font-size: 0;
  }

  /* CSS-drawn bars keep the menu visible even if the icon font is delayed. */
  .header .mobile-nav-toggle::before {
    content: "";
    width: 22px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -7px currentColor, 0 7px currentColor;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  .mobile-nav-active .header .mobile-nav-toggle::before {
    box-shadow: none;
    transform: rotate(45deg);
  }

  .mobile-nav-active .header .mobile-nav-toggle::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 2px;
    background: currentColor;
    transform: rotate(-45deg);
  }
}