/* ABONNEMENT */
.ribbon {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --f: .5em; /* control the folded part */
  
  position: absolute;
  top: 0;
  right: 0;
  line-height: 1.8;
  padding-inline: 1lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(#0008 0 0) 51%/var(--f);
  clip-path: polygon(
    100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
  background-color: #BD1550; /* the main color  */
}

.ribbon-green {
  background-color: #1f487e ; /* green color */
}
.ribbon-yellow {
  background-color: #E9C46A ; /* green color */
  color: white;
}

.ribbon-white {
  background-color: #fff ; /* green color */
  color: #1f487e;
}

.pricing-section-two-home {
  margin-bottom: 50px;
  display: flex;
  align-items: center;
}
.pricing-section-two-home .pricing-card {
  filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.438));
}

.pricing-card {
  position: relative;
  flex-grow: 1;
}

.pricing-card li {
  font-size: 14px;
}
.pricing-card .pr-header {
  height: 220px !important;
}
.pricing-card .pr-footer {
  margin-top: auto;
  height: 94px !important;
}

.pricing-card--blue {
  background-color: #1f487e ; /* green color */
}
.pricing-card--blue .detail, .pricing-card--blue .sub {
    color: #fff !important;
    line-height: 110%;
}
.pricing-card--blue .legend {
    color: #ffffffb6 !important;
}

.pr-counter {
    display: block;
    background: white;
    padding: 8px 16px;
    border-radius: 16px;
    width: 100%;
    margin-top: auto;
}
.pr-counter p {
    font-size: 14px;
    font-weight: 600;
    color: #1f487e;
    margin: 0;
}
.pr-counter a {
    font-size: 14px;
    font-weight: 600;
    color: #f59326;
    margin: 0;
}

.pr-counter span {
    font-size: 20px;
    color: #f59326;
}
.pr-footer-contact {
    font-size: 14px;
    line-height: 120%;
    border: 2px solid #1f487e;
    padding: 8px 16px;
    height: 40px;
    border-radius: 16px;
    width: 100%;
    color: #1f487e;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    display: block;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pr-footer-contact:hover {
    background-color: #1f487e;
    color: #fff;
    text-decoration: none;
}

.pr-footer a {
    font-weight: 600;
}
.pr-header .detail {
    font-size: 14px;
    line-height: 120%;
    font-weight: 600;
    color: #1f487e;
}

.legend {
    font-size: 12px;
    line-height: 120%;
    color: #555555;
}

.referral_button_code {
    background-color: #1f487e;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 600;
    opacity: 0.8;
    transition: all 0.3s ease;
}
.referral_button_code:hover {
    opacity: 1;
}
.referral_button_code i {
  margin-left: 8px;
}

.referral_signup_completed--yes {
    color: #28a745 !important;
    font-weight: 600;
}
.referral_signup_completed--no {
    color: #dc3545 !important;
    font-weight: 600;
}


.memberplan {
  display: flex;
  flex-direction: column;
}
.memberplan p {
  margin: 0;
  width: 350px;
  display: flex;
  flex-direction: row;
}

.memberplan p span {
  margin-left: auto;
  font-weight: 600;
}

.memberplan a {
  width: max-content;
}


.cta-register {
    background-color: #1f487e;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 600;
    transition: all 0.3s ease;
    margin: 16px auto 0;
}

.swiper-action {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.swiper-action-next {
    background-color: #1f487e;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.swiper-action-prev.hide, .swiper-action-next.hide {
  opacity: 0;
  pointer-events: none;
}
.swiper-action-submit.hide {
  display: none;
}
.swiper-action-prev.disable, .swiper-action-next.disable {
  opacity: 0.75;
  pointer-events: none;
}

.swiper-action-prev {
    border: 1px solid #1f487e;
    color: #1f487e;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.error-message {
  font-size: 12px;
}

.form-label a {
  text-decoration: underline;
}

.referral-detail {
    font-size: 24px;
    line-height: 120%;
    font-weight: 600;
    color: #1f487e;
}
.referral-detail span {
  color: #E9C46A;
}
.referral-amount {
    font-size: 35px;
    line-height: 120%;
    font-weight: 600;
    color: #1f487e;
}
.referral-amount-detail {
    font-size: 20px;
    line-height: 120%;
    font-weight: 600;
    color: #1f487e;
}
.referral-amount-detail span {
  color: #E9C46A;
}
.referral-header {
  border-bottom: unset !important;
}
.pricing-referral {
  padding-bottom: 20px !important;
  padding-top: 20px !important;
}


#resiliationForm p, #resiliationForm li {
    font-size: 14px;
    line-height: 120%;
    font-weight: 400;
    color: #1f487e;
}
#resiliationForm button, #resiliationForm a {
      font-size: 14px;
    line-height: 120%;
    font-weight: 600;
}

#resiliationForm .btn-res {
  border: 1px solid #1f487e;
  color: #1f487e;
}
#resiliationForm .btn-res:hover {
  border: 1px solid #f59326;
  background: #f59326;
  color: white;
}
#resiliationForm textarea {
    font-size: 14px;
    line-height: 120%;
    font-weight: 600;
    color: #1f487e;
}
#resiliationFormButton {
    width: max-content;
}