* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f4f7f5;
}

.login-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.login-left {
    width: 40%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;
}

.login-box {
    width: 75%;
    max-width: 450px;
}

.logo-box {
    margin-bottom: 50px;

    color: #13375b;
}

.logo-box h3 {
    color: #159447;
    font-weight: bold;
}

.welcome {
    margin-bottom: 35px;
}

.welcome h2 {
    color: #172b4d;
    font-weight: 700;
}

.welcome p {
    color: #6d798a;
}

.form-control {
    height: 52px;
}

.btn-login {
    width: 100%;
    height: 52px;

    background: #269b42;
    border: 0;
    border-radius: 6px;

    color: white;
    font-weight: bold;
}

.btn-login:hover {
    background: #188635;
}

.login-divider {
    text-align: center;

    margin: 35px 0 20px;

    color: #8a94a5;
}

.btn-microsoft {
    width: 100%;
    height: 50px;

    background: white;

    border:
        1px solid #d9dde4;

    border-radius: 6px;

    color: #41516b;
}

.copyright {
    margin-top: 60px;

    text-align: center;

    font-size: 12px;

    color: #929bad;
}

.login-right {
    width: 60%;

    position: relative;

    background:
        url("../images/login-bg.jpg") center center / cover no-repeat;

    color: white;
}

.overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, .10),
            rgba(1, 47, 25, .85));
}

.hero-content {
    position: absolute;

    left: 8%;
    right: 8%;
    bottom: 8%;

    z-index: 2;
}

.hero-content h1 {
    font-size: 44px;
    font-weight: 700;
}

.hero-content>p {
    max-width: 650px;

    font-size: 18px;
}

.features {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;

    margin-top: 40px;
}

.features h4 {
    font-size: 17px;
}

.features p {
    font-size: 13px;

    color:
        rgba(255, 255, 255, .85);
}

@media (max-width: 900px) {

    .login-left {
        width: 100%;
    }

    .login-right {
        display: none;
    }

}