#webcommander-page .member-plans{
  max-width: 1300px;
  margin: 40px auto;
  display: flex;
  gap: 47px;
}
#webcommander-page .member-plans .plan-top{
  min-height: 360px;
  padding: 36px 43px;
  border: 1px solid color-mix(in srgb, var(--bk-color-primary, #00a1c6) 7%, transparent);
  background: color-mix(in srgb, var(--bk-color-primary, #00a1c6) 9%, transparent);
  border-radius:15px;
}

#webcommander-page .member-plans .plan-top p{
  font-family: var(--bk-font-base, Manrope);
  font-weight: 700;
  font-size: 20px;
  line-height: 22px;
  letter-spacing: -1%;
}
#webcommander-page .member-plans .plan-top .plan-price{
  display: flex;
  vertical-align: baseline;
}
#webcommander-page .member-plans .plan-top .plan-price h3{
  font-family: var(--bk-font-heading, Manrope);
  font-weight: 600;
  font-size: 40px;
  line-height: 22px;
  letter-spacing: 0%;
  color: rgba(38, 59, 50, 1);
}
#webcommander-page .member-plans .plan-top .plan-price b{
  font-family: var(--bk-font-base, Manrope);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0%;
  padding: 8px 10px;
  max-width: 150px;
}
#webcommander-page .member-plans .plan-top .plan-price + p{
  font-family: var(--bk-font-base, Manrope);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0%;
  margin-top: 60px;
}

#webcommander-page .member-plans .plan-top a.button{
    font-family: var(--bk-btn-tertiary-font-family, var(--bk-font-base, 'Manrope'));
    font-weight: var(--bk-btn-tertiary-font-weight, 600);
    font-size: var(--bk-btn-tertiary-font-size, 16px);
    line-height: 22px;
    background: transparent;
    color: var(--bk-btn-tertiary-text, var(--bk-color-ink, #000));
    border: var(--bk-btn-tertiary-border-width, 1px) solid var(--bk-btn-tertiary-border-color, var(--bk-color-secondary, #000));
    text-decoration: none;
    border-radius: var(--bk-btn-tertiary-radius, 100px);
    padding: var(--bk-btn-tertiary-pad, 6px 32px);
    height: 37px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
#webcommander-page .member-plans .plan-top a.button:hover{
    background: var(--bk-btn-tertiary-hover-bg, var(--bk-color-primary, #00A1C6));
    border-color: var(--bk-btn-tertiary-hover-border-color, var(--bk-btn-tertiary-border-color, var(--bk-color-primary, #00A1C6)));
    color: var(--bk-btn-tertiary-hover-color, var(--bk-btn-tertiary-text, #fff));
}
#webcommander-page .member-plans .plan-top a.button::after{
    content: "";
    background-image: url('data:image/svg+xml,<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.7897 7.39179L1 12.235L2.68153 13.8L9 7.39177L2.68153 1L1 2.56501L5.7897 7.39179Z" fill="black" stroke="%23127D85" stroke-width="0.5"></path></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 13px;
    width: 8px;
    height: 13px;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
}
#webcommander-page .member-plans .plan-top a.button:hover::after{
    background-image: url('data:image/svg+xml,<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.7897 7.39179L1 12.235L2.68153 13.8L9 7.39177L2.68153 1L1 2.56501L5.7897 7.39179Z" fill="white" stroke="%23127D85" stroke-width="0.5"></path></svg>');
}
#webcommander-page .member-plans .plan-bottom{
  margin: 20px 30px 20px 20px;
}
#webcommander-page .member-plans .plan-bottom p{
    font-family: var(--bk-font-base, Manrope);
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 0%;
    padding: 0 0 0 20px;
    position: relative;
    border-bottom: 1px solid color-mix(in srgb, var(--bk-color-secondary, #000000) 7%, transparent);
    padding-bottom: 20px;
}
#webcommander-page .member-plans .plan-bottom p:last-child{
  border-bottom:0
}
#webcommander-page .member-plans .plan-bottom p::before{
    content: "";
    background-image: url('data:image/svg+xml,<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.27433 0.350109L3.95699 6.50007L1.7197 4.29009C1.53078 4.10178 1.27455 3.996 1.00738 3.996C0.740203 3.996 0.483973 4.10178 0.295054 4.29009C0.106134 4.47839 0 4.73378 0 5.00008C0 5.13194 0.0260568 5.26251 0.0766822 5.38433C0.127308 5.50615 0.20151 5.61684 0.295054 5.71008L3.30487 8.71006C3.49713 8.89279 3.75155 8.99638 4.01719 9.00006C4.15529 8.99446 4.29073 8.96048 4.41504 8.90026C4.53934 8.84003 4.64982 8.75485 4.73954 8.65006L10.7592 1.6501C10.8448 1.5503 10.9099 1.43466 10.9507 1.30979C10.9915 1.18491 11.0072 1.05325 10.997 0.922324C10.9867 0.791395 10.9507 0.663758 10.891 0.546704C10.8312 0.429649 10.7489 0.325468 10.6488 0.24011C10.5487 0.154751 10.4327 0.0898863 10.3074 0.0492185C10.1821 0.00855066 10.05 -0.00712391 9.91864 0.00309048C9.78728 0.0133049 9.65923 0.0492078 9.54179 0.108749C9.42435 0.168291 9.31983 0.250305 9.23419 0.350109H9.27433Z" fill="%2300ADD6"></path></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 29px;
    width: 15px;
    height: 15px;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    position: absolute;
    left: -5px;
    top: 5px;
}



#webcommander-page .member-plans>*:hover .plan-top{
  border: 1px solid rgba(0, 7, 45, 1);
  background: rgba(0, 7, 45, 1);
}

#webcommander-page .member-plans>*:hover .plan-top a.button{
    background: rgba(0, 173, 213, 1);
    color: var(--bk-btn-hover-color, var(--bk-btn-text, #fff));
    border: 1px solid rgba(0, 173, 213, 1);
}
#webcommander-page .member-plans>*:hover .plan-top a.button:hover{
    background: var(--bk-color-surface, #fff);
    border-color: var(--bk-btn-secondary-hover-border-color, var(--bk-btn-secondary-border-color, var(--bk-color-surface, #fff)));
    color: var(--bk-btn-secondary-hover-color, var(--bk-btn-secondary-text, var(--bk-color-ink, #000)));
}
#webcommander-page .member-plans>*:hover .plan-top a.button::after{
    background-image: url('data:image/svg+xml,<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.7897 7.39179L1 12.235L2.68153 13.8L9 7.39177L2.68153 1L1 2.56501L5.7897 7.39179Z" fill="white" stroke="%23127D85" stroke-width="0.5"></path></svg>');
}
#webcommander-page .member-plans>*:hover .plan-top a.button:hover::after{
    background-image: url('data:image/svg+xml,<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.7897 7.39179L1 12.235L2.68153 13.8L9 7.39177L2.68153 1L1 2.56501L5.7897 7.39179Z" fill="black" stroke="%23127D85" stroke-width="0.5"></path></svg>');
}
#webcommander-page .member-plans>*:hover .plan-top .plan-price h3, #webcommander-page .member-plans>*:hover .plan-top p{
  color: rgba(4, 208, 255, 1);
}
#webcommander-page .member-plans>*:hover .plan-top .plan-price b{
  color: rgba(255, 255, 255, 1);
}
#webcommander-page .member-plans>*:hover .plan-top .plan-price + p{
color: #fff;
}
@media (max-width:1200px) {
 #webcommander-page .member-plans{
   padding: 0 15px;
  gap: 17px;
}
  #webcommander-page .member-plans .plan-top .plan-price h3{
    margin:10px 0
  }
  #webcommander-page .member-plans .plan-top .plan-price{
    flex-direction: column;
  }
  #webcommander-page .member-plans .plan-top .plan-price{
    height: 60px;
  }
  #webcommander-page .member-plans .plan-top{
    padding: 30px 25px;
  }
  #webcommander-page .member-plans .plan-top .plan-price h3{
    font-size: 36px;
}
#webcommander-page .member-plans .plan-top p{
    font-size: 17px;
  }
}

@media (max-width:992px) {
#webcommander-page .member-plans .plan-top .plan-price + p{
  margin-top: 40px;
}
#webcommander-page .member-plans .plan-top a.button{
    font-size: 14px;
    padding: 6px 20px;
    gap: 5px;
}
#webcommander-page .member-plans .plan-top{
  min-height: 340px;
}
}
@media (max-width: 767px) {
  #webcommander-page .membership-plans{
    overflow: scroll;
    padding:0;
  }
  #webcommander-page .member-plans{
  width: 900px;
  margin: 20px auto;
  gap:20px;
}
}