/*
Font color headings: rgba(0, 0, 0, 0.87)
Main color: #4051b5
Accent: #7c4dff

*/

:root {
   --blue: rgba(64, 81, 181, 1);
   --blue-background: rgba(64, 81, 181, 0.8);
   --purple: rgba(124, 77, 255, 1);
   --purple-background: rgba(124, 77,255, 0.05);
}

/* used to center CTA button on Services pages */
p:has(.center-me) {
   margin-top: 5em;
   text-align: center;
}

/* full width cards used on the blog homepage */
.full-width-cards {
   display:block !important;
}

.full-width-cards > ul > li {
   margin: 1em 0 !important;
}

/* styles for the CTA box */
.ypnw {
   border: 1px solid var(--blue);
   border-radius: 0.1rem;
   margin-top: 5em;
   text-align: center;
}

.ypnw-title {
   color: var(--blue);
   font-size: 1.2em;
   font-weight: 400;
}

.ypnw-btn-container {
   a {
      margin: 0 2em;
      width: 12em;
   }
   margin: 3em 0;
   text-align: center;
}


/* list with icons on homepage */
.benefits-list {
   display: flex;
   justify-content: center;
   padding: 3em 0 0 0;   
}

.benefits-list .twemoji {
   color: var(--blue);
   margin-right: 1em;
}

/* decorative flowchart on homepage */
.fake-flowchart {
   color: var(--blue-background);
   padding: 3em;
   display: flex;
   flex-direction: row;
   justify-content: center;
}

.fake-flowchart-ele {
   background-color: var(--blue-background);
   border-radius: 0.1rem;
   color: white;
   display: inline-block;
   padding: 1em;
   text-align: center;
   width: 13em;
}

/* homepage header and subheading */

.homepage-header {
   text-align: center;
   margin-bottom: 5em;
}

.homepage-subheading-large {
   color: var(--md-default-fg-color--light);
   font-size: 1.5625em;
   font-weight: 300;
   line-height: 1.4;
   margin-bottom: 1.75em;
}

.homepage-subheading-small {
   color: var(--md-default-fg-color--light);
   font-size: 1.3em;
   text-align: center;
}

/* grid on homepage */

.homepage-services-grid li {
  background-color: var(--purple-background);
  border: 1px solid var(--blue) !important;
}


/* overriding theme styles */

.md-header {
   box-shadow: none;
}


@media only screen and (max-width: 800px) {

   .ypnw {
      border: none;
   }

   .ypnw-btn-container {
      justify-content: center;
      display: flex;
      flex-direction: column;
      margin: 2em 0;
      a {
         margin: 1em 1em;
         width: auto;
      }
   }

   .fake-flowchart {
      display: none;
   }

 }