@import url('https://fonts.googleapis.com/css2?family=Allura&family=Dancing+Script&family=Great+Vibes&family=Sacramento&display=swap');

html body.loginBg{
    background-image: url(https://ebx360.com/asset/home/home/hero.webp);
    width: 100%;
    height: 100vh;
    background-size: cover;
    overflow: hidden;
    position: relative;
}
.loginBg:before {
    content: "";
    background: rgba(6, 12, 34, 0.8);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}
.content-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
}
html .content{
    margin-left: 0 !important;
}
.img-fluid {
    -webkit-animation: mover 2s infinite  alternate;
    animation: mover 2s infinite  alternate;
}
@-webkit-keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-30px); }
}
@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-30px); }
}
.top{
    top:10%;
}
.card-title{
    width:100%;
}
.rightclock{
    display: flex;
  align-items: center;
  justify-content: center;
  /*height: 100vh;*/
  /*background: #D9D7DD;*/
  flex-direction: column;
  
}
.rightclock h1{
    font-family: 'Dancing Script', cursive;
    font-size: 104px;
    font-weight: 600;
    color:  #203354;
}
.rightclock h2{
    font-family: 'Dancing Script', cursive;
    postion : absolute;
    margin: 0em 0 -1em -1em;
    color:  #203354;
}
.clock {
  border-radius: 100%;
  font-family: "Montserrat";
}

.wrap {
  overflow: hidden;
  width: 250px;
  height: 250px;
  border: 4px solid rgb(0, 26, 53);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.minute,
.hour {
  position: absolute;
  height: 86px;
  width: 2px;
  margin: auto;
  top: -36%;
  left: 0;
  bottom: 0;
  right: 0;
  background: black;
  transform-origin: bottom center;
  transform: rotate(0deg);
  z-index: 1;
}

.minute {
  position: absolute;
  height: 108px;
  width: 3px;
  top: -46%;
  left: 0;
  transform: rotate(90deg);
}

.second {
  position: absolute;
  height: 90px;
  width: 2px;
  margin: auto;
  top: -38%;
  left: 0;
  bottom: 0;
  right: 0;
  border-radius: 4px;
  background: #FF4B3E;
  transform-origin: bottom center;
  transform: rotate(180deg);
  z-index: 1;
}

.dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 100px;
  background: white;
  border: 2px solid #1b1b1b;
  border-radius: 100px;
  margin: auto;
  z-index: 1;
}
.login_box {
    width: 1050px !important;
    border-radius: 10px;
    /*box-shadow: 1px 4px 22px -8px #0004;*/
}
#display-time {
  font-family: "Rubik", sans-serif;
  font-size: 60px;
  color:  #203354;
}

#display-date {
  font-family: "Rubik", sans-serif;
  font-size: 20px;
  align-items: center;
  color:  #203354;
  justify-content: center;
}
#display-date p {
  padding: 4px;
  
}
#display-date span {
  padding: 4px 6px;
  border-radius: 50%;
  background-color: rgb(134, 246, 196);
  
}

@media (min-width: 1400px){
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1320px;
}
}
.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}