:root {
    --primary-color: #6D42F3;
    --secondary-color: #0A0A0A;
    --white:#fff;
    --black: #000;
    --border-color:#F2F2F2;
    --text-color: #6C7383;
    --heading-color: #0A0A0A;
}
.register-main {
    background-color: #F2F2F2;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    
}
/* .register-main::after {
    content: "";
    position: absolute;
    height: 1263px;
    width: 950px;
    background-color: #0A0A0A;
    left: -242px;
    top: -150px;
    border-radius: 47%;
    z-index: 0;
} */
.register-main::after {
    content: "";
    position: fixed;
    height: calc(100vh + 390px);
    width: 46vw;
    background-color: #0A0A0A;
    left: -200px;
    top: -240px;
    border-radius: 50%;
    z-index: 0;
    /* rotate: -25deg; */
}
.login-sec::before {
    content: "";
    position: absolute;
    width: 10%;
    height: 100%;
    background: #0a0a0a;
    left: 0;
}
.login-sec {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.login-img > img {
    max-width: 790px;
    position: relative;
    z-index: 2;
    width: 100%;
}
.login-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    justify-content: center;
    max-width: 1612px;
    margin: 0 auto;
    padding: 67px 15px 20px;
}
.login-form > h1 {
    text-transform: capitalize;
    margin: 0 0 48px;
    text-align: center;    
    line-height: 57px;
    font-size: 50px;
}
.login-form > h1 span{
    color: var(--primary-color);
}
.login-form {
    background-color: rgb(255, 255, 255);
    max-width: 700px;
    margin: 0px auto;
    padding: 70px 74px 70px 72px;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    width: 100%;
}
.forgot-pass{
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #0A0A0A;
}
.login-form form > p {
    margin: 36px 0 29px;
    font-size: 16px;
    line-height: 28px;
    font-weight: 500;
    text-align: center;
    color: #6C7383;
    text-transform: capitalize;
}
.no-acc-link {
    margin: 26px 0 11px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-align: center;
}
.no-acc-link > a{
    color: #131313;
}
.no-acc-link > a{
    &:hover{
        color: #131313;
        text-decoration: underline !important;
    }
}
.login-circle {
    position: absolute;
    z-index: 1;
    max-width: 100%;
    top: -18%;
    left: -10%;
}
.login-img {
    max-width: 883px;
    width: 100%;
    /* margin: 0 auto; */
    display: flex;
    justify-content: center;
    margin-top: 36px;
    margin-left: 58px;
}
.login-logo {
    position: absolute;
    z-index: 1;
    top: 80px;
    left: 72px;
}
.formula1 {
    position: absolute;
    z-index: 1;
    top: 301px;
    left: 35px;
}
.formula2 {
    position: absolute;
    z-index: 1;
    left: 321px;
    bottom: 20px;
}
.signup-wrapper .login-form > p {
    margin: 26px 0 29px;
    text-align: center;
}
.signup-wrapper .login-form {
    padding: 45px 74px 45px 72px;
}


/* ============  Plan CSS ========== */

.plan-sec{     
    position: relative;     
    overflow: hidden;     
    background-color: #F2F2F2;     
}    
.plan-wrapper{     
    height: 100vh;     
}     
.plan-sec::after {     
    content: "";
    position: fixed;
    height: calc(100vh + 554px);
    width: 56vw;
    background-color: #0A0A0A;
    left: -316px;
    top: -240px;
    border-radius: 50%;
    z-index: 0;
}
.plan-wrapper {
    height: 100vh;
    padding: 100px 100px 20px;
    overflow: auto;
    position: relative;
}
.plan-card-box {
    display: flex;
    justify-content: flex-end;
    gap: 40px;
    position: relative;
    z-index: 1;
}
.plan-card {
    border-radius: 20px;
    border: 1px solid var(--secondary-color);
    background-color: var(--white);
    max-width: 426px;
    width: 100%;
}
.plan-card-top {
    padding: 52px 40px 20px;
}
.plan-card-top > h3 {
    font-size: 30px;
    margin: 0 0 24px;
    font-weight: 700;
    color: var(--primary-color);
}
.plan-card-top > p {
    font-size: 16px;
    font-weight: 500;
    margin: 0px 0px 18px;
    color: rgb(108, 115, 131);
    min-height: 48px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow : hidden;
    max-width: 100%;
    /* line-height: 1.5; */
}
.plan-card-top strong {
    font-size: 45px;
    line-height: 57px;
    margin-bottom: 12px;
    font-weight: 700;
    display: block;
}
.plan-validity {
    display: flex;
    margin: 0 0 34px;
    align-items: center;
    gap: 10px;
    color: #0A0A0A;
    font-weight: 700;
}
.plan-validity p span{
    display: flex;
}
.plan-validity p:first-child{
    font-weight: 400;
    opacity: 0.7;

}
.plan-validity p{
    font-size: 20px;
}
.plan-validity > p {
    display: flex;
    gap: 5px;
    align-items: center;
}
.plan-card-top .dark-btn{
    border-radius: 5px;
}
.plan-card-bottom {
    padding: 20px 40px 50px;
    border-top: 1px solid #0a0a0a30;
}
.plan-listing li + li{
    margin-top: 20px;
}
.plan-listing li{
    font-size: 16px;
    font-weight: 500;
    color: #6C7383;
    padding-left: 40px;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.5625 12.4375C24.5625 13.4775 23.2848 14.3347 23.0289 15.2934C22.7648 16.2847 23.4331 17.6659 22.9314 18.5333C22.4216 19.4148 20.888 19.5205 20.173 20.2355C19.458 20.9505 19.3523 22.4841 18.4708 22.9939C17.6034 23.4956 16.2222 22.8273 15.2309 23.0914C14.2722 23.3473 13.415 24.625 12.375 24.625C11.335 24.625 10.4778 23.3473 9.51906 23.0914C8.52781 22.8273 7.14656 23.4956 6.27922 22.9939C5.39766 22.4841 5.29203 20.9505 4.57703 20.2355C3.86203 19.5205 2.32844 19.4148 1.81859 18.5333C1.31687 17.6659 1.98516 16.2847 1.72109 15.2934C1.46516 14.3347 0.1875 13.4775 0.1875 12.4375C0.1875 11.3975 1.46516 10.5403 1.72109 9.58156C1.98516 8.59031 1.31687 7.20906 1.81859 6.34172C2.32844 5.46016 3.86203 5.35453 4.57703 4.63953C5.29203 3.92453 5.39766 2.39094 6.27922 1.88109C7.14656 1.37937 8.52781 2.04766 9.51906 1.78359C10.4778 1.52766 11.335 0.25 12.375 0.25C13.415 0.25 14.2722 1.52766 15.2309 1.78359C16.2222 2.04766 17.6034 1.37937 18.4708 1.88109C19.3523 2.39094 19.458 3.92453 20.173 4.63953C20.888 5.35453 22.4216 5.46016 22.9314 6.34172C23.4331 7.20906 22.7648 8.59031 23.0289 9.58156C23.2848 10.5403 24.5625 11.3975 24.5625 12.4375Z' fill='%236D42F3'/%3E%3Cpath d='M15.8973 8.80559L11.2579 13.445L8.85293 11.042C8.3309 10.52 7.48387 10.52 6.96184 11.042C6.4398 11.564 6.4398 12.4111 6.96184 12.9331L10.3357 16.307C10.8436 16.8148 11.6682 16.8148 12.1761 16.307L17.7864 10.6967C18.3084 10.1746 18.3084 9.32762 17.7864 8.80559C17.2643 8.28355 16.4193 8.28355 15.8973 8.80559Z' fill='%23FFFCEE'/%3E%3C/svg%3E%0A");
    background-position: 0 0;
    background-repeat: no-repeat;
    text-transform: capitalize;

}
.plan-logo {
    position: absolute;
    z-index: 1;
}
.card-detail-sidebar .btn-close {
    background-color: #F2F2F2;
    opacity: 1;
    border-radius: 50px;
    border: 3px solid #0a0a0a;
    width: 28px;
    height: 28px;
}
.card-detail-sidebar .offcanvas-header {
    padding: 20px 30px 20px 46px;
}
.card-detail-sidebar .offcanvas-body {
    padding: 40px 70px 20px 46px;
}
.card-details-box .form-group{
    margin-bottom: 14px;
}
.card-detail-sidebar.offcanvas-end {
    width: 668px;
}
body:has(.offcanvas.show) .plan-sec {
    opacity: 0.5;
    filter: brightness(0.4) blur(3px);
}
.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    font-weight: 500;
    &:hover{
        color: var(--white) !important;
        background-color: var(--primary-color) !important;
    }
}
 .btn-check:checked+.btn-outline-primary {
    color: #fff !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}
.card-details-box .form-group input::placeholder{
    color: #6D42F3 !important;
    font-weight: 500 !important;
}
.InputContainer::after{
    color: #6D42F3 !important;
    font-weight: 500 !important;
}