:root {
    --steps_blue: #008080;
    --approve_green: #268738;
    --plan_orange: #C75000;
    --ccs_purple: #74368E;
}

.margin-all-0per {
    margin: 0%;
}

.mar-b-2per {
    margin-top: 0%;
    margin-bottom: 2.5%;
}

.mar-b-3per {
    margin-top: 0%;
    margin-bottom: 3%;
}

.pad-top-5per {
    padding-top: 5%;
}

.pad-top-2per {
    padding-top: 2%;
}

.mar_top-4per {
    margin-top: 4% !important;
}

.underline a {
    text-decoration: underline !important;
}

.pad-break {
    padding-top: 2.2%;
}

ul ,li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dd-list_item {
    padding: 3.5% 0% 3.5% 0%;
    border-bottom: 1px solid #d7d7d7;
}

.dd-list_item:last-child {
    border-bottom: none;
}

section.contact-us_header {
    background: url('../images/contact-us_desk.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 100% 50%;
    background-color: #ffffff;
    padding-top: 2.5%;
    padding-bottom: 19%;
}

.notice {
    padding: 4% 0 4% 0;
}

a.link {
    text-decoration: none;
}

.date_time {
    font-variant-numeric: oldstyle-nums;
}

.black_text {
    color: #333333 !important;
}

.options {
    display: flex;
    justify-content: space-around;
    justify-items: center;
    column-gap: 3%;
    margin-top: 4.5%;
    margin-bottom: 4.5%;
}

.steps {
    border: 2px solid var(--steps_blue);
}

.steps_text {
    color: var(--steps_blue);
    fill: var(--steps_blue);
}
.approve {
    border: 2px solid var(--approve_green);
}

.approve_text {
    color: var(--approve_green);
    fill: var(--approve_green);
}

.plan {
    border: 2px solid var(--plan_orange);
}

.plan_text {
    color: var(--plan_orange);
    fill: var(--plan_orange);
}

.ccs {
    border: 2px solid var(--ccs_purple);
}

.ccs_text {
    color: var(--ccs_purple);
    fill: var(--ccs_purple);
}

.blue {
    border: 2px solid #3D4B90;
}

.blue_text {
    color: #3D4B90;
    fill: #3D4B90;
}

.us_contact-section {
    margin-top: 5%;
}

.contact_holder-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10%;
}

.contact_site {
    width: 26%;
    border-bottom: 2px solid #D7D7D7;
    padding: 2% 0%;
    margin-bottom: 4%;
}

.contact_site p {
    margin: 0%;
}

.our_offices-section {
    margin-top: 10%
}

.office_holder-container {
    display: flex;
    flex-wrap: wrap;
    column-gap: 6%;
    margin-bottom: 5%;
    margin-top: 4%;
}

.office {
    width: 47%;
    padding: 2% 0 2% 2%;
    margin-bottom: 4%;
    border-radius: 1rem;
}

.office_addr {
    width: 90%;
}

.gmap {
    text-decoration: none;
}

.learn_more {
    margin-top: 3%
}

.footer_section_bottom-margin {
    margin-bottom: 10%;
}

/********** MEDIA QUERIES **********/

@media only screen and (min-width:320px) and (max-width:1024px) {
    section.contact-us_header {
        background: url('../images/about-us_mobile.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 100% 50%;
        background-color: #ffffff;
        padding-top: 2.5%;
        padding-bottom: 72%;
    }
    .hero_subhead {
        width: 50%;
    }
    .contact_holder-container {
        column-gap: 20%;
    }
    .contact_site {
        width: 40%;
    }
    .office_subtext {
        display: none;
    }
    .office_holder-container {
        flex-direction: column;
    }
    .office {
        width: auto;
        margin-bottom: 5%;
        padding: 4% 4% 4% 4%;
    
    }
}

/********** MEDIA QUERIES (Apple Only) **********/

@media only screen and (min-device-width:320px) and (max-device-width:1024px) {
    section.contact-us_header {
        background: url('../images/about-us_mobile.png');
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: 100% 50%;
        background-color: #ffffff;
        padding-top: 2.5%;
        padding-bottom: 72%;
    }
    .hero_subhead {
        width: 50%;
    }
    .contact_holder-container {
        column-gap: 20%;
    }
    .contact_site {
        width: 40%;
    }
    .office_subtext {
        display: none;
    }
    .office_holder-container {
        flex-direction: column;
    }
    .office {
        width: auto;
        margin-bottom: 5%;
        padding: 4% 4% 4% 4%;
    
    }
}