@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-BlackItalic.eot');
    src: local('Celias Black Italic'), local('Celias-BlackItalic'),
        url('../fonts/Celias-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-BlackItalic.woff2') format('woff2'),
        url('../fonts/Celias-BlackItalic.woff') format('woff'),
        url('../fonts/Celias-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-Italic.eot');
    src: local('Celias Italic'), local('Celias-Italic'),
        url('../fonts/Celias-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-Italic.woff2') format('woff2'),
        url('../fonts/Celias-Italic.woff') format('woff'),
        url('../fonts/Celias-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-Hairline.eot');
    src: local('Celias Hairline'), local('Celias-Hairline'),
        url('../fonts/Celias-Hairline.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-Hairline.woff2') format('woff2'),
        url('../fonts/Celias-Hairline.woff') format('woff'),
        url('../fonts/Celias-Hairline.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-HairlineItalic.eot');
    src: local('Celias Hairline Italic'), local('Celias-HairlineItalic'),
        url('../fonts/Celias-HairlineItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-HairlineItalic.woff2') format('woff2'),
        url('../fonts/Celias-HairlineItalic.woff') format('woff'),
        url('../fonts/Celias-HairlineItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-LightItalic.eot');
    src: local('Celias Light Italic'), local('Celias-LightItalic'),
        url('../fonts/Celias-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-LightItalic.woff2') format('woff2'),
        url('../fonts/Celias-LightItalic.woff') format('woff'),
        url('../fonts/Celias-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-Thin.eot');
    src: local('Celias Thin'), local('Celias-Thin'),
        url('../fonts/Celias-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-Thin.woff2') format('woff2'),
        url('../fonts/Celias-Thin.woff') format('woff'),
        url('../fonts/Celias-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-Bold.eot');
    src: local('Celias Bold'), local('Celias-Bold'),
        url('../fonts/Celias-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-Bold.woff2') format('woff2'),
        url('../fonts/Celias-Bold.woff') format('woff'),
        url('../fonts/Celias-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-BoldItalic.eot');
    src: local('Celias Bold Italic'), local('Celias-BoldItalic'),
        url('../fonts/Celias-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-BoldItalic.woff2') format('woff2'),
        url('../fonts/Celias-BoldItalic.woff') format('woff'),
        url('../fonts/Celias-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-Light.eot');
    src: local('Celias Light'), local('Celias-Light'),
        url('../fonts/Celias-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-Light.woff2') format('woff2'),
        url('../fonts/Celias-Light.woff') format('woff'),
        url('../fonts/Celias-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-Black.eot');
    src: local('Celias Black'), local('Celias-Black'),
        url('../fonts/Celias-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-Black.woff2') format('woff2'),
        url('../fonts/Celias-Black.woff') format('woff'),
        url('../fonts/Celias-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-ThinItalic.eot');
    src: local('Celias Thin Italic'), local('Celias-ThinItalic'),
        url('../fonts/Celias-ThinItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-ThinItalic.woff2') format('woff2'),
        url('../fonts/Celias-ThinItalic.woff') format('woff'),
        url('../fonts/Celias-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-MediumItalic.eot');
    src: local('Celias Medium Italic'), local('Celias-MediumItalic'),
        url('../fonts/Celias-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-MediumItalic.woff2') format('woff2'),
        url('../fonts/Celias-MediumItalic.woff') format('woff'),
        url('../fonts/Celias-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias.eot');
    src: local('Celias'),
        url('../fonts/Celias.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias.woff2') format('woff2'),
        url('../fonts/Celias.woff') format('woff'),
        url('../fonts/Celias.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Celias';
    src: url('../fonts/Celias-Medium.eot');
    src: local('Celias Medium'), local('Celias-Medium'),
        url('../fonts/Celias-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Celias-Medium.woff2') format('woff2'),
        url('../fonts/Celias-Medium.woff') format('woff'),
        url('../fonts/Celias-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: 'Celias';
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #F2F2F2;
}

img {
    max-width: 100%;
}

.main-box {
    background-color: #fff;
    width: 550px;
    /* height: 550px; */
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    border-radius: 5px;
    box-shadow: 0 0 30px #E8E8E8;
}

.logo {
    display: block;
    margin: 0 auto;
    height: fit-content;
    padding-bottom: 40px;
}

.admin-login {
    font-weight: 500;
    text-decoration: underline;
    font-size: 25px;
    letter-spacing: 0.5px;
    text-underline-offset: 2px;
}

.form {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

label {
    font-size: 16px;
    padding: 20px 0 10px;
}

input[type=text],
input[type=email],
input[type=password] {
    width: 100%;
    padding: 15px 20px;
    border-radius: 10px;
    display: inline-block;
    border: 2px solid #DDDDDD;
    box-sizing: border-box;
    font-size: 16px;
}

.rember-me {
    padding: 20px 0 0;
    display: flex;
    justify-content: space-between;
}

.checkbox-div {
    display: flex;
    align-items: center;
    gap: 5px;
    color: grey;
    letter-spacing: 0.5px;
}

input[type=checkbox] {
    box-sizing: border-box;
    padding: 0;
    width: 35px;
    height: 22px;
    color: grey;
}

.forgot-pass {
    text-decoration: none;
    font-size: 16px;
    color: grey;
    letter-spacing: 0.5px;
    transition: all 0.3s;
}

.forgot-pass:hover {
    color: #5F63F2;
}

.btn {
    margin: 0 auto;
    padding-top: 50px;
}

.submit {
    width: 300px;
    background-color: black;
    color: white;
    border: 2px solid black;
    border-radius: 5px;
    font-size: 20px;
    padding: 12px 0;
    cursor: pointer;
    transition: all 0.3s;
}

.submit:hover {
    background-color: white;
    color: black;
}