body {
    margin: 0;
    padding: 0;
}
.bodyGradient {
    background: linear-gradient(to bottom, #96cfee, #f8f8f8);
    height: 100vh;
}

/* ======== Font Styles ======== */
/* Poppins Fonts */
.poppins-extralight {
    font-family: "Poppins", sans-serif; /* Changed fallback to sans-serif */
    font-weight: 200 !important;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
}

/* Sarabun Fonts */
.sarabun-medium {
    font-family: "Sarabun", sans-serif; /* Changed fallback to sans-serif */
    font-weight: 500;
}

.sarabun-semibold {
    font-family: "Sarabun", sans-serif;
    font-weight: 600;
}

.sarabun-bold {
    font-family: "Sarabun", sans-serif;
    font-weight: 700;
}

/* Global Styles */
* {
    font-family: 'Poppins', sans-serif;
}

/* Font Size Variants */
.font-xs {
    font-size: 0.75rem; /* 12px */
}

.font-sm {
    font-size: 0.875rem; /* 14px */
}

.font-md {
    font-size: 1rem; /* 16px */
}

.font-lg {
    font-size: 1.125rem; /* 18px */
}

.font-xl {
    font-size: 1.25rem; /* 20px */
}

.font-2xl {
    font-size: 1.5rem; /* 24px */
}

.font-3xl {
    font-size: 1.875rem; /* 30px */
}

.font-4xl {
    font-size: 2.25rem; /* 36px */
}

.font-5xl {
    font-size: 3rem; /* 48px */
}

.font-6xl {
    font-size: 4rem; /* 64px */
}

/*Rounded Corners*/
.rounded-corner-18 {
    border-radius: 18px;
}
.rounded-corner-15 {
    border-radius: 15px;
}
.rounded-corner-10 {
    border-radius: 10px;
}
/* ============ Padding =============*/

/* ======== Login Form =======*/
.formGradient {
    border: solid 1px #c7cad7;
    background: linear-gradient(to bottom, #bfedfb, #fff);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.loginMark {
    background: #eff5f7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 12px;
    display: inline-block;
}
.loginTitle {
    color: #000204;
}
    .loginTitle span {
        color: #8b8e98;
        font-size: 13px;
        font-weight:400;
        display:block;
        margin-top:13px;
    }

/* General input field styles */
.inputLogin {
    background-color: #eff3f6;
    border: 1px solid #dfe2e4;
    border-radius: 10px;
    padding: 10px 40px; /* Space for the icon */
    font-size: 14px;
    color: #333;
    width: 100%; /* Adjust width as needed */
    box-sizing: border-box; /* Ensures padding is included in width */
}

    /* Email input field with background icon */
    .inputLogin.email {
        background-image: url('../images/icons/email.png');
        background-repeat: no-repeat;
        background-position: 10px center; /* Position the icon */
        background-size: 16px 16px; /* Resize icon */
    }

    /* Password input field with background icon */
    .inputLogin.password {
        background-image: url('../images/icons/lock.png');
        background-repeat: no-repeat;
        background-position: 10px center; /* Position the icon */
        background-size: 16px 16px; /* Resize icon */
    }

/* Login button styles */
/* Container for the form actions */
.form-actions {
    margin-top: 20px; /* Add space above the section */
    position: relative; /* To position the anchor within the container */
}

/* "Forgot Password?" link styles */
.forgot-password {
    color: #33343c; /* Link color */
    text-decoration: none;
    font-size: 14px;
    font-weight: 500; /* Slightly bold for visibility */
    position: absolute; /* Position relative to the container */
    right: 0; /* Align to the right */
    top: 0; /* Align to the top of the container */
}

    .forgot-password:hover {
        text-decoration: underline;
        color: #161621; /* Darker color on hover */
    }

/* Login button (reuse previous style) */
.login-btn {
    background: linear-gradient(to bottom, #33343c, #161621);
    border: none;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    padding: 10px 20px;
    font-size: 15px;
    cursor: pointer;
    display: inline-block;
    text-transform: uppercase;
    font-weight: 400;
    transition: background 0.3s ease, transform 0.2s ease;
    margin-top: 10px; /* Space above the button */
}

    .login-btn:hover {
        background: linear-gradient(to bottom, #44454f, #1a1a26);
        /*transform: scale(1.05);*/
    }