.do-not-have,
.login-through-your,
.login3 {
    position: absolute;
    font-family: var(--font-inter);
    color: var(--color-darkslategray-200);
    text-align: left;
    display: inline-block;
}

.login3 {
    top: 33px;
    left: 576px;
    font-size: var(--font-size-29xl);
    width: 142px;
    height: 59px;
}

.do-not-have,
.login-through-your {
    top: 125px;
    left: 464px;
    font-size: var(--font-size-3xl);
    width: 365px;
}

.do-not-have {
    top: 168px;
    width: 259px;
}

.subs-child5 {
    position: absolute;
    height: 16.25%;
    width: 14.56%;
    top: 11.93%;
    right: 80.98%;
    bottom: 71.82%;
    left: 4.47%;
    border-radius: var(--br-62xl);
    border: 12px solid var(--color-mediumslateblue-200);
    box-sizing: border-box;
    transform: rotate(19.42deg);
    transform-origin: 0 0;
}

.subs-child6,
.subs-child7,
.subs-child8 {
    position: absolute;
    top: 409.21px;
    left: 0;
    border-radius: var(--br-62xl);
    width: 121.63px;
    height: 109.79px;
}

.subs-child7,
.subs-child8 {
    top: 60.34px;
    left: 390.54px;
    border: 30px solid var(--color-mediumslateblue-100);
    box-sizing: border-box;
    width: 185.73px;
    height: 80.37px;
    transform: rotate(138.66deg);
    transform-origin: 0 0;
}

.subs-child8 {
    top: 448.93px;
    left: 354.25px;
    border: 26px solid var(--color-mediumslateblue-100);
    width: 250.74px;
    transform: rotate(-142.48deg);
}

.subs-child10,
.subs-child11,
.subs-child9 {
    position: absolute;
    height: 17.92%;
    width: 9.52%;
    top: 51.06%;
    right: 93.55%;
    bottom: 31.02%;
    left: -3.07%;
    border-radius: var(--br-61xl);
    background: linear-gradient( 118deg, #3652e1, #8057f5 50.52%, #7851e8 98.95%, #8057f5 98.96%);
    transform: rotate(-90deg);
    transform-origin: 0 0;
}

.subs-child10,
.subs-child11 {
    width: 3.89%;
    top: 80.93%;
    right: 83.42%;
    bottom: 1.15%;
    left: 12.69%;
    transform: rotate(-76.97deg);
}

.subs-child11 {
    height: 30.86%;
    width: 4.39%;
    top: -0.07%;
    right: 89.46%;
    bottom: 69.22%;
    left: 6.14%;
    transform: rotate(-64.07deg);
}

.inputemail-icon {
    top: 228px;
    left: 464px;
    border: 4px solid #3652E1;
    border-radius: 12.78px;
    width: 343px;
    color: var(--color-darkslategray-200);
    font-size: 14.06px;
    font-family: var(--font-inter);
    letter-spacing: 0.02em;
    line-height: 10.22px;
}

.button-item,
.inputemail-icon,
.subs-child12 {
    position: absolute;
    height: 55px;
}

.subs-child12 {
    top: 315.5px;
    left: 464px;
    border: 4px solid #3652E1;
    border-radius: 12.78px;
    width: 343px;
    color: var(--color-darkslategray-200);
    font-size: 14.06px;
    font-family: var(--font-inter);
    letter-spacing: 0.02em;
    line-height: 10.22px;
}

.button-item {
    top: 0;
    left: 0;
    border-radius: var(--br-xs);
    background-color: var(--color-blueviolet);
    width: 134.3px;
}

.login4 {
    position: absolute;
    top: 21.39px;
    left: 25.58px;
    font-size: var(--font-size-lg);
    letter-spacing: 0.02em;
    line-height: 10.22px;
    display: inline-block;
    font-family: var(--font-inter);
    color: var(--color-white);
    text-align: center;
    width: 82.07px;
    height: 13.15px;
}

.button1 {
    cursor: pointer;
    border: 0;
    padding: 0;
    background-color: transparent;
    position: absolute;
    top: 411px;
    left: 569px;
    width: 134.3px;
    height: 55px;
}

#email-address1,
#password1 {
    font-size: 14.06px;
    letter-spacing: 0.02em;
    line-height: 10.22px;
    color: var(--color-darkslategray-200);
}

.email-address1,
.password1,
.sign-up2 {
    position: absolute;
    font-family: var(--font-inter);
    display: inline-block;
}

.sign-up2 {
    cursor: pointer;
    border: 0;
    padding: 0;
    background-color: transparent;
    top: 168px;
    left: 728px;
    font-size: var(--font-size-3xl);
    font-weight: 500;
    color: var(--color-mediumslateblue-200);
    text-align: left;
    width: 79px;
}

.subs1 {
    position: absolute;
    top: 147px;
    left: 260px;
    border-radius: var(--br-21xl);
    background-color: var(--color-white);
    width: 977px;
    height: 519px;
    overflow: hidden;
}

.mp {
    color: black;
}

.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-whitesmoke);
    padding: 20px;
    box-shadow: 0px 1px 45px rgba(0, 0, 0, 0.1);
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    padding-right: 60px;
}

.logo {
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 30px;
    margin-left: 30px;
    cursor: pointer;
}

.news1 {
    color: var(--color-mediumslateblue-200);
}

.nav-links {
    display: flex;
    gap: 20px;
    padding-right: 60px;
}

.nav-links a {
    font-size: 18px;
    font-weight: 500;
    color: black;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.nav-links a:hover {
    transform: scale(1.1);
    color: #3652E1;
}

.login2 {
    position: relative;
    background-color: var(--color-whitesmoke);
    width: 100%;
    height: 813px;
    overflow: hidden;
    text-align: left;
    font-size: var(--font-size-3xs);
    color: var(--color-gray-100);
    font-family: var(--font-inter);
}

a {
    color: black;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.switch {
    position: relative;
    display: inline-block;
    width: 62px;
    height: 30px;
    top: -2px;
}

.nav-links {
    position: relative;
}

.nav-links .indicator {
    position: absolute;
    bottom: -15px;
    left: 86%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #3652E1;
}

.switch {
    position: relative;
    display: inline-block;
    width: 62px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 35px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 35px;
}

.text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 28px;
    color: rgb(110, 108, 108);
    font-size: 14px;
    font-weight: 700;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:checked+.slider:before {
    -webkit-transform: translateX(32px);
    -ms-transform: translateX(32px);
    transform: translateX(32px);
}

input:checked+.slider+.text {
    left: 6px;
    color: whitesmoke;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-10px);
    }
    20%,
    40%,
    60%,
    80% {
        transform: translateX(10px);
    }
    100% {
        transform: translateX(0);
    }
}


/* Apply Shake Animation to Email Input */

.shake-input {
    animation: shake 0.8s;
}

input {
    padding-left: 10px;
}

input::placeholder {
    font-size: larger;
}

input:hover,
button:hover {
    box-shadow: 2px 2px 45px rgba(0, 0, 0, 0.1);
}

a:hover {
    transform: scale(1.2);
    color: #3652E1;
}

@media (max-width: 1368px) {
    .mpnews-group {
        position: absolute;
        top: 0;
        left: 65%;
        transform: translateX(-50%);
        width: 118px;
        height: 33px;
        cursor: pointer;
        font-size: var(--font-size-8xl);
    }
    .nav-bar-group {
        position: absolute;
        bottom: 16px;
        left: 40%;
        transform: translateX(-50%);
        width: 100%;
        display: flex;
        justify-content: center;
        gap: var(--gap-9xl);
    }
    .nav-bar3,
    .nav-bar2 {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--gap-9xl);
        margin-top: 40px;
    }
    .nav-bar2 {
        margin-left: auto;
    }
    .subs1 {
        left: 15%;
    }
}

@media (max-width: 1168px) {
    /* Styles for other elements remain the same */
    .subs1 {
        position: absolute;
        top: 187px;
        left: 380px;
        border-radius: var(--br-21xl);
        background-color: var(--color-white);
        width: 477px;
        height: 419px;
        overflow: hidden;
    }
    .subs-child5,
    .subs-child6,
    .subs-child7,
    .subs-child8,
    .subs-child9,
    .subs-child10,
    .subs-child11 {
        display: none;
    }
    .do-not-have,
    .login-through-your {
        left: 114px;
        width: 365px;
        font-size: 15px;
    }
    .login3 {
        left: 200px;
        font-size: 22px;
    }
    .inputemail-icon,
    .subs-child12 {
        left: 100px;
        height: 30px;
        width: 250px;
    }
    .do-not-have {
        top: 130px;
    }
    .login-through-your {
        top: 90px;
    }
    .inputemail-icon {
        top: 178px;
    }
    .subs-child12 {
        top: 248px;
    }
    .button1 {
        top: 310px;
        left: 180px;
    }
    .button-item {
        height: 40px;
        width: 95px;
    }
    .sign-up2 {
        left: 295px;
        top: 129px;
        font-size: 16px;
    }
    .login4 {
        top: 15px;
        left: 8px;
    }
    .nav-bar2 {
        top: 80px;
        left: 540px;
    }
    .nav-bar3 {
        top: 30px;
        left: 490px;
    }
}

@media (max-width: 968px) {
    /* Styles for other elements remain the same */
    a {
        background-color: #ffffff;
    }
    .subs1 {
        position: absolute;
        top: 187px;
        left: 380px;
        border-radius: var(--br-21xl);
        background-color: var(--color-white);
        width: 477px;
        height: 419px;
        overflow: hidden;
    }
    .subs-child5,
    .subs-child6,
    .subs-child7,
    .subs-child8,
    .subs-child9,
    .subs-child10,
    .subs-child11 {
        display: none;
    }
    .do-not-have,
    .login-through-your {
        left: 114px;
        width: 365px;
        font-size: 15px;
    }
    .login3 {
        left: 200px;
        font-size: 22px;
    }
    .inputemail-icon,
    .subs-child12 {
        left: 100px;
        height: 30px;
        width: 250px;
    }
    .do-not-have {
        top: 130px;
    }
    .login-through-your {
        top: 90px;
    }
    .inputemail-icon {
        top: 178px;
    }
    .subs-child12 {
        top: 248px;
    }
    .button1 {
        top: 310px;
        left: 180px;
    }
    .button-item {
        height: 40px;
        width: 95px;
    }
    .sign-up2 {
        left: 295px;
        top: 129px;
        font-size: 16px;
    }
    .login4 {
        top: 15px;
        left: 8px;
    }
    .nav-bar2 {
        top: 80px;
        left: 540px;
    }
    .nav-bar3 {
        top: 30px;
        left: 490px;
    }
}