/* =====================================
   WEBSITE PENGADUAN PKSP BAGENDIT
====================================== */

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

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

    background:
    linear-gradient(rgba(255,255,255,.35),rgba(255,255,255,.35)),
    url("../img/bg-health.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;

    min-height:100vh;
}

/* ========================= */

.login-container{

    width:100%;
    min-height:100vh;

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

    padding:30px;

}

/* ========================= */

.login-box{

    width:100%;
    max-width:460px;

    padding:40px;

    border-radius:25px;

    background:linear-gradient(
    135deg,
    rgba(0,166,81,.30),
    rgba(0,180,170,.18),
    rgba(0,140,255,.30));

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

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

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

    animation:fade .6s;

}

/* ========================= */

@keyframes fade{

from{
opacity:0;
transform:translateY(20px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* ========================= */

.header-line{

height:8px;

width:100%;

background:#0b8f50;

border-radius:20px;

margin-bottom:25px;

}

/* ========================= */

.logo{

width:90px;

display:block;

margin:auto;

margin-bottom:15px;

}

/* ========================= */

.login-box h2{

text-align:center;

font-size:42px;

font-weight:700;

color:#1f2937;

margin-bottom:10px;

}

/* ========================= */

.subjudul{

text-align:center;

font-size:19px;

line-height:30px;

color:#374151;

margin-bottom:30px;

}

/* ========================= */

label{

display:block;

font-weight:600;

font-size:17px;

margin-bottom:8px;

color:#1f2937;

}

.form-control{

height:55px;

border-radius:15px;

border:none;

padding:15px;

font-size:16px;

}

.form-control:focus{

border-color:#0b8f50;

box-shadow:0 0 12px rgba(11,143,80,.35);

}

/* ========================= */

.btn{

height:52px;

border-radius:15px;

font-size:18px;

font-weight:600;

}

.btn-primary{

background:#0d6efd;

border:none;

}

.btn-primary:hover{

background:#0b5ed7;

}

/* ========================= */

hr{

margin:25px 0;

}

/* ========================= */

.footer{

text-align:center;

margin:20px 0;

font-size:14px;

color:#555;

}

/* =====================================
          TABLET
====================================== */

@media(max-width:992px){

.login-box{

max-width:420px;

padding:35px;

}

.login-box h2{

font-size:34px;

}

.subjudul{

font-size:17px;

line-height:28px;

}

}

/* =====================================
              HP
====================================== */

@media(max-width:576px){

body{

background-attachment:scroll;

}

.login-container{

padding:15px;

}

.login-box{

width:100%;

padding:22px;

border-radius:20px;

}

.header-line{

margin-bottom:18px;

}

.logo{

width:65px;

margin-bottom:10px;

}

.login-box h2{

font-size:24px;

margin-bottom:8px;

}

.subjudul{

font-size:15px;

line-height:23px;

margin-bottom:22px;

}

label{

font-size:15px;

}

.form-control{

height:45px;

font-size:15px;

padding:12px;

}

.mb-3{

margin-bottom:15px!important;

}

.mb-4{

margin-bottom:18px!important;

}

.btn{

height:45px;

font-size:16px;

}

hr{

margin:18px 0;

}

.footer{

font-size:12px;

}

}