/* Reset and Base Styles */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background: radial-gradient(circle at top, #1a2b3a 0%, #0e1d2a 60%, #081520 100%);
    color: white;
    overflow-x: hidden;
    min-height: 100vh;
}

/* Screen Management */
.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    overflow: hidden;
}

.screen.active {
    display: block;
}

/* Common Elements */
.background-blur {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 1138px;
    height: 90vh;
    max-height: 682px;
    /* background: rgba(255, 255, 255, 0.4); */
    filter: blur(212px);
    z-index: -1;
    display: none;
}



.background-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 1217px;
    height: auto;
    max-height: 851px;
    object-fit: cover;
    z-index: 10;
    transform: scaleX(-1);
    display: none;
    /* Hidden on mobile by default */
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    transform: matrix(-1, 0, 0, 1, 0, 0);
}


.logo {
    position: relative;
    width: 150px;
    height: auto;
    max-width: 266px;
    max-height: 107px;
    z-index: 10;
    margin: 0 auto 30px;
    display: block;
}

.user-profile {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

.user-info {
    text-align: right;
    display: none;
    /* Hidden on mobile by default */
}

.user-name {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.11);
}

.user-email {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.11);
}

.user-avatar {
    width: 50px;
    height: 50px;
    position: relative;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.footer {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 10;
}

.footer p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: white;
    margin-bottom: 4px;
}

.payment-methods {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: auto;
    max-height: 47px;
    object-fit: cover;
    z-index: 10;
}

/* Buttons */
.btn-primary {
    position: relative;
    border: none;
    border-radius: 100px;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 340px;
    margin: 10px auto;
    display: block;
    background: linear-gradient(180deg, #749D99 0.79%, rgba(54, 91, 86, 0.95) 113.52%);
    box-shadow: 0px 19px 38px rgba(0, 0, 0, 0.3), 0px 15px 12px rgba(0, 0, 0, 0.22);
    align-items: center;
    display: flex;
}

/* Border gradient using a pseudo-element */
.btn-primary::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    border-radius: inherit;
    background: linear-gradient(153deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.25));
    z-index: -1;
}


.btn-secondary {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 100px;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: white;
    cursor: pointer;
    position: relative;
    /* box-shadow: 0px 15px 12px rgba(0, 0, 0, 0.22), 
                0px 19px 38px rgba(0, 0, 0, 0.3); */
    transition: all 0.3s ease;
    width: 100%;
    max-width: 300px;
    margin: 10px auto;
    display: block;
    height: 48px;
    align-items: center;
    display: flex;
    box-shadow: 0px 19px 38px rgba(0, 0, 0, 0.3), 0px 15px 12px rgba(0, 0, 0, 0.22);
    border-image-source: linear-gradient(143.89deg, rgba(255, 255, 255, 0.4) 3.16%, rgba(255, 255, 255, 0.08) 86.83%);
    ;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 100px;
    background: linear-gradient(144deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    mask-composite: exclude;
    z-index: -1;
}

/* .btn-secondary::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: inherit;
    background: linear-gradient(144deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 100%);
    z-index: -1;
  } */


.btn-third {
    position: relative;
    border: none;
    border-radius: 100px;
    padding: 12px 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 340px;
    margin: 10px auto;
    display: block;
    background: linear-gradient(180deg, #749D99 0.79%, rgba(54, 91, 86, 0.95) 113.52%);
    box-shadow: 0px 19px 38px rgba(0, 0, 0, 0.3), 0px 15px 12px rgba(0, 0, 0, 0.22);
    height: 48px;
    align-items: center;
    display: flex;
}

/* Border gradient using a pseudo-element */
.btn-third::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    border-radius: inherit;
    background: linear-gradient(153deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.25));
    z-index: -1;
}

.btn-primary:hover,
.btn-third:hover,
.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.3);
}

/* Login Screen */
.login-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
}




.login-card {
    width: 100%;
    max-width: 527px;
    height: 700px;
    min-height: 500px;
    background: transparent;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-radius: 40px;
    padding: 40px 30px;
    z-index: 10;
    box-shadow: 0px 32px 16px rgba(0, 0, 0, 0.09),
        0px 16px 8px rgba(0, 0, 0, 0.09),
        0px 8px 4px rgba(0, 0, 0, 0.09),
        0px 4px 2px rgba(0, 0, 0, 0.09),
        0px 2px 1px rgba(0, 0, 0, 0.09);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(214, 235, 235, 0.65) 0%, rgba(214, 235, 235, 0.6) 100%);
}

.login-card::-webkit-scrollbar {
    display: none;
}

.login-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 40px;
    background: linear-gradient(167deg, rgba(208, 229, 229, 1) 0%, rgba(208, 229, 229, 0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    pointer-events: none;
}

.login-card h1 {
    font-family: 'Gilroy-Medium', sans-serif;
    font-weight: 400;
    font-size: 28px;
    color: white;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.11);
    margin-bottom: 10px;
    line-height: 100%;
    letter-spacing: 0%;
}

.subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    color: white;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.11);
    margin-bottom: 30px;
}

.login-form {
    width: 100%;
    max-width: 328px;
    margin: 0 auto;
}

.form-field {
    margin-bottom: 15px;
}


.input-wrapper {
    position: relative;
    width: 100%;
    height: 50px;
}

.input-wrapper input {
    width: 100%;
    height: 100%;
    padding: 0 50px;
    border: 2px solid rgba(218, 210, 200, 0.7);
    border-radius: 100px;
    background: linear-gradient(180deg,
            rgba(218, 210, 200, 0.75) 0%,
            rgba(218, 210, 200, 0.7) 100%);
    box-shadow:
        0px 2px 1px rgba(0, 0, 0, 0.09),
        0px 4px 2px rgba(0, 0, 0, 0.09),
        0px 8px 4px rgba(0, 0, 0, 0.09),
        0px 16px 8px rgba(0, 0, 0, 0.09),
        0px 32px 16px rgba(0, 0, 0, 0.09);
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 15px;
    outline: none;
}

.input-wrapper input::placeholder {
    color: white;
    opacity: 1;
}


.input-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    z-index: 2;
}

.input-icon-right {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    cursor: pointer;
    z-index: 2;
}

.forgot-password {
    display: block;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: white;
    text-decoration: none;
    margin: 25px 0;
}

.forgot-password:hover {
    text-decoration: underline;
}

.signup-link {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: white;
    margin-top: 20px;
}

.signup-link a {
    color: white;
    text-decoration: none;
    font-weight: 400;
}

.signup-link a:hover {
    text-decoration: underline;
}

.mo-font{
    font-size: 14px I !important;
}
.m-1{
    margin: .2rem !important;
}
/* Media Queries for Larger Screens */
@media (min-width: 1024px) {
    .background-blur {
        display: block;
    }

    .background-image {
        display: block;
    }

    .logo {
        position: absolute;
        top: 47px;
        left: 82px;
        width: 266px;
        height: 107px;
        margin: 0;
    }

    .user-info {
        display: block;
    }

    .user-name {
        font-size: 18px;
    }

    .user-email {
        font-size: 16px;
    }

    .user-avatar {
        width: 65px;
        height: 63px;
    }

    .footer {
        bottom: 48px;
        left: 86px;
    }

    .footer p {
        font-size: 14px;
    }

    .payment-methods {
        bottom: 49px;
        width: 290px;
        height: 47px;
    }

    .btn-primary,
    .btn-secondary {
        padding: 16px 32px;
        margin-top: 40px;
    }

    .login-container {
        padding: 0;
        align-items: flex-end;
        justify-content: center;
        padding-right: 15%;
    }

    .login-card {
        padding: 97px 102px;
        transform: none;
        position: relative;
        right: auto;
        margin-right: -100px;
    }

    .login-card h1 {
        font-size: 35px;
    }

    .subtitle {
        font-size: 17px;
        margin-bottom: 30px;
    }

    .background-image {
        margin-right: 320px;
        margin-top: 50px;
    }
}

@media (min-width: 1200px) {
    .background-image {
        width: 1217px;
        height: 851px;
    }
}

.signup-link,
.login-link {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: white;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.11);
    margin-top: 140px;
    margin-bottom: 0px;
}

.signup-link a,
.login-link a {
    font-weight: 400;
    color: white;
    text-decoration: none;
}

.signup-link a:hover,
.login-link a:hover {
    text-decoration: underline;
}

/* Signup Screen */
.signup-card {
    position: absolute;
    top: 50%;
    right: 15%;
    transform: translateY(-50%);
    width: 527px;
    height: 700px;
    background: transparent;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    border-radius: 40px;
    padding: 57px 102px;
    z-index: 10;
    box-shadow: 0px 32px 16px rgba(0, 0, 0, 0.09),
        0px 16px 8px rgba(0, 0, 0, 0.09),
        0px 8px 4px rgba(0, 0, 0, 0.09),
        0px 4px 2px rgba(0, 0, 0, 0.09),
        0px 2px 1px rgba(0, 0, 0, 0.09);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, rgba(214, 235, 235, 0.65) 0%, rgba(214, 235, 235, 0.6) 100%);
    margin-right: -100px;
}

.login-card::-webkit-scrollbar {
    display: none;
}

.signup-card::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: 40px;
    background: linear-gradient(167deg, rgba(208, 229, 229, 1) 0%, rgba(208, 229, 229, 0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
    pointer-events: none;
}

.signup-card h1 {
    font-family: 'Gilroy-Medium', sans-serif;
    font-weight: 400;
    font-size: 35px;
    color: white;
    text-align: center;
    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.11);
    margin-bottom: 10px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
}

.signup-form {
    width: 100%;
    max-width: 328px;
    margin: 0 auto;
}

.signup-form .form-field {
    margin-bottom: 20px;
}

.signup-form .btn-primary {
    width: 100%;
    height: 55px;
    margin: 40px 0;
}

@media screen and (max-width: 768px) {
    .background-image {
        display: none;
        /* Hide background image */
    }

    .logo {
        position: relative;
        display: block;
        margin: 40px auto 40px 80px;
        /* Center the logo */
        max-width: 200px;
    }

    .login-card {
        overflow-y: auto;
    }

    .mobile-swal {
        width: 50% !important;
        max-width: 50% !important;
        height: auto;
        padding: 16px;
    }

    .signup-card {
        position: relative;
        margin: 0 auto;
        /* Horizontally center */
        margin-top: 20px;
        transform: none !important;
        /* Remove vertical centering */
        top: unset !important;
        right: unset !important;
        width: 90%;
        max-width: 400px;
        height: auto;
        padding: 40px 20px;
        overflow-y: auto;
    }

    .signup-link,
    .login-link {
        margin-top: 40px;
    }

    .signup-card h1 {
        font-size: 28px;
    }

    .signup-form {
        max-width: 100%;
    }

    .mo-font{
        font-size: 12px !important;
    }
}


.login-link {
    margin-top: 30px;
}

@media (max-width: 600px) {
    .signup-card {
        width: 90%;
        padding: 20px;
    }
}



.custom-input {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #DAD2C8BF;
    border: 2px solid #DAD2C8B2;
    border-radius: 25px;
    height: 55px;
    overflow: hidden;
    box-shadow:
        0px 2px 1px rgba(0, 0, 0, 0.09),
        0px 4px 2px rgba(0, 0, 0, 0.09),
        0px 8px 4px rgba(0, 0, 0, 0.09),
        0px 16px 8px rgba(0, 0, 0, 0.09),
        0px 32px 16px rgba(0, 0, 0, 0.09);
}

.custom-input input {
    background: transparent;
    border: none;
    outline: none;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 15px;
    color: white;
    height: 100%;
    padding: 0;
    margin: 0;
}

.custom-input input#country_code {
    width: 70px !important;
    padding-left: 45px;
    padding-right: 0px;
    border-right: none;
    border-radius: 0px;
    z-index: 2;
}

.custom-input input#phone_number {
    flex: 1;
    padding-left: 20px;
    border-radius: 0px;
}

.custom-input input::placeholder {
    color: white;
    opacity: 1;
}

.custom-input::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 20px;
    /* background: rgba(255, 255, 255, 0.4); */
    z-index: 1;
    background: #ffff !important;
    left: 70px;
    top: 26px !important;
}

.custom-input .input-icon {
    position: absolute;
    left: 16px;
    width: 20px;
    height: 20px;
    z-index: 3;
}

.custom-input .vector-icon {
    position: absolute;
    right: 10px;
    width: 14px;
    height: 14px;
}











/*-- color --*/
.base-color {
    color: #2A3544
}

.base-color-3 {
    color: #1D0005
}

.base-color-2 {
    color: #4B5563
}

.text-grey-90 {
    color: #919191 !important
}

.text-blue {
    color: #0058D4 !important
}

.text-green-30 {
    color: #00B036
}

.text-danger-40 {
    color: #DF4142
}

.text-uppercase {
    text-transform: uppercase
}

.cursor-pointer {
    cursor: pointer;
}

/*-- background color --*/
.bg-black {
    background-color: #200B0B;
}

.bg-base {
    background: #2A3544 !important;
}

.bg-red-60 {
    background: #DF4142 !important
}

.bg-purple {
    background-image: linear-gradient(to right, #ADBAFF, #7592ED) !important
}

.bg-light-10 {
    background-color: #F6F6F6 !important;
}

.bg-gray-gradient-reverse {
    background-image: linear-gradient(to top, #e8ecec, white) !important
}

.bg-gray-gradient2 {
    background-image: linear-gradient(180deg, #E9F3FA, #FCFEFE);
    box-shadow: 12px 12px 28px 0px rgba(0, 0, 0, 0.2), -18px -18px 37px 0px #FFFFFF;
}

.bg-lightgray-gradient-reverse {
    background-image: linear-gradient(to top, #e8ecec, #F2F5F6) !important
}

.bg-purple-gradient {
    background-image: linear-gradient(to bottom, #F1F1FE, #E8EEFC) !important
}

.bg-purple-gradient-reverse {
    background-image: linear-gradient(to top, #E8EEFC, #F1F1FE) !important
}

.cols-md {
    flex: 0 0 auto;
    width: 63.8%
}

/*-- font-size --*/
.fs-7{
    font-size: 7px !important;
}
.fs-10 {
    font-size: 10px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-14 {
    font-size: 14px !important;
}


.fs-16 {
    font-size: 16px !important;
}

.fs-17 {
    font-size: 17px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-22 {
    font-size: 22px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-26 {
    font-size: 26px !important;
}

.fs-28 {
    font-size: 28px !important;
}

.fs-30 {
    font-size: 30px !important;
}

.fs-32 {
    font-size: 32px !important;
}

.fs-34 {
    font-size: 34px !important;
}

.fs-36 {
    font-size: 36px !important;
}

.fs-38 {
    font-size: 36px !important;
}

/*-- font-weight --*/
.fw-semibold {
    font-weight: 600;
}

.fw-800 {
    font-weight: 800 !important;
}

/*-- form-control --*/
.form-control-lg {
    padding: 10px 18px;
    min-height: 54px;
    border-radius: 5px;
}

/*-- btn-css --*/
.btn-lg {
    height: 54px;
    align-items: center;
    display: flex;
}

/*-- border --*/
.border-white {
    border: 1px solid white
}

.border-light {
    border: 1px solid #F6F6F6
}

.border-light-20 {
    border: 1px solid #EFEFEF
}

.border-bottom-light {
    border-bottom: 1px solid #F6F6F6;
}

.border-base {
    border: 1px solid #2A3544 !important;
}

.border-red {
    border: 1px solid #DF4142
}

.rounded-10 {
    border-radius: 10px !important;
}

.rounded-20 {
    border-radius: 20px !important;
}

.rounded-30 {
    border-radius: 30px !important;
}

.rounded-50 {
    border-radius: 50px !important;
}

.blur-9 {
    filter: blur(9px)
}

.mt-72 {
    margin-top: 72px
}

.mt-12 {
    margin-top: 12%
}

.mt-10 {
    margin-top: 10%
}

.pt-10 {
    padding-top: 10%
}

.mb-12 {
    margin-bottom: 12%
}

/*-- height --*/
.h-80 {
    height: 80px;
}

.h-200 {
    height: 200px;
}

.flex {
    display: flex;
}

.bg-black-section {
    height: 200px;
}

/*-- toggle-switch --*/
.toogle-switch .form-check-input:checked {
    background-color: #00B036;
    border-color: #00B036;
}

/*-- padding --*/
.p-12 {
    padding: 0.75rem
}

.py-12 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}

.mar-y-5 {
    margin-top: -5px;
    margin-bottom: 5px;
}


select::placeholder {
    font-size: 16px;
    color: #2A3544;
    opacity: 0.5;
}

/*-- textarea --*/
textarea.form-control-lg {
    min-height: 140px !important;
}

/* -- opacity --*/
.opacity-10 {
    opacity: 0.10;
}

.opacity-20 {
    opacity: 0.20;
}

.opacity-30 {
    opacity: 0.30;
}

.opacity-40 {
    opacity: 0.40;
}

.opacity-50 {
    opacity: 0.50;
}

.opacity-60 {
    opacity: 0.60;
}

.opacity-70 {
    opacity: 0.70;
}

.opacity-80 {
    opacity: 0.80;
}

.opacity-90 {
    opacity: 0.90;
}

.mb-md-plan {
    margin-bottom: 2.5rem !important;
}

/* -- border -- */
.border-blue {
    border: 1px solid #6662AC !important;
}

.border-blue-b {
    border-bottom: 1px solid #6662AC !important;
}

.border-gray {
    border-bottom: 1px solid rgba(231, 232, 233, 0.2) !important;
}

.border-white-b {
    border-bottom: 1px solid #fff !important
}

.border-gery-dashed {
    border-bottom: 1px dashed #D8D8D8 !important
}

.user-prof.position-absolute {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
    top: -60px;
    border: 8px solid #f6f6f6;
}

.current-main-content {
    margin-top: 140px;
    margin-bottom: 150px;
    height: calc(100% - 340px);
    overflow-y: auto;
    padding-top: 60px;
}

.selectedPlanInner {
    z-index: 10;
}

.selectedPlanInner::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 0 100px 0 0;
    top: -24px;
    left: -24px;
    background: black !important;
    z-index: -2;
}

.planInner::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 0 100px 0 0;
    top: -24px;
    left: -24px;
    background: #efefef;
    z-index: -2;
}

.most-popular {
    top: -15px;
    left: 70px;
}

.navbar-expand-lg .navbar-nav .nav-link {
    color: #fff;
}

.navbar-expand-lg .navbar-nav .nav-link.active,
.navbar-expand-lg .navbar-nav .nav-link:hover {
    color: #DF4142;
    position: relative;
}

.navbar-expand-lg .navbar-nav .nav-link.active::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    background-color: #DF4142;
    left: 0px;
    bottom: 0px;
}

.navbar-expand-lg .navbar-nav .nav-item .nav-link {
    padding: 24px 10px;
}

.w-150 {
    width: 150px;
}

.w-85 {
    width: 85%;
}

.w-62 {
    width: 62%;
}

.w-67 {
    width: 66.4%;
}

a {
    text-decoration: none;
}

.text-underline {
    text-decoration: underline;
}

.info {
    display: none;
    position: relative;
    background: linear-gradient(180deg, #F2F8FC 0%, #F2F8FC 100%);
    border-radius: 5px;
    margin-top: 6px;
    /* Use margin-top for spacing instead of top */
    padding: 8px 12px 8px 16px;
    color: #64748B;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 17px;
    width: 70%;
    /* Stretch to container width */
    max-width: 100%;
    box-sizing: border-box;
}

.info::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 70%;
    background-color: #FF5C5C;
    border-radius: 2px;
}

.info.active {
    display: block;
}

.loader {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999999;
}

.loader_over_modal {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.3);
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999999999;
}

.spinner {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    position: absolute;
}

.spinner-grow {
    width: 4rem;
    height: 4rem;
}

.ml-1 {
    margin-left: 1rem;
}

.ml-3 {
    margin-left: 3rem;
}

.ml-4 {
    margin-left: 4rem;
}

.ml-7 {
    margin-left: 7rem;
}

.ml-10 {
    margin-left: 10%;
}

.ml-20 {
    margin-left: 20%;
}

.ml-40 {
    margin-left: 40%;
}

.mr-10 {
    margin-right: 10%;
}

.pd-1 {
    padding: 2.5rem;
}

.price-container {
    margin-left: -16%;
    width: 132%;
}

.dark1 {
    color: #171E35 !important;
}

.gray1 {
    color: #CBCBCB !important;
}

.black {
    color: #000000 !important;
}

.gray2 {
    color: #565A69 !important
}

.dark2 {
    color: #FFFFFF !important
}

.active-plan {
    border: 1px solid #3FAEA1 !important;
   background: radial-gradient(ellipse at center,  rgba(63,174,161,1) 100%,rgba(63,174,161,1) 100%);
    box-shadow: 0px 19px 38px rgba(0, 0, 0, 0.3), 0px 15px 12px rgba(0, 0, 0, 0.22);
    padding: 22px 22px 30px 22px
}

.basic-plan {
    border: 1px solid #FFFFFF !important;
    background: radial-gradient(ellipse at center,  rgba(84,90,95,1) 0%,rgba(87,94,102,1) 100%);
    box-shadow: 0px 19px 38px rgba(0, 0, 0, 0.3), 0px 15px 12px rgba(0, 0, 0, 0.22);
    backdrop-filter: blue(4px);
    padding: 22px 22px 30px 22px
}

.btn-gray-2,
.btn-gray-2:hover {
    background-color: #DDE7EB;
    color: #181F36 !important;
}

.custom-modal-footer button {
    width: 126px;
    height: 48px;
}

.user-img {
    width: 50px;
    height: 50px;
}

.user-img::after {
    position: absolute;
    width: 60px;
    height: 60px;
    top: -5px;
    left: -5px;
    content: "";
    border-radius: 50%;
    border: 2px solid #BFC2E1;
}

.unlimited-access {
    display: inline-block;
    width: auto;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
}

.modal-body {
    padding: 0px;
}

.signup-full-height {
    height: 100vh !important;
}

@media (max-width: 1199.99px) {
    .signup-full-height {
        height: auto !important;
    }

    .custom-margin {
        margin: 80px 0 80px;
    }
}

@media (max-width: 992px) {
    .login-form {
        width: 70%;
        margin: 0 15%;
    }

    .bg-black-section {
        height: 80px;
        background-color: transparent !important;
    }

    .top-bar-logo {
        width: 130px;
        margin-left: 56px;
    }

    .mobile-menu button.navbar-toggler {
        margin-top: -26px;
    }

    .mt-72 {
        margin-top: 62px
    }

    .mobile-menu .navbar-nav .nav-item .nav-link {
        padding: 16px 10px;
    }
}

@media (max-width: 575.99px) {
    .unlimited-access {
        display: inline-block;
        width: 180px !important;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .active-plan,
    .basic-plan {
        padding: 7px;
    }

    .modal-dialog-scrollable .modal-content {
        margin: 16px;
    }

    .fs-34 {
        font-size: 24px !important;
    }

    .w-67 {
        width: 100%;
    }

    .login-form {
        width: calc(100% - 60px);
        margin: 0 30px;
    }

    .custom-margin {
        margin: 40px 0 40px;
    }

    .rounded-50 {
        border-radius: 20px !important;
    }

    .page-container {
        margin: 16px;
        border-radius: 20px;
        backdrop-filter: blur(10px);
        height: unset;
        overflow-y: unset;
    }
}


.rounded-10.bg-white {
    background: linear-gradient(180deg, rgba(241, 194, 142, 0.8) 0%, rgba(241, 194, 142, 0.8) 100%) !important;
    box-shadow: 0px 19px 38px rgba(0, 0, 0, 0.3), 0px 15px 12px rgba(0, 0, 0, 0.22) !important;
    border-radius: 30px !important;
}


.summary-box {
    background: radial-gradient(ellipse at center,  rgba(255,251,234,1) 99%,rgba(41,137,216,1) 100%); 
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
    border-radius: 30px;
    box-sizing: border-box;
    width: 100%;
    max-width: 533px;
    margin: 0 auto;
}

.custom-paynow-margin {
    margin-top: 4rem !important;
    /* Adjust this value as needed (1rem = ~16px) */
}

.payment-card {
    margin-top: 1rem !important;
}

@media (min-width: 1200px) {
    .summary-box {
        margin-left: 209px;
    }
}


.background-image-container {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 1217px;
    height: 815px;
    object-fit: cover;
    z-index: -1;
    left: 300px;
}

.background-image-alt {
    width: 100%;
    height: auto;
    object-fit: cover;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    display: block;

}

@media (min-width: 1024px) {
    .background-image-container {
        margin-right: -253px;
        margin-top: -60px;
    }
}

@media (min-width: 1200px) {
    .background-image-alt {
        max-width: 1217px;
        height: 815px;
    }
}

.custom-figma-modal {
    width: 413px;
    height: 384px;
    opacity: 1;
    border-radius: 30px;
    border-width: 2px;

    background: linear-gradient(180deg, rgba(218, 210, 200, 0.9) 0%, rgba(218, 210, 200, 0.8) 100%);
    box-shadow:
        0px 2px 1px rgba(0, 0, 0, 0.09),
        0px 4px 2px rgba(0, 0, 0, 0.09),
        0px 8px 4px rgba(0, 0, 0, 0.09),
        0px 16px 8px rgba(0, 0, 0, 0.09),
        0px 32px 16px rgba(0, 0, 0, 0.09);
    border-radius: 30px;
    position: relative;
    z-index: 1050;
}


@media (min-width: 576px) {
    .modal-dialog {
        margin-right: 405px !important;
    }
}

.modal-backdrop.show {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    z-index: 1040;
}

.pt-5rem {
    padding-top: 5rem !important;
}