/* =========================================================
   Professional Pioneers v1.9.93
   Scoped homepage spacing and Projects presentation.
   Kept separate so the Projects homepage layout can be
   replaced or reverted without changing the main stylesheet.
========================================================= */
:root {
  --pp-home-gutter: clamp(16px, 4vw, 56px);
  --pp-home-section-space: 20px;
  --pp-home-content-max: 1320px;
}

.pp-main-content > section {
  margin-top: var(--pp-home-section-space) !important;
  margin-bottom: var(--pp-home-section-space) !important;
}

.pp-main-content > .pp-hero-showcase {
  margin-top: 0 !important;
}

.pp-header-container,
.pp-hero-container,
.pp-partners-container,
.pp-work-container,
.pp-services-container,
.pp-stats-container,
.pp-map-container,
.pp-cta-merge-container,
.pp-contact-cta-container,
.pp-footer-container {
  width: 100% !important;
  max-width: calc(var(--pp-home-content-max) + 112px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--pp-home-gutter) !important;
  padding-right: var(--pp-home-gutter) !important;
  box-sizing: border-box !important;
}

#work.pp-work-section.pp-work-projects-section,
.pp-main-content > #work.pp-work-projects-section {
  margin-top: var(--pp-home-section-space) !important;
  margin-bottom: var(--pp-home-section-space) !important;
}

.pp-work-projects-section .pp-work-projects-panel {
  padding: clamp(16px, 2vw, 26px) !important;
}

.pp-work-projects-section .pp-latest-projects-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .75fr) !important;
  gap: clamp(18px, 2vw, 28px) !important;
  align-items: stretch !important;
}

.pp-work-projects-section .pp-latest-projects-preview-col,
.pp-work-projects-section .pp-latest-projects-list-col {
  min-width: 0 !important;
  width: 100% !important;
}

.pp-work-projects-section .pp-latest-projects-preview {
  height: clamp(500px, 44vw, 640px) !important;
  min-height: 500px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

.pp-work-projects-section .pp-latest-projects-media-wrap,
.pp-work-projects-section .pp-latest-projects-media-item,
.pp-work-projects-section .pp-latest-projects-media-item video,
.pp-work-projects-section .pp-latest-projects-media-item img {
  width: 100% !important;
  height: 100% !important;
}

.pp-work-projects-section .pp-latest-projects-media-item video,
.pp-work-projects-section .pp-latest-projects-media-item img {
  object-fit: cover !important;
  object-position: center !important;
}

.pp-work-projects-section .pp-latest-projects-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
  align-content: start !important;
  max-height: clamp(500px, 44vw, 640px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 2px 8px 2px 2px !important;
  scrollbar-width: thin;
}

html[dir="rtl"] .pp-work-projects-section .pp-latest-projects-list {
  padding: 2px 2px 2px 8px !important;
}

.pp-work-projects-section .pp-latest-projects-item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  min-height: 0 !important;
  padding: 14px 14px 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.035) !important;
  overflow: hidden !important;
  cursor: pointer !important;
}

.pp-work-projects-section .pp-latest-projects-item.active {
  border-color: rgba(200,164,93,.55) !important;
  background: rgba(200,164,93,.08) !important;
}

/* Flatten the content wrapper so title, cover, details and link
   can be ordered as one vertical project card without changing
   the existing project data or HTML generation behavior. */
.pp-work-projects-section .pp-latest-projects-item-content {
  display: contents !important;
}

.pp-work-projects-section .pp-latest-projects-item-title {
  order: 1 !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: clamp(17px, 1.25vw, 22px) !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
}

.pp-work-projects-section .pp-latest-projects-item-thumb {
  order: 2 !important;
  width: 100% !important;
  height: clamp(150px, 13vw, 190px) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.pp-work-projects-section .pp-latest-projects-item-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.pp-work-projects-section .pp-latest-projects-item-subtitle {
  order: 3 !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.pp-work-projects-section .pp-latest-projects-item-link {
  order: 4 !important;
  width: max-content !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.pp-work-projects-section .pp-latest-projects-item-progress {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 4px !important;
  overflow: hidden !important;
}

.pp-work-projects-section .pp-latest-projects-item-progress-bar {
  display: block !important;
  height: 100% !important;
  width: 0;
  transition: none !important;
}

@media (max-width: 991px) {
  :root {
    --pp-home-gutter: clamp(14px, 3.5vw, 28px);
  }

  .pp-work-projects-section .pp-latest-projects-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr) !important;
    gap: 16px !important;
  }

  .pp-work-projects-section .pp-latest-projects-preview {
    height: 460px !important;
    min-height: 460px !important;
  }

  .pp-work-projects-section .pp-latest-projects-list {
    max-height: 460px !important;
  }
}

@media (max-width: 767px) {
  :root {
    --pp-home-gutter: 16px;
    --pp-home-section-space: 16px;
  }

  .pp-work-projects-section .pp-latest-projects-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .pp-work-projects-section .pp-latest-projects-preview-col {
    display: block !important;
  }

  .pp-work-projects-section .pp-latest-projects-preview {
    height: 340px !important;
    min-height: 340px !important;
  }

  .pp-work-projects-section .pp-latest-projects-list {
    grid-template-columns: 1fr !important;
    max-height: 620px !important;
    padding-inline: 0 !important;
  }

  .pp-work-projects-section .pp-latest-projects-item-thumb {
    height: 190px !important;
  }
}

@media (max-width: 430px) {
  .pp-work-projects-section .pp-latest-projects-preview {
    height: 290px !important;
    min-height: 290px !important;
  }

  .pp-work-projects-section .pp-latest-projects-item {
    padding: 12px 12px 16px !important;
  }

  .pp-work-projects-section .pp-latest-projects-item-thumb {
    height: 170px !important;
  }
}