/* SECTION 1 (what is settelment and mediation) */
.mediation-container {
  width: 100%;
  padding: 0 20px;
  background-color: var(--color-mist-green);
}

.mediation-wrapper {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 80px 0;
  padding-top: 50px;
}

.mediation-content {
  max-width: 632px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(35px, 5.5vw, 40px);
}

.mediation-head-para {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.mediation-head-para p {
  max-width: 602px;
}

.mediation-point-list {
  max-width: 510px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.mediation-point-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
  padding-left: 0;
  padding-right: 21px;
}

.mediation-point-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mediation-point-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mediation-image-layout {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 442px;
}

.mediation-image-deco {
  display: flex;
  justify-content: center;
  align-items: center;

  margin-right: -116px;
  margin-top: -200px;
}

.mediation-image-deco img {
  max-width: 116px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.mediation-image-main {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mediation-image-main img {
  max-width: 454px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .mediation-wrapper {
    gap: 40px;
  }

  .mediation-point-list {
    max-width: 450px;
    gap: 30px;
  }

  .mediation-point-item {
    padding: 0;
  }
}

@media (max-width: 1023.98px) {
  .mediation-wrapper {
    padding: 60px 0;
    padding-top: 40px;
    gap: clamp(35px, 6.6vw, 50px);
    flex-direction: column;
  }

  .mediation-content {
    align-items: center;
  }

  .mediation-head-para {
    gap: 10px;
    align-items: center;
    text-align: center;
  }

  .mediation-head-para p {
    max-width: 508px;
  }

  .mediation-point-item {
    gap: 25px;
  }
}

@media (max-width: 640.98px) {
  .mediation-wrapper {
    padding: 50px 0;
    padding-top: 35px;
    gap: 35px;
  }

  .mediation-point-list {
    padding: 0 6px;
  }

  .mediation-point-item {
    gap: 20px;
    align-items: flex-start;
  }

  .mediation-point-icon img {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 500px) {
  .mediation-container {
    padding: 0 16px;
  }

  .mediation-content {
    max-width: 335px;
  }

  .mediation-image-layout {
    min-width: unset;
  }

  .mediation-image-deco {
    margin-right: -84px;
    margin-top: -138px;
  }

  .mediation-image-deco img {
    max-width: 84px;
  }

  .mediation-image-main img {
    max-width: 335px;
  }
}

/* SECTION 2 (why choose mediation over court) */
.choose-container {
  width: 100%;
  padding: 0 20px;
}

.choose-wrapper {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(47px, 6.25vw, 80px);
  padding: 80px 0;
}

.choose-visual {
  display: flex;
  flex-direction: column;
  min-width: 332px;
}

.choose-image-primary {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: 58px;
}

.choose-image-primary img {
  max-width: 312px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.choose-image-stack {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;

  margin-top: -58px;
}

.choose-experience-card {
  aspect-ratio: 138 / 113;
  max-width: 138px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px 6px;
  border-radius: 13px;
  background-color: var(--color-green);
  color: var(--color-white);

  margin-bottom: 20px;
}

.choose-experience-card span {
  font-size: 26px;
  line-height: 36px;
  font-weight: 600;
}

.choose-image-secondary {
  display: flex;
  justify-content: center;
  align-items: center;
}

.choose-image-secondary img {
  max-width: 224px;
  width: 100%;
  min-width: 196px;
  height: auto;
  object-fit: cover;
}

.choose-content {
  max-width: 610px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(35px, 5.3vw, 40px);
}

.choose-head-para {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.choose-head-para p {
  max-width: 446px;
}

.choose-point-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 45px;
}

.choose-point-item {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: default;
  padding-bottom: 10px;
  border-radius: 6px;
}

.choose-point-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.choose-point-item:nth-child(3) > .choose-point-text p {
  white-space: nowrap;
}

.choose-point-item:hover {
  transform: translateY(-5px);
  transition: all 0.3s ease;
  box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.14);
}

.choose-point-item:hover > .choose-point-text h3 {
  color: var(--color-green);
  transition: all 0.2s ease;
}

@media (max-width: 1125px) {
  .choose-wrapper {
    gap: 47px;
  }

  .choose-point-list {
    gap: 40px;
  }
}

@media (max-width: 1080px) {
  .choose-experience-card {
    max-width: 121px;
    padding: 4px 6px;
  }
}

@media (max-width: 1023.98px) {
  .choose-wrapper {
    padding: 60px 0;
    gap: clamp(35px, 6.6vw, 50px);
    flex-direction: column-reverse;
    align-items: center;
  }

  .choose-content {
    max-width: 645px;
    align-items: center;
  }

  .choose-head-para {
    gap: 10px;
    align-items: center;
    text-align: center;
  }

  .choose-image-primary img {
    max-width: 352px;
  }

  .choose-image-secondary img {
    max-width: 251px;
  }

  .choose-experience-card {
    max-width: 155px;
    padding: 15px 6px;
  }

  .choose-image-stack {
    gap: 19px;
  }
}

@media (max-width: 700px) {
  .choose-point-list {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

@media (max-width: 640.98px) {
  .choose-container {
    padding: 0 10px;
  }

  .choose-wrapper {
    padding: 50px 0;
    gap: 35px;
  }

  .choose-head {
    max-width: 300px;
  }

  .choose-point-item {
    gap: 20px;
  }

  .choose-point-icon img {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 480.98px) {
  .choose-content {
    max-width: 355px;
  }

  .choose-visual {
    min-width: unset;
    max-width: 332px;
  }

  .choose-image-primary img {
    max-width: 274px;
  }

  .choose-image-secondary img {
    max-width: 196px;
    min-width: unset;
  }

  .choose-experience-card {
    max-width: 121px;
    padding: 4px 6px;
  }

  .choose-image-stack {
    gap: 14px;
  }

  .choose-experience-card {
    margin-bottom: 16px;
  }
}

@media (max-width: 350px) {
  .choose-experience-card {
    margin-bottom: 0;
  }
}

/* SECTION 3 (how mediation help you) */
.solution-container {
  width: 100%;
  padding: 0 20px;
  background-color: var(--color-mist-green);
}

.solution-wrapper {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(35px, 5.3vw, 40px);
  padding: 80px 0;
}

.solution-head-para {
  align-items: center;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.solution-card-list {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.solution-card-item {
  max-width: 396px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 27px 38px;
  background-color: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.14);
  transition: all 0.25s ease;
  cursor: default;
}

.solution-card-item:hover {
  background-color: var(--color-green);
  color: var(--color-white);
  transition: all 0.25s ease;
}

.solution-card-item:hover .solution-card-icon {
  background-color: var(--color-white);
  transition: all 0.2s ease;
}

.solution-card-item:hover .solution-card-text {
  color: var(--color-white);
  transition: all 0.2s ease;
}

.solution-card-item:hover .solution-card-text h3 {
  color: var(--color-white);
  transition: all 0.2s ease;
}

.solution-card-item:hover .solution-card-icon.c1 img {
  content: url("../../assets/icons/legal-advice-green-hover-icn.svg");
}

.solution-card-item:hover .solution-card-icon.c2 img {
  content: url("../../assets/icons/vision-2-green-hover-icn.svg");
}

.solution-card-item:hover .solution-card-icon.c3 img {
  content: url("../../assets/icons/approach-green-hover-icn.svg");
}

.solution-card-icon {
  width: 71px;
  height: 71px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  background-color: var(--color-green);
  margin-bottom: 6px;
}

.solution-card-text {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.solution-card-link {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 15px;
  text-decoration: underline;
  font-size: 15px;
  line-height: 24px;
  font-weight: 500;
}

.solution-link-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-mist-green);
}

@media (max-width: 1145px) {
  .solution-card-item {
    padding: 20px 18px;
  }
}

@media (max-width: 1023.98px) {
  .solution-wrapper {
    padding: 60px 0;
  }

  .solution-card-list {
    flex-wrap: wrap;
    gap: 30px;
  }

  .solution-card-item {
    max-width: 316px;
  }

  .solution-head-para p {
    max-width: 572px;
  }
}

@media (max-width: 640.98px) {
  .solution-container {
    padding: 0 10px;
  }

  .solution-wrapper {
    padding: 50px 0;
  }
}

@media (max-width: 480.98px) {
  .solution-head-para {
    max-width: 355px;
  }
}

/* SECTION 4 (choose mediation over court) */
.avoid-container {
  width: 100%;
  padding: 0 20px;
}

.avoid-wrapper {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(35px, 5.5vw, 40px);
  padding: 80px 0;
}

.avoid-head-para {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.avoid-point-list {
  max-width: 1088px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.avoid-point-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.avoid-point-icon {
  width: 61px;
  height: 61px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-mist-green);
  border: 1px solid var(--color-green);
}

@media (max-width: 1100px) {
  .avoid-point-list {
    gap: 30px 27px;
  }
}

@media (max-width: 1023.98px) {
  .avoid-wrapper {
    padding: 60px 0;
  }

  .avoid-head-para {
    gap: 10px;
  }

  .avoid-head-para p {
    max-width: 442px;
  }

  .avoid-point-list {
    max-width: 702px;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 50px;
  }
}

@media (max-width: 760px) {
  .avoid-point-list {
    gap: 30px 35px;
  }
}

@media (max-width: 730px) {
  .avoid-point-list {
    max-width: 326px;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640.98px) {
  .avoid-container {
    padding: 0 10px;
  }

  .avoid-wrapper {
    padding: 50px 0;
    gap: 35px;
  }
}

@media (max-width: 480.98px) {
  .avoid-head-para {
    max-width: 355px;
  }

  .avoid-head {
    max-width: 300px;
  }
}

/* SECTION 5 (benifits of court settlement) */
.settlement-container {
  width: 100%;
  padding: 0 20px;
  background-color: var(--color-mist-green);
}

.settlement-wrapper {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(35px, 5.3vw, 40px);
  padding: 80px 0;
}

.settlement-head-para {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.settlement-card-list {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: clamp(21px, 3.1vw, 39px);
}

.settlement-card-item {
  max-width: 281px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 15px 12px;
  border-radius: 16px;
  background-color: var(--color-white);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.14);
  transition: all 0.25s ease;
  cursor: default;
}

.settlement-card-icon {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.settlement-card-text {
  max-width: 209px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
}

.settlement-card-item:last-child > .settlement-card-text p {
  max-width: 174px;
}

.settlement-card-arrow {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.settlement-card-item:hover {
  background-color: var(--color-green);
  color: var(--color-white);
  transition: all 0.25s ease;
}

.settlement-card-item:hover > .settlement-card-text {
  color: var(--color-white);
  transition: all 0.25s ease;
}

.settlement-card-item:hover > .settlement-card-text h3 {
  color: var(--color-white);
  transition: all 0.25s ease;
}

.settlement-card-item:hover > .settlement-card-icon.c1 img {
  content: url("../../assets/icons/access-control-white-hover-icn.svg");
}

.settlement-card-item:hover > .settlement-card-icon.c2 img {
  content: url("../../assets/icons/solution-white-hover-icn.svg");
}

.settlement-card-item:hover > .settlement-card-icon.c3 img {
  content: url("../../assets/icons/relationship-white-hover-icn.svg");
}

.settlement-card-item:hover > .settlement-card-icon.c4 img {
  content: url("../../assets/icons/legal-document-tick-white-hover-icn.svg");
}

@media (max-width: 1130px) {
  .settlement-card-list {
    gap: 20px;
  }
}

@media (max-width: 1023.98px) {
  .settlement-wrapper {
    padding: 60px 0;
  }

  .settlement-head-para {
    gap: 10px;
  }

  .settlement-head-para p {
    max-width: 559px;
  }

  .settlement-card-list {
    max-width: 706px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  .settlement-card-item {
    max-width: 338px;
    padding: 15px 14px;
  }

  .settlement-card-text {
    max-width: 100%;
  }

  .settlement-card-item:last-child > .settlement-card-text p {
    max-width: unset;
  }
}

@media (max-width: 750px) {
  .settlement-card-list {
    grid-template-columns: 1fr;
    place-items: center;
  }

  .settlement-card-item {
    max-width: 328px;
  }
}

@media (max-width: 640.98px) {
  .settlement-container {
    padding: 0 10px;
  }

  .settlement-wrapper {
    padding: 50px 0;
    gap: 35px;
  }
}

@media (max-width: 480.98px) {
  .settlement-head-para {
    max-width: 355px;
  }

  .settlement-head {
    max-width: 289px;
  }
}

/* SECTION 6 (when you should consider mmediation) */
.consider-container {
  width: 100%;
  padding: 0 20px;
}

.consider-wrapper {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  padding: 80px 0;
}

.consider-content {
  max-width: 530px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(35px, 5.3vw, 40px);
}

.consider-head-para {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.consider-head-para p {
  max-width: 446px;
}

.consider-point-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.consider-point-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.consider-point-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #d9fbd7;
}

.consider-visual {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 447px;
}

.consider-image-top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.consider-left-image-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.experience-badge {
  aspect-ratio: 1 / 1;
  max-width: 142px;
  width: 100%;
  min-width: 118px;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  background-color: var(--color-green);
  color: var(--color-white);
}

.exp-number {
  font-size: 32px;
  line-height: 42px;
  font-weight: 600;
}

.meditation-deco {
  display: flex;
  justify-content: center;
  align-items: center;
}

.meditation-deco img {
  max-width: 121px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.consider-image-primary {
  display: flex;
  justify-content: center;
  align-items: center;
}

.consider-image-primary {
  display: flex;
  justify-content: center;
  align-items: center;
}

.consider-image-primary img {
  max-width: 335px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.consider-image-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
}

.consider-image-bottom img {
  max-width: 500px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 1150px) {
  .consider-wrapper {
    gap: 60px;
  }
}

@media (max-width: 1130px) {
  .consider-wrapper {
    gap: 35px;
  }
}

@media (max-width: 1100px) {
  .consider-point-list {
    gap: 28px;
  }

  .consider-visual {
    max-width: 447px;
  }

  .consider-point-icon {
    width: 55px;
    height: 55px;
  }
}

@media (max-width: 1023.98px) {
  .consider-wrapper {
    padding: 60px 0;
    gap: 60px;
    flex-direction: column;
  }

  .consider-content {
    max-width: 728px;
    align-items: center;
  }

  .consider-head-para {
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .consider-head-para p {
    max-width: 496px;
  }

  .consider-point-list {
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 15px;
  }

  .consider-point-icon {
    width: 48px;
    height: 48px;
  }

  .consider-point-text p {
    white-space: nowrap;
  }

  .consider-visual {
    min-width: unset;
  }
}

@media (max-width: 760px) {
  .consider-point-list {
    grid-template-columns: 1fr;
    place-items: center;
    gap: 30px;
  }

  .consider-point-item {
    max-width: 232px;
    width: 100%;
  }
}

@media (max-width: 640.98px) {
  .consider-container {
    padding: 0 10px;
  }

  .consider-wrapper {
    padding: 50px 0;
    gap: 35px;
  }

  .exp-number {
    font-size: 26px;
    line-height: 36px;
  }

  .consider-point-icon {
    width: 44px;
    height: 44px;
  }

  .consider-point-icon img {
    width: 24px;
    height: 24px;
  }
}

@media (max-width: 480.98px) {
  .consider-content {
    max-width: 355px;
  }

  .consider-visual {
    max-width: 317px;
  }

  .consider-image-top {
    gap: 5px;
  }

  .meditation-deco img {
    max-width: 57px;
  }
}

@media (max-width: 359px) {
  .experience-badge {
    min-width: 108px;
  }

  .exp-number {
    font-size: 22px;
    line-height: 32px;
  }

  .exp-label {
    font-size: 15px;
    line-height: 26px;
  }

  .consider-left-image-stack {
    gap: 5px;
  }
}