.retirement-section {
  background: rgba(var(--bg-color-6));
  /* padding: 80px 0 124px; */

  .retirement-wrapper {
    display: flex;
    align-items: center;
    gap: 110px;
    padding: 80px 100px;
    background-color: rgba(var(--bg-color-1));
    border-radius: var(--border-radius-1) 0 var(--border-radius-1) 0;
    box-shadow: 0 10px 25px 0 #1A2E4A26 !important;

    .retirement-content {
      width: 44%;
      display: flex;
      flex-direction: column;
      gap: 20px;

      .retirement-title {
        font-family: var(--font-source-serif-4);
        font-size: var(--font-9-2);
        line-height: 1.1;
        font-weight: 700;
        color: rgba(var(--text-color-3));
      }

      p {
        color: rgba(var(--text-color-6));
        font-size: var(--font-24);
        line-height: 1.75;
      }

      ul {
        list-style-type: disc;
        padding-left: 28px;

        li {
          color: rgba(var(--text-color-6));
          font-size: var(--font-24);
          line-height: 1.75;
        }
      }

      .retirement-btn {
        margin-top: 20px;

        .site__btn--3 svg {
          width: 18px;
          height: 18px;
        }
      }
    }

    .retirement-visual {
      width: 46%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 21px;

      .retirement-card {
        position: relative;
        max-width: 381px;
        width: 100%;

        .retirement-img {
          position: relative;
          max-width: 381px;
          width: 100%;
          aspect-ratio: 5 / 7;
          z-index: 2;
          height: auto;
          border-radius: 300px;
          display: block;
        }

        .top {
          position: absolute;
          background: rgba(var(--bg-color-6));
          color: rgba(var(--text-color-1));
          padding: 10px 16px;
          border-radius: var(--border-radius-2);
          font-size: var(--font-24);
          line-height: 1.3;
          max-width: 246px;
          width: 100%;
          text-align: center;
          font-weight: 600;
          border: 5px solid rgba(var(--border-color-6));
          z-index: 3;
          top: -14px;
          left: 50%;
          transform: translateX(-50%);
        }

        .tag {
          position: absolute;
          background: rgba(var(--bg-color-1));
          color: rgba(var(--text-color-6));
          padding: 10px 20px;
          border-radius: var(--border-radius-2);
          font-size: var(--font-24);
          line-height: 1.3;
          font-weight: 600;
          border: 5px solid rgba(var(--border-color-1));
          box-shadow: 0px 4px 50px 0px rgba(var(--bg-color-2), 25%);
          z-index: 3;
        }

        .tag:first-of-type {
          position: absolute;
          background: rgba(var(--bg-color-6));
          color: rgba(var(--text-color-1));
          padding: 10px 16px;
          border-radius: var(--border-radius-2);
          font-size: var(--font-24);
          line-height: 1.3;
          max-width: 246px;
          width: 100%;
          text-align: center;
          font-weight: 600;
          border: 5px solid rgba(var(--border-color-6));
          z-index: 3;
          top: -14px;
          left: 50%;
          transform: translateX(-50%);
        }

        .tag-1 {
          left: 0px;
          top: 66px;
          transform: translateX(-24%);
        }

        .tag-2 {
          left: 0px;
          top: 135px;
          transform: translateX(-50%);
        }

        .tag-3 {
          right: 0px;
          top: 66px;
          transform: translateX(24%);
        }

        .tag-4 {
          right: 0px;
          top: 135px;
          transform: translateX(50%);
        }
      }

      .feefo-card {
        background: rgba(var(--bg-color-1));
        border: 1px solid rgba(var(--bg-color-2), 20%);
        border-radius: var(--border-radius-4);
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 16px;
        width: fit-content;

        .feefo-logo {
          max-width: 115px;
          width: 100%;
          height: auto;
        }

        .feefo-rating {
          font-size: var(--font-24);
          line-height: 1.6;
          color: rgba(var(--text-color-6));
          font-weight: 500;
        }

        .feefo-stars {
          max-width: 115px;
          width: 100%;
          height: auto;
        }

        .review {
          font-size: var(--font-24);
          line-height: 1.6;
          color: rgba(var(--text-color-6));
          font-weight: 500;
          text-decoration: underline;
        }
      }
    }
  }

  @media (max-width: 1280px) {
    .retirement-wrapper {
      padding: 60px 80px !important;
      gap: 80px !important;

      .retirement-visual {
        width: 49% !important;
      }
    }
  }

  @media (max-width: 1024px) {
    .retirement-wrapper {
      flex-direction: column;

      .retirement-content {
        width: 100% !important;
      }

      .retirement-visual {
        width: 100% !important;
      }
    }
  }

  @media (max-width: 767px) {
    .retirement-wrapper {
      padding: 40px !important;
      gap: 60px !important;

      .retirement-content {
        gap: 16px;
      }

      .retirement-visual {
        gap: 16px;

        .retirement-card {
          max-width: 280px;
          min-height: 375px;

          .retirement-img {
            max-width: 280px;
          }

          .top {
            display: none;
          }

          .tag {
            display: none;
          }
        }

        .feefo-card {
          gap: 9px;
          padding: 10px;
          .feefo-logo {
            max-width: 70px !important;
          }

          .feefo-stars {
            max-width: 70px !important;
          }
          .feefo-rating,.review{
            font-size: var(--font-26) !important;
          }
        }
      }
    }
  }
}

.light_retirement_section {
  background: rgba(var(--bg-color-1));

  .retirement-wrapper {
    .retirement-content {
      .retirement-title {
        color: rgba(var(--text-color-6));
      }
    }
  }

  .section__wave {
    path {
      fill: rgba(var(--text-color-1));
      ;
    }
  }

}