@media screen and (min-width:576px) {}
@media screen and (min-width:768px) {}
@media screen and (min-width:880px) {}
@media screen and (min-width:992px) {}
@media screen and (min-width:1200px) {}
@media screen and (min-width:1480px) {}



/* ====== max CSS ===== */
@media screen and (max-width:1840px){
    .plan-card-box {
        gap: 20px;
    }
    .plan-card {
        max-width: 385px;
        width: 100%;
    }
    .plan-wrapper {
        height: 100vh;
        padding: 100px 60px 20px;
    }
}
@media screen and (max-width:1600px) {
    .login-img > img {
        max-width: 600px;
    }
    .plan-logo > img {
        max-width: 200px;
    }
    .plan-wrapper {
        padding: 100px 40px 20px;
    }
    .plan-card {
        max-width: 360px;
    }
}
@media screen and (max-width:1440px) {
    .plan-sec::after {
        width: 77vw;
    }
    .plan-logo {
        top: 20px;
        left: 20px;
    }
    .plan-card-box {
        margin-top: 40px;
    }
    .login-form {
        max-width: 563px;
        padding: 45px 40px 45px 40px;
    }
    .register-main::after {
        height: calc(100vh + 312px);
        width: 56vw;
        left: -200px;
        top: -143px;
    }
    .login-form > h2 {
        margin: 0 0 30px;
        line-height: 42px;
        font-size: 36px;
    }
    .login-circle {
        top: -11%;
        left: -27%;
    }
    .login-logo {
        top: 56px;
        left: 40px;
    }
}
@media screen and (max-width:1199px) {
    .plan-card {
        max-width: 400px;
    }
    .plan-card-box {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .formula1 {
        filter: drop-shadow(2px 4px 6px black) brightness(0.5);
    }
    .formula2 {
        right: 76px;
        bottom: 48px;
        left: auto;
        filter: drop-shadow(2px 4px 6px black) brightness(0.5);
    }
    .login-wrapper {
        flex-direction: column;
    }
    .login-img > img {
        max-width: 400px;
    }
    .login-sec::before {
        display: none;
    }
    .register-main::after {
        height: 68%;
        width: 105vw;
        left: -31px;
        top: -306px;
    }
    .login-img {
        display: none;
    }
    .login-circle {
        top: 5%;
        left: 0;
    }
    .login-logo {
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
    }
    .login-wrapper {
        padding: 110px 15px 20px;
    }
    .register-main::after {
        left: -18px;
    }
  

}
@media screen and (max-width:1080px) {

}
@media screen and (max-width:992px) {
    .plan-sec::after {
        content: "";
        position: fixed;
        height: 100vh;
        width: 117vw !important;
        background-color: #0A0A0A;
        left: -77px;
        top: -61%;
        border-radius: 50%;
        z-index: 0;
        width: 100%;
    }
}
@media screen and (max-width:767px) {
    .signup-wrapper .login-form {
        padding: 30px 20px;
    }
        .signup-wrapper.login-wrapper {
        padding: 100px 15px 20px;
    }
    .login-wrapper {
        padding: 55px 15px 20px;
    }
    .forgot-pass {
        font-size: 18px;
    }
    .no-acc-link {
        font-size: 18px !important;
    }
    .login-form > h1 {
        margin: 0 auto 25px;
        line-height: 39px;
        font-size: 26px;
        max-width: 300px;
    }
    .plan-sec::after {
        left: -60px;
    }
    .formula2 {
        display: none;
    }
    .formula1 {
        display: none;
    }
    .login-form > h2 {
        margin: 0 0 30px;
        line-height: 38px;
        font-size: 30px;
    }
    .login-form {
        max-width: 563px;
        padding: 30px 20px 30px 20px;
    }
    .login-form > p {
        margin: 26px 0 15px;
        font-size: 14px;
        line-height: 19px;
    }
}
@media screen and (max-width:575px) {
    .login-form form > p {
        font-size: 14px;
        line-height: 19px;
        font-weight: 500;
    }
    .card-detail-sidebar .offcanvas-header {
        padding: 20px;
    }
    .card-detail-sidebar .offcanvas-body {
        padding: 30px 20px 20px 20px;
    }
    .plan-card-box {
        margin-top: 10px;
    }
    .plan-logo {
        top: 20px;
        left: 45%;
        transform: translateX(-50%);
    }
    .plan-sec::after {
        content: "";
        position: fixed;
        height: 100vh;
        width: 130vw !important;
        background-color: #0A0A0A;
        left: -84px;
        top: -82%;
        border-radius: 50%;
        z-index: 0;
        width: 100%;
    }
    .register-main::after {
        height: 58%;
        width: 128vw;
        left: -53px;
        top: -313px;
    }
}
@media screen and (max-width:480px) {}
@media screen and (max-width:360px) {}