/**----------------------------------------
  Custom overrides — N. R. Pawar & Associates
  Loaded after main.css. Keeps firm-specific
  layout/style changes isolated from the
  theme file so the theme stays upgradeable.
----------------------------------------*/

/* ---------- 1. Icon badges: calmer, more corporate ---------- */
/* Used by Services cards, Industries (legacy), and Core Values boxes */
.pxn_service_item .service_icon,
.pxn_feature_box .feature_icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background-color: rgba(20, 88, 135, 0.08);
  color: var(--pxn-color-theme-secondary);
  font-size: 30px;
}
.pxn_service_item .service_icon svg,
.pxn_feature_box .feature_icon svg {
  max-width: 28px;
}
.pxn_service_item:hover .service_icon,
.pxn_feature_box:hover .feature_icon {
  background-color: var(--pxn-color-theme-secondary);
  color: var(--pxn-color-theme-primary);
  transform: translateY(-3px);
}
.pxn_service_item .service_no {
  color: rgba(20, 88, 135, 0.08);
}

/* ---------- 1b. Hero: more breathing room, especially on mobile ---------- */
.pxn-h2_hero_wrapper .hero_content {
  padding-bottom: 90px;
}
.pxn-h2_hero_wrapper .hero_content .hero_title {
  line-height: 1.3;
}
.pxn-h2_hero_wrapper .hero_content .hero_subtitle {
  margin-top: 14px;
  font-family: var(--pxn-ff-heading);
  font-weight: var(--pxn-fw-sbold);
  font-size: 22px;
  color: var(--pxn-color-common-white);
}
.pxn-h2_hero_wrapper .hero_content .hero_tagline {
  margin-top: 8px;
  font-family: var(--pxn-ff-heading);
  font-weight: var(--pxn-fw-medium);
  font-size: 17px;
  color: var(--pxn-color-theme-primary);
}
.pxn-h2_hero_wrapper .hero_content .hero_desc {
  margin-top: 26px;
  line-height: 1.7;
}
.pxn-h2_hero_wrapper .hero_content .hero_buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin-top: 34px;
}
.pxn-h2_hero_wrapper .hero_content .hero_btn_secondary {
  color: var(--pxn-color-common-white);
}
.pxn-h2_hero_wrapper .hero_content .hero_btn_secondary:hover,
.pxn-h2_hero_wrapper .hero_content .hero_btn_secondary:focus {
  color: var(--pxn-color-theme-primary);
}
@media (max-width: 575px) {
  .pxn-h2_hero_wrapper .hero_content .hero_subtitle {
    font-size: 18px;
  }
  .pxn-h2_hero_wrapper .hero_content .hero_tagline {
    font-size: 15px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pxn-h2_hero_wrapper .hero_content {
    padding-top: 170px;
    padding-bottom: 80px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pxn-h2_hero_wrapper .hero_content {
    padding-top: 160px;
    padding-bottom: 70px;
  }
  .pxn-h2_hero_wrapper .hero_content .hero_desc {
    margin-top: 22px;
  }
}
@media (max-width: 575px) {
  .pxn-h2_hero_wrapper .hero_content .hero_title {
    font-size: 40px;
  }
}

/* ---------- 2. Services section: editorial "bento" grid ---------- */
.pxn-h2_services.services-grid-featured {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pxn-h2_services.services-grid-featured .pxn_service_item.is-lead {
  grid-column: span 2;
  background: linear-gradient(135deg, #145887 0%, #1D6FA3 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pxn-h2_services.services-grid-featured .pxn_service_item.is-lead .service_icon {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--pxn-color-theme-primary);
}
.pxn-h2_services.services-grid-featured .pxn_service_item.is-lead:hover .service_icon {
  background-color: var(--pxn-color-theme-primary);
  color: var(--pxn-color-theme-secondary);
}
.pxn-h2_services.services-grid-featured .pxn_service_item.is-lead .service_title,
.pxn-h2_services.services-grid-featured .pxn_service_item.is-lead .service_title a {
  color: var(--pxn-color-common-white);
}
.pxn-h2_services.services-grid-featured .pxn_service_item.is-lead .service_excerpt {
  color: rgba(255, 255, 255, 0.72);
}
.pxn-h2_services.services-grid-featured .pxn_service_item.is-lead .service_no {
  color: rgba(255, 255, 255, 0.14);
}
@media (max-width: 575px) {
  .pxn-h2_services.services-grid-featured .pxn_service_item.is-lead {
    grid-column: auto;
  }
}
.pxn_service_item .service_excerpt.pxn-service-line {
  font-size: 15px;
  margin-top: 10px;
}

/* ---------- 2b. Services: swipeable slider on small screens ---------- */
.pxn_services_slider_wrap {
  position: relative;
}
.pxn_services_slider .swiper-slide {
  height: auto;
  padding: 30px 25px;
}
.pxn_services_slider_nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}
.pxn_services_slider_nav .pxn_slider-nav {
  position: static;
  background-color: var(--pxn-color-heading-primary);
  border-color: var(--pxn-color-heading-primary);
  color: var(--pxn-color-common-white);
  width: 48px;
  height: 48px;
  font-size: 18px;
}
.pxn_services_slider_nav .pxn_slider-nav span i {
  color: var(--pxn-color-common-white);
}
.pxn_services_slider_nav .pxn_slider-nav:hover {
  background-color: var(--pxn-color-theme-primary);
  border-color: var(--pxn-color-theme-primary);
}
.pxn_services_slider_nav .pxn_slider-nav:hover span i:last-child {
  color: var(--pxn-color-common-white);
}
.pxn_services_slider_nav .pxn_slider-nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* ---------- 2a-2. Testimonials: show the Google Review source badge ---------- */
.pxn_testimonial .testimonial_author .designation {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pxn_testimonial .testimonial_author .designation_icon {
  width: 16px;
  height: 16px;
}

/* ---------- 2b-2. Links page: per-portal text badge instead of a generic globe icon ---------- */
.pxn_contact_info .contact_icon.portal_badge {
  font-size: 13px;
  font-weight: var(--pxn-fw-bold);
  letter-spacing: 0.02em;
  color: var(--pxn-color-theme-secondary);
}

/* ---------- 2c. Gallery: swipeable slider instead of a static grid ---------- */
.pxn_gallery_slider_wrap {
  position: relative;
}
.pxn_gallery_slider .swiper-slide {
  width: 340px;
}
.pxn_gallery_slider .gallery_item {
  display: block;
  border-radius: 10px;
  overflow: hidden;
}
.pxn_gallery_slider .gallery_item img {
  width: 100%;
  aspect-ratio: 350/230;
  object-fit: cover;
}
@media (max-width: 575px) {
  .pxn_gallery_slider .swiper-slide {
    width: 260px;
  }
}

/* ---------- 3. Industries section: compact directory list, not cards ---------- */
.pxn-industries-section {
  position: relative;
  background-color: var(--pxn-color-common-white);
  border-top: 1px solid var(--pxn-color-border-1);
  border-bottom: 1px solid var(--pxn-color-border-1);
}
.pxn_industries_wrap .section_heading,
.pxn-stats-section .section_heading {
  max-width: 560px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 60px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pxn_industries_wrap .section_heading,
  .pxn-stats-section .section_heading {
    margin-bottom: 50px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .pxn_industries_wrap .section_heading,
  .pxn-stats-section .section_heading {
    margin-bottom: 40px;
  }
}
/* Two independent infinite-scroll rows, staggered so they never line up.
   Each row's track holds the 8 industries twice back-to-back; animating
   translateX(-50%) moves exactly one copy's width, so the loop is seamless.
   Rows scroll opposite directions at different speeds (with row 2 starting
   mid-cycle via a negative animation-delay) for the "misaligned" brick look. */
.pxn_industries_marquee {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 25px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.pxn_industries_row {
  overflow: hidden;
  width: 100%;
}
.pxn_industries_track {
  display: flex;
  width: max-content;
  gap: 20px;
  will-change: transform;
}
@keyframes pxn-industries-marquee-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes pxn-industries-marquee-right {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}
.pxn_industries_row.row_1 .pxn_industries_track {
  animation: pxn-industries-marquee-left 38s linear infinite;
}
.pxn_industries_row.row_2 .pxn_industries_track {
  animation: pxn-industries-marquee-right 34s linear infinite;
  animation-delay: -12s;
}
.pxn_industries_marquee:hover .pxn_industries_track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .pxn_industries_track {
    animation: none !important;
  }
}
.pxn_industry_item {
  flex: 0 0 auto;
  width: 320px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background-color: var(--pxn-color-theme-bg-light);
  border-radius: 8px;
  border-inline-start: 3px solid transparent;
  transition: all 0.3s ease-in-out;
}
.pxn_industry_item:hover {
  border-inline-start-color: var(--pxn-color-theme-primary);
  background-color: var(--pxn-color-common-white);
  box-shadow: 0 10px 30px rgba(20, 88, 135, 0.08);
  transform: translateY(-3px);
}
.pxn_industry_item .industry_icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: rgba(20, 88, 135, 0.08);
  color: var(--pxn-color-theme-secondary);
  font-size: 19px;
}
.pxn_industry_item .industry_name {
  font-family: var(--pxn-ff-heading);
  font-weight: var(--pxn-fw-sbold);
  font-size: 15.5px;
  line-height: 1.35;
  color: var(--pxn-color-heading-primary);
}
@media only screen and (min-width: 576px) and (max-width: 991px) {
  .pxn_industry_item {
    width: 280px;
  }
}
@media (max-width: 575px) {
  .pxn_industries_marquee {
    gap: 14px;
  }
  .pxn_industries_track {
    gap: 14px;
  }
  .pxn_industry_item {
    width: 240px;
    padding: 16px 18px;
  }
}

/* ---------- 3b. Footer contact widget: one horizontal row, not stacked ---------- */
.pxn-footer .footer_widgets_wrap .footer_widgets_inner .footer_contact_info {
  -webkit-box-flex: 100%;
      -ms-flex: 100%;
          flex: 100%;
  max-width: 100%;
  margin-top: 10px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.pxn_footer_widget.footer_contact_info ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 24px 48px;
}
.pxn_footer_widget.footer_contact_info ul > li {
  margin-bottom: 0;
}
.pxn_footer_widget.footer_contact_info ul > li:not(:last-child) {
  margin-bottom: 0;
  padding-inline-end: 32px;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.15);
}
@media (max-width: 767px) {
  .pxn_footer_widget.footer_contact_info ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 18px;
  }
  .pxn_footer_widget.footer_contact_info ul > li:not(:last-child) {
    padding-inline-end: 0;
    border-inline-end: none;
  }
}

/* ---------- 3b2. Footer widget groups: clean 2-per-row grid below 768px ---------- */
/* Theme default relies on flex-wrap with content-based widths (plus a
   flex-direction:column switch at <=575px combined with flex-wrap:wrap),
   which makes the groups (Explore/Company/Services/Contact) wrap unevenly
   and overlap on small screens. Force an explicit 2-col grid instead, with
   Contact always pulled onto its own full-width row at the very bottom —
   otherwise it gets squeezed into a half-width grid cell and the phone
   numbers wrap. Some pages have 3 link groups before Contact (Explore,
   Company, Services), others only 2 (Explore, Services); ":nth-child(3)"
   only ever matches Services when it's the odd one out in the 3-group
   pages, so it also gets bumped to its own full-width row and nothing is
   left half-empty next to it. */
@media (max-width: 767px) {
  .pxn-footer .footer_widgets_wrap .footer_widgets_inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
    row-gap: 32px;
  }
  .pxn-footer .footer_widgets_wrap .footer_widgets_inner .pxn_footer_widget.widget-nav-menu:nth-child(3) {
    grid-column: 1 / -1;
  }
  .pxn-footer .footer_widgets_wrap .footer_widgets_inner .footer_contact_info {
    flex: initial;
    max-width: 100%;
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
}

/* ---------- 3b3. Footer titles: small accent underline to set section headings apart ---------- */
.pxn_footer_widget .footer_title {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.pxn_footer_widget .footer_title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 3px;
  background-color: var(--pxn-color-theme-primary);
}

/* ---------- 3c. Testimonials: 3-up row on desktop, swipeable carousel below lg ---------- */
/* Swiper is disabled (enabled:false) at the 992px breakpoint in main.js, so
   above that width the wrapper just sits as a static flex row of 3 cards;
   below it, it becomes a real touch/autoplay slider (1 card on mobile, 2 on tablet). */
.pxn_testimonials_carousel .swiper-slide.pxn_testimonial.style-2 {
  max-width: 100%;
  width: 100%;
  padding-bottom: 0;
  height: auto;
}
.pxn_testimonials_carousel .pxn_testimonial_inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pxn_testimonials_carousel .testimonial_author {
  margin-top: auto;
  padding-top: 24px;
}
@media (min-width: 992px) {
  .pxn-h2-testimonial-section .pxn_slider-pagination {
    display: none;
  }
}

/* ---------- 3d. How We Work: light background, single-row steps ---------- */
.pxn-h2-process-section {
  position: relative;
  overflow: hidden;
  background-color: var(--pxn-color-theme-bg-light-2);
  background-image: none;
}
.pxn-h2-process-section .pxn-h2_process_abstract {
  position: absolute;
  inset-inline-end: -40px;
  top: -40px;
  width: 320px;
  height: 320px;
  color: var(--pxn-color-theme-secondary);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767px) {
  .pxn-h2-process-section .pxn-h2_process_abstract {
    width: 220px;
    height: 220px;
  }
}
.pxn-h2_process_wrap {
  position: relative;
  z-index: 1;
}
.pxn-h2_process_wrap .section_heading .sec_title {
  color: var(--pxn-color-heading-primary);
}
.pxn-h2_process_items {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .pxn-h2_process_items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pxn-h2_process_items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .pxn-h2_process_items {
    grid-template-columns: 1fr;
  }
}
.pxn-h2_process_items .pxn_process_item .process_step {
  background-color: var(--pxn-color-heading-primary);
  border-color: transparent;
}
.pxn-h2_process_items .pxn_process_item:hover .process_step {
  background-color: var(--pxn-color-theme-primary);
  border-color: var(--pxn-color-theme-primary);
  color: var(--pxn-color-common-white);
}
.pxn-h2_process_items .pxn_process_item {
  height: 100%;
  width: 100%;
}
.pxn-h2_process_items .pxn_process_item > div:not(.process_step) {
  display: flex;
  flex: 1;
  width: 100%;
}
.pxn-h2_process_items .pxn_process_item .process_content {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  width: 100%;
  padding: 22px 18px;
  background-color: var(--pxn-color-common-white);
  border-color: var(--pxn-color-border-1);
  box-shadow: 0 10px 30px rgba(20, 88, 135, 0.05);
}
.pxn-h2_process_items .pxn_process_item .process_title {
  font-size: 19px;
  color: var(--pxn-color-heading-primary);
}
.pxn-h2_process_items .pxn_process_item .process_desc {
  font-size: 15px;
  color: var(--pxn-color-text-body);
}

/* ---------- 3e. Form file input + inline status message ---------- */
.pxn_contact_form input[type="file"] {
  width: 100%;
  min-height: 45px;
  font-family: inherit;
  font-size: var(--pxn-fs-body);
  font-weight: var(--pxn-fw-medium);
  color: var(--pxn-color-text-body);
  border: 1px solid var(--pxn-color-border-1);
  border-radius: 10px;
  padding: 10px 15px;
  background-color: var(--pxn-color-common-white);
}
.pxn_contact_form input[type="file"]:focus {
  outline: none;
  border-color: var(--pxn-color-theme-primary);
}
.pxn_contact_form input[type="file"]::file-selector-button {
  margin-inline-end: 15px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-weight: var(--pxn-fw-sbold);
  color: var(--pxn-color-common-white);
  background-color: var(--pxn-color-heading-primary);
  cursor: pointer;
}
.form_status {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 15px;
}

/* ---------- 4. Stats section: clean "at a glance" strip, not glassmorphism ---------- */
.pxn-stats-section {
  position: relative;
  background-color: var(--pxn-color-theme-bg-light-2);
  background-image: linear-gradient(rgba(242, 239, 232, 0.92), rgba(242, 239, 232, 0.92)),
    url("../images/counter/h2-counter-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-top: 1px solid var(--pxn-color-border-1);
  border-bottom: 1px solid var(--pxn-color-border-1);
}
.pxn_stats_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pxn_stat_item {
  position: relative;
  text-align: center;
  padding: 0 20px;
}
.pxn_stat_item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 64%;
  background-color: var(--pxn-color-border-1);
}
.pxn_stat_item .stat_count {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  font-family: var(--pxn-ff-heading);
  font-weight: var(--pxn-fw-bold);
  font-size: 52px;
  line-height: 1;
  color: var(--pxn-color-theme-secondary);
  margin-bottom: 14px;
}
.pxn_stat_item .stat_count .pxn_counter-suffix {
  font-size: 30px;
}
.pxn_stat_item .stat_label {
  font-weight: var(--pxn-fw-sbold);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pxn-color-text-body);
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pxn_stats_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }
  .pxn_stat_item:nth-child(2)::after {
    display: none;
  }
  .pxn_stat_item:nth-child(2),
  .pxn_stat_item:nth-child(4) {
    border-inline-end: none;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .pxn_stat_item .stat_count {
    font-size: 44px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pxn_stats_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 32px;
  }
  .pxn_stat_item:nth-child(2n)::after {
    display: none;
  }
  .pxn_stat_item .stat_count {
    font-size: 38px;
  }
}
@media (max-width: 575px) {
  .pxn_stats_grid {
    grid-template-columns: 1fr;
    row-gap: 28px;
  }
  .pxn_stat_item::after {
    display: none;
  }
  .pxn_stat_item .stat_count {
    font-size: 36px;
  }
}

/* ---------- 5. Why Choose Us: dark theme matching the "Who We Are" section, same per-row ratio as Core Values ---------- */
.why-choose-section {
  background-color: var(--pxn-color-theme-bg-primary);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.why-choose-section .section_heading .sec_title {
  color: var(--pxn-color-common-white);
}
.why-choose-grid.pxn-h3_feature_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
/* Below 1200px: 2 per row (matches Core Values' tablet/mobile layout) */
.why-choose-grid .pxn_feature_box {
  flex: 0 1 calc(50% - 12px);
  max-width: calc(50% - 12px);
}
/* 5th card is always alone on the last row below 1200px — give it more room
   instead of leaving it squeezed to the same half-width as the paired cards. */
@media (max-width: 1199px) {
  .why-choose-grid .pxn_feature_box:last-child {
    flex: 0 1 65%;
    max-width: 65%;
  }
}
/* 1200px+: 3 per row (matches Core Values' desktop layout) */
@media (min-width: 1200px) {
  .why-choose-grid .pxn_feature_box {
    flex: 0 1 calc(33.333% - 16px);
    max-width: calc(33.333% - 16px);
  }
}
/* Frosted glass cards instead of solid white, so they read on the dark bg */
.why-choose-grid .pxn_feature_box {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.why-choose-grid .pxn_feature_box:hover {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.24);
  transform: translateY(-4px);
}
.why-choose-grid .pxn_feature_box .feature_title {
  color: var(--pxn-color-common-white);
}
.why-choose-grid .pxn_feature_box .feature_desc {
  color: rgba(255, 255, 255, 0.72);
}
.why-choose-grid .pxn_feature_box .feature_icon {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--pxn-color-theme-primary);
}
.why-choose-grid .pxn_feature_box:hover .feature_icon {
  background-color: var(--pxn-color-theme-primary);
  color: var(--pxn-color-common-white);
}

/* ---------- 5b. Core Values: 2 per row below 768px instead of theme's default 1 per row ---------- */
@media (max-width: 767px) {
  .core-values-grid.pxn-h3_feature_wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}

/* ---------- 6. Legal pages: Privacy Policy / Terms prose ---------- */
.pxn_legal_content h3 {
  margin-top: 40px;
  margin-bottom: 14px;
  font-size: 22px;
}
.pxn_legal_content p:first-of-type {
  margin-top: 0;
}
.pxn_legal_content ul {
  margin: 0 0 1rem;
  padding-inline-start: 22px;
}
.pxn_legal_content ul li {
  margin-bottom: 8px;
}
.pxn_legal_content a {
  color: var(--pxn-color-theme-secondary);
  text-decoration: underline;
}

/* ---------- 7. Client logos: uniform tile size regardless of source image ---------- */
/* Design new logo files at 300x150px (2:1), transparent PNG, logo centered
   with ~20px breathing room on all sides — object-fit: contain scales any
   size down to fit, but matching this canvas keeps visual weight consistent. */
.pxn_client_logo.style-2 .pxn_client_logo_inner {
  min-height: 142px;
  padding: 10px 14px;
}
.pxn_client_logo.style-2 .pxn_client_logo_inner img {
  max-width: 100%;
  max-height: 126px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 575px) {
  .pxn_client_logo.style-2 .pxn_client_logo_inner {
    min-height: 110px;
    padding: 4px 6px;
  }
  .pxn_client_logo.style-2 .pxn_client_logo_inner img {
    max-height: 100px;
  }
  /* Theme sets 70px top padding + 60px carousel margin here — too much
     breathing room on small screens once the tiles above are already tight. */
  .pxn-h1_client_wrapper {
    padding-top: 50px;
  }
  .pxn-h1_client_wrapper .pxn-h1_client_carousel {
    margin-top: 32px;
  }
}

/* ---------- 8. Header contact chip: white pill around the phone number ---------- */
.pxn_header_contact {
  background-color: var(--pxn-color-common-white);
  padding: 6px 18px 6px 6px;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.pxn_header_contact:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}
.pxn_header_contact .contact_icon {
  width: 38px;
  height: 38px;
  font-size: 15px;
  transition: background-color 0.3s ease-in-out;
}
.pxn_header_contact:hover .contact_icon {
  background-color: var(--pxn-color-theme-primary);
}
.pxn_header_contact .contact_no {
  color: var(--pxn-color-common-black);
  font-weight: var(--pxn-fw-ebold);
}

/* ---------- 9b. Header: keep logo + menu toggle on one row on all devices ---------- */
/* Theme's .pxn_header_main_wrap uses flex-wrap:wrap; on narrow phones the
   200px-wide logo plus the offcanvas toggle don't both fit, so the toggle
   drops to its own row below the logo. Nav is hidden below lg anyway, so
   this wrap only ever needs to fit the logo + right-side toggle group. */
.pxn_header_main_wrap {
  flex-wrap: nowrap;
}
.pxn_site_logo {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 280px;
}
.pxn_header_right {
  flex: none;
}
@media (max-width: 575px) {
  .pxn_header_main_wrap {
    gap: 12px;
  }
  .pxn_site_logo {
    max-width: 195px;
  }
  .pxn_offcanvas_toggle .text {
    display: none;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pxn_site_logo {
    max-width: 230px;
  }
}

/* ---------- 9c. Header: flat brand-blue background instead of theme's gradient ---------- */
.pxn-header-2.header-absolute .pxn_header_main_wrap {
  background-image: none;
  background-color: var(--pxn-color-theme-secondary);
}

/* ---------- 9. WhatsApp floating chat button ---------- */
/* Stacked directly above .pxn_back-to-top (same inset-inline-end, bottom
   offset = back-to-top's bottom + its 46px height + a 12px gap) so the two
   never collide at any breakpoint. Shown as the bare icon — no circular
   card behind it — with a drop-shadow (works on transparent SVG, unlike
   box-shadow) so it still reads against light and dark sections alike. */
.pxn_whatsapp_float {
  position: fixed;
  inset-inline-end: 50px;
  bottom: 108px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.3));
  transition: transform 0.3s ease-in-out;
}
.pxn_whatsapp_float:hover {
  transform: translateY(-4px);
}
.pxn_whatsapp_float .pxn_whatsapp_lottie {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pxn_whatsapp_float {
    inset-inline-end: 40px;
    bottom: 98px;
    width: 56px;
    height: 56px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .pxn_whatsapp_float {
    inset-inline-end: 30px;
    bottom: 88px;
    width: 54px;
    height: 54px;
  }
}
@media (max-width: 575px) {
  .pxn_whatsapp_float {
    inset-inline-end: 20px;
    bottom: 78px;
    width: 54px;
    height: 54px;
  }
}

/* ---------- 10. Home hero: image slider with overlay text ---------- */
/* Reuses the theme's h1-hero-slider (Swiper fade + autoplay, already wired
   up in main.js) but restyled for a light illustration background instead
   of a dark photo: the theme's dark navy scrim and white text/pagination
   are overridden for readability on a light bg. Each slide is a plain
   two-column row (text | transparent illustration) that stacks on mobile
   via normal Bootstrap column wrapping — no cropped/cover background
   images, since the illustrations are transparent cutouts. */
.pxn-home-hero-section {
  background: linear-gradient(115deg, #F5FAFE 56.07%, #FFF 93.51%);
}
.pxn-home-hero-section .pxn_slider_item {
  min-height: 620px;
  padding: 160px 0 60px;
}
@media (max-width: 991px) {
  .pxn-home-hero-section .pxn_slider_item {
    min-height: auto;
    padding-top: 150px;
    padding-bottom: 50px;
  }
}
@media (max-width: 575px) {
  .pxn-home-hero-section .pxn_slider_item {
    padding-top: 140px;
    /* Extra bottom clearance so the fixed WhatsApp float (anchored to the
       viewport bottom) doesn't drift over the next section's heading on
       tall phones, where it sits lower in page coordinates. */
    padding-bottom: 100px;
  }
}
.pxn-home-hero-section .pxn_hero_img_wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 40px;
}
.pxn-home-hero-section .pxn_hero_img {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
}
@media only screen and (min-width: 992px) {
  .pxn-home-hero-section .pxn_hero_img_wrap {
    justify-content: flex-end;
    margin-top: 0;
  }
  .pxn-home-hero-section .pxn_hero_img {
    max-width: 100%;
  }
}
.pxn-home-hero-section .pxn_hero_content {
  max-width: 560px;
  padding-top: 0;
}
.pxn-home-hero-section .pxn_hero_content .hero_title {
  color: var(--pxn-color-heading-primary);
  font-size: 56px;
  line-height: 1.2;
}
.pxn-home-hero-section .pxn_hero_content .hero_sub {
  display: block;
  margin-top: 16px;
  margin-bottom: 0;
  padding: 0 0 0 18px;
  background-color: transparent;
  backdrop-filter: none;
  border: none;
  border-radius: 0;
  position: relative;
  font-size: 18px;
  color: var(--pxn-color-theme-secondary);
}
.pxn-home-hero-section .pxn_hero_content .hero_sub::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--pxn-color-theme-primary);
}
.pxn-home-hero-section .pxn_hero_content .hero_desc {
  margin-top: 22px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--pxn-color-text-body);
}
.pxn-home-hero-section .pxn_hero_content .hero_btn {
  margin-top: 32px;
}
.pxn-home-hero-section .swiper-slide .pxn_hero_content .hero_desc {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition-duration: 0.8s;
}
.pxn-home-hero-section .swiper-slide.swiper-slide-active .pxn_hero_content .hero_desc {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 1.4s;
}
.pxn-home-hero-section .pxn_slider-pagination .swiper-pagination-bullet::after {
  background-color: rgba(20, 88, 135, 0.25);
}
.pxn-home-hero-section .pxn_slider-pagination .swiper-pagination-bullet-active {
  background-color: var(--pxn-color-theme-secondary);
}
.pxn-home-hero-section .pxn_slider-pagination .swiper-pagination-bullet-active::after {
  background-color: var(--pxn-color-theme-primary);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .pxn-home-hero-section .pxn_hero_content .hero_title {
    font-size: 50px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pxn-home-hero-section .pxn_hero_content {
    max-width: 480px;
  }
  .pxn-home-hero-section .pxn_hero_content .hero_title {
    font-size: 44px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pxn-home-hero-section .pxn_hero_content {
    max-width: 100%;
  }
  .pxn-home-hero-section .pxn_hero_content .hero_title {
    font-size: 38px;
  }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pxn-home-hero-section .pxn_hero_content {
    max-width: 100%;
  }
  .pxn-home-hero-section .pxn_hero_content .hero_title {
    font-size: 32px;
  }
}
@media (max-width: 575px) {
  .pxn-home-hero-section .pxn_hero_content {
    max-width: 100%;
  }
  .pxn-home-hero-section .pxn_hero_content .hero_title {
    font-size: 28px;
  }
  .pxn-home-hero-section .pxn_hero_content .hero_sub {
    font-size: 16px;
  }
  .pxn-home-hero-section .pxn_hero_content .hero_desc {
    font-size: 16px;
    margin-top: 18px;
  }
}