/*
 * Padre Pio Agencies Ltd - brand color overrides
 * Loaded after css/style.css. The vendor template hard-codes its orange
 * accent (#fd5523) both via the --primary CSS variable AND via literal
 * hex values in a few selectors, so we override both here rather than
 * editing the vendor file directly.
 *
 * Corporate Navy: #0B3C5D   Forest Green: #1B8559
 */
:root {
  --primary: #0B3C5D;
  --primary-rgb: 11, 60, 93;
  --info: #1B8559;
  --success: #1B8559;
}

.text-primary {
  color: #0B3C5D !important;
}

.bg-primary {
  background-color: #0B3C5D !important;
}

.btn-primary {
  background-color: #0B3C5D;
  border-color: #0B3C5D;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #1B8559;
  border-color: #1B8559;
}

.btn-info,
.bg-info {
  background-color: #1B8559 !important;
  border-color: #1B8559 !important;
}

.text-info {
  color: #1B8559 !important;
}

a {
  color: #0B3C5D;
}

a:hover {
  color: #1B8559;
}

/* Nav logo: kept small in the document flow (so it never re-inflates the
   header bar's height) and scaled up visually with transform so it reads
   as a big logo without pushing layout around. transform-origin keeps it
   anchored to the left/vertical-center of its own box. */
.pp-nav-brand {
  overflow: visible;
}

.pp-nav-logo {
  display: block;
  height: 34px;
  width: auto;
  transform: scale(2);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

/* Still clearly visible once the header goes sticky on scroll, just dialed
   back from the full top-of-page size so the fixed bar stays slim. */
header .header-nav-wrapper.header-sticky.scroll-on .pp-nav-logo {
  transform: scale(1.4);
}

/* ---- Padre Pio specific widgets ---- */

.pp-floating-cta {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pp-floating-cta a {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.pp-floating-cta a:hover {
  transform: scale(1.08);
  color: #fff;
}

.pp-floating-cta .pp-whatsapp {
  background-color: #25D366;
}

.pp-floating-cta .pp-call {
  background-color: #0B3C5D;
}

.pp-trust-bar {
  background-color: #0B3C5D;
  color: #fff;
  padding: 14px 0;
}

.pp-trust-bar .pp-trust-badge {
  background-color: #1B8559;
  color: #fff;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 30px;
  margin-right: 10px;
  font-size: 13px;
  display: inline-block;
}

.pp-trust-bar .pp-trust-pillars {
  font-size: 14px;
}

.pp-trust-bar .pp-trust-pillars span {
  margin: 0 10px;
}

.pp-exec-quote {
  background-color: var(--light);
  border-left: 4px solid #1B8559;
  border-radius: 10px;
  padding: 24px;
  height: 100%;
}

.pp-exec-quote h5 {
  color: #0B3C5D;
  margin-bottom: 2px;
}

.pp-exec-quote .pp-exec-title {
  font-size: 13px;
  color: #788094;
  margin-bottom: 0;
  display: block;
}

.pp-exec-quote {
  align-items: flex-start;
}

.pp-exec-text {
  flex: 1 1 auto;
}

.pp-exec-avatar {
  width: 140px;
  height: 140px;
  border-radius: 16px;
  background-color: #0B3C5D;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  overflow: hidden;
}

@media (max-width: 575.98px) {
  .pp-exec-avatar {
    width: 96px;
    height: 96px;
    font-size: 34px;
  }
}

.pp-exec-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.pp-review-card {
  background-color: #fff;
  border: 1px solid var(--theme-border);
  border-radius: 12px;
  padding: 22px;
  height: 100%;
}

.pp-review-card .pp-stars i {
  font-size: 14px;
}

.pp-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: var(--light);
  border-radius: 14px;
  padding: 14px 22px;
  font-weight: 700;
  color: #0B3C5D;
}

.pp-footer-legal {
  font-size: 12px;
  color: #b0b2b8;
  white-space: nowrap;
}

.footer-nav ul li.pp-footer-legal a {
  display: inline;
  padding: 0;
  color: #fff;
}

.footer-nav ul li.pp-footer-legal a:hover {
  color: #fff;
  text-decoration: underline;
}

.pp-tier-card {
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  padding: 26px;
  height: 100%;
  background-color: #fff;
}

.pp-tier-card .pp-tier-counter {
  font-size: 34px;
  font-weight: 700;
  color: #1B8559;
}

.pp-flash {
  border-radius: 10px;
}

/* Star rating input (review submission modal) */
.pp-star-input {
  display: flex;
  flex-direction: row-reverse;
  gap: 4px;
  font-size: 26px;
}

.pp-star-input input {
  display: none;
}

.pp-star-input label {
  color: #d8dde1;
  cursor: pointer;
  margin: 0;
}

.pp-star-input input:checked ~ label,
.pp-star-input label:hover,
.pp-star-input label:hover ~ label {
  color: #f5b301;
}

.pp-counter-pulse {
  transition: color 0.3s ease;
  color: #0B3C5D;
}

/* Keep hero headlines wrapping to roughly 2 lines instead of 3 on
   medium/tablet widths - combined with keeping the wording itself short. */
.hero-slider-sec .slide-content h1 {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Newsletter section (above the footer) - fixed/parallax background
   image with a dark overlay (same .jarallax + .parallax-overly pattern
   used elsewhere on the site), white text, no card/panel. ---- */
.pp-newsletter-sec {
  padding: 60px 0 30px;
}

@media (max-width: 767.98px) {
  .pp-newsletter-sec {
    padding: 40px 0 20px;
  }
}

.pp-newsletter-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #1B8559;
  color: #fff;
  font-size: 20px;
  margin-bottom: 16px;
}

.pp-newsletter-field {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
}

.pp-newsletter-field-icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: #788094;
  pointer-events: none;
}

.pp-newsletter-field .form-control {
  flex: 1 1 240px;
  height: 58px;
  border-radius: 50px;
  padding: 0 24px 0 48px;
  border: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.pp-newsletter-field .form-control:focus {
  box-shadow: 0 0 0 3px rgba(27, 133, 89, 0.35);
}

.pp-newsletter-btn {
  border-radius: 50px;
  padding: 0 32px;
  height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  animation: pp-newsletter-pulse 2.4s ease-in-out infinite;
}

.pp-newsletter-btn:hover,
.pp-newsletter-btn:focus {
  animation-play-state: paused;
  transform: scale(1.05);
}

.pp-newsletter-btn i {
  transition: transform 0.25s ease;
}

.pp-newsletter-btn:hover i {
  transform: translateX(4px);
}

@keyframes pp-newsletter-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(27, 133, 89, 0.5);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(27, 133, 89, 0);
  }
}

.pp-newsletter-consent {
  margin-top: 16px;
  padding-left: 1.8em;
}

.pp-newsletter-consent .form-check-input {
  width: 1.2em;
  height: 1.2em;
  margin-left: -1.8em;
  margin-top: 0.15em;
}

.pp-newsletter-consent .form-check-input:checked {
  background-color: #1B8559;
  border-color: #1B8559;
}

.pp-newsletter-consent .form-check-label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  line-height: 1.5;
}

.pp-newsletter-already {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  color: #fff;
  padding: 18px 28px;
  font-weight: 600;
}

.pp-newsletter-sub {
  color: #fff;
}

/* The vendor template's .footer has a fixed 120px top padding, which left
   a bare band of the background photo showing above the footer-widgets
   row. Shrink it so the photo isn't mostly empty space. */
.footer {
  padding-top: 0;
}

/* The real source of the gap: .footer-widgets itself carries a 60px
   top margin plus 110px top padding (170px total) before any content. */
.footer-widgets {
  margin-top: 0;
  padding-top: 40px;
}

/* Solid-color footer instead of the vendor template's photo + gradient
   glass-blur overlay behind the widgets row. */
.pp-footer-solid {
  background-color: #0B3C5D;
}

.pp-footer-solid .footer-widgets::before {
  background: none;
  backdrop-filter: none;
  border: 0;
}

/* The review modal wraps modal-header/body/footer in a single <form>.
   Bootstrap's modal-dialog-scrollable relies on those three being direct
   flex children of .modal-content so the body can scroll while header/
   footer stay fixed - a wrapping element breaks that and the footer
   (Submit button) gets silently clipped instead. display:contents makes
   the form invisible to layout while keeping it fully functional. */
.pp-modal-form {
  display: contents;
}

/* About page overview: stretch the photo to match the text column's
   full height instead of floating shorter/centered beside it. */
.pp-about-img {
  object-fit: cover;
  min-height: 320px;
}

/* The vendor template's .abs-info relies on a mask-image file
   (images/ab-mask.png) that was never migrated into this project. A
   missing mask renders the whole element invisible rather than just
   unstyled, which is why the stat cards above the CTA button were showing
   as blank white space. Drop the mask and restyle as a plain card. */
.about-details .abs-info {
  mask-image: none;
  background-color: var(--light);
  border-radius: 16px;
  padding: 24px 20px;
  max-width: none;
}

.abs-info-wrap > div:nth-child(2) .abs-info,
.abs-info-wrap > div:nth-child(3) .abs-info {
  background-color: var(--light);
}

.abs-info-wrap > div:nth-child(2) .abs-info h3,
.abs-info-wrap > div:nth-child(2) .abs-info .display-5,
.abs-info-wrap > div:nth-child(2) .abs-info p,
.abs-info-wrap > div:nth-child(3) .abs-info h3,
.abs-info-wrap > div:nth-child(3) .abs-info .display-5,
.abs-info-wrap > div:nth-child(3) .abs-info p {
  color: inherit;
}

/* Give the accordion "+" toggle icon some breathing room from the right
   edge of the button instead of sitting flush against it. */
.faq-accordion .accordion-item .accordion-button:after {
  right: 24px;
}

/* Long service titles (e.g. "Generator & Motorcycle Maintenance") were
   wrapping underneath the absolute-positioned +/- icon instead of
   stopping short of it - reserve space on the right so text never runs
   under the icon. */
.faq-accordion .accordion-item .accordion-button {
  padding-right: 56px;
}

/* Quality & Logistics page: group-heading icon badge + feature cards,
   instead of bare icons floating beside plain text. */
.pp-qc-group-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: #0B3C5D;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.pp-qc-card {
  background-color: var(--light);
  border-radius: 16px;
  padding: 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pp-qc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(11, 60, 93, 0.12);
}

.pp-qc-card .pp-qc-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: #1B8559;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 16px;
}

.pp-qc-card h5 {
  color: #0B3C5D;
}

.pp-qc-card p {
  color: #788094;
}

/* Highlight the current page in the main nav - includes/header.php already
   adds .active to the matching link, this just makes it visibly distinct. */
.navbar .navbar-nav > li a.nav-link.active {
  color: #1B8559;
  font-weight: 700;
  position: relative;
}

.navbar .navbar-nav > li a.nav-link.active::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  height: 2px;
  background-color: #1B8559;
}

@media (max-width: 1199.98px) {
  .navbar .navbar-nav > li a.nav-link.active::before {
    display: none;
  }
}

/* Flash/feedback toasts (js/toast.js) - fixed top-right so a success or
   error message is never missed, no matter where on the page the form
   that triggered it was. */
#pp-toast-container {
  z-index: 10060;
}

.pp-toast-success {
  background-color: #1B8559;
}

.pp-toast-danger {
  background-color: #b00020;
}

/* Small inline "copy email" affordance next to mailto links, as a
   guaranteed-to-work fallback for visitors whose device has no default
   mail client configured (the mailto: link itself still fires too). */
.pp-copy-email-btn {
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  padding: 0 0 0 6px;
  cursor: pointer;
}

.pp-copy-email-btn:hover {
  opacity: 1;
}