/* Responsive Styles for Login Page */

/* Large Screens (up to 1199px) */
@media (max-width: 1199px) {
    /* Pattern Positioning */
    .login-page-section {
        /* AT Pattern */
        .pattern-at {
            top: 5%;
            left: 0;
        }

        /* Star Bottom Pattern */
        .pattern-star-bottom {
            bottom: -8%;
            left: 5%;
        }

        /* Diamond Pattern */
        .pattern-diamond {
            bottom: 0;
            right: 7%;
        }

        /* Star Top Pattern */
        .pattern-star-top {
            top: 7%;
            right: 2%;
        }
    }

    /* Login Left Section Typography */
    .login-left-section .login-left-content h5 {
        font-size: 18px;
    }
}

/* Medium Screens (up to 991px) */
@media (max-width: 991px) {
    .login-page-section {
        /* Pattern Sizing */
        .pattern-people,
        .pattern-at,
        .pattern-star-bottom,
        .pattern-diamond,
        .pattern-star-top {
            width: 45px;
        }

        /* Pattern Visibility */
        .pattern-global,
        .pattern-people {
            display: none;
        }

        /* Pattern Positioning Adjustments */
        .pattern-at {
            top: 20%;
        }

        .pattern-star-bottom {
            bottom: 4%;
        }

        .pattern-star-top {
            top: 8%;
        }
    }
}

/* Tablet Screens (up to 760px) */
@media (max-width: 760px) {
    .field-container {
        padding: 0 40px;
        gap: 10px 0;
    }
}

/* Mobile Screens (up to 576px) */
@media (max-width: 576px) {
    
   .login-form-title h3{
    text-align: center !important;
   }
       .forgot-page .login-form-title p {
        width: 400px;
        text-align: center !important;
        padding: 10px 40px;
    }
    .email-sec{
        width: 420px !important;
        text-align: center !important;
    }
    .login-form-title img {
        margin-bottom: 10px !important;
    }
                
        .reset-page .login-form-title p {
        width: 410px;
        text-align: center !important;
        padding: 0px 20px;
    }
    .login-page-section {
        /* Login Form Section */
        .login-form-section {
            width: 100vw !important;
        }

        /* Login Left Section */
        .login-left-section {
            display: none;

            .login-intro-img {
                height: 320px !important;
            }

            .login-left-content {
                h5 {
                    font-size: 16px;
                    line-height: 28px;
                    font-weight: 500;
                }

                p {
                    display: none;
                }
            }
        }

        /* Form Elements */
        .login-form-section {
            .contact-sec-or {
                padding: 0 !important;
            }

            .alert {
                text-align: center;
                margin: 10px 40px 30px;
            }

            .login-form-title {
                h2 {
                    font-size: 30px !important;
                }

                img {
                    width: 115px;
                }
            }
        }
    }

    /* Input Fields */
    #login-email,
    #login-password {
        width: 100%;
        margin: 0;
    }

    /* Checkbox */
    #sign-in .checkbox-item {
        margin-top: 30px;
    }

    /* Error Handling */
    .error {
        padding-left: 5px;
    }
}