.ati-landing-index {
    width:100vw;
    height:100vh;
}

.ati-landing-landing {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;
}

.ati-landing-landing-container {
    width: 65%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    padding: 3rem;
    border-radius: 0.5rem;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
    gap: 3rem;
}

.ati-landing-landing-welcome {
    display:flex;
    flex-direction: column;
    gap:1rem;

}

.ati-landing-landing-welcome-message {
    display: flex;
    flex-direction: column;
    gap:1rem;
}

    .ati-landing-landing-welcome-message h4 {
        font-size: 6.5rem;
        font-weight: 900;
        margin: 0;
        color: #2b345e;
    }

    .ati-landing-landing-welcome-message h6 {
       font-size:2rem;
       font-weight:400;
       margin:0;
    }

    .ati-landing-landing-welcome-message p {
        font-size: 0.875rem;
        font-weight: 400;
        margin: 0;
    }

.ati-landing-landing-welcome-logo {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

.ati-vl-large {
    border-left: 0.05rem solid #797979;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.ati-landing-landing-welcome-logo h6 {
    font-weight: 500;
    margin: 0;
    text-align: left; /* center the whole h6 */
    font-size: 0.875rem;
    display:flex;
    flex-direction:column;
    justify-content: center;
}

    .ati-landing-landing-welcome-logo h6 span {
        display: block; /* makes each word on its own line */
        font-weight: 300;
        margin: 0;
        text-align: left; /* center each word individually */
        font-size: 0.875rem;
    }


.ati-landing-apps-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    background-color: white;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    padding: 1rem;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    width:100%;
}

.ati-landing-apps-card-item {
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    background-color: white;
    width: 100%; /* fill grid column */
    height:130px; /* fixed height for proportion control */
    box-sizing: border-box;
    transition: background-color 0.2s ease;
    text-decoration: none; /* remove underline from <a> */
    color: inherit; /* inherit text color */
}

    .ati-landing-apps-card-item:hover {
        background-color: #e7e7e7;
    }

.icon-container {
    flex: 2; /* 2/3 of card height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-container {
    flex: 1; /* 1/3 of card height */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 0.5rem;
}

.icon-container i {
    font-size: 3rem;
    color: #2b345e;
}

.text-container p {
    font-weight: 300;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.2;
    color: #2b345e;
}


.ati-landing-landing-background {
    position: absolute;
    z-index: -1;
    bottom: -1px;
    right: -250px;
    opacity: 0.06;
}

.ati-landing-maintenance {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.ati-landing-maintenance-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}
    .ati-landing-maintenance-message i {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 6rem;
        color: #2b345e;
    }

    .ati-landing-maintenance-message h4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #2b345e;
    }


.ati-landing-maintenance-logo {   
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:1rem;
}