section.sewree {
  padding: 60px 20px;
  line-height: 1.6;
  background-color: #fffdfa;
}

.container-sewree {
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

section.sewree img {
  max-width: 100%;
  display: block;
  height: auto;
}

section.sewree h1, section.sewree h2, section.sewree h3 {
  margin-bottom: 20px;
  color:#5c4e3d;
  font-family:'Merriweather';
  font-weight:normal;
  line-height:1.4;
}

section.sewree p {
  margin-bottom: 20px;
  color:#5c4e3d;
  font-weight: 500;
  font-family: 'Raleway',sans-serif;
  font-size:15px;
}

section.sewree .cta {
  display: inline-block;
  margin-top: 10px;
  background: #ffffff;
  color: #ab8421;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 4px;
  border:1px solid #ab8421;
}
section.sewree .cta:hover {background:#ab8421; color:#ffffff;}

/* ---------- SECTION 1 ---------- */
.section-1 .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.section-1 {padding-top:0;}
.section-1 h1 {font-size:35px; font-weight:normal;}
.section-1 .content {width:700px;}
/* ---------- SECTION 2 ---------- */
.section-2 .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.section-2 .text {width:700px;}
.section-2 h2 {font-size:35px; text-align:left;}
.section-2 span {font-style:italic;}
/* ---------- SECTION 3 ---------- */
.section-3 .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.section-3 .content {width:900px}
.section-3 h2 {font-size:35px;}
.section-3 h3 {margin-bottom:8px;}
.section-3 .icon-sec {display: flex;align-items: center;justify-content: space-between;gap: 20px; margin-bottom:20px;}

.section-3 .icon-left-sec {width: 260px;}
/* ---------- SECTION 4 ---------- */
.section-4 .boxes {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.section-4 .box {
  flex: 1;
  align-items: flex-start;
  gap: 15px;
  background: #f7edd4;
  padding: 20px;
  border-radius: 8px;
  border:1px solid #e5ddc8;
}
.section-4 h2 {font-size:35px;}
.section-4 h3 {margin-bottom:8px;}
.section-4 .icon {background: #b88e23; border-radius: 50px; width: 50px; height: 50px; padding: 12px; margin:0 0 10px 0;}
/* ---------- SECTION 5 ---------- */
.section-5 .timeline {
  margin-top: 20px;
}

.section-5 .timeline-item {
  margin-bottom: -60px;
}
.section-5 h2 {font-size:35px;}

/* ---------- SECTION 6 ---------- */
.section-6 {
  position: relative;
  color: #5c4e3d;
  overflow:hidden;
  padding: 150px 20px;
}
.section-6::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('https://beta.rustomjee.com/assets/front/img/bg.jpg') center/cover no-repeat;
  z-index: 0;
}

.section-6 .overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5);
}

.section-6 .container-sewree {
  position: relative;
  z-index: 2;
}

.section-6 .boxes {
  display: flex;
  gap: 30px;
  margin-top: 30px;
}

.section-6 .box {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: rgba(255, 255, 255, 0.15);
  padding: 0px;
  border-radius: 8px;
}
.section-6 h2 {font-size:35px;}
.section-6 h3 {margin-bottom:8px;}
.section-6 .icon {width: 120px; height: 120px;}
.section-6 .boxes {text-align:left;}
.section-7 {padding:150px 20px;}
.section-7 h2 {font-size:35px;}
/* ---------- SECTION 8 ---------- */
.section-8 .columns {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.section-8 .col {
  flex: 1;
  padding: 20px;
  border-radius: 6px;
  text-align: left;
}
.section-8 h2 {font-size:35px;}
.section-8 img {margin-bottom:50px;}
.section-8 .col .nos {background:#f7edd4; border:1px solid #ddd3ba; border-radius:25px; padding:4px; margin-bottom:20px; font-size:24px; font-family:'Merriweather'; text-align:center;}
.section-8 .col-content h3 {margin-bottom:8px; font-size:22px; font-style:italic; font-weight:bold;}
/* ---------- SECTION 9 ---------- */
.section-9 .inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.section-9 .image {
  flex: 0 0 40%;
  position:relative;
  display:inline-block;
}
.section-9 .image img {
  max-width: 100%;
  display: block;
  height: auto;
  width:100%;
}
.section-9 .image .caption {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  padding: 4px 8px;
  border-radius: 0;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}
.section-9 h2 {font-size:35px; margin-bottom:30px;}
.section-9 h3 {font-size:26px;}
/* ---------- SECTION 10 ---------- */
.section-10 .content {text-align:left;}
.section-10 .inner {
  display: flex;
  align-items: center;
  gap: 40px;
}

.section-10 .image {
  flex: 0 0 40%;
}
.section-10 h2 {font-size:35px;}
.section-10 ul li {margin-left:18px; line-height:1.8; list-style-type:disc; color:#5c4e3d}
/* ---------- SECTION 11 ---------- */
.section-11 .boxes {
  display: flex;
  flex-wrap: wrap; /* allows boxes to wrap to new rows */
  gap: 30px;
  margin-top: 30px;
}
.section-11 .box {
  flex: 1 1 calc(50% - 30px); /* two boxes per row, accounting for gap */
  background: #ffffff;
  padding: 30px;
  border-radius: 8px;
  text-align: left;
  box-sizing: border-box;
  border:1px solid #ddd3ba;
}

.section-11 h2 {font-size:35px;}
/* ===== TIMELINE SECTION ===== */

.timeline {
  position: relative;
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

/* Vertical Center Line */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background-color: #e5ddc8;
  transform: translateX(-50%);
}

/* Timeline Item */
.timeline-item {
  position: relative;
  width: 50%;
  padding: 40px 0;
}

.timeline-item .content {
  position: relative;
  display: flex;
  align-items: center;
}

/* Number Circle */
.timeline-item .circle {
  position: absolute;
  top: 0;
  left: 100%;
  transform: translate(-50%, 0);
  background-color: #f7edd4;
  border: 3px solid #e5ddc8;
  color:#5c4e3d;
  border-radius:10px;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  z-index: 2;
}
.timeline-item:nth-child(2) .circle {
    left: 0;
}
/* Text Boxes */
.timeline-item .text-box {
  background: none;
  padding: 0 20px;
  border-radius: 8px;
  width: 80%;
}

/* LEFT SIDE ITEMS */
.timeline-item.left {
  left: 0;
  text-align: right;
}

.timeline-item.left .text-box {
  margin-right: auto;
  position: relative;
}

.timeline-item.left .text-box::before {
  content: "";
  position: absolute;
  top: 20px;
  right: -70px;
  width: 70px;
  height: 2px;
  background: #e5ddc8;
}
/* RIGHT SIDE ITEMS */
.timeline-item.right {
  left: 50%;
  text-align: left;
}

.timeline-item.right .text-box {
  margin-left: auto;
  position: relative;
}

.timeline-item.right .text-box::before {
  content: "";
  position: absolute;
  top: 20px;
  left: -70px;
  width: 70px;
  height: 2px;
  background: #e5ddc8;
}
.image {
    position: relative;
    display: inline-block;
}
.caption {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 4px 8px;
    border-radius: 0;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}
/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {

  .section-1 .inner,
  .section-2 .inner,
  .section-3 .inner,
  .section-4 .boxes,
  .section-6 .boxes,
  .section-8 .columns,
  .section-9 .inner,
  .section-10 .inner,
  .section-11 .boxes {
    flex-direction: column;
    text-align: center;
  }

  .section-1 .content {
    order: 2;
  }

  .section-1 .image {
    order: 1;
  }
  .section-1 .content {width:100%;}
  .section-2 .text {width:100%;}
  .section-3 .content {width:100%}
  .section-4 .box,
  .section-6 .box {
    justify-content: center;
  }
  .section-11 .box {
    flex: 1 1 100%;
  }
  .section-1 h1 {font-size:30px;}
  .section-2 h2 {text-align:center; font-size:25px;}
  .section-3 h2 {font-size:25px;}
  .section-4 h2 {font-size:25px;}
  .section-4 .icon {margin:0 auto 10px auto;}
  .section-5 h2 {font-size:25px;}
  .section-6 h2 {font-size:25px;}
  .section-6 .boxes {text-align:left;}
  .section-7 h2 {font-size:25px;}
  .section-8 h2 {font-size:25px;}
  .section-9 h2 {font-size:25px;}
  .section-10 h2 {font-size:25px;}
  .section-10 .content {text-align:left;}
  .section-11 h2 {font-size:25px;}
  .section-11 .box {padding:16px;}
  .timeline::before {
    left: 10px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 40px;
    text-align: left !important;
  }

  .timeline-item .circle {
    left: 0;
    transform: none;
  }

  .timeline-item .text-box {
    width: calc(100% - 60px);
  }

  .timeline-item .text-box::before {
    display: none; /* Hide connecting lines on mobile for clarity */
  }
  .timeline-item.left .text-box {margin-right:0; margin-left:auto;}
  .timeline-item.right {left:0;}
}