/*==================================
        GOOGLE FONT
==================================*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Outfit',sans-serif;
}

body {
    background: #eef4ff;
    overflow: hidden;
}

/*==================================
        PAGE
==================================*/

.login-page {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    overflow: hidden;
}

/*==================================
        LEFT
==================================*/

.login-left {
    width: 55%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(circle at top,#ffffff,#edf3ff 55%,#dbe7ff);
}

/*==================================
        RIGHT
==================================*/

.login-right {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 50px;
}

/*==================================
        LOGIN CARD
==================================*/

.login-card {
    width: 470px;
    background: rgba(255,255,255,.78);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 28px;
    padding: 45px;
    box-shadow: 0 25px 80px rgba(55,92,255,.15), inset 0 1px rgba(255,255,255,.7);
    position: relative;
    z-index: 5;
}

/*==================================
        LOGO
==================================*/

.login-logo {
    text-align: center;
    margin-bottom: 25px;
}

.logo-circle {
    width: 95px;
    height: 95px;
    margin: auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(145deg,#ffffff,#dfe9ff);
    box-shadow: 0 15px 45px rgba(70,95,255,.20);
}

    .logo-circle i {
        font-size: 42px;
        color: #5f73ff;
    }

/*==================================
        TEXT
==================================*/

.login-card h1 {
    text-align: center;
    font-size: 42px;
    color: #1d2434;
    margin-bottom: 8px;
}

.login-card p {
    text-align: center;
    color: #6b7280;
    margin-bottom: 40px;
    font-size: 18px;
}

/*==================================
        INPUT
==================================*/

.input-group {
    margin-bottom: 22px;
    flex-wrap: nowrap
}

    .input-group label {
        font-weight: 600;
        margin-bottom: 10px;
        display: block;
        color: #1f2937;
    }

.input-box {
    position: relative;
}

.login-input {
    width: 100%;
    height: 60px;
    border-radius: 16px;
    border: 1px solid #dfe8ff;
    background: #fff;
    padding-left: 60px;
    padding-right: 55px;
    font-size: 16px;
    transition: .35s;
}

    .login-input:focus {
        outline: none;
        border-color: #6278ff;
        box-shadow: 0 0 0 6px rgba(96,118,255,.12);
    }

.left-icon {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: #5e75ff;
    font-size: 20px;
}

.right-icon {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #7b86b2;
    font-size: 20px;
}

/*==================================
        OPTIONS
==================================*/

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 0 30px;
}

    .login-options a {
        color: #5f73ff;
        text-decoration: none;
        font-weight: 600;
    }

.remember {
    display: flex;
    align-items: center;
    gap: 8px;
}

/*==================================
        BUTTON
==================================*/

.login-btn {
    width: 100%;
    height: 62px;
    border: none;
    border-radius: 18px;
    background: linear-gradient(135deg,#5e73ff,#3d8cff);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    transition: .35s;
    box-shadow: 0 20px 35px rgba(75,110,255,.35);
}

    .login-btn:hover {
        transform: translateY(-4px);
        box-shadow: 0 25px 40px rgba(75,110,255,.45);
    }

/*==================================
        FOOTER
==================================*/

.login-footer {
    margin-top: 30px;
    text-align: center;
    color: #7b8794;
}

    .login-footer strong {
        color: #5f73ff;
    }

/*==================================
        BRAND
==================================*/

.brand-logo {
    position: absolute;
    top: 45px;
    left: 60px;
}

    .brand-logo img {
        width: 65px;
    }

    .brand-logo h2 {
        margin-top: 10px;
        font-size: 36px;
        color: #1f2f56;
    }

    .brand-logo span {
        color: #7b8794;
    }

/*==================================
        GLOBE
==================================*/

.globe {
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: radial-gradient(circle,#8ab3ff,#4f73ff);
    box-shadow: inset 0 0 80px rgba(255,255,255,.35), 0 30px 60px rgba(81,102,255,.25);
    animation: float 5s ease-in-out infinite;
}

.globe-ring {
    position: absolute;
    width: 420px;
    height: 70px;
    border: 6px solid rgba(92,119,255,.25);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(20deg);
}

.ring2 {
    transform: translate(-50%,-50%) rotate(-25deg);
}

/*==================================
        FLOATING CARDS
==================================*/

.floating-card {
    position: absolute;
    width: 210px;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(20px);
    border-radius: 18px;
    padding: 16px;
    display: flex;
    gap: 15px;
    align-items: center;
    box-shadow: 0 18px 45px rgba(30,60,150,.12);
}

.api-card {
    top: 220px;
    right: 110px;
}

.dmt-card {
    left: 120px;
    bottom: 170px;
}

.aeps-card {
    right: 120px;
    bottom: 170px;
}

.bbps-card {
    bottom: 45px;
}

/*==================================
        FEATURES
==================================*/

.features {
    position: absolute;
    bottom: 35px;
    display: flex;
    gap: 45px;
}

.feature {
    text-align: center;
}

    .feature i {
        width: 58px;
        height: 58px;
        line-height: 58px;
        border-radius: 50%;
        background: #fff;
        color: #5f73ff;
        box-shadow: 0 10px 25px rgba(70,95,255,.18);
        font-size: 24px;
    }

    .feature span {
        display: block;
        margin-top: 10px;
        font-weight: 600;
    }

/*==================================
        FLOATING SHAPES
==================================*/

.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(10px);
}

.shape1 {
    width: 280px;
    height: 280px;
    left: -80px;
    top: -80px;
    background: #9fb8ff;
    opacity: .45;
    animation: blob1 10s infinite ease-in-out;
}

.shape2 {
    width: 180px;
    height: 180px;
    right: 120px;
    top: 50px;
    background: #7f94ff;
    opacity: .25;
    animation: blob2 8s infinite ease-in-out;
}

.shape3 {
    width: 220px;
    height: 220px;
    bottom: -70px;
    right: -50px;
    background: #b9c8ff;
    opacity: .40;
    animation: blob3 11s infinite;
}


/*==================================
        GLOBE FLOAT
==================================*/

@keyframes float {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}


/*==================================
        BLOBS
==================================*/

@keyframes blob1 {

    0% {
        transform: translate(0,0);
    }

    50% {
        transform: translate(60px,40px);
    }

    100% {
        transform: translate(0,0);
    }
}

@keyframes blob2 {

    0% {
        transform: translate(0);
    }

    50% {
        transform: translate(-60px,20px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes blob3 {

    0% {
        transform: translate(0);
    }

    50% {
        transform: translate(-40px,-40px);
    }

    100% {
        transform: translate(0);
    }
}


/*==================================
      ORBITS
==================================*/

.orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border: 2px solid rgba(103,119,239,.18);
    border-radius: 50%;
}

.orbit1 {
    width: 460px;
    height: 460px;
    animation: rotateOrbit 18s linear infinite;
}

.orbit2 {
    width: 560px;
    height: 560px;
    animation: rotateOrbitReverse 24s linear infinite;
}

@keyframes rotateOrbit {

    from {
        transform: translate(-50%,-50%) rotate(0deg);
    }

    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes rotateOrbitReverse {

    from {
        transform: translate(-50%,-50%) rotate(360deg);
    }

    to {
        transform: translate(-50%,-50%) rotate(0deg);
    }
}


/*==================================
    FLOATING SERVICE CARDS
==================================*/

.api-card {
    animation: cardFloat1 4s ease-in-out infinite;
}

.dmt-card {
    animation: cardFloat2 5s ease-in-out infinite;
}

.aeps-card {
    animation: cardFloat3 4.5s ease-in-out infinite;
}

.bbps-card {
    animation: cardFloat4 6s ease-in-out infinite;
}

@keyframes cardFloat1 {

    50% {
        transform: translateY(-18px);
    }
}

@keyframes cardFloat2 {

    50% {
        transform: translateY(15px);
    }
}

@keyframes cardFloat3 {

    50% {
        transform: translateX(15px);
    }
}

@keyframes cardFloat4 {

    50% {
        transform: translateY(-12px);
    }
}


/*==================================
      LOGIN ENTRY
==================================*/

.login-card {
    animation: loginFade .9s ease;
}

@keyframes loginFade {

    from {
        opacity: 0;
        transform: translateX(70px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}


/*==================================
        RESPONSIVE
==================================*/

@media(max-width:1200px) {

    .login-left {
        display: none;
    }

    .login-right {
        width: 100%;
        padding: 40px;
    }

    .login-card {
        width: 100%;
        max-width: 520px;
    }
}

@media(max-width:768px) {

    .login-right {
        padding: 20px;
    }

    .login-card {
        padding: 30px;
        border-radius: 22px;
    }

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

        .login-card p {
            font-size: 15px;
        }

    .login-input {
        height: 55px;
    }

    .login-btn {
        height: 56px;
    }
}