/*==========================================================
    WITS AI LOGIN
    PART 1
    Foundation • Background • Layout
==========================================================*/

/*==========================================================
    GOOGLE FONT
==========================================================*/

:root{

    --primary:#14B8A6;
    --primary-dark:#0F766E;

    --secondary:#2563EB;

    --accent:#7C3AED;

    --success:#22C55E;

    --danger:#EF4444;

    --white:#FFFFFF;

    --text:#0F172A;

    --text-light:#475569;

    --border:#E2E8F0;

    --glass:rgba(255,255,255,.15);

    --glass-border:rgba(255,255,255,.22);

    --shadow-lg:
        0 30px 70px rgba(15,23,42,.12);

    --shadow-xl:
        0 45px 100px rgba(15,23,42,.18);

    --radius-xl:34px;

    --radius-lg:24px;

    --radius-md:18px;

    --transition:.35s cubic-bezier(.4,0,.2,1);

}

/*==========================================================
    RESET
==========================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    min-height:100vh;

    font-family:'Poppins',sans-serif;

    color:var(--text);

    background:#EEF6FF;

    overflow:hidden;

    position:relative;

}

/*==========================================================
    PREMIUM BACKGROUND
==========================================================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at 15% 15%,
    rgba(37,99,235,.18),
    transparent 35%),

    radial-gradient(circle at 85% 20%,
    rgba(20,184,166,.20),
    transparent 32%),

    radial-gradient(circle at 70% 90%,
    rgba(124,58,237,.18),
    transparent 35%),

    linear-gradient(
        135deg,
        #F8FBFF 0%,
        #F3F8FF 30%,
        #EEF7FF 65%,
        #FFFFFF 100%
    );

    z-index:-3;

}

/*==========================================================
    ANIMATED AURORA
==========================================================*/

body::after{

    content:"";

    position:fixed;

    inset:-25%;

    background:linear-gradient(
        160deg,
        #22C55E,
    #111827,
    #374151,
    #94007A
    );

    filter:blur(80px);

    animation:auroraMove 22s linear infinite;

    z-index:-2;

}

@keyframes auroraMove{

    0%{

        transform:
        translate(-8%,-6%)
        rotate(0deg);

    }

    25%{

        transform:
        translate(10%,5%)
        rotate(90deg);

    }

    50%{

        transform:
        translate(5%,12%)
        rotate(180deg);

    }

    75%{

        transform:
        translate(-8%,8%)
        rotate(270deg);

    }

    100%{

        transform:
        translate(-8%,-6%)
        rotate(360deg);

    }

}

/*==========================================================
    FLOATING ORBS
==========================================================*/

.bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(35px);

    opacity:.65;

    animation:floatOrb 12s ease-in-out infinite;

}

.circle1{

    width:430px;

    height:430px;

    background:#22C55E;

    top:-180px;

    left:-150px;

}

.circle2{

    width:360px;

    height:360px;

    background:#2563EB;

    bottom:-120px;

    right:-120px;

    animation-delay:2s;

}

.circle3{

    width:240px;

    height:240px;

    background:#7C3AED;

    top:42%;

    left:48%;

    animation-delay:4s;

}

@keyframes floatOrb{

    0%{

        transform:
        translateY(0)
        scale(1);

    }

    50%{

        transform:
        translateY(-35px)
        scale(1.08);

    }

    100%{

        transform:
        translateY(0)
        scale(1);

    }

}

/*==========================================================
    LOGIN WRAPPER
==========================================================*/

.login-wrapper{

    width:100%;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    overflow:hidden;

    padding:40px;

}

/*==========================================================
    CONTAINER
==========================================================*/

.container{

    max-width:1450px;

    position:relative;

    z-index:5;

}

/*==========================================================
    MAIN LOGIN CONTAINER
==========================================================*/

.login-container{

    position:relative;

    min-height:760px;

    overflow:hidden;

    border-radius:36px;

    background:

    linear-gradient(

        rgba(255,255,255,.55),

        rgba(255,255,255,.38)

    );

    backdrop-filter:blur(35px);

    -webkit-backdrop-filter:blur(35px);

    border:1px solid rgba(255,255,255,.35);

    box-shadow:

        0 40px 120px rgba(15,23,42,.15),

        inset 0 1px 1px rgba(255,255,255,.5);

}

/*==========================================================
    GLASS SHINE
==========================================================*/

.login-container::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-380px;

    right:-220px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,255,255,.45),

        transparent 70%

    );

    pointer-events:none;

}

.login-container::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:36px;

    border:1px solid rgba(255,255,255,.15);

    pointer-events:none;

}

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

.login-container{

    animation:pageEntrance 1s ease;

}

@keyframes pageEntrance{

    from{

        opacity:0;

        transform:

        translateY(40px)

        scale(.95);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}

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

@media(max-width:1200px){

.login-container{

min-height:700px;

}

}

@media(max-width:991px){

body{

overflow:auto;

}

.login-wrapper{

padding:25px;

}

.login-container{

min-height:auto;

border-radius:28px;

}

}

@media(max-width:576px){

.login-wrapper{

padding:15px;

}

.login-container{

border-radius:22px;

}

}

/*==========================================================
    WITS AI LOGIN
    PART 2
    Left Hero Panel
==========================================================*/

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

.left-panel{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:60px;

    overflow:hidden;

    color:#fff;

    background:
    linear-gradient(
        145deg,
        #083344 0%,
        #0F4C81 20%,
        #0A6EBD 45%,
        #0891B2 70%,
        #14B8A6 100%
    );

}

.brand{

    margin-bottom:-30px;

}

.illustration{

    margin-top:0;

}

/*==========================================================
    Animated Background
==========================================================*/

.left-panel::before{

    content:"";

    position:absolute;

    width:750px;

    height:750px;

    right:-320px;

    top:-320px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,255,255,.18),
        transparent 70%
    );

    animation:heroRotate 30s linear infinite;

}

.left-panel::after{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-180px;

    bottom:-180px;

    border-radius:50%;

    background:
    radial-gradient(
        rgba(255,255,255,.10),
        transparent 72%
    );

    animation:heroFloat 12s ease-in-out infinite;

}

/*==========================================================
    Decorative Grid
==========================================================*/

.left-panel .grid-overlay{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);

    background-size:45px 45px;

    mask-image:
        radial-gradient(circle at center,black 45%,transparent 100%);

    opacity:.45;

    pointer-events:none;

}

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

.brand{

    position:relative;

    z-index:5;

}

.brand h1{

    font-size:64px;

    font-weight:800;

    letter-spacing:2px;

    line-height:1;

    margin-bottom:18px;

    text-shadow:
        0 15px 35px rgba(0,0,0,.25);

}

.brand p{

    max-width:430px;

    font-size:20px;

    line-height:1.8;

    opacity:.95;

    font-weight:400;

}

/*==========================================================
    AI Badge
==========================================================*/

.brand::before{

    content:"AI HEALTHCARE PLATFORM";

    display:inline-flex;

    align-items:center;

    padding:8px 18px;

    margin-bottom:25px;

    border-radius:50px;

    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(18px);

    font-size:12px;

    font-weight:600;

    letter-spacing:2px;

    color:#fff;

}

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

.brand h1 span{

    color:#6EE7B7;

}

/*==========================================================
    IMAGE AREA
==========================================================*/

.illustration{

    position:relative;

    z-index:5;

    margin:45px 0;

}

/*==========================================================
    Premium Carousel
==========================================================*/

#witsCarousel{

    overflow:hidden;

    border-radius:30px;

    border:1px solid rgba(255,255,255,.15);

    box-shadow:

        0 40px 80px rgba(0,0,0,.30),

        inset 0 1px 1px rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

    background:rgba(255,255,255,.06);

}

/*==========================================================
    Images
==========================================================*/

.slider-image{

    width:100%;

    height:540px;

    object-fit:cover;

    transition:transform 10s linear;

}

.carousel-item.active .slider-image{

    transform:scale(1.10);

}

/*==========================================================
    Overlay
==========================================================*/

.carousel-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(0,0,0,.82),
            rgba(0,0,0,.18),
            transparent
        );

    z-index:1;

}

/*==========================================================
    Caption
==========================================================*/

.slider-content{

    position:absolute;

    left:35px;

    right:35px;

    bottom:35px;

    z-index:2;

}

.slider-content h3{

    font-size:34px;

    font-weight:700;

    margin-bottom:8px;

    color:#fff;

}

.slider-content p{

    font-size:17px;

    opacity:.95;

    margin:0;

}

/*==========================================================
    Indicators
==========================================================*/

.carousel-indicators{

    bottom:18px;

}

.carousel-indicators button{

    width:11px;

    height:11px;

    border-radius:50%;

    margin:0 5px;

    opacity:.45;

    transition:.35s;

}

.carousel-indicators .active{

    width:34px;

    border-radius:20px;

    opacity:1;

}

/*==========================================================
    Controls
==========================================================*/

.carousel-control-prev,

.carousel-control-next{

    opacity:0;

    transition:.4s;

}

#witsCarousel:hover .carousel-control-prev,

#witsCarousel:hover .carousel-control-next{

    opacity:1;

}

.carousel-control-prev-icon,

.carousel-control-next-icon{

    width:46px;

    height:46px;

    border-radius:50%;

    background-color:rgba(255,255,255,.22);

    backdrop-filter:blur(10px);

}

/*==========================================================
    Floating Glass Card
==========================================================*/

.floating-card{

    position:absolute;

    top:120px;

    right:-30px;

    width:170px;

    padding:18px;

    border-radius:22px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(22px);

    border:1px solid rgba(255,255,255,.25);

    color:#fff;

    z-index:8;

    animation:cardFloat 6s ease-in-out infinite;

}

.floating-card h4{

    font-size:30px;

    font-weight:700;

    margin-bottom:5px;

}

.floating-card p{

    margin:0;

    font-size:13px;

    opacity:.9;

}

/*==========================================================
    Animations
==========================================================*/

@keyframes heroRotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

@keyframes heroFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-25px);

    }

}

@keyframes cardFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

}

/*==========================================================
    WITS AI LOGIN
    PART 3
    Login Card • Form • Inputs • Button
==========================================================*/


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

.login-container .col-lg-6:last-child{

    display:flex;

    align-items:center;

    justify-content:center;

    padding:70px;

}


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

.login-card{

    position:relative;

    width:100%;

    max-width:520px;

    padding:55px;

    border-radius:32px;

    overflow:hidden;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.92),
            rgba(255,255,255,.82)
        );

    backdrop-filter:blur(35px);

    border:1px solid rgba(255,255,255,.45);

    box-shadow:

        0 35px 80px rgba(15,23,42,.12),

        inset 0 1px 1px rgba(255,255,255,.7);

    transition:.45s;

}

.login-card:hover{

    transform:translateY(-8px);

    box-shadow:

        0 50px 100px rgba(15,23,42,.18);

}


/*==========================================================
    GLASS LIGHT
==========================================================*/

.login-card::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    top:-130px;

    right:-120px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(20,184,166,.20),

            transparent 70%

        );

}

.login-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    left:-80px;

    bottom:-80px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(37,99,235,.10),

            transparent 75%

        );

}


/*==========================================================
    HEADER
==========================================================*/

.login-header{

    position:relative;

    z-index:2;

    margin-bottom:38px;

}

.login-header h2{

    font-size:38px;

    font-weight:700;

    color:#0F172A;

    margin-bottom:12px;

}

.login-header p{

    color:#64748B;

    font-size:16px;

    line-height:1.8;

}


/*==========================================================
    LABEL
==========================================================*/

.form-group{

    margin-bottom:28px;

    position:relative;

}

.form-group label{

    display:block;

    margin-bottom:10px;

    font-size:14px;

    font-weight:600;

    color:#334155;

}


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

.input-group{

    border-radius:18px;

    overflow:hidden;

    border:1px solid #E2E8F0;

    background:#FFFFFF;

    transition:.35s;

}

.input-group:hover{

    border-color:#CBD5E1;

}

.input-group:focus-within{

    border-color:#14B8A6;

    box-shadow:

        0 0 0 5px rgba(20,184,166,.10);

}


/*==========================================================
    ICON
==========================================================*/

.input-group-text{

    background:#fff;

    border:none;

    color:#64748B;

    padding:0 20px;

}

.input-group-text i{

    font-size:19px;

}


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

.form-control{

    height:60px;

    border:none !important;

    background:transparent;

    box-shadow:none !important;

    font-size:15px;

    color:#0F172A;

}

.form-control::placeholder{

    color:#94A3B8;

}


/*==========================================================
    PASSWORD
==========================================================*/

.password-toggle{

    cursor:pointer;

    transition:.3s;

}

.password-toggle:hover{

    color:#14B8A6;

}

.password-toggle i{

    transition:.35s;

}

.password-toggle:hover i{

    transform:scale(1.15);

}


/*==========================================================
    REMEMBER
==========================================================*/

.remember{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:5px;

}

.form-check-label{

    color:#64748B;

    cursor:pointer;

    font-size:14px;

}

.form-check-input{

    cursor:pointer;

}

.form-check-input:checked{

    background:#14B8A6;

    border-color:#14B8A6;

}

.remember a{

    text-decoration:none;

    font-weight:600;

    color:#2563EB;

    transition:.3s;

}

.remember a:hover{

    color:#14B8A6;

}


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

.login-btn{

    position:relative;

    width:100%;

    height:60px;

    margin-top:10px;

    border:none;

    border-radius:18px;

    overflow:hidden;

    font-size:17px;

    font-weight:600;

    color:#fff;

    background:linear-gradient(
        160deg,
        #22C55E,
    #111827,
    #374151,
    #94007A
    );

    transition:.35s;

}

.login-btn:hover{

    transform:translateY(-4px);

    box-shadow:

        0 20px 40px rgba(20,184,166,.35);
    color: #fff

}


/*==========================================================
    SHINE EFFECT
==========================================================*/

.login-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:100%;

    height:100%;

    transform:skewX(-30deg);

    background:rgba(255,255,255,.25);

    transition:.9s;

}

.login-btn:hover::before{

    left:130%;

}

.login-btn:active{

    transform:scale(.98);

}


/*==========================================================
    COPYRIGHT
==========================================================*/

.copyright{

    margin-top:35px;

    text-align:center;

    color:#94A3B8;

    font-size:13px;

}


/*==========================================================
    FORM ANIMATION
==========================================================*/

.form-group{

    animation:slideUp .7s ease forwards;

}

.form-group:nth-child(2){

    animation-delay:.15s;

}

.remember{

    animation:slideUp .7s ease forwards;

    animation-delay:.30s;

}

.login-btn{

    animation:slideUp .7s ease forwards;

    animation-delay:.45s;

}

@keyframes slideUp{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================================================
    AUTOFILL FIX
==========================================================*/

input:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #fff inset;

    -webkit-text-fill-color:#0F172A;

}

/*==========================================================
    WITS AI LOGIN
    PART 4
    Premium Finishing
==========================================================*/


/*==========================================================
    FLOATING PARTICLES
==========================================================*/

.login-wrapper::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background-image:

        radial-gradient(circle,#ffffff 1px,transparent 1px);

    background-size:90px 90px;

    opacity:.12;

    animation:particleMove 40s linear infinite;

}

@keyframes particleMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-120px);

    }

}


/*==========================================================
    PREMIUM BORDER LIGHT
==========================================================*/

.login-container{

    position:relative;

}

.login-container::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:36px;

    padding:1px;

    background:

        linear-gradient(

            135deg,

            rgba(255,255,255,.45),

            rgba(255,255,255,.08)

        );

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    pointer-events:none;

}


/*==========================================================
    GLOW EFFECT
==========================================================*/

.login-card:hover{

    box-shadow:

        0 50px 100px rgba(20,184,166,.18),

        0 20px 50px rgba(37,99,235,.12);

}


/*==========================================================
    IMAGE HOVER
==========================================================*/

#witsCarousel{

    transition:.45s;

}

#witsCarousel:hover{

    transform:translateY(-6px);

    box-shadow:

        0 50px 90px rgba(0,0,0,.35);

}


/*==========================================================
    GLASS REFLECTION
==========================================================*/

#witsCarousel::before{

    content:"";

    position:absolute;

    top:0;

    left:-130%;

    width:50%;

    height:100%;

    transform:skewX(-25deg);

    background:

        linear-gradient(

            rgba(255,255,255,0),

            rgba(255,255,255,.18),

            rgba(255,255,255,0)

        );

    transition:1.3s;

    z-index:4;

}

#witsCarousel:hover::before{

    left:150%;

}


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

.login-btn{

    animation:

        pulseButton 3s infinite;

}

@keyframes pulseButton{

    0%{

        box-shadow:

            0 0 0 0 rgba(20,184,166,.30);

    }

    70%{

        box-shadow:

            0 0 0 18px rgba(20,184,166,0);

    }

    100%{

        box-shadow:

            0 0 0 0 rgba(20,184,166,0);

    }

}


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

.input-group{

    transition:

        transform .35s,

        box-shadow .35s,

        border-color .35s;

}

.input-group:hover{

    transform:translateY(-2px);

}


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

.brand h1{

    transition:.5s;

}

.brand:hover h1{

    letter-spacing:5px;

}


/*==========================================================
    SLIDER TITLE
==========================================================*/

.slider-content h3{

    animation:

        titleFade .8s ease;

}

@keyframes titleFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==========================================================
    SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#EDF2F7;

}

::-webkit-scrollbar-thumb{

    background:

        linear-gradient(

            #14B8A6,

            #2563EB

        );

    border-radius:20px;

}


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

::selection{

    background:#14B8A6;

    color:#fff;

}


/*==========================================================
    REMOVE BLUE OUTLINE
==========================================================*/

.form-control:focus,

.btn:focus,

button:focus{

    outline:none;

    box-shadow:none;

}


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

@media (max-width:1200px){

.login-container{

min-height:680px;

}

.slider-image{

height:470px;

}

.brand h1{

font-size:52px;

}

}


@media (max-width:991px){

body{

overflow:auto;

}

.login-wrapper{

padding:25px;

}

.left-panel{

display:none;

}

.login-container{

border-radius:28px;

}

.login-card{

max-width:100%;

padding:45px;

}

}


@media (max-width:768px){

.login-container .col-lg-6:last-child{

padding:35px;

}

.login-card{

padding:35px;

}

.login-header h2{

font-size:30px;

}

.login-btn{

height:56px;

}

}


@media (max-width:576px){

.login-wrapper{

padding:15px;

}

.login-card{

padding:28px 22px;

border-radius:22px;

}

.login-header h2{

font-size:26px;

}

.login-header p{

font-size:14px;

}

.form-control{

height:54px;

font-size:14px;

}

.login-btn{

height:54px;

font-size:15px;

}

.remember{

flex-direction:column;

align-items:flex-start;

gap:12px;

}

}


/*==========================================================
    DARK MODE READY
==========================================================*/

@media(prefers-color-scheme:dark){

html{

color-scheme:light;

}

}


/*==========================================================
    REDUCE MOTION
==========================================================*/

@media(prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}


/*==========================================================
    PERFORMANCE
==========================================================*/

.login-card,

#witsCarousel,

.slider-image,

.login-btn,

.input-group{

will-change:transform;

}


/*==========================================================
    END
==========================================================*/