h1, h2, h3, h4, h5, h6, p, a, span, i, li, ul {
-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.flex {
  display:flex;
}

.space-between {
justify-content:space-between;
}



#caseStudyTemplate #module-wrapper {
    display: flex;
    justify-content: center;
}

#caseStudyTemplate {
    margin: 40px 60px;
}

.hero-image {
      width: 100%;
      height: 520px; /* Adjust height as needed */
      background-size: cover;
      background-position: center;
  border-radius:15px;
    }

.blog-post-content {
display:flex;
}

ol {
    margin-left: 15px;
}

.blog-post-body {
    max-width: 70%;
  padding-right:30px;
  width:70%;
}

.blog-post-body ul li {
    margin-bottom: 16px;
  line-height:1.5;
}

.post-form-module form {
    padding: 24px 20px;
    border: 1px solid #D6D6D6;
    border-radius: 20px;
  max-width:340px;
}

.post-form-module form .hs_submit.hs-submit {
    margin-top: 24px;
}

.blog-post-body p {
padding-bottom:16px;
}

.blog-post-body h3 {
color: #000;
font-family: norms-medium;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px;
 margin:0px 0px 12px;
}
.blog-post-body a {
    color: #000;
    text-decoration-line: underline;
}

.blog-post-body a span:hover {
    color: #008AFF;
  text-decoration:underline;
}

.blogpost .submitted-message h4 {
    margin-bottom: 12px;
}

.blogpost .submitted-message {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

ul {
    padding-left: 25px;
  margin-bottom:24px;
}

.post-form-module .hbspt-form li.hs-form-booleancheckbox label span {
    display: inline-grid;
    top: -30px !important;
    left: 40px;
    font-size: 14px;
  color:#000;
  margin-right: 30px;
}

.hbspt-form li.hs-form-booleancheckbox {
right:0px !important;
}
  
    .blogpost {
      margin: 0 auto;
      padding: 20px;
    }

.hubspot-tag-post {
    margin: 46px 0 34px;
}

.blogpost h1 {
color: #000;
font-family: Circuit;
font-size: 42px;
font-style: normal;
font-weight: 400;
line-height: 44px; /* 104.762% */
  max-width:800px;
}

.blogpost .authortime {
display:flex;
flex-direction: column;
margin-bottom:40px;
  font-family:'norms-bold', sans-serif;
}

.post-form-module .hs-form-field {
min-width:100%;
}

.post-form-module p.hubspot-form-header {
    font-size: 28px;
    line-height: 32px;
    font-weight: 700;
    font-style: normal;
    font-family: norms-medium;
    padding-right: 15px;
}

.post-form-module fieldset.form-columns-2 {
    display: flex;
    flex-direction: column;
}

form ul {
    padding-left: 0;
}

.removeDecoration {
color:#000;
  text-decoration:none;
  font-family:norms;
}

.blogpost h2 {
color:#000;
font-family: norms-bold;
font-size: 28px;
font-style: normal;
font-weight: normal;
line-height: 32px;
  margin:16px 0 12px 0;
}

.blogpostul {
    margin: 40px 30px;
}


.blogpost p {
color: #000;
font-family: norms;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
}
.authortime time {
padding:40px 0 12px 0;
}
  
    article {
      padding: 20px 40px 40px 40px;
      background: #fff;
    }

.author-bio {
    font-family: 'norms', sans-serif;
    margin-top: 12px;
  line-height:24px;
  font-weight:400;
}

{####################### PDF VIEW CSS  ####################}

  #pdf-view-wrapper{
    display:flex;
    flex-direction: column;
    width: min-content;
    position: relative;
    padding-top: 20px;
  } 

  #case-name{
    display:block;
    position:absolute;
    top: 10px;
    width: 100px;
    height: 32px;
    border-radius:100px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-align: center;
    background-color:#E6F3FF;
    border:none;
  }

#case-name:hover {
    background: #d2e9ff !important;
}

  #case-name a{
    text-decoration: none;
    color: #000;
    text-transform: uppercase;
    font-family:'norms-medium', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  div#pdf-container canvas {
      max-width: 98vw;
      max-height: -webkit-fill-available;
      text-align: center;
      justify-content: center;
      border-radius: 15px;
    height:-webkit-fill-available;
      /* display: flex; */
  }
    
  #pdf-controls {
    display: flex;
    align-self: end;
    margin-bottom: 10px;
    text-align: center;
    align-items: center;
  }

  #pdf-controls span{
    text-align: center;
    width: 120px;
  }

  #pdf-controls button {
    padding: 5px 0px;
    margin: 0 5px;
    border: none;
    background-color:transparent;
  }

  #module-wrapper{
    display: flex;
    flex-direction: row;
  }

  #pdf-download-wrapper{
    display: flex;
    flex-direction: column;
    width: 336px;
    height: fit-content;
    margin-left: 44px;
    margin-top: 77px;
    border: solid 1px #D6D6D6;
    border-radius: 15px;
    padding: 24px 20px 24px 20px;
  }

  #pdf-download-wrapper button{
    display: block;
    width: 296px;
    height: 50px;
    border:none;
    border-radius: 100px ;
    background-color: #0055FF;
  }

#pdf-download-wrapper button:hover {
    background: #008aff;
    cursor: pointer;
}

  #pdf-download-wrapper button a{
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px; /* 150% */
    font-family:'norms', sans-serif;
  }

  #pdf-download-wrapper span{
    font-size: 28px;
    font-weight: 400;
    line-height: 32px;
    text-align: left;
    margin-bottom: 24px;
    font-family: 'norms-bold', sans-serif;
  }

  @media (max-width: 768px) {
    
      .blogpost h1 {
    font-size: 28px;
    line-height:32px !important;
}
    
    .blogpost h2 {
font-size:24px; 
}
    
    
    #caseStudyTemplate{
      padding: 0px 20px 0px 20px;
      margin:0;
    }
    
      
    div#pdf-container canvas {
  max-width: 100% !important; /* Ensure the canvas scales correctly */
  height: auto !important; /* Maintain aspect ratio */
  margin: 0 auto; /* Center canvas horizontally */
  border-radius: 15px;
     }
    
    #module-wrapper{
      flex-direction: column;
      align-items: center;
    }

    #pdf-download-wrapper{
      align-items: center;
      border-right: 0px;
      border-left: 0px;
      margin: 32px 0px 24px 0px;
      padding: 20px 0px 24px 0px;
      border-radius: 0px;
      width: 100%;
      height: fit-content;
    }
    
    #pdf-download-wrapper button {
      padding: 8px 24px;
    }

    #pdf-download-wrapper span{
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: 28px; /* 140% */
  font-family: 'norms-bold', sans-serif;
    }

    #pdf-container {
      margin-top: 20px;
      align-self: center;
      width:100%;
    }
    
    #pdf-view-wrapper{
      display:flex;
      flex-direction: column-reverse;
      width: 100%;
    } 
    
    #pdf-controls {
      width: 100%;
      margin-top: 16px;
      align-items: center;
      align-self: center;
    }
    
    #pdf-controls span{
       width: 85vw;
    }

    #pdf-download-wrapper button {
      width: 100%;
    }

  }



{####################### RELATED ARTICLES CSS  ####################}
.related-articles {
    padding: 0px 40px 20px 40px;
    background-color: #fff;
}

.related-articles h2 {
    margin: 0px 0px 24px 0px;
  font-size:42px;
  font-family:circuit;
}

.related-articles-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.related-article-item {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    flex: 1 1 calc(33.333% - 20px);
    display: flex;
    flex-direction: column;
}

.related-article-item img {
    width: 100%;
    border-radius: 15px;
    margin-bottom: 24px;
    min-height: 300px;
    object-fit: cover;
    height: auto;
}

.related-article-item h3 a {
    font-family: 'norms-bold';
    font-size: 20px;
    font-style: normal;
    font-weight: normal;
    line-height: 28px;
    color: #000000;
}

    .related-article-item img:hover {
filter:brightness(0.75);
      transition: filter 0.3s ease;
}
  
  .related-article-tags .tag:hover {
background:#d2e9ff;
    cursor: pointer;
}
  
  .related-article-item h3 a:hover {
text-decoration:underline;
    color:#555 !important;
}

.related-article-tags {
    margin-bottom: 16px;
  display: flex;
    flex-wrap: wrap;
}

.related-article-tags .tag:last-child {
    margin-bottom: 0px;
}

.related-article-tags .tag {
   border: 50px;
    border-radius: 50px;
    color: #000;
    font-family: norms-medium;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    padding: 10px;
    text-decoration: none;
    text-transform: uppercase;
  background: #e6f3ff;
  max-height: fit-content;
}
  
  .related-article-tags .tag:not(:first-child) {
    margin-left: 10px;
}

.blue {
color:#05F;
}

.authorbio {
  margin-top:12px;
font-family: norms;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
}

#case-name:hover {
    background: #d2e9ff;
}

.authorSection {
  font-family: 'norms-bold', sans-serif;
  padding:24px 0;
border-top: 2px solid #F7F7F7;
  border-bottom:2px solid #F7F7F7;
  margin-top:30px;

}

.authorSection span {
    font-family: norms-bold, sans-serif;
}

.authorSection a {
font-family: 'norms-bold', sans-serif;
}

.related-article-item h3 {
    padding: 0px 0px;
    font-size: 18px;
    margin: 0;
}

.related-article-item h3 a {
    text-decoration: none;
}

.related-article-item h3 a:hover {
    color: #0077c8;
}
{####################### RELATED ARTICLES CSS  ####################}

@media (max-width: 768px) {
  
  .related-article-tags .tag:not(:first-child)  {
margin-left:0px;
    height:fit-content;
}
  .related-article-tags .tag {
text-wrap: nowrap;
    display: inline-flex;
    margin: 0 0 10px 0;
}
 
  
  .blog-post-body {
    width: 100%;
}
  
  .related-articles h2 {
    font-size:22px;
}
  
  
  #module-wrapper{
    flex-direction: column;
  }

  {# related articles #}
  .related-articles-container {
        flex-direction: column;
    }

    .related-article-item {
        flex: 1 1 100%;
    }
   {# related articles #}
  {# hide on mobile as users want to add form in mid content they do so with a module #}
  .post-form-module form {
    display: none;
}
  
  .blog-post-body {
  max-width:100%;
  padding-right:0px;}
  
  article {
  padding:0px;}

.hero-image {
    height: 260px;
    border-radius: 15px;
}
  
  .hubspot-tag-post {
    margin: 24px 0;
}
  
  .authortime time {
    padding: 24px 0 12px 0;
}
  
  .related-articles {
    padding: 20px 0px 20px 0px;
    background-color: #fff;
}
  
 .related-article-tags .tag:not(:last-child) {
    margin-right: 10px;
}
  
  
}

@media (min-width: 1400px) {
.hero-image {
    min-height: 520px;
}
}

  @media (min-width:1550px) and (max-width: 1999px) {
.related-article-item img {
min-height:400px;
}
}