main {
  background-image:
    url("https://wordpress-1282246-5790211.cloudwaysapps.com/wp-content/uploads/2026/03/background-scaled.png"),
    url("https://wordpress-1282246-5790211.cloudwaysapps.com/wp-content/uploads/2026/03/background-scaled.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position:
    top 46.46vw left 0,
    top 200vw left 0;
  width: 100%;
}

/* Section 1 */
.s1 {
  background-image: url("https://wordpress-1282246-5790211.cloudwaysapps.com/wp-content/uploads/2026/03/case-study.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 40.94vw;
  padding-inline: 14.58vw;
  padding-block: 13.07vw 10.37vw;
  position: relative;
  z-index: 1;
}

.s1::before {
  content: "";
  background-image:
    linear-gradient(
      180deg,
      #ffffff00 0%,
      #ffffffa5 50%,
      #ffffffd4 65.38%,
      #fffffff0 79.81%,
      #ffffff 95.67%
    ),
    linear-gradient(90deg, #000000 0%, #00000000 100%);
  background-size:
    100% 21.9vw,
    cover;
  background-position: bottom -2px left, center;
  background-repeat: no-repeat;
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: -1;
}

.s1 h2 {
  color: #199def;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.67vw;
  line-height: 1;
}

.s1 h1 {
  color: white;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 4.17vw;
  line-height: 1.17;
}

/* Section 2 */
.s2 {
  display: flex;
  gap: 3.93vw;
  padding-inline: 14.58vw;
}

.s2 div {
  flex: 1;
}

.s2 h2 {
  color: black;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 2.6vw;
  line-height: 1;
  margin-bottom: 1.25vw;
}

.s2 p {
  color: black;
  font-family: "Manrope", sans-serif;
  font-weight: 300;
  font-size: 1.15vw;
  line-height: 1.75;
  margin-bottom: 0;
}

.s2 p:first-of-type {
  margin-bottom: 4.32vw;
}

.s2 img {
  width: 26.64vw;
  height: 32.5vw;
  object-fit: contain;
  border-radius: 1.04vw;
}

/* Section 3 */
.s3 {
  padding-inline: 14.58vw;
  padding-block: 10.42vw 9.89vw;
}

.s3 h2 {
  color: black;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 2.6vw;
  line-height: 1;
  margin-bottom: 4.17vw;
}

.s3 ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.88vw;
  margin: 0;
}

.s3 li {
  background: white;
  text-align: center;
  flex: 1 1 22%;
  padding-inline: 1.56vw;
  padding-block: 2.08vw;
  border-radius: 1.3vw;
  box-shadow: 0 0 16.6px -6px #00000012;
}

.s3 img {
  height: 4.95vw;
  margin-bottom: 1.56vw;
}

.s3 h3 {
  color: black;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 1.04vw;
  line-height: 1.25;
  margin-bottom: 0.78vw;
}

.s3 p {
  color: black;
  font-family: "Manrope", sans-serif;
  font-weight: 300;
  font-size: 1.04vw;
  line-height: 1.57;
  margin-bottom: 0;
}

/* Section 4 */
.s4 {
  padding-inline: 14.58vw;
}

.s4 div {
  display: flex;
  gap: 9.58vw;
  margin-bottom: 3.96vw;
}

.s4 h2 {
  color: black;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 2.6vw;
  line-height: 1;
}

.s4 p {
  color: black;
  font-family: "Manrope", sans-serif;
  font-weight: 300;
  font-size: 1.15vw;
  line-height: 1.94;
  margin-bottom: 0;
}

.s4 details {
  padding-block: 1.93vw;
  margin-inline: 2.08vw;
  border-bottom: 1.12px solid #eaeaea;
}

.s4 summary {
  color: black;
  font-weight: 500;
  font-family: "Manrope", sans-serif;
  font-size: 1.15vw;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.s4 summary::after {
  content: "+";
  font-size: 2vw;
  font-weight: 300;
}

.s4 summary ~ * {
  color: black;
  font-family: "Manrope", sans-serif;
  font-weight: 300;
  font-size: 1.04vw;
  line-height: 1.69;
  padding-right: 10vw;
  margin-top: 0.74vw;
  margin-bottom: 0;
}

.s4 details[open] {
  background: white;
  padding-inline: 2.24vw;
  margin-inline: 0;
  border-radius: 1.07vw;
  box-shadow: 0 0 13.39px -6.18px #00000040;
}

.s4 details[open] summary {
  color: #199def;
  font-weight: 700;
}

.s4 details[open] summary::after {
  content: "-";
  font-size: 3vw;
}

/* Section 5 */
.s5 {
  padding-inline: 20.31vw;
  padding-block: 7.81vw;
}

.s5 h2 {
  color: black;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 2.6vw;
  line-height: 1;
  text-align: center;
  margin-bottom: 3.44vw;
}

.s5 ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3.96vw 5.21vw;
  margin: 0;
}

.s5 li {
  background: white;
  text-align: center;
  flex: 0 0 calc(33.33% - (5.21vw * 2 / 3));
  padding-inline: 1.56vw;
  padding-block: 2.57vw 2.52vw;
  border-radius: 1.3vw;
  box-shadow: 0 0 9.66px -4.46px #00000080;
}

.s5 img {
  height: 5.51vw;
  margin-bottom: 1.41vw;
}

.s5 h3 {
  color: black;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 1.04vw;
  line-height: 1.25;
}

/* Section 6 */
.s6 {
  padding-inline: 14.58vw;
}

.s6 img {
  width: 100%;
  height: 22.54vw;
  object-fit: cover;
  border-radius: 1.04vw;
}

/* Section 7 */
.s7 {
  display: flex;
  gap: 11.98vw;
  padding-inline: 14.58vw;
  padding-block: 7.81vw;
}

.s7 ul {
  list-style: none;
  margin: 0;
}

.s7 li {
  color: black;
  background: white;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  font-size: 1.04vw;
  line-height: 1.75;
  padding-inline: 2.15vw;
  padding-block: 1.38vw;
  margin-bottom: 1.56vw;
  border-radius: 1.07vw;
  box-shadow: 0 0 13.39px -6.18px #00000040;
}

.s7 b {
  color: #199def;
}

.s7 h2 {
  color: black;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 2.6vw;
  line-height: 1;
}

/* Section 8 */
.s8 {
  padding-inline: 14.58vw;
}

.s8 h2 {
  color: black;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 2.6vw;
  line-height: 1;
  margin-bottom: 1.25vw;
}

.s8 p {
  color: black;
  font-family: "Manrope", sans-serif;
  font-weight: 300;
  font-size: 1.15vw;
  line-height: 1.75;
  margin-bottom: 0;
}

.s8 p:nth-of-type(1) {
  margin-bottom: 7.81vw;
}

/* Mobile */
@media (max-width: 768px) {
  /* Section 1 */
  .s1 {
    min-height: 162.29vw;
    padding-inline: 6.62vw;
    padding-block: 40.33vw 34.86vw;
    margin-bottom: -29.09vw;
  }

  .s1::before {
    background:
      linear-gradient(
        180deg,
        #ffffff00 0%,
        #ffffff9c 47.6%,
        #ffffffd4 65.38%,
        #fffffff0 79.81%,
        #ffffff 95.67%
      ),
      linear-gradient(0deg, #00000094, #00000094);
    background-size:
      100% 74.81vw,
      cover;
    background-position: bottom, center;
    background-repeat: no-repeat;
  }

  .s1 h2 {
    font-size: 5.09vw;
    line-height: 2;
  }

  .s1 h1 {
    font-size: 7.63vw;
    line-height: 1.3;
  }

  /* Section 2 */
  .s2 {
    flex-direction: column;
    gap: 9.16vw;
    padding-inline: 6.62vw;
    position: relative;
    z-index: 1;
  }

  .s2 h2 {
    font-size: 7.63vw;
    margin-bottom: 3.05vw;
  }

  .s2 p {
    font-size: 3.56vw;
    line-height: 1.71;
  }

  .s2 p:first-of-type {
    margin-bottom: 9.16vw;
  }

  .s2 img {
    width: 100%;
    height: 106.47vw;
    border-radius: 5.09vw;
  }

  /* Section 3 */
  .s3 {
    padding-inline: 6.62vw;
    padding-block: 21.63vw;
  }

  .s3 h2 {
    font-size: 7.63vw;
    text-align: center;
    margin-bottom: 9.16vw;
  }

  .s3 ul {
    gap: 6.36vw;
  }

  .s3 li {
    flex: 1 1 22%;
    padding-inline: 5.09vw;
    padding-block: 6.11vw;
    border-radius: 6.36vw;
  }

  .s3 img {
    height: 15.27vw;
    margin-bottom: 4.58vw;
  }

  .s3 h3 {
    font-size: 4.07vw;
    line-height: 1.56;
    margin-bottom: 1.53vw;
  }

  .s3 p {
    font-size: 3.05vw;
    line-height: 1.57;
  }

  /* Section 4 */
  .s4 {
    padding-inline: 6.62vw;
  }

  .s4 div {
    flex-direction: column;
    gap: 3.05vw;
  }

  .s4 h2 {
    font-size: 7.63vw;
  }

  .s4 p {
    font-size: 3.56vw;
    line-height: 1.71;
  }

  .s4 details {
    padding-block: 3.82vw;
  }

  .s4 summary {
    font-size: 5.09vw;
    line-height: 1.5;
    gap: 7.63vw;
  }

  .s4 summary::after {
    font-size: 6vw;
  }

  .s4 details[open] summary::after {
    font-size: 8vw;
  }

  /* Section 5 */
  .s5 {
    padding-inline: 6.62vw;
    padding-block: 21.63vw;
  }

  .s5 h2 {
    font-size: 7.63vw;
    margin-bottom: 7.12vw;
  }

  .s5 ul {
    gap: 6.11vw;
  }

  .s5 li {
    flex: 0 0 calc(50% - (6.11vw / 2));
    padding-inline: 3.82vw;
    padding-block: 9.62vw;
    border-radius: 3.63vw;
  }

  .s5 img {
    height: 16.32vw;
    margin-bottom: 2.77vw;
  }

  .s5 h3 {
    font-size: 3.05vw;
    line-height: 1.6;
  }

  /* Section 6 */
  .s6 {
    padding-inline: 6.62vw;
  }

  .s6 img {
    height: 100.9vw;
    border-radius: 5.09vw;
  }

  /* Section 7 */
  .s7 {
    flex-direction: column;
    gap: 7.12vw;
    padding-inline: 6.62vw;
    padding-block: 21.63vw;
  }

  .s7 h2 {
    font-size: 7.63vw;
  }

  .s7 li {
    font-size: 3.05vw;
    line-height: 1.6;
    padding-inline: 3.82vw;
    padding-block: 9.62vw;
    margin-bottom: 3.82vw;
    border-radius: 3.63vw;
  }

  /* Section 8 */
  .s8 {
    padding-inline: 6.62vw;
  }

  .s8 h2 {
    font-size: 7.63vw;
    margin-bottom: 3.05vw;
  }

  .s8 p {
    font-size: 3.56vw;
    line-height: 1.71;
  }

  .s8 p:nth-of-type(1) {
    margin-bottom: 9.16vw;
  }
}