html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  text-decoration: none;
  color: inherit;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.container {
  width: 90%;
  margin: auto;
}

@media screen and (min-width: 1440px) {
  .container {
    width: 80%;
    margin: auto;
  }
}

.navigationBar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 0;
  width: 100%;
  height: 50px;
  padding: 0 calc(100% - 90%);
  position: fixed;
  z-index: 99;
  background-color: white;
  -webkit-box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
          box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;
  font-family: "Public Sans", sans-serif;
  font-weight: 400;
  color: #2d314d;
}

@media screen and (min-width: 1440px) {
  .navigationBar {
    height: 70px;
  }
}

.navigationBar .companyLogo {
  cursor: pointer;
}

.navigationBar .navigationLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1em;
  padding: 2em 1em;
  border-radius: 0.2em;
  position: absolute;
  left: 100%;
  color: #9698a6;
}

@media screen and (min-width: 1440px) {
  .navigationBar .navigationLink {
    position: unset;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 2em;
  }
  .navigationBar .navigationLink a {
    padding: 0 0 26px 0;
    position: relative;
  }
  .navigationBar .navigationLink a:hover {
    color: #2d314d;
  }
  .navigationBar .navigationLink a:hover::after {
    width: 100%;
    left: 0;
  }
  .navigationBar .navigationLink a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    display: block;
    background: none repeat scroll 0 0 transparent;
    height: 3px;
    width: 0;
    background: #31d35c;
    -webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
  }
}

.navigationBar .navigationLink[data-visible="true"] {
  top: calc(50px + 5vw);
  left: 5vw;
  right: 5vw;
  background-color: white;
}

.navigationBar .mainButton {
  font-size: 14px;
  background: #31d35c;
  background: linear-gradient(144deg, #31d35c 0%, #2bb7d0 100%);
  padding: 0.8em 1.5em;
  border-radius: 2em;
  color: white;
  display: none;
}

@media screen and (min-width: 1440px) {
  .navigationBar .mainButton {
    display: block;
  }
}

.navigationBar .mobileNavToggle {
  display: block;
  cursor: pointer;
  width: 2rem;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-image: url(https://i.postimg.cc/SQVqNKHW/icon-hamburger.png);
}

@media screen and (min-width: 1440px) {
  .navigationBar .mobileNavToggle {
    display: none;
  }
}

.navigationBar .mobileNavToggle[aria-expanded="true"] {
  display: block;
  cursor: pointer;
  width: 2rem;
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  background-image: url(https://i.postimg.cc/PJVBbCk9/icon-close.png);
}

@media screen and (min-width: 1440px) {
  .navigationBar .mobileNavToggle[aria-expanded="true"] {
    display: none;
  }
}

.hero {
  margin-bottom: 7.5em;
  font-family: "Public Sans", sans-serif;
  text-align: center;
  overflow-x: hidden;
  font-family: "Public Sans", sans-serif;
}

.hero h1 {
  color: #2d314d;
  font-size: 30px;
  font-weight: 400;
}

@media screen and (min-width: 1440px) {
  .hero h1 {
    font-size: 50px;
  }
}

.hero h2 {
  color: #2d314d;
  font-size: 25px;
}

@media screen and (min-width: 1440px) {
  .hero h2 {
    font-size: 35px;
  }
}

.hero h3 {
  color: #2d314d;
  font-size: 20px;
}

@media screen and (min-width: 1440px) {
  .hero h3 {
    font-size: 25px;
  }
}

.hero p {
  font-size: 14px;
  font-weight: 300;
  color: #9698a6;
}

@media screen and (min-width: 1440px) {
  .hero p {
    font-size: 16px;
  }
}

@media screen and (min-width: 1440px) {
  .hero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    gap: 5em;
    text-align: start;
    background-image: url(https://i.postimg.cc/5NGh6QgF/bg-intro-desktop.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 700px -170px;
    margin-bottom: 0em;
  }
}

.hero .heroImage {
  width: 100%;
  background-image: url(https://i.postimg.cc/Dy8VvPrT/bg-intro-mobile.png);
  background-size: cover;
  background-repeat: no-repeat;
}

@media screen and (min-width: 1440px) {
  .hero .heroImage {
    background-image: none;
    width: 60%;
    position: relative;
    right: -120px;
  }
}

.hero .mainImage {
  width: 100%;
}

.hero .Intro {
  width: 100%;
  padding: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.2em;
}

@media screen and (min-width: 1440px) {
  .hero .Intro {
    margin: 0 0 0 calc(100% - 90%);
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    width: 40%;
  }
}

.hero .Intro .heroButton {
  font-size: 14px;
  background: #31d35c;
  background: linear-gradient(144deg, #31d35c 0%, #2bb7d0 100%);
  padding: 0.8em 1.5em;
  border-radius: 2em;
  color: white;
}

@media screen and (min-width: 1440px) {
  .hero .Intro .heroButton {
    font-size: 16px;
  }
}

.whyChooseUs {
  margin: 7.5em auto 7.5em auto;
  text-align: center;
  font-family: "Public Sans", sans-serif;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: distribute;
      align-content: space-around;
  gap: 3em;
}

.whyChooseUs h1 {
  color: #2d314d;
  font-size: 30px;
  font-weight: 400;
}

@media screen and (min-width: 1440px) {
  .whyChooseUs h1 {
    font-size: 50px;
  }
}

.whyChooseUs h2 {
  color: #2d314d;
  font-size: 25px;
}

@media screen and (min-width: 1440px) {
  .whyChooseUs h2 {
    font-size: 35px;
  }
}

.whyChooseUs h3 {
  color: #2d314d;
  font-size: 20px;
}

@media screen and (min-width: 1440px) {
  .whyChooseUs h3 {
    font-size: 25px;
  }
}

.whyChooseUs p {
  font-size: 14px;
  font-weight: 300;
  color: #9698a6;
}

@media screen and (min-width: 1440px) {
  .whyChooseUs p {
    font-size: 16px;
  }
}

@media screen and (min-width: 1440px) {
  .whyChooseUs {
    -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 1440px) {
  .whyChooseUs {
    text-align: start;
    margin-top: 0em;
  }
}

.whyChooseUs .gridItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1em;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

@media screen and (min-width: 1440px) {
  .whyChooseUs .gridItem {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.whyChooseUs .gridItem:first-child {
  margin-bottom: 1em;
}

@media screen and (min-width: 1440px) {
  .whyChooseUs .gridItem:first-child {
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: 5;
  }
}

@media screen and (min-width: 1440px) {
  .whyChooseUs .gridItem:first-child p {
    width: 60ch;
  }
}

.articlePost {
  margin: 7.5em auto 7.5em auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-line-pack: distribute;
      align-content: space-around;
  gap: 2em;
  font-family: "Public Sans", sans-serif;
}

@media screen and (min-width: 1440px) {
  .articlePost {
    -ms-grid-columns: (1fr)[4];
        grid-template-columns: repeat(4, 1fr);
  }
}

.articlePost h1 {
  color: #2d314d;
  font-size: 30px;
  font-weight: 400;
}

@media screen and (min-width: 1440px) {
  .articlePost h1 {
    font-size: 50px;
  }
}

.articlePost h2 {
  color: #2d314d;
  font-size: 25px;
}

@media screen and (min-width: 1440px) {
  .articlePost h2 {
    font-size: 35px;
  }
}

.articlePost h3 {
  color: #2d314d;
  font-size: 20px;
}

@media screen and (min-width: 1440px) {
  .articlePost h3 {
    font-size: 25px;
  }
}

.articlePost p {
  font-size: 14px;
  font-weight: 300;
  color: #9698a6;
}

@media screen and (min-width: 1440px) {
  .articlePost p {
    font-size: 16px;
  }
}

.articlePost .postItem {
  background-color: white;
  border-bottom: 1.5px solid #f3f4f6;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0.35em;
  border-bottom-right-radius: 0.35em;
}

.articlePost .postItem:first-child {
  border-bottom: unset;
  text-align: center;
}

@media screen and (min-width: 1440px) {
  .articlePost .postItem:first-child {
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: 5;
    text-align: start;
  }
}

.articlePost .postItem .postImage {
  width: 100%;
  cursor: pointer;
}

.articlePost .postItem .postImage img {
  width: 100%;
  border-top-left-radius: 0.35em;
  border-top-right-radius: 0.35em;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

@media screen and (min-width: 1440px) {
  .articlePost .postItem .postImage img {
    height: 225px;
  }
}

.articlePost .postItem .postContent {
  border-right: 1.5px solid #f3f4f6;
  border-left: 1.5px solid #f3f4f6;
  padding: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5em;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.articlePost .postItem .postContent h3 {
  cursor: pointer;
}

.articlePost .postItem .postContent h3:hover {
  color: #31d35c;
}

.articlePost .postItem .postContent .author {
  font-size: 12px;
}

.footer {
  background-color: #2d314d;
  padding: 2em 1em;
  font-family: "Public Sans", sans-serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2em;
}

.footer h1 {
  color: #2d314d;
  font-size: 30px;
  font-weight: 400;
}

@media screen and (min-width: 1440px) {
  .footer h1 {
    font-size: 50px;
  }
}

.footer h2 {
  color: #2d314d;
  font-size: 25px;
}

@media screen and (min-width: 1440px) {
  .footer h2 {
    font-size: 35px;
  }
}

.footer h3 {
  color: #2d314d;
  font-size: 20px;
}

@media screen and (min-width: 1440px) {
  .footer h3 {
    font-size: 25px;
  }
}

.footer p {
  font-size: 14px;
  font-weight: 300;
  color: #9698a6;
}

@media screen and (min-width: 1440px) {
  .footer p {
    font-size: 16px;
  }
}

@media screen and (min-width: 1440px) {
  .footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 1em;
    padding: 2em calc(100% - 90%) 2em calc(100% - 90%);
  }
}

.footer .importantLinks {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2em;
}

@media screen and (min-width: 1440px) {
  .footer .importantLinks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 10em;
  }
}

.footer .importantLinks .socialLinks {
  color: white;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2em;
}

@media screen and (min-width: 1440px) {
  .footer .importantLinks .socialLinks {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.footer .importantLinks .socialLinks .social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 1em;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

@media screen and (min-width: 1440px) {
  .footer .importantLinks .socialLinks .social {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}

.footer .importantLinks .menuLinks {
  color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1em;
}

@media screen and (min-width: 1440px) {
  .footer .importantLinks .menuLinks {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 5em;
  }
}

.footer .importantLinks .menuLinks .internal, .footer .importantLinks .menuLinks .external {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1em;
}

@media screen and (min-width: 1440px) {
  .footer .importantLinks .menuLinks .internal, .footer .importantLinks .menuLinks .external {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}

.footer .importantLinks .menuLinks .internal a:hover, .footer .importantLinks .menuLinks .external a:hover {
  color: #31d35c;
}

.footer .callToAct {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1em;
}

@media screen and (min-width: 1440px) {
  .footer .callToAct {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
}

.footer .callToAct button {
  font-size: 14px;
  background: #31d35c;
  background: linear-gradient(144deg, #31d35c 0%, #2bb7d0 100%);
  padding: 0.8em 1.5em;
  border-radius: 2em;
  color: white;
}
/*# sourceMappingURL=style.css.map */