/* COMPANY PROFILE SECTIONS (home page): vision & mission, values, why Aloula, methodology */
.pf-section {
  width: 100%;
  padding: 110px 0;
  position: relative;
}
.pf-section--light {
  background: #f9f9f9;
}
.pf-section--dark {
  background: #141414;
  color: #fff;
}

/* Section heading, same rhythm as the other home sections */
.pf-head {
  margin-bottom: 50px;
  text-align: start;
}
.pf-head b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.pf-head h4 {
  font-size: 30px;
  margin-bottom: 15px;
}
.pf-head h4 span {
  color: #3d3d3d;
}
.pf-head h3 {
  font-weight: 600;
  margin: 0;
}
.pf-section--dark .pf-head h4 span {
  color: #bdbdbd;
}

/* Cards */
.pf-col {
  display: flex;
  margin-bottom: 30px;
}
.pf-card {
  flex: 1;
  position: relative;
  padding: 34px 30px;
  background: #f9f9f9;
  border: 1px solid #efefef;
  text-align: start;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pf-section--light .pf-card {
  background: #fff;
}
.pf-card:hover {
  transform: translateY(-6px);
  border-color: #141414;
  box-shadow: 0 18px 40px rgba(20, 20, 20, 0.1);
}
.pf-card i {
  display: block;
  margin-bottom: 20px;
  font-size: 42px;
  line-height: 1;
  color: #141414;
}
.pf-card h5 {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #141414;
}
.pf-card p {
  margin: 0;
  line-height: 1.9;
  color: #6c757d;
}

/* Arabic: right-to-left blocks (the page itself stays dir=ltr, like the other sections) */
.lang-ar .pf-head,
.lang-ar .pf-card {
  direction: rtl;
  text-align: right;
}
/* Arabic reads right to left: first card on the right */
.lang-ar .pf-section .row {
  direction: rtl;
}

/* Dark variant */
.pf-section--dark .pf-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.14);
}
.pf-section--dark .pf-card:hover {
  border-color: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.pf-section--dark .pf-card i,
.pf-section--dark .pf-card h5 {
  color: #fff;
}
.pf-section--dark .pf-card p {
  color: rgba(255, 255, 255, 0.72);
}

/* Methodology steps: large faded number instead of an icon */
.pf-step-num {
  position: absolute;
  top: 14px;
  inset-inline-end: 22px;
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  color: #141414;
  opacity: 0.07;
  pointer-events: none;
}
.pf-card--step {
  padding-top: 44px;
}

@media screen and (max-width: 768px) {
  .pf-section {
    padding: 70px 0;
  }
  .pf-head {
    margin-bottom: 35px;
  }
  .pf-head b,
  .pf-head h4 {
    font-size: 26px;
  }
  .pf-card {
    padding: 28px 24px;
  }
}