/*

    BAB 25-1031  I'm rewriting the whole website, and am needing to 
    simplfy everything since I've forgotten how a lot of the fancy
    stuff (e.g. skrollr) work. PLUS, a lot of things have changed
    over the past several years...

*/

html, body {
    margin: 0;
    padding: 0;
    height: 100vh; /* can also use viewport units (height: 100vh) */
    scroll-behavior: smooth; /* smooth scrolling for anchor links */
}

body {
    display: flex; /* displays flex-items (children) inline */
    flex-direction: column; /* stacks them vertically */
    /*(set above already) height: 100vh; needs to take the parents height, alternative: body {display: flex} */

    /*background-color: gray;*/
}


/**
 * Address `font-family` inconsistency between `textarea` and other form
 * elements.
 */

html,
button,
input,
select,
textarea {
    font-family: Verdana, sans-serif;
}


header {
    /*display: flex;
    flex-direction: row;*/ /* This is default so you can omit it but it's good to be explicit  */
    /*justify-content: flex-start;*/ /* This will snap all content of header to the left due to 'flex-direction: row'  */
    /*background-color: darkgray;*/
    /*border-bottom: solid;  /* Effectively draws a dividing line */
    padding: 0.5rem 1rem; /* Padding top/bottom then left/right. 1rem = default pixel size of html font (14px or 16px etc) so 0.5rem = 7px or 8px  */
}

    header > img {
        height: 31px; /* Set the height of your image  */
        width: auto; /* Keep the height/width ratio of source image  */
        margin-top:15px;
        padding-bottom:10px;
    }

nav {
    display: flex;
    flex-direction: row;
    flex: 1; /* Use the rest of the available space of the <header> */
    justify-content: right; /* Keep the links in the center of this element  */
    align-items: center; /* Puts the links vertically in the center of the <nav> */
}

    nav a {
        padding: 0.5rem 1rem 0.25rem 1rem; /* top right bottom left */
        text-decoration: none; /* Take away the default link styling  */
        color: black;
        border-bottom: 2px solid transparent;
    }

        nav a:hover {
            border-bottom: 2px solid black;
            transition: border-bottom 0.4s ease-in;
        }


main {
    flex: 1; /* takes the remaining height of the "container" div */
    overflow: auto; /* to scroll just the "main" div */
    padding: 20px;
    /*background-color: lightblue;*/
}

section {
    height: 100%; /* takes the visible area of the "main" div */
    overflow: auto; /* recommended */
    border-bottom: 1px solid;
    background: lightgreen;
}
    section:last-child {
        border: none
    }


.footer {
    color: whitesmoke;
    padding: 2px 10px 15px 10px;
    /*background-color: lightgreen;*/

    /*position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    z-index: 9999;*/ /* Ensure the footer stays on top of other elements */
}

    .footer #version {
        font-size: x-small;
        color: dimgray;
    }

    /*.footer > p {
        background-color: initial;
        margin: initial;
    }*/


/* ******************** */
/* ******************** */
/* ******************** */
/* ******************** */

.flexContainer {
    display: flex; /* Enable flexbox */
    align-items: stretch; /* Stretch items to equal height */
    flex-flow: wrap; /* BABNOW 25-1211_1918  */
    justify-content: flex-start; /* Items are aligned to the left */
    padding: 5px 5px 5px 40px; /* top right bottom left BAB */
}

.flexItem {
    /*text-align: center; */ /* Center 'plain' HTML text */
    font-size: x-large;


    color: #ebebeb;
    text-align: center; /* Center 'plain' HTML text */
    /* - - - - - - - - - */
    display: flex;
    /*grid-template-columns: 25%;*/ /* fraction*/
    flex: 1 1 auto; /* Optional: make items equal width too */
    flex-direction: column;
    float: left;
    width: 20%;
    /* min-height: 4em; */
    background-color: rgba(51, 99, 170, 0.4);
    border-radius: 7px; /* round off the corners */
    line-height: 1.4;
    padding: 10px 5px 10px 5px; /* top right bottom left */ /* Add spacing inside */
    font-size: 1.0em;
    margin: 10px 5px 10px 5px; /* top right bottom left */
    border: 1px solid #ccc; /* DEBUG Just for visualization */
    /* TESTING BAB */
    min-width: 250px;
}
    .flexItem > header { /* Overwrite 'header' from earlier; Note: 'title' can't be used because it's a special word */
        font-weight: bold;
        font-size: 1.4em;
        margin-bottom: 5px;
        background-color: initial;
        border: initial;
    }
    
    .flexItem > content {
        margin: 5px 3px 5px 3px; /* top right bottom left */
        font-size: 1.0em;
    }
    .flexItem > content ol {
        text-align: left;
        padding-left: 20%;
        color:gold;
    }
        .flexItem > content ol li::marker {
            font-size: 1.2em;
            color: goldenrod;
            gap:1.5em;              /* <<<< Trying to space the marker from the text a bit more*/
        }
        .flexItem > content table {
            margin-left: auto;
            margin-right: auto;
            width: 25%; /* A width must be set for 'margin: auto;' to work effectively */
            max-width: fit-content;
        }
    .tableWideColumn {
        width:1.0vw;
    }
.flexItem > content table a {
    color: mediumblue;
}
/* ******************** */
/* ******************** */
/* ******************** */
/* ******************** */




.hsContainer {
    display: flex; /* Enable flexbox */
    align-items: stretch; /* Stretch items to equal height */
    
    flex-flow: wrap; /* BABNOW 25-1211_1918  */
    /*justify-content: space-evenly; /* space-between;  Distributes space evenly between items */
    justify-content: flex-start; /* Items are aligned to the left */
    
    /*width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;*/
}

.hsContent {
    /*flex:  1 1 150px; /* Grow and shrink as needed, base width 150px */
    margin: auto auto 25px auto; /* top right bottom left */
    /*vertical-align: middle;*/
    color: #ebebeb;
    padding: 0 8px;
    /*text-align: center; */ /* Center 'plain' HTML text */
    font-size: x-large;
}
    .hsContent h2,
    .copy h2 {
        color: #ffffff;
        font-size: 45px;
        line-height: 48px;
        margin-bottom: 12px;
    }

    .hsContent p {
        width: 90%;
        margin: 0 auto;
        color: blue white;
    }

    .hsContent a {
        color: #b2b2b2;
        text-decoration: underline;
    }

    .flex-logos img {
        margin: 5px 5px 5px 5px; /* top, right, bottom, left; Adds space to the right of each image */
        height: 60px;
        padding: 15px 15px 15px 15px; /* top right bottom left */
        background-color: rgba(240, 240, 240, 0.15);
        /* Adjust as needed: margin: 0 15px; for horizontal margins */
    }

    /* To avoid margin on the last image if desired: */
        .flex-logos img:last-child {
            margin-right: 20px;
        }


.bgBlack {
    background-color: rgba(0,0,0,0.75);
    padding: 3px 10px;
}
.bgShadow {
    text-shadow: #1a1a1a 0.1em 0.1em 0.2em;
}
.bgHighlight {
    font-weight: bold;
    color: #ebebeb;
    text-shadow: #1a1a1a 0.1em 0.1em 0.2em;
}
.bgUrl {
    text-shadow: dodgerblue 0.1em 0.1em 0.2em;
}
.bgHeader {
    /*text-shadow: #1a1a1a 0.05em 0.05em 0.15em;*/
    color: gold;
    text-shadow: #1a1a1a 0.05em 0.05em 0.15em;
    border-top: groove;
    padding-top: 8px; /* for space between text and the dividing-line border */
}







.fourbox {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /* fraction*/
    background-color: rgba(51, 99, 170, 0.4);
    border-radius: 7px;
    line-height: 0.75;
}

.onebox {
    display: flex;
    /*grid-template-columns: 25%;*/ /* fraction*/
    flex: 1 1 auto; /* Optional: make items equal width too */
    flex-direction:column;

    float: left;
    width: 20%;
    /* min-height: 4em; */
    background-color: rgba(51, 99, 170, 0.4);
    border-radius: 7px; /* round off the corners */
    line-height: 1.4;
    padding: 10px 5px 10px 5px; /* top right bottom left */ /* Add spacing inside */
    font-size: 0.75em;
    margin: 10px 5px 10px 5px; /* top right bottom left */

    border: 1px solid #ccc; /* DEBUG Just for visualization */
}
.onebox > header {        /* Overwrite 'header' from earlier; Note: 'title' can't be used because it's a special word */
    font-weight: bold;
    font-size: 1.2em;
    margin-bottom: 5px;
    background-color:initial;
    border: initial;
}
.onebox > content {
    margin: 5px 3px 5px 3px; /* top right bottom left */
    font-size: 1.0em;
}


/*  CONTACT US  */
.ContactUs {
    text-align: center;
    color: blueviolet;
    font-size: 1.5rem;
    height: 50vh; /* 50% vertical height (dynamic) */
    place-content: center;

    width: 48%; /* Example width, adjust as needed */
    padding: 10px;
    border: 1px solid black;
}
    .ContactUs h2 {
        margin-top: 2rem;
        font-size: 3rem;
        color: red;
    }

    .ContactUs p {
        color: darkblue;
        font-size: 2rem;
    }

    .ContactUs span {
        color: coral;
    }

.obfuscate {
    unicode-bidi: bidi-override;
    direction: rtl;    
}

.ContactNextSteps {
    width: 48%; /* Example width, adjust as needed */
    padding: 10px;
    border: 1px solid black;
}

/*  ************  */
.Legacy {
    text-align: center;
    color: blueviolet;
    font-size: 2rem;
    height: 80vh; /* 80% vertical height (dynamic) */
    place-content: center;
}

/* ==========================================================================
   Logo Flex Grid (BAB 25-1017)
   ========================================================================== */
.flex-logos {
    display: flex;
    justify-content: space-evenly; /* space-between;  Distributes space evenly between items */
    /*gap: 75px ; *./ /* Sets a 20px gap between flex items */
    /* For specific horizontal/vertical gaps: */
    height: auto;
    margin-top: 40px;
    /*margin-left: 40px; Use Justify-Content */
    flex-flow: row wrap;
    /*background-color: yellow;*/
}

    .flex-logos img {
        margin: 5px 5px 5px 5px; /* top, right, bottom, left; Adds space to the right of each image */
        height: 60px;
        padding: 15px 15px 15px 15px; /* top right bottom left */
        background-color: rgba(240, 240, 240, 0.15);
        /* Adjust as needed: margin: 0 15px; for horizontal margins */
    }

        /* To avoid margin on the last image if desired: */
        .flex-logos img:last-child {
            margin-right: 20px;
        }



/* ========================================================================== */
h1 {
    font-family: Verdana, sans-serif;
    color: gold;
    font-size: 48px;    /* for legacy browser support... */
    font-size: calc(100% + 3.0vw);   /* dynamically sized font */
    margin-bottom: 3px;
    text-align: center;
}

h2 {
    font-family: Verdana, sans-serif;
    font-weight: normal;
    clear: left;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 12px;
    
    color: darkblue;
    font-size: 42px; /* for legacy browser support... */
    font-size: calc(100% + 2.0vw); /* dynamically sized font */
    line-height: 48px;
}

h3 {
    font-family: Verdana, sans-serif;
    font-weight: normal;
    clear: left;
    text-align: left;
    margin-bottom: 8px;
    color: darkorange;
    font-size: 24px; /* for legacy browser support... */
    font-size: calc(75% + 1.0vw); /* dynamically sized font */
    
}


.imagecontainer {
    margin-right: 40px;
}

/*.hsContent {*/
    /*(Override)*/
    /*font-size: x-large;
}*/


@keyframes scrollBackground {
    0% {
        background-position: 50% 0; /* Starting position */
    }

    50% {
        background-position: 0 0; /* middle position for horizontal scroll */
        /* For vertical scroll, use 0 -100% */
    }

    100% {
        background-position: 50% 0%; /* Back to Starting position */
    }
}














.logo-marquee {
    margin-left: 50px;
    margin-bottom: 50px;
    overflow: hidden; /* Hide the images that extend past the edge */
    white-space: nowrap;
    position: relative;
    display: flex;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 30px; /* Adjust spacing between logos */
    animation: scroll-left 30s linear infinite;
}

    .marquee-content img {
        flex-shrink: 0;
    }

/* The Animation */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Moves the first set completely out of view */
        transform: translateX(-50%);
    }
}

/* Optional: Pause on hover */
.logo-marquee:hover .marquee-content {
    animation-play-state: paused;
}