.gradient-custom {
    /* fallback for old browsers */
    background: #6a11cb;
    
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1));
    
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, rgba(106, 17, 203, 1), rgba(37, 117, 252, 1))
    }

    .form-signin label, p{
      color: #000;
    }
    
    .form-signin .form-floating:focus-within {
      z-index: 2;
    }
    
    .form-signin input[type="text"] {
      margin-bottom: -1px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
    
    .form-signin input[type="password"] {
      margin-bottom: 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
 
  .btn-open-popup { 
      padding: 12px 24px; 
      font-size: 18px; 
      background-color: green; 
      color: #fff; 
      border: none; 
      border-radius: 8px; 
      cursor: pointer; 
      transition: background-color 0.3s ease; 
  } 

  .btn-open-popup:hover { 
      background-color: #4caf50; 
  } 

  .overlay-container { 
      display: none; 
      position: fixed; 
      top: 0; 
      left: 0; 
      width: 100%; 
      height: 100%; 
      background: rgba(0, 0, 0, 0.6); 
      justify-content: center; 
      align-items: start; 
      opacity: 0; 
      transition: opacity 0.3s ease; 
  } 

  .popup-box { 
      background: #fff; 
      padding: 24px; 
      border-radius: 12px; 
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); 
      width: 500px; 
      text-align: center; 
      opacity: 0; 
      
      transform: scale(0.8); 
      animation: fadeInUp 0.5s ease-out forwards; 
  } 

  .form-container { 
      display: flex; 
      flex-direction: column; 

      
  } 

  .form-label { 
      margin-bottom: 10px; 
      font-size: 16px; 
      color: #444; 
      text-align: left; 
  } 

  .form-input { 
      padding: 10px; 
      margin-bottom: 20px; 
      border: 1px solid #ccc; 
      border-radius: 8px; 
      font-size: 16px; 
      width: 100%; 
      
      box-sizing: border-box; 
  } 

  .btn-submit, 
  .btn-close-popup { 
      padding: 12px 24px; 
      border: none; 
      border-radius: 8px; 
      cursor: pointer; 
      transition: background-color 0.3s ease, color 0.3s ease; 
  } 

  .btn-submit { 
      background-color: green; 
      color: #fff; 
  } 

  .btn-close-popup { 
      margin-top: 12px; 
      background-color: #e74c3c; 
      color: #fff; 
  } 

  .btn-submit:hover, 
  .btn-close-popup:hover { 
      background-color: #4caf50; 
  } 

  /* Keyframes for fadeInUp animation */ 
  @keyframes fadeInUp { 
      from { 
          opacity: 0; 
          transform: translateY(20px); 
      } 

      to { 
          opacity: 1; 
          transform: translateY(0); 
      } 
  } 

  /* Animation for popup */ 
  .overlay-container.show { 
      display: flex; 
      overflow-y: auto;
      opacity: 1; 
      padding: 25px;
  }