:root {
    --blue: #037DBA;
    --orange: #E25303;
    --link: #D04905;
    --red: #FF6347;
    --grey: #D7D7D7;
    --text: #343434;
    --white: #FFFFFF;
    --black: #000000;
    --yellow: #FFC857;
    --green: #6FBF4A;
    --banner-gradient-background: linear-gradient(0deg, rgba(0, 71, 179, 0.6), rgba(0, 71, 179, 0.6)), linear-gradient(92.23deg, #F0D800 28.91%, #00C2FF 84.49%);
    --full-gradiant-background: linear-gradient(0deg, rgba(0, 71, 178, 0.60) 0%, rgba(0, 71, 178, 0.60) 100%), linear-gradient(92deg, #F0D800 -0.88%, #00C2FF 84.49%);
    --full-gradient-background-vertical: linear-gradient(180deg, rgba(0, 71, 178, 0.60) 0%,rgba(0, 71, 178, 0.60) 100%), linear-gradient(0deg, #F0D800 -0.88%, #00C2FF 84.49%);
}

@font-face {
    font-family: "Albert Sans";
    src: url("/fonts/albert-sans.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Overpass";
    src: url("/fonts/overpass.woff2") format("woff2");
    font-display: swap;
}

body {
    color: var(--text);
    font-size: 15px;
    line-height: 18px;
    font-family: 'Albert Sans', sans-serif;
    margin: 0;
    word-break: break-word;
}

:focus-visible {
    outline: none;
}

h1, .h1 {
    font-size: 50px;
    line-height: normal;
    font-family: 'Overpass', sans-serif;
    font-weight: 900;
}

@media (max-width: 600px) { /* smaller heading for mobile devices */
    h1 {
        font-size: 35px;
    }
}

h2, .h2 {
    margin-top: 0;
    font-size: 26px;
    line-height: normal;
    font-family: 'Overpass', sans-serif;
    font-weight: 700;
    text-wrap: balance; /* not widely support yet, but if it is it's nice to have */
}

h3, .h3 {
    margin-top: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: normal;
}

h4, .h4 {
    font-size: 16px;
    line-height: normal;
}

p {
    margin-top: 0;
}

.small-text {
    font-size: 12px;
}

.text-center {
    text-align: center;
}

@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center;
    }
}

.donotdisplay {
    display: none;
}

address {
    font-style: normal;
}

button {
    border: none;
    cursor: pointer;
    appearance: none;
    background-color: inherit;
}

svg.icon path, svg.icon rect {
    fill: var(--orange);
    stroke: var(--orange);
}

button:focus-visible {
    outline: none;
}

button:not(.icon), a.button, input[type="submit"], label.button {
    display: block;
    width: max-content;
    background-color: var(--orange);
    border-radius: 4px;
    text-transform: uppercase;
    color: var(--white);
    font-weight: 800;
    text-align: center;
    padding: 10px 20px;
    text-decoration: none;
    cursor: pointer;
    font-size: 15px;
    font-family: "Albert Sans";
}

    button:not(.icon):hover, a.button:hover, input[type="submit"]:hover, label.button:hover {
        background-color: var(--blue);
        color: var(--white)
    }

button.button-center, a.button-center {
    margin: 0 auto;
}

input[type="submit"] {
    border: none;
}

main a, #widgets a {
    color: var(--orange);
    text-decoration: underline;
    display: inline;
}

    main a:hover, #widgets a:hover {
        color: var(--blue);
    }

#widgets .button,
#widgets .button:hover {
  text-decoration: none;
  color: var(--white);
}

.icon {
    padding: 0;
}

.iconAndTextLink svg {
    vertical-align: middle;
    padding-right: 8px;
}

a.iconAndTextLink {
    color: var(--text);
    text-decoration: none;
}

    a.iconAndTextLink.bold {
        font-weight: 800;
    }

    a.iconAndTextLink.uppercase {
        text-transform: uppercase;
    }

@media (hover: hover) { /* if the brower supports real hovering; prevents "sticky" hovers on touch devices */
    button:hover:not(.icon), a.button:hover {
        background-color: var(--blue);
        color: var(--white);
    }

        button:hover svg path, button:hover svg rect, a.button:hover svg path, a.button:hover svg rect, a.iconAndTextLink:hover svg path, a.iconAndTextLink:hover svg rect {
            fill: var(--blue);
            stroke: var(--blue);
        }
}

.see-all-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .see-all-wrapper h2 {
        margin-bottom: 0;
    }


summary::-webkit-details-marker { /* list-style: none; for Safari */
    display: none;
}

summary > p {
    margin-block: 0;
}

details[open] summary svg {
    transform: rotate(90deg);
}

details > *:not(summary) {
    margin-top: 20px;
    margin-inline: 30px;
    padding-inline: 40px;
    padding-block: 20px;
    background-color: #f5f5f5;
}

@media (max-width: 525px) {
    details > *:not(summary) {
        margin-inline: 0px;
        padding-inline: 30px;
        padding-block: 20px;
    }
}

dialog {
    border: none;
    width: fit-content;
    height: fit-content;
    width: 920px;
    padding: 0;
    margin-bottom: auto; /* overrides value set on main > * */
    box-sizing: border-box;
}

    dialog::backdrop {
        background: hsla(0, 0%, 0%, .75);
    }

    dialog .dialog-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 48px 60px 42px;
        border-bottom: 8px solid;
        border-image: linear-gradient(92.23deg, rgba(93, 129, 110, 0.9) 15%, rgba(76, 127, 128, 0.9) 30%, rgba(59, 126, 147, 0.9) 45%, rgba(36, 124, 170, 0.9) 60%, rgba(0, 121, 209, 0.9) 75%);
        border-image-slice: 1;
    }

    dialog .logo-container {
        width: 240px;
        height: 75px;
        background-image: url('/img/logo.webp');
        background-size: contain;
        background-repeat: no-repeat;
    }

    dialog form {
        max-width: 620px;
        margin: 0 auto 30px;
    }

        dialog form textarea {
            height: 151px;
            width: 100%;
            box-sizing: border-box;
        }

        dialog form input[type="submit"] {
            margin: 0 auto;
            min-width: 202px;
        }

.dialog-description {
    padding: 20px 60px 10px;
    text-align: center;
}

    .dialog-description h2 {
        font-size: 50px;
        font-weight: 900;
        margin-bottom: 10px;
    }

[data-alias="pageName"] {
    display: none;
}

dialog#dlgContactUs .h2 {
    margin-top: 10px;
}
dialog#teamMemberModal {
    width: 1160px;
    padding: 0;
}
dialog#dlgContactUs form,
dialog#application-dialog form {
    padding: 0;
    max-width: 100%;
}
dialog#dlgContactUs form .field label {
    margin-bottom: 5px;
}
dialog#dlgContactUs form textarea {
    width: 100%;
}
dialog#dlgContactUs .dialog-modal-body,
dialog#application-dialog .dialog-modal-body {
    padding: 20px 60px;
}

dialog#cta-download-and-mailing-dialog {
    width: 960px;
}

dialog .dialog-body {
    padding: 50px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    dialog .dialog-body button {
        margin-top: 20px;
    }
dialog#teamMemberModal .dialog-body {
    flex-direction: row;
    padding: 30px;
}

dialog#teamMemberModal #lightboxNavNext, dialog#teamMemberModal #lightboxNavPrev {
    min-width: 50px;
}

@media (max-width: 768px) {
    dialog#teamMemberModal #lightboxNavNext, dialog#teamMemberModal #lightboxNavPrev {
        min-width: 40px;
    }

    dialog#teamMemberModal .dialog-body {
        padding: 30px 10px;
    }
}

dialog#cta-download-and-mailing-dialog .dialog-body > div {
    margin-bottom: 30px;
}

dialog#dlgContactUs form .group,
dialog#application-dialog form .group {
    margin-bottom: 15px;
    display: flex;
    column-gap: 15px;
    row-gap: 15px;
    flex-wrap: wrap;
}

dialog#dlgContactUs form .group .field,
dialog#application-dialog form .group .field {
    width: calc(100% / 2 - 8px);
}



dialog#dlgContactUs form .group .field input,
dialog#application-dialog form .group .field input {
    width: 100%;
}

dialog#dlgContactUs form .group .field:last-child,
dialog#application-dialog form .group .field:last-child {
    width: 100%;
}

dialog#application-dialog form .group div[data-alias="attachYourResume"],
dialog#application-dialog form .group div[data-alias="message"],
dialog#application-dialog form .group div[data-alias="message"] textarea {
    width: 100%;
}
dialog#application-dialog form input[type="submit"] {
    margin-top: 0 !important;
}

dialog#dlgContactUs form input[type="submit"],
dialog#application-dialog form input[type="submit"] {
    margin-top: 15px;
}

dialog.search-modal {
    width: 692px;
}

    dialog.search-modal .search-close-btn {
        margin-left: auto;
        margin-right: 40px;
        display: block;
        margin-top: 20px;
    }

@media (max-width: 800px) {
    dialog.search-modal .search-close-btn {
        margin-right: 15px;
    }
}

@media (max-width: 1200px) {
    dialog {
        width: 100%;
    }

    .dialog-description {
        padding: 30px 40px;
    }
}

@media (max-width: 768px) {

    dialog .dialog-header {
        padding: 30px;
    }

    dialog#dlgContactUs .dialog-header {
        padding: 20px 0;
    }

    dialog .logo-container {
        height: 50px;
    }

    dialog .closeDialog {
        transform: scale(0.7);
    }

    .dialog-description {
        padding: 30px 20px;
    }
    dialog#dlgContactUs .dialog-modal-body,
    dialog#application-dialog .dialog-modal-body {
        padding: 20px;
    }
}

/* form styles */
input:not([type="submit"]), select, textarea {
    padding: 11px 12px;
    border: 1px solid #222;
    outline: none;
    font-family: 'Albert Sans', sans-serif;
}

input::placeholder {
    color: #8C8C8C;
}


form .checkbox-field {
    display: flex;
}

    form .checkbox-field input[type="checkbox"] {
        margin-right: 10px;
    }

form .file-upload-field {
    display: flex;
    align-items: center;
    column-gap: 20px;
}

    form .file-upload-field input[type="file"] {
        flex-grow: 1;
    }

        form .file-upload-field input[type="file"]::file-selector-button {
            display: none;
        }

        /* Ensure the file name is displayed after file selection */
        form .file-upload-field input[type="file"]:not(:empty) + label {
            display: none;
        }

        form .file-upload-field input[type="file"]:not(:empty)::before {
            content: attr(data-file-name);
        }

p img[style="float: left;"], h3 img[style="float: left;"] {
    padding: 0 15px 15px 0;
    clear: left;
}

p img[style="float: right;"] {
    padding: 0 0 15px 15px;
    clear: right;
}

.icon-card__img {
    width: 100%;
    float: left;
}