.login-container {
    /* min-height: 100vh; */
}

.login-card {
    background-color: #fff;
        border-radius: 1rem;
        padding: 2rem;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
        z-index: 1;
        margin: auto;
}

/* Mobile responsive adjustments for login card */
@media (max-width: 768px) {
    .login-card {
        padding: 1.5rem;
        margin: 1rem 0;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 1rem;
        margin: 0.5rem 0;
    }
}

.sign-in-btn {
    background-color: #3a7af3;
    border: none;
    padding: 12px;
    font-size: 16px;
    font-weight: 700;
}

.sign-in-btn:hover {
    background-color: #2f68d8;
}

.text-color {
    color: #012152;
}

.form-control {
    padding: 12px;
    border-radius: 6px;
}

.welcome-text {
    color: #012152;
    font-weight: 600 !important;
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.sub-text {
    color: #6c757d;
    margin-bottom: 30px;
}

.logo {
    margin-bottom: 40px;
}

/* .logo img {
    height: 50px;
} */

.green-text {
    color: #4caf50;
}

/* Decorative circles */
.circle-top {
    position: absolute;
    top: 0;
    right: 0;

    z-index: 0;
}

.circle-bottom {
    position: absolute;
    bottom: 0;
    left: 100;

    z-index: 0;
}

.content-container {
    position: relative;
    z-index: 1;
}

.bg-image {
    background-image: url('../images/login/login-bg-image.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    height: 100%;
    /* width: 100%;
    */
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    .bg-image {
        min-height: 100vh;
        padding: 1rem 0;
        overflow-y: auto;
    }
    
    /* Fix header text cutoff on mobile */
    .fs-60 {
        font-size: 2.5rem !important;
        line-height: 1.2;
        margin-top: 2rem;
    }
    
    /* Adjust welcome section spacing */
    .col-12.col-lg-6 {
        margin-bottom: 2rem !important;
        padding-top: 1rem;
    }
    
    /* Ensure proper scrolling */
    .min-vh-100 {
        min-height: auto !important;
        height: auto;
    }
    
    /* Adjust leaf positioning for mobile - ensure they're visible */
    .leaf-top-right {
        width: 50px;
        top: 10px;
        right: 10px;
    }
    
    .leaf-bottom-left {
        width: 100px;
        bottom: 20px; /* Increased from 10px to ensure visibility */
        left: 20px;
        position: fixed; /* Change to fixed to ensure it stays visible */
        z-index: 10; /* Ensure it's above other content */
    }
    
    /* Mobile form adjustments */
    .form-label {
        font-size: 16px !important;
    }
    
    .emailinput,
    .passwordinput {
        height: 50px !important;
    }
    
    /* Mobile button adjustments */
    .btn {
        height: 50px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .bg-image {
        padding: 0.5rem 0;
    }
    
    .fs-60 {
        font-size: 2rem !important;
        margin-top: 1.5rem;
    }
    
    .fs-17 {
        font-size: 14px !important;
    }
    
    .fs-36 {
        font-size: 1.75rem !important;
    }
    
    .fs-18 {
        font-size: 16px !important;
    }
    
    .login-card {
        padding: 1rem;
    }
    
    /* Adjust leaf sizes for very small screens - ensure visibility */
    .leaf-top-right {
        width: 40px;
        top: 5px;
        right: 5px;
    }
    
    .leaf-bottom-left {
        width: 80px;
        bottom: 15px; /* Adjusted for better visibility */
        left: 15px;
        position: fixed;
        z-index: 10;
    }
    
    /* Ensure proper spacing on very small screens */
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .px-3 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

@media (max-width: 375px) {
    .fs-60 {
        font-size: 1.75rem !important;
    }
    
    .fs-17 {
        font-size: 13px !important;
    }
    
    .fs-36 {
        font-size: 1.5rem !important;
    }
    
    .login-card {
        padding: 0.75rem;
    }
    
    /* Further reduce leaf sizes but ensure visibility */
    .leaf-top-right {
        width: 35px;
        top: 5px;
        right: 5px;
    }
    
    .leaf-bottom-left {
        width: 70px;
        bottom: 10px; /* Keep it visible */
        left: 10px;
        position: fixed;
        z-index: 10;
    }
}

/* Ensure proper scrolling on all mobile devices */
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden;
        overflow-y: auto;
    }
    
    .bg-image {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix any horizontal overflow */
    .container {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    .col-12, .col-lg-6, .col-lg-5 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Additional mobile optimizations */
@media (max-width: 768px) {
    /* Ensure proper spacing for mobile */
    .welcome-title {
        margin-bottom: 1rem;
        word-wrap: break-word;
        hyphens: auto;
    }
    
    .welcome-description {
        line-height: 1.5;
        margin-bottom: 1.5rem;
    }
    
    .logo-img {
        margin-bottom: 1.5rem;
    }
    
    /* Improve mobile form layout */
    .form-group {
        margin-bottom: 1rem;
    }
    
    /* Ensure buttons are properly sized for mobile */
    .btn-color-blue {
        min-height: 48px;
        font-size: 16px;
        border-radius: 8px;
    }
    
    /* Improve mobile spacing */
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .mb-5 {
        margin-bottom: 1.5rem !important;
    }
    
    .mt-3 {
        margin-top: 1rem !important;
    }
    
    /* Fix mobile padding */
    .py-3 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    /* Further optimize for small screens */
    .welcome-title {
        font-size: 1.75rem !important;
        line-height: 1.3;
        margin-bottom: 0.75rem;
    }
    
    .welcome-description {
        font-size: 13px !important;
        line-height: 1.4;
        margin-bottom: 1rem;
    }
    
    .logo-img {
        margin-bottom: 1rem;
        height: 35px !important;
    }
    
    /* Optimize form spacing */
    .form-group {
        margin-bottom: 0.75rem;
    }
    
    /* Ensure proper button sizing */
    .btn-color-blue {
        min-height: 44px;
        font-size: 15px;
    }
}

/* Fix for very small screens */
@media (max-width: 320px) {
    .welcome-title {
        font-size: 1.5rem !important;
    }
    
    .welcome-description {
        font-size: 12px !important;
    }
    
    .login-card {
        padding: 0.5rem;
    }
    
    .container {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    .px-3 {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* Ensure proper touch targets on mobile */
@media (max-width: 768px) {
    .btn, 
    .form-control,
    .form-select {
        min-height: 44px;
    }
    
    /* Improve mobile form field spacing */
    .form-control {
        padding: 12px 16px;
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Better mobile alert styling */
    .alert {
        padding: 0.75rem;
        margin-bottom: 1rem;
        border-radius: 8px;
    }
    
    .btn-close {
        padding: 0.5rem;
        margin: -0.5rem -0.5rem -0.5rem auto;
    }
}

/* Additional leaf positioning fixes for mobile */
@media (max-width: 768px) {
    /* Ensure leaf images are always visible and properly positioned */
    .leaf-top-right,
    .leaf-bottom-left {
        position: fixed;
        z-index: 10;
        pointer-events: none; /* Prevent interference with form interactions */
    }
    
    /* Specific positioning for different screen sizes */
    .leaf-bottom-left {
        bottom: 120px; /* Positioned above the form area for better visual balance */
        left: 15px;
        width: 90px; /* Slightly smaller for better proportion */
        opacity: 0.8; /* Make it more subtle */
    }
    
    .leaf-top-right {
        top: 20px;
        right: 20px;
        width: 50px;
    }
}

@media (max-width: 480px) {
    .leaf-bottom-left {
        display: none; /* Hide bottom left leaf on small devices */
    }
    
    .leaf-top-right {
        top: 15px;
        right: 15px;
        width: 40px;
    }
}

@media (max-width: 375px) {
    .leaf-bottom-left {
        display: none; /* Keep hidden on very small screens */
    }
    
    .leaf-top-right {
        top: 10px;
        right: 10px;
        width: 35px;
    }
}

@media (max-width: 320px) {
    .leaf-bottom-left {
        display: none; /* Keep hidden on smallest screens */
    }
    
    .leaf-top-right {
        top: 8px;
        right: 8px;
        width: 30px;
    }
}

/* Ensure proper spacing at bottom for mobile to accommodate leaf image */
@media (max-width: 768px) {
    .bg-image {
        padding-bottom: 120px; /* Add bottom padding to ensure leaf is visible */
    }
    
    .login-card {
        margin-bottom: 80px; /* Ensure card doesn't overlap with leaf */
    }
}