/* style.css */

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc; /* Tailwind's slate-50 */
    color: #334155; /* Tailwind's slate-700 */
}
.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 6rem;
    padding-right: 6rem;
}

/* Custom Colors based on new requirements and previous screenshots */
/* New Header Background Color */
.bg-custom-dark-blue {
    background-color: #040D33; /* Specific dark blue requested */
}
/* Primary Green for buttons and accents (from Screenshot 19-54-34.png) */
.bg-fundbook-green {
    background-color: #00E676; /* Vibrant green from the screenshot */
}
.text-fundbook-green {
    color: #00E676;
}
.hover\:bg-fundbook-green-dark:hover {
    background-color: #00C853; /* Slightly darker green for hover */
}
.focus\:ring-fundbook-green:focus {
    --tw-ring-color: #00E676;
}
/* Text color for navigation on dark header */
.text-header-light {
    color: #ffffff; /* White text for header links */
}
.hover\:text-header-light-hover:hover {
    color: #e0e0e0; /* Slightly lighter white for hover */
}
/* Hero section and other content backgrounds (from Screenshot 19-54-34.png) */
.bg-light-gray-blue {
    background-color: #F8F9FA; /* Very light gray-blue, almost white */
}
/* Dark text color for main content (from Screenshot 19-54-34.png) */
.text-dark-text {
    color: #000000; /* Black for text */
}
/* Sub-text color (from Screenshot 19-54-34.png) */
.text-gray-subtle {
    color: #6B7280; /* Gray-500 for descriptions */
}

/* Custom styles for icons (using inline SVG for simplicity and no external dependencies) */
.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    fill: currentColor;
}

/* Animations */
@keyframes fadeInMoveUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fadeInMoveUp 0.8s ease-out forwards;
}
.delay-200 { animation-delay: 0.2s; }
.delay-400 { animation-delay: 0.4s; }

/* Specific styles for contact and business loan forms */
.form-input {
    display: block;
    width: 100%;
    padding: 0.75rem 0; /* py-3 px-0 */
    border: none;
    border-bottom: 2px solid #CBD5E0; /* bottom border only */
    border-radius: 0; /* no rounded corners */
    background: transparent;
    box-shadow: none;
    font-size: 1rem; /* text-base */
    color: #2D3748; /* gray-900 */
    transition: border-bottom-color 0.15s ease-in-out;
}

.form-input:focus {
    outline: none;
    border-bottom-color: #00E676; /* fundbook green */
    box-shadow: none;
}

.form-label {
    display: block;
    font-size: 0.875rem; /* text-sm */
    font-weight: 500; /* font-medium */
    color: #000000; /* black */
    margin-bottom: 0.5rem; /* mb-2 */
}

.form-input::placeholder {
    color: #9CA3AF; /* light gray */
    font-size: 1rem; /* larger text */
}

/* Styles for the loan information section (grid style) */
.loan-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive grid columns */
    gap: 1.5rem; /* Gap between grid items */
    background-color: #ffffff; /* White background for the section */
    padding: 1.5rem; /* Padding around the grid */
    border-radius: 0.75rem; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    margin-bottom: 2rem; /* Space below the section */
}

.loan-info-item {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    color: #4A5568; /* Darker gray text */
    font-size: 0.95rem;
}

.loan-info-item svg,
.loan-info-item i,
.loan-info-item span {
    color: #3B82F6; /* A shade of blue for icons */
    margin-right: 0.75rem;
    flex-shrink: 0; /* Prevent icon from shrinking */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loan-info-item .text-content {
    flex-grow: 1;
}
.loan-info-item .title {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* Semi-bold for titles */
    color: #000000; /* Dark text for white background */
}
.loan-info-item .description {
    font-size: 0.875rem; /* text-sm */
    color: #6B7280; /* Medium gray for descriptions */
}

/* Success message styles */
.success-message {
    background-color: #d4edda; /* Light green background */
    color: #155724; /* Dark green text */
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 500;
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.success-message.show {
    display: block;
    opacity: 1;
}
/* Partners Carousel Animation */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.animate-scroll {
    animation: scroll 30s linear infinite;
    width: 200%; /* Double width to accommodate duplicates */
}

.animate-scroll:hover {
    animation-play-state: paused;
}
/* Mobile-specific improvements - only affects mobile, desktop unchanged */
@media (max-width: 767px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* All sections mobile padding */
    section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Hero section mobile */
    #home h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
    }
    
    #home p {
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* All section headings mobile */
    section h2 {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    /* Grid improvements mobile */
    .grid {
        gap: 1rem !important;
    }
    
    /* Achievements section mobile - maintain desktop styling but adjust for mobile */
    .grid.grid-cols-1.md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* Achievement items mobile styling - keep consistent with desktop */
    .text-center .fas {
        font-size: 2rem !important;
    }
    
    .text-center h3 {
        font-size: 1.25rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .text-center p {
        font-size: 0.875rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .text-center p:last-child {
        font-size: 0.75rem !important;
    }
    
    /* Mobile carousel - override all previous settings */
    .animate-scroll {
        animation: scroll 15s linear infinite !important;
        width: 200% !important;
        display: flex !important;
        flex-shrink: 0 !important;
    }
    
    /* Reset spacing for mobile */
    .animate-scroll.space-x-6 {
        gap: 1rem !important;
    }
    
    .animate-scroll.space-x-6 > * + * {
        margin-left: 0 !important;
    }
    
    /* Ensure flex items don't shrink */
    .animate-scroll > div {
        flex-shrink: 0 !important;
        min-width: auto !important;
    }
    
    /* How it Works section mobile - simple vertical layout */
    #how-it-works-fundbook .relative {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        background: none !important;
        max-width: 100% !important;
        gap: 2rem !important;
    }
    
    /* Transform desktop steps to mobile vertical */
    #how-it-works-fundbook .absolute {
        position: static !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 !important;
        transform: none !important;
    }
    
    /* Hide central hub */
    #how-it-works-fundbook .absolute.left-1\/2 {
        display: none !important;
    }
    
    /* Style step cards with relative positioning and larger text */
    #how-it-works-fundbook .absolute > div {
        margin: 0 !important;
        max-width: none !important;
        text-align: center !important;
        position: relative !important;
        padding: 1.5rem !important;
    }
    
    /* Increase text size in How it Works mobile */
    #how-it-works-fundbook .absolute h3 {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    #how-it-works-fundbook .absolute p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    /* Force step numbers to top-left corner with injected numbers */
    #how-it-works-fundbook .absolute .absolute {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transform: translate(-50%, -50%) !important;
        width: 2rem !important;
        height: 2rem !important;
        background: #00E676 !important;
        color: white !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: bold !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        border: 2px solid white !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
        z-index: 10 !important;
        text-align: center !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Inject numbers using CSS content with perfect centering - adjusted for correct sequence */
    #how-it-works-fundbook .absolute:nth-child(2) .absolute::before {
        content: '1' !important;
        color: white !important;
        font-weight: bold !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    #how-it-works-fundbook .absolute:nth-child(3) .absolute::before {
        content: '2' !important;
        color: white !important;
        font-weight: bold !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    #how-it-works-fundbook .absolute:nth-child(4) .absolute::before {
        content: '3' !important;
        color: white !important;
        font-weight: bold !important;
        font-size: 1rem !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }
    
    /* Hide spacer */
    #how-it-works-fundbook .h-\[450px\] {
        display: none !important;
    }
    
    /* Remove top padding from Trusted Partners Section */
    .trusted-partners-section {
        padding-top: 0 !important;
    }
    
    /* Remove bottom padding from Loan Application Section */
    .loan-application-section {
        padding-bottom: 0 !important;
    }
    
    /* Remove bottom margin from loan title */
    .loan-title {
        margin-bottom: 0 !important;
    }
    
    /* Remove bottom margin from form labels */
    .form-label {
        margin-bottom: 0 !important;
    }
    
    /* Add padding between info grid and form */
    .grid.grid-cols-2.md\:grid-cols-3.gap-1 {
        margin-bottom: 1rem !important;
        gap: 0.25rem !important;
    }
    
    /* Increase padding between form rows */
    .grid.grid-cols-2.md\:grid-cols-3.gap-6 {
        gap: 2rem !important;
    }
    
    /* Personal loan grid mobile - reduce padding and margins only */
    .loan-info-item {
        padding: 0.5rem !important;
    }
    
    /* Reduce gap between grid rows for personal loan section */
    .grid.grid-cols-2.md\:grid-cols-3.gap-6 {
        gap: 0.5rem !important;
    }
    
    /* EMI Calculator mobile grid layout */
    .grid.grid-cols-1.md\:grid-cols-2.gap-4 {
        grid-template-columns: 1fr 1fr !important;
        gap: 1rem !important;
    }
}

/* Upload Page Specific Styles */
.upload-btn {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
}

.upload-btn-active {
    background-color: #00E676;
    color: white;
}

.upload-btn-active:hover {
    background-color: #00C853;
}

.upload-btn-disabled {
    background-color: #9CA3AF;
    color: white;
    cursor: not-allowed;
}

.status-error {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #DC2626;
}

.status-success {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #16A34A;
}

.status-info {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #2563EB;
}

.status-warning {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #D97706;
}

.status-default {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: #374151;
}

.file-table-row {
    border-bottom: 1px solid #E5E7EB;
    transition: background-color 0.15s ease-in-out;
}

.file-table-row:hover {
    background-color: #F9FAFB;
}

.file-remove-btn {
    color: #DC2626;
    font-size: 1.25rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
}

.file-remove-btn:hover {
    color: #991B1B;
    background-color: #FEF2F2;
}

.clear-all-btn {
    font-size: 0.75rem;
    color: #DC2626;
    padding: 0.25rem 0.5rem;
    border: 1px solid #FCA5A5;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
}

.clear-all-btn:hover {
    color: #991B1B;
    background-color: #FEF2F2;
}

/* Slider Styling */
.slider {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: #E5E7EB;
    border-radius: 4px;
    outline: none;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #00E676;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #00E676;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Standardized Button Styles */
.btn-primary {
    background: white;
    color: #1e3a8a;
    font-weight: 600;
    padding: 0.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    transform: translateY(0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #1e3a8a;
    text-decoration: none;
}

.btn-primary:hover {
    background: #f9fafb;
    color: #1e40af;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
    border-color: #1e40af;
}

.btn-primary i {
    font-size: 0.875rem;
}

.btn-primary .arrow {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.btn-primary:hover .arrow {
    transform: translateX(4px);
}

/* Mobile responsive button */
@media (max-width: 767px) {
    .btn-primary {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .btn-primary i {
        font-size: 0.75rem;
    }
}

.upload-more-btn {
    background-color: #2563EB;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease-in-out;
    display: block;
    width: 100%;
    text-align: center;
}

.upload-more-btn:hover {
    background-color: #1D4ED8;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.success-message-text {
    color: #16A34A;
    font-weight: 500;
    margin-bottom: 0.75rem;
}
/* File Table Column Width Fix */
.file-table {
    table-layout: fixed;
    width: 100%;
}

.file-table th:nth-child(1),
.file-table td:nth-child(1) {
    width: 60%;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-table th:nth-child(2),
.file-table td:nth-child(2) {
    width: 25%;
    min-width: 60px;
}

.file-table th:nth-child(3),
.file-table td:nth-child(3) {
    width: 15%;
    min-width: 40px;
}