/* General body styling for centering and background */
        body {
            font-family: 'Inter','Arial', 'Tahoma', sans-serif; /* Using Inter font */
            background-color: #f0f2f5; /* Light gray background */
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            min-height: 100vh; /* Full viewport height */
            margin: 0;
            padding: 20px; /* Add some padding for smaller screens */
            box-sizing: border-box; /* Include padding in element's total width/height */
        }
        .fntc {
  font-family: 'Cairo', sans-serif;
  
}
    .logo-img {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 265px; /* Medium size (you can adjust) */
      height: auto;
      animation: fadeIn 0.8s ease-out; /* Simple fade-in animation */
    }

        /* Container for the login form */
        .login-container {
            background-color: #ffffff; /* White background for the card */
            padding: 40px; /* Ample padding inside the card */
            border-radius: 12px; /* Nicely rounded corners */
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
            width: 100%; /* Take full width on small screens */
            max-width: 400px; /* Max width for larger screens */
            text-align: center; /* Center text inside the container */
            animation: fadeIn 0.8s ease-out; /* Simple fade-in animation */
        }

        /* Keyframe animation for fade-in effect */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Heading styling */
        .login-container h2 {
            margin-bottom: 25px; /* Space below the heading */
            color: #333333; /* Darker text color */
            font-size: 2rem; /* Larger font size for heading */
            font-weight: 700; /* Bold heading */
        }

        /* Styling for each input group (label + input) */
        .input-group {
            margin-bottom: 20px; /* Space between input groups */
            text-align: left; /* Align labels and inputs to the left */
        }

        /* Styling for labels */
        .input-group label {
            display: block; /* Make label take its own line */
            margin-bottom: 8px; /* Space between label and input */
            color: #555555; /* Medium gray text color */
            font-weight: 500; /* Medium font weight */
            font-size: 0.95rem; /* Slightly smaller font size */
        }

        /* Styling for text and password input fields */
        .input-group input[type="text"],
        .input-group input[type="password"] {
            width: calc(100% - 20px); /* Full width minus padding for box-sizing */
            padding: 12px 10px; /* Comfortable padding inside input fields */
            border: 1px solid #cccccc; /* Light gray border */
            border-radius: 8px; /* Rounded corners for inputs */
            font-size: 1rem; /* Standard font size */
            color: #333333; /* Input text color */
            box-sizing: border-box; /* Ensures padding doesn't add to the width */
            transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for focus */
        }

        /* Focus state for input fields */
        .input-group input[type="text"]:focus,
        .input-group input[type="password"]:focus {
            border-color: #007bff; /* Blue border on focus */
            outline: none; /* Remove default outline */
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* Subtle blue shadow on focus */
        }

        /* Styling for the login button */
        .login-button {
            width: 100%; /* Full width button */
            padding: 14px; /* Generous padding */
            background: linear-gradient(to right, #007bff, #0056b3); /* Gradient background */
            color: white; /* White text color */
            border: none; /* No border */
            border-radius: 8px; /* Rounded corners */
            cursor: pointer; /* Pointer cursor on hover */
            font-size: 1.1rem; /* Slightly larger font size */
            font-weight: 600; /* Semi-bold font weight */
            margin-top: 20px; /* Space above the button */
            transition: background 0.3s ease, transform 0.2s ease; /* Smooth transitions */
            box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2); /* Soft shadow */
        }

        /* Hover effect for the login button */
        .login-button:hover {
            background: linear-gradient(to right, #0056b3, #007bff); /* Invert gradient on hover */
            transform: translateY(-2px); /* Slight lift effect */
            box-shadow: 0 6px 12px rgba(0, 123, 255, 0.3); /* Enhanced shadow on hover */
        }

        /* Active (click) effect for the login button */
        .login-button:active {
            transform: translateY(0); /* Return to original position */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Smaller shadow on click */
        }



        /* Responsive adjustments for smaller screens */       
       
       @media (max-width: 500px) {
            .login-container {
                padding: 30px 20px; /* Less padding on very small screens */
                margin: 10px; /* Ensure some margin from screen edges */
            }

            .login-container h2 {
                font-size: 1.75rem; /* Smaller heading on small screens */
            }

            .input-group input[type="text"],
            .input-group input[type="password"] {
                padding: 10px; /* Slightly less padding in inputs */
            }

            .login-button {
                padding: 12px; /* Slightly less padding for button */
                font-size: 1rem; /* Smaller button text */
            }
        }