/* SECTION 1 (conjugal rights) */
.conjugal-container {
  width: 100%;
  padding: 0 20px;
}

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

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

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

.conjugal-head-para p {
  max-width: 513px;
}

.conjugal-point-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.conjugal-point-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;

  min-height: 112px;
}

.conjugal-point-icon {
  width: 52px;
  height: 47px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.conjugal-point-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.conjugal-point-list > .conjugal-point-item:not(:last-child) {
  border-bottom: 3px solid #c4d4ff;
}

.conjugal-image-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  aspect-ratio: 538 / 539;
  max-width: 538px;
  width: 100%;
  height: auto;
}

.conjugal-image-main {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  z-index: 2;
  padding-right: 46px;
}

.conjugal-image-main img {
  max-width: 443px;
  width: 100%;
  height: auto;
}

.conjugal-ring-deco {
  aspect-ratio: 235 / 235;
  max-width: 235px;
  width: 100%;
  height: auto;
  border-radius: 50%;
  border: 7px solid #c4d4ff;

  margin-top: -175px;
}

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

  .conjugal-point-item {
    gap: 12px;
  }
}

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

  .conjugal-content {
    max-width: 100%;
    align-items: center;
    min-width: unset;
  }

  .conjugal-head-para {
    max-width: 576px;
    gap: 10px;
    align-items: center;
    text-align: center;
  }

  .conjugal-head {
    max-width: 439px;
  }

  .conjugal-head-para p {
    max-width: 100%;
  }

  .conjugal-image-layout {
    max-width: 432px;
    min-height: 470px;
  }

  .conjugal-point-list {
    max-width: 584px;
  }
}

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

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

  .conjugal-point-item {
    gap: 22px;
  }

  .conjugal-point-icon {
    width: 62px;
    height: 56px;
  }
}

@media (max-width: 500.98px) {
  .conjugal-image-layout {
    aspect-ratio: 343 / 348;
    max-width: 343px;
    min-height: unset;
  }

  .conjugal-image-main {
    padding-right: 59px;
  }

  .conjugal-ring-deco {
    max-width: 150px;
    margin-top: -105px;
  }

  .conjugal-content {
    max-width: 343px;
  }

  .conjugal-head-para p {
    max-width: 296px;
  }
}

/* SECTION 2 (seek relief) */
.relief-container {
  width: 100%;
  padding: 0 20px;
  background-color: var(--color-light-blue);
}

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

.relief-image-layout {
  display: flex;
  align-items: center;
  justify-content: center;
}

.relief-image-main {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.relief-image-main img {
  max-width: 322px;
  width: 100%;
  height: auto;
  object-fit: cover;
  min-width: 321px;
}

.relief-side-images {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 50px;
  max-width: 246px;
  width: 100%;
  min-width: 246px;

  margin-left: -110px;
}

.relief-image-second {
  display: flex;
  justify-content: center;
  align-items: center;
}

.relief-image-second img {
  max-width: 174px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.relief-experience-card {
  aspect-ratio: 246 / 106;
  max-width: 246px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--color-blue);
  color: var(--color-white);
  border-radius: 8px;
}

.relief-experience-card h3 {
  font-size: 40px;
  line-height: 52px;
  font-weight: 600;
  color: var(--color-white);
}

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

.relief-head-para {
  max-width: 504px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.relief-head {
  max-width: 330px;
}

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

.relief-point-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

@media (max-width: 1131px) {
  .relief-wrapper {
    gap: 24px;
  }

  .relief-point-list {
    gap: 10px 20px;
  }

  .relief-image-layout {
    align-items: flex-start;
  }

  .relief-image-main img {
    max-width: 256px;
    min-width: 256px;
  }

  .relief-side-images {
    gap: 15px;
    min-width: 226px;
    margin-left: -97px;
  }
}

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

  .relief-content {
    max-width: 100%;
    align-items: center;
  }

  .relief-head-para {
    max-width: 100%;
    gap: 10px;
    align-items: center;
    text-align: center;
  }

  .relief-head-para p {
    max-width: 576px;
  }

  .relief-head {
    max-width: 100%;
  }

  .relief-point-list {
    gap: 10px 43px;
  }
}

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

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

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

@media (max-width: 480.98px) {
  .relief-content {
    max-width: 343px;
  }

  .relief-image-layout {
    align-items: center;
  }

  .relief-image-main img {
    max-width: 242px;
    min-width: unset;
  }

  .relief-side-images {
    min-width: 184px;
    max-width: 184px;
    gap: 37px;

    margin-left: -82px;
  }

  .relief-image-second img {
    max-width: 131px;
  }

  .relief-experience-card {
    max-width: 185px;
  }

  .relief-experience-card h3 {
    font-size: 26px;
    line-height: 36px;
  }
}

@media (max-width: 355px) {
  .relief-side-images {
    max-width: 148px;
    min-width: 148px;
    gap: 15px;
  }

  .relief-image-second img {
    max-width: 90px;
  }

  .relief-experience-card {
    max-width: 148px;
  }

  .relief-experience-card h3 {
    font-size: 18px;
    line-height: 29px;
  }

  .relief-experience-card p {
    font-size: 12px;
    line-height: 17px;
  }

  .relief-image-main img {
    max-width: 178px;
  }
}

/* SECTION 3 (documents needed for filling petition) */
.petition-container {
  width: 100%;
  padding: 0 20px;
}

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

.petition-content {
  max-width: 629px;
  display: flex;
  min-width: 611px;
  flex-direction: column;
  gap: clamp(35px, 5.3vw, 40px);
}

.petition-head-para {
  max-width: 513px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.petition-head {
  max-width: 354px;
}

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

.petition-point-item {
  display: flex;
  align-items: center;
  gap: 20px;
}

.petition-point-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-light-blue);
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.petition-point-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.petition-point-text h3 {
  white-space: nowrap;
}

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

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

@media (max-width: 1100px) {
  .petition-content {
    max-width: 407px;
    min-width: unset;
  }

  .petition-point-list {
    grid-template-columns: 1fr;
  }

  .petition-image-main img {
    max-width: 417px;
  }
}

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

  .petition-content {
    max-width: 100%;
    align-items: center;
  }

  .petition-head-para {
    max-width: 576px;
    gap: 10px;
    align-items: center;
    text-align: center;
  }

  .petition-point-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 32px;
  }
}

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

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

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

@media (max-width: 480.98px) {
  .petition-content {
    max-width: 343px;
  }
}

/* SECTION 4 (filling procedure) */
.procedure-container {
  width: 100%;
  padding: 0 40px;
  background-color: var(--color-light-blue);
}

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

.procedure-image-layout {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.procedure-top-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

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

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

.procedure-experience-stack-img {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.procedure-experience-card {
  aspect-ratio: 1 / 1;
  max-width: 160px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 25px;
  color: var(--color-white);
  border-radius: 50%;
  background-color: var(--color-blue);
}

.procedure-experience-card h3 {
  font-size: 40px;
  line-height: 52px;
  color: var(--color-white);
}

.procedure-image-second {
  display: flex;
  justify-content: center;
  align-items: center;
}

.procedure-image-second img {
  max-width: 173px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.procedure-image-third {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

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

.procedure-head {
  max-width: 330px;
}

.procedure-point-list {
  max-width: 348px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.procedure-point-item {
  display: flex;
  align-items: center;
  gap: 22px;
}

.procedure-point-icon {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: var(--color-white);
}

.procedure-point-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (max-width: 1100px) {
  .procedure-image-layout {
    max-width: 442px;
    flex-shrink: 0;
  }

  .procedure-experience-card {
    padding: 16px;
  }

  .procedure-content {
    max-width: 446px;
  }
}

@media (max-width: 1023.98px) {
  .procedure-container {
    padding: 0 20px;
  }

  .procedure-wrapper {
    padding: 60px 0;
    gap: clamp(35px, 6.6vw, 50px);
    flex-direction: column-reverse;
  }

  .procedure-content {
    max-width: 100%;
    align-items: center;
  }

  .procedure-head-para {
    max-width: 576px;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .procedure-head {
    max-width: 100%;
    align-items: center;
  }
}

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

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

@media (max-width: 480.98px) {
  .procedure-content {
    max-width: 343px;
  }

  .procedure-image-layout {
    max-width: 343px;
  }

  .procedure-experience-card {
    padding: 5px;
  }

  .procedure-experience-card h3 {
    font-size: 26px;
    line-height: 36px;
  }

  .procedure-experience-card p {
    font-size: 14px;
    line-height: 22px;
  }
}

/* SECTION 5 (court consider before order) */
.order-container {
  width: 100%;
  padding: 0 40px;
}

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

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

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

.order-head {
  max-width: 354px;
}

.order-point-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.order-point-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.order-image-layout {
  display: flex;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.order-dot-deco {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 5%;
}

.order-dot-deco img {
  max-width: 64px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.order-image-first {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;

  margin-right: -150px;
  margin-top: 100px;
}

.order-image-first img {
  max-width: 239px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.order-image-second {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.order-image-second img {
  max-width: 432px;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.order-experience-card {
  aspect-ratio: 203 / 111;
  max-width: 203px;
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: var(--color-blue);
  border-radius: 8px;
  z-index: 3;

  margin-left: -110px;
  margin-top: 39px;
}

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

.order-experience-text {
  display: flex;
  flex-direction: column;
  color: var(--color-white);
}

.order-experience-text h3 {
  color: var(--color-white);
}

@media (max-width: 1155px) {
  .order-image-layout {
    flex-shrink: 0;
    max-width: 481px;
  }

  .order-dot-deco img {
    max-width: 50px;
    max-height: 324px;
  }

  .order-image-second img {
    max-width: 330px;
  }

  .order-image-first {
    margin-right: -100px;
  }

  .order-image-first img {
    max-width: 171px;
  }

  .order-experience-card {
    max-width: 171px;
    padding: 11px;
    gap: 7px;
  }

  .order-experience-icon {
    width: fit-content;
    height: fit-content;
  }
}

@media (max-width: 1023.98px) {
  .order-container {
    padding: 0 20px;
  }

  .order-wrapper {
    padding: 60px 0;
    gap: clamp(35px, 6.6vw, 50px);
    flex-direction: column;
  }

  .order-dot-deco {
    top: 50%;
    transform: translateY(-50%);
  }

  .order-content {
    max-width: 100%;
    align-items: center;
    min-width: unset;
  }

  .order-head-para {
    max-width: 576px;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .order-head {
    max-width: 100%;
  }

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

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

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

  .order-point-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480.98px) {
  .order-content {
    max-width: 343px;
  }

  .order-image-layout {
    max-width: 343px;
  }

  .order-image-first {
    margin-right: -93px;
    margin-top: 75px;
  }

  .order-image-first img {
    max-width: 125px;
  }

  .order-image-second img {
    max-width: 242px;
  }

  .order-dot-deco img {
    max-height: 215px;
  }

  .order-experience-card {
    max-width: 117px;
    padding-left: 2px;

    margin-left: -50px;
  }

  .order-experience-text p {
    font-size: 12px;
    line-height: 12px;
  }

  .order-experience-icon {
    width: 35px;
    height: 35px;
  }

  .order-experience-icon img {
    width: 24px;
    height: 24px;
  }
}

/* SECTION 6 (filling rcr petition file) */
.rcr-container {
  width: 100%;
  padding: 0 20px;
  background-color: var(--color-light-blue);
}

.rcr-wrapper {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 80px 0;
}

.rcr-head-para {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 15px;
}

.rcr-card-list {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.rcr-card {
  max-width: 285px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 38px 20px;
  background-color: var(--color-white);
  cursor: default;
  transition:
    background-color 0.24s ease,
    color 0.24s ease,
    transform 0.3s ease;
}

.rcr-card-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-blue);
}

.rcr-card-text {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.rcr-card-text h3 {
  max-width: 168px;
}

.rcr-card:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.rcr-card:hover > .rcr-card-icon {
  color: var(--color-white);
}

.rcr-card:hover > .rcr-card-text h3 {
  color: var(--color-white);
}

@media (max-width: 1200px) {
  .rcr-card-list {
    flex-wrap: wrap;
  }
}

@media (max-width: 1100px) {
  .rcr-card-list {
    max-width: 600px;
    width: 100%;
    gap: 30px;
  }
}

@media (max-width: 1023.98px) {
  .rcr-wrapper {
    padding: 60px 0;
    gap: clamp(35px, 6.6vw, 50px);
  }

  .rcr-head-para {
    gap: 10px;
    max-width: 576px;
  }
}

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

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

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

/* SECTION 7 (Practical tips to strength your case ) */
.tips-container {
  width: 100%;
  padding: 0 20px;
}

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

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

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

.tips-head {
  max-width: 354px;
}

.talk-legal-btn {
  background-color: var(--color-blue);
  color: var(--color-white);
}

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

.tips-point-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid #e6f0ff;
  transition:
    background-color 0.24s ease,
    color 0.24s ease;
  cursor: default;
}

.tips-point-number {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 2px solid #d0e1ff;
  font-size: 45px;
  line-height: 75px;
  color: var(--color-blue);
}

.tips-point-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tips-point-item:hover {
  background-color: var(--color-blue);
  color: var(--color-white);
}

.tips-point-item:hover > .tips-point-number {
  color: var(--color-white);
}

.tips-point-item:hover > .tips-point-text h3 {
  color: var(--color-white);
}

@media (max-width: 1171px) {
  .tips-wrapper {
    gap: 7px;
  }
}

@media (max-width: 1135px) {
  .tips-point-list {
    gap: 30px 8px;
    min-width: 589px;
  }

  .tips-point-item {
    gap: 12px;
  }

  .tips-point-number {
    width: 34px;
  }
}

@media (max-width: 1023.98px) {
  .tips-wrapper {
    padding: 60px 0;
    gap: 40px;
    flex-direction: column;
    align-items: center;
  }

  .tips-content {
    max-width: 100%;
    align-items: center;
  }

  .tips-head-para {
    max-width: 100%;
    gap: 10px;
    align-items: center;
    text-align: center;
  }

  .tips-head {
    max-width: 100%;
  }

  .tips-head-para p {
    max-width: 576px;
  }

  .tips-point-item {
    gap: 15px;
  }

  .tips-point-number {
    width: 50px;
  }
}

@media (max-width: 700px) {
  .tips-point-list {
    max-width: 400px;
    width: 100%;
    min-width: unset;
    grid-template-columns: 1fr;
  }
}

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

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

  .tips-point-number {
    width: 40px;
    height: 40px;

    font-size: 36px;
    line-height: 60px;
  }
}

@media (max-width: 480.98px) {
  .tips-content {
    max-width: 343px;
  }

  .tips-point-list {
    max-width: 343px;
  }
}