/* Base layout */
  #client-talk {
    max-width: 100%;
  }

  .container {
   max-width: 1024px;
    margin: 0 auto;
  }

    .thehead {
    width: 100%;
    margin: 0 auto;
  }
  
  .outer-container.beige {
    display: flex;
    align-items: center;
    width: 100%;
    background-color:#f3ede5;
  }

    .outer-container.black {
    width: 100%;
    background-color:black;
  }

 /* ---------------------------------------------------------------------*/
    /* -- WIDE SCREEN    --------------------------------*/
    /* ---------------------------------------------------------------------*/

  @media (min-width: 768px) {

    html {
      width: 100%;
      overflow-x: hidden;
      scroll-padding-top: 50px;
      margin: 0 auto;
      padding: 0;
      border: 0;
      /* Equal to header height*/
    }

    body {
      margin: 0 auto;
      padding: 0 2px;
      border: 0;
    }

    main {
      margin-top: 70px;
    }

    header.header {
      height: 100px;
      width: 100%;
      padding: 0;
      padding-bottom: 0.5rem;
      margin: 0 auto;
      border-top: 2px #303730 solid;
      border-bottom: 1px rgba(84, 48, 8, 0.343) solid;
      position: fixed;
      top: 0;
      background-color: #faf9f8df;
      z-index: 100;
      /* Higher than other content */
    }

    .header nav {
      width: 100%;
      margin-bottom: 3px;
      margin-top: 3px;
      padding:0 0 0 0.5em;
    }

  

    .header nav a i.fa {
      font-family: "Font-Awesome", sans-serif;
      color: rgb(218, 19, 19);
      font-size: 1.1em;
      font-weight: bold;
      /* text-decoration: none; */
    }

    .header nav a:hover,
    .header nav a:focus {
      color: #9abca8;
      font-weight: bold;
    }

    .header nav a:hover i.fa,
    .header nav a:focus i.fa {
      color: #000;
    }

    .header nav a.current-page {
      color: #000;
    }

    .header nav ul {
      /* background-color: rgba(243, 237, 229, 0.59); */
    width: fit-content;
    float: right;
    border: 0 lime solid;
    display: flex;
    align-self: flex-end;
    list-style-type: none;
    margin-right: 2rem;
    padding-top: 63px;
    }

    .header nav li.button {
      padding: 5px 1px;
      /* margin-right: 5px; */
    }

    .header nav a {
      /* use for debugging layout */
      color: #333;
      font-family: "Montserrat", sans-serif;
      font-size: 0.9em;
      letter-spacing: 0.05em;
      font-variant: small-caps;
      padding: 1px 0;
      text-decoration: none;
    }

    .content-wrapper {
      width: 100%;
      /* Adjust this value to match your header's height */
      padding: 0px;
      /* If you want the content itself to have a separate scrollbar: */
      overflow-y: auto;
    }

    .the-logo-narrow {
      display: block;
      float:left;
      margin-top: 10px;
      margin-bottom: 1rem;
      padding: 0 0 0  30px;
      height: 90px;
      z-index: 1;
    }

    /* TYPOGRAPHY + STRUCTURE */
    /* p, */
    label {
      color: #1f1f1f;
      width: inherit;
      max-width: 70ch;
      line-height: 1.2;
      font-family: 'Lato-Light', sans-serif;
      font-size: 1.2em;
      padding: 0 0.5em 0.4em 0.5em;
    }

    .intro-content {
      /* All pages */
      align-content: center;
      align-items: center;
      background-color: #f3ede1;
      clear: both;
      margin: 3px 0;
    }

    form {
      margin: 1rem 2rem;
    }

    figure {
      display: block;
      align-items: right;
    }


    div .hangleft {
      padding: 2rem 0;
      display: flex;
      flex-direction: row;
    }

    .hangleft h1 {
      display: block;
      text-align: left;
      font-family: "Montserrat-Light";
      font-variant: normal;
      font-weight: 300;
      line-height: 1.5;
      font-size: 1.7em;
      margin: 1.2rem 0;
      margin-left: 0;

    }

    img.index-banner {
      margin: 1rem;
      float: right;
      box-shadow: 3px 3px 10px rgba(168, 123, 123, 0.6);
      background-color: #f3ede5;
      border-radius: 0.5em;
      width: 65%;
    }

    #contact {
      background-color: rgb(53, 105, 53);
    }

    #services,
    #contact #free-audio {

      padding: 0.5rem;
      background-color: #f3ede5;
    }

  #about
    {
       margin: 0 5rem;
       background-color: white;
    }
    #about p {
      max-width: 65ch;
    }
    #services,

    #client-talk {
      background-color: #f3ede5;
      width: inherit;
      padding: 2px;
    }

    h1 {
      margin-block: 0.67em;
      font-family: "Montserrat-Light";
      font-size: 1.9em;
    }

    h3 {
      display: block;
      text-align: center;
      font-variant: normal;
      padding: 0.5rem 0;
      font-size: 1.3em;
      font-family: "Montserrat-Light";
    }

    h2 {
      display: block;
      font-family: "Montserrat-Light";
      text-align: center;
      font-variant: normal;
      font-weight: 300;
      line-height: 1.5;
      font-size: 1.8em;
      margin: 0.4rem;
  
    }

    h2.different-support {
      margin-bottom: 0.5rem;
    }

    h2.about-me {
      margin-bottom: 1.5rem;
      padding-bottom: 0;
      line-height: 1;
    }

    h2.miss-the-mark {
      margin: 0 1.2rem;
    }

    div #questions {
        margin: 0 5rem;
    }

    h2.simple h2.common-questions {
      margin: 0;
    }

    .container-simple {
      max-width: 1024px;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
    }

    .container.different {
      max-width: 1024px;
      margin: 0 auto;
      display: flex;
      flex-direction: row;
    }
     .container.different img {
      width: 50%;
     }
    
    .simple-line-card {
      width: 25%;
      padding: 0 20px;
    }

    article.onBeige h1 {
      font-size: 3em;
      font-weight: 400;
    }

    article.onWhite h3 {
      padding: 0;
      font-size: 1.4em;
    }




    h4 {
      display: block;
      padding: 0;
      margin: 0;
      text-align: center;
      font-family: "Montserrat-Regular";
    }

      h5 {
      color: #228833;
      display: block;
      font-size: 1.3em;
      line-height: 1.3;
      padding: 0;
      margin-top:0;
      padding-bottom: 0.8rem;
      padding-top: 0.8rem;
      text-align: center;
      font-family: "Montserrat-Regular";
    }
    .card h4 {
      width: 100%;
      font-size: 1.8em;
      margin-top: 0;
      padding: 0 0 10px 0;
      color: #228833;
      /* color: #01762e7c; */
    }

    article.onWhite h4 {
      padding: 1rem;
     color: #228833;
      /* color: #01762e7c; */
      font-size: 1.5em;
      font-weight: 700;
      font-family: "Montserrat-Regular";
    }

    .card h3 {
      display: block;
      font-size: 1.5rem;
    }

    #services h3 {
      padding-top: 1rem;
      margin-bottom: 0;
    }



    .primary-card {
      width: 100%;
      background-color: whitesmoke;
    }

    .line-card {
      width: 30%;
      box-shadow: 1px 3px 10px rgba(204, 204, 204, 0.6);
      background-color: #f3efe7;
      border-radius: 1em;
      margin: 0.8rem;
      margin-bottom: 3rem;
      padding: 1.5rem;
    }

    #this-is-for-you {
      display: flex;
      background-color: white;
    }

    /* CARD LAYOUT ------------- */
    .card {
      box-shadow: 3px 3px 6px rgba(168, 123, 123, 0.6);
      background-color: white;
      border-radius: 1em;
      margin: 0.8rem;
      padding: 1.5rem 5rem;
      align-items: center;
    }

    .card p {
      text-align: center;
    }

    p {
      font-size: 1.3rem;
    }

    .green-circle {
      color: #01762ef4;
      font-weight: 700;
      font-size: 0.7em;
      padding-right: 1em;
    }

    .card ul {
      /* margin-top: 1rem; */
      margin: 1rem 8rem;
    }

    .card li,
    .line-card li,
    article.onWhite li {
      list-style: none;
      background-size: 18px;
      padding-left: 2.3rem;
      text-indent: -1.8rem;
      line-height: 1.8;
      font-family: "Lato-light";
      font-size: 1.3em;
    }

    article {
      /* All pages */
      width: inherit;
      background-color: #fcfbf8;
      /* #E6C4BC; using a transparent overlay in article */
      border-top: 0 solid blue;
      /* use for debugging layout */
      clear: both;
      margin: 0;
      padding: 1rem;
    }

    article.onBeige {
      background-color: #f3ede5;
      margin: 1rem;
          padding-bottom: 1.5rem;
    }

    article.onBeige p {
      max-width: 65ch;
    }

    article.onWhite {
      padding-bottom: 1.5rem;
      background-color: white;
    }
    article.simple {
      padding-bottom: 2rem;
      background-color: white;
    }

    ul.sidebyside  {
      padding-top: 1rem;
      float:right;
      width: 45%;
    }

    article.centered {
      text-align: center;
      align-content: center;
    }

    article.centered p {
      font-size: 1.1em;
    }

    .hangright {
      width: 48%;
      display: block;
      float: right;
    }

    .hangright p {
      font-size: 1.3em;
      line-height: 1.45;
    }

    .hangright ul  {
      margin-top: 1rem;
    }

    .hangright ul li {
      font-size: 1.3em;
      line-height: 1.45;
    }

    .hangright h2 {
      margin-top: 0.5rem;
      margin-left: 0;
      padding-right: 0;
    }

   img#randomPic {
      margin: 10px;
      margin-right: 25px;
      box-shadow: 3px 3px 10px rgba(168, 123, 123, 0.6);
      background-color: white;
      border-radius: 0.5rem;
      /* margin-right: 2.5rem; */
      float: left;
      width: 47%;
    }


    /* CTA BUTTONS ----------*/
    .NARROW-SCREEN-FREE-CALL-Button,
    .NARROW-SCREEN-FREE-AUDIO-Button {
      display: block;
      color: white;
      text-align: center;
      width: 35%;
      /* margin: 100%-width/2 */
      margin-left: calc(32.5%);
      margin-right: calc(32.5%);
      background-color: #01762e7c;
      border-radius: 10px;
    }

    /* THERE IS TROUBLE IN THEM THERE CENTER */
    .NARROW-SCREEN-FREE-CALL-Button p,
    .NARROW-SCREEN-FREE-AUDIO-Button p {
      margin: 1rem auto;
      color: white;
      font-family: "Lato-Regular", sans-serif;
      padding: 3px 0;
      font-size: 0.9em;
      letter-spacing: 0.1rem;
      font-weight: 500;
    }

    p.green-button {
      align-self: center;
    }

    /*  COLLAPSIBLE Q&A section */
    /* ----------------------------- */
    button {
      border: 0 red solid;
      padding: 20 5px;
    }

    button.collapsible {
      color: rgb(71, 35, 1);
      /* border-bottom: 0 rgb(112, 107, 107) solid; */
      margin-bottom: 5px;
      font-weight: 100;
      background-color: #f3ede5;
      cursor: pointer;
      width: 100%;
      text-align: left;
      font-size: 1.2em;
    }

    /* need to research this */
    input:focus {
      background-color: green;
    }

    select:focus {
      background-color: red;
    }

    /* need to research this */
    .collapsible:after {
      content: "\2303";
      transform: rotate(180deg);
      transform-origin: center;
      width: 25px;
      color: rgb(71, 35, 1);
      float: right;
      text-align: right;
      /* transform-origin: center; */
    }

    /* up arrow */
    .active:after,
    a,
    a:visited {
      transform: rotate(0deg);
      color: rgb(50, 26, 2);
      margin-right: 10px;
    }

    .active,
    .collapsible:hover {
      color: rgb(71, 35, 1);
      background-color: #f3ede5;
    }

    .answer {
      border-top: 0.5px solid gray;
      border-bottom: 0.5px solid grey;
      padding: 0px 18px;
      margin-bottom: 1rem;
      background-color: #f3ede5;
      outline: none;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }

    .answer p {
      margin-top: 0.6rem;
      margin-bottom: 0.6rem;
      font-family: "Lato-light";
      font-size: 1.1em;
      line-height: 1.2;
    }

    /* Footer  items only */
    p.credit {
      font-size: 0.8em;
      padding-bottom: 0;
      margin: 5px 8px;
    }

    footer {
      text-align: center;
      width: inherit;
      margin: 0 auto;
      background-color: black;
      color: whitesmoke;
      padding-top: 1.5rem;
      padding-bottom: 1rem;
    }

    footer p {
      font-family: "Lato-Light", 'Courier New', Courier, monospace;
      font-size: 0.9em;
      line-height: 1rem;
      color: rgb(248, 222, 222);
    }

    footer h2 {
      margin-top: 0;
      text-align: center;
      padding-top: 0;
      font-variant: normal;
      padding-bottom: 0.7rem;
      font-size: 1.8em;
    }

    footer ul {
      list-style: none;
      margin: 10px 0;
      padding: 0;
      display: flex;
      /* make it a flex container */
      justify-content: center;
      /* center items horizontally */
      align-items: center;
      /* center items vertically (optional) */
      flex-wrap: wrap;
      /* optional: wrap on small screens */
    }

    footer ul li {
      padding: 0;
      text-align: center;
    }

    footer ul li a {
      background-color: black;
      display: block;
      color: whitesmoke;
      text-align: center;
      padding: 4px;
      text-decoration: none;
      border-bottom: 2px solid whitesmoke;
      font-size: smaller;
    }

    footer ul li a:visited {
      color: whitesmoke;
      background-color: black;
    }

    footer a:hover {
      color: rgb(208, 92, 15);
      border-bottom: 2px solid rgb(234, 116, 7);
      background-color: rgba(98, 93, 93, 0.565);
    }

    footer hr {
      margin: 20px 40px 0 40px;
      color: rgb(71, 70, 65);
    }

        /* client talking */
    #client-talk h2 {
      flex: 0 0 100%;
      margin-top: 1.5rem;
      scroll-snap-align: start;
    }

    .cards-wrapper {
      display: flex;
      gap: 0.2rem;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 1rem;
    }

    .cards-wrapper .card {
      flex: 0 0 65%;
      scroll-snap-align: center;
    }

    .cards-wrapper p {
      text-align: left !important;
      font-size: 1em;
      font-family: "Lato-Light";
      color: black;
    }

    .cards-wrapper p.italic-font {
      font-family: "Lato-LightItalic";
    }

    .cards-wrapper p.bold-font {
      font-weight: 700;
      font-size: 0.9em;
    }

    /* Optional: hide scrollbar */
    .cards-wrapper::-webkit-scrollbar {
      display: none;
    }
  }