body {
     background-color: #1f2630;
     font-family: 'Segoe UI', sans-serif;
 }

 .signin-container {
     max-width: 500px;
     margin: 60px 20px;
     background: #1f2630;
     border: 2px solid #d4af37;
     border-radius: 15px;
     padding: 40px 30px;
     box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
 }


 @media (min-width: 768px) {
     .signin-container {
         margin: 60px auto;
     }
 }

 .signin-container h2 {
     color: #d4af37;
     text-align: center;
     margin-bottom: 30px;
     font-weight: 700;
 }

 .form-control {
     background-color: #d1c09d;
     border: 1px solid #d4af37;
     color: #050505ff;
 }

 .form-control:focus {
     background-color: #1f2630;
     color: #fff;
     border-color: #d4af37;
     box-shadow: none;
 }

 .btn-gold {
     background-color: #d4af37;
     color: #0d0d0d;
     font-weight: 600;
     width: 100%;
     transition: 0.3s;
 }

 .btn-gold:hover {
     background-color: #b9962f;
     color: #fff;
 }

 .toggle-password {
     cursor: pointer;
     position: absolute;
     right: 10px;
     top: 71%;
     transform: translateY(-50%);
     color: #d4af37;
     font-size: 18px;
 }

 a {
     color: #d4af37;
     text-decoration: none;
 }

 a:hover {
     text-decoration: underline;
 }

 .logoo {
     display: block;
     margin: 0 auto 20px auto;
     width: 120px;
     height: auto;
     animation: zoomInOut 3s ease-in-out infinite;
 }

 @keyframes zoomInOut {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.2);
     }
 }