.we_work1-con {
    padding: 20px;
}

/* Title */
.we_work1-con .we_work1-title {
    font-size: 40px;
    font-weight: 800;
    color: #000;
    margin-bottom: 20px;
}

.we_work1-con .we_work1-title .dot {
    color: #f4b400; /* yellow accent dot */
    font-size: 80px;
    line-height: 1;
}

/* Text */
.we_work1-con .we_work1-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #000000;
    margin-bottom: 25px;
    text-align: justify;
}

/* Button */
.we_work1-con .we_work1-btn {
    background-color: #00a89d;
    color: #000000;
    font-weight: 600;
    font-size: 17px;
    padding: 10px 22px;
    border-radius: 6px;
    transition: 0.3s ease;
    text-decoration: none;
}

.we_work1-con .we_work1-btn:hover {
    background-color: #00897b;
    color: #fff;
}

/* Image */
.we_work1-con .we_work1-img {
    max-width: 100%;
    height: auto;
}

/* ========================= */
/* ✅ Responsive Breakpoints */
/* ========================= */

/* Extra Small Devices (Mobile Phones: up to 576px) */
@media (max-width: 576px) {
    .we_work1-con {
        text-align: center;
        padding: 15px;
    }
    .we_work1-con .we_work1-title {
        font-size: 26px;
    }
    .we_work1-con .we_work1-title .dot {
        font-size: 50px;
    }
    .we_work1-con .we_work1-text {
        font-size: 14px;
        line-height: 1.6;
    }
    .we_work1-con .we_work1-btn {
        font-size: 14px;
        padding: 8px 16px;
    }
    .we_work1-con .we_work1-img {
        margin-top: 20px;
        max-width: 85%;
    }
}

/* Small Devices (Tablets: 577px - 768px) */
@media (min-width: 577px) and (max-width: 768px) {
    .we_work1-con {
        padding: 20px;
    }
    .we_work1-con .we_work1-title {
        font-size: 26px;
    }
    .we_work1-con .we_work1-title .dot {
        font-size: 60px;
    }
    .we_work1-con .we_work1-text {
        font-size: 15px;
    }
    .we_work1-con .we_work1-btn {
        font-size: 15px;
        padding: 9px 18px;
    }
    .we_work1-con .we_work1-img {
        max-width: 300px;
        margin-top: 20px;
    }
}

/* Medium Devices (Small Laptops: 769px - 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    .we_work1-con {
        padding: 40px 25px;
    }
    .we_work1-con .we_work1-title {
        font-size: 34px;
    }
    .we_work1-con .we_work1-title .dot {
        font-size: 70px;
    }
    .we_work1-con .we_work1-text {
        font-size: 16px;
    }
    .we_work1-con .we_work1-btn {
        font-size: 16px;
    }
    .we_work1-con .we_work1-img {
        max-width: 95%;
    }
}

/* Large Devices (Desktops: 993px - 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
    .we_work1-con {
        padding: 20px;
    }
    .we_work1-con .we_work1-title {
        font-size: 32px;
    }
    .we_work1-con .we_work1-title .dot {
        font-size: 75px;
    }
    .we_work1-con .we_work1-text {
        font-size: 17px;
    }
}


/* ===== Discovery & Requirement (we_work2) ===== */
.we_work2-con {
  position: relative;
  padding: 28px 16px 36px;
  background: #fff;
  border-radius: 6px;
}

/* Corner accents */
.we_work2-con::before,
.we_work2-con::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 28px;
  border-radius: 2px;
}
.we_work2-con::before {
  top: 14px;
  left: 14px;
  border-top: 4px solid #11b2a6;
  border-left: 4px solid #11b2a6;
}
.we_work2-con::after {
  right: 14px;
  bottom: 14px;
  border-right: 4px solid #11b2a6;
  border-bottom: 4px solid #11b2a6;
}

.we_work2-title {
  font-weight: 800;
  font-size: clamp(1.4rem, 2.2vw + 1rem, 2rem);
  line-height: 1.25;
  margin: 0;
  color: #0e2530;
}

/* underline bar */
.we_work2-underline {
  width: 40px;
  height: 4px;
  background: #11b2a6;
  border-radius: 2px;
}

.we_work2-text {
  color: #27323a;
  line-height: 1.75;
  font-size: clamp(.95rem, .4vw + .85rem, 1rem);
}

.we_work2-tags .chip {
  display: inline-block;
  background: #e6f6f4;
  color: #0f3130;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  text-align: center;
}

/* ================= Responsive Tweaks ================= */

/* Extra Small Devices (Phones ≤480px / ≤576px) */
@media (max-width: 576px) {
  .we_work2-title { font-size: 1.4rem; text-align: center; }
  .we_work2-text { font-size: 0.9rem; text-align: justify; }
  .we_work2-tags .chip { 
    white-space: normal; 
    font-size: 0.85rem;
    width: 100%;
  }
  .we_work2-con::before { top: 8px; left: 8px; }
  .we_work2-con::after { right: 8px; bottom: 8px; }
}

/* Small Devices (Tablets 577px–768px) */
@media (min-width: 577px) and (max-width: 768px) {
  .we_work2-title { font-size: 1.6rem; text-align: center; }
  .we_work2-text { font-size: 0.95rem; }
  .we_work2-tags .chip { 
    font-size: 0.9rem;
    padding: 8px 14px;
  }
}

/* Medium Devices (Laptops 769px–992px) */
@media (min-width: 769px) and (max-width: 992px) {
  .we_work2-title { font-size: 1.8rem; }
  .we_work2-text { font-size: 1rem; }
  .we_work2-tags .chip {
    font-size: 0.95rem;
    padding: 9px 15px;
  }
}

/* Large Devices (Desktops 993px–1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
  .we_work2-title { font-size: 2rem; }
  .we_work2-text { font-size: 1rem; }
}

/* Extra Large Devices (≥1201px) */
@media (min-width: 1201px) {
  .we_work2-title { font-size: 2.2rem; }
  .we_work2-text { font-size: 1.05rem; }
}


/* ===== Planning & Strategy Section (we_work3) ===== */
.we_work3-con {
  padding: 20px;
  background: #00a89d;
  color: #fff;
  text-align: center;
  border-radius: 8px;
}

.we_work3-title h2 {
  font-weight: 700;
  font-size: 30px;
  margin-bottom: 15px;
  color: #ffffff;
}

.we_work3-text p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 20px;
  color: #f8f9fa;
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
}

.we_work3-list {
  padding-left: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 60px; /* spacing between bullets */
  list-style: none;
}

.we_work3-list li {
  position: relative;
  padding-left: 18px; /* space for bullet */
  text-align: left;
}

.we_work3-list li::before {
  content: "•";
  color: #fff;
  font-size: 1.2rem;
  position: absolute;
  left: 0;
  top: 0;
}

.we_work3-img img {
  max-width: 90%;
  border-radius: 10px;
}

/* ================= Responsive Tweaks ================= */

/* Extra Small Devices (Phones ≤480px / ≤576px) */
@media (max-width: 576px) {
  .we_work3-title h2 {
    font-size: 24px;
    line-height: 1.3;
  }
  .we_work3-text p {
    font-size: 0.9rem;
    max-width: 100%;
    text-align: justify;
  }
  .we_work3-list {
    flex-direction: column;
    text-align: justify;
    padding-left: 15px;
    gap: 10px;
  }
  .we_work3-list li {
    font-size: 0.9rem;
  }
}

/* Small Devices (Tablets 577px–768px) */
@media (min-width: 577px) and (max-width: 768px) {
  .we_work3-title h2 {
    font-size: 26px;
  }
  .we_work3-text p {
    font-size: 0.95rem;
    max-width: 90%;
  }
  .we_work3-list {
    gap: 15px 30px;
  }
  .we_work3-list li {
    font-size: 0.95rem;
  }
}

/* Medium Devices (Laptops 769px–992px) */
@media (min-width: 769px) and (max-width: 992px) {
  .we_work3-title h2 {
    font-size: 28px;
  }
  .we_work3-text p {
    font-size: 1rem;
  }
  .we_work3-list {
    gap: 20px 35px;
  }
}

/* Large Devices (Desktops 993px–1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
  .we_work3-title h2 {
    font-size: 30px;
  }
  .we_work3-text p {
    font-size: 1rem;
    max-width: 80%;
  }
}


/* ===== Design & User Experience Section (we_work4) ===== */
.we_work4-con {
  padding: 20px;
  border: 5px solid #ddd;
  border-radius: 20px;
  background: #fff;
  margin: 30px 0;
  align-items: center;
}

.we_work4-title h2 {
  font-weight: 700;
  font-size: 30px;
  margin-bottom: 15px;
  color: #000;
}

.we_work4-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  text-align: justify;
  margin-bottom: 20px;
}

.we_work4-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

.we_work4-list li {
  font-size: 15px;
  font-weight: 500;
  color: #000;
  position: relative;
  padding-left: 18px;
}

.we_work4-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 4px;
  color: #00a89d;
  font-size: 1.2rem;
  line-height: 1;
}

.we_work4-img img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

/* ================= Responsive Tweaks ================= */

/* Extra Small Devices (Phones ≤576px) */
@media (max-width: 576px) {
  .we_work4-title h2 {
    font-size: 22px;
    text-align: center;
  }
  .we_work4-text p {
    font-size: 14px;
    text-align: justify;
  }
  .we_work4-list {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
  }
  .we_work4-list li {
    font-size: 14px;
  }
  .we_work4-img img {
    max-width: 90%;
    margin-top: 20px;
  }
}

/* Small Devices (Tablets 577px–768px) */
@media (min-width: 577px) and (max-width: 768px) {
  .we_work4-title h2 {
    font-size: 24px;
    text-align: center;
  }
  .we_work4-text p {
    font-size: 15px;
  }
  .we_work4-list {
    gap: 10px 15px;
    margin-bottom: 20px;
  }
  .we_work4-img img {
    max-width: 70%;
    margin-top: 20px;
  }
}

/* Medium Devices (Small Laptops 769px–992px) */
@media (min-width: 769px) and (max-width: 992px) {
  .we_work4-title h2 {
    font-size: 26px;
  }
  .we_work4-text p {
    font-size: 15px;
  }
  .we_work4-list {
    gap: 12px 18px;
  }
  .we_work4-img img {
    max-width: 85%;
  }
}

/* Large Devices (Desktops 993px–1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
  .we_work4-title h2 {
    font-size: 28px;
  }
  .we_work4-text p {
    font-size: 15.5px;
  }
  .we_work4-img img {
    max-width: 430px;
  }
}


/* ===== Development & Implementation Section (we_work5) ===== */
.we_work5-con {
  padding: 20px;
  border: 5px solid #ddd;
  border-radius: 20px;
  background: #fff;
  margin: 30px 0;
  align-items: center;
}

.we_work5-title h2 {
  font-weight: 700;
  font-size: 30px;
  margin-bottom: 15px;
  color: #000;
}

.we_work5-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin-bottom: 20px;
  text-align: justify;
}

.we_work5-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}

.we_work5-list li {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  position: relative;
  padding-left: 18px;
}

.we_work5-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 4px;
  color: #00a89d;
  font-size: 1.2rem;
  line-height: 1;
}

.we_work5-img img {
  max-width: 350px;
  height: auto;
  border-radius: 10px;
}

/* ================= Responsive Tweaks ================= */

/* Extra Small Devices (Phones ≤576px) */
@media (max-width: 576px) {
  .we_work5-title h2 {
    font-size: 20px;
    text-align: center;
    margin-top: 20px;
  }
  .we_work5-text p {
    font-size: 14px;
  }
  .we_work5-list {
    flex-direction: column;
    gap: 8px;
  }
  .we_work5-list li {
    font-size: 14px;
  }
  .we_work5-img img {
    max-width: 85%;
    margin-bottom: 20px;
  }
}

/* Small Devices (Tablets 577px–768px) */
@media (min-width: 577px) and (max-width: 768px) {
  .we_work5-title h2 {
    font-size: 18px;
  }
  .we_work5-text p {
    font-size: 15px;
  }
  .we_work5-list {
    gap: 10px 15px;
  }
  .we_work5-img img {
    max-width: 100%;
    margin-bottom: 20px;
  }
}

/* Medium Devices (Small Laptops 769px–992px) */
@media (min-width: 769px) and (max-width: 992px) {
  .we_work5-title h2 {
    font-size: 26px;
  }
  .we_work5-text p {
    font-size: 15px;
  }
  .we_work5-list {
    gap: 12px 18px;
  }
  .we_work5-img img {
    max-width: 85%;
  }
}

/* Large Devices (Desktops 993px–1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
  .we_work5-title h2 {
    font-size: 28px;
  }
  .we_work5-text p {
    font-size: 15.5px;
  }
  .we_work5-img img {
    max-width: 90%;
  }
}


/* ===== Design & User Experience Section (we_work6) ===== */
.we_work6-con {
  padding: 20px;
  border: 5px solid #ddd;
  border-radius: 20px;
  background: #fff;
  margin: 30px 0;
  align-items: center;
}

.we_work6-title h2 {
  font-weight: 700;
  font-size: 30px;
  margin-bottom: 15px;
  color: #000;
}

.we_work6-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  text-align: justify;
  margin-bottom: 20px;
}

.we_work6-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}

.we_work6-list li {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  position: relative;
  padding-left: 18px;
}

.we_work6-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 4px;
  color: #00a89d;
  font-size: 1.2rem;
  line-height: 1;
}

.we_work6-img img {
  max-width: 450px;
  height: auto;
  border-radius: 10px;
}

/* ================= Responsive Tweaks ================= */

/* Extra Small Devices (Phones ≤576px) */
@media (max-width: 576px) {
  .we_work6-title h2 {
    font-size: 22px;
    text-align: center;
  }
  .we_work6-text p {
    font-size: 14px;
  }
  .we_work6-list {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
  }
  .we_work6-list li {
    font-size: 14px;
  }
  .we_work6-img img {
    max-width: 85%;
    margin-top: 20px;
  }
}

/* Small Devices (Tablets 577px–768px) */
@media (min-width: 577px) and (max-width: 768px) {
  .we_work6-title h2 {
    font-size: 18px;
  }
  .we_work6-text p {
    font-size: 15px;
  }
  .we_work6-list {
    gap: 10px 15px;
  }
  .we_work6-img img {
    max-width: 110%;
    margin-top: 20px;
  }
}

/* Medium Devices (Small Laptops 769px–992px) */
@media (min-width: 769px) and (max-width: 992px) {
  .we_work6-title h2 {
    font-size: 26px;
  }
  .we_work6-text p {
    font-size: 15px;
  }
  .we_work6-list {
    gap: 12px 18px;
  }
  .we_work6-img img {
    max-width: 85%;
  }
}

/* Large Devices (Desktops 993px–1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
  .we_work6-title h2 {
    font-size: 28px;
  }
  .we_work6-text p {
    font-size: 15.5px;
  }
  .we_work6-img img {
    max-width: 100%;
  }
}

/* ===== Development & Implementation Section (we_work7) ===== */
.we_work7-con {
  padding: 20px;
  border: 5px solid #ddd;
  border-radius: 20px;
  background: #fff;
  margin: 30px 0;
  align-items: center;
}

.we_work7-title h2 {
  font-weight: 700;
  font-size: 30px;
  margin-bottom: 15px;
  color: #000;
}

.we_work7-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  text-align: justify;
  margin-bottom: 20px;
}

.we_work7-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}

.we_work7-list li {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  position: relative;
  padding-left: 18px;
}

.we_work7-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 4px;
  color: #00a89d;
  font-size: 1.2rem;
  line-height: 1;
}

.we_work7-img img {
  max-width: 400px;
  height: auto;
  border-radius: 10px;
}

/* ================= Responsive Tweaks ================= */

/* Extra Small Devices (Phones ≤576px) */
@media (max-width: 576px) {
  .we_work7-title h2 {
    font-size: 20px;
    text-align: center;
  }
  .we_work7-text p {
    font-size: 14px;
  }
  .we_work7-list {
    flex-direction: column;
    gap: 8px;
  }
  .we_work7-list li {
    font-size: 14px;
  }
  .we_work7-img img {
    max-width: 85%;
    margin-bottom: 20px;
  }
}

/* Small Devices (Tablets 577px–768px) */
@media (min-width: 577px) and (max-width: 768px) {
  .we_work7-title h2 {
    font-size: 18px;
  }
  .we_work7-text p {
    font-size: 15px;
  }
  .we_work7-list {
    gap: 10px 18px;
  }
  .we_work7-img img {
    max-width: 105%;
    margin-bottom: 20px;
  }
}

/* Medium Devices (Small Laptops 769px–992px) */
@media (min-width: 769px) and (max-width: 992px) {
  .we_work7-title h2 {
    font-size: 26px;
  }
  .we_work7-text p {
    font-size: 15px;
  }
  .we_work7-list {
    gap: 12px 20px;
  }
  .we_work7-img img {
    max-width: 85%;
  }
}

/* Large Devices (Desktops 993px–1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
  .we_work7-title h2 {
    font-size: 28px;
  }
  .we_work7-text p {
    font-size: 15.5px;
  }
  .we_work7-img img {
    max-width: 100%;
  }
}


/* ===== Design & User Experience Section (we_work8) ===== */
.we_work8-con {
  padding: 20px;
  border: 5px solid #ddd;
  border-radius: 20px;
  background: #fff;
  margin: 30px 0;
  align-items: center;
}

.we_work8-title h2 {
  font-weight: 700;
  font-size: 30px;
  margin-bottom: 15px;
  color: #000;
}

.we_work8-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  text-align: justify;
  margin-bottom: 20px;
}

.we_work8-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}

.we_work8-list li {
  font-size: 15px;
  font-weight: 600;
  color: #000;
  position: relative;
  padding-left: 18px;
}

.we_work8-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 4px;
  color: #00a89d;
  font-size: 1.2rem;
  line-height: 1;
}

.we_work8-img img {
  max-width: 370px;
  height: auto;
  border-radius: 10px;
}

/* ================= Responsive Breakpoints ================= */

/* Extra Small Devices (Phones ≤576px) */
@media (max-width: 576px) {
  .we_work8-title h2 {
    font-size: 22px;
    text-align: center;
  }
  .we_work8-text p {
    font-size: 14px;
    text-align: left;
  }
  .we_work8-list {
    flex-direction: column;
    margin-bottom: 20px;
    gap: 6px;
  }
  .we_work8-list li {
    font-size: 14px;
  }
  .we_work8-img img {
    max-width: 80%;
    margin-top: 20px;
  }
}

/* Small Devices (Tablets 577px–768px) */
@media (min-width: 577px) and (max-width: 768px) {
  .we_work8-title h2 {
    font-size: 18px;
  }
  .we_work8-text p {
    font-size: 15px;
  }
  .we_work8-list {
    gap: 8px 16px;
  }
  .we_work8-img img {
    max-width: 110%;
    margin-top: 15px;
  }
}

/* Medium Devices (Small Laptops 769px–992px) */
@media (min-width: 769px) and (max-width: 992px) {
  .we_work8-title h2 {
    font-size: 26px;
  }
  .we_work8-text p {
    font-size: 15px;
  }
  .we_work8-list {
    gap: 10px 18px;
  }
  .we_work8-img img {
    max-width: 90%;
  }
}

/* Large Devices (Desktops 993px–1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
  .we_work8-title h2 {
    font-size: 28px;
  }
  .we_work8-text p {
    font-size: 15.5px;
  }
  .we_work8-img img {
    max-width: 110%;
  }
}


/* ===== Why Our Process Works (we_work9) ===== */
.we_work9-con {
    padding: 20px;
}

.we_work9-title {
    font-weight: 700;
    font-size: 30px;
    margin-bottom: 30px;
    color: #000;
}

.we_work9-card {
    border: 3px solid #ddd;
    border-radius: 20px;
    padding: 30px 20px;
    height: 100%;
    background: #fff;
    transition: all 0.3s ease;
}

.we_work9-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.we_work9-card h4 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #000;
}

.we_work9-card p {
    font-size: 1rem;
    color: #000000;
    margin: 0;
}

.we_work9-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

/* ===== Responsive Design ===== */

/* Extra Small Devices (max-width: 480px / 576px) */
@media (max-width: 576px) {
    .we_work9-title {
        font-size: 22px;
        margin-bottom: 20px;
    }
    .we_work9-card {
        padding: 20px 15px;
    }
    .we_work9-card h4 {
        font-size: 1.1rem;
    }
    .we_work9-card p {
        font-size: 0.9rem;
    }
    .we_work9-icon img {
        width: 60px;
        height: 60px;
    }
}

/* Small Devices (Tablets: 577px - 768px) */
@media (min-width: 577px) and (max-width: 768px) {
    .we_work9-title {
        font-size: 24px;
    }
    .we_work9-card {
        padding: 25px 18px;
    }
    .we_work9-card h4 {
        font-size: 1.15rem;
    }
    .we_work9-card p {
        font-size: 0.95rem;
    }
}

/* Medium Devices (Small Laptops: 769px - 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    .we_work9-title {
        font-size: 26px;
    }
    .we_work9-card {
        padding: 28px 20px;
    }
    .we_work9-card h4 {
        font-size: 1.2rem;
    }
}

/* Large Devices (Desktops: 993px - 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
    .we_work9-title {
        font-size: 28px;
    }
    .we_work9-card {
        padding: 30px 22px;
    }
}

/* ===== Planning & Strategy Section (we_work10) ===== */
.we_work10-con {
    padding: 40px;
    background-color: #00a89d;
    color: #fff;
    text-align: center;
    position: relative; /* Needed for pseudo elements */
}

/* Corner accents */
.we_work10-con::before,
.we_work10-con::after {
    content: "";
    position: absolute;
    width: 38px;
    height: 38px;
    border: 4px solid #fff;
}

.we_work10-con::before {
    top: 20px;
    left: 60px;
    border-right: none;
    border-bottom: none;
}

.we_work10-con::after {
    bottom: 14px;
    right: 60px;
    border-left: none;
    border-top: none;
}

.we_work10-title h2 {
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 15px;
    color: #ffffff;
}

.we_work10-text p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #f8f9fa;
    max-width: 85%;
    margin: auto;
}

/* ===== Responsive Design ===== */

/* Extra Small Devices (≤576px) */
@media (max-width: 576px) {
    .we_work10-con {
        padding: 25px 15px;
    }
    .we_work10-title h2 {
        font-size: 22px;
        line-height: 1.4;
    }
    .we_work10-text p {
        font-size: 0.9rem;
        max-width: 100%;
    }
    .we_work10-con::before,
    .we_work10-con::after {
        width: 25px;
        height: 25px;
        border-width: 3px;
    }
    .we_work10-con::before {
        top: 10px;
        left: 20px;
    }
    .we_work10-con::after {
        bottom: 10px;
        right: 20px;
    }
}

/* Small Devices (577px - 768px) */
@media (min-width: 577px) and (max-width: 768px) {
    .we_work10-con{
        width: 100%;
    }
    .we_work10-title h2 {
        font-size: 26px;
    }
    .we_work10-text p {
        font-size: 0.95rem;
        max-width: 95%;
    }
    .we_work10-con::before {
        left: 30px;
    }
    .we_work10-con::after {
        right: 30px;
    }
}

/* Medium Devices (769px - 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    .we_work10-title h2 {
        font-size: 28px;
    }
    .we_work10-text p {
        font-size: 1rem;
        max-width: 90%;
    }
}

/* Large Devices (993px - 1200px) */
@media (min-width: 993px) and (max-width: 1200px) {
    .we_work10-con{
        width: 100%;
        border-radius: 10px;
    }

    .we_work10-title h2 {
        font-size: 30px;
    }
    .we_work10-text p {
        font-size: 1rem;
        max-width: 85%;
    }
}