/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body */
body {
    font-family: 'Arial', sans-serif;
    background-color: #2c2c2c; /* Dark background */
    color: white; /* White text for contrast */
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures that the body takes at least the full height of the viewport */
}

/* Header */
header {
    background-color: #4CAF50; /* green shade for header */
    color: white;
    padding: 20px 0;
    position: sticky; /* Make the header sticky */
    top: 0; /* Stick the header to the top */
    z-index: 1000; /* Ensure it stays on top of other content */
    text-align: center;
    width: 100%; /* Ensure the header takes up full width */
}

header .logo img {
    width: 300px;        /* Set the width to 300px */
    height: auto;        /* Maintain the aspect ratio of the image */
    margin-bottom: 10px; /* Add space below the image */
}

header h1 {
    font-size: 2em;
    margin-top: 10px;
    font-weight: 600;
    color: #FFFFFF; /* White color for the header text */
}


/* Navigation Bar */
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    text-align: center;
    background-color: #4CAF50; /* Dark background */
}

nav ul li {
    display: inline-block;
    margin: 0 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1em;
}

nav ul li a:hover {
    color: #111; /* Green hover effect */
}

/* Footer */
/* Footer */
footer {
    background-color: #4CAF50; /* green footer */
    color: white;
    text-align: center;
    padding: 15px 0;
    margin-top: auto; /* Pushes the footer to the bottom */
    width: 100%;
}


/* Form Container Styles */
.form-container {
    width: 100%;
    max-width: 450px;
    margin: 50px auto;
    padding: 30px;
    background-color: #333; /* Dark background for form */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

/* Form Header */
.form-container h2 {
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 20px;
    color: #4CAF50; /* Green color for form header */
}

/* Form Input Styles */
.form-container input {
    width: 100%;
    padding: 12px;
    margin: 10px 0;
    border: 1px solid #555;
    border-radius: 5px;
    font-size: 1em;
    background-color: #444; /* Dark input background */
    color: white; /* White text */
}

.form-container input:focus {
    border-color: #4CAF50;
    outline: none;
}

/* Form Button */
.form-container button {
    width: 100%;
    padding: 14px;
    background-color: #4CAF50;
    border: none;
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.form-container button:hover {
    background-color: #45a049;
}

/* Form Error Messages */
.form-container p {
    color: red;
    text-align: center;
    font-weight: bold;
}

.form-container a {
    color: #4CAF50;
    text-decoration: none;
}

.form-container a:hover {
    text-decoration: underline;
}

/* Links */
a {
    color: #4CAF50;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Style the password input field and eye icon */
.password-container {
    position: relative;
    width: 100%;
}

.password-container input[type="password"] {
    width: 100%;
    padding-right: 30px; /* Adjust space for the icon inside */
    padding: 10px;
    box-sizing: border-box;
}

.password-container .eye-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 18px; /* Adjust icon size */
}


/* Tabs (Navigation) Style */
.tabs ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    background-color: #333; /* Dark tab background */
    border-bottom: 2px solid #555;
}

.tabs ul li {
    margin: 0 20px;
}

.tabs ul li a {
    color: white;
    font-size: 1.1em;
    padding: 15px 25px;
    display: block;
    font-weight: bold;
    transition: background-color 0.3s;
}

.tabs ul li a:hover {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}

/* Active Tab */
.tabs ul li a.active {
    background-color: #4CAF50;
    color: white;
}

/* Table Styles */
table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
    background-color: #333; /* Dark background */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

table th, table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #555;
}

table th {
    background-color: #444; /* Dark header for table */
    font-weight: bold;
    color: white;
}

table tr:hover {
    background-color: #555; /* Slightly lighter dark on hover */
}

table td {
    color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    header h1 {
        font-size: 1.8em;
    }

    .tabs ul {
        flex-direction: column;
        align-items: center;
    }

    .tabs ul li {
        margin-bottom: 10px;
    }

    .form-container {
        width: 90%;
    }

    table {
        width: 100%;
    }
}

/* Loan Info Section */
.loan-info {
    margin-top: 20px;
    text-align: center;
}

.loan-limit {
    font-size: 2em;
    font-weight: bold;
}

.loan-limit.red {
    color: red;
}

.loan-limit.green {
    color: green;
}

/* Card Style */
.card {
    background-color: #444; /* Dark background */
    padding: 20px;
    border: 1px solid #555;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.card h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #4CAF50; /* Green color for card heading */
}

.card p {
    font-size: 1.1em;
    font-weight: bold;
    color: #ddd; /* Lighter text for card content */
}

/* Form Button */
button[type="submit"] {
    width: 100%;
    padding: 14px;
    background-color: #4CAF50;
    border: none;
    color: white;
    font-weight: bold;
    font-size: 1.1em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 20px;
}

button[type="submit"]:hover {
    background-color: #45a049;
}

/* Responsive Design for Mobile */
@media (max-width: 768px) {
    .loan-info {
        grid-template-columns: 1fr; /* Stack the cards in a single column on small screens */
    }

    .card {
        margin: 10px 0; /* Add margin between stacked cards */
    }

    button[type="submit"] {
        padding: 12px; /* Adjust button padding for mobile */
    }
}

/* Notification Styles */
.notification {
    padding: 15px;
    margin-bottom: 20px; /* Adjusted margin for spacing above the container */
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    display: block; /* Make sure it's visible */
    width: 100%;
}

.notification.success {
    background-color: #4CAF50;
    color: white;
}

.notification.error {
    background-color: #f44336;
    color: white;
}


/* General Section Styles */
.section {
    padding: 60px 20px;
    text-align: center;
}

.bg-light {
    background-color: #f4f4f4;
}

.container {
    max-width: 960px; /* Reduce width to avoid full-screen span */
    margin: 0 auto;
}

/* Hero Section */
.hero {
    background-color: #4CAF50;
    padding: 60px 20px;
    text-align: center;
    color: white;
    background-size: cover;
    background-position: center;
}

.hero-content h1 {
    font-size: 3em;
    margin-bottom: 20px;
    color: #fff; /* White font color */
}

.hero-content p {
    font-size: 2em;
    margin-bottom: 30px;
    color: #ffeb3b; /* Yellow font color */
}

.cta-button {
    padding: 15px 30px;
    background-color: #111;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    text-decoration: none;
}

.cta-button:hover {
    background-color: #45a049;
}

/* About Section */
#about p {
    font-size: 1.1em;
    color: #ddd;
}

.about-content img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* How it Works Section */
#how-it-works {
    background-color: #f4f4f4;
    padding: 60px 20px; /* Adjusted padding */
}

#how-it-works h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
    color: #28a745; /* Green color for headings */
}

.steps {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    flex-wrap: wrap; /* To handle overflow on smaller screens */
}

.step {
    width: 30%; /* Adjust width for three columns */
    background-color: #444;
    padding: 30px; /* Increased padding for more space */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    margin-bottom: 30px; /* Adds space between steps */
}

.step img, .step i {
    width: 60px; /* Adjust width of icons and images */
    height: 60px;
    margin-bottom: 15px;
}

.step h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #ff5722; /* Orange font color for step titles */
}

.step p {
    font-size: 1em;
    color: #ddd; /* Lighter color for description text */
}

@media (max-width: 768px) {
    /* Stack elements vertically on mobile screens */
    .steps {
        flex-direction: column;
        align-items: center;
    }

    .step {
        width: 80%; /* Stack the steps, making them take 80% of the width */
        margin-bottom: 20px; /* Space between stacked steps */
    }

    .step i {
        font-size: 60px; /* Increase the icon size on mobile for better visibility */
    }
}

@media (max-width: 1024px) {
    /* For tablet and small screen sizes, make adjustments */
    .steps {
        flex-direction: column;
        align-items: center;
    }

    .step {
        width: 80%;
    }

    .step i {
        font-size: 60px; /* Make icons slightly bigger for tablets */
    }
}

/* Testimonials Section */
.testimonials {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.testimonial {
    width: 30%;
    background-color: #444;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.testimonial img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.testimonial p {
    font-size: 1.1em;
    font-style: italic;
    color: #81c784; /* Light Green font color */
}

.name {
    text-align: right;
    font-weight: bold;
    color: #ffeb3b; /* Yellow font color */
}

/* FAQs Section */
.faq {
    margin-top: 20px;
    background-color: #444;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    color: white;
}

.faq h3 {
    color: #ed820e; /* apricot orange font color */
}

/* Pricing Section */
#pricing {
    background-color: #f4f4f4;
}

.pricing-cards {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.pricing-plan {
    background-color: #444;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 45%;
}

.pricing-plan h3 {
    font-size: 1.5em;
    color: #f44336; /* Red font color */
}

.pricing-plan .price {
    font-size: 2em;
    font-weight: bold;
    color: #4CAF50; /* Green font color */
}

.pricing-plan a {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 25px;
    background-color: #111;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.pricing-plan a:hover {
    background-color: #45a049;
}

/* Contact Us Section */
.contact-details {
    background-color: #444;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
}

.contact-details p {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: #ffeb3b; /* Yellow font color */
}

.contact-details img {
    max-width: 100%;
    border-radius: 8px;
    margin-top: 20px;
}

/* Mobile responsiveness: Stack sections vertically */
@media (max-width: 768px) {
    /* Stack elements in How it Works */
    .steps {
        flex-direction: column;
        align-items: center;
    }

    .step {
        width: 80%;
        margin-bottom: 20px;
    }

    /* Stack testimonials */
    .testimonials {
        flex-direction: column;
        align-items: center;
    }

    .testimonial {
        width: 80%;
        margin-bottom: 20px;
    }

    /* Stack pricing plans */
    .pricing-cards {
        flex-direction: column;
        align-items: center;
    }

    .pricing-plan {
        width: 80%;
        margin-bottom: 20px;
    }

    /* Contact Us Section */
    .contact-details {
        width: 90%;
    }
}

/* Tablet or small screen view (up to 1024px) */
@media (max-width: 1024px) {
    /* Modify layout for tablets: use a little more space */
    .steps {
        flex-direction: column;
        align-items: center;
    }

    .step {
        width: 80%; /* Slightly wider on tablets */
        margin-bottom: 20px;
    }

    /* Testimonials Section */
    .testimonials {
        flex-direction: column;
        align-items: center;
    }

    .testimonial {
        width: 80%;
        margin-bottom: 20px;
    }

    /* Pricing Plans Section */
    .pricing-cards {
        flex-direction: column;
        align-items: center;
    }

    .pricing-plan {
        width: 80%;
        margin-bottom: 20px;
    }

    /* Contact Us Section */
    .contact-details {
        width: 100%;
    }
}