/* Added fallbacks to help with CLS, feel free to remove if it doesn't help on your project */
/* Colours */
/* Fluid heading sizes - set your min/max sizes and you're done! */
/* Some device sizes to use with min-width */
/* adjusted breakpoints for above */
/* 100% widths look better than "Snapping" IMO */
/* Utility */
/* Additional Spacers -- don't think you'll need more than 10, but if you do -- maybe just use a custom class  :)  */
#path-two,
#path-one {
  fill: #686868;
}

#masthead .container-logo {
  max-width: 180px;
}
#masthead .container-logo img {
  height: auto;
  width: fit-content;
  transition: height 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#masthead {
  padding-bottom: 14px;
  background: #F3F3F3;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
#masthead .container-logo img {
  height: unset;
  width: fit-content;
}
#masthead .menu-span,
#masthead .icon-icons_menu {
  color: #007EA7;
}
#masthead.sticky #path-two,
#masthead.sticky #path-one {
  fill: #FFF;
}
#masthead.sticky .menu-span,
#masthead.sticky .icon-icons_menu {
  color: #AAE2F7;
}
@media screen and (min-width: 1431px) {
  #masthead.sticky .container-logo img {
    height: unset;
  }
}

#main {
  margin-top: 3em;
  margin-bottom: 3em;
  padding-top: 8em;
}
#main .minute-read,
#main .date-post-created {
  color: #007EA7;
  font-family: "Plus Jakarta", "sans-serif";
  font-size: 16px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 2.24px;
  text-transform: uppercase;
}
#main .recent-article-item {
  margin-top: 32px;
  margin-bottom: 16px;
}
#main .recent-article-item .date-post-created {
  padding-right: 16px;
  border-right: 1px solid #007EA7;
}
#main .container-read-time {
  margin-bottom: 16px;
}
#main .container-date-main {
  margin-top: 32px;
  margin-bottom: 16px;
}
#main .minute-read {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 26px;
  text-transform: lowercase;
  padding-left: 16px;
}
#main h1.h2 {
  margin-bottom: 32px;
}
#main .read-article {
  font-size: clamp(1rem, 16px + (18 - 16) * (100vw - 640px) / 1280, 1.125rem);
  line-height: normal;
  font-family: "Plus Jakarta", "sans-serif";
  color: #002A38;
  font-weight: 500;
  gap: 4px;
  margin-top: 22px;
  width: fit-content;
}
#main .read-article:hover {
  color: #007EA7;
}
#main .read-article:hover .icon-icon-arrow-right {
  color: #55C5F0;
}
#main .icon-icon-arrow-right {
  color: #007EA7;
}
#main .recent-article-item {
  border-bottom: 1px solid #CDCDCD;
  padding-bottom: 32px;
  padding-top: 32px;
}
#main img {
  border-radius: 16px;
}
@media screen and (min-width: 1025px) {
  #main {
    margin-top: 8em;
    margin-bottom: 8em;
  }
  #main .date-post-created {
    margin-top: 48px;
  }
  #main .container-date-main {
    margin-top: 48px;
    margin-bottom: 16px;
  }
  #main .recent-article-item {
    padding-bottom: 48px;
    padding-top: 48px;
  }
  #main .recent-article-item .date-post-created {
    margin-top: 0;
  }
}