body {
    /* Use the same fonts as our main site */
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Base background color */
    background-color: #f0f2f5;

    /* Center the login box */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    /* Prevent scrollbars from icons */
    position: relative;
}

/* Background Icons Styling */
.background-icons {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    /* Allow clicking through */
}

.background-icons i {
    position: absolute;
    opacity: 0.15;
    /* Subtle but visible */
    font-size: 40px;
}

/* Individual Icon Positioning and Colors */
.icon-1 {
    top: 2%;
    left: 49%;
    color: #f39c12;
    font-size: 41px;
    transform: rotate(19deg);
}

.icon-2 {
    top: 13%;
    left: 74%;
    color: #c0392b;
    font-size: 53px;
    transform: rotate(10deg);
}

.icon-3 {
    top: 32%;
    left: 31%;
    color: #d35400;
    font-size: 74px;
    transform: rotate(39deg);
}

.icon-4 {
    top: 64%;
    left: 13%;
    color: #e67e22;
    font-size: 80px;
    transform: rotate(-29deg);
}

.icon-5 {
    top: 58%;
    left: 81%;
    color: #27ae60;
    font-size: 58px;
    transform: rotate(30deg);
}

.icon-6 {
    top: 61%;
    left: 88%;
    color: #34495e;
    font-size: 77px;
    transform: rotate(18deg);
}

.icon-7 {
    top: 37%;
    left: 2%;
    color: #27ae60;
    font-size: 67px;
    transform: rotate(-4deg);
}

.icon-8 {
    top: 62%;
    left: 12%;
    color: #2ecc71;
    font-size: 43px;
    transform: rotate(12deg);
}

.icon-9 {
    top: 3%;
    left: 16%;
    color: #e74c3c;
    font-size: 58px;
    transform: rotate(-39deg);
}

.icon-10 {
    top: 30%;
    left: 33%;
    color: #2ecc71;
    font-size: 32px;
    transform: rotate(20deg);
}

.icon-11 {
    top: 6%;
    left: 90%;
    color: #d35400;
    font-size: 78px;
    transform: rotate(16deg);
}

.icon-12 {
    top: 11%;
    left: 11%;
    color: #16a085;
    font-size: 60px;
    transform: rotate(-42deg);
}

.icon-13 {
    top: 42%;
    left: 62%;
    color: #2ecc71;
    font-size: 72px;
    transform: rotate(16deg);
}

.icon-14 {
    top: 5%;
    left: 12%;
    color: #e74c3c;
    font-size: 65px;
    transform: rotate(-9deg);
}

.icon-15 {
    top: 5%;
    left: 61%;
    color: #9b59b6;
    font-size: 73px;
    transform: rotate(-25deg);
}

.icon-16 {
    top: 59%;
    left: 63%;
    color: #d35400;
    font-size: 34px;
    transform: rotate(-21deg);
}

.icon-17 {
    top: 65%;
    left: 81%;
    color: #2980b9;
    font-size: 66px;
    transform: rotate(18deg);
}

.icon-18 {
    top: 22%;
    left: 39%;
    color: #1abc9c;
    font-size: 45px;
    transform: rotate(37deg);
}

.icon-19 {
    top: 31%;
    left: 40%;
    color: #f39c12;
    font-size: 42px;
    transform: rotate(37deg);
}

.icon-20 {
    top: 28%;
    left: 27%;
    color: #34495e;
    font-size: 48px;
    transform: rotate(-35deg);
}

.icon-21 {
    top: 5%;
    left: 13%;
    color: #16a085;
    font-size: 63px;
    transform: rotate(-15deg);
}

.icon-22 {
    top: 51%;
    left: 21%;
    color: #c0392b;
    font-size: 62px;
    transform: rotate(0deg);
}

.icon-23 {
    top: 31%;
    left: 49%;
    color: #27ae60;
    font-size: 70px;
    transform: rotate(29deg);
}

.icon-24 {
    top: 7%;
    left: 52%;
    color: #e74c3c;
    font-size: 46px;
    transform: rotate(25deg);
}

.icon-25 {
    top: 20%;
    left: 63%;
    color: #8e44ad;
    font-size: 63px;
    transform: rotate(13deg);
}

.icon-26 {
    top: 88%;
    left: 15%;
    color: #8e44ad;
    font-size: 45px;
    transform: rotate(11deg);
}

.icon-27 {
    top: 23%;
    left: 37%;
    color: #e67e22;
    font-size: 49px;
    transform: rotate(-9deg);
}

.icon-28 {
    top: 48%;
    left: 45%;
    color: #2980b9;
    font-size: 70px;
    transform: rotate(-42deg);
}

.icon-29 {
    top: 74%;
    left: 35%;
    color: #3498db;
    font-size: 60px;
    transform: rotate(45deg);
}

.icon-30 {
    top: 83%;
    left: 46%;
    color: #e74c3c;
    font-size: 55px;
    transform: rotate(42deg);
}

.icon-31 {
    top: 75%;
    left: 45%;
    color: #e74c3c;
    font-size: 41px;
    transform: rotate(16deg);
}

.icon-32 {
    top: 61%;
    left: 38%;
    color: #3498db;
    font-size: 33px;
    transform: rotate(-15deg);
}

.icon-33 {
    top: 0%;
    left: 14%;
    color: #16a085;
    font-size: 35px;
    transform: rotate(37deg);
}

.icon-34 {
    top: 55%;
    left: 45%;
    color: #e67e22;
    font-size: 70px;
    transform: rotate(-14deg);
}

.icon-35 {
    top: 88%;
    left: 93%;
    color: #e74c3c;
    font-size: 53px;
    transform: rotate(-25deg);
}

.icon-36 {
    top: 71%;
    left: 77%;
    color: #27ae60;
    font-size: 56px;
    transform: rotate(6deg);
}

.icon-37 {
    top: 59%;
    left: 23%;
    color: #1abc9c;
    font-size: 79px;
    transform: rotate(28deg);
}

.icon-38 {
    top: 17%;
    left: 79%;
    color: #34495e;
    font-size: 61px;
    transform: rotate(8deg);
}

.icon-39 {
    top: 83%;
    left: 14%;
    color: #27ae60;
    font-size: 32px;
    transform: rotate(-29deg);
}

.icon-40 {
    top: 90%;
    left: 61%;
    color: #16a085;
    font-size: 35px;
    transform: rotate(12deg);
}


h2 {
    font-family: 'Montserrat', sans-serif;
}

.login-wrapper {
    /* Solid Card Design */
    background: #ffffff;
    border: none;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    /* Soft, deep shadow */

    border-radius: 16px;
    padding: 50px 40px;
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
    color: #333;
    /* Dark text for readability */
    z-index: 1;
    /* Ensure it's above icons */
}

.login-header {
    text-align: center;
    margin-bottom: 35px;
}

.login-header img {
    height: 180px;
    /* Increased size significantly (was 120px) */
    width: auto;
    margin-bottom: 20px;
    filter: none;
}

.login-header h2 {
    font-size: 28px;
    color: #333;
    /* Dark heading */
    margin: 10px 0 0 0;
    text-shadow: none;
    font-weight: 700;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #555;
    /* Dark gray label */
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: none;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;

    /* Solid Input Fields */
    background: #f4f7f6;
    /* Light gray background */
    border: 2px solid #e0e0e0;
    color: #333;

    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.form-control::placeholder {
    color: #aaa;
}

.form-control:focus {
    background: #fff;
    border-color: #764ba2;
    /* Accent color border */
    box-shadow: 0 0 0 3px rgba(118, 75, 162, 0.1);
    outline: none;
}

/* Password Toggle Styles */
.password-container {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    /* Darker icon color */
    cursor: pointer;
    z-index: 2;
    font-size: 18px;
    transition: color 0.2s;
}

.toggle-password:hover {
    color: #333;
}

.btn-primary {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #ffffff;

    /* Gradient Button */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.btn-primary:active {
    transform: translateY(1px);
}

.login-error {
    background-color: #ffebee;
    border: 1px solid #ffcdd2;
    color: #c62828;
    padding: 12px;
    border-radius: 6px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 14px;
    backdrop-filter: none;
}