@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* Apply DM Sans globally to every single element on your website */
* {
    box-sizing: border-box;  
    font-family: 'DM Sans', sans-serif;
}

body {
    background: linear-gradient(135deg, #1e56cd 0%, #f1f1f1 60%);
    background-attachment: fixed;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

.div-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-left: 200px;
    padding-right: 200px;
    margin-bottom: 100px;
}

    .div-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 50px 0px ;
    }

        .form-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 400px;               
            background-color: #ffffff;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
            border-radius: 20px;
        }

            .hero {
                width: 100%;
                border-radius: 20px; 
                border-bottom-left-radius: 40px;
                border-bottom-right-radius: 40px;
            }

            .hero-image {
                width: 100%;
                border-radius: inherit;
                border-bottom-left-radius: inherit;
                border-bottom-right-radius: inherit;
                object-fit: cover;
                object-position: center;
            }

            .form-border {
                display: flex;
                flex-direction: column;
                justify-content: center;
                padding: 40px;
            }

            .header-box {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                width: 100%;
                color: #1e56cd; 
            }

                .header-text {
                    font-size: 20px;
                }

                .login {
                    font-size: 40px;
                    font-weight: bold;
                    color: #000000;
                }

                .div-field  {
                    display: flex;
                    flex-direction: column;
                    margin: 40px 0px;
                    margin-bottom: 0px;
                    gap: 20px;
                }
            
                    .field-box  {
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        width: 100%; 
                    }

                        .input-wrapper {
                            position: relative;
                            width: 100%;
                        }

                            .input-form {
                                width: inherit;
                                padding: 10px 20px;
                                font-size: 16px;
                                background-color: #f0f0f0;
                                border: solid 2px #1e56cd;
                                border-radius: 20px;
                            }

                            .input-wrapper .input-form {
                                width: 100%;
                                padding-right: 45px;  /* leave room for the eye icon */
                                box-sizing: border-box;
                            }

                            .eye-icon {
                                position: absolute;
                                right: 12px;
                                top: 50%;
                                transform: translateY(-50%);
                                cursor: pointer;
                                color: #808080;
                            }

                            .eye-icon:hover {
                                color: #1e56cd;
                            }

                        .submit-btn {
                            width: inherit;
                            height: 100%;
                            padding: 10px 20px;
                            background-color: #1e56cd;
                            color: #ffffff;
                            font-size: 16px;
                            border: none;
                            border-radius: 20px;
                            cursor: pointer;
                            transition: transform 0.3s ease, background-color 0.3s ease;
                        }

                        .submit-btn:hover {
                            transform: scale(1.1);
                            background-color: #052c82;
                        }



/*____________________________________________________________________________________________________________________________________*/

/* Mobile Styles */
@media only screen and (max-width: 873px) {

body {
    font-size: 12px;  
}

.div-container {
    padding-left: 20px;
    padding-right: 20px;
}

                 .form-box {
                    width: 320px;                
                }

                    .login {
                        font-size: 32px;
                        font-weight: bold;
                        color: #000000;
                    }

                    .header-text {
                        font-size: 16px;
                    }

                    .div-field {
                        margin: 40px 0px;
                        margin-bottom: 0px;
                        gap: 10px;
                   }

                     .input-form {
                            font-size: 12px;
                        }

                    .submit-btn {
                            font-size: 12px;
                        }

}

/*____________________________________________________________________________________________________________________________________*/
/* Tablet Styles */
@media only screen and (min-width: 874px) and (max-width: 1280px) {

body {
    font-size: 14px;  
}

.div-container {
    padding-left: 40px;
    padding-right: 40px;
}

}