*{

    padding:0;

    margin:0;

}



:root{

    --blue:#006bb3;

}



a{

    text-decoration: none;

}



.body-container{



    background-image: linear-gradient(#6baace, #264783);

    background-attachment: fixed;

    background-repeat: no-repeat;

    

}

.login-left-p{

    font-size: 19px;

    font-weight: 500;

    padding: 23px 35px 10px;



    text-align: center;

}



.join-line{

    display: flex;

    justify-content: center;

}





.join-line hr{

   width:35%;

}

.join-line span{

    padding: 10px 15px;

    

 }



 .join-line-connect{

    display: flex;

    justify-content: center;

}

.join-line-connect span{

    padding: 5px 10px;

 }



.join-line-connect hr{

    width:19%;

}



.w-41{

    width: 28% !important;

}



.login-social-icon{

    padding:10px;

}



.login-social-icon span{ 

    padding:15px;

    background-color:#eeeeee;

    border-radius: 50%; 

    margin:7px;

}



.login-social-icon span:hover{ 

    padding:15px;

    background-color:var(--blue);

    border-radius: 50%; 

    margin:7px;

}







.login-social-icon span a i{



    font-size: 19px;

    color:black;



}

.login-social-icon span:hover a i{



    font-size: 19px;

    color:rgb(255, 255, 255);



}



.login-box{

    /* padding: 12px; */

    background: white;

    border-radius: 15px;

}



.button {

    position: relative;

    transition: all 0.3s ease-in-out;

    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);

    padding-block: 0.5rem;

    padding-inline: 1.25rem;

    background-color: rgb(0 107 179);

    border-radius: 9999px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffff;

    gap: 10px;

    font-weight: bold;

    border: 3px solid #ffffff4d;

    outline: none;

    overflow: hidden;

    font-size: 15px;

  }

  

  .icon {

    width: 24px;

    height: 24px;

    transition: all 0.3s ease-in-out;

  }

  

  .button:hover {

    transform: scale(1.05);

    border-color: #fff9;

  }

  

  .button:hover .icon {

    transform: translate(4px);

  }

  

  .button:hover::before {

    animation: shine 1.5s ease-out infinite;

  }

  

  .button::before {

    content: "";

    position: absolute;

    width: 100px;

    height: 100%;

    background-image: linear-gradient(

      120deg,

      rgba(255, 255, 255, 0) 30%,

      rgba(255, 255, 255, 0.8),

      rgba(255, 255, 255, 0) 70%

    );

    top: 0;

    left: -100px;

    opacity: 0.6;

  }

  

  @keyframes shine {

    0% {

      left: -100px;

    }

  

    60% {

      left: 100%;

    }

  

    to {

      left: 100%;

    }

  }

  .login-first-col{
    border-radius:15px 0px 0px 15px; 
  }

  

/*  media 500px*/
@media screen and (max-width:500px){


    .mobile-space-70 { margin-top: 70px !important;}

    .login-box { background: transparent; padding: 0px 10px;}

    .login-first-col{ border-radius:15px; }

    .w-41{ width: 18% !important; }

}