Roz-28/Health_Director

1/* Global Styles */2body {3    margin: 0;4    font-family: sans-serif;5    background: linear-gradient(135deg, #009688, #6BBF59); /* Gradient background */6    min-height: 100vh;7    display: flex;8    align-items: center;9    justify-content: center;10  }11  12  /* Language Toggle Links */13  .lang-toggle {14    position: fixed;15    top: 10px;16    right: 10px;17  }18  .lang-toggle a {19    color: #fff;20    text-decoration: none;21    font-weight: bold;22    margin: 0 5px;23  }24  .lang-toggle a:hover {25    text-decoration: underline;26  }27  .lang-toggle a:focus {28    outline: none;29  }30  31  /* Form Container */32  .form-container {33    background: rgba(255, 255, 255, 0.8);  /* translucent white for contrast */34    padding: 20px 30px;35    border-radius: 8px;36    width: 90%;37    max-width: 400px;38    box-shadow: 0 0 10px rgba(0,0,0,0.15);39    box-sizing: border-box;40    text-align: center;41  }42  .form-container h2 {43    margin: 0 0 15px;44    color: #009688;  /* heading in theme color */45  }46  47  /* Input Fields */48  .form-container input {49    width: 100%;50    padding: 10px;51    margin: 8px 0;52    border: 1px solid #ccc;53    border-radius: 4px;54    box-sizing: border-box;55    font-size: 1rem;56    transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;57  }58  .form-container input:focus {59    outline: none;60    border-color: #009688;61    box-shadow: 0 0 5px rgba(0, 150, 136, 0.5);62    background-color: #f9f9f9;63  }64  65  /* Sign-Up Button */66  .form-container button {67    width: 100%;68    padding: 10px;69    margin: 10px 0;70    background: linear-gradient(to right, #009688, #6BBF59);71    border: none;72    border-radius: 4px;73    color: #fff;74    font-size: 1rem;75    cursor: pointer;76    transition: background 0.3s, transform 0.3s;77  }78  .form-container button:hover {79    background: linear-gradient(to right, #00baa8, #79c569); /* lighter on hover */80    transform: translateY(-1px);81  }82  .form-container button:active {83    transform: translateY(0);84  }85  86  /* Language-specific text alignment (RTL for Arabic fields) */87  html[lang="ar"] #fullname {88    text-align: right;89  }90  html[lang="ar"] #email,91  html[lang="ar"] #password,92  html[lang="ar"] #confirm-password {93    text-align: left;94  }95  96  /* Responsive adjustments for smaller screens */97  @media (max-width: 480px) {98    .form-container {99      padding: 15px 20px;100    }101  }