/* Importing Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Global Reset */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif; /* Default font family */
}

/* Body Styling */
body {
    background-color: #000000; /* Black background */
}

/* Login Form Container */
.login-form {
    position: relative;
    min-height: 100vh; /* Minimum height of the viewport */
    z-index: 0;
    background: radial-gradient(circle at -8.9% 51.2%, rgb(255, 124, 0) 0%, rgb(255, 124, 0) 15.9%, rgb(255, 163, 77) 15.9%, rgb(255, 163, 77) 24.4%, rgb(19, 30, 37) 24.5%, rgb(19, 30, 37) 66%); /* Radial gradient background */
    padding: 40px;
    justify-content: center; /* Center content horizontally */
    display: grid; /* Using CSS grid for layout */
    grid-template-columns: 1fr auto 1fr; /* Three-column grid layout with equal distribution */
    align-items: center; /* Center content vertically */
}

/* Container for limiting maximum width */
.container {
    max-width: 800px; /* Maximum width for content */
    margin: 0 auto; /* Center container horizontally */
}

/* Heading 1 Styling */
.login-form h1 {
    text-align: center; /* Center align text */
    font-size: 2.5rem; /* Large font size */
    font-weight: 400; /* Normal font weight */
    color: #fff; /* White text color */
}

/* Heading 2 Styling */
.login-form h2 {
    line-height: 40px; /* Line height for text */
    margin-bottom: 5px; /* Small margin bottom */
    font-size: 30px; /* Large font size */
    font-weight: 500; /* Medium font weight */
    color: #4e4e4e; /* Dark gray text color */
    text-align: center; /* Center align text */
}

/* Main Content and Image Section */
.login-form .main {
    position: relative; /* Relative positioning for children */
    display: flex; /* Flexbox layout */
    margin: 30px 0; /* Margin top and bottom */
}

/* Content Section */
.content {
    flex-basis: 50%; /* Take up 50% width */
    padding: 3em 3em; /* Padding inside */
    background: #fff; /* White background */
    box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.1); /* Box shadow effect */
    border-top-left-radius: 8px; /* Rounded corners */
    border-bottom-left-radius: 8px; /* Rounded corners */
}

/* Image Section */
.form-img {
    flex-basis: 50%; /* Take up 50% width */
    background: #dfe5ea; /* Light gray background */
    background-size: cover; /* Cover background size */
    padding: 40px; /* Padding inside */
    border-top-right-radius: 8px; /* Rounded corners */
    border-bottom-right-radius: 8px; /* Rounded corners */
    align-items: center; /* Center align content */
    display: grid; /* Grid layout */
}

.form-img img {
    max-width: 100%; /* Maximum width for images */
}

/* Paragraph Styling */
p {
    color: #666; /* Medium gray text color */
    font-size: 16px; /* Font size */
    line-height: 25px; /* Line height */
    opacity: 0.6; /* Opacity level */
    text-align: center; /* Center align text */
}

/* Button and Input Styling */
.btn,
button,
input {
    border-radius: 35px; /* Large border radius */
}

.btn:hover,
button:hover {
    color: #4e34b6; /* Purple text color on hover */
    transition: 0.5s ease; /* Smooth transition */
}

/* Anchor (link) Styling */
a {
    text-decoration: none; /* Remove underline */
}

/* Form Styling */
.login-form form {
    margin: 30px 0; /* Margin top and bottom */
}

.login-form input {
    outline: none; /* Remove outline */
    margin-bottom: 15px; /* Margin bottom */
    font-stretch: 16px; /* Font stretch */
    color: #999; /* Light gray text color */
    text-align: left; /* Left align text */
    padding: 14px 20px; /* Padding inside */
    width: 100%; /* Full width */
    display: inline-block; /* Inline block display */
    box-sizing: border-box; /* Border-box sizing */
    border: none; /* No border */
    background: #f7fafc; /* Light gray background */
    transition: 0.3 ease; /* Smooth transition */
}

.login-form input:focus {
    background: transparent; /* Transparent background on focus */
    border: 1px solid #4e34b6; /* Purple border on focus */
}

.login-form button {
    font-size: 18px; /* Font size */
    color: #fff; /* White text color */
    width: 100%; /* Full width */
    background: #ff7829c2; /* Semi-transparent orange background */
    border: none; /* No border */
    padding: 14px 15px; /* Padding inside */
    font-weight: 600; /* Semi-bold font weight */
    transition: 0.3s ease; /* Smooth transition */
}

/* Account Link Styling */
p.account a {
    color: #4e34b6; /* Purple text color */
}

p.account a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Media Query for Smaller Screens */
@media (max-width: 736px) {
    .login-form .main {
        flex-direction: column; /* Stack elements vertically */
    }
    .login-form form {
        margin-top: 30px; /* Margin top */
        margin-bottom: 10px; /* Margin bottom */
    }
    .form-img {
        border-radius: 0; /* Remove border radius */
        border-bottom-left-radius: 8px; /* Rounded corners */
        border-bottom-right-radius: 8px; /* Rounded corners */
        order: 2; /* Change order to move image below */
    }
    .content {
        order: 1; /* Change order to move content above */
        border-radius: 0; /* Remove border radius */
        border-top-left-radius: 8px; /* Rounded corners */
        border-bottom-right-radius: 8px; /* Rounded corners */
    }
}