html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.no-decoration {
    text-decoration: none;
}

.banner-logo {
    display: block;
    margin: 0 auto;
}

h1 {
    text-align: center;
}

/* 
menu


Homepage Styles 



*/
.hero {
    margin: 0;
    padding: 40px 40px 150px;
    background-color: #c0d4dd;
    display: flex;
    justify-content: center;
    font-size: 1.05em;
}

#welcome-text {
    text-align: left;
}

#welcome-img-div {
    margin: auto 0;
    text-align: center;
}

/* .site-welcome {
    width: 50%;
    max-width: 90%;
    font-size: 1.05em;
    margin: auto auto;
} */

#resources-wrapper {
    background-color: lightgrey;
}

.ptr {
    display: flex;
    justify-content: center;
}

.services-body {
    margin-bottom: 50px;
}

#ripples-caption {
    padding: 0 50px;
}

#services-txt {
    margin: 40px;
}

.homepage-text {
    font-size: 1.35rem;
}

.buttons {
    margin: auto auto;
    padding: 20px;
    /* width: fit-content; */
    width: 60%;
    border-style: solid;
    border-color: #336699;
    border-radius: 20px;
    background-color: #336699;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 1.2em;
}

#resources-txt {
    margin: 5%;
}

#key-image-div {
    margin: auto 0;
    align-items: center;
}

.divider {
    width: 80%;
    margin: 50px auto 0;
    border-bottom: solid black 1px;
}

.clients {
    margin: 0 auto 10%;
    width: 80%;
    text-align: center;
}

/* For client logo images */
.client-logo {
    margin: 0 5%;
    min-width: 20%;
    width: 30%;
}


/* 



Services Styles 



*/
.services-page {
    background-color: white;
}

.package {
    display: flex;
    margin: auto auto;
    margin-bottom: 40px;
    padding: 20px;
    max-width: 1200px;
    width: 80%;
    border: 2px solid black;
    justify-content: space-between;
    border-radius: 15px;   
    background-color: #c0d4dd;
}

.package-img-div {
    margin: auto 0;
}

.package-img {
    object-fit: cover;
    width: 100%;
    border-radius: 15px;
}

#pq-services-image {
    max-height: 250px;
}
/* .text-button-separation {
    
} */

.package-text {
    min-width: 280px;
    width: 53%;
    font-size: 1.1em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.package-button {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    margin: auto auto;
    padding: 10px;
    width: 40%;
    min-width: 112px;
    height: 1em;
    background-color: black;
    border-radius: 20px;
    text-align: center;
}

.package-button a {
    color: white;
    text-decoration: none;
}

/* Bigger than 1024px laptop */
@media (min-width: 1050px) {
    .package-text p, .package-text ul {
        font-size: 1.15em;
    }
}

@media (min-width: 800px) {
    .package-img-div {
        max-width: 45%;
    }
}

@media (max-width: 799px) {
    .package {
        flex-wrap: wrap-reverse;
        justify-content: center;
        padding: 2%;
        width: 85%;
    }

    .package-text {
        min-width: 85%;
    }

    .package-button {
        margin-bottom: 2px;
    }
}
/* 



Resource Page Styles



*/
.resource-category-heading {
    text-align: center;
    /* margin-bottom: 50px; */
}

.article-container {
    margin: auto auto;
    width: 60%;
}

.article-prev {
    margin: auto auto;
    margin-bottom: 40px;
    padding: 20px;
    width: 100%;
    /* min-height: 200px; */
    border: 2px solid black;
}

.article-link {
    text-decoration: none;
    color: black;
}

.tile-grid {
    /* width: 80%; */
    display: flex;
    /* flex-direction: row; */
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.tile {
    box-sizing: border-box;
    aspect-ratio: 0.75;
    /* max-width: 280px; */
    border: solid 1px;
    border-radius: 10px;
    padding: 10px;
    word-wrap: break-word;
}

.tile-img {
    display: block;
    width: 100%;
    object-fit: cover;
    border-bottom: solid #1F597D;
    margin: auto auto;
}

#resource-divider {
    margin: 70px auto;
}

.gray-hover:hover {
    background-color: lightgray;
}

.other-resources-tiles {
    box-sizing: border-box;
    margin: auto auto;
    margin-bottom: 50px;
    border: solid 1px;
    width: 80%;
    min-width: 300px;
}

#capability-statement-tile {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
}

#cap-stmnt-button {
    margin: 0 auto;
    padding: 15px 5px;
    border-radius: 20px;
    text-align: center;
    width: 50%;
    background-color: black;
    color: white;
}

#cap-stmnt-left-col {
    min-width: 250px;
    width: 45%;
}

#cap-stmnt-right-col {
    min-width: 230px;
    width: 40%;
}

@media(min-width: 700px) {
    /* Resources Page */
    .other-resources-tiles {
        padding: 0 20px;
    }

    #capability-statement-tile {
        justify-content: space-between;
    }
}

@media(max-width: 699px) {
    /* Resources Page */
    #capability-statement-tile {
        justify-content: center;
    }

    #capability-statement-tile p, #capability-statement ul {
        font-size: 1.15em;
    }
}

.no-style-indented {
    list-style: none;
    padding-left: 20px;
}

/* Article Styles */
.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 20px;
    padding: 0;
    align-items: end;
}

.breadcrumb li:not(:last-child)::after {
    display: inline-block;
    margin: 0 0.25em;
    content: ">"
}

.article-header {
    display: flex;
    /* flex-wrap: wrap; */
    justify-content: space-between;
}

.article-header-img {
    max-width: 50%;
    margin-right: 5%;
}

.article-header-img img {
    max-width: 100%;
}

.article-page {
    width: 60%;
    margin: auto auto;
    text-align: left;
}

.article-page h1 {
    text-align: left;
}
/* .article-page h2 {
    font-size: 2em;
    margin-top: 0;
} */

.article-page h3 {
    margin-bottom: -10px;
}

.article-page h4 {
    font-weight: 500;
}

.article-page li {
    margin-bottom: 7px;
}

.quote {
    padding: 0 200px;
}

.redtext {
    margin-bottom: -20px;
    color: darkred;
}

.in-text-quote {
    margin: 0 75px;
    padding: 0 10px;
    border-left: solid grey 3px;
    /* font-size: 1.1em; */
    font-size: 1.2em;
}
@media(min-width: 1050px) {
    .article-page {
        font-size: 1.2em;
    }
}

@media (min-width: 750px) and (max-width: 1049px) {
    .article-page {
        width:75%;
        font-size: 1.2em;
    }
}

@media(max-width: 800px) {
    .article-header {
        flex-wrap: wrap;
    }

    .article-header-img {
        margin: auto auto;
        max-width: 70%
    }
}

/* For article quotes on tablet */
@media (min-width: 750px) and (max-width: 800px) {
    .article-page {
        font-size: 1.2em;
    }

    .quote {
        padding: 0 100px;
    }

    .in-text-quote {
        margin: 0;
    }
}

@media (max-width: 749px) {
    .article-page {
        width: 92%;
        font-size: 1.1em;
    }

    .article-page h1 {
        font-size: 1.4em;
    }

    .article-page h3 {
        font-size: 1em;
    }

    .quote {
        padding: 0;
    }

    .in-text-quote {
        margin: 0;
    }
}

/* 



Contact-Us Styles 



*/
.contact-us {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    width: 80%;
    margin: auto auto;
}

.form-container {
    margin-top: 20px;
    width: 50%;
}

#phone {
    margin: auto 40px;
    width: 30%;
    height: 500px;
    object-fit: contain;
}

@media(max-width: 800px) {
    .contact-us {
        width: 100%;
    }

    #phone {
        width: 80%;
    }

    .form-container {
        width: 85%;
    }
}

/* 



Header Styles 



*/
.navbar {
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 1.2em;
}

nav ul {
    list-style-type: none;
    margin: auto auto;
    padding: 0;
}

.navbar li {
    margin: auto 20px;
    min-width: 100px;
    max-width: 150px;
    border: 2px solid white;
}

.navbar li a {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    height: 2em;
    align-items: center;
    color: black;
    text-decoration: none;
}

.navbar li:hover {
    border-color: #336699;
    background-color: #c0d4dd;
}

.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    /* height: 45vh; */
    width: 50%;
    z-index: 100;
    background-color: white;
    /* box-shadow: -10px 0 5px rgb(0, 0, 0, 0.1); */
    display: flex;
    transform: translateX(100%);
    transition: transform 1s;
    flex-direction: column;
    /* align-items: flex-start;
    justify-content: flex-end; */
    font-size: 1.1em;
}

.sidebar li {
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    padding-left: 15px;
    width: 100%;
}

.sidebar li:hover {
    background-color: lightgray;
}

.sidebar li a {
    display: inline-flex;
    width: 100%;
    height: 3em;
    align-items: center;
    color: black;
    text-decoration: none;
}

.nav-divider {
    margin: 10px auto 20px;
    width: 70%;
    border-bottom: solid black 1px;
}

@media (min-width: 800px) {
    .hide-on-mobile {
        display: inline-block;
    }

    #menu-text {
        display: none;
    }

    #menu-icon {
        display: none;
    }

    .banner-logo-mobile {
        display: none;
    }

    .sidebar {
        display: none;
    }
}

@media(max-width: 799px) {
    .hide-on-mobile {
        display: none;
    }

    .nav-divider {
        display: none;
    }

    header nav, .navbar {
        display: inline;
        margin: auto 0;
    }

    header {
        display: flex;
        justify-content: space-between;
        background-color: #1F597D;
        /* background-color: #c0d4dd; */
        border-bottom: solid 1px #1F597D;
    }

    #menu-text {
        color: white;
        padding-left: 5%;
        flex-grow: 1;
    }

    #menu-icon {
        border: 2px solid #1f497d;
    }

    .banner-logo {
        display: none;
    }

    .banner-logo-mobile {
        display: block;
        margin: 5% auto;
        width: 50%;
    }

    /* header {
        display: flex;
        justify-content: space-between;
    } */
}

@media (min-width: 750px) {
    .sidebar {
        width: 75%;
    }
}

@media (max-width: 749px) {
    .sidebar {
        width: 100%;
    }
}

/* Footer Styles */
footer {
    margin-top: 35px;
    /* background-color: #336699; */
    background-color: #c0d4dd;
    /* height: 75px; */
    padding: 15px;
    /* width: 100%; */
    text-align: center;
}

.icon-row {
    box-sizing: border-box;
    margin: 0 auto;
    width: 75%;
    display: flex;
    justify-content: space-between;
    max-width: 100%;
    margin-bottom: 20px;
}

footer p {
    margin: 0 auto;
    text-align: center;
}

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

.hero-badges-footer {
    display: flex;
}

.hero-badges-footer a {
    margin: auto auto;
}

/* Images */
/* #don-home {
    min-width: 50%;
    max-width: 70%;
    width: 70%;
} */
/* 
#ripples {
    min-width: 80%;
    max-width: 100%;
    width: auto;
}
*/

/* .resources-body {
    align-items: center;
} */
/* #key {
    min-width: 80%;
    max-width: 100%;
    width: auto;
}  */

/* Responsive Design */
.responsive {
    max-inline-size: 100%;
    height: auto;
}

/* Bigger screens */
@media (min-width: 1600px) {
    #welcome-text {
        margin: auto 8%;
    }
}

/* Targets images on homepage */
@media (min-width: 1151px) {
    #welcome-img-div-wrap {
        display: none;
    }

    .portrait {
        min-width: 50%;
        max-width: 70%;
        width: 70%;
    }

    .landscape {
        min-width: 80%;
        max-width: 100%;
        width: auto;
    }
}

/* Targets homepage elements when they first get wrapped  */
@media (max-width: 1150px) {
    .responsive-wrap {
        flex-wrap: wrap-reverse;
    }

    #welcome-img-div {
        display: none;
    }

    #welcome-img-div-wrap {
        text-align: center;
    }

    /* .portrait {
        width: 60%;
    } */

    .landscape {
        min-width: 80%;
        max-width: 100%;
        width: auto;
    }
}

/* Specific interval for hero image and margin/padding settings */
@media (min-width: 750px) and (max-width: 1149px) {
    .portrait {
        width: 40%;
    }

    .hero {
        margin-bottom: 0;
        padding-bottom: 40px;
    }
}

/* Targeting icon sizes in footer on larger screens */
@media (min-width: 1440px) {
    .hero-badges-footer a {
        max-width: 10%;
    }
}

@media(min-width: 750px) and (max-width: 1439px) {
    .hero-badges-footer a {
        max-width: 15%;
    }
}

/* For tablets and up */
@media (min-width: 750px) {
    /* Home Page */
    .hero-badges-footer {
        width: 50%;
    }

    .hero-badges-footer a {
        margin: auto auto;
    }

    /* Resources Page */
    .tile-grid {
        margin: 0 5%;
    }

    .tile {
        max-width: 300px;
    }
}

/* Basically for mobile devices, but covers an additional interval in between tablets and mobile devices for complete pixel range coverage */
@media (max-width: 749px) {
    .hero {
        padding: 0;
    }

    .portrait {
        width: 60%;
    }

    /*  */
    #welcome-text {
        margin-bottom: 10%;
        padding: 0 5%;
    }

    /* Services section */
    .buttons {
        margin-bottom: 8%;
    }

    #ripples-caption {
        font-size: 1.1em;
        padding: 0;
    }

    /* Footer badges */
    .hero-badges-footer {
        flex-wrap: wrap;
        justify-content: center;
    }

    .hero-badges-footer a {
        margin: 5% 5%;
        max-width: 22%;
    }

    /* Resources Page */
    .tile-grid {
        margin: auto 5%;
        gap: 20px;
    }

    .tile {
        max-width: 350px;
    }
}

/* Laptops and bigger */
@media (min-width: 900px) {
    .banner-logo {
        max-width: 375px;
    }

    .footer-banner-logo {
        max-width: 300px;
    }

    .section-wrapper {
        padding: 8%;
    }
}

/* Targets tablets and smaller */
@media (max-width: 900px) {
    .ptr {
        flex-wrap: wrap-reverse;
    }

    .section-wrapper {
        padding: 5%;
    }

    #services-txt {
        margin: 0;
        margin-bottom: 5%;
    }

    #resources-txt {
        margin: 0;
        margin-top: 5%;
    }

}

/* Addresses banner and footer logos for intermediate size */
@media (min-width: 800px) and (max-width: 899px) {
    .banner-logo {
        max-width: 300px;
    }

    .footer-banner-logo {
        max-width: 50%;
    }
}

/* Tablets */
@media (min-width: 450px) and (max-width: 799px) {
    /* Home Page */
    /* .banner-logo {
        max-width: 45%;
    } */

    .footer-logo-and-info {
        width: 50%;
    }

    .footer-banner-logo {
        max-width: 100%;
    }

     .hero-badges-footer {
        width: 75%;
        margin: 5% 10%;
    }

    .client-logo {
        width: 60%;
    }
}

/* Makes footer section wrap (has its own query so that it doesn't need to appear in every media query*/
@media (max-width: 800px) {
    .icon-row {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* For devices larger than mobile devices */
/* @media (min-width: px) {
    #don
} */

/* Mobile devices */
@media (max-width: 449px) {
    /* .banner-logo {
        max-width: 60%;
    } */

    .footer-logo-and-info {
        width: 75%;
        margin-bottom: 5%;
    }

    .footer-banner-logo {
        max-width: 100%;
    }

    .hero-badges-footer {
        width: 100%;
    }

    .client-logo {
        width: 80%;
    }
}