/*Code by Heyward Photography, DBA Heyward Web Development, Columbia, SC
All Rights Reserved
heyward@heywardphotography.com
PO Box 2695
Columbia, SC 29201
*/
/* variables for theme and menu colors */
:root {
    /*primary blue*/
     --flag-blue: #123763;
    --flag-blue-darkest: #02172f;
    --flag-blue-dark: #06254b;
    --flag-blue-light: #234a78;
    --flag-blue-lightest: #3b608c;
    
    /*secondary yellow*/
    --flag-yellow: #ffc84d;
    --flag-yellow-darkest: #bd860d;
    --flag-yellow-dark: #eeaf23;
    --flag-yellow-light: #ffd270;
    --flag-yellow-lightest: #ffe09b;

    /*secondary blue*/
    /*This was flag red, but I used it as secondary blue.  I might make flag yellow secondary blue and flag red the yellow.*/
    --flag-red: #1a4f8e;
    --flag-red-darkest: #062b58;
    --flag-red-dark: #0f3c72;
    --flag-red-light: #35639a;
    --flag-red-lightest: #547dad;

    --off-black: #141414;               /*changed.  was #010101 Use for lettering*/

     --off-white: #fafafa;              /*changed. was #f1f3f3 which is a very light shade of cyan*/

     --lt-gray-blue: #868c92;           /*Changed to #868c92 mid gray. original might be better, but the change improved it some, so keep the change. Note: warm gray #c9c4bc looks great for footer text.  was #9da3b3 Use for lettering and logos.*/
                                /*If keep lt-gray-blue as mid-gray color scheme, then warm gray #c9c4bc isn't currently being used.*/
     
     --lt-gray-background: #c9c4bc;     /*Changed (tried warm beige #f2e8dc nice.) warm gray #c9c4bc nicer, darker, more contrast in customer cards section but too dark.  was #f3f4f6 use as a form background to set off from the section off-white background.*/

     --mid-gray: #494c4f;               /*changed to #868c92 mid gray, but original is better because it makes the gray body text, nav bar, and hero button text darker.  original was #494c4f used in nav menu lettering. #494c4f web gray, #484848, #555555, #36454f, #404040 light. If too light, could use darker #424242 but still light; Note: $666666 light.*/

     --off-black-background: #123763;   /*Changed to primary blue.  was #111828 use for footer background*/

    --warm-beige:  #f2e9dc;

    --dark-menu: black;
    --light-menu: white;

}
@font-face {
    font-family: "Sora";
    src: url("../fonts/Sora-Bold.ttf") format("truetype");
  }
  
  @font-face {
    font-family: "SourceSans3";
    src: url("../fonts/SourceSans3-Regular.ttf") format("truetype");
  }    /*Place @font-face rule before any styles.*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
/*   font-size: 100%; */  /*I've seen on body element, Murach p. 127 p. 151 p.181.  See calc version below.*/
/*line-height: 1.5; */ /*This can vary or be changed elsewhere or maybe place in the body element*/
}
h1, h2, h3 {
    font-family: "Sora", Arial, Helvetica, sans-serif;          /*fallback serif serif fonts that are web-safe fonts.*/
}
h1 {
font-size: 2rem;   /* 2rem is 32px*/
}

h2 {
font-size: 1.5rem;   /*24px*/
/* font-style: italic;*/
}
h3 {
    font-size: 1.25rem;   /*was 20 px, so doesn't grow like you'd expect.  Changed to 16px = 1rem, so 1.25rem*/
    }
/*Generic class to make images responsive.  On this site I included this code in the reponsive image blocks on About Us page and Tips page.
There are no other stand along pictures, so I didn't use it elsewhere.*/
.image-response {   /*I could put on all img elements, but it might mess up a carosel, etc., later. IT MAKES THE IMAGE RESPONSIVE-USE ON ALL IMAGES.*/
    max-width: 100%;
    height: auto;
}

/*Balanced line breaks for headings.  Use on headings no longer than 6 lines. As of 2026, Balance not recognized by Safari.*/
h1, h2, h3 {
    text-wrap: balance;
}
/*Prevents orphaned last word in the Body Copy.  Don't use on headings.*/
p, li {
    text-wrap: pretty;
}

body {              /*To limit growth, I could add a media query for screen sizes larger than 2000px to set max-width: 2000px; 
    However, the webpage will no longer be centered for screen sizes larger than 2000px.*/
/*max-width: 960px;*/  /*Remove max-width: 960px; and the grid will fill the screen end to end, no bound in growing.*/
font-family: "SourceSans3", Verdana, Geneva, Tahoma, sans-serif;
font-size: calc(100% + 0.2vw);   /*The fonts grow with viewport, but some fonts don't grow, maybe need in * above. Instead of +1vw, use + 0.2vw less dramatic!!!*/
line-height: 1.5;  /*1.5 recommended for accessibility, Murach p. 195.  It was 1.4*/
/* width: calc(100% - 2.5rem); */   /*2.5rem = 40px.  Will have 1.25rem space on each side of webpage no matter screensize. 40px or 2.5rem works the same.*/
margin: auto;  /*THIS CENTERS THE WEBPAGE! Always place on body. NOTE margin: 1rem auto; adds 1rem to top & bottom*/
}
/*Grid for the entire page.  This could be on the body selector, but I chose to do as a container.*/
.container {    /*for various pages, create other container with page specific grid template areas.  could name .content-another-page to use one CSS file.*/
display: grid;
grid-template-columns: repeat(12, 1fr);
/*grid-template-rows: 5rem 1fr 1fr 3.75rem;*/   /*This works better as not defining it allows it to shrink and grow to fit the content with various screensizes.*/
/*gap: 1rem;*/
/* height: auto; */   /*OLD INFO.  The margin: auto; on the body solved this. height: 90vh; stretches sections--no*  Don't need this as I think the default is auto.  
width: 100vw;  /*I added this!  without this line of code or width: 100%; or 100vmin;--website aligns on left; not centered.  
        If use 100vw or 100vmax it centers.  HOWEVER, this overides the body max-width of 960px.  It will
        grow without bound.  The entire website width will grow without bound, the width fits the viewport.*/
/*   align-items: stretch;       does nothing */
}
/*A mix of page layout (.container) and nested grids for main and footer along with Homepage code.*/
/*Note:  header and .site-header (the header's CSS class selector) are the same.*/
header {
/*grid-area: header;*/
grid-row: 1/span 1;
grid-column: 1/span 12;
line-height: 1.2;   /*override body line-height of 1.5.*/
/*padding: 1rem; */ /*16px*/
background-color: var(--off-white);
/*sticky header*/
/*position: sticky;
top: 0;*/
/*overflow: hidden;        Not needed here.*/
}

/*Header Styles*/
/* hands logo in header*/
img#hhlogo {
  width: 200px; /*was 150px (fixed)    originally was clamp(65px, 20%, 90px);*/      /*min, default, max.  50px, 20%, 75px*/
}
.headerAlign {
  display: grid;
  grid-template-columns: 200px 1fr;    /*was 150px 1 fr; first column set to max width of logo, the rest of the room is for the text.*  /*was  65px 1fr*/
  align-items: center;               /*centers vertically*/
  gap: 1rem;
}

/*Adjust title next to logo in header--No seperate title used; it's part of the logo. Keep in case want to change later.*/
h1#logoTitle {
        font-size: 1.3rem;   /*was 1.5rem.*/
        color: var(--off-black);
    }
    /* Note:  not used; Text in header get larger for laptops 1024.  Transition at 930.*/
@media (min-width: 930px) {
    h1#logoTitle {
        font-size: 1.8rem;
    }
  }

/*Styles for the nav menu and hamburger menu, which is in header.*/

/*Navigation.  Nav in header as nav bar, hamburger menu for mobile, drops below header and covers page.*/
/*Note:  header and .site-header (the header's CSS class selector) are the same.*/
.site-header {
    display: flex;
    justify-content: space-between;  /*space-between*/
    align-items: center;
    position: relative; /* Needed for absolute positioning of children */
    padding: 15px;
 /*   background-color: var(--off-white); */   /*header background color.  It was #f0f0f0;*/

  /*  position: -webkit-sticky;*/   /*Safari*/
  /*  position: sticky; */    /*Include to have nav bar stick to the top of the screen.  I removed it as client didn't want it.*/
    top: 0;                     /*Must have to see at top.*/
    z-index: 8;  /*keeps the mobile menu and nav bar above the service cards when they're zoomed.*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.hamburger-button {
    display: block; /* Show on mobile */
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: #333; /*#333*/
}

.nav-menu {
    display: none; /* Hide the menu by default */
    position: absolute;
    top: 100%; /* Position it directly below the header */
    left: 0;
    width: 100%;
    background-color: var(--off-white);   /*#FFF*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    z-index: 10; /* Ensure it's above other content */

    & a {
        text-decoration: none;
        color: var(--off-black);    /*var(--mid-gray)*/

        font-size: 20px;

        position: relative;   /*need to make hover after absolution positioning to place the underline in the mobile menu below.*/
    }
    /*Below works for everything but the underline.  The last item in the list will have only a partial underline in the desktop and mobile views.
    I tried several solutions like a more specific selector, but I can't get anything to make the last nav item fully underline*/
    & a:hover, a:focus {
       /* text-decoration: underline;
       -webkit-text-decoration-color: var(--flag-red); /* Safari */  
       /* text-decoration-color: var(--flag-red);
        text-decoration-thickness: 4px; */

        font-weight: bold;
        color: var(--flag-red);

        transition: all 0.2s;  /*delay in text color change.  Match to underline transition.*/

       /* background-color: var(--flag-yellow-lightest); */     /*#ddd;*/

        
       /* text-decoration: underline;
        -webkit-text-decoration-color: var(--flag-red);*/ /* Safari */  
       /* text-decoration-color: var(--flag-red);
        text-decoration-thickness: 4px; 
        color: var(--flag-red);
       
        background-color: var(--flag-yellow-lightest);*/
    }

    /*This fixes the last item underline issue.  The last item is fully underlined.  To move the underline, the solution has notes on that.
    The only problem with this is that the mobile menu container is fully underlined and the desktop menu the word is fully underlined.  To fix this
    adjust the width for the mobile menu to be less than 100% and set to 100% for the desktop view.
    the width 20% on the mobile view places the underline to the left.  It must be moved.*/
    & a::after {
        content: '';
        height: 3px;
        width: 100%;   /*100%*/
        right: -40px;
        background: var(--flag-red);
        /*display: block;*/  /*position absolute makes this a block element*/
        position: absolute;
        left: 0;
        bottom: -4px;   /*was 0, which is right under the text.  a negative #, like -8px will make the underline lower*/
        opacity: 0;
        transition: all 0.2s;   /*delay in underline transition.  Match to color change transition.*/
        pointer-events: none;    /*This makes the underline show up only when you hover the text and not when you hover the line itself. not much difference*/
    }
    & a:hover::after, a:focus::after {
        opacity: 1;
    }
}

.nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--off-white);    /*nav bar and drop down menu color*/
}

.nav-menu li {
    padding: 15px;     /*was 15px*/
    text-align: center;
 /* border-bottom: 1px solid var(--off-white); */       /*Use if want border line below each link in hamburger drop-down menu. Change color so can see the lines.*/
    font-size: 1rem;  /*0.8rem Works for tablet.  For sizes larger than tablet could go back to 1.5rem. like 1024 laptop and larger. Transition at 930 perhaps. Perhaps below tablet.*/
}

.closeIcon{
    display: none;  /*NEW Close button is not displayed by default.*/
    font-size: 1.75rem;
}

/* Style for the active menu */
.site-header .nav-menu.active {
    display: block;
}

/*New next two selectors with .active.  Note: span.bar.active or.bar.active and bar.active only closes the first bar.
try wrap div around 3 span elements.  It doesn't display on the first bar because the document.querySelector() method in JS only selects the first element
within the document that matches a specified CSS selector or group of selectors.
Must use querySelectorAll, which is an array, so must add the active class by looping through the array of three elements.*/
.bar.active {
    display: none;
}

.closeIcon.active {
    display: block;
    background-color: var(--off-white);   /*The X was dark.  This changes the background color.  Change to final background color. Interim light gray #eee, short for #eeeeee*/
}

/* Hide the hamburger button on large screens */
@media (min-width: 768px) {
    .hamburger-button {
        display: none;
    }
    .nav-menu {
        display: block; /* Show the menu inline on desktop */
        position: static;
        width: auto;
        background: none;
        box-shadow: none;
    }
    .nav-menu ul {
        display: flex;
    }
    .nav-menu li {
        border-bottom: none;
        padding: 0 10px;    /*was 0  15px*/
    }
}
/*End of nav menu styles*/

/*End of header styles*/


/*This allows us to wrap the main content in a main HTML tag with width of viewport. No nested grid used. DOES NOT WORK CORRECTLY*/
            /*This doesn't work as the main tag now occupies the first grid column of the 12-column grid defined by the container element.
            The width: 100 vw; appears to solve it but doesn't as the extra 11 columns throw off the layout at varies screen sizes.*/
/* 
main {                 
    display: grid;
   width: 100vw;  
}*/

main {
    grid-row: 2/span 1;         /*This sets the main element's position in the .container grid.*/
    grid-column: 1/span 12;

    display: grid;              /*This is a nested grid for the main element's children.*/
    grid-template-columns: repeat(12, 1fr);
}

/*Mains's section classes.  Reference the Main's nested grid.*/

#home-hero {
    grid-row: 1/span 1;         /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
  /*  padding: 1rem; */ /*Don't apply here as it insets the image overlay. Apply padding to h1 and button to view image. Don't overflow section.  */

    background-image: url("../images/web-23.jpg");  /*To get out of styles folder use ../  */
    background-repeat: no-repeat;
    background-size: cover;       /*(was 100% auto; is Full width, proportional height.)  Cover works great for mobile views. Change to 100% auto for larger views so can crop image--made no difference.*/
                                /*150% zooms in on the background photo not overrunning the sides.  80% shrinks background photo smaller than container.*/
    background-position: center;

    height: 600px;   /*controls the neight of the section with the photo.  the overlay must match it!*/

 /*   box-shadow: "0px 4px 4px 0px #000040, inset 0 0 0 1000px rgba(0,0,0,0.5)"; */

 & #home-hero-overlay {
/*content: ''; */
/*position: absolute;*/
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
/* background-size: cover;*/
/* background-image: linear-gradient(to bottom right, #002f4b, #dc4225);*/
background-color: rgba(32, 32, 32, 0.4);  /*was 0.75*/
 opacity: 1;  /*1*/
 background-size: 100%, auto;
 z-index: 2;
 padding: 0;

 height: 600px;  /*must match photo's area to cover the photo.*/
}

/*background-position-x: 15%; 
    background-position-y: -10%;*/
    & h1 {
        color: var(--off-white);
        text-align: center;
        text-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.2);
        font-size: 2.4em;
        z-index: 3;

        padding: 6rem 0.3rem 0.3rem 0.3rem;  /*Take care not to overflow container for various screen sizes. This was 1rem, changed to 0.3rem, top 4rem to 6rem*/
        width: clamp(100px, 95%, 800px);    /*was width: clamp(100px, 95%, 900px); change fixes h1 making consistent across all screens.*/
       /* width: clamp(100px, 90%, 800px); */ /*This looks good for Tablet and above.*/  
           /*min, default, max.  When add width clamp, the item left aligns. Need wrapper div to center.*/
        margin: 0 auto;    /*Centers a block-level element. No style nneded for the parent element to center horizontally.  This was needed when the size clamp was added.*/
        /*text-wrap: balance;*/  /*Moved to apply to all.  balanced heading that breaks evenly across lines.  max about 6 lines. Keeps "Experience" from being on a line by itself unless in mobile 
        view where the screen is small. Use on headings not body text.  for body use pretty.*/
    }
/*& mark {
        background-color: var(--accent-red);
        color: var(--off-white);
    }*/
    & p {
        color: var(--off-white);
        text-align: center;
        text-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.2);
        font-size: 1em;
        z-index: 3;

        padding: 0.3rem; 
        width: clamp(100px, 90%, 700px);    /*was width: clamp(100px, 95%, 800px);  New settings for text length keeps consistent across all screensizes.*/
       /* width: clamp(100px, 80%, 700px); */  /*This looks good for Tablet and above.*/   
        /*min, default, max.  When add width clamp, the item left aligns. Need wrapper div to center. 100px, 80%, 700px*/
        margin: 0 auto;    /*Centers a block-level element. No style nneded for the parent element to center horizontally.  This was needed when the size clamp was added.*/
        text-wrap: balance;  /*This overwrites the css above of text-wrap: pretty; style applied to all html p tags.  This p tag acts like a heading rather
        than as body text as most p tags.  Therefore, I have to overite it to have a balanced heading look of Balanced rather than just the orphan control offered by
        Pretty. Balance: balances heading that breaks evenly across lines.  max about 6 lines. Keeps "Network" from being on a line by itself. 
        Use on headings not body text.  for body use pretty.*/
    }
}

/*Job Search button in home-hero section.*/
/* Use button tag rather than input tag with type="submit" because not submitting form data but linking to URL. */
/*Job Search button*/
#button-job-search {
    background-color: var(--flag-yellow);
    color: var(--off-black);
    font-size: 1rem;
    font-weight: bold;
    border: 3px solid var(--flag-yellow-dark);
    width: 10em;        /*was 15em*/
    height: 3em;        /*was 3.5em.  earlier 4em*/
    border-radius: 6px;    /*was 4px.   earlier12px*/
/*    box-shadow: 2px 2px;  */
    display: inline-block;
    cursor: pointer;
    font-style: normal;
    transition: background-color 0.5s ease;  /*Added this line to transition background color. Works well.*/
}
#button-job-search:hover {
    background-color: var(--flag-yellow-dark);
}
/* Used with div tag to center the button */
#job-search-button {
    text-align: center;
    padding: 1rem;  /*Take care not to overflow container for various screen sizes.*/
}  /*end of home-hero section's Job Search button*/

/*Hero section with Beach scene background and Job Search button readable on various screen sizes.*/
@media only screen and (min-width: 510px) {   /*was 700px. 500px works good.  510px is great*/
    #home-hero {
        h1 {
            padding: 8.5rem 0 0 0;      /*bottom padding was 2rem, tried 1rem.*/
        }
    }
}
@media only screen and (min-width: 860px) {
    #home-hero {
        h1 {
            padding: 9.5rem 0 0 0;
        }
    }
}
@media only screen and (min-width: 932px) {
    #home-hero {
        h1 {
            padding: 11rem 0 0 0;  /*bottom padding was 2rem,  tried 1rem.*/
        }
         height: 700px;               /*increased amount of background picture displayed for tablet*/
        & #home-hero-overlay {
            height: 700px;          /*had to incease overlay to match photo to cover it.*/
        }
    }
}
/*End of Hero section beach background media queries.*/

/*Styles for About ASAP Search, id=home-about.*/
#home-about {
    grid-row: 2/span 1;     /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
    padding: 2rem;
     /*Home page Heading*/
     & h1 {
        text-align: center;
        /*padding-top: 1rem;*/        /*not needed due to section top padding.*/
        padding-bottom: 1rem;    /*was 2rem; earlier was 0.75rem*/
        color: var(--flag-blue);
        /*For smallest mobile, it stays two lines (name/title) until it goes to medium mobile.  The media queries below adds padding to keep the two lines
        for medium mobile and all larger screens where two lines become one line.*/
        /*padding-left: 1rem;
        padding-right: 1rem;*/
        /*width: clamp(100px, 95%, 800px);*/  /*min, default, max.   Have text stay two lines (name/title) until can fit on one line.*/
    }
    & h2 {
        text-align: center;
        padding-top: 1rem;
        padding-bottom: 2rem;    /*was 0.75rem*/
        color: var(--flag-blue);
    }
    & h3 {
        color: var(--flag-red);
        padding-bottom: 1.5rem;
        padding-top: 1.5rem;      /*added when stacked in mobile view*/
    }
    & p {
        padding-bottom: 1.5rem;
        color: var(--off-black);
    }
    & p#last-para-home {
        padding-bottom: 2rem;
    }
}


/*Styles for automatic slideshow on home page.*/
.mySlides {display: none;}
img.slideshow-home {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 62.5rem;  /*1000px = 62.5rem*/
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;   /*#f2f2f2*/
  font-size: 1.25rem; /*was 1rem. 1.5rem might be too large. Media Query makes smaller on mobile device.  might need original to not overun mobile views on text, which was 1rem.    before that was 15px*/
  padding: 0.5rem 0.75rem;     /*8px 12 px = 0.5rem 0.75rem*/
  position: absolute;
  bottom: 0.5rem;    /*8px*/
  width: 100%;
  text-align: center;

/*the following two function, but they don't look the best.  An overlay is needed rgba(32 32 32 0.4) is hex #202020 at 40% opacity.*/
/*  -webkit-text-stroke: .25px black;
  font-weight: 600;*/
  text-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.2);  /*This helps and is used in the hero section text.*/

  /*I don't see where this works perhaps z index is needed.  It's still not working as an overlay.  I applied a linear gradient to the bottom of
  each photo in Lightroom.*/
  /*background-color: rgba(32 32 32 0.4);
  z-index: 5;*/
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;   /*#f2f2f2*/
  font-size: 1rem;  /*was 0.75rem     was 12px*/
  padding: 0.5rem 0.75rem;   /*8px 12 px = 0.5rem 0.75rem*/
  position: absolute;
  top: 0;

  text-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.2);  /*This helps and is used in the hero section text.*/
}

/* The dots/bullets/indicators */
.dot {
  height: 1rem;  /*15px*/
  width: 1rem;
  margin: 0 0.125rem;   /*2px*/
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: rgba(32, 32, 32, 0.7);   /*The new is from the Hero photo overlay is was 0.4 opacity.   It was #717171.  This seems to only affect the dots below the picture and not a photo overlay.*/
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size on automated slideshow*/
@media only screen and (max-width: 300px) {
  .text {font-size: 0.69rem}    /*11px*/
}
/*End of Styles for automatic slideshow on home page.*/


/*Transition from mobile to tablet view. (932px also works.)  It was 700px but goes side by side too soon and slidshow is too small; adjusting flex-basis will make text too long, so increased px for media Q.*/
@media only screen and (min-width: 934px) {
    #home-about-container {
        display: flex;
        gap: 2em;
    }
    #home-about {
        & #home-about-logo-text-container {
        display: flex;
        flex-direction: column;  /*default is row, change to column*/
        justify-content: space-around;  /*vertical alignment for the logo and hands reaching out photo. space-around or space-evenly*/
        align-items: center;  /*Centers horizontally the logo when smaller than 100%, a child element, of this container*/
       /* align-content: space-evenly;*/
       padding-bottom: 2rem;  /*need to even up the two containers at the bottom, which makes a better column alignment and bottom spacing.*/
    }
        & h3 {
            padding-top: 0rem;    /*was 3rem.  above is 1.5 rem for stacked mobile view; need to remove it for side by side tablet and laptop view.*/
        } 
        & #home-about-text {
        flex-basis: 110%;  /* was 250%, 300%, too wide.     width of default about text container.  Other container with hhlogo grows.*/
}
}
}

@media only screen and (min-width: 1594px) {
    #home-about {
    & #home-about-text {
        flex-basis: 125%;   /*Looks ok at 110%, better with auto (good but text gets wide and slidshow too small) or 125% (balanced & slidshow large enough)     was 60%,      width % of default about text container.  Other container with hhlogo grows.*/
    } 
    }
}
/*End of Styles for About ASAP Search id=home-about.*/


/*Styles for Our Customers focusing on services offered.  id=home-Services section*/
#home-services {
    /*grid-area: sidebar;*/
    grid-row: 3/span 1;     /*Reference main element's nested grid.*/
    grid-column: 1/span 12;
    padding: 2rem 1rem 2rem 1rem;     /*12px is 0.75rem, which is equivalent. 16px = 1rem. was 1rem*/
    background-color: var(--warm-beige);       /*was var(--lt-gray-background);*/
    & img {                 /*was & img and I made more specific & .card-images but the border radius still didn't work.*/
      /*  width: min(50%, 2048px); */     /*display 50% of parent container; max native width of photo--DON'T USE.*/
      /*width: clamp(150px, 100%, 600px);*/  /*min, to display 100% of parent container, Max--here less than native photo width but works well for large layouts*/
      width: 90%;        /* 90% foir 3:4 img crop.  Don't need above img clamp above because I have the responsive class, so image won't grow beyond 100%, and 60% container width works with square images.*/
      display: block;
      margin: 0 auto;
      padding-top: 1rem;
      padding-bottom: 1rem;
     /*border-radius: 5px;*/
    }
    }      /*This could be incorporated using the & div and & a*/
#home-connecting div {
    padding-bottom: 0.5rem;  /*8px*/
        }

p#services-text {
    color: var(--off-black);   /*var(--mid-gray)*/
    padding-top: 2rem;
    padding-bottom: 2rem;
    text-align: center;
    font-size: 1em;
    width: clamp(130px, 80%, 800px);   /*200px 80% 500px*/
    margin: 0 auto;
    text-wrap: balance;  /*This overwrites the css above of text-wrap: pretty; style applied to all html p tags.  This p tag acts like a heading rather
        than as body text as most p tags.  Therefore, I have to overite it to have a balanced heading look of Balanced rather than just the orphan control offered by
        Pretty. Balance: balances heading that breaks evenly across lines.  max about 6 lines.  The side padding to restrict the text width is no longer needed.*/
}

/*Styles for Our Customer Services Cards.*/
#card-title {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 0.75rem;
    color: var(--flag-blue);
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 90%; /*Controls width of the card and thus the included photo. 20% for large screens. 40% mid screens. 95%-100% small screens with 4 cards.  90% then 40% for larger screens for 2 cards.*/
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: var(--light-menu);  /*was --off-white*/
    min-width: 200px;   /*Less than 200px is where text begins to overflow the card.*/
 /*added to try to get pictures to line up.*/
    /*display: flex;*/                  /* REMOVE display: flex from here so it doesn't conflict */
    /*flex-direction: column;*/
    align-items: center;
    /*gap: 0.5em;*/    /*was 1em, then .75em, 0.5em looks better.  Could use 0.5em (based on container) or 0.5rem (based on 16px root element)  controls the gap between the title, text, image*/
  /*moved from card-text-container*/
    /*padding: 16px; */     /*T&B and L&R   was 2px 16px; changed to 16px all*/
    text-align: center;
/* NEW: Apply flexbox directly to the link wrapping your content */
    & .home-cards-no-underline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    padding: 16px; 
    height: 100%; /* Forces the link to take up the full card height */
    box-sizing: border-box;
    text-decoration: none; /* Keeps your link styles clean */
}
    & h3 {
        color: var(--flag-red);
      /*  padding: 0.25rem 0; */
    }
    & p {
        color: var(--off-black);     /*var(--mid-gray)*/
        flex-grow: 1;               /*This works to keep the pictures at the bottom aligned even with the text is on different lines.*/
    }
  }
/*To ensure compatibility across all browsers regardless of text wrapping calculations, anchors the top margin of the card image.*/
#home-services & img {                 
    width: 90%;        
    display: block;
    margin: 0 auto;
    margin-top: auto; /* ADD THIS: Automatically pushes the image to the bottom boundary */
    padding-top: 1rem;
    padding-bottom: 1rem;
}
/*The following are contained inside the .card class, so try using &... and include them in the .card style rules.*/
  .card:hover {
        /* Scale the card up by 6% on hover */
        transform: scale(1.06); 
        /* Enhance the shadow for a more pronounced effect */
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
        
        /*cursor: pointer;*/
   /* box-shadow: 0 12px 20px 0 rgba(187,60,60,0.2); */  /*0 8px 16px and rgba(187,60,60,0.2)*/
    /*border: 2px solid var(--accent-red);*/
  }
/*This conceal and reveals the Read More hidden text*/
/*Hides the hidden text*/
.card-hidden-text {
  opacity: 0;                 /* Completely invisible initially */
  transform: translateY(10px); /* Positioned slightly lower */
  /*margin-top: 2px;*/    /*was 12px*/
  color: var(--flag-red);
  font-weight: bold;
  font-size: 1.25rem;
  /* Animate opacity and movement smoothly */
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
/*Reveals the hidden text on hover */
.card:hover .card-hidden-text {
  opacity: 1;                /* Make perfectly visible */
  transform: translateY(0);  /* Slide smoothly up to its natural spot */
}
  
  #card-container {
      display: flex;
      justify-content: space-evenly;  /*space-around; --works ok.   was center; --worked fine.  was space-evenly; --didn't work.     could use center and space with padding on the card div.*/
  
     flex-direction: row;                /*flex-direction: column; for mobile view. shows cards vertically.  Row is Default*/
     flex-wrap: wrap;
     padding: 1em;
  /*   padding: 5em 0;  */   /*space above and below container between title and bottom.*/
  /*justify-content: center;*/
  /*column-gap: 2em;*/      /*With Center, column-gap is needed.  Note:  gap: 2em; is shorthand for row-gap: 2em; and column-gap: 2em; applying the same spaceing to both vertical and horizontal directions*/
    row-gap: 2em;  /*This controls space between when cards are stacked one over the other, mobile view.*/
  }
  /*was min-width: 600px.  I need to have it transition from over and under to side-by-side at a larger screen size so cards aren't so narrow and title for Hiring Companies doesn't wrap.*/
  @media only screen and (min-width: 700px) {
    .card {
      width: 40%;
    }
    #card-container {
        /*padding-bottom: 2em;*/   /*No impact on bottom padding*/
        margin-bottom: 1em;   /*bottom margin works.*/
    /*    column-gap: 2em; */    /*controls space between when cards are side-side when justify-content: center;    Otherwise, it's not needed unless I want more space between the cards.*/
    }
  }

/*Home page cards.  Once linked the entire card, image and text, must remove the underline and keep color funtion of black text before and
after visiting "clicking" on the link.   Also, must retain h2 turning red on hover.  The outline of the box with red from above
code is not affected.  This retains the original functioning of the cards that are now linked.*/
a.home-cards-no-underline:link, a.home-cards-no-underline:visited {
    text-decoration: none;
    /*color: black;*/
}

a.home-cards-no-underline:visited h3, a.home-cards-no-underline:visited p {
    text-decoration: none;
    /*color: black;*/
}
/*End of Home page card stytes to retain styles after linking the cards.*/
/*End of Styles for Our Customers Services Cards*/
/*End of Styles for Our Customers Services section*/

/*footer styles begin--mobile first approach.*/
footer {
    grid-row: 3/span 1;
    grid-column: 1/span 12;
 /*   background-color: var(--accent-green);*/
    background-color: var(--off-black-background);
    /*footer's subgrid below*/
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
/*Footer's five div classes.  Reference the Footer's nested grid.*/
.footer-mission-statement {
    grid-row: 1/span 1;
    grid-column: 1/span 12;
    padding: 2rem 1rem 1rem 1rem;
    text-align: center;
    & h3 {
        padding-bottom: 0.75rem;
        color: var(--off-white); 
        padding-top: 2rem;
    }
    & p {
        color: var(--off-white)
    }
    & #hhlogo-footer{
        width: 150px;
    }
}
/*Styles for contact us icons before text in Footer*/
div.contact-icon-group-footer {
    display: flex;
    align-items: center;   /*vertical alignment*/
    justify-content: center;   /*horizontal alignment*/
    padding-bottom: 0.5rem;
    /*padding-left: 1rem;*/
}
.footer-menu-links {
    grid-row: 2/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
    text-align: center;
    & h3 {
        color: var(--off-white); 
        padding-bottom: 0.75rem;
    }
}
.footer-nav-links {
    & ul {
       list-style: none;
    /*   background-color: var(--off-black);*/
    }
    & a {
        text-decoration: none;
        color: var(--off-white);
    }
    & li {
        padding-bottom: 0.25rem;
    }
    & a:hover, a:focus {
        color: var(--lt-gray-blue);
    }
}
.footer-social-links {
    grid-row: 3/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
    text-align: center;
    & h3 {
        color: var(--off-white);    
        padding-bottom: 0.75rem;
    }
}
/*footer social icon transiton on hover or focus.  To get opposite effect, change white to gray and gray to white.*/
img.social-gray {
            display: none;
        }

        /*For hover effect to work smoothly, size the container div to the same size as the icon, the Smaller Icon, 64px,  works well without
        the transition occuring too early as the cursor approaches the icon.  The Icons are 64px by 64px*/
        div.social-swap-div {
            width: 40px;    /*was 64px for all.  32px works well. 40px works good, too.*/
            height: 40px;
            & img {
                width: 40px
            }
        }

        div.social-swap-div:hover {
            & img.social-gray{
                display: block;
            }
            & img.social-white{
                display: none;
            }
        }/*End social icon transition*/

.footer-social-icon-container {
    display: flex;
    justify-content: center;
    column-gap: 1.75rem;
    padding-bottom: 0.75rem;
}

/*footer line styles*/
.footer-line {
    grid-row: 4/span 1;
    grid-column: 1/span 12;
    padding: 1rem;
}
.horizontal-line-footer {
     /*Resets user agent stylesheet in Edge and Chrome.  This gets rid of a blemish on the left side.  It removes some browser styles*/
    margin-block-start: 0;
    margin-block-end: 0;
    border-style: none;
    border-top: 2px solid var(--off-white);      /*was 4px like the other horizontal lines.*/
  /*padding: 1rem 0; */   /*Don't use padding on the line as it will expand its width.  Use it on elements above and below the line.*/
    width: calc(100%-6em);       /*was 5.5em like the other horizontal lines*/
    margin-left: auto;      /*centers*/
    margin-right: auto;
    border-radius: 5px;  /*rounds edges*/
}
/*end footer line styles*/

/*footer copyright styles*/
.footer-copyright-date {
    grid-row: 5/span 1;
    grid-column: 1/span 12;
    padding: 1rem 1rem 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    & p:last-of-type{
        padding-bottom: 2rem;
    }
    & p {
        color: var(--off-white);
    }
}
/*large mobile to tablet view of contact us section.*/
@media only screen and (min-width: 760px) {
    .footer-copyright-date {
        flex-direction: row;
        column-gap: .4rem;
        padding: 0 1rem;
        & p {
            padding-bottom: 2rem;
        }
}
}  /*End footer copyright styles*/

/*Footer styles for larger screens.*/
/*From Mobile to Tablet View.*/
@media only screen and (min-width: 760px) {
.footer-mission-statement {
    grid-row: 1/span 1;
    grid-column: 1/span 4;
    padding-left: 2rem;
}
.footer-menu-links {
    grid-row: 1/span 1;
    grid-column: 5/span 4;
    /*padding-left: 2rem;*/
    padding-top: 2rem; 
}
.footer-social-links {
    grid-row: 1/span 1;
    grid-column: 9/span 4;
    padding-top: 2rem;        /*2rem     5rem--great for tablet.  laptop calc(5rem - 5%)   or calc(5rem - 4em)*/
    padding-right: 2rem;
}
.footer-line {
    grid-row: 2/span 1;
    grid-column: 1/span 12;
}
.footer-copyright-date {
    grid-row: 3/span 1;
    grid-column: 1/span 12;
    & p, p:last-of-type {
    padding-bottom: 3rem;
    }
}
}
/*End of Footer styles for larger screens.*/

/*Styles for About Us page*/
#about-title-area {
    grid-row: 1/span 1;         /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
  /*  padding: 1rem; */ /*Don't apply here as it insets the image overlay. Apply padding to h1 and button to view image. Don't overflow section.  */

    /*background-image: url("../images/web-23.jpg");*/  /*To get out of styles folder use ../  */
    background: linear-gradient(0deg, var(--flag-red) 15%, var(--flag-blue) 70%);
    /*background-repeat: no-repeat;
    background-size: cover;*/       /*(was 100% auto; is Full width, proportional height.)  Cover works great for mobile views. Change to 100% auto for larger views so can crop image--made no difference.*/
                                /*150% zooms in on the background photo not overrunning the sides.  80% shrinks background photo smaller than container.*/
    /*background-position: center;*/

    height: 50px;   /*was 200px too much.  controls the neight of the section with the photo.  the overlay must match it!*/

    /*box-shadow: "0px 4px 4px 0px #000040, inset 0 0 0 1000px rgba(0,0,0,0.5)";*/

    & p {  /*was h1 for page title, changed to p tag*/
        font-family: "Sora", Arial, Helvetica, sans-serif;  /*Overides the default font SourceSans3 for p to make it the Sora font of h1 h2 h3.*/
        color: var(--off-white);
        text-align: center;
        text-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.2);
        font-size: 2rem;
        /*z-index: 3;*/
        /*padding-top: 1.2rem;*/    /*1.1 better for largest screen 4K. or 1.2rem*/
        /*padding: 1.1rem 0.3rem 0.3rem 0.3rem;*/  /*top padding 1.1rem with 100px height; top was 4rem with 200px height.  Take care not to overflow container for various screen sizes. This was 1rem, changed to 0.3rem, top 4rem to 6rem*/
        /*width: clamp(100px, 95%, 800px);*/    /*was width: clamp(100px, 95%, 900px); change fixes h1 making consistent across all screens.*/
       /* width: clamp(100px, 90%, 800px); */ /*This looks good for Tablet and above.*/  
           /*min, default, max.  When add width clamp, the item left aligns. Need wrapper div to center.*/
        margin: 0 auto;    /*Centers a block-level element. No style nneded for the parent element to center horizontally.  This was needed when the size clamp was added.*/
        text-wrap: balance;  /*balanced heading that breaks evenly across lines.  max about 6 lines. Keeps "Experience" from being on a line by itself unless in mobile 
        view where the screen is small. Use on headings not body text.  for body use pretty.*/
    }
}

#about-about-us {
    grid-row: 2/span 1;     /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
    padding: 2rem 2rem 0 2rem;            /*was 2rem but don't need on bottom with photos below.*/
    /*About Us page Heading*/
     & h1 {
        text-align: center;
        /*padding-top: 1rem;*/          /*was 1rem*/
        padding-bottom: 1rem;    /*was 2rem; earlier was 0.75rem*/
        color: var(--flag-blue);
        /*For smallest mobile, it stays two lines (name/title) until it goes to medium mobile.  The media queries below adds padding to keep the two lines
        for medium mobile and all larger screens where two lines become one line.*/
        /*padding-left: 1rem;
        padding-right: 1rem;*/
        /*width: clamp(100px, 95%, 800px);*/  /*min, default, max.   Have text stay two lines (name/title) until can fit on one line.*/
    }
    & h2 {
        text-align: center;
        padding-top: 1rem;
        padding-bottom: 2rem;    /*was 0.75rem*/
        color: var(--flag-blue);
        /*For smallest mobile, it stays two lines (name/title) until it goes to medium mobile.  The media queries below adds padding to keep the two lines
        for medium mobile and all larger screens where two lines become one line.*/
        /*padding-left: 1rem;
        padding-right: 1rem;*/
        /*width: clamp(100px, 95%, 800px);*/  /*min, default, max.   Have text stay two lines (name/title) until can fit on one line.*/
    }
    & h3 {
        color: var(--flag-red);
        padding-bottom: 1.5rem;
        /*padding-top: 1.5rem;*/      /*When used in the middle of a paragraph, don't use top padding.   originally added when stacked in mobile view*/
    }
    & p {
        padding-bottom: 1.5rem;
        color: var(--off-black);
    }
    & p#last-para-about {
        padding-bottom: 2rem;
    }
}
/*Beginning styles for the three photos at bottom of the About Us page.*/
#about-photo-gallery {
    grid-row: 3/span 1;     /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
    padding: 0 2rem 3rem 2rem;  /*keeps sides even with text for mobile view*/
}
/*About Us page three photos mobile first*/
.about-photo-container {
    display: flex;
    /* Flex-direction column handles the stacking order */
    flex-direction: column; 
    /* Gap handles spacing between elements without margin collapse issues */
    gap: 16px; 
    width: 100%;
    max-width: 1200px;  /*was 1200px.  could change to 1500px for large screens*/
    margin: 0 auto;
}

.about-photo-item {
    width: 100%;
}

.about-photo-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}
/*About Us page photo adjustments for larger screens*/
@media screen and (min-width: 768px) {
    .about-photo-container {
        /* Flips the stacked items to be side by side */
        flex-direction: row; 
    }

    .about-photo-item {
        /* Ensures both elements take up exactly 50% width minus the gap.  I changed to 3 elements. */
        flex: 1; 
    }
}
@media screen and (min-width: 1700px) {
    & .about-photo-container {
        max-width: 1500px;
    }
}
/*End of styles for three photos at the bottom of the About Us page.*/

/*About Us page, Keeps two lines (name on top and title on bottom) for medium mobile and then for all larger screens until the two lines both fit on one line.*/
@media only screen and (min-width: 370px) {
    #about-about-us {
       & h2 {
        padding-left: 10%;
        padding-right: 10%;
        }
    }
}
@media only screen and (min-width: 470px) {
    #about-about-us {
       & h2 {
        padding-left: 18%;
        padding-right: 18%;
        }
    }
}
@media only screen and (min-width: 550px) {
    #about-about-us {
       & h2 {
        padding-left: 0;
        padding-right: 0;
        }
    }
}
/*Styles for the About Us text below the (name/title).  This contains the text so it doesn't become too wide.*/
@media only screen and (min-width: 765px) {
#about-about-us-text {
    padding-left: 8%;
    padding-right: 8%;
}
}
/*End of Styles for About Us page*/

/*Styles for Job Search page*/
#job-search-title-area {
    grid-row: 1/span 1;         /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
  /*  padding: 1rem; */ /*Don't apply here as it insets the image overlay. Apply padding to h1 and button to view image. Don't overflow section.  */

    /*background-image: url("../images/web-23.jpg");*/  /*To get out of styles folder use ../  */
    background: linear-gradient(0deg, var(--flag-red) 15%, var(--flag-blue) 70%);
    /*background-repeat: no-repeat;
    background-size: cover;*/       /*(was 100% auto; is Full width, proportional height.)  Cover works great for mobile views. Change to 100% auto for larger views so can crop image--made no difference.*/
                                /*150% zooms in on the background photo not overrunning the sides.  80% shrinks background photo smaller than container.*/
    /*background-position: center;*/

    height: 50px;   /*was 200px too much.  controls the neight of the section with the photo.  the overlay must match it!*/

 /*   box-shadow: "0px 4px 4px 0px #000040, inset 0 0 0 1000px rgba(0,0,0,0.5)"; */

    & p {  /*was h1 for page title, changed to p tag*/
        font-family: "Sora", Arial, Helvetica, sans-serif;  /*Overides the default font SourceSans3 for p to make it the Sora font of h1 h2 h3.*/
        color: var(--off-white);
        text-align: center;
        text-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.2);
        font-size: 2rem;
        /*z-index: 3;*/
        /*padding-top: 1.2rem;*/    /*1.1 better for largest screen 4K. or 1.2rem*/
        /*padding: 1.1rem 0.3rem 0.3rem 0.3rem;*/  /*top padding 1.1rem with 100px height; top was 4rem with 200px height.  Take care not to overflow container for various screen sizes. This was 1rem, changed to 0.3rem, top 4rem to 6rem*/
        /*width: clamp(100px, 95%, 800px);*/    /*was width: clamp(100px, 95%, 900px); change fixes h1 making consistent across all screens.*/
       /* width: clamp(100px, 90%, 800px); */ /*This looks good for Tablet and above.*/  
           /*min, default, max.  When add width clamp, the item left aligns. Need wrapper div to center.*/
        margin: 0 auto;    /*Centers a block-level element. No style nneded for the parent element to center horizontally.  This was needed when the size clamp was added.*/
        text-wrap: balance;  /*balanced heading that breaks evenly across lines.  max about 6 lines. Keeps "Experience" from being on a line by itself unless in mobile 
        view where the screen is small. Use on headings not body text.  for body use pretty.*/
    }
}

#job-search-about-job-search {
    grid-row: 2/span 1;     /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
    padding: 2rem;
    /*Job Search page Heading*/
     & h1 {
        text-align: center;
        /*padding-top: 1rem;*/          /*was 1rem*/
        padding-bottom: 1rem;    /*was 2rem; earlier was 0.75rem*/
        color: var(--flag-blue);
    }
    & h3 {
        color: var(--flag-red);
        padding-bottom: 1rem;     /*was 1.5rem however it needs to be smaller so the ul is closer to the ul title*/
    }
    & p {
        padding-bottom: 1.5rem;
        color: var(--off-black);
    }
    & p#last-para-job {
        padding-bottom: 1rem;  /*was 2rem but the Top Echelon has top padding so reduce this.*/
    }
    & ul {
        /*list-style-position: inside;*/  /*this moves the bullets inside the ul so they lineup with the text.  If don't line up look at any padding.*/
         /*The problem with "inside" is it causes text to wrap under the bullet.  "Outside" is default and text doesn't wrap under the bullet.*/
        padding-left: 1.25rem;    /*on the Ul element, this moves the bullets over to the right so they line up with the text.*/
        padding-bottom: 1.5rem;
        
    }
}
/*Styles for the Job Search page text.  This contains the text so it doesn't become too wide.*/
@media only screen and (min-width: 765px) {
#job-search-job-text {
    padding-left: 8%;
    padding-right: 8%;
}
}
/*End of Styles for Job Search page*/

/*Styles for Testimonials page*/
#testimonials-title-area {
    grid-row: 1/span 1;         /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
  /*  padding: 1rem; */ /*Don't apply here as it insets the image overlay. Apply padding to h1 and button to view image. Don't overflow section.  */

    /*background-image: url("../images/web-23.jpg");*/  /*To get out of styles folder use ../  */
    background: linear-gradient(0deg, var(--flag-red) 15%, var(--flag-blue) 70%);
    /*background-repeat: no-repeat;
    background-size: cover;*/       /*(was 100% auto; is Full width, proportional height.)  Cover works great for mobile views. Change to 100% auto for larger views so can crop image--made no difference.*/
                                /*150% zooms in on the background photo not overrunning the sides.  80% shrinks background photo smaller than container.*/
    /*background-position: center;*/

    height: 50px;   /*was 100px; 200px too much.  controls the neight of the section with the photo.  the overlay must match it!*/

 /*   box-shadow: "0px 4px 4px 0px #000040, inset 0 0 0 1000px rgba(0,0,0,0.5)"; */

     & p {  /*was h1 for page title, changed to p tag*/
        font-family: "Sora", Arial, Helvetica, sans-serif;  /*Overides the default font SourceSans3 for p to make it the Sora font of h1 h2 h3.*/
        color: var(--off-white);
        text-align: center;
        text-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.2);
        font-size: 2rem;
        /*z-index: 3;*/
        /*padding-top: 1.2rem;*/    /*1.1 better for largest screen 4K. or 1.2rem*/
        /*padding: 1.1rem 0.3rem 0.3rem 0.3rem;*/  /*top padding 1.1rem with 100px height; top was 4rem with 200px height.  Take care not to overflow container for various screen sizes. This was 1rem, changed to 0.3rem, top 4rem to 6rem*/
        /*width: clamp(100px, 95%, 800px);*/    /*was width: clamp(100px, 95%, 900px); change fixes h1 making consistent across all screens.*/
       /* width: clamp(100px, 90%, 800px); */ /*This looks good for Tablet and above.*/  
           /*min, default, max.  When add width clamp, the item left aligns. Need wrapper div to center.*/
        margin: 0 auto;    /*Centers a block-level element. No style nneded for the parent element to center horizontally.  This was needed when the size clamp was added.*/
        text-wrap: balance;  /*balanced heading that breaks evenly across lines.  max about 6 lines. Keeps "Experience" from being on a line by itself unless in mobile 
        view where the screen is small. Use on headings not body text.  for body use pretty.*/
    }
}

#testimonials-testimony {
    grid-row: 2/span 1;     /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
    padding: 2rem;
    background-color: #f2e8dc;
    /*Testimonials page Heading*/
     & h1 {
        text-align: center;
        /*padding-top: 1rem;*/          /*was 1rem*/
        padding-bottom: 1rem;    /*was 2rem; earlier was 0.75rem*/
        color: var(--flag-blue);
        /*For smallest mobile, it stays two lines (name/title) until it goes to medium mobile.  The media queries below adds padding to keep the two lines
        for medium mobile and all larger screens where two lines become one line.*/
        /*padding-left: 1rem;
        padding-right: 1rem;*/
        /*width: clamp(100px, 95%, 800px);*/  /*min, default, max.   Have text stay two lines (name/title) until can fit on one line.*/
    }
    & h2 {
        text-align: center;
        padding-top: 1rem;
        /*padding-bottom: 2rem;*/    /*was 2rem but no longer need with quote card container padding.   long ago 0.75rem*/
        color: var(--flag-blue);
        /*For smallest mobile, it stays two lines (name/title) until it goes to medium mobile.  The media queries below adds padding to keep the two lines
        for medium mobile and all larger screens where two lines become one line.*/
        /*padding-left: 1rem;
        padding-right: 1rem;*/
        /*width: clamp(100px, 95%, 800px);*/  /*min, default, max.   Have text stay two lines (name/title) until can fit on one line.*/
    }
}

/* 1. Base Styles (Mobile First) Quote Card Styles on Testimonials page*/
.quote-container {
  display: grid;
  grid-template-columns: 1fr; /* Single column on mobile */
  gap: 16px;
  padding: 16px;
}

.quote-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Pushes the author to the bottom */
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  position: relative;
  background: #ffffff;
  border: 2px solid #e2e8f0; /* Clear baseline border */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

/* Large decorative quotation mark background */
.quote-card::before {
  content: "“";
  position: absolute;
  top: -45px;   /*was -20px but text covers it.*/
  left: 10px;
  font-size: 8rem;
  font-family: serif;
  color: #edf2f7; /* Solid baseline color */
  transition: color 0.3s ease;
  z-index: -1;
}

/* Hover Effect: Smooth color change */
.quote-card:hover {
  border-color: #1a4fbe; /* Changes color of border on hover */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Changes the quote mark color simultaneously on hover */
.quote-card:hover::before {
  color: #cbd5e0; /* Deepens the quote mark color */
}

.quote-text {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 16px;
  margin-top: 16px;  /*new*/
}

.quote-author {
  font-weight: bold;
  font-size: 0.95rem;
  color: #1a4fbe;
  margin-top: 16px;   /*new*/
  margin-bottom: 16px;  /*new*/
}
/*End of mobile first Quote Card Styles on Testimonials page*/

/*Retaining this style from earlier pages seems to help the h2 for medium mobile, so keep.*/
@media only screen and (min-width: 370px) {
    #testimonials-testimony {
       & h2 {
        padding-left: 10%;
        padding-right: 10%;
        }
    }
}
@media only screen and (min-width: 470px) {
    #testimonials-testimony {
       & h2 {
        padding-left: 18%;
        padding-right: 18%;
        }
    }
}

/*Tablet Layout (Screens 600px and up) was 600px for the Quote Cards-Testimonials*/
@media (min-width: 650px) {
  .quote-container {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 20px;
    padding: 24px;
  }
}

/*Styles for the Testimonials text.  This contains the text so it doesn't become too wide.*/
@media only screen and (min-width: 765px) {
#testimonials-testimony-text {
    padding-left: 8%;
    padding-right: 8%;
}
}
/*Desktop Layout (Screens 1024px and up) for the Quote Cards-Testimonials */
@media (min-width: 1024px) {
  .quote-container {
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto; /* Centers the whole grid on large screens */
  }
}
/*End of Styles for Testimonials page*/

/*Styles for Tips page*/
#tips-title-area {
    grid-row: 1/span 1;         /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
  /*  padding: 1rem; */ /*Don't apply here as it insets the image overlay. Apply padding to h1 and button to view image. Don't overflow section.  */

    /*background-image: url("../images/web-23.jpg");*/  /*To get out of styles folder use ../  */
    background: linear-gradient(0deg, var(--flag-red) 15%, var(--flag-blue) 70%);
    /*background-repeat: no-repeat;
    background-size: cover;*/       /*(was 100% auto; is Full width, proportional height.)  Cover works great for mobile views. Change to 100% auto for larger views so can crop image--made no difference.*/
                                /*150% zooms in on the background photo not overrunning the sides.  80% shrinks background photo smaller than container.*/
    /*background-position: center;*/

    height: 50px;   /*was 100px; much earlier was 200px too much.  controls the height of the section with the photo.  the overlay must match it!*/

 /*   box-shadow: "0px 4px 4px 0px #000040, inset 0 0 0 1000px rgba(0,0,0,0.5)"; */

     & p {  /*was h1 for page title, changed to p tag*/
        font-family: "Sora", Arial, Helvetica, sans-serif;  /*Overides the default font SourceSans3 for p to make it the Sora font of h1 h2 h3.*/
        color: var(--off-white);  /*tried --flag-yellow*/
        text-align: center;
        text-shadow: 2.5px 2.5px 0 rgba(0, 0, 0, 0.2);
        font-size: 2rem;  /*was 1.5em; was 2.4em*/
        /*z-index: 3;*/
        /*padding-top: 0;*/   /*was .15em; was 1.2rem;  note 1.1 better for largest screen 4K. or 1.2rem*/
        /*padding: 1.1rem 0.3rem 0.3rem 0.3rem;*/  /*top padding 1.1rem with 100px height; top was 4rem with 200px height.  Take care not to overflow container for various screen sizes. This was 1rem, changed to 0.3rem, top 4rem to 6rem*/
        /*width: clamp(100px, 95%, 800px);*/    /*was width: clamp(100px, 95%, 900px); change fixes h1 making consistent across all screens.*/
       /* width: clamp(100px, 90%, 800px); */ /*This looks good for Tablet and above.*/  
           /*min, default, max.  When add width clamp, the item left aligns. Need wrapper div to center.*/
        margin: 0 auto;    /*Centers a block-level element. No style nneded for the parent element to center horizontally.  This was needed when the size clamp was added.*/
        text-wrap: balance;  /*balanced heading that breaks evenly across lines.  max about 6 lines. Keeps "Experience" from being on a line by itself unless in mobile 
        view where the screen is small. Use on headings not body text.  for body use pretty.*/
    }
}
/*Tips page container positions reletive to the Mains' nested grid and the container color, which stretches across the screen.*/
#tips-container-note {
    grid-row: 2/span 1;     /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
}
#tips-container-work {
    grid-row: 3/span 1; 
    grid-column: 1/span 12;
    background-color: var(--warm-beige); 
}
#tips-container-behavioral {
    grid-row: 5/span 1; 
    grid-column: 1/span 12; 
}
#tips-container-change {
    grid-row: 6/span 1; 
    grid-column: 1/span 12;
    background-color: var(--lt-gray-background); 
}
#tips-container-vocation {
    grid-row: 7/span 1; 
    grid-column: 1/span 12;
}

/*beginning of styles for the one and two column layout for the three lists in the Behaviorial article on Tips page.*/
/*Mobile-First Default Style (Single Column) for the two column layout on the lists in the behaviorial article on Tips page
Note: I named to two html column divs with ids tips-behavioral-left-column and tips-behavioral-right-column but never needed those ids for css styling.*/
#tips-behavioral-two-column {
        display: grid;
        grid-template-columns: 1fr; /* Forces a single column layout */
        /*gap: 20px;*/                  /* Generates spacing between stacked columns */
    }
    /*Large Screen for Two Column Layout of lists in the Behaviorial article on the Tips page */
@media (min-width: 768px) {
    #tips-behavioral-two-column {
        /* Splits into two equal columns when screen width hits 768px or wider */
        grid-template-columns: 1fr 1fr;
        gap: 3.5rem;   /*was 1.5rem    space between columns.  Could use column-gap*/
  }
}
/*end of Tips for the one and two column layout for the three lists in the Behaviorial article on Tips page.*/

/*Tips page containers' general styles applied to all containers*/
#tips-container-note, #tips-container-work, #tips-container-behavioral, #tips-container-change, #tips-container-vocation {
    /*grid-row: 2/span 1;*/     /*Refers to Main's nested grid.*/
    /*grid-column: 1/span 12;*/
    padding: 1rem 2rem 0 2rem;    /*was 1rem 2rem 1rem 2rem; ealier was 2rem 2rem o 2 rem. even earlier was 2rem but don't need on bottom with photos below.*/
    /*Tips page Heading*/
     & h1 {
        text-align: center;
        padding-top: 1rem;          /*need on tips page due to section top padding.*/
        padding-bottom: 1rem;    /*was 2rem; earlier was 0.75rem*/
        color: var(--flag-blue);
        /*For smallest mobile, it stays two lines (name/title) until it goes to medium mobile.  The media queries below adds padding to keep the two lines
        for medium mobile and all larger screens where two lines become one line.*/
        /*padding-left: 1rem;
        padding-right: 1rem;*/
        /*width: clamp(100px, 95%, 800px);*/  /*min, default, max.   Have text stay two lines (name/title) until can fit on one line.*/
    }
    & h2 {
        text-align: center;
        padding-top: 1rem;
        padding-bottom: 2rem;    /*was 0.75rem*/
        color: var(--flag-blue);
        /*For smallest mobile, it stays two lines (name/title) until it goes to medium mobile.  The media queries below adds padding to keep the two lines
        for medium mobile and all larger screens where two lines become one line.*/
        /*padding-left: 1rem;
        padding-right: 1rem;*/
        /*width: clamp(100px, 95%, 800px);*/  /*min, default, max.   Have text stay two lines (name/title) until can fit on one line.*/
    }
    & h3 {
        color: var(--flag-red);
        padding-bottom: 1.5rem;
        /*padding-top: 1.5rem;*/      /*When used in the middle of a paragraph, don't use top padding.   originally added when stacked in mobile view*/
    }
    & p {
        padding-bottom: 1.5rem;
        color: var(--off-black);
    }
    & p#last-para-tips {
        padding-bottom: 3rem;  /*was 2rem*/
    }
    & ul {             
        /*list-style-position: inside;*/  /*this moves the bullets inside the ul so they lineup with the text.  If don't line up look at any padding.*/
         /*The problem with "inside" is it causes text to wrap under the bullet.  "Outside" is default and text doesn't wrap under the bullet.*/
        padding-left: 1.25rem;    /*on the Ul element, this moves the bullets over to the right so they line up with the text.*/
        padding-bottom: 1.5rem;
    }
    /*styling for the STAR yellow text & beginning list larger S-T-A-R letters.*/
    & .list-begin-larger {
        font-size: 1.5rem;
        color: var(--flag-red);    /*was --flag-yellow*/
        /*-webkit-text-stroke: 0.2px black;*/
        /*text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC;*/
       /*text-shadow: 0 1px #808d93, -1px 0 #cdd2d5, -1px 2px #808d93, -2px 1px #cdd2d5, -2px 3px #808d93, -3px 2px #cdd2d5, -3px 4px #808d93, -4px 3px #cdd2d5, -4px 5px #808d93, -5px 4px #cdd2d5, -5px 6px #808d93, -6px 5px #cdd2d5, -6px 7px #808d93, -7px 6px #cdd2d5, -7px 8px #808d93, -8px 7px #cdd2d5;*/
       /*text-shadow: 2px 2px 0px #FFFFFF, 5px 4px 0px rgba(0,0,0,0.15);*/
       /*text-shadow: 3px 5px 2px #474747;*/
      /* text-shadow: 2px 2px 0 #bcbcbc, 4px 4px 0 #9c9c9c;*/
      /*text-shadow: 1px 0px 1px #CCCCCC, 0px 1px 1px #EEEEEE, 2px 1px 1px #CCCCCC, 1px 2px 1px #EEEEEE, 3px 2px 1px #CCCCCC, 2px 3px 1px #EEEEEE, 4px 3px 1px #CCCCCC, 3px 4px 1px #EEEEEE, 5px 4px 1px #CCCCCC, 4px 5px 1px #EEEEEE, 6px 5px 1px #CCCCCC, 5px 6px 1px #EEEEEE, 7px 6px 1px #CCCCCC;*/

      /*text-shadow: 1px 3px 0 #969696, 1px 7px 3px #aba8a8, -17px -15px 1px rgba(206,89,55,0), 0px 0px 1px rgba(206,89,55,0);*/
      /*This last text shadow below looks ok with --flag-yellow text.  With the --flag-red it isn't needed.*/
      /*text-shadow: 1px 3px 0 #969696, 1px 5px 2px #aba8a8, -11px -8px 1px rgba(206,89,55,0), 0px 0px 1px rgba(206,89,55,0);*/
    }
    & #change-to-yellow {
        color: var(--flag-red);    /*was --flag-yellow*/
    }
    /*changes the color of the bullets, modern way.*/
    & li::marker {
        color: var(--flag-red); /* Change this to your preferred color */
    }
}
/*Beginning styles for the three photos at bottom of the Tips page.*/
#tips-photo-gallery {
    grid-row: 4/span 1;     /*Refers to Main's nested grid.*/
    grid-column: 1/span 12;
    padding: 1rem 2rem 1rem 2rem;  /* was 2rem 2rem 0 2rem  keeps sides even with text for mobile view*/
}
/*Tips page three photos mobile first*/
.tips-photo-container {
    display: flex;
    /* Flex-direction column handles the stacking order */
    flex-direction: column; 
    /* Gap handles spacing between elements without margin collapse issues */
    gap: 16px; 
    width: 100%;
    max-width: 1200px;  /*was 1200px.  could change to 1500px for large screens*/
    margin: 0 auto;
}

.tips-photo-item {
    width: 100%;
}

.tips-photo-item img {
    display: block;
    width: 100%;         
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}
/*Tips page photo adjustments for larger screens*/
@media screen and (min-width: 768px) {
    .tips-photo-container {
        /* Flips the stacked items to be side by side */
        flex-direction: row; 
    }

    .tips-photo-item {
        /* Ensures both elements take up exactly 50% width minus the gap.  I changed to 3 elements. */
        flex: 1;
        /*For two images less than 100% width, I had to add display: flex; and justify-content: center; to center the images in their container.
        This occurs when the images are side by side on the larger screens*/
        display: flex; 
        justify-content: center;         
    }

    .tips-photo-item img {
    width: 80%;     /*width: 100% was too large for larger screens when two images are side-by-side.*/
    }    
}
@media screen and (min-width: 1700px) {
    & .tips-photo-container {
        max-width: 1500px;
    }
}
/*End of styles for three photos at the bottom of the About Us page.*/

/*This was from About Us page, Keeps two lines (name on top and title on bottom) for medium mobile and then for all larger screens until the two lines both fit on one line.
This might be uncessary for the Tips page; however it seems to work fine.*/
@media only screen and (min-width: 370px) {
    #tips-container-note, #tips-container-work, #tips-container-behavioral, #tips-container-change, #tips-container-vocation {
       & h2 {
        padding-left: 10%;
        padding-right: 10%;
        }
    }
}
@media only screen and (min-width: 470px) {
    #tips-container-note, #tips-container-work, #tips-container-behavioral, #tips-container-change, #tips-container-vocation {
       & h2 {
        padding-left: 18%;
        padding-right: 18%;
        }
    }
}
@media only screen and (min-width: 550px) {
    #tips-container-note, #tips-container-work, #tips-container-behavioral, #tips-container-change, #tips-container-vocation {
       & h2 {
        padding-left: 0;
        padding-right: 0;
        }
    }
}
/*Styles for the Tips text below the title.  This contains the text so it doesn't become too wide.
was id so #tips-text. changed to class so .tip-text*/
@media only screen and (min-width: 765px) {
    .tips-text {
        padding-left: 8%;
        padding-right: 8%;
}
}
/*End of Styles for Tips page*/

/*limits the width of the webpage to 2000px and the webpage is centered when the screen exceeds 2000px.
margin: auto; on the body element centers the webpage.*/
@media only screen and (min-width: 2000px) {        
    body {
    max-width: 2000px;
    }
    }