/* Made with love by Mutiullah Samim*/

@import url('https://fonts.googleapis.com/css?family=Numans');

html,body{
background-image:
  url("/images/bg-parking.jpg"),
  radial-gradient(1200px circle at 20% 20%, rgba(255, 0, 122, 0.35), transparent 55%),
  radial-gradient(900px circle at 80% 40%, rgba(0, 212, 255, 0.30), transparent 60%),
  radial-gradient(900px circle at 30% 85%, rgba(255, 204, 0, 0.22), transparent 55%),
  linear-gradient(135deg, #1d0036 0%, #380046 35%, #6b0046 100%);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
height: 100%;
font-family: 'Numans', sans-serif;
}

@media (max-width: 768px) {
  html,body{
    background-image: url("/images/bg-parking.jpg"), linear-gradient(135deg, #1d0036 0%, #380046 35%, #6b0046 100%);
    background-attachment: scroll;
  }
}

body{
position: relative;
overflow: hidden;
}

body::before,
body::after{
content: '';
position: absolute;
inset: -20vmax;
pointer-events: none;
z-index: 0;
transform-style: preserve-3d;
}

body::before{
background:
  radial-gradient(circle at 30% 40%, rgba(255,255,255,0.18), rgba(255,255,255,0.0) 52%),
  radial-gradient(circle at 70% 60%, rgba(255, 204, 0, 0.22), rgba(255, 204, 0, 0.0) 55%),
  radial-gradient(circle at 55% 25%, rgba(0, 212, 255, 0.18), rgba(0, 212, 255, 0.0) 58%);
filter: blur(10px);
opacity: 0.55;
transform: perspective(900px) rotateX(18deg) rotateY(-14deg) translate3d(-6vmax, -2vmax, -120px);
animation: bg3dFloatA 14s ease-in-out infinite;
}

body::after{
background:
  conic-gradient(from 220deg at 50% 50%, rgba(255, 0, 122, 0.16), rgba(0, 212, 255, 0.12), rgba(255, 204, 0, 0.12), rgba(255, 0, 122, 0.16));
filter: blur(34px);
opacity: 0.38;
mix-blend-mode: overlay;
transform: perspective(900px) rotateX(-14deg) rotateY(18deg) translate3d(6vmax, 4vmax, -180px);
animation: bg3dFloatB 18s ease-in-out infinite;
}

@media (max-width: 768px) {
  body::before,
  body::after{
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after{
    animation: none !important;
    transform: none !important;
  }
}

.traffic-layer{
position: fixed;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 1;
}

.traffic-layer .car{
position: absolute;
left: -20vw;
top: 50vh;
font-size: 44px;
color: rgba(255, 255, 255, 0.55);
filter: drop-shadow(0 18px 28px rgba(0,0,0,0.55));
will-change: transform;
}

@media (max-width: 768px) {
  .traffic-layer{ display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .traffic-layer{ display: none !important; }
}

@keyframes carDriveRight{
0%{ transform: translate3d(-20vw, 0, 0) scale(1) rotate(0deg); }
100%{ transform: translate3d(140vw, 0, 0) scale(1) rotate(0deg); }
}

@keyframes carDriveLeft{
0%{ transform: translate3d(140vw, 0, 0) scale(1) rotate(180deg); }
100%{ transform: translate3d(-20vw, 0, 0) scale(1) rotate(180deg); }
}

.traffic-layer .car-1{ top: 18vh; font-size: 58px; opacity: 0.55; color: rgba(255, 59, 48, 0.70); animation: carDriveRight 14s linear infinite; }
.traffic-layer .car-2{ top: 28vh; font-size: 46px; opacity: 0.50; color: rgba(255, 204, 0, 0.72); animation: carDriveRight 18s linear infinite; animation-delay: -6s; }
.traffic-layer .car-3{ top: 40vh; font-size: 52px; opacity: 0.52; color: rgba(52, 199, 89, 0.70); animation: carDriveLeft 16s linear infinite; animation-delay: -3s; }
.traffic-layer .car-4{ top: 56vh; font-size: 44px; opacity: 0.42; color: rgba(25, 25, 25, 0.65); animation: carDriveRight 20s linear infinite; animation-delay: -11s; }
.traffic-layer .car-5{ top: 68vh; font-size: 60px; opacity: 0.46; color: rgba(255, 204, 0, 0.68); animation: carDriveLeft 22s linear infinite; animation-delay: -9s; }
.traffic-layer .car-6{ top: 80vh; font-size: 48px; opacity: 0.40; color: rgba(255, 59, 48, 0.62); animation: carDriveRight 26s linear infinite; animation-delay: -17s; }

@keyframes bg3dFloatA{
0%{ transform: perspective(900px) rotateX(18deg) rotateY(-14deg) translate3d(-6vmax, -2vmax, -120px) scale(1); }
50%{ transform: perspective(900px) rotateX(22deg) rotateY(-6deg) translate3d(-2vmax, 1vmax, -90px) scale(1.06); }
100%{ transform: perspective(900px) rotateX(18deg) rotateY(-14deg) translate3d(-6vmax, -2vmax, -120px) scale(1); }
}

@keyframes bg3dFloatB{
0%{ transform: perspective(900px) rotateX(-14deg) rotateY(18deg) translate3d(6vmax, 4vmax, -180px) scale(1); }
50%{ transform: perspective(900px) rotateX(-18deg) rotateY(10deg) translate3d(2vmax, 1vmax, -150px) scale(1.08); }
100%{ transform: perspective(900px) rotateX(-14deg) rotateY(18deg) translate3d(6vmax, 4vmax, -180px) scale(1); }
}

.container{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}

.card{
height: auto;
min-height: 430px;
margin-top: auto;
margin-bottom: auto;
width: 400px;
background-color: rgba(255,255,255,0.08) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 22px;
box-shadow:
  0 20px 60px rgba(0,0,0,0.55),
  inset 0 1px 0 rgba(255,255,255,0.10);
transform: translateZ(0);
transition: transform 240ms ease, box-shadow 240ms ease;
position: relative;
overflow: hidden;
}

@media (max-width: 768px) {
  .card{
    width: 92vw;
    max-width: 400px;
    min-height: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 10px 24px rgba(0,0,0,0.40);
    transition: none;
    transform: none;
  }

  .container{
    height: auto;
    min-height: 100vh;
    padding: 18px 12px;
  }

  .card-body{
    padding: 18px;
  }

  .card-header{
    padding: 14px 18px;
  }

  .card-header h3{
    font-size: 22px;
  }

  .card label,
  .card .text-gray-600{
    font-size: 14px;
  }

  .card .form-control{
    font-size: 16px;
    padding: 12px 12px;
  }

  .card button{
    font-size: 14px;
    padding: 10px 14px;
  }

  .social_icon{
    right: 10px;
    top: 10px;
  }

  .social_icon a{
    width: 38px;
    height: 38px;
    border-radius: 10px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }

  .social_icon i{
    font-size: 18px;
  }

  .login-logo img{
    max-width: 110px;
    max-height: 110px;
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card{
    transition: none;
  }
}

.card::before{
content: '';
position: absolute;
width: 520px;
height: 520px;
left: -260px;
top: -260px;
background: radial-gradient(circle at 30% 30%, rgba(255, 96, 155, 0.55), rgba(255, 96, 155, 0.0) 60%);
filter: blur(0px);
animation: loginBlob 10s ease-in-out infinite;
}

.card::after{
content: '';
position: absolute;
width: 520px;
height: 520px;
right: -280px;
bottom: -300px;
background: radial-gradient(circle at 40% 40%, rgba(0, 212, 255, 0.42), rgba(0, 212, 255, 0.0) 60%);
animation: loginBlob 12s ease-in-out infinite reverse;
}

@media (max-width: 768px) {
  .card::before,
  .card::after{
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card::before,
  .card::after{
    animation: none !important;
  }
}

@keyframes loginBlob{
0%{ transform: translate(0px, 0px) scale(1); }
50%{ transform: translate(30px, 20px) scale(1.06); }
100%{ transform: translate(0px, 0px) scale(1); }
}

.card:hover{
transform: translateY(-4px) perspective(800px) rotateX(2deg) rotateY(-2deg);
box-shadow:
  0 28px 80px rgba(0,0,0,0.62),
  inset 0 1px 0 rgba(255,255,255,0.12);
}

@media (max-width: 768px) {
  .card:hover{
    transform: none;
    box-shadow: 0 10px 24px rgba(0,0,0,0.40);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card:hover{
    transform: none;
  }
}

.social_icon span{
font-size: unset;
margin-left: 10px;
color: #FFC312;
}

.social_icon span:hover{
color: white;
cursor: pointer;
}

.card-header h3{
color: white;
}

.card-header{
position: relative;
z-index: 2;
border-bottom: 1px solid rgba(255,255,255,0.10);
}

.card-body{
position: relative;
z-index: 2;
}

.card .form-control{
border-radius: 14px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.18);
color: #fff;
}

.card .form-control:focus{
background: rgba(255,255,255,0.12);
border-color: rgba(255, 204, 0, 0.65);
box-shadow: 0 0 0 0.15rem rgba(255, 204, 0, 0.15);
}

.card .invalid-feedback{
color: rgba(255, 210, 210, 0.95);
}

.social_icon{
position: absolute;
right: 14px;
top: 10px;
z-index: 5;
}

.social_icon a{
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 12px;
background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.20);
box-shadow: 0 10px 26px rgba(0,0,0,0.35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform 180ms ease, background 180ms ease;
text-decoration: none;
}

.social_icon a:hover{
transform: translateY(-2px);
background: rgba(0,0,0,0.38);
}

.social_icon i{
font-size: 26px;
}

.social_icon svg{
width: 24px;
height: 24px;
fill: #FFC312;
}

.login-logo{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 0 4px 0;
}

.login-logo img{
max-width: 92px;
max-height: 92px;
object-fit: contain;
filter: drop-shadow(0 10px 22px rgba(0,0,0,0.35));
}

.input-group-prepend span{
width: 50px;
background-color: #FFC312;
color: black;
border:0 !important;
}

input:focus{
outline: 0 0 0 0  !important;
box-shadow: 0 0 0 0 !important;

}

.remember{
color: white;
}

.remember input
{
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}

.login_btn{
color: black;
background-color: #FFC312;
width: 100px;
}

.login_btn:hover{
color: black;
background-color: white;
}

.links{
color: white;
}

.links a{
margin-left: 4px;
}