body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;
        background: linear-gradient(to right, #b92b27, #1565c0);
      }
     h1,
      h2 {
        color: white;
        align-items: center;
        text-align: center;
      }

      .card {
        margin-bottom: 200px;
        border: none;
      }

      .box {
        width: 100%;
        padding-top: 5%;
        background: transparent;
        text-align: center;
        transition: 0.25s;
      }
        .boxqr {
        width: 20%;
        padding-top: 0%;
        background: transparent;
        padding-left: 40%;
        text-align: center;
        transition: 0.25s;
      }


      .box input[type="text"],
      .box input[type="password"] {
        border: 0;
        background: none;
        display: block;
        margin: 20px auto;
        text-align: center;
        border: 2px solid #3498db;
        padding: 10px 10px;
        width: 250px;
        outline: none;
        color: white;
        border-radius: 24px;
        transition: 0.25s;
      }


      .box input[type="text"]:focus,
      .box input[type="password"]:focus {
        width: 300px;
        border-color: #2ecc71;
      }

      .box input[type="submit"] {
        border: 0;
        background: none;
        display: block;
        margin: 20px auto;
        text-align: center;
        border: 2px solid #2ecc71;
        padding: 14px 40px;
        outline: none;
        color: white;
        border-radius: 24px;
        transition: 0.25s;
        cursor: pointer;
      }

      .box input[type="submit"]:hover {
        background: #2ecc71;
      }

      .forgot {
        text-decoration: underline;
      }

      ul.social-network {
        list-style: none;
        display: inline;
        margin-left: 0 !important;
        padding: 0;
      }

      ul.social-network li {
        display: inline;
        margin: 0 5px;
      }

      .social-network a.icoFacebook:hover {
        background-color: #3b5998;
      }

      .social-network a.icoTwitter:hover {
        background-color: #33ccff;
      }

      .social-network a.icoGoogle:hover {
        background-color: #bd3518;
      }

      .social-network a.icoFacebook:hover i,
      .social-network a.icoTwitter:hover i,
      .social-network a.icoGoogle:hover i {
        color: #fff;
      }

      a.socialIcon:hover,
      .socialHoverClass {
        color: #44bcdd;
      }

      .social-circle li a {
        display: inline-block;
        position: relative;
        margin: 0 auto 0 auto;
        border-radius: 50%;
        text-align: center;
        width: 50px;
        height: 50px;
        font-size: 20px;
      }

      .social-circle li i {
        margin: 0;
        line-height: 50px;
        text-align: center;
      }

      .social-circle li a:hover i,
      .triggeredHover {
        transform: rotate(360deg);
        transition: all 0.2s;
      }
        a {
        display: inline-block;
        padding: 10px 20px; /* Padding for space on top/bottom and left/right */
        border: 4px solid #2ecc71;
        text-decoration: none;
        color: #ffffff;
        background-color: transparent;
        text-align: center; /* Center the text inside the box */
        border-radius: 15px;
        transition: background-color 0.3s;
      }
      .parent-container {
        display: flex;
        justify-content: center; /* Horizontally center the child elements */
        align-items: center; /* Vertically center the child elements */
        height: 5%; /* Assuming you want to center it vertically in the viewport */
      }

      .social-circle i {
        color: #fff;
        transition: all 0.8s;
        transition: all 0.8s;
      }