/* First Layer ---------- */



.bgWhite {
    background: #FBFCFF;
    width: 100%;
    max-width: 3000px;
    margin: auto;
}

.bgGrey1 {
    background: #f3f4f6;
    width: 100%;
    max-width: 3000px;
    margin: auto;
}

.bgGrey2 {
    background: #eaeaea;
    width: 100%;
    max-width: 3000px;
    margin: auto;
}

.bgBlue {
    background: #041C32;
    width: 100%;
    max-width: 3000px;
    margin: auto;
}

.bgWhiteGrey1 {
    background: #FBFCFF;
    background-size: 100vw;
    width: 100%;
    max-width: 3000px;
    margin: auto;
}

@media screen and (max-width: 560px) {
    .bgWhiteGrey1 {
        background: #f3f4f6;
    }
}



/* Second Layer (will change to 90% in media view) ---------- */

.container-directory {
    width: 75%;
    display: flex;
    justify-content: flex-start;
    margin: auto;
    padding: 10px 0 0;
}

.container-hero {
    /* Set padding individually in inline style. Referece: 140px 0 240px */
    width: 75%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container-2column {
    /* This is for section with left & right elements. Eg. accordion */
    /* This container is used a lot */
    width: 75%;
    display: flex;
    justify-content: center;
    margin: auto;
}

.container-row {
    width: 75%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: auto;
}

.container-box {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}



/* Third Layer ---------- */

.flex-c {
    display: flex;
    align-items: center;
}

.flex-s {
    display: flex;
    align-items: flex-start;
}

.column-small {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 50px 0 0;
}

.column-large {
    width: 60%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 50px 0;
}

.column-large-kid {
    width: 100%;
    padding: 40px 0;
    position: relative;
}

.form-width {
    width: 100%;
    margin: auto;
}

@media screen and (max-width: 1128px) {
    .container-directory,
    .container-hero,
    .container-row {
        width: 90%;
    }

    .container-2column {
        width: 90%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .column-small {
        width: 100%;
    }

    .column-large {
        width: 100%;
    }

    .column-large-kid {
        padding: 30px 0;
    }
}


@media screen and (max-width: 560px) {
    .container-2column {
        width: 90%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .container-box {
        align-items: flex-start;
    }
}



/* Decoration ---------- */



.clickable-div {
    width: 100%;
    border-radius: 12px;
    cursor: pointer;
    transition: 0.6s ease;
    /* Add any other desired styles for the clickable div */
}

.clickable-div:hover {
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 560px) {
    .clickable-div:hover {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.line-solid {
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin: auto;
}

.divider {
    color: #777;
    font-size: 0.85rem;
    margin: 25px 0 30px;
    width: 100%;
    display: flex;
    align-items: center;
}

.divider::before {
    flex: 1;
    content: '';
    padding: 0.25px;
    background-color: #ccc;
    margin-right: 10px;
}

.divider::after {
    flex: 1;
    content: '';
    padding: 0.25px;
    background-color: #ccc;
    margin-left: 10px;
}



/* Misc ---------- */

.display-none {
    display: none;
}