@media screen and (max-width: 1280px) {
  .after::after {
    left: 39% !important;
  }

  .spine-box {
    height: 320px;
  }

  .spine-box img {
    height: 100%;
  }

  .box-txt {
    top: 32%;
  }

  .box-txt p {
    font-size: 14px !important;
    line-height: 18px !important;
    margin-top: 35px !important;
  }

  .box-img {
    width: 20%;
  }

  .box-img img {
    height: 100% !important;
  }

  .box-txt h3 {
    font-size: 22px;
  }

  .cause .para {
    width: 74%;
  }

  .cause-box p {
    width: 100% !important;
  }

  .spine-div h4::after {
    left: 34%;
  }
}

@media screen and (max-width: 1024px) {
  .spine-box {
    height: 360px;
    margin-top: 30px;
  }

  .spine-div h4 {
    font-size: 20px;
  }

  .after::after {
    left: 42% !important;
  }

  .box-txt h3 {
    font-size: 20px;
  }
  .box-txt p {
    font-size: 13px !important;
    line-height: 17px !important;
  }
  .cause .para {
    width: 84%;
  }

  .cause-box p {
    font-size: 13px !important;
  }
  .spine-div h4::after {
    left: 40%;
  }
  .content-box {
    padding: 21px 7px;
  }
  .content-box p {
    font-size: 13px;
  }
}

@media screen and (max-width: 912px) {
  .after::after {
    left: 57% !important;
  }
  .box-txt {
    top: 35%;
  }
  .cause .para {
    width: 100%;
  }
  .cause-content {
    flex-wrap: wrap;
  }
  .cause-box {
    width: 32%;
    margin-bottom: 25px;
  }

  .spine-div h4::after {
    left: 54%;
  }
  .content-div {
    flex-wrap: wrap;
  }
  .content-box {
    width: 32%;
    height: unset;
  }
  .content-box:nth-child(-n + 3) {
    margin-bottom: 30px;
  }
}

@media screen and (max-width: 820px) {
}

@media screen and (max-width: 800px) {
}

@media screen and (max-width: 786px) {
}

@media screen and (max-width: 712px) {
  .box-img {
    width: 12%;
  }
  .spine-box {
    height: 270px;
  }
  .cause-box {
    width: 48%;
  }

  .spine-div h4 {
    font-size: 18px;
  }

  .content-box {
    width: 48%;
    margin-bottom: 30px !important;
  }

  .spine-div h4::after {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .spine-div h4 {
    text-align: center;
  }
}

@media screen and (max-width: 540px) {
}

@media screen and (max-width: 430px) {
  .cause-content {
    justify-content: center;
  }
  .cause-box {
    width: 65%;
  }
  .content-div {
    justify-content: center;
  }
  .content-box {
    width: 65%;
  }
  .spine-div h4 {
    font-size: 16px;
}
}

@media screen and (max-width: 414px) {
}

@media screen and (max-width: 412px) {
}

@media screen and (max-width: 393px) {
}

@media screen and (max-width: 375px) {
}

@media screen and (max-width: 360px) {
}

@media screen and (max-width: 320px) {
}