.login-card {
    background: rgb(255 255 255 / 0%);
    margin-top: 1.5rem;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.login-card .card-image {
    background-color: rgb(255 255 255 / 100%);
}

.login-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    -webkit-transform: translateX(80px);
    -moz-transform: translateX(80px);
    -o-transform: translateX(80px);
    -ms-transform: translateX(80px);
    transform: translateX(80px);
}

.login-card:focus {
    -webkit-box-shadow: 0 0 0 3px #22223a, 0 0 0 4px #38beea;
    box-shadow: 0 0 0 3px #22223a, 0 0 0 5px #38beea;
    outline: none;
    border-radius: 2px;
    z-index: 1090;
    position: relative;
}

.login-card h2 {
    font-size: 1.25rem;
    margin: 0;
}

.login-card .card-image img {
    width: 100%;
    height: auto;
    padding: 50px;
}

.login-card .card-body p {
    width: 100%;
    display: block;
    opacity: 0;
    position: relative;
    top: 3px;
    transition: opacity 0.3s, top 0.3s ease 0s;
}

.login-card .card-body p:hover,
.login-card .card-body p:focus {
    text-decoration: none;
    opacity: 1;
    top: 0;
}

.login-card .card-body p:focus {
    box-shadow: inset 0 0 0 2px #38beea;
    outline: none;
    border-radius: 2px;
    z-index: 1090;
    position: relative;
}

.login-card .card-image {
    position: relative;
}

.login-card .card-footer a {
    width: 100%;
    display: block;
    opacity: 0;
    position: relative;
    top: 3px;
    transition: opacity 0.3s, top 0.3s ease 0s;
}

.login-card .card-footer a:hover,
.login-card .card-footer a:focus {
    text-decoration: none;
    opacity: 1;
    top: 0;
}

.login-card .card-footer a:focus {
    box-shadow: inset 0 0 0 2px #38beea;
    outline: none;
    border-radius: 2px;
    z-index: 1090;
    position: relative;
}

.login-card .card-image:after {
    content: "";
    width: 0%;
    height: 8px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: width 0.5s;
}

.login-card .gov-image:after {
    background: #BF9030;
}

.login-card .business-image:after {
    background: #8E8E8E;
}

.login-card .ngo-image:after {
    background: #26AFC6;
}

.login-card .individual-image:after {
    background: #702E93;
}

.login-card .card-image:hover:after {
    width: 100%;
}

.login-card:hover .card-footer .icon,
.login-card:focus .card-footer .icon {
    color: #38beea;
}

.login-card:hover .card-footer a,
.login-card:focus .card-footer a {
    opacity: 1;
    top: 0;
}

.login-card:hover .card-body p,
.login-card:focus .card-body p {
    opacity: 1;
    top: 0;
}

.login-card:hover .card-image:after,
.login-card:focus .card-image:after {
    width: 100%;
}

.page-header.section-dark .content-center,
.page-header.section-dark .category-absolute {
    z-index: 2;
    margin-top: 80px;
    margin-bottom: 80px;
}


/* ************************************************************************ */

.custom-login-button {
    width: 100%;
}

.custom-login {
    width: 50%;
}

.des-gov {
    width: 50%;
}

.login-btns .custom-login:hover {
    -webkit-transform: translateX(15px);
    -moz-transform: translateX(15px);
    -o-transform: translateX(15px);
    -ms-transform: translateX(15px);
    transform: translateX(15px);
}

.login-btns .des-gov {
    opacity: 0;
    position: relative;
    top: 3px;
    transition: opacity 0.6s, top 0.4s ease 0s;
}

.custom-login:hover+.des-gov,
.custom-login:focus+.des-gov {
    opacity: 1;
    top: 0;
}

@media only screen and (max-width: 575px) {
    .login-btns .des-gov {
        display: none;
        opacity: 0;
        position: relative;
        top: 3px;
        transition: opacity 0.6s, top 0.4s ease 0s;
    }
    .custom-login:hover+.des-gov,
    .custom-login:focus+.des-gov {
        opacity: 1;
        display: none;
        opacity: 0;
        top: 0;
    }
}