/*=========================================================
  PM SANGRAHALAYA LOGIN
  Part 1 : Layout + Hero
  Author : CodeWraps
=========================================================*/

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

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

.pms-login,
.pms-login *{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.pms-login{
    width:100%;
    min-height:100vh;
    font-family:'Poppins',sans-serif;
    background:#f4f7fb;
    overflow:hidden;
}

/*==========================
  LAYOUT
==========================*/

.pms-login .container-fluid{
    width:100%;
    max-width:100%;
    padding:0;
}

.pms-login .row{
    min-height:100vh;
    margin:0;
}

.pms-login .col-lg-7,
.pms-login .col-lg-5{
    padding:0;
}

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

.pms-login-left{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    min-height:100vh;

    background:url("../login-bg.jpg") center center;

    background-size:cover;

    background-repeat:no-repeat;

}

/*==========================
  OVERLAY
==========================*/

.pms-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        135deg,

        rgba(5,30,75,.80),

        rgba(17,58,130,.55)

    );

}

.pms-overlay::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-220px;

    left:-180px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,255,255,.12),

        transparent 70%

    );

}

.pms-overlay::after{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    bottom:-180px;

    right:-120px;

    border-radius:50%;

    background:

    radial-gradient(

        circle,

        rgba(255,193,7,.10),

        transparent 70%

    );

}

/*==========================
 HERO CONTENT
==========================*/

.pms-hero{

    position:relative;

    z-index:5;

    max-width:620px;

    padding:70px;

    color:#fff;

}

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

.pms-logo{

    width:170px;

    margin-bottom:40px;

}

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

.pms-hero h1{

    font-size:60px;

    line-height:1.05;

    font-weight:800;

    color:#fff;

    letter-spacing:-1px;

    margin-bottom:25px;

    text-shadow:

    0 8px 25px rgba(0,0,0,.25);

}

/*==========================
 DESCRIPTION
==========================*/

.pms-hero p{

    max-width:520px;

    font-size:18px;

    line-height:1.9;

    color:rgba(255,255,255,.92);

    margin-bottom:45px;

}

/*==========================
 STATS
==========================*/

.pms-stats{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

}

.pms-stat-card{

    width:180px;

    padding:24px;

    border-radius:22px;

    backdrop-filter:blur(20px);

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

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

    box-shadow:

    0 20px 45px rgba(0,0,0,.18);

    transition:.35s ease;

}

.pms-stat-card:hover{

    transform:translateY(-8px);

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

}

.pms-stat-card h3{

    font-size:42px;

    font-weight:700;

    color:#FFD54F;

    margin-bottom:8px;

}

.pms-stat-card span{

    color:#fff;

    font-size:15px;

    opacity:.9;

}

/*=========================================================
  PART 2 : RIGHT PANEL + LOGIN CARD
=========================================================*/

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

.pms-login-right{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:100vh;

    padding:20px;

    overflow:hidden;

    background:
    radial-gradient(circle at top right,
    rgba(13,110,253,.08),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(255,193,7,.05),
    transparent 35%),

    #f7f9fc;

}

/* Floating Background */

.pms-login-right::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    top:-220px;

    right:-180px;

    background:
    radial-gradient(circle,
    rgba(13,110,253,.12),
    transparent 72%);

}

.pms-login-right::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    bottom:-140px;

    left:-100px;

    background:
    radial-gradient(circle,
    rgba(255,193,7,.08),
    transparent 70%);

}

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

.pms-login-card{

    position:relative;

    z-index:20;

    width:100%;

    max-width:520px;

}

/*==========================
 FORM CARD
==========================*/

.pms-login-card .form{

    background:#ffffff;

    border-radius:28px;

    padding:42px;

    border:1px solid #e9eef6;

    box-shadow:

        0 18px 45px rgba(15,23,42,.08),

        0 5px 15px rgba(15,23,42,.04);

    transition:.35s ease;

}

.pms-login-card .form:hover{

    transform:translateY(-4px);

    box-shadow:

        0 25px 60px rgba(15,23,42,.12),

        0 8px 25px rgba(15,23,42,.06);

}

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

.pms-login-card img{

    width:185px;

    margin-bottom:18px;

}

/*==========================
 HEADING
==========================*/

.pms-login-card h1{

    font-size:34px;

    font-weight:700;

    color:#1565d8 !important;

    margin-bottom:10px;

    letter-spacing:-.5px;

}

.pms-login-card p{

    font-size:15px;

    color:#7d8796;

    margin-bottom:28px;

}

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

.pms-login-card label{

    display:block;

    margin-bottom:8px;

    color:#25364d;

    font-size:14px;

    font-weight:600;

}

/*==========================
 FORM SPACING
==========================*/

.pms-login-card .fv-row{

    margin-bottom:20px !important;

}

.pms-login-card .mb-10{

    margin-bottom:20px !important;

}

.pms-login-card .mb-5{

    margin-bottom:16px !important;

}

/*==========================
 INPUTS
==========================*/

.pms-login-card .form-control{

    height:48px !important;

    border-radius:14px !important;

    border:1px solid #dbe4ef !important;

    background:#fbfcfe !important;

    padding:0 18px;

    font-size:15px;

    color:#1f2937;

    transition:all .30s ease;

}

.pms-login-card .form-control::placeholder{

    color:#98a3b4;

}

.pms-login-card .form-control:hover{

    border-color:#cfd9e5 !important;

}

.pms-login-card .form-control:focus{

    background:#fff !important;

    border-color:#0d6efd !important;

    box-shadow:

        0 0 0 5px rgba(13,110,253,.10) !important;

}

/*==========================
 TITLE ALIGNMENT
==========================*/
#kt_sign_in_submit{
    margin-top: 20px;
}


/*=========================================================
  PART 3 : CAPTCHA + BUTTON + ANIMATIONS
=========================================================*/

/*==========================
 CAPTCHA
==========================*/

.pms-captcha{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:8px;

}

.pms-captcha span{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:62px;

    padding:8px;

    border-radius:16px;

    background:#ffffff;

    border:1px solid #dfe6ef;

    box-shadow:

        inset 0 1px 3px rgba(0,0,0,.03),

        0 6px 18px rgba(0,0,0,.04);

}

.pms-captcha span img{

    width:auto;

    height:48px;

    display:block;

}

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

.pms-refresh-btn{

    width:58px;

    min-width:58px;

    height:58px;

    border:none !important;

    border-radius:16px !important;

    background:linear-gradient(135deg,#0d6efd,#0057d8);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff !important;

    cursor:pointer;

    transition:all .35s ease;

    box-shadow:

        0 12px 25px rgba(13,110,253,.25);

}

.pms-refresh-btn svg{

    width:20px;

    height:20px;

}

.pms-refresh-btn:hover{

    transform:translateY(-2px) rotate(180deg);

    box-shadow:

        0 18px 35px rgba(13,110,253,.35);

}

.pms-refresh-btn:active{

    transform:scale(.96);

}

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

.pms-login-card .btn-primary{

    width:100%;

    height:58px !important;

    border:none !important;

    border-radius:16px !important;

    background:linear-gradient(
        135deg,
        #1565d8,
        #0d6efd
    );

    color:#fff;

    font-size:17px;

    font-weight:600;

    letter-spacing:.3px;

    transition:all .35s ease;

    box-shadow:

        0 18px 35px rgba(13,110,253,.28);

}

.pms-login-card .btn-primary:hover{

    transform:translateY(-3px);

    background:linear-gradient(
        135deg,
        #0c5dd8,
        #0053d4
    );

    box-shadow:

        0 25px 45px rgba(13,110,253,.35);

}

.pms-login-card .btn-primary:active{

    transform:scale(.98);

}

/*==========================
 LOADING
==========================*/

.pms-login-card .indicator-progress{

    display:none;

}

.pms-login-card .btn-primary.loading .indicator-progress{

    display:inline-flex;

}

.pms-login-card .btn-primary.loading .indicator-label{

    display:none;

}

/*==========================
 LINKS
==========================*/

.pms-login-card a{

    color:#1565d8;

    text-decoration:none;

    transition:.25s;

}

.pms-login-card a:hover{

    color:#004fc4;

    text-decoration:underline;

}

/*==========================
 CARD ENTRY
==========================*/

.pms-login-card{

    animation:pmsFade .8s ease;

}

@keyframes pmsFade{

    0%{

        opacity:0;

        transform:

        translateY(35px)

        scale(.98);

    }

    100%{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}

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

.pms-login-card .form-control{

    transition:

        border-color .30s,

        box-shadow .30s,

        background .30s,

        transform .25s;

}

.pms-login-card .form-control:focus{

    transform:translateY(-1px);

}

/*==========================
 CARD SHINE
==========================*/

.pms-login-card{

    overflow:hidden;

}

.pms-login-card::before{

    content:"";

    position:absolute;

    top:-100%;

    left:-50%;

    width:120%;

    height:220%;

    transform:rotate(20deg);

    background:

    linear-gradient(

        transparent,

        rgba(255,255,255,.22),

        transparent

    );

    transition:1s;

    pointer-events:none;

}

.pms-login-card:hover::before{

    left:140%;

}

/*=========================================================
  PART 4 : RESPONSIVE + FINAL PREMIUM POLISH
=========================================================*/

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



.pms-login-card .text-center img{
    width:180px;
    margin-bottom:18px;
}

.pms-login-card .text-center h1{
    margin:12px 0 8px;
    font-size:34px;
    font-weight:700;
    color:#1d4ed8!important;
}

.pms-login-card .text-center p{
    color:#7b8794;
    font-size:15px;
    line-height:1.7;
}

/*==========================
  INPUT ICON EFFECT
==========================*/

.pms-login-card .fv-row{
    position:relative;
}

.pms-login-card label{
    transition:.3s;
}

.pms-login-card .form-control:hover{
    border-color:#b7c5d8!important;
}

.pms-login-card .form-control:focus+label{
    color:#0d6efd;
}

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

.pms-login-card .btn-primary{

    position:relative;

    overflow:hidden;

}

.pms-login-card .btn-primary:before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120%;

    height:100%;

    background:

    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.25),

        transparent

    );

    transition:.8s;

}

.pms-login-card .btn-primary:hover:before{

    left:130%;

}

/*==========================
  CARD BORDER GLOW
==========================*/

.pms-login-card{

    border-radius:28px;

}

.pms-login-card .form{

    position:relative;

    overflow:hidden;

}

.pms-login-card .form:after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

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

    pointer-events:none;

}

/*==========================
  HERO ANIMATION
==========================*/

.pms-hero{

    animation:pmsHero .9s ease;

}

@keyframes pmsHero{

    from{

        opacity:0;

        transform:translateX(-40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==========================
  FLOATING STATS
==========================*/

.pms-stat-card{

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

}

.pms-stat-card:nth-child(2){

    animation-delay:1.2s;

}

@keyframes floatCard{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

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

.pms-login ::-webkit-scrollbar{

    width:8px;

}

.pms-login ::-webkit-scrollbar-thumb{

    background:#c8d2df;

    border-radius:20px;

}

.pms-login ::-webkit-scrollbar-thumb:hover{

    background:#9fb3ca;

}

/*==========================
  LAPTOP
==========================*/

@media(max-width:1400px){

.pms-hero{

padding:55px;

}

.pms-hero h1{

font-size:52px;

}

.pms-login-card{

max-width:500px;

}

}

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

@media(max-width:1199px){

.pms-hero{

padding:45px;

}

.pms-hero h1{

font-size:46px;

}

.pms-hero p{

font-size:17px;

}

}

/*==========================
  MOBILE
==========================*/

@media(max-width:991px){

.pms-login-left{

display:none!important;

}

.pms-login-right{

padding:30px 18px;

}

.pms-login-card{

max-width:100%;

}

.pms-login-card .form{

padding:32px;

border-radius:22px;

}

}

/*==========================
 SMALL MOBILE
==========================*/

@media(max-width:768px){

.pms-login-card .text-center img{

width:160px;

}

.pms-login-card .text-center h1{

font-size:30px;

}

.pms-login-card .form-control{

height:52px!important;

}

.pms-refresh-btn{

width:52px;

height:52px;

min-width:52px;

}

.pms-login-card .btn-primary{

height:52px!important;

font-size:16px;

}

}

/*==========================
 EXTRA SMALL
==========================*/

@media(max-width:480px){

.pms-login-right{

padding:15px;

}

.pms-login-card .form{

padding:22px;

}

.pms-login-card .text-center img{

width:145px;

}

.pms-login-card .text-center h1{

font-size:26px;

}

.pms-captcha{

flex-direction:column;

align-items:stretch;

}

.pms-refresh-btn{

width:100%;

height:50px;

}

}

/*==========================
  FINAL POLISH
==========================*/

.pms-login{

background:#eef3f9;

}

.pms-login-card{

filter:drop-shadow(0 20px 45px rgba(15,23,42,.08));

}

.pms-login-card .form{

backdrop-filter:blur(12px);

}

.pms-login *{

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}


.pms-form{
    background:#fff;
    border-radius:32px;
    padding:55px;
    border:1px solid rgba(13,110,253,.08);
    box-shadow:
        0 30px 80px rgba(15,23,42,.08),
        0 10px 30px rgba(15,23,42,.05);
}

.pms-card-header{
    text-align: center;
}

.pms-card-header h2{
    font-size:30px;
    font-weight:800;
    color:#17345d;
    margin-bottom:8px;
}

.pms-card-header p{
    font-size:17px;
    color:#8b96aa;
    line-height:1.8;
}

.pms-form .form-control{
    height:60px!important;
    border-radius:16px!important;
    background:#f8fbff!important;
    border:1px solid #dce5ef!important;
    transition:.35s;
}

.pms-form .form-control:hover{
    border-color:#b5d2ff!important;
}

.pms-form .form-control:focus{
    background:#fff!important;
    border-color:#0d6efd!important;
    box-shadow:0 0 0 6px rgba(13,110,253,.10)!important;
}

.pms-captcha{
    display:flex;
    align-items:center;
    gap:15px;
}

.pms-captcha span{
    flex:1;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border:1px solid #dce5ef;
    border-radius:16px;
}

.pms-refresh-btn{
    width:60px;
    height:60px;
    border-radius:16px;
}

.pms-form .btn-primary{
    height:60px!important;
    border-radius:16px!important;
    font-size:18px;
    font-weight:700;
    background:linear-gradient(135deg,#1677ff,#005be8);
    box-shadow:0 15px 35px rgba(22,119,255,.30);
}

.pms-form .btn-primary:hover{
    transform:translateY(-2px);
}

.pms-overlay{
    background:
    linear-gradient(
        rgba(8,33,74,.72),
        rgba(8,33,74,.58)
    );
}

.pms-stat-card{
    backdrop-filter:blur(18px);
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.25);
    box-shadow:0 25px 40px rgba(0,0,0,.18);
}