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

/* =========================
   RESET
========================= */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    max-width: 100%;
}

/* =========================
   HTML & BODY
========================= */
html,
body{
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
}

html{
    scroll-behavior: smooth;
}

/* =========================
   BODY
========================= */
body{
    font-family: 'Poppins', sans-serif;

    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 100vh;

    padding: 12px;

    position: relative;

    overflow-x: hidden;
    overflow-y: auto;

    background:
    linear-gradient(
        to bottom,
        #cdd1ff,
        rgb(83, 103, 173)
    );
}

/* =========================
   TOP GLOW
========================= */
body::before{
    content: "";

    position: fixed;

    width: 700px;
    height: 700px;

    top: -250px;
    left: -200px;

    border-radius: 50%;

    background:
    radial-gradient(
        circle,
        rgba(255,255,255,0.9),
        rgba(255,255,255,0)
    );

    filter: blur(40px);

    z-index: 0;
}

/* =========================
   BOTTOM BLUE GLOW
========================= */
body::after{
    content: "";

    position: fixed;

    width: 650px;
    height: 650px;

    bottom: -350px;
    right: -180px;

    border-radius: 50%;

    background:
    radial-gradient(
        circle,
        rgba(0,89,255,0.45),
        rgba(0,89,255,0)
    );

    filter: blur(60px);

    z-index: 0;
}

/* =========================
   ABSTRACT BLOBS
========================= */
.abstract-1,
.abstract-2,
.circle-1,
.circle-2{
    position: fixed;

    z-index: 0;

    pointer-events: none;
}

.abstract-1{
    width: 320px;
    height: 320px;

    top: 80px;
    right: 120px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.28),
        rgba(255,255,255,0.08)
    );

    border-radius:
    63% 37% 54% 46% /
    55% 48% 52% 45%;

    backdrop-filter: blur(15px);

    border: 1px solid rgba(255,255,255,0.25);

    transform: rotate(20deg);

    box-shadow:
    0 10px 40px rgba(255,255,255,0.15);
}

.abstract-2{
    width: 260px;
    height: 260px;

    bottom: 60px;
    left: 80px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.20),
        rgba(0,89,255,0.12)
    );

    border-radius:
    40% 60% 70% 30% /
    40% 40% 60% 50%;

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,0.18);

    transform: rotate(-25deg);

    box-shadow:
    0 10px 35px rgba(0,89,255,0.12);
}

/* =========================
   SMALL FLOATING CIRCLES
========================= */
.circle-1{
    width: 120px;
    height: 120px;

    border-radius: 50%;

    top: 180px;
    left: 180px;

    background: rgba(255,255,255,0.18);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,0.2);
}

.circle-2{
    width: 70px;
    height: 70px;

    border-radius: 50%;

    bottom: 180px;
    right: 280px;

    background: rgba(255,255,255,0.15);

    backdrop-filter: blur(10px);

    border: 1px solid rgba(255,255,255,0.15);
}

/* =========================
   GLOBAL
========================= */
img{
    max-width: 100%;
    display: block;
}

input,
button{
    transition: all 0.3s ease;
}

/* =========================
   CONTAINER
========================= */
.container{
    width: 100%;
    max-width: 1100px;

    background: #ffffff;

    border-radius: 28px;

    overflow: hidden;

    display: flex;
    flex-wrap: wrap;

    position: relative;

    z-index: 2;

    margin: auto;

    box-shadow:
        0 20px 40px rgba(0,0,0,0.10),
        0 5px 15px rgba(0,0,0,0.05);
}

/* =========================
   LEFT SIDE
========================= */
.left-side{
    flex: 1 1 500px;

    background: linear-gradient(
        135deg,
        #0a6cff,
        #0052d9
    );

    padding: clamp(25px, 4vw, 45px);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    position: relative;

    color: white;
}

/* LOGO */
.logo h2{
    font-size: clamp(26px, 5vw, 40px);
    font-weight: 700;

    letter-spacing: 1px;
}

/* IMAGE */
.image-box{
    display: flex;
    justify-content: center;
    align-items: center;

    margin: 25px 0;
}

.image-box img{
    width: 100%;
    max-width: 450px;

    filter: drop-shadow(0 10px 25px rgba(0,0,0,0.25));
}

/* TEXT */
.text-content h1{
    font-size: clamp(20px, 4vw, 28px);
    font-weight: 600;

    margin-bottom: 15px;
}

.text-content p{
    width: 100%;

    font-size: clamp(12px, 2vw, 14px);
    line-height: 1.8;

    opacity: 0.9;
}

/* DOTS */
.dots{
    display: flex;
    gap: 12px;

    margin-top: 30px;
}

.dots span{
    width: 14px;
    height: 14px;

    border-radius: 50%;

    border: 2px solid white;
}

.dots .active{
    background: white;
}

/* =========================
   RIGHT SIDE
========================= */
.right-side{
    flex: 1 1 500px;

    padding: clamp(35px, 5vw, 80px);

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: white;
}

/* TITLE */
.right-side h1{
    font-size: clamp(32px, 6vw, 52px);
    font-weight: 600;

    color: #1976ff;

    margin-bottom: 15px;
}

/* REGISTER */
.register{
    display: flex;
    align-items: center;
    gap: 8px;

    flex-wrap: wrap;

    margin-bottom: 8px;
}

.register p{
    color: #777;
    font-size: 15px;
}

.register a{
    color: #1976ff;

    text-decoration: none;
    font-weight: 600;
}

.register a:hover{
    text-decoration: underline;
}

/* SMALL TEXT */
.small-text{
    color: #999;
    font-size: 14px;

    margin-bottom: 30px;
}

/* INPUT */
.input-box{
    position: relative;

    margin-bottom: 25px;
}

.input-box input{
    width: 100%;

    height: 55px;

    padding: 0 45px 0 18px;

    border: 2px solid #e3e3e3;
    border-radius: 14px;

    outline: none;

    background: #fafafa;

    font-size: 15px;
    font-family: 'Poppins', sans-serif;
}

.input-box input:hover{
    border-color: #1976ff;
}

.input-box input:focus{
    border-color: #1976ff;

    background: white;

    box-shadow: 0 5px 18px rgba(25,118,255,0.15);
}

.input-box i{
    position: absolute;

    top: 50%;
    right: 18px;

    transform: translateY(-50%);

    color: #999;
}

/* =========================
   BOTTOM AREA
========================= */
.bottom-box{
    margin-top: 15px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    flex-wrap: wrap;
}

/* BUTTON */
button{
    width: 100%;
    height: 55px;

    padding: none;
    border: none;
    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #1976ff,
        #0052d9
    );

    color: white;

    font-size: 16px;
    font-weight: 600;

    cursor: pointer;

    min-width: 150px;

    box-shadow: 0 10px 20px rgba(25,118,255,0.25);
}

button:hover{
    transform: translateY(-2px);

    box-shadow: 0 12px 25px rgba(25,118,255,0.35);
}

/* CHECKBOX */
label{
    display: flex;
    align-items: center;
    gap: 8px;

    color: #666;
    font-size: 14px;

    flex-wrap: wrap;
}

/* FORGOT */
.forgot{
    margin-top: 35px;

    text-align: center;

    color: #1976ff;

    text-decoration: none;
    font-weight: 600;
}

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

/* =========================
   TABLET
========================= */
@media(max-width: 900px){

    body{
        padding: 12px;
    }

    .container{
        flex-direction: column;
    }

    .left-side,
    .right-side{
        width: 100%;
    }

    .bottom-box{
        flex-direction: column;
        align-items: stretch;
    }

    button{
        width: 100%;
    }
}

/* =========================
   MOBILE
========================= */
@media(max-width: 768px){

    .abstract-1,
    .abstract-2,
    .circle-1,
    .circle-2{
        display: none;
    }

    body{
        padding: 10px;
        align-items: center;
    }

    .container{
        border-radius: 22px;
        min-height: auto;
    }

    .left-side{
        padding: 30px 22px;
    }

    .right-side{
        padding: 35px 22px;
    }

    .image-box img{
        max-width: 280px;
    }

    .dots{
        justify-content: center;
    }
}

/* =========================
   EXTRA SMALL DEVICE
========================= */
@media(max-width: 480px){

    body{
        padding: 8px;
    }

    .container{
        border-radius: 18px;
    }

    .left-side{
        padding: 25px 16px;
    }

    .right-side{
        padding: 30px 16px;
    }

    .register{
        flex-direction: column;
        align-items: flex-start;
    }

    .register p,
    .register a,
    .small-text,
    label{
        font-size: 13px;
    }

    .image-box img{
        max-width: 220px;
    }

    .input-box input{
        height: 50px;
        font-size: 14px;
    }

    button{
        width: 100%;

        min-width: auto;

        height: 50px;

        font-size: 14px;
    }

    .forgot{
        font-size: 13px;
    }
}