:root {
  --pmm-bg: #232323;
  --pmm-gold: #b08950;
  --pmm-gold-light: #dbb170;
  --pmm-white: #ffffff;
  --pmm-light-gray: #f7f7f7;
  --pmm-border: rgba(255, 255, 255, 0.08);
  --pmm-text-dark: #232323;
  --pmm-radius-lg: 14px;
  --pmm-radius-md: 10px;
  --pmm-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --pmm-transition: 0.3s var(--pmm-ease);
  --pmm-sidebar-w: 260px;
  --pmm-font: "Poppins", sans-serif;
}

.pmm-mega-bg,
.pmm-mega-bg * {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------
    FULL-BLEED BACKGROUND
    Elementor's content column has its own max-width, so a plain
    width:100% only fills that column, not the browser. This trick
    breaks the element out of its parent and stretches it edge to
    edge of the viewport no matter how the column is configured.
    --------------------------------------------------------------- */

.pmm-demo-wrap {
  width: 100%;
  max-width: 1184px;
  margin: 0 auto;
  padding: 40px 16px;
}

.pmm-wrapper {
  font-family: var(--pmm-font);
}

.pmm-panel {
  background: var(--pmm-bg);
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

.pmm-sidebar {
  width: var(--pmm-sidebar-w);
  flex: 0 0 var(--pmm-sidebar-w);
  background: var(--pmm-bg);
  border-right: 1px solid #ffffff;
  max-height: 480px;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pmm-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--pmm-gold);
  font-family: var(--pmm-font);
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  padding: 13px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition:
    background var(--pmm-transition),
    color var(--pmm-transition),
    transform var(--pmm-transition);
  line-height: 1.35;
}

.pmm-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--pmm-white);
}

.pmm-tab:focus-visible {
  outline: 2px solid var(--pmm-gold);
  outline-offset: 2px;
}

.pmm-tab .pmm-tab-arrow {
  flex: 0 0 auto;
  display: flex;
  color: currentColor;
  opacity: 0.8;
  transition: transform var(--pmm-transition);
}

.pmm-tab:hover .pmm-tab-arrow {
  transform: translateX(3px);
}

.pmm-tab.pmm-active {
  background: var(--pmm-white);
  color: var(--pmm-text-dark);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.pmm-tab.pmm-active .pmm-tab-arrow {
  color: var(--pmm-text-dark);
  opacity: 1;
}

.pmm-tab.pmm-active:hover {
  background: var(--pmm-white);
  color: var(--pmm-text-dark);
}

.pmm-tab span {
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

.pmm-content {
  flex: 1 1 auto;
  min-width: 0;
  max-height: 480px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 26px 28px 30px;
}

.pmm-content::-webkit-scrollbar {
  width: 6px;
}

.pmm-content::-webkit-scrollbar-track {
  background: transparent;
}

.pmm-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

.pmm-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.pmm-heading-link {
  display: inline-block;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--pmm-gold);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-color: rgba(176, 137, 80, 0.5);
  margin-bottom: 18px;
  transition:
    color var(--pmm-transition),
    text-decoration-color var(--pmm-transition);
}

.pmm-heading-link:hover {
  color: var(--pmm-white);
  text-decoration-color: var(--pmm-white);
}

.pmm-heading-link:focus-visible {
  outline: 2px solid var(--pmm-gold);
  outline-offset: 3px;
}

/* 3 columns on desktop, flexbox only (no grid) */
.pmm-services {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pmm-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  /* three cards per row: subtract a share of the two 12px gaps in the row */
  flex: 1 1 calc(33.333% - 8px);
  max-width: calc(33.333% - 8px);
  min-width: 0;
  background: var(--pmm-white);
  color: var(--pmm-text-dark);
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  padding: 17px 20px;
  border-radius: var(--pmm-radius-md);
  border: 1px solid transparent;
  transition:
    transform var(--pmm-transition),
    box-shadow var(--pmm-transition),
    border-color var(--pmm-transition);
}

.pmm-card .pmm-card-arrow {
  flex: 0 0 auto;
  display: flex;
  color: var(--pmm-text-dark);
  transition:
    transform var(--pmm-transition),
    color var(--pmm-transition);
}

.pmm-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.35);
  border-color: var(--pmm-gold);
  background-color: var(--pmm-gold-light);
}

.pmm-card:hover .pmm-card-arrow {
  transform: translateX(4px);
}

.pmm-card:focus-visible {
  outline: 2px solid var(--pmm-gold);
  outline-offset: 2px;
}

@keyframes pmm-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

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

.pmm-fade {
  animation: pmm-fade-in 0.3s var(--pmm-ease);
}

.pmm-mobile {
  display: none;
  flex-direction: column;
  width: 100%;
  padding: 10px;
  gap: 8px;
}

.pmm-accordion-item {
  border-radius: var(--pmm-radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--pmm-border);
}

.pmm-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: transparent;
  border: none;
  color: var(--pmm-gold);
  font-family: var(--pmm-font);
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  padding: 15px 16px;
  cursor: pointer;
  transition:
    color var(--pmm-transition),
    background var(--pmm-transition);
}

.pmm-accordion-trigger:hover {
  color: var(--pmm-white);
}

.pmm-accordion-trigger:focus-visible {
  outline: 2px solid var(--pmm-gold);
  outline-offset: -2px;
}

.pmm-accordion-trigger.pmm-active {
  color: var(--pmm-white);
  background: rgba(255, 255, 255, 0.04);
}

.pmm-accordion-chevron {
  flex: 0 0 auto;
  display: flex;
  transition: transform var(--pmm-transition);
}

.pmm-accordion-trigger.pmm-active .pmm-accordion-chevron {
  transform: rotate(180deg);
}

.pmm-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--pmm-ease);
  padding: 0 14px;
}

.pmm-accordion-panel-inner {
  padding: 6px 2px 16px;
}

.pmm-accordion-panel .pmm-heading-link {
  margin-top: 4px;
}

.pmm-accordion-panel .pmm-services {
  gap: 10px;
}

.pmm-accordion-panel .pmm-card {
  padding: 15px 16px;
  font-size: 14px;
  /* mobile accordion always stacks one card per row */
  flex-basis: 100%;
  max-width: 100%;
}

@media (max-width: 1024px) {

  /* .pmm-mega-bg {
      --pmm-sidebar-w: 210px;
    } */
  .pmm-content {
    padding: 22px 20px 24px;
  }

  .pmm-card {
    padding: 15px 18px;
    /* tighter viewport: drop to 2 columns so cards don't get too cramped */
    flex: 1 1 calc(50% - 6px);
    max-width: calc(50% - 6px);
  }
}

@media (max-width: 768px) {
  .pmm-panel.pmm-open {
    display: block;
  }

  .pmm-sidebar {
    display: none;
  }

  .pmm-content {
    display: none;
  }

  .pmm-mobile {
    display: flex;
  }
}

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

  .pmm-tab,
  .pmm-card,
  .pmm-heading-link,
  .pmm-accordion-chevron,
  .pmm-accordion-panel,
  .pmm-panel,
  .pmm-tab-arrow,
  .pmm-card-arrow {
    transition: none !important;
    animation: none !important;
  }
}