/*
Theme Name: Hustero Foundation
Theme URI: https://hustero.org/
Author: James De Koven
Author URI: https://dekoven97.github.io/
Description: A custom theme for Hustero Foundation. This theme is designed to be lightweight and easily customizable. This theme is an custom themes for the Hustero Foundation.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hustero-foundation
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/



:root {
    --PRIMARY-COLOR: #13254A;
    --SECONDARY-COLOR: #ff8b07;
    --TERNARY-COLOR: #EB2133;
    --PALE-BLUE: #e6f1fa;
    --LIGHT-BLUE: #90D5FF;
    --LINK-COLOR-PRIMARY: #ffffff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}


.wrapper {
    max-width: 1400px;
    width: 100%;
    margin-inline: auto;
    padding-inline: 1rem;
    transition: all 1s ease-in-out;
}



.debug {
    border: 1px dashed #ff0000;
}




/* Visually hide text while keeping it available for screen readers */
.sr-only,
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    /* opacity: 0; */

}

img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}



body {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-optical-sizing: auto;
    position: relative;

}



.hidden {
    display: none !important;
}


.test {
    color: #2a3e64;
}

.main-content {
    padding-block: 10rem;
}





.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--LINK-COLOR-PRIMARY);
    list-style: none;
    font-size: .7rem;
    font-weight: 700;
}

.breadcrumb-item a {
    color: var(--LINK-COLOR-PRIMARY);
    text-decoration: none;
}








@media (max-width: 1440px) {
    .wrapper {
        max-width: 1250px;
    }




}






@media (max-width: 1024px) {
    .wrapper {
        max-width: 950px;
    }

}





@media (max-width: 768px) {
    .wrapper {
        padding-inline: 0.75rem;
    }
}

@media (max-width: 480px) {
    .wrapper {
        padding-inline: 0.5rem;
    }
}