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

/* Background */

body{

    background:
    linear-gradient(
    135deg,
    #dff9fa,
    #ffffff,
    #ecffff);

}

/* Animated Background */

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-1;

}

/* Floating Shapes */

.shape{

    position:absolute;

    border-radius:50%;

    filter:blur(20px);

    opacity:.45;

    animation:float 10s infinite ease-in-out;

}

.shape1{

    width:320px;
    height:320px;

    background:#1ebfc1;

    top:-80px;
    left:-60px;

}

.shape2{

    width:260px;
    height:260px;

    background:#5de4e5;

    bottom:-80px;
    right:-50px;

}

.shape3{

    width:170px;
    height:170px;

    background:#7df1f2;

    top:45%;
    left:45%;

}

/* Welcome */

.welcome-section{

    text-align:center;
    
    font-weight:700;

    animation:fadeLeft 1.2s;

}

.hospital-logo{

    width:250px;

}

.tagline{

    color:#666;
    
    font-weight:700;

    max-width:550px;

    margin:auto;

}

/* Login Card */

.login-card{

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

    backdrop-filter:blur(18px);

    border-radius:22px;

    padding:45px;

    max-width:480px;

    margin:auto;

    box-shadow:
    0 15px 40px rgba(0,0,0,.12);

    animation:fadeUp 1s;

}

/* Logo */

.login-logo{

    width:75px;

    margin-bottom:10px;

}

/* Heading */

.login-card h2{

    font-weight:700;

}

/* Labels */

label{

    font-weight:500;

    margin-bottom:8px;

}

/* Input Icon */

.input-group-text{

    background:#fff;

    border-radius:14px 0 0 14px;

    border-right:none;

}

/* Inputs */

.form-control{

    border-left:none;

}

.form-control:focus{

    border-left:none;

}

/* Toggle */

#togglePassword{

    border-radius:0 14px 14px 0;

}

/* Button */

.login-btn{

    height:55px;

    font-size:17px;

    font-weight:600;

    color:#fff;

    background:
    linear-gradient(
    45deg,
    #1ebfc1,
    #17a8aa);

    border:none;

}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(30,191,193,.35);

}

/* Footer */

.footer-text{

    font-size:14px;

    color:#666;

}

/* Animation */

@keyframes float{

    0%{

        transform:
        translateY(0px);

    }

    50%{

        transform:
        translateY(-20px);

    }

    100%{

        transform:
        translateY(0px);

    }

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:
        translateY(40px);

    }

    to{

        opacity:1;

        transform:
        translateY(0);

    }

}

@keyframes fadeLeft{

    from{

        opacity:0;

        transform:
        translateX(-40px);

    }

    to{

        opacity:1;

        transform:
        translateX(0);

    }

}

/* Responsive */

@media(max-width:991px){

.login-card{

    margin:40px 15px;

}

body{

    overflow:auto;

}

}
.hospital-emoji{

    font-size:180px;

    text-align:center;

    margin-top:30px;

    animation:float 5s ease-in-out infinite;

    user-select:none;

}